Partially reorganize styles into functional chunks, rather than by component

Move link, generic page layout, post list, and a bunch of leftover stuff in root.css to functional stylesheets in styles/root/.

assets/styles/root.css

@@ -1,77 +1,12 @@
 @layer reset, typography, root, layout, section, page, utility;
 
 :root {
-  --black: 0, 0, 0;
-  --sub-dk-gray: 16, 16, 16;
-  --dk-gray: 32, 32, 32;
-  --super-dk-gray: 80, 80, 80;
-  --mid-gray: 128, 128, 128;
-  --sub-lt-gray: 175, 175, 175;
-  --lt-gray: 223, 223, 223;
-  --super-lt-gray: 240, 240, 240;
-  --white: 255, 255, 255;
-
-  --lt-blue: 69, 212, 243;
-  --mid-blue: 26, 169, 239;
-  --dk-blue: 63, 46, 231;
-  --purple: 161, 49, 232;
-  --lilac: 187, 121, 245;
-
-  --background: var(--white);
-
-  --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-item-spacing: 4rem;
-  --body-code-background-color: rgb(var(--super-lt-gray));
-
-  --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray));
-
-  --html-background-color: rgb(var(--background));
-
-  --nav-bulleted-spacing: 0.75rem;
-
-  --platter-background-color: rgba(var(--white), var(--platter-background-opacity));
-  --platter-background-opacity: 0.6;
-  --platter-backdrop-filter: blur(10px);
-
-  --content-width: 80rem;
-
-  --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));
-  --tag-hover-background-color: rgb(var(--sub-lt-gray));
-
   --transition-duration: 0.7s;
-
   --menu-icon-size: 20px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: var(--black);
-
-    --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));
-
-    --html-background-color: rgb(var(--background));
-
-    --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
-    --platter-backdrop-filter: brightness(0.66) blur(10px);
-
-    --tag-foreground-color: rgb(var(--sub-lt-gray));
-    --tag-background-color: rgb(var(--dk-gray));
-    --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
-    --tag-hover-background-color: rgb(var(--super-dk-gray));
-    --tag-hover-foreground-color: rgb(var(--mid-gray));
-
     --twitter-icon: url(/icons/twitter-dark.svg);
     --github-icon: url(/icons/github-dark.svg);
     --instagram-icon: url(/icons/instagram-dark.svg);
@@ -80,126 +15,16 @@
 }
 
 @layer root {
-  blockquote {
-    --line-width: 4px;
-
-    border-inline-start: var(--line-width) solid var(--separator-color);
-    padding-inline-start: calc(3rem - var(--line-width));
-    margin-block: 0;
-    margin-inline: 0;
-  }
-
-  code {
-    background-color: var(--body-code-background-color);
-  }
-
-  code.nobg {
-    background: none;
-    border-radius: 0;
-    display: inline-block;
-    margin: 0;
-    padding: 0;
-  }
-
-  details {
-    width: 100%;
-  }
-
-  details:has(#TableOfContents) {
-    box-sizing: border-box;
-    border: 1px solid var(--separator-color);
-    padding: var(--body-item-spacing);
-  }
-
-  fieldset {
-    box-sizing: border-box;
-    border: 1px solid var(--separator-color);
-    padding: var(--body-item-spacing);
-    padding-top: calc(var(--body-item-spacing) / 10);
-  }
-
-  html {
-    background-color: var(--html-background-color);
-  }
-
-  img {
-    height: auto;
-    max-width: 100%;
-    width: 100%;
-  }
-
-  img.circular {
-    shape-outside: circle(50%);
-    -webkit-clip-path: circle(50%);
-    clip-path: circle(50%);
-  }
-
-  main {
-    box-sizing: border-box;
-    margin-block-start: var(--body-item-spacing);
-    width: 100%;
-  }
-
   nav.bulleted>li:first-child::before {
     content: "";
-    margin-inline: 0;
   }
 
   nav.bulleted>li::before {
-    color: var(--heading-color);
     content: "•";
-    font-size: 60%;
-    font-weight: normal;
     opacity: 80%;
-    margin-inline: var(--nav-bulleted-spacing);
-  }
-
-  ul,
-  ol,
-  dl,
-  ul>li,
-  ol>li,
-  dl>dt {
-    margin-inline-start: calc(var(--body-item-spacing) + 2px);
-  }
-
-  ul>li>ul,
-  ul>li>ol,
-  ol>li>ul,
-  ol>li>ol {
-    margin-inline-start: 0;
-  }
-
-  :is(ul, ol) > li {
-      margin-block-start: 1rem;
-  }
-
-  header>span.series {
-    font-size: 1.75rem;
-    letter-spacing: 1px;
-    margin-inline-start: 0.5em;
   }
 
   header > span.series::before {
-    color: var(--header-series-arrow-foreground-color);
     content: "↳";
-    margin-inline-end: 0.25em;
-  }
-
-  table {
-    border: 1px solid var(--separator-color);
-    border-collapse: collapse;
-    margin-inline: auto;
-    width: 50%;
-  }
-
-  td,
-  th {
-    border: 1px solid var(--separator-color);
-    padding-inline: 1rem;
-  }
-
-  p, ul {
-      grid-column: content-start / content-end;
   }
 }

