blog-site

  1/* Global variables. */
  2:root {
  3  /* Set sans-serif & mono fonts */
  4  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
  5    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
  6    "Helvetica Neue", sans-serif;
  7  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  8  --standard-border-radius: 5px;
  9
 10  /* Default (light) theme */
 11  --bg: #fff;
 12  --accent-bg: #f5f7ff;
 13  --text: #212121;
 14  --text-light: #585858;
 15  --border: #898EA4;
 16  --accent: #0d47a1;
 17  --accent-hover: #1266e2;
 18  --accent-text: var(--bg);
 19  --code: #d81b60;
 20  --preformatted: #444;
 21  --marked: #ffdd33;
 22  --disabled: #efefef;
 23}
 24
 25/* Dark theme */
 26@media (prefers-color-scheme: dark) {
 27  :root {
 28    color-scheme: dark;
 29    --bg: #212121;
 30    --accent-bg: #2b2b2b;
 31    --text: #dcdcdc;
 32    --text-light: #ababab;
 33    --accent: #ffb300;
 34    --accent-hover: #ffe099;
 35    --accent-text: var(--bg);
 36    --code: #f06292;
 37    --preformatted: #ccc;
 38    --disabled: #111;
 39  }
 40  /* Add a bit of transparency so light media isn't so glaring in dark mode */
 41  img,
 42  video {
 43    opacity: 0.8;
 44  }
 45}
 46
 47/* Reset box-sizing */
 48*, *::before, *::after {
 49  box-sizing: border-box;
 50}
 51
 52/* Reset default appearance */
 53textarea,
 54select,
 55input,
 56progress {
 57  appearance: none;
 58  -webkit-appearance: none;
 59  -moz-appearance: none;
 60}
 61
 62html {
 63  /* Set the font globally */
 64  font-family: var(--sans-font);
 65  scroll-behavior: smooth;
 66}
 67
 68/* Make the body a nice central block */
 69body {
 70  color: var(--text);
 71  background-color: var(--bg);
 72  font-size: 1.15rem;
 73  line-height: 1.5;
 74  display: grid;
 75  grid-template-columns: 1fr min(45rem, 90%) 1fr;
 76  margin: 0;
 77}
 78body > * {
 79  grid-column: 2;
 80}
 81
 82/* Make the header bg full width, but the content inline with body */
 83body > header {
 84  background-color: var(--accent-bg);
 85  border-bottom: 1px solid var(--border);
 86  text-align: center;
 87  padding: 0 0.5rem 2rem 0.5rem;
 88  grid-column: 1 / -1;
 89}
 90
 91body > header > *:only-child {
 92  margin-block-start: 2rem;
 93}
 94
 95body > header h1 {
 96  max-width: 1200px;
 97  margin: 1rem auto;
 98}
 99
