Move a bunch of color stuff from typography to colors

assets/styles/root/002_colors.css

@@ -16,17 +16,22 @@
   --lilac: 187, 121, 245;
 
   --background: var(--white);
+  --color: rgba(var(--black), 0.8);
+
+  --a-color: rgb(var(--mid-blue));
+  --a-underline-color: rgb(var(--sub-lt-gray));
+  --a-ruby-color: var(--color);
+
+  --body-code-background-color: rgb(var(--super-lt-gray));
+  --box-shadow-color: rgba(var(--lt-gray), 0.8);
 
   --separator-color: rgb(var(--lt-gray));
   --header-border-color: var(--separator-color);
   --footer-border-color: var(--separator-color);
 
-  --box-shadow-color: rgba(var(--lt-gray), 0.8);
   --header-box-shadow-color: var(--box-shadow-color);
-
-  --body-code-background-color: rgb(var(--super-lt-gray));
-
   --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray));
+  --heading-color: rgb(var(--black));
 
   --html-background-color: rgb(var(--background));
 
@@ -34,6 +39,8 @@
   --platter-background-opacity: 0.6;
   --platter-backdrop-filter: blur(10px);
 
+  --site-nav-link-color: var(--a-color);
+
   --tag-foreground-color: rgb(var(--super-dk-gray));
   --tag-background-color: rgb(var(--super-lt-gray));
   --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
@@ -43,12 +50,14 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --background: var(--black);
+    --color: rgba(var(--white), 0.8);
 
     --separator-color: rgb(var(--dk-gray));
     --box-shadow-color: rgba(var(--dk-gray), 0.8);
     --body-code-background-color: rgb(var(--dk-gray));
 
     --header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
+    --heading-color: rgb(var(--white));
 
     --html-background-color: rgb(var(--background));
 
@@ -64,6 +73,11 @@
 }
 
 @layer root {
+  a rt,
+  a:hover rt {
+    color: var(--a-ruby-color);
+  }
+
   a[href] {
     color: var(--a-color);
   }
@@ -74,6 +88,12 @@
 
   a.hover-only {
     color: var(--color);
+    transition: color 0.2s;
+  }
+
+  a.hover-only:hover {
+    color: var(--a-color);
+    transition: color 0.2s;
   }
 
   code {
@@ -92,8 +112,77 @@
     border: 1px solid var(--separator-color);
   }
 
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--heading-color);
+  }
+
+  h1.gradient {
+    --site-title-color1: rgb(103, 128, 229);
+    --site-title-color2: rgb(130, 90, 227);
+    --site-title-color3: rgb(135, 101, 228);
+    --site-title-color4: rgb(125, 115, 229);
+    --site-title-color5: rgb(107, 130, 230);
+    --site-title-color6: rgb(77, 153, 232);
+    --site-title-color7: rgb(74, 136, 230);
+    --site-title-color8: rgb(71, 128, 228);
+    --site-title-color9: rgb(65, 80, 224);
+    --site-title-color10: rgb(61, 58, 223);
+
+    color: rgb(var(--mid-blue));
+  }
+
+  @supports not ((background-clip: text) or (-webkit-background-clip: text)) {
+    h1.gradient span:nth-child(10n + 1) { color: var(--site-title-color1); }
+    h1.gradient span:nth-child(10n + 2) { color: var(--site-title-color2); }
+    h1.gradient span:nth-child(10n + 3) { color: var(--site-title-color3); }
+    h1.gradient span:nth-child(10n + 4) { color: var(--site-title-color4); }
+    h1.gradient span:nth-child(10n + 5) { color: var(--site-title-color5); }
+    h1.gradient span:nth-child(10n + 6) { color: var(--site-title-color6); }
+    h1.gradient span:nth-child(10n + 7) { color: var(--site-title-color7); }
+    h1.gradient span:nth-child(10n + 8) { color: var(--site-title-color8); }
+    h1.gradient span:nth-child(10n + 9) { color: var(--site-title-color9); }
+    h1.gradient span:nth-child(10n) { color: var(--site-title-color10); }
+  }
+  @supports (background-clip: text) or (-webkit-background-clip: text) {
+    h1.gradient {
+      background:
+      radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
+      radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
+      radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%),
+      radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
+      radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
+      radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+  }
+
+  header.site nav > li {
+    color: var(--site-nav-link-color);
+  }
+
   html {
     background-color: var(--html-background-color);
+    color: var(--color);
+  }
+
+  nav.bulleted > li:first-child::before {
+    color: var(--color);
+  }
+
+  nav.bulleted > li::before {
+    color: var(--heading-color);
+  }
+
+  ruby:hover rt {
+    color: var(--color);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    rt {
+      color: rgba(var(--white), 0.5);
+    }
   }
 
   table {
@@ -103,4 +192,13 @@
   td, th {
     border: 1px solid var(--separator-color);
   }
+
+  .title, .title a {
+    color: var(--color);
+  }
+
+  .post header a,
+  .post header a:visited {
+    color: inherit;
+  }
 }

