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;
 }
 
+@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 @@
-@layer section {
-  .blog.list {
-    gap: 8rem 0;
+:root {
+    --list-item-block-gap: var(--body-item-spacing);
 }
 
-  .blog.list > h1.date {
+@layer section {
+  .list {
+    gap: var(--list-item-block-gap) 0;
+  }
+
+  .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;
   }
 
-.highlight .line {
-    display: grid;
-    grid-template-columns: max-content auto;
+  .line > .ln {
+    grid-column: gutter-start;
+  }
+
+  .line > .cl {
+    grid-column: content-start / content-end;
+  }
+}
+
+.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);
     }

layouts/_default/term.html

@@ -3,11 +3,10 @@
 {{ end }}
 
 {{ define "main" }}
-<header class="page">
+  <header>
     <h1>{{ .Title }}</h1>
   </header>
 
-{{ partial "table_of_contents.html" . }}
   {{ partial "ruby_controls.html" . }}
 
   {{- $hasContent := false -}}
@@ -17,15 +16,13 @@
   {{ end }}
 
   {{ if .Params.posts | default true }}
-  {{ if and $hasContent }}
+    {{ if $hasContent }}
       <h2>Posts</h2>
     {{ end }}
 
-  <ul>
     {{- range .Pages -}}
-    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+      {{ .Render "li_grid_with_date" }}
     {{- end -}}
-  </ul>
   {{ end }}
 {{ end }}
 

layouts/_default/terms.html

@@ -6,17 +6,35 @@
   <header class="page">
     <h1>{{ .Title }}</h1>
   </header>
-
+  <article>
     {{ .Content }}
 
     {{- range .Data.Terms.Alphabetical -}}
       <h2>{{ .Name | title }}</h2>
-<ul>
+
       {{- range .WeightedPages -}}
-  <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+        <article class="post">
+          <header>
+            <time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "Jan 2, 2006" }}</time>
+            <h1 class="title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+          </header>
+
+          {{ if .Description }}
+            <p>{{ .Description }}</p>
+          {{ else if lt .WordCount 110 }}
+            {{ .Content }}
+          {{ else }}
+            {{ warnf "Post \"%s\" doesn't have a description or content suitable for the blog list" .Title }}
+            <p>{{ .WordCount }} words</p>
+          {{ end }}
+
+          {{ partial "footer_tags.html" . }}
+
+          {{ partial "development/draft_tag.html" . }}
+        </article>
       {{- end -}}
-</ul>
     {{- end -}}
+  </article>
 {{ end }}
 
 {{ define "footer" }}

layouts/blog/list.html

@@ -5,6 +5,7 @@
 {{ define "main" }}
 {{- range .Pages.ByDate.GroupByDate "2006" -}}
   <h1 class="date"><a id="{{ .Key }}">{{ .Key | title }}</a></h1>
+
   {{- range .Pages -}}
     {{- if or (not .Draft) (not hugo.IsProduction) -}}
       {{- .Render "li_grid_with_date" -}}

layouts/partials/ruby_controls.html

@@ -1,13 +1,13 @@
 {{ if .HasShortcode "ruby" -}}
 <aside>
-  <fieldset id="ruby-controls">
+  <fieldset id=ruby-controls>
     <legend>Ruby</legend>
-    <input id="none" type="radio" name="ruby-controls" value="NONE">
-    <label for="none">Japanese Only</label>
-    <input id="both" type="radio" name="ruby-controls" value="BOTH" checked>
-    <label for="both">Both</label>
-    <input id=hidden type=radio name=ruby-controls value=HIDDEN>
-    <label for=hidden>English Only</label>
+    <input id=ruby-controls-none type=radio name=ruby-controls value=NONE>
+    <label for=ruby-controls-none>Japanese Only</label>
+    <input id=ruby-controls-both type=radio name=ruby-controls value=BOTH checked>
+    <label for=ruby-controls-both>Both</label>
+    <input id=ruby-controls-hidden type=radio name=ruby-controls value=HIDDEN>
+    <label for=ruby-controls-hidden>English Only</label>
   </fieldset>
 </aside>
 {{- end }}

layouts/partials/single_main.html

@@ -1,9 +1,16 @@
 {{ partial "content_header.html" . }}
 
+{{ partial "table_of_contents.html" . }}
+
 {{- $layout := .Params.layout -}}
-<article{{ with $layout }} class="{{ . }}"{{ end }}>
-{{ .Content }}
+{{- $content := .Content -}}
+{{ with $layout := .Params.layout }}
+  <article class="{{ $layout }}">
+    {{ $content }}
   </article>
+{{ else }}
+  {{ $content }}
+{{ end}}
 
 <footer>
   {{ partial "footer_tags.html" . }}

layouts/photos/single.html

@@ -3,10 +3,6 @@
 {{ end }}
 
 {{ define "main" }}
-{{- if .Title -}}
-  {{ partial "content_header.html" . }}
-{{- end -}}
-
   {{- $photos := partial "photos/list.html" . -}}
   {{ if eq (len $photos) 0 }}
     {{ errorf "Missing photo from photos page %q" .Path }}
@@ -14,9 +10,14 @@
 
   {{ if eq (len $photos) 1 }}
     {{- $img := index $photos 0 -}}
-  <figure><img src="{{ $img.RelPermalink }}"{{ with $img.Params.alt }} alt="{{ . }}"{{ end }}></figure>
+    <figure>
+      <img src="{{ $img.RelPermalink }}"{{ with $img.Params.alt }} alt="{{ . }}"{{ end }}>
+    </figure>
 
+    <article>
+      <h1>{{ .Title }}</h1>
       {{ .Content }}
+    </article>
 
     {{- if .Params.photo_details | default true -}}
       {{- partial "photo_exif_table.html" $img.Exif -}}

layouts/shortcodes/photo.html

@@ -1,7 +1,7 @@
 {{- with $photoPage := $.Page.GetPage (printf "photos/%s" (.Get 0)) -}}
   {{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" 1280 "Height" 1280) -}}
   {{- $altText := $thumbnail.Params.alt | default .Title -}}
-  <a href="{{ .RelPermalink }}" title="{{ .Title }}">
+  <a class="to-photo-post" href="{{ .RelPermalink }}" title="{{ .Title }}">
     <img src="{{ $thumbnail.RelPermalink }}"{{ with $altText }} alt="{{ . }}"{{ end }}>
   </a>
 {{- else -}}