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 pre code {
 179         margin: 2rem 0;
 180         padding: 0.5em 1rem;
 181         display: block;
 182         border-left: 3px solid rgba(0, 0, 0, 0.35);
 183         background-color: rgba(0, 0, 0, 0.05);
 184         border-radius: 0 0.25rem 0.25rem 0;
 185         overflow-x: auto;
 186         font-size: 0.8em !important;
 187 }
 188
 189 blockquote {
 190         margin: 2rem 0;
 191         padding: 0.5em 1rem;
 192         border-left: 3px solid rgba(0, 0, 0, 0.35);
 193         background-color: rgba(0, 0, 0, 0.05);
 194         border-radius: 0 0.25rem 0.25rem 0;
 195 }