100body > header p {
101  max-width: 40rem;
102  margin: 1rem auto;
103}
104
105/* Add a little padding to ensure spacing is correct between content and header > nav */
106main {
107  padding-top: 1.5rem;
108}
109
110body > footer {
111  margin-top: 4rem;
112  padding: 2rem 1rem 1.5rem 1rem;
113  color: var(--text-light);
114  font-size: 0.9rem;
115  text-align: center;
116  border-top: 1px solid var(--border);
117}
118
119/* Format headers */
120h1 {
121  font-size: 3rem;
122}
123
124h2 {
125  font-size: 2.6rem;
126  margin-top: 3rem;
127}
128
129h3 {
130  font-size: 2rem;
131  margin-top: 3rem;
132}
133
134h4 {
135  font-size: 1.44rem;
136}
137
138h5 {
139  font-size: 1.15rem;
140}
141
142h6 {
143  font-size: 0.96rem;
144}
145
146p {
147  margin: 1.5rem 0;
148}
149
150/* Prevent long strings from overflowing container */
151p, h1, h2, h3, h4, h5, h6 {
152  overflow-wrap: break-word;
153}
154
155/* Fix line height when title wraps */
156h1,
157h2,
158h3 {
159  line-height: 1.1;
160}
161
162/* Reduce header size on mobile */
163@media only screen and (max-width: 720px) {
164  h1 {
165    font-size: 2.5rem;
166  }
167
168  h2 {
169    font-size: 2.1rem;
170  }
171
172  h3 {
173    font-size: 1.75rem;
174  }
175
176  h4 {
177    font-size: 1.25rem;
178  }
179}
180
181/* Format links & buttons */
182a,
183a:visited {
184  color: var(--accent);
185}
186
187a:hover {
188  text-decoration: none;
189}
190
191button,
192.button,
193a.button, /* extra specificity to override a */
194input[type="submit"],
195input[type="reset"],
196input[type="button"] {
197  border: 1px solid var(--accent);
198  background-color: var(--accent);
199  color: var(--accent-text);
200  padding: 0.5rem 0.9rem;
201  text-decoration: none;
202  line-height: normal;
203}
204
205.button[aria-disabled="true"], 
206input:disabled,
207textarea:disabled,
208select:disabled,
209button[disabled] {
210  cursor: not-allowed;
211  background-color: var(--disabled);
212  border-color: var(--disabled);
213  color: var(--text-light);
214}
215
216input[type="range"] {
217  padding: 0;
218}
219
220/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
221abbr[title] {
222  cursor: help;
223  text-decoration-line: underline;
224  text-decoration-style: dotted;
225}
226
227button:enabled:hover,
228.button:not([aria-disabled="true"]):hover,
229input[type="submit"]:enabled:hover,
230input[type="reset"]:enabled:hover,
231input[type="button"]:enabled:hover {
232  background-color: var(--accent-hover);
233  border-color: var(--accent-hover);
234  cursor: pointer;
235}
236
237.button:focus-visible,
238button:focus-visible:where(:enabled),
239input:enabled:focus-visible:where(
240  [type="submit"],
241  [type="reset"],
242  [type="button"]
243) {
244  outline: 2px solid var(--accent);
245  outline-offset: 1px;
246}
247
248/* Format navigation */
249header > nav {
250  font-size: 1rem;
251  line-height: 2;
252  padding: 1rem 0 0 0;
253}
254
255/* Use flexbox to allow items to wrap, as needed */
256header > nav ul,
257header > nav ol {
258  align-content: space-around;
259  align-items: center;
260  display: flex;
261  flex-direction: row;
262  flex-wrap: wrap;
263  justify-content: center;
264  list-style-type: none;
265  margin: 0;
266  padding: 0;
267}
268
269/* List items are inline elements, make them behave more like blocks */
270header > nav ul li,
271header > nav ol li {
272  display: inline-block;
273}
274
275header > nav a,
276header > nav a:visited {
277  margin: 0 0.5rem 1rem 0.5rem;
278  border: 1px solid var(--border);
279  border-radius: var(--standard-border-radius);
280  color: var(--text);
281  display: inline-block;
282  padding: 0.1rem 1rem;
283  text-decoration: none;
284}
285
286header > nav a:hover,
287header > nav a.current,
288header > nav a[aria-current="page"],
289header > nav a[aria-current="true"] {
290  border-color: var(--accent);
291  color: var(--accent);
292  cursor: pointer;
293}
294
295/* Reduce nav side on mobile */
296@media only screen and (max-width: 720px) {
297  header > nav a {
298    border: none;
299    padding: 0;
300    text-decoration: underline;
301    line-height: 1;
302  }
303}
304
305/* Consolidate box styling */
306aside, details, pre, progress {
307  background-color: var(--accent-bg);
308  border: 1px solid var(--border);
309  border-radius: var(--standard-border-radius);
310  margin-bottom: 1rem;
311}
312
313aside {
314  font-size: 1rem;
315  width: 30%;
316  padding: 0 15px;
317  margin-inline-start: 15px;
318  float: right;
319}
320*[dir="rtl"] aside {
321  float: left;
322}
323
324/* Make aside full-width on mobile */
325@media only screen and (max-width: 720px) {
326  aside {
327    width: 100%;
328    float: none;
329    margin-inline-start: 0;
330  }
331}
332
333article, fieldset, dialog {
334  border: 1px solid var(--border);
335  padding: 1rem;
336  border-radius: var(--standard-border-radius);
337  margin-bottom: 1rem;
338}
339
340article h2:first-child,
341section h2:first-child,
342article h3:first-child,
343section h3:first-child {
344  margin-top: 1rem;
345}
346
347section {
348  border-top: 1px solid var(--border);
349  border-bottom: 1px solid var(--border);
350  padding: 2rem 1rem;
351  margin: 3rem 0;
352}
353
354/* Don't double separators when chaining sections */
355section + section,
356section:first-child {
357  border-top: 0;
358  padding-top: 0;
359}
360
361section + section {
362  margin-top: 0;
363}
364
365section:last-child {
366  border-bottom: 0;
367  padding-bottom: 0;
368}
369
370details {
371  padding: 0.7rem 1rem;
372}
373
374summary {
375  cursor: pointer;
376  font-weight: bold;
377  padding: 0.7rem 1rem;
378  margin: -0.7rem -1rem;
379  word-break: break-all;
380}
381
382details[open] > summary + * {
383  margin-top: 0;
384}
385
386details[open] > summary {
387  margin-bottom: 0.5rem;
388}
389
390details[open] > :last-child {
391  margin-bottom: 0;
392}
393
394/* Format tables */
395table {
396  border-collapse: collapse;
397  margin: 1.5rem 0;
398}
399
400figure > table {
401  width: max-content;
402  margin: 0;
403}
404
405td,
406th {
407  border: 1px solid var(--border);
408  text-align: start;
409  padding: 0.5rem;
410}
411
412th {
413  background-color: var(--accent-bg);
414  font-weight: bold;
415}
416
417tr:nth-child(even) {
418  /* Set every other cell slightly darker. Improves readability. */
419  background-color: var(--accent-bg);
420}
421
422table caption {
423  font-weight: bold;
424  margin-bottom: 0.5rem;
425}
426
427/* Format forms */
428textarea,
429select,
430input,
431button,
432.button {
433  font-size: inherit;
434  font-family: inherit;
435  padding: 0.5rem;
436  margin-bottom: 0.5rem;
437  border-radius: var(--standard-border-radius);
438  box-shadow: none;
439  max-width: 100%;
440  display: inline-block;
441}
442textarea,
443select,
444input {
445  color: var(--text);
446  background-color: var(--bg);
447  border: 1px solid var(--border);
448}
449label {
450  display: block;
451}
452textarea:not([cols]) {
453  width: 100%;
454}
455
456/* Add arrow to drop-down */
457select:not([multiple]) {
458  background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
459    linear-gradient(135deg, var(--text) 51%, transparent 49%);
460  background-position: calc(100% - 15px), calc(100% - 10px);
461  background-size: 5px 5px, 5px 5px;
462  background-repeat: no-repeat;
463  padding-inline-end: 25px;
464}
465*[dir="rtl"] select:not([multiple]) {
466  background-position: 10px, 15px;
467}
468
469/* checkbox and radio button style */
470input[type="checkbox"],
471input[type="radio"] {
472  vertical-align: middle;
473  position: relative;
474  width: min-content;
475}
476
477input[type="checkbox"] + label,
478input[type="radio"] + label {
479  display: inline-block;
480}
481
482input[type="radio"] {
483  border-radius: 100%;
484}
485
486input[type="checkbox"]:checked,
487input[type="radio"]:checked {
488  background-color: var(--accent);
489}
490
491input[type="checkbox"]:checked::after {
492  /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
493  content: " ";
494  width: 0.18em;
495  height: 0.32em;
496  border-radius: 0;
497  position: absolute;
498  top: 0.05em;
499  left: 0.17em;
500  background-color: transparent;
501  border-right: solid var(--bg) 0.08em;
502  border-bottom: solid var(--bg) 0.08em;
503  font-size: 1.8em;
504  transform: rotate(45deg);
505}
506input[type="radio"]:checked::after {
507  /* creates a colored circle for the checked radio button  */
508  content: " ";
509  width: 0.25em;
510  height: 0.25em;
511  border-radius: 100%;
512  position: absolute;
513  top: 0.125em;
514  background-color: var(--bg);
515  left: 0.125em;
516  font-size: 32px;
517}
518
519/* Makes input fields wider on smaller screens */
520@media only screen and (max-width: 720px) {
521  textarea,
522  select,
523  input {
524    width: 100%;
525  }
526}
527
528/* Set a height for color input */
529input[type="color"] {
530  height: 2.5rem;
531  padding:  0.2rem;
532}
533
534/* do not show border around file selector button */
535input[type="file"] {
536  border: 0;
537}
538
539/* Misc body elements */
540hr {
541  border: none;
542  height: 1px;
543  background: var(--border);
544  margin: 1rem auto;
545}
546
547mark {
548  padding: 2px 5px;
549  border-radius: var(--standard-border-radius);
550  background-color: var(--marked);
551  color: black;
552}
553
554mark a {
555  color: #0d47a1;
556}
557
558img,
559video {
560  max-width: 100%;
561  height: auto;
562  border-radius: var(--standard-border-radius);
563}
564
565figure {
566  margin: 0;
567  display: block;
568  overflow-x: auto;
569}
570
571figure > img,
572figure > picture > img {
573  display: block;
574  margin-inline: auto;
575}
576
577figcaption {
578  text-align: center;
579  font-size: 0.9rem;
580  color: var(--text-light);
581  margin-block: 1rem;
582}
583
584blockquote {
585  margin-inline-start: 2rem;
586  margin-inline-end: 0;
587  margin-block: 2rem;
588  padding: 0.4rem 0.8rem;
589  border-inline-start: 0.35rem solid var(--accent);
590  color: var(--text-light);
591  font-style: italic;
592}
593
594cite {
595  font-size: 0.9rem;
596  color: var(--text-light);
597  font-style: normal;
598}
599
600dt {
601    color: var(--text-light);
602}
603
604/* Use mono font for code elements */
605code,
606pre,
607pre span,
608kbd,
609samp {
610  font-family: var(--mono-font);
611  color: var(--code);
612}
613
614kbd {
615  color: var(--preformatted);
616  border: 1px solid var(--preformatted);
617  border-bottom: 3px solid var(--preformatted);
618  border-radius: var(--standard-border-radius);
619  padding: 0.1rem 0.4rem;
620}
621
622pre {
623  padding: 1rem 1.4rem;
624  max-width: 100%;
625  overflow: auto;
626  color: var(--preformatted);
627}
628
629/* Fix embedded code within pre */
630pre code {
631  color: var(--preformatted);
632  background: none;
633  margin: 0;
634  padding: 0;
635}
636
637/* Progress bars */
638/* Declarations are repeated because you */
639/* cannot combine vendor-specific selectors */
640progress {
641  width: 100%;
642}
643
644progress:indeterminate {
645  background-color: var(--accent-bg);
646}
647
648progress::-webkit-progress-bar {
649  border-radius: var(--standard-border-radius);
650  background-color: var(--accent-bg);
651}
652
653progress::-webkit-progress-value {
654  border-radius: var(--standard-border-radius);
655  background-color: var(--accent);
656}
657
658progress::-moz-progress-bar {
659  border-radius: var(--standard-border-radius);
660  background-color: var(--accent);
661  transition-property: width;
662  transition-duration: 0.3s;
663}
664
665progress:indeterminate::-moz-progress-bar {
666  background-color: var(--accent-bg);
667}
668
669dialog {
670  background-color: var(--bg);
671  max-width: 40rem;
672  margin: auto;
673}
674
675dialog::backdrop {
676  background-color: var(--bg);
677  opacity: 0.8;
678}
679
680@media only screen and (max-width: 720px) {
681  dialog {
682    max-width: 100%;
683    margin: auto 1em;
684  }
685}
686
687/* Superscript & Subscript */
688/* Prevent scripts from affecting line-height. */
689sup, sub {
690  vertical-align: baseline;
691  position: relative;
692}
693
694sup {
695  top: -0.4em;
696}
697
698sub { 
699  top: 0.3em; 
700}
701
702/* Classes for notices */
703.notice {
704  background: var(--accent-bg);
705  border: 2px solid var(--border);
706  border-radius: var(--standard-border-radius);
707  padding: 1.5rem;
708  margin: 2rem 0;
709}
710
711/* Print */
712@media print {
713  @page {
714    margin: 1cm;
715  }
716  body {
717    display: block;
718  }
719  body > header {
720    background-color: unset;
721  }
722  body > header nav,
723  body > footer {
724    display: none;
725  }
726  article {
727    border: none;
728    padding: 0;
729  }
730  a[href^="http"]::after {
731    content: " <" attr(href) ">";
732  }
733  abbr[title]:after {
734    content: " (" attr(title) ")";
735  }
736  a {
737    text-decoration: none;
738  }
739  p {
740    widows: 3;
741    orphans: 3;
742  }
743  hr {
744    border-top: 1px solid var(--border);
745  }
746  mark {
747    border: 1px solid var(--border);
748  }
749  pre, table, figure, img, svg {
750    break-inside: avoid;
751  }
752  pre code {
753    white-space: pre-wrap;
754  }
755}