Parameterize the photo grid

assets/styles/photos/001_photos.css

@@ -1,3 +1,4 @@
+{{ $gridSize := site.Params.photos.gridSize }}
 :root {
     --date-item-background-color: rgb(var(--lt-gray));
 
@@ -26,7 +27,7 @@
 
 .photos.list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax({{ printf "%dpx" $gridSize }}, 1fr));
     gap: 4px;
 }
 

assets/styles/root/000_layers.css

@@ -1,2 +1 @@
 @layer reset, typography, root, layout, section, page, utility;
-

assets/styles/root/002_columns.css

@@ -235,11 +235,12 @@
     grid-column: wide-content-start / wide-content-end;
   }
 
-  main > header > span.series {
+  main > header > .series {
     margin-inline-start: 0.5em;
+    width: 100%;
   }
 
-  main > header > span.series::before {
+  main > header > .series::before {
     margin-inline-end: 0.25em;
   }
 

assets/styles/root/050_typography.css

@@ -167,6 +167,10 @@
         line-height: var(--line-height);
     }
 
+    p > code {
+      white-space: pre;
+    }
+
     .social {
       letter-spacing: 2px;
     }

config/_default/params.yaml

@@ -4,3 +4,7 @@ twitter: erynofwales
 github: erynofwales
 instagram: erynofwales
 description: Home page of Eryn Rachel Wells
+
+photos:
+  gridSize: 200
+  thumbnailSize: 600

layouts/partials/resources/root_css.html

@@ -1,5 +1,4 @@
-{{ $stylesheets := slice (resources.Get "styles/root.css")
+{{ $stylesheets := slice (resources.Get "styles/railroad.css")
-                         (resources.Get "styles/railroad.css")
                          (resources.Get "styles/monokai.css")
                  | append (resources.Match "styles/root/*.css" | sort) }}
 {{ if not hugo.IsProduction }}

layouts/photos/li_thumbnail_in_grid.html

@@ -1,6 +1,13 @@
-{{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" 600 "Height" 600) -}}
+{{- $gridSize := $.Site.Params.photos.thumbnailSize -}}
-{{- $thumbnail = $thumbnail.Crop "600x600" -}}
+{{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" $gridSize "Height" $gridSize) -}}
+{{- $thumbnail = $thumbnail.Crop (printf "%dx%d" $gridSize $gridSize) -}}
 {{- $altText := $thumbnail.Params.alt -}}
 <a href="{{ .RelPermalink }}" title="{{ .Title }}">
-  <img src="{{ $thumbnail.RelPermalink }}"{{ with $altText }} alt="{{ . }}"{{ end }}>
+  <img
+    src="{{ $thumbnail.RelPermalink }}"
+    {{ with $altText }}
+      alt="{{ . }}"
+    {{ end }}
+    width={{ $gridSize }}
+    height={{ $gridSize }}>
 </a>

layouts/photos/single.html

@@ -11,7 +11,12 @@
   {{ if eq (len $photos) 1 }}
     {{- $img := index $photos 0 -}}
     <figure>
-      <img src="{{ $img.RelPermalink }}"{{ with $img.Params.alt }} alt="{{ . }}"{{ end }}>
+      <img
+        src="{{ $img.RelPermalink }}"
+        {{ with $img.Params.alt }}
+          alt="{{ . }}"
+        {{ end }}
+        height={{ $img.Height }}>
     </figure>
 
     <article>