assets/styles/root/002_columns.css

@@ -1,6 +1,8 @@
 :root {
   --body-item-spacing: 4rem;
   --content-width: 80rem;
+  --content-columns: 5;
+  --gutter-width: 3rem;
   --list-item-block-gap: var(--body-item-spacing);
   --margin-min-width: var(--body-item-spacing);
   --margin-max-width: 1fr;
@@ -9,9 +11,6 @@
 
 @layer root {
     main {
-        --content-columns: 5;
-        --gutter-width: 3rem;
-
         display: grid;
         grid-template-columns:
             [margin-left]
@@ -74,19 +73,6 @@
                 [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
         }
     }
-
-    main > * {
-        grid-column: content-start / content-end;
-    }
-
-    main > figure,
-    main > a.to-photo-post {
-        grid-column: wide-content-start / wide-content-end;
-    }
-
-    p, ul {
-        grid-column: content-start / content-end;
-    }
 }
 
 @layer layout {
@@ -140,6 +126,19 @@
     width: 100%;
   }
 
+  main > * {
+    grid-column: content-start / content-end;
+  }
+
+  main > figure,
+  main > a.to-photo-post {
+    grid-column: wide-content-start / wide-content-end;
+  }
+
+  p, ul {
+    grid-column: content-start / content-end;
+  }
+
   nav.bulleted>li:first-child::before {
     margin-inline: 0;
   }
@@ -175,6 +174,60 @@
     padding-inline: 1rem;
   }
 
+  .list .post header {
+    grid-column: wide-content-start / content-end;
+  }
+  @supports (grid-template-columns: subgrid) {
+    .list .post header {
+      display: grid;
+      grid-template-columns: subgrid;
+    }
+  }
+
+  .list .post time {
+    grid-column: wide-content-start;
+    justify-self: end;
+  }
+  @media (max-width: 960px) {
+    .list .post time {
+      grid-column: content-start / content-end;
+      justify-self: start;
+    }
+  }
+
+  .list {
+    gap: var(--list-item-block-gap) 0;
+  }
+
+  .list > h1,
+  .list > header {
+    grid-column: content-start / content-end;
+  }
+
+  .list > .post {
+    grid-column: wide-content-start / wide-content-end;
+  }
+
+  @supports (grid-template-columns: subgrid) {
+    .list > .post {
+      --body-item-spacing: 2rem;
+
+      display: grid;
+      grid-template-columns: subgrid;
+      gap: var(--body-item-spacing) 0;
+    }
+  }
+
+  .list .post time {
+    font-variant-numeric: tabular-nums;
+  }
+
+  @media (max-width: 960px) {
+    .list .post time {
+      line-height: var(--line-height);
+    }
+  }
+
   .page {
     gap: var(--body-item-spacing) 0;
   }

assets/styles/root/050_typography.css

@@ -30,19 +30,6 @@
         --heading-line-height: 1;
         /* A little extra line height so the descenders don't get clipped */
         --site-heading-line-height: 1.1;
-
-        --color: rgba(var(--black), 0.8);
-        --a-color: rgb(var(--mid-blue));
-        --a-underline-color: rgb(var(--sub-lt-gray));
-        --a-ruby-color: var(--color);
-        --heading-color: rgb(var(--black));
-        --site-nav-link-color: var(--a-color);
-    }
-    @media (prefers-color-scheme: dark) {
-        :root {
-            --color: rgba(var(--white), 0.8);
-            --heading-color: rgb(var(--white));
-        }
     }
 
     a {
@@ -58,26 +45,13 @@
         text-decoration: underline;
     }
 
-    a.hover-only {
-        color: var(--color);
-        transition: color 0.2s;
-    }
-
-    a.hover-only:hover {
-        color: var(--a-color);
-        transition: color 0.2s;
-    }
-
-    a rt,
-    a:hover rt {
-        color: var(--a-ruby-color);
-    }
-
     body {
         font-size: var(--font-size);
     }
 
