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/000_reset.css

@@ -4,6 +4,14 @@
   vim: set sw=2 sts=2:
 */}}
 
-h1, h2, h3, h4, h5, h6, p {
+
+
+
+/********
+ # RESET
+ ********/
+
+
+figure, h1, h2, h3, h4, h5, h6, p {
     margin: 0;
 }

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;
+    }
+  }
+}

assets/css/010_spacing.css

@@ -0,0 +1,138 @@
+{{/*
+  spacing.css
+  Eryn Wells <eryn@erynwells.me>
+  vim: set sw=2 sts=2:
+*/}}
+
+{{- $base := (index . "Base") | default 1 -}}
+{{- $unit := (index . "Unit") | default "rem" -}}
+{{- $factor := (index . "Factor") | default 1.618 -}}
+{{- $scale := partial "size_scale.html" . }}
+
+
+
+
+
+/***********
+ # SPACING
+ ***********/
+
+
+:root {
+  --space-base: {{ $base }}{{ $unit }};
+{{- range $scale }}
+  --space-{{ .Name }}: calc(var(--space-base) * pow({{ $factor }}, {{ .Value }}));
+{{- end }}
+
+  --fixed-space-base: 1rem;
+{{- range $scale }}
+  --fixed-space-{{ .Name }}: calc(var(--fixed-space-base) * pow({{ $factor }}, {{ .Value }}));
+{{- end }}
+
+  --space-paragraph: var(--space-m);
+}
+
+
+{{ range $scale }}
+{{ printf "/* Spacing utility classes: %s */" .Name }}
+.margin-block-start--{{ .Name }}  {  margin-block-start: var(--space-{{ .Name }}); }
+.margin-block-end--{{ .Name }}    {    margin-block-end: var(--space-{{ .Name }}); }
+.margin-inline-start--{{ .Name }} { margin-inline-start: var(--space-{{ .Name }}); }
+.margin-inline-end--{{ .Name }}   {   margin-inline-end: var(--space-{{ .Name }}); }
+{{ end }}
+
+
+h1, h2, h3, h4 {
+  margin-block: var(--space-m);
+}
+
+hr {
+  margin-block: var(--space-m);
+}
+
+main {
+  margin-block-end: var(--space-xl);
+}
+
+p + p {
+  margin-block-start: var(--space-paragraph);
+}
+
+
+/* Figures */
+
+{{- $elementsWithXLBlockMargins := "blockquote, figure, .codeblock, .highlight" -}}
+
+p + :is({{ $elementsWithXLBlockMargins }}) {
+    margin-block-start: var(--space-xl);
+}
+
+:is({{ $elementsWithXLBlockMargins }}):has(+ p) {
+  margin-block-end: var(--space-xl);
+}
+
+.codeblock {
+  --padding: var(--space-m);
+
+  margin-inline-start: calc(-1 * var(--padding));
+  padding: var(--padding);
+  width: 100%;
+}
+
+/* Blockquotes */
+
+blockquote {
+  --border-width: var(--space-xs);
+  --inline-padding: var(--space-l);
+
+  border-inline-start: var(--border-width) solid #eee;
+  margin-inline: 0 var(--inline-padding);
+  padding-inline-start: calc(var(--inline-padding) - var(--border-width));
+}
+
+/* Type size classes */
+
+.title {
+  margin-block-end: var(--space-l);
+}
+
+.subtitle {
+  margin-block-start: 0;
+}
+
+.heading {
+  margin-block-start: var(--space-l);
+}
+
+.heading:has(+ p) {
+  margin-block-end: var(--space-xs);
+}
+
+.subheading {
+}
+
+.content-title {
+  margin-block: var(--space-xl) var(--space-l);
+
+  .title:has(+ .subtitle) {
+    margin-block-end: var(--space-xs);
+  }
+
+  .title:not(:has(+ .subtitle)), .subtitle {
+    margin-block-end: var(--space-m);
+  }
+
+  .content-date {
+    margin-block-end: var(--space-paragraph);
+  }
+}
+
+.footnotes {
+  hr {
+    margin-block-start: var(--space-l);
+  }
+
+  li:not(:last-child) {
+    margin-block-end: var(--space-xs);
+  }
+}

assets/css/010_structure.css