assets/styles/root/002_colors.css

@@ -0,0 +1,106 @@
+:root {
+  --black: 0, 0, 0;
+  --sub-dk-gray: 16, 16, 16;
+  --dk-gray: 32, 32, 32;
+  --super-dk-gray: 80, 80, 80;
+  --mid-gray: 128, 128, 128;
+  --sub-lt-gray: 175, 175, 175;
+  --lt-gray: 223, 223, 223;
+  --super-lt-gray: 240, 240, 240;
+  --white: 255, 255, 255;
+
+  --lt-blue: 69, 212, 243;
+  --mid-blue: 26, 169, 239;
+  --dk-blue: 63, 46, 231;
+  --purple: 161, 49, 232;
+  --lilac: 187, 121, 245;
+
+  --background: var(--white);
+
+  --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));
+
+  --html-background-color: rgb(var(--background));
+
+  --platter-background-color: rgba(var(--white), var(--platter-background-opacity));
+  --platter-background-opacity: 0.6;
+  --platter-backdrop-filter: blur(10px);
+
+  --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));
+  --tag-hover-background-color: rgb(var(--sub-lt-gray));
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: var(--black);
+
+    --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));
+
+    --html-background-color: rgb(var(--background));
+
+    --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
+    --platter-backdrop-filter: brightness(0.66) blur(10px);
+
+    --tag-foreground-color: rgb(var(--sub-lt-gray));
+    --tag-background-color: rgb(var(--dk-gray));
+    --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
+    --tag-hover-background-color: rgb(var(--super-dk-gray));
+    --tag-hover-foreground-color: rgb(var(--mid-gray));
+  }
+}
+
+@layer root {
+  a[href] {
+    color: var(--a-color);
+  }
+
+  a[href]:visited {
+    color: var(--a-color);
+  }
+
+  a.hover-only {
+    color: var(--color);
+  }
+
+  code {
+    background-color: var(--body-code-background-color);
+  }
+
+  code.nobg {
+    background: none;
+  }
+
+  details:has(#TableOfContents) {
+    border: 1px solid var(--separator-color);
+  }
+
+  fieldset {
+    border: 1px solid var(--separator-color);
+  }
+
+  html {
+    background-color: var(--html-background-color);
+  }
+
+  table {
+    border: 1px solid var(--separator-color);
+  }
+
+  td, th {
+    border: 1px solid var(--separator-color);
+  }
+}

assets/styles/root/002_columns.css

