CSS Checkpoint

- Add the system_css template
- Name the CSS files in the css directory with a numeric prefix so they sort by
  priority.

assets/css/010_colors.css

@@ -0,0 +1,367 @@
+{{/*
+  colors.css
+  Eryn Wells <eryn@erynwells.me>
+  vim: set sw=2 sts=2:
+*/}}
+
+
+
+
+/*********
+ # COLORS
+ *********/
+
+:root {
+  --gray1: rgb(14 16 27);
+  --gray2: rgb(28 33 49);
+  --gray3: rgb(52 59 82);
+  --gray4: rgb(87 94 120);
+  --gray5: rgb(138 144 166);
+  --gray6: rgb(200 204 217);
+  --gray7: rgb(249 251 255);
+
+  --light: var(--gray7);
+  --dark: var(--gray1);
+
+  --background-color: var(--light);
+  --hr-color: var(--dark);
+  --text-color: var(--dark);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Reverse the grayscale ramp in dark mode. */
+    --gray7: rgb(17 19 28);
+    --gray6: rgb(28 32 48);
+    --gray5: rgb(53 59 82);
+    --gray4: rgb(86 96 121);
+    --gray3: rgb(139 144 164);
+    --gray2: rgb(206 207 214);
+    --gray1: rgb(255 253 249);
+
+    --background-color: var(--dark);
+    --hr-color: var(--light);
+    --text-color: var(--light);
+  }
+}
+
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+hr {
+  border: 0;
+  border-top: 1pt solid var(--hr-color);
+  color: var(--hr-color);
+}
+
+.content {
+  .heading__anchor {
+    color: var(--gray5);
+    transition: 1s color;
+  }
+
+  .heading__anchor:hover {
+    color: var(--text-color);
+  }
+}
+
+
+
+
+
+/**********************
+ # SYNTAX HIGHLIGHTING
+ **********************/
+
+.content {
+  .codeblock {
+    --blue: rgb(28 168 239);
+    --purple: rgb(197 141 244);
+    --orange: rgb(from rgb(255 171 131) calc(r * 0.9) calc(g * 0.9) calc(b * 0.9));
+    --green: #77c881;
+    --yellow: rgb(248 232 93);
+
+    color: var(--gray2);
+
+    --background-color-factor: 0.95;
+    background-color: #edeff4;
+
+    border: 1px solid var(--gray6);
+
+    .err {
+      color: #960050;
+      background-color: #1e0010
+    }
+
+    /* line link */
+    .lnlinks {
+      outline: none;
+      text-decoration: none;
+      color: inherit;
+    }
+
+    .line {
+      display: flex;
+    }
+
+    /* keyword */
+    .k {
+      color: var(--blue);
+    }
+
+    /* keyword: constant */
+    .kc {
+      color: #66d9ef;
+    }
+
+    /* keyword: declaration */
+    .kd {
+      color: #66d9ef
+    }
+
+    /* keyword: namespace */
+    .kn {
+      color: #f92672
+    }
+
+    /* keyword: pseudo */
+    .kp {
+      color: #66d9ef
+    }
+
+    /* keyword: reserved */
+    .kr {
+      color: #66d9ef
+    }
+
+    /* keyword: type */
+    .kt {
+      color: var(--blue);
+      font-weight: bolder;
+    }
+
+    /* line highlight */
+    .hl {
+      background-color: #3c3d38
+    }
+
+    /* line numbers */
+    .ln {
+      white-space: pre;
+      -webkit-user-select: none;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: #7f7f7f;
+    }
+
+    /* NameAttribute */
+    .na {
+      color: #a6e22e;
+    }
+
+    /* NameClass */
+    .nc {
+      color: #a6e22e;
+    }
+
+    /* NameConstant */
+    .no {
+      color: #66d9ef;
+    }
+
+    /* name: decorator */
+    .nd {
+      color: #a6e22e;
+    }
+
+    /* name: exception */
+    .ne {
+      color: var(--green);
+      font-weight: bolder;
+    }
+
+    /* NameFunction */
+    .nf {
+      color: var(--green);
+    }
+
+    /* NameOther */
+    .nx {
+      color: #a6e22e;
+    }
+
+    /* NameTag */
+    .nt {
+      color: #f92672;
+    }
+
+    /* Literal */
+    .l {
+      color: #ae81ff;
+    }
+
+    /* LiteralDate */
+    .ld {
+      color: #e6db74;
+    }
+
+    /* LiteralString */
+    .s {
+      color: #e6db74;
+    }
+
+    /* LiteralStringBacktick */
+    .sb {
+      color: #e6db74;
+    }
+
+    /* LiteralStringChar */
+    .sc {
+      color: #e6db74;
+    }
+
+    /* LiteralStringDelimiter */
+    .dl {
+      color: #e6db74;
+    }
+
+    /* LiteralNumberIntegerLong */
+    .il {
+      color: #ae81ff;
+    }
+
+    /* literal: number */
+    /* literal: number, bin */
+    /* literal: number, float */
+    /* literal: number, hex */
+    /* literal: number, integer */
+    .m, .mb, .mf, .mh, .mi {
+      color: var(--purple);
+      font-weight: bolder;
+    }
+
+    /* LiteralNumberOct */
+    .mo {
+      color: #ae81ff;
+    }
+
+    /* name: built-in */
+    .nb {
+      color: var(--green);
+    }
+
+    /* Operator */
+    .o {
+      color: var(--orange);
+    }
+
+    /* OperatorWord */
+    .ow {
+      color: #f92672;
+    }
+
+    /* LiteralStringDoc */
+    .sd {
+      color: #e6db74;
+    }
+
+    /* LiteralStringDouble */
+    .s2 {
+      color: #e6db74;
+    }
+
+    /* LiteralStringEscape */
+    .se {
+      color: #ae81ff;
+    }
+
+    /* LiteralStringHeredoc */
+    .sh {
+      color: #e6db74;
+    }
+
+    /* LiteralStringInterpol */
+    .si {
+      color: #e6db74;
+    }
+
+    /* LiteralStringOther */
+    .sx {
+      color: #e6db74;
+    }
+
+    /* literal: string, regex */
+    .sr {
+      color: var(--green);
+    }
+
+    /* literal: string, affix */
+    /* literal: string, single */
+    /* literal: string, symbol */
+    .sa, .s1, .ss {
+      color: var(--yellow);
+    }
+
+    /* Comment */
+    .c {
+      color: #75715e;
+    }
+
+    /* CommentHashbang */
+    .ch {
+      color: #75715e;
+    }
+
+    /* CommentMultiline */
+    .cm {
+      color: #75715e;
+    }
+
+    /* CommentSingle */
+    .c1 {
+      color: #75715e;
+    }
+
+    /* CommentSpecial */
+    .cs {
+      color: #75715e;
+    }
+
+    /* CommentPreproc */
+    .cp {
+      color: #75715e;
+    }
+
+    /* CommentPreprocFile */
+    .cpf {
+      color: #75715e;
+    }
+
+    /* GenericDeleted */
+    .gd {
+      color: #f92672;
+    }
+
+    /* GenericEmph */
+    .ge {
+      font-style: italic;
+    }
+
+    /* GenericInserted */
+    .gi {
+      color: #a6e22e;
+    }
+
+    /* GenericStrong */
+    .gs {
+      font-weight: bold;
+    }
+
+    /* GenericSubheading */
+    .gu {
+      color: #75715e;
+    }
+  }
+}