@@ -0,0 +1,127 @@
+{{/*
+  structure.css
+  Eryn Wells <eryn@erynwells.me>
+  vim: set sw=2 sts=2:
+*/}}
+
+
+
+
+/*************************
+ # CONTENT AREA STRUCTURE
+ ************************/
+
+:root {
+  --content-width: 40em;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  margin-inline: auto;
+  max-width: var(--content-width);
+}
+
+main,
+.site-header__conatiner,
+.site-footer__container {
+  padding-inline: var(--space-xs);
+}
+
+figure, img {
+  max-width: 100%;
+}
+
+img {
+  object-fit: contain;
+}
+
+.content {
+  .heading {
+    align-items: center;
+    gap: 0.25em;
+    display: flex;
+  }
+
+  .codeblock {
+    overflow: auto;
+  }
+}
+
+
+.page-navigation {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  list-style: none;
+  padding-inline: 0;
+
+  &:has(.next-page:only-child) {
+    justify-content: flex-end;
+  }
+
+  li {
+    display: flex block;
+    height: 2lh;
+  }
+
+  .next-page {
+    text-align: right;
+  }
+
+  .previous-page::before {
+    content: "←";
+    padding-inline-end: var(--space-s);
+  }
+
+  .next-page::after {
+    content: "→";
+    padding-inline-start: var(--space-s);
+  }
+}
+
+
+.site-header {
+  border-bottom: 3px solid var(--gray6);
+}
+
+.site-header__container {
+  align-items: baseline;
+  display: flex;
+
+  .site-header__nav {
+    ul {
+      display: flex;
+      list-style: none;
+
+      li {
+        margin: 0;
+        padding: 0;
+      }
+
+      li:not(:last-child)::after {
+        content: "•";
+      }
+    }
+  }
+}
+
+.site-header__container,
+.site-footer__container {
+  margin-inline: auto;
+  max-width: var(--content-width);
+}
+
+
+.content-term-list {
+  display: flex;
+  list-style: none;
+  padding-inline: 0;
+
+  li:not(:last-child) {
+    margin-inline-end: var(--space-s);
+  }
+}

assets/css/010_typography.css

@@ -0,0 +1,149 @@
+{{/*
+  typography.css
+  Eryn Wells <eryn@erynwells.me>
+  vim: set sw=2 sts=2:
+*/}}
+
+{{- $base := (index . "Base") | default 1 -}}
+{{- $unit := (index . "Unit") | default "rem" -}}
+{{- $factor := (index . "Factor") | default 1.200 -}}
+{{- $scale := partial "size_scale.html" . }}
+
+
+
+
+
+/********
+ # FONTS
+ ********/
+
+@import url("https://use.typekit.net/fji8aoy.css");
+
+:root {
+  --font-family-body: system-ui, Arial, sans-serif;
+  /* --font-family-heading: "rockwell", serif; */
+  --font-family-heading: "merriweather", Georgia, serif;
+  --font-family-monospace: "source-code-pro", monospace;
+
+  --text-base-size: 125%;
+  --text-base: {{ $base }}{{ $unit }};
+{{- range $scale }}
+  --text-{{ .Name }}: calc(var(--text-base) * pow({{ $factor }}, {{ .Value }}));
+{{- end }}
+}
+
+
+/* Font size utility classes */
+{{ range $scale }}
+.text--{{ .Name }} { font-size: var(--text-{{ .Name }}); }
+{{- end }}
+
+
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+@media (prefers-reduce-motion: reduce) {
+  a {
+    text-decoration: underline;
+  }
+}
+
+html {
+  font-family: var(--font-family-body);
+  font-size: var(--text-base-size);
+  line-height: 1.45;
+}
+
+
+/***********
+ ## HEADINGS
+ ***********/
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-family-heading);
+}
+
+h1 {
+  font-size: var(--text-xxl);
+  letter-spacing: 0.05em;
+}
+
+h2 {
+  font-size: var(--text-xl);
+  letter-spacing: 0.03em;
+}
+
+h3 {
+  font-size: var(--text-l);
+}
+
+h4 {
+  font-size: var(--text-m);
+}
+
+
+header {
+  font-weight: bold;
+}
+
+p {
+  letter-spacing: 0.01em;
+}
+
+p, pre {
+  font-size: var(--text-m);
+}
+
+figcaption, small {
+  font-size: var(--text-s);
+  letter-spacing: 0.01em;
+  line-height: 1;
+}
+
+sup {
+  font-size: 60%;
+}
+
+
+.title {
+  font-size: var(--text-xxl);
+  letter-spacing: 0.05em;
+}
+
+.subtitle {
+  font-weight: lighter;
+}
+
+
+.content {
+  .codeblock {
+    font-family: var(--font-family-monospace);
+  }
+
+  .heading, .title {
+    font-family: var(--font-family-heading);
+  }
+
+  .heading__anchor {
+    /* font-family: var(--font-family-monospace); */
+    font-size: 60%;
+    text-decoration: none;
+  }
+
+  .footnotes {
+    font-size: 90%;
+
+    li:not(:last-child) {
+      margin-block-end: var(--space-xs);
+    }
+
+    p {
+      font-size: inherit;
+    }
+  }
+}

assets/css/099_page_summary.css

