Fix styling of blog, photos, term, ruby

So many fixes!

assets/styles/blog/050_content.css

@@ -1,11 +1,12 @@
 /* Eryn Wells <eryn@erynwells.me> */
 
-a:has(> img) {
+:has(> img) {
   grid-column: content-start / content-end;
+  line-height: 0;
 }
 
 @media (max-width: 639px) {
-  a:has(> img) {
+  :has(> img) {
     grid-column: gutter-start / gutter-end;
   }
 }
@@ -14,6 +15,6 @@ main {
   gap: var(--body-item-spacing) 0;
 }
 
-main > article > :not(:last-child) {
-    margin-block-end: var(--body-item-spacing);
+article > :is(h1, h2, h3, h4, h5, h6) {
+    grid-column: content-start / content-end;
 }

assets/styles/photos/001_photos.css

@@ -32,6 +32,7 @@
 
 .photos.list > * {
     margin-block-end: 0;
+    grid-column: auto;
 }
 
 .photos.list > a {
@@ -40,13 +41,11 @@
 }
 
 .photos.list > a > img {
-    border-radius: 3px;
     image-orientation: from-image;
 }
 
 .photos.list > div {
     background-color: var(--date-item-background-color);
-    border-radius: 3px;
     width: 100%;
     height: 100%;
     display: flex;

assets/styles/root.css

@@ -80,25 +80,6 @@
 }
 
 @layer root {
-  a {
-    text-decoration: none;
-  }
-
-  a: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;
-  }
-
   blockquote {
     --line-width: 4px;
 
@@ -110,9 +91,6 @@
 
   code {
     background-color: var(--body-code-background-color);
-    border-radius: 0.25rem;
-    display: inline-block;
-    padding-inline: 0.6rem;
   }
 
   code.nobg {

assets/styles/root/002_columns.css

@@ -1,9 +1,9 @@
-@layer root {
-    :root {
-        --margin-min-width: var(--body-item-spacing);
-        --margin-max-width: 1fr;
-    }
+:root {
+    --margin-min-width: var(--body-item-spacing);
+    --margin-max-width: 1fr;
+}
 
+@layer root {
     main {
         --content-columns: 5;
         --gutter-width: 3rem;
@@ -17,7 +17,12 @@
             [wide-content-left-end gutter-start gutter-left-start]
             var(--gutter-width)
             [gutter-left-end content-start]
-            repeat(var(--content-columns), min(calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), calc(var(--content-width) / var(--content-columns))))
+            repeat(var(--content-columns),
+                min(
+                    calc((100% - 2 * var(--gutter-width)) / var(--content-columns)),
+                    calc(var(--content-width) / var(--content-columns))
+                )
+            )
             [content-end gutter-right-start]
             var(--gutter-width)
             [gutter-right-end gutter-end wide-content-right-start]
@@ -66,7 +71,12 @@
         }
     }
 
-    main > :is(header, article, footer) {
-        grid-column: gutter-start / gutter-end;
+    main > * {
+        grid-column: content-start / content-end;
+    }
+
+    main > figure,
+    main > a.to-photo-post {
+        grid-column: wide-content-start / wide-content-end;
     }
 }

assets/styles/root/010_links.css

@@ -0,0 +1,34 @@
+@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_figures.css

@@ -8,7 +8,7 @@
     }
 
     figure {
-        grid-column: content-start / content-end;
+        grid-column: gutter-start / gutter-end;
         margin: 0;
         margin-inline: 0;
         min-width: fit-content;
@@ -42,7 +42,6 @@
     figure img {
         display: block;
         height: auto;
-        max-width: var(--content-width);
     }
 
     @media (max-width: 414px) {

assets/styles/root/050_generic_page.css

@@ -17,9 +17,6 @@
         }
     }
 
-    .page > header > time {
-    }
-
     .page > header,
     .page > footer {
         grid-column: content-start / content-end;
@@ -37,8 +34,8 @@
         grid-column: gutter-start / gutter-end;
     }
 
-    .page > article > :not(blockquote, figure.code) {
-        margin-inline: var(--gutter-width);
+    .page > :not(blockquote, figure.code, :has(> img)) {
+        grid-column: content-start / content-end;
     }
 
     .page > article > :not(:last-child) {

assets/styles/root/050_post_list.css

@@ -1,18 +1,23 @@
+:root {
+    --list-item-block-gap: var(--body-item-spacing);
+}
+
 @layer section {
-  .blog.list {
-    gap: 8rem 0;
+  .list {
+    gap: var(--list-item-block-gap) 0;
   }
 
-  .blog.list > h1.date {
+  .list > h1,
+  .list > header {
     grid-column: content-start / content-end;
   }
 
-  .blog.list > .post {
+  .list > .post {
     grid-column: wide-content-start / wide-content-end;
   }
 
   @supports (grid-template-columns: subgrid) {
-    .blog.list > .post {
+    .list > .post {
       --body-item-spacing: 2rem;
 
       display: grid;
@@ -21,32 +26,32 @@
     }
   }
 
-  .post header {
+  .list .post header {
     grid-column: wide-content-start / content-end;
   }
 
   @supports (grid-template-columns: subgrid) {
-    .post header {
+    .list .post header {
       display: grid;
       grid-template-columns: subgrid;
     }
   }
 
-  .post time {
+  .list .post time {
     font-variant-numeric: tabular-nums;
     grid-column: wide-content-start;
     justify-self: end;
   }
 
   @media (max-width: 960px) {
-    .post time {
+    .list .post time {
       grid-column: content-start / content-end;
       justify-self: start;
       line-height: var(--line-height);
     }
   }
 
-  article.post {
+  .post {
     grid-column: gutter-start / gutter-end;
   }
 

assets/styles/root/050_ruby.css

@@ -0,0 +1 @@
+

assets/styles/root/050_ruby_controls.css

@@ -1,27 +1,33 @@
 @layer root {
-    body:has(fieldset#ruby-controls > input[value=NONE]:checked) rt { display: none; }
+    #ruby-controls {
+        align-items: baseline;
+        display: flex;
+        padding: calc(var(--body-item-spacing) / 2);
+    }
+
+    body:has(#ruby-controls > input[value=NONE]:checked) rt { display: none; }
 
     /* When ruby-controls is set to hidden, hide the ruby base and only show the <rt> */
-    body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) ruby > span { display: none; }
+    body:has(#ruby-controls > input[value=HIDDEN]:checked) ruby > span { display: none; }
 
-    body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) rt {
+    body:has(#ruby-controls > input[value=HIDDEN]:checked) rt {
         color: inherit;
         display: inline;
         font-size: inherit;
         white-space: inherit;
     }
 
-    body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt {
+    body:has(#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt {
         font-family: var(--font-family-heading);
         font-weight: bold;
     }
 
-    fieldset#ruby-controls input[type=radio] {
-        margin-inline-end: calc(var(--body-item-spacing) / 6);
+    fieldset#ruby-controls input[type=radio]:not(:last-child) {
+        margin-inline-end: 0.5rem;
     }
 
-    fieldset#ruby-controls label {
-        margin-inline-end: calc(var(--body-item-spacing));
+    fieldset#ruby-controls label:not(:last-child) {
+        margin-inline-end: 2rem;
     }
 
     rt { transition: color 0.3s; }

assets/styles/root/050_site_header.css

@@ -18,7 +18,11 @@
     }
 
 
-    header.site h1 > a:hover { text-decoration: none; }
+    header.site a[href],
+    header.site a[href]:hover {
+      color: inherit;
+      text-decoration: none;
+    }
 
     header.site {
         display: flex;

assets/styles/root/050_syntax_highlighting.css

@@ -1,11 +1,24 @@
-.highlight code {
-    background-color: inherit;
-    margin-block: 0.5em;
+@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 .line {
-    display: grid;
-    grid-template-columns: max-content auto;
+.highlight code {
+    background-color: inherit;
 }
 
 .highlight .ln a {
@@ -17,4 +30,4 @@
 
 .highlight .cl {
     white-space: pre-wrap;
-}
+

assets/styles/root/050_table_of_contents.css

@@ -1,5 +1,3 @@
 aside#table-of-contents {
-    grid-column: wide-content-right / margin-right;
-    grid-row: 1 / -1;
-
+    grid-column: content-start / content-end;
 }

assets/styles/root/050_typography.css

@@ -45,12 +45,6 @@
         }
     }
 
-    a { color: var(--a-color); }
-    a:visited { color: var(--a-color); }
-    a.hover-only { color: var(--color); }
-    a.hover-only:hover { color: var(--a-color); }
-    a rt, a:hover rt { color: var(--a-ruby-color); }
-
     body {
         font-size: var(--font-size);
     }