public/design/css/style.css

   1 /* Very Smol Reset */
   2 * {
   3   box-sizing: border-box;
   4   margin: 0;
   5 }
   6
   7 @font-face {
   8   font-family: Fanwood;
   9   src: url(/design/fonts/fanwood/fanwood-webfont.woff);
  10 }
  11
  12 @font-face {
  13   font-family: Fanwood;
  14   src: url(/design/fonts/fanwood/fanwood_italic-webfont.woff);
  15   font-style: italic;
  16 }
  17
  18 @font-face {
  19   font-family: "Fanwood Text";
  20   src: url(/design/fonts/fanwood/fanwood_text-webfont.woff);
  21 }
  22
  23 @font-face {
  24   font-family: "Fanwood Text";
  25   src: url(/design/fonts/fanwood/fanwood_text_italic-webfont.woff);
  26   font-style: italic;
  27 }
  28
  29 /* Layout */
  30
  31 body {
  32   display: flex;
  33   flex-direction: column;
  34   min-height: 100vh;
  35   padding: 5vh clamp(1rem, 5vw, 3rem) 1rem;
  36   font-family: Fanwood, serif;
  37   font-size: 1.4em;
  38   line-height: 1.2em;
  39   color: #222;
  40 }
  41
  42 body > * {
  43   --layout-spacing: max(8vh, 3rem);
  44   --max-width: 60ch;
  45   width: min(100%, var(--max-width));
  46   margin-left: auto;
  47   margin-right: auto;
  48 }
  49
  50 header h1 {
  51   font-size: 4em;
  52 }
  53
  54 nav ul {
  55   list-style: none;
  56   display: flex;
  57   flex-wrap: wrap;
  58   padding: 0;
  59   margin-left: -1rem;
  60   margin-right: -1rem;
  61   vertical-align: bottom;
  62 }
  63
  64 nav ul li {
  65   padding: 0.5rem 1rem;
  66 }
  67
  68 nav [aria-current="page"] {
  69   font-weight: bold;
  70 }
  71
  72 main,
  73 main > * + * {
  74   margin-top: var(--layout-spacing);
  75 }
  76
  77 body > footer {
  78   margin-top: auto;
  79   padding-top: var(--layout-spacing);
  80 }
  81
  82 body > footer div {
  83   border-top: 1px solid #ccc;
  84   padding-top: 0.5em;
  85   font-size: 0.9rem;
  86   color: #767676;
  87 }
  88
  89 article * + * {
  90   margin-top: 1em;
  91 }
  92
  93 article > h1 {
  94   margin-top: 0;
  95 }
  96
  97 article > h1 a {
  98   text-decoration: none;
  99   color: #000;
 100 }
 101
 102 article > h1 + .updated {
 103   margin-top: 0;
 104 }
 105
 106
 107 /* Typography */
 108 :is(h1, h2, h3) {
 109   line-height: 1.2;
 110 }
 111
 112 :is(h1, h2) {
 113   max-width: 40ch;
 114 }
 115
 116
 117
 118 .updated {
 119   font-size: 0.8em;
 120   color: #aaa;
 121 }
 122
 123 :is(h2, h3):not(:first-child) {
 124   margin-top: 2em;
 125 }
 126
 127 a {
 128   color: navy;
 129   text-underline-offset: 0.08em;
 130 }
 131
 132 a:focus {
 133   outline: 1px solid currentColor;
 134   outline-offset: 0.2em;
 135 }
 136
 137 /* Media */
 138 article + article {
 139   border-top: 1px dashed #ccc;
 140   padding-top: var(--layout-spacing);
 141 }
 142
 143 article img {
 144   display: block;
 145   width: 100%;
 146   min-height: 20rem;
 147   max-height: 40vh;
 148   object-fit: scale-down; /*cover;*/
 149   margin: 2rem auto;
 150 }
 151
 152 @supports (aspect-ratio: 1) {
 153   article img {
 154     max-height: unset;
 155     aspect-ratio: 3/2;
 156   }
 157 }
 158
 159 /* Supporting Content */
 160
 161 code:not([class*="language"]) {
 162   font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 163   font-size: 1.75ex;
 164   color: #444;
 165   background-color: rgba(0, 0, 0, 0.1);
 166   padding-right: 0.15em;
 167   padding-left: 0.15em;
 168 }
 169
 170 blockquote {
 171   margin: 2rem 0;
 172   padding: 0.5em 1rem;
 173   border-left: 3px solid rgba(0, 0, 0, 0.35);
 174   background-color: rgba(0, 0, 0, 0.05);
 175   border-radius: 0 0.25rem 0.25rem 0;
 176 }