@@ -0,0 +1,25 @@
+/**************************
+ # COMPONENT: PAGE SUMMARY
+ **************************/
+
+.summary {
+  &:not(:last-child) {
+    margin-block-end: var(--space-l);
+  }
+
+  .summary__post-title {
+    margin-block: 0 var(--space-xs);
+  }
+
+  .summary__post-subtitle {
+    font-weight: 500;
+  }
+
+  .summary__content {
+    margin-block-end: var(--space-m);
+  }
+
+  :is(.summary__post-title, .summary__post-subtitle):last-child {
+    margin-block-end: var(--space-m);
+  }
+}

assets/css/099_page_summary.html

@@ -0,0 +1,25 @@
+/**************************
+ # COMPONENT: PAGE SUMMARY
+ **************************/
+
+.summary {
+  &:not(:last-child) {
+    margin-block-end: var(--space-l);
+  }
+
+  .summary__post-title {
+    margin-block: 0 var(--space-xs);
+  }
+
+  .summary__post-subtitle {
+    font-weight: 500;
+  }
+
+  .summary__content {
+    margin-block-end: var(--space-m);
+  }
+
+  :is(.summary__post-title, .summary__post-subtitle):last-child {
+    margin-block-end: var(--space-m);
+  }
+}

assets/css/099_site_header.css

@@ -0,0 +1,14 @@
+/*************************
+ # COMPONENT: SITE HEADER
+ *************************/
+
+.site-header__container {
+  .site-header__title {
+    font-family: var(--font-family-heading);
+  }
+
+  .site-header__nav {
+    font-size: smaller;
+    font-weight: normal;
+  }
+}

assets/css/spacing.css

@@ -1,26 +0,0 @@
-{{/*
-  spacing.css
-  Eryn Wells <eryn@erynwells.me>
-  vim: set sw=2 sts=2:
-*/}}
-
-{{- $spacingBase := 1 -}}
-{{- $spacingUnit := "rem" -}}
-{{- $spacingFactor := 1.618 -}}
-
-{{- $scale := partial "size_scale.html" . }}
-
-:root {
-{{- range $scale -}}
-  {{ $value := mul $spacingBase (math.Pow $spacingFactor .Value) }}
-  --spacing-{{ .Name }}: {{ printf "%.3f" $value }}{{ $spacingUnit }};
-{{- end }}
-}
-
-{{ range $scale }}
-{{ printf "/* Spacing utility classes: %s */" .Name }}
-.sp-bls-{{ .Name }} { margin-block-start: var(--spacing-{{ .Name }}); }
-.sp-ble-{{ .Name }} { margin-block-end: var(--spacing-{{ .Name }}); }
-.sp-ins-{{ .Name }} { margin-inline-start: var(--spacing-{{ .Name }}); }
-.sp-ine-{{ .Name }} { margin-inline-end: var(--spacing-{{ .Name }}); }
-{{ end }}

assets/css/typography.css

@@ -1,22 +0,0 @@
-{{/*
-  typography.css
-  Eryn Wells <eryn@erynwells.me>
-  vim: set sw=2 sts=2:
-*/}}
-
-{{- $fontSizeBase := 1 -}}
-{{- $fontSizeUnit := "rem" -}}
-{{- $fontSizeFactor := 1.200 -}}
-
-{{- $scale := partial "size_scale.html" . -}}
-
-:root {
-{{- range $scale -}}
-  {{ $value := mul $fontSizeBase (math.Pow $fontSizeFactor .Value) }}
-  --font-size-{{ .Name }}: {{ printf "%.3f" $value }}{{ $fontSizeUnit }};
-{{- end }}
-}
-
-{{ range $scale }}
-.font-size-{{ .Name }} { font-size: var(--font-size-{{ .Name }}); }
-{{- end }}

layouts/partials/design/system_css.html

@@ -1,16 +1,11 @@
+{{ $processedResources := slice }}
+{{ range $r := resources.Match "css/*.css" }}
   {{
-  $resetCSS := resources.Get "css/reset.css"
-             | resources.ExecuteAsTemplate "css/reset.css" .
-}}
-{{
-  $spacingCSS := resources.Get "css/spacing.css"
-             | resources.ExecuteAsTemplate "css/spacing.css" (dict "Page" .)
-}}
-{{
-  $typographyCSS := resources.Get "css/typography.css"
-             | resources.ExecuteAsTemplate "css/typography.css" (dict "Page" .)
+    $processedResources = append
+      (resources.Get $r | resources.ExecuteAsTemplate $r (dict "Page" $))
+      $processedResources
   }}
+{{ end }}
 
-{{ $css := (slice $resetCSS $spacingCSS $typographyCSS) | resources.Concat "css/system.css" }}
-
+{{ $css := $processedResources | resources.Concat "css/base.css" }}
 {{ return $css }}