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