src/_includes/print.css

   1 @media print {
   2   /* Page setup */
   3   @page {
   4     size: A4 portrait;
   5     margin: 0.75in;
   6   }
   7
   8   /* Root styles (print overrides) */
   9   html {
  10     font-size: 9pt;
  11     scrollbar-gutter: auto;
  12   }
  13
  14   html[data-theme="dark"] {
  15     --hue: 60;
  16     --accent-hue: 20;
  17     --invert-percent: 0;
  18
  19     --background: hsl(var(--hue), 17%, 98%);
  20     --active-color-normal: hsl(var(--hue), 2.94%, 93.67%);
  21     --border-color-normal: hsl(var(--accent-hue), 6.88%, 37.06%);
  22
  23     --text-color-normal: hsl(var(--hue), 0%, 0%);
  24     --secondary-color-normal: hsl(var(--hue), 0%, 10%);
  25     --accent-color-normal: hsl(21, 78.65%, 34.9%);
  26   }
  27
  28   /* Base element styles */
  29   body {
  30     max-width: 880px;
  31     margin-block: 6pt 24pt;
  32     background-color: #ffffff;
  33   }
  34
  35   p,
  36   h2,
  37   h3,
  38   blockquote,
  39   pre,
  40   span,
  41   section > section {
  42     break-inside: avoid;
  43   }
  44
  45   ul {
  46     padding-inline-start: 1.25rem !important;
  47   }
  48
  49   ul li {
  50     padding-inline-start: 0.25rem !important;
  51   }
  52
  53   a {
  54     text-decoration: none;
  55   }
  56
  57   /* Hide UI-only elements */
  58   .header,
  59   .printButton,
  60   .footer {
  61     display: none;
  62   }
  63
  64   /* Links */
  65   a.expandLink[href]:before {
  66     content: "(" attr(href) ") ";
  67     font-size: 5pt;
  68   }
  69
  70   a.noteLink span,
  71   a.expandLink span {
  72     display: none;
  73   }
  74
  75   a.noteLink[href]::after {
  76     content: "(" attr(href) ") ";
  77   }
  78
  79   .addressLinks a {
  80     font-size: 6pt;
  81   }
  82
  83   /* --- CV Layout --- */
  84
  85   /* CV header */
  86   body .cv-header {
  87     padding: 6pt;
  88     gap: 12pt;
  89   }
  90
  91   #profilePic {
  92     object-fit: cover;
  93     height: 48pt;
  94     width: 48pt;
  95     box-shadow: 3pt 3pt var(--accent-color-normal);
  96   }
  97
  98   body .cv-header h1 {
  99     font-size: 18pt;
 100   }
 101
 102   body .cv-header h1 span {
 103     font-size: 12pt;
 104   }
 105
 106   body .cv-header address {
 107     line-height: 1.6;
 108   }
 109
 110   body .cv-header address a::after {
 111     margin-inline-start: 0.5rem;
 112     right: 0.5pt;
 113     bottom: -2pt;
 114     width: 9pt;
 115     height: 9pt;
 116     font-size: 9pt;
 117     background-size: 1rem 1rem;
 118   }
 119
 120   /* CV content */
 121   body .cv-content {
 122     display: grid;
 123     grid-template-columns: max-content 1fr;
 124     row-gap: 9pt;
 125   }
 126
 127   body .cv-content > section {
 128     display: block;
 129     border-block-start: 2px solid var(--accent-color-normal);
 130     column-gap: 12pt;
 131     row-gap: 12pt;
 132     padding-block-start: 9pt;
 133     padding-inline: 6pt;
 134     margin-inline: 3pt;
 135     line-height: 1.4;
 136   }
 137
 138   body .cv-content > section > h2 {
 139     margin-block-start: 0.2rem;
 140     margin-bottom: 6pt;
 141     font-size: 10pt;
 142     line-height: 1;
 143   }
 144
 145   body .cv-content > section > p,
 146   body .cv-content > section > section {
 147     margin-block: 6pt;
 148   }
 149
 150   body .cv-content > section > section {
 151     display: grid;
 152     gap: 0.25rem;
 153   }
 154
 155   body .cv-content > section > section > header {
 156     display: grid;
 157     grid-template-columns: 1fr max-content;
 158     column-gap: 0.25rem;
 159   }
 160
 161   body .cv-content > section > section > header > h3 {
 162     grid-column: 1;
 163     font-size: 9pt;
 164   }
 165
 166   body .cv-content > section > section > header > span {
 167     grid-column: 1;
 168   }
 169
 170   body .cv-content > section > section > header > span.date {
 171     grid-column: 2;
 172     grid-row: 1;
 173   }
 174
 175   body .cv-content > section > section > ul {
 176     padding-inline-start: 1rem;
 177   }
 178
 179   body .cv-content .skills span {
 180     font-size: 8pt;
 181   }
 182 }