Move all the syntax highlighting styles to functional stylesheets

assets/styles/root.css

@@ -1,7 +1,6 @@
 @layer reset, typography, root, layout, section, page, utility;
 
 :root {
-  --transition-duration: 0.7s;
   --menu-icon-size: 20px;
 }
 
@@ -13,18 +12,3 @@
     --feed-icon: url(/icons/rss-dark.svg);
   }
 }
-
-@layer root {
-  nav.bulleted>li:first-child::before {
-    content: "";
-  }
-
-  nav.bulleted>li::before {
-    content: "•";
-    opacity: 80%;
-  }
-
-  header > span.series::before {
-    content: "↳";
-  }
-}

assets/styles/root/002_colors.css

@@ -173,6 +173,7 @@
 
   nav.bulleted > li::before {
     color: var(--heading-color);
+    opacity: 80%;
   }
 
   ruby:hover rt {
@@ -193,6 +194,10 @@
     border: 1px solid var(--separator-color);
   }
 
+  .highlight code {
+    background-color: inherit;
+  }
+
   .title, .title a {
     color: var(--color);
   }

assets/styles/root/002_columns.css

@@ -106,7 +106,15 @@
     padding-top: calc(var(--body-item-spacing) / 10);
   }
 
-  header>span.series {
+  figure.code .line > .ln {
+    grid-column: gutter-start;
+  }
+
+  figure.code .line > .cl {
+    grid-column: content-start / content-end;
+  }
+
+  header > span.series {
     margin-inline-start: 0.5em;
   }
 
@@ -130,7 +138,7 @@
     grid-column: content-start / content-end;
   }
 
-  main > figure,
+  main > figure:not(.code),
   main > a.to-photo-post {
     grid-column: wide-content-start / wide-content-end;
   }

assets/styles/root/010_interactions.css

@@ -0,0 +1,14 @@
+/* Eryn Wells <eryn@erynwells.me> */
+
+:root {
+  --transition-duration: 0.7s;
+}
+
+@layer root {
+  .highlight .ln a {
+    -webkit-user-select: none;
+    -moz-use-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+}

assets/styles/root/050_syntax_highlighting.css

@@ -1,33 +0,0 @@
-@supports (grid-template-columns: subgrid) {
-  figure.code,
-  figure.code > .highlight,
-  figure.code > .highlight > .chroma,
-  figure.code > .highlight > .chroma > code,
-  figure.code > .highlight > .chroma > code > .line {
-    display: grid;
-    grid-template-columns: subgrid;
-  }
-
-  .line > .ln {
-    grid-column: gutter-start;
-  }
-
-  .line > .cl {
-    grid-column: content-start / content-end;
-  }
-}
-
-.highlight code {
-    background-color: inherit;
-}
-
-.highlight .ln a {
-    -webkit-user-select: none;
-    -moz-use-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.highlight .cl {
-    white-space: pre-wrap;
-

assets/styles/root/050_typography.css

@@ -1,7 +1,7 @@
 @font-face {
     font-family: "Museo_Slab";
     src: url("{{ `/fonts/Museo_Slab_500.woff2` | relURL }}") format("woff2"),
-        url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff");
+    url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff");
     font-weight: normal;
     font-style: normal;
 }
@@ -58,6 +58,10 @@
         line-height: var(--line-height);
     }
 
+    figure .highlight .cl {
+        white-space: pre-wrap;
+    }
+
     footer.site {
         font-size: 80%;
         line-height: 1;
@@ -71,19 +75,12 @@
     h6 { font-size: var(--h6-size); }
     h5, h6 { font-family: var(--font-family-body); }
 
-    header.site nav > .active { font-weight: bold; }
-
-    main:has(header > .post-title > h1) h1 { font-size: 244%; }
-    main:has(header > .post-title > h1) h2 { font-size: 195%; }
-    main:has(header > .post-title > h1) h3 { font-size: 156%; }
-    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);
+    header > span.series::before {
+        content: "↳";
     }
 
+    header.site nav > .active { font-weight: bold; }
+
     h1, h2, h3, h4, h5, h6 {
         font-family: var(--font-family-heading);
         font-weight: 600;
@@ -134,7 +131,23 @@
         font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max));
     }
 
+    main:has(header > .post-title > h1) h1 { font-size: 244%; }
+    main:has(header > .post-title > h1) h2 { font-size: 195%; }
+    main:has(header > .post-title > h1) h3 { font-size: 156%; }
+    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);
+    }
+
+    nav.bulleted>li:first-child::before {
+        content: "";
+    }
+
     nav.bulleted > li::before {
+        content: "•";
         font-size: 60%;
         font-weight: normal;
     }