-    code { font-family: var(--font-family-monospace); }
+    code {
+        font-family: var(--font-family-monospace);
+    }
 
     figcaption {
         font-size: 80%;
@@ -98,7 +72,6 @@
     h5, h6 { font-family: var(--font-family-body); }
 
     header.site nav > .active { font-weight: bold; }
-    header.site nav > li { color: var(--site-nav-link-color); }
 
     main:has(header > .post-title > h1) h1 { font-size: 244%; }
     main:has(header > .post-title > h1) h2 { font-size: 195%; }
@@ -106,10 +79,12 @@
     main:has(header > .post-title > h1) h4 { font-size: 125%; }
     main:has(header > .post-title > h1) h5 { font-size: 100%; }
     main:has(header > .post-title > h1) h6 { font-size: 100%; }
-    main:has(header > .post-title > h1) :is(h5, h6) { font-family: var(--font-family-body); }
+
+    main:has(header > .post-title > h1) :is(h5, h6) {
+        font-family: var(--font-family-body);
+    }
 
     h1, h2, h3, h4, h5, h6 {
-        color: var(--heading-color);
         font-family: var(--font-family-heading);
         font-weight: 600;
         letter-spacing: 1pt;
@@ -117,49 +92,11 @@
     }
 
     h1.gradient {
-        --site-title-color1: rgb(103, 128, 229);
-        --site-title-color2: rgb(130, 90, 227);
-        --site-title-color3: rgb(135, 101, 228);
-        --site-title-color4: rgb(125, 115, 229);
-        --site-title-color5: rgb(107, 130, 230);
-        --site-title-color6: rgb(77, 153, 232);
-        --site-title-color7: rgb(74, 136, 230);
-        --site-title-color8: rgb(71, 128, 228);
-        --site-title-color9: rgb(65, 80, 224);
-        --site-title-color10: rgb(61, 58, 223);
-
-        color: rgb(var(--mid-blue));
         font-family: var(--font-family-site-heading);
     }
 
     h1.gradient > a { color: inherit; }
 
-    @supports not ((background-clip: text) or (-webkit-background-clip: text)) {
-        h1.gradient span:nth-child(10n + 1) { color: var(--site-title-color1); }
-        h1.gradient span:nth-child(10n + 2) { color: var(--site-title-color2); }
-        h1.gradient span:nth-child(10n + 3) { color: var(--site-title-color3); }
-        h1.gradient span:nth-child(10n + 4) { color: var(--site-title-color4); }
-        h1.gradient span:nth-child(10n + 5) { color: var(--site-title-color5); }
-        h1.gradient span:nth-child(10n + 6) { color: var(--site-title-color6); }
-        h1.gradient span:nth-child(10n + 7) { color: var(--site-title-color7); }
-        h1.gradient span:nth-child(10n + 8) { color: var(--site-title-color8); }
-        h1.gradient span:nth-child(10n + 9) { color: var(--site-title-color9); }
-        h1.gradient span:nth-child(10n) { color: var(--site-title-color10); }
-    }
-    @supports (background-clip: text) or (-webkit-background-clip: text) {
-        h1.gradient {
-            background:
-                radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
-                radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
-                radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%),
-                radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
-                radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
-                radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-        }
-    }
 
     header.site h1.site {
         font-size: var(--site-header-font-size);
@@ -193,90 +130,19 @@
     }
 
     html {
-        color: var(--color);
         font-family: var(--font-family);
         font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max));
     }
 
-    nav.bulleted > li:first-child::before {
-        color: var(--color);
-    }
-
     nav.bulleted > li::before {
-        color: var(--heading-color);
         font-size: 60%;
         font-weight: normal;
     }
 
     p { line-height: var(--line-height); }
 
-    ruby:hover rt { color: var(--color); }
-
-    @media (prefers-color-scheme: dark) {
-        rt { color: rgba(var(--white), 0.5); }
-    }
-
-    .list {
-        gap: var(--list-item-block-gap) 0;
-    }
-
-    .list > h1,
-    .list > header {
-        grid-column: content-start / content-end;
-    }
-
-    .list > .post {
-        grid-column: wide-content-start / wide-content-end;
-    }
-
-    @supports (grid-template-columns: subgrid) {
-        .list > .post {
-            --body-item-spacing: 2rem;
-
-            display: grid;
-            grid-template-columns: subgrid;
-            gap: var(--body-item-spacing) 0;
-        }
-    }
-
-    .list .post header {
-        grid-column: wide-content-start / content-end;
-    }
-
-    @supports (grid-template-columns: subgrid) {
-        .list .post header {
-            display: grid;
-            grid-template-columns: subgrid;
-        }
-    }
-
-    .list .post time {
-        grid-column: wide-content-start;
-        justify-self: end;
-    }
-
-    @media (max-width: 960px) {
-        .list .post time {
-            grid-column: content-start / content-end;
-            justify-self: start;
-        }
-    }
-
-    .list .post time {
-        font-variant-numeric: tabular-nums;
-    }
-
-    @media (max-width: 960px) {
-        .list .post time {
-            line-height: var(--line-height);
-        }
-    }
 
     .title {
         font-size: var(--h5-size);
     }
-
-    .title, .title a {
-        color: var(--color);
-    }
 }