@@ -1,6 +1,10 @@
 :root {
+  --body-item-spacing: 4rem;
+  --content-width: 80rem;
+  --list-item-block-gap: var(--body-item-spacing);
   --margin-min-width: var(--body-item-spacing);
   --margin-max-width: 1fr;
+  --nav-bulleted-spacing: 0.75rem;
 }
 
 @layer root {
@@ -79,4 +83,148 @@
     main > a.to-photo-post {
         grid-column: wide-content-start / wide-content-end;
     }
+
+    p, ul {
+        grid-column: content-start / content-end;
+    }
+}
+
+@layer layout {
+  blockquote {
+    --line-width: 4px;
+
+    border-inline-start: var(--line-width) solid var(--separator-color);
+    padding-inline-start: calc(3rem - var(--line-width));
+
+    margin: 0;
+  }
+
+  code.nobg {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+  }
+
+  details {
+    width: 100%;
+  }
+
+  details:has(#TableOfContents) {
+    box-sizing: border-box;
+    padding: var(--body-item-spacing);
+  }
+
+  fieldset {
+    box-sizing: border-box;
+    padding: var(--body-item-spacing);
+    padding-top: calc(var(--body-item-spacing) / 10);
+  }
+
+  header>span.series {
+    margin-inline-start: 0.5em;
+  }
+
+  header > span.series::before {
+    margin-inline-end: 0.25em;
+  }
+
+  img {
+    height: auto;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  main {
+    box-sizing: border-box;
+    margin-block-start: var(--body-item-spacing);
+    width: 100%;
+  }
+
+  nav.bulleted>li:first-child::before {
+    margin-inline: 0;
+  }
+
+  nav.bulleted>li::before {
+    margin-inline: var(--nav-bulleted-spacing);
+  }
+
+  ul,
+  ol,
+  dl,
+  :is(ul, ol) > li,
+  dl > dt {
+    margin-inline-start: calc(var(--body-item-spacing) + 2px);
+  }
+
+  :is(ul, ol) > li {
+      margin-block-start: 1rem;
+  }
+
+  :is(ul, ol) > li > :is(ul, ol) {
+    margin-inline-start: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    margin-inline: auto;
+    width: 50%;
+  }
+
+  td,
+  th {
+    padding-inline: 1rem;
+  }
+
+  .page {
+    gap: var(--body-item-spacing) 0;
+  }
+
+  .page > header {
+    align-items: first baseline;
+    column-gap: 4rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  @media (max-width: 539px) {
+    .page > header {
+      grid-template-columns: auto;
+    }
+  }
+
+  .page > header,
+  .page > footer {
+    grid-column: content-start / content-end;
+  }
+
+  .page > header > :is(h1, h2, h3, h4, h5, h6) {
+    grid-column: 1;
+  }
+
+  .page > header > time {
+    grid-column: 2;
+  }
+
+  .page > article > * {
+    grid-column: gutter-start / gutter-end;
+  }
+
+  .page > :not(blockquote, figure.code, :has(> img)) {
+    grid-column: content-start / content-end;
+  }
+
+  .page > article > :not(:last-child) {
+    margin-block-end: var(--body-item-spacing);
+  }
+
+  .post {
+    grid-column: gutter-start / gutter-end;
+  }
+
+  .post p,
+  .post .tags,
+  .post .title {
+    grid-column: content-start / content-end;
+  }
 }

assets/styles/root/010_links.css

@@ -1,34 +0,0 @@
-@layer root {
-  a {
-    text-decoration: none;
-  }
-
-  a[href] {
-    color: var(--a-color);
-  }
-
-  a[href]:visited {
-    color: var(--a-color);
-  }
-
-  a[href]:hover {
-    text-decoration: underline;
-    text-decoration-style: solid;
-  }
-
-  a.hover-only {
-    color: var(--color);
-    transition: color 0.2s;
-  }
-
-  a.hover-only:hover {
-    text-decoration: underline;
-    transition: color 0.2s;
-  }
-
-  a.hover-only { color: var(--color); }
-
-  a.hover-only:hover { color: var(--a-color); }
-
-  a rt, a:hover rt { color: var(--a-ruby-color); }
-}

assets/styles/root/050_generic_page.css

@@ -1,44 +0,0 @@
-@layer root {
-    .page {
-        gap: var(--body-item-spacing) 0;
-    }
-
-    .page > header {
-        align-items: first baseline;
-        column-gap: 4rem;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-
-    @media (max-width: 539px) {
-        .page > header {
-            grid-template-columns: auto;
-        }
-    }
-
-    .page > header,
-    .page > footer {
-        grid-column: content-start / content-end;
-    }
-
-    .page > header > :is(h1, h2, h3, h4, h5, h6) {
-        grid-column: 1;
-    }
-
-    .page > header > time {
-        grid-column: 2;
-    }
-
-    .page > article > * {
-        grid-column: gutter-start / gutter-end;
-    }
-
-    .page > :not(blockquote, figure.code, :has(> img)) {
-        grid-column: content-start / content-end;
-    }
-
-    .page > article > :not(:last-child) {
-        margin-block-end: var(--body-item-spacing);
-    }
-}

assets/styles/root/050_post_list.css

@@ -1,75 +0,0 @@
-:root {
-    --list-item-block-gap: var(--body-item-spacing);
-}
-
-@layer section {
-  .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 {
-    font-variant-numeric: tabular-nums;
-    grid-column: wide-content-start;
-    justify-self: end;
-  }
-
-  @media (max-width: 960px) {
-    .list .post time {
-      grid-column: content-start / content-end;
-      justify-self: start;
-      line-height: var(--line-height);
-    }
-  }
-
-  .post {
-    grid-column: gutter-start / gutter-end;
-  }
-
-  .post p,
-  .post .tags,
-  .post .title {
-    grid-column: content-start / content-end;
-  }
-
-  li > article > p:last-child {
-    margin-block-end: 0;
-  }
-
-  .title {
-    font-size: var(--h5-size);
-  }
-
-  .title, .title a {
-    color: var(--color);
-  }
-}

assets/styles/root/050_typography.css

@@ -45,6 +45,34 @@
         }
     }
 
+    a {
+        text-decoration: none;
+    }
+
+    a[href]:hover {
+        text-decoration: underline;
+        text-decoration-style: solid;
+    }
+
+    a.hover-only:hover {
+        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);
     }
@@ -155,14 +183,30 @@
         letter-spacing: 0;
     }
 
+    header > span.series {
+        font-size: 1.75rem;
+        letter-spacing: 1px;
+    }
+
+    header > span.series::before {
+        color: var(--header-series-arrow-foreground-color);
+    }
+
     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:first-child::before {
-    nav.bulleted > li::before { color: var(--heading-color); }
+        color: var(--color);
+    }
+
+    nav.bulleted > li::before {
+        color: var(--heading-color);
+        font-size: 60%;
+        font-weight: normal;
+    }
 
     p { line-height: var(--line-height); }
 
@@ -171,4 +215,68 @@
     @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);
+    }
 }

assets/styles/root/099_utility.css

@@ -1,11 +1,13 @@
 @layer utility {
     .centered { text-align: center; }
+    
     .float-right {
         float: right;
         justify-self: end;
     }
 
     .nobreak { white-space: nowrap; }
+
     .noselect {
         cursor: default;
         -webkit-user-select: none;
@@ -26,4 +28,10 @@
     .visible { visibility: visible; }
 
     article.two-column { columns: 2; }
+
+    img.circular {
+      shape-outside: circle(50%);
+      -webkit-clip-path: circle(50%);
+      clip-path: circle(50%);
+    }
 }