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 hr {
 107   width: 80%;
 108   margin: 4em auto;
 109   border: 0;
 110   height: 1px;
 111   background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
 112 }
 113
 114 /* Typography */
 115 :is(h1, h2, h3) {
 116   line-height: 1.2;
 117 }
 118
 119 :is(h1, h2) {
 120   max-width: 40ch;
 121 }
 122
 123
 124
 125 .updated {
 126   font-size: 0.8em;
 127   color: #aaa;
 128   margin: 0 !important;
 129 }
 130
 131 :is(h2, h3):not(:first-child) {
 132   margin-top: 2em;
 133 }
 134
 135 a {
 136   color: navy;
 137   text-underline-offset: 0.08em;
 138 }
 139
 140 a:focus {
 141   outline: 1px solid currentColor;
 142   outline-offset: 0.2em;
 143 }
 144
 145 /* Media */
 146 article + article {
 147   border-top: 1px dashed #ccc;
 148   padding-top: var(--layout-spacing);
 149 }
 150
 151 article img {
 152   display: block;
 153   width: 100%;
 154   min-height: 20rem;
 155   max-height: 40vh;
 156   object-fit: cover;
 157   margin: 0 auto 1rem !important;
 158 }
 159
 160 /*@supports (aspect-ratio: 1) {
 161   article img {
 162     max-height: unset;
 163     aspect-ratio: 3/2;
 164   }
 165 }*/
 166
 167 /* Supporting Content */
 168
 169 code:not([class*="language"]) {
 170   font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 171   font-size: 1.75ex;
 172   color: #444;
 173   background-color: rgba(0, 0, 0, 0.1);
 174   padding-right: 0.15em;
 175   padding-left: 0.15em;
 176 }
 177
 178 blockquote {
 179   margin: 2rem 0;
 180   padding: 0.5em 1rem;
 181   border-left: 3px solid rgba(0, 0, 0, 0.35);
 182   background-color: rgba(0, 0, 0, 0.05);
 183   border-radius: 0 0.25rem 0.25rem 0;
 184 }