src/_includes/cv_styles.css

   1 /* CV */
   2
   3 body .cv-header {
   4   display: flex;
   5   align-items: center;
   6   padding: 0.5rem;
   7   flex-direction: row;
   8   flex-wrap: wrap;
   9   gap: 1rem;
  10 }
  11
  12 body .cv-header h1 {
  13   font-size: 2rem;
  14   font-weight: bolder;
  15   flex: 1 0 auto;
  16 }
  17
  18 body .cv-header h1 span {
  19   font-size: 1.1rem;
  20   font-weight: 300;
  21 }
  22
  23 body .cv-header address {
  24   flex: 1 0 auto;
  25   align-self: end;
  26   text-align: end;
  27   font-style: normal;
  28   font-size: 0.9rem;
  29   line-height: 1.6;
  30 }
  31
  32 body .cv-header address a {
  33   display: block;
  34   white-space: pre;
  35 }
  36
  37 body .cv-header address a::after {
  38   margin-inline-start: 0.5rem;
  39   display: inline-block;
  40   position: relative;
  41   right: 0.5pt;
  42   background-size: 1rem 1rem;
  43   width: 1rem;
  44   height: 1rem;
  45   bottom: -2pt;
  46   right: 2pt;
  47 }
  48
  49 body .cv-header address a[href*="drewedgar.com"]::after {
  50   content: '🌐';
  51 }
  52
  53 body .cv-header address a[href^="mailto"]::after {
  54   content: '📧';
  55 }
  56
  57 body .cv-header address a[href^="tel"]::after {
  58   content: '📞';
  59 }
  60
  61 body .cv-header address a[href^="https://www.linkedin.com"]::after {
  62   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z' fill='%23007EBB'/%3E%3Cpath d='M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");
  63 }
  64
  65 body .cv-header address a[href^="https://bsky.app/"]::after {
  66   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 320'%3E%3Cpath fill='%2318a2f7' d='M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z'/%3E%3C/svg%3E");
  67 }
  68
  69 body .cv-header address a[href^="https://scholar.google.com"]::after {
  70   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3EGoogle Scholar icon%3C/title%3E%3Cpath d='M12 24a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0-24L0 9.5l4.838 3.94A8 8 0 0 1 12 9a8 8 0 0 1 7.162 4.44L24 9.5z' fill='%23007BFF'/%3E%3C/svg%3E");
  71 }
  72
  73 /* CV content */
  74 body .cv-content {
  75   display: grid;
  76   grid-template-columns: max-content 1fr;
  77   row-gap: 0.75rem;
  78 }
  79
  80 body .cv-content > section {
  81   grid-column: 1 / 3;
  82   width: 100%;
  83   display: grid;
  84   grid-template-columns: subgrid;
  85   justify-items: stretch;
  86   align-items: start;
  87   row-gap: 0.75rem;
  88   column-gap: 1rem;
  89   border-block-start: 2px solid var(--accent-color-normal);
  90   padding-block-start: 0.75rem;
  91   padding-inline: 0.5rem;
  92   margin-inline: 0.25rem;
  93   line-height: 1.4;
  94 }
  95
  96 body .cv-content > section > h2 {
  97   grid-column: 1 / span 1;
  98   margin-block-start: 0.2rem;
  99   line-height: 1;
 100   font-size: 1.1rem;
 101   font-weight: 200;
 102   text-transform: uppercase;
 103 }
 104
 105 body .cv-content > section > p,
 106 body .cv-content > section > section {
 107   grid-column: 2 / 3;
 108 }
 109
 110 body .cv-content > section > section {
 111   display: grid;
 112   gap: 0.25rem;
 113 }
 114
 115 body .cv-content > section > section > header {
 116   display: grid;
 117   grid-template-columns: 1fr max-content;
 118   column-gap: 0.25rem;
 119 }
 120
 121 body .cv-content > section > section > header > h3 {
 122   grid-column: 1 / span 1;
 123   font-size: 1rem;
 124   font-weight: bolder;
 125   white-space: wrap;
 126   overflow: hidden;
 127 }
 128
 129 body .cv-content > section > section > header > span {
 130   grid-column: 1;
 131   font-weight: 200;
 132 }
 133
 134 body .cv-content > section > section > header > span.date {
 135   grid-column: 2;
 136   grid-row: 1;
 137   justify-self: end;
 138 }
 139
 140 body .cv-content > section > section > ul {
 141   padding-inline-start: 1rem;
 142 }
 143
 144 @media screen and (max-width: 50rem) {
 145   body {
 146     padding-inline: 1rem;
 147
 148   }
 149   body .cv-content > section {
 150     margin-bottom: 1rem;
 151     row-gap: 1.5rem;
 152   }
 153   body .cv-content > section > section {
 154     margin-bottom: 2rem;
 155     row-gap: 1rem;
 156   }
 157   body .cv-content > section > section,
 158   body .cv-content > section > p {
 159     grid-column-start: 1;
 160   }
 161   body .cv-content > section > section > header > h3 {
 162     grid-column-end: span 2;
 163   }
 164   body .cv-content > section > section > header > span.date {
 165     grid-row: 2;
 166   }
 167   body .cv-content > section > h2 {
 168     grid-column-end: span 2;
 169     justify-self: center;
 170     font-size: 1.25rem;
 171   }
 172 }
 173
 174 .specialisation,
 175 .publisherNote,
 176 .noteLink {
 177   font-style: italic;
 178 }
 179
 180 .author {
 181   text-decoration-line: underline;
 182   text-decoration-style: dotted;
 183 }
 184
 185 #profilePic {
 186   object-fit: cover;
 187   height: 4em;
 188   width: 4em;
 189   box-shadow: 0.25em 0.25em var(--accent-color-normal);
 190 }
 191
 192 /* supervisor: inline on wide, block (no pipe) on narrow */
 193 .supervisor {
 194   display: inline;
 195 }
 196
 197 @media screen and (max-width: 50rem) {
 198   .supervisor {
 199     display: block;
 200     margin-top: 0.25rem;
 201   }
 202   .supervisor::before {
 203     content: "";
 204   }
 205 }
 206
 207 /* specialisation: inline on wide, block (no pipe) on narrow */
 208 .specialisation {
 209   display: inline;
 210 }
 211 .specialisation::before {
 212   content: "| ";
 213 }
 214
 215 @media screen and (max-width: 50rem) {
 216   .specialisation {
 217     display: block;
 218     margin-top: 0.25rem;
 219   }
 220   .specialisation::before {
 221     content: "";
 222   }
 223 }
 224
 225 /* skills */
 226 .skills span {
 227   font-size: 0.8rem;
 228 }
 229
 230 /* repeated information */
 231 .repeated {
 232   font-style: italic;
 233   font-weight: 300;
 234 }
 235
 236 /* CV print button */
 237 .printButton {
 238   position: fixed;
 239   text-decoration: none;
 240   border: max(0.15vw, 1.5px) solid var(--border-color-normal);
 241   padding: max(0.4vw, 4px) max(0.8vw, 8px);
 242   border-right: none;
 243   border-top-left-radius: max(0.5vw, 5px);
 244   border-bottom-left-radius: max(0.5vw, 5px);
 245   right: 0%;
 246   bottom: 10%;
 247   box-shadow: -0.2vw 0.2vw 0.5vw rgba(0,0,0,0.15);
 248   background-color: var(--background);
 249   z-index: 1;
 250 }
 251
 252 .printButton svg {
 253   width: max(1.5vw, 1.5vh, 25px);
 254   height: max(2vw, 2vh, 40px);
 255   fill: var(--background);
 256   stroke: var(--text-color-normal);
 257 }
 258
 259 .printButton:hover {
 260   background-color: var(--active-color-normal);
 261 }