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: "League Spartan";
   9         src: url(/design/fonts/raleway/LeagueSpartan-VF.woff);
  10 }
  11
  12 /* Layout */
  13
  14 body {
  15         background: #fcfcfc;
  16         display: flex;
  17         flex-direction: column;
  18         min-height: 100vh;
  19         padding: 5vh clamp(1rem, 5vw, 3rem) 1rem;
  20         font-family: "League Spartan", sans-serif;
  21         font-size: 1.4em;
  22         line-height: 1.2em;
  23         color: #222;
  24 }
  25
  26 body > * {
  27         --layout-spacing: 4em;
  28         --max-width: 50ch;
  29         width: min(100%, var(--max-width));
  30         margin-left: auto;
  31         margin-right: auto;
  32 }
  33
  34 header h1 {
  35         font-size: 2em;
  36 }
  37
  38 header h1 a {
  39         color: #000;
  40         text-decoration: none;
  41 }
  42
  43 header p {
  44         font-size: 0.8em;
  45 }
  46
  47 nav {
  48         margin-top: 2vh;
  49         margin-bottom: 4vh;
  50 }
  51
  52 nav ul {
  53         list-style: none;
  54         display: flex;
  55         flex-wrap: wrap;
  56         padding: 0;
  57         margin-left: -1rem;
  58         margin-right: -1rem;
  59         vertical-align: bottom;
  60 }
  61
  62 nav ul li {
  63         padding: 0.5rem 1rem;
  64 }
  65
  66 nav [aria-current="page"] {
  67         font-weight: bold;
  68 }
  69
  70 main > * + * {
  71         margin-top: var(--layout-spacing);
  72 }
  73
  74 body > footer {
  75         margin-top: auto;
  76         padding-top: var(--layout-spacing);
  77 }
  78
  79 body > footer div {
  80         border-top: 1px solid #ccc;
  81         padding-top: 0.5em;
  82         font-size: 0.9rem;
  83         color: #767676;
  84 }
  85
  86 article {
  87         font-weight: lighter;
  88 }
  89
  90 article * + * {
  91         margin-top: 1em;
  92 }
  93
  94 article > h1 {
  95         margin-top: 0;
  96 }
  97
  98 article > h1 a {
  99         text-decoration: none;
 100         color: #000;
 101 }
 102
 103 article > h1 + .updated {
 104         margin-top: 0;
 105 }
 106
 107 hr {
 108         margin: 4em auto;
 109         border: 0;
 110         height: 1px;
 111         background: #ccc;
 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:hover {
 141         background-color: navy;
 142         color: #fcfcfc;
 143 }
 144
 145 a:focus {
 146         outline: 1px solid currentColor;
 147         outline-offset: 0.2em;
 148 }
 149
 150 /* Media */
 151 article + article {
 152         border-top: 1px solid #ccc;
 153         padding-top: var(--layout-spacing);
 154 }
 155
 156 article img:not(a *) {
 157         display: block;
 158         width: 100%;
 159         aspect-ratio: 640 / 360;
 160         /*min-height: 20rem;
 161         max-height: 40vh;*/
 162         object-fit: cover;
 163         margin: 0 auto 1rem !important;
 164 }
 165
 166 article iframe {
 167         display: block;
 168         width: 100%;
 169         aspect-ratio: 640 / 360;
 170 }
 171
 172 /*@supports (aspect-ratio: 1) {
 173         article img {
 174                 max-height: unset;
 175                 aspect-ratio: 3/2;
 176         }
 177 }*/
 178
 179 /* Supporting Content */
 180
 181 code:not([class*="language"]) {
 182         font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 183         font-size: 1.75ex;
 184         color: #444;
 185         background-color: rgba(0, 0, 0, 0.1);
 186         padding-right: 0.15em;
 187         padding-left: 0.15em;
 188 }
 189
 190 pre code {
 191         margin: 2rem 0;
 192         padding: 0.5em 1rem;
 193         display: block;
 194         border-left: 3px solid rgba(0, 0, 0, 0.35);
 195         background-color: rgba(0, 0, 0, 0.05);
 196         border-radius: 0 0.25rem 0.25rem 0;
 197         overflow-x: auto;
 198         font-size: 0.8em !important;
 199 }
 200
 201 blockquote {
 202         margin: 2rem 0;
 203         padding: 0.5em 1rem;
 204         border-left: 3px solid rgba(0, 0, 0, 0.35);
 205         background-color: rgba(0, 0, 0, 0.05);
 206         border-radius: 0 0.25rem 0.25rem 0;
 207 }