Merge branch 'photos'

.gitattributes

@@ -0,0 +1,2 @@
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -3,3 +3,4 @@ resources/
 .hugo_build.lock
 *.log
 *.orig
+*~

config.toml

@@ -30,6 +30,11 @@ name = 'Eryn Wells'
         name = 'Blog'
         url = '/blog/'
         weight = 10
+    [[menu.main]]
+        identifier = 'photos'
+        name = 'Photos'
+        url = '/photos/'
+        weight = 20
     [[menu.main]]
         identifier = 'about'
         name = 'About'
@@ -53,6 +58,7 @@ description = 'Home page of Eryn Wells'
 
 [permalinks]
 blog = 'blog/:year/:month/:slug/'
+photos = 'photos/:year/:month/:slug/'
 
 [taxonomies]
 category = 'categories'

content/about/index.es.md

@@ -1,5 +1,6 @@
 ---
 title: "Hola! 👋🏻"
+draft: false
 ---
 
 Me llamo Eryn. Mis pronombres son [ella/ella][p]. Esta es me página personal. Bienvenide.

content/about/index.md

@@ -1,7 +1,7 @@
 ---
 title: "Hi! 👋🏻"
 date: 2022-09-03T12:14:32-07:00
-draft: true
+draft: false
 resources:
   - name: me
     src: me.jpeg

content/blog/2022/08/audio-scope-with-p5js/index.md

@@ -23,11 +23,13 @@ visualizations. By the end, we'll have something like this:
 HTML has the ability to [embed audio][mdn-audio-tag] in a page with the
 `<audio>` tag. This one declares a single MP3 file as a source.
 
+{{< figures/code >}}
 ```html
 <audio id="amen">
     <source src="amen.mp3" type="audio/mpeg">
 </audio>
 ```
+{{< /figures/code >}}
 
 In this form, the `<audio>` element doesn't do anything except declare some
 audio that can be played. It's invisible and the user can't interact with it or
@@ -47,6 +49,7 @@ destinations could be your computer's speakers or a file.
 Here's the entire code snippet that sets up the audio processing I need for the
 sketch:
 
+{{< figures/code >}}
 ```js {linenostart=2}
 let analyzerNode = null;
 let samples = null;
@@ -67,6 +70,7 @@ let audioContext = (() => {
     return audioContext;
 })();
 ```
+{{< /figures/code >}}
 
 The [`AudioContext`][mdn-audio-context] is the object that encapsulates the
 entire node graph. On line 10, I create a new `AudioContext`.
@@ -85,19 +89,20 @@ the audio context's `destination` node that routes to the computer's speakers.
 Our audio processing graph looks like this:
 
 {{< figures/railroad id="audioContextDiagram" >}}
+    {{< scripts/railroad >}}
         return rr.Diagram(
             rr.Sequence(
                 rr.Terminal("<audio>"),
                 rr.Terminal("Analyzer"),
                 rr.Terminal("destination")));
-{{< /figures/railroad >}}
-
-{{< figures/railroad id="audioContextDiagram" class="narrow-only" >}}
+    {{< /scripts/railroad >}}
+    {{< scripts/railroad narrow=1 >}}
     return rr.Diagram(
         rr.Stack(
             rr.Terminal("<audio>"),
             rr.Terminal("Analyzer"),
             rr.Terminal("destination")));
+    {{< /scripts/railroad >}}
 {{< /figures/railroad >}}
 
 By itself the AudioContext doesn't actually play any audio. I'll tackle that
@@ -109,6 +114,7 @@ Next up is starting playback. The following snippet creates a Play button using
 P5.js's DOM manipulation API, and hooks up the button's `click` event to start
 and stop playback.
 
+{{< figures/code >}}
 ```js {linenostart=29}
 const playPauseButton = p.createButton('Play');
 playPauseButton.position(10, 10);
@@ -131,6 +137,7 @@ playPauseButtonElement.addEventListener('click', function() {
     }
 });
 ```
+{{< /figures/code >}}
 
 Something I found odd while working with these audio components is there isn't a
 way to ask any of them if audio is playing back at any given moment. Instead it
@@ -147,12 +154,14 @@ The last bit of playback state tracking to do is to listen for when playback
 ends because it reached the end of the audio file. I did that with the `ended`
 event:
 
+{{< figures/code >}}
 ```js {linenostart=53}
 audioElement.addEventListener('ended', function() {
     playPauseButtonElement.dataset.playing = 'false';
     playPauseButtonElement.innerHTML = '<span>Play</span>';
 }, false);
 ```
+{{< /figures/code >}}
 
 This handler resets the `playing` flag and the label of the button.
 
@@ -160,6 +169,7 @@ This handler resets the `playing` flag and the label of the button.
 
 Now it's time to draw some waveforms! The main part of a P5 sketch is the `draw` method. Here's mine:
 
+{{< figures/code >}}
 ```js {linenostart=57}
 const amplitude = p.height / 2;
 const axis = p.height / 2;
@@ -184,12 +194,15 @@ for (let i = 0; i < samples.length; i++) {
     p.point(i, axis + amplitude * sampleValue);
 }
 ```
+{{< /figures/code >}}
 
 The most interesting part of this function starts at line 66 where we get an array of samples from the analyzer node. The `samples` variable is a JavaScript `Float32Array`, with one element for each pixel of width.
 
+{{< figures/code >}}
 ```js {linenostart=30}
 samples = new Float32Array(p.width);
 ```
+{{< /figures/code >}}
 
 Once the sample data is populated from the analyzer, we can render them by
 plotting them along the X axis, scaling them to the height of the sketch.

content/blog/blog.css

@@ -31,7 +31,7 @@
 }
 
 .post-single footer {
-    margin-block-start: 3.5rem;
+    margin-block-start: var(--body-item-spacing);
 }
 
 .blog .tags {

content/home.css

@@ -1,5 +1,6 @@
 :root {
     --animation-offset: 6px;
+    --font-size-max: 12px;
 }
 
 body {
@@ -16,10 +17,14 @@ h1 {
     margin: 0;
     padding: 0;
 }
-@media (max-width: 450px) {
+@media (max-width: 599px) {
     h1 { font-size: 4.25rem; }
 }
 
+html {
+    font-size: clamp(var(--font-size-min), 2.5vw, var(--font-size-max));
+}
+
 main {
     margin-block-start: 10vh;
     width: inherit;
@@ -29,7 +34,7 @@ main .grid {
     align-items: baseline;
     display: grid;
     gap: 0 2rem;
-    grid-template-columns: min-content 200px;
+    grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
     grid-template-rows: repeat(2, max-content);
     grid-template-areas:
         "title blurb"
@@ -37,7 +42,7 @@ main .grid {
     padding-inline: 1em;
     width: min-content;
 }
-@media (max-width: 450px) {
+@media (max-width: 599px) {
     main .grid {
         gap: 1rem 0;
         grid-template-columns: 1fr;
@@ -54,37 +59,48 @@ main h1 {
     letter-spacing: 0.025em;
     text-align: end;
 }
-@media (max-width: 450px) {
+@media (max-width: 599px) {
     main h1 { text-align: center; }
 }
 
-main nav {
+nav {
     align-items: baseline;
+    display: flex;
+    list-style: none;
+    text-transform: lowercase;
 }
 
-main p {
+nav > li {
+    margin-inline-start: 0.5em;
+}
+
+nav > li:first-of-type {
+    margin-inline-start: 0;
+}
+
+p {
     margin: 0;
 }
 
-#title { grid-area: title; }
+h1 { grid-area: title; }
 #content { grid-area: blurb }
-#nav { grid-area: nav }
+nav { grid-area: nav }
 
-#title > *, #content > *, #nav > * { position: relative; }
+h1, #content > p, nav { position: relative; }
 
-#title > * {
+h1 {
     animation: left-fade-in var(--transition-duration) ease-in-out;
 }
-@media (max-width: 450px) {
-    #title > * {
+@media (max-width: 599px) {
+    h1 {
         animation: top-fade-in var(--transition-duration) ease-in-out;
     }
 }
-#content > *, #nav > * {
+#content > p, nav {
     animation: right-fade-in var(--transition-duration) ease-in-out;
 }
-@media (max-width: 450px) {
-    #content > *, #nav > * {
+@media (max-width: 599px) {
+    #content > p, nav {
         animation: bottom-fade-in var(--transition-duration) ease-in-out;
     }
 }

content/photos/2022/07/library-of-hadrian/columns.jpeg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5cd94f1b871fbe127d65f9ff02a2ce5f431dfac370c77f07e2fc7d04d72dddd7
+size 1916134

content/photos/2022/07/library-of-hadrian/index.md

@@ -0,0 +1,6 @@
+---
+title: Columns at the Library of Hadrian
+date: 2022-07-30T13:30:07+02:00
+draft: false
+series: Greece
+---

content/photos/2022/07/space/IMG_3732.jpeg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6dcd74651a38a9fb740190cff140c436f5967429262a51c95974d0a3d5afe0bb
+size 5319563

content/photos/2022/07/space/index.md

@@ -0,0 +1,6 @@
+---
+title: Space
+date: 2022-07-29T20:27:01+02:00
+draft: false
+series: Greece
+---

content/photos/2022/08/mithymna/IMG_4095.jpeg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fa41885ab32ac9dd4a59c91c7f74820787f20426f6b80fd88aa8ff8266c91413
+size 1599817

content/photos/2022/08/mithymna/index.md

@@ -0,0 +1,7 @@
+---
+title: Μήθυμνα
+slug: mithymna
+date: 2022-08-03T16:42:22+02:00
+draft: false
+series: Greece
+---

content/photos/2022/08/mytilene/IMG_4209.jpeg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0ad206dae43892251f80714d015ad546f5585b99acc70eab5e34578d09ef250c
+size 2782093

content/photos/2022/08/mytilene/index.md

@@ -0,0 +1,9 @@
+---
+title: Μυτιλήνη
+slug: mytilene
+date: 2022-08-05T13:09:45+02:00
+draft: false
+series: Greece
+langs:
+    title: gr
+---

content/photos/2022/08/sappho-the-eresian/IMG_3962.jpeg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dd90a94609c9cebb8ee975734a645ce9b2c4d85dd07c2da45b00b7908a24e13d
+size 3952113

content/photos/2022/08/sappho-the-eresian/index.md

@@ -0,0 +1,12 @@
+---
+title: Ψάπφω Ερεσού
+slug: sappho-the-eresian
+date: 2022-08-04T15:32:20+02:00
+draft: false
+series: Greece
+---
+
+I fell in love with this piece of street art depicting Sappho as a modern woman
+by [@muckrock][muckrock] in Σκάλα ερεσού.
+
+[muckrock]: https://www.instagram.com/muckrock/

content/photos/_index.md

@@ -0,0 +1,3 @@
+---
+title: Photos
+---

content/photos/photos.css

@@ -0,0 +1,171 @@
+:root {
+    --body-code-background-color: rgb(var(--dk-gray));
+    --box-shadow-color: rgba(var(--dk-gray), 0.8);
+
+    --heading-color: rgb(var(--white));
+
+    --html-color: rgb(var(--white));
+    --html-background-color: rgb(var(--black));
+
+    --photo-params-background-color: rgb(var(--dk-gray));
+    --photo-params-container-background-color: rgb(var(--sub-dk-gray));
+    --photo-params-color: rgb(var(--super-lt-gray));
+    --photo-params-border-color: rgb(var(--sub-dk-gray));
+
+    --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
+
+    --separator-color: rgb(var(--dk-gray));
+
+    --twitter-icon: url(/icons/twitter-dark.svg);
+    --github-icon: url(/icons/github-dark.svg);
+    --instagram-icon: url(/icons/instagram-dark.svg);
+    --rss-icon: url(/icons/rss-dark.svg);
+}
+
+.photos.list {
+    box-sizing: border-box;
+    max-width: none;
+    padding: 0 var(--body-item-spacing);
+    width: 100%;
+}
+
+.photos.list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 4px;
+}
+
+.photos.page > nav {
+    margin-block-end: var(--body-item-spacing);
+}
+
+.photos.list > a {
+    display: block;
+    line-height: 0;
+}
+
+.photos.list > a > img {
+    border-radius: 3px;
+    image-orientation: from-image;
+}
+
+.photos.list > div {
+    background-color: #333;
+    border-radius: 3px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.photos.list > div > h6 {
+    display: block;
+    font-size: 5rem;
+    margin: 0 auto;
+    letter-spacing: 0;
+}
+
+.photos.list > div > h6 > span {
+    text-align: end;
+    width: min-content;
+    position: relative;
+    display: inline-block;
+    padding-inline-end: 20px;
+}
+
+.photos.list > div > h6 > span::after {
+    top: 6px;
+    right: 0px;
+    position: absolute;
+    display: block;
+    content: "⏵︎";
+    font-size: 80%;
+}
+@media (max-width: calc(24px + 400px + 4px)) {
+    .photos.list > div > h6 > span {
+        width: max-content;
+        padding-block: calc(0.25 * var(--body-item-spacing));
+    }
+    .photos.list > div > h6 > span::after {
+        content: "";
+    }
+}
+
+.photo-params {
+    width: 100%;
+}
+
+.photo-params .container {
+    display: block;
+    background-color: var(--photo-params-container-background-color);
+    border-radius: 10px;
+    margin: var(--body-item-spacing) auto;
+    padding: calc(var(--body-item-spacing) / 2);
+    width: 66%;
+}
+
+.photo-params table {
+    background-color: var(--photo-params-background-color);
+    color: var(--photo-params-color);
+    border-collapse: collapse;
+    border-radius: 6px;
+    table-layout: fixed;
+    text-align: center;
+    width: 100%;
+}
+
+.photo-params thead td {
+    border-bottom: 1px solid var(--photo-params-border-color);
+    font-size: 80%;
+    font-weight: bold;
+}
+
+.photo-params tr.exposure-attributes td {
+    border-top: 1px solid var(--photo-params-border-color);
+    border-left: 1px solid var(--photo-params-border-color);
+}
+
+.photo-params tr.exposure-attributes td:first-child {
+    border-left: none;
+}
+
+.photo-params td {
+    font-size: 75%;
+    padding: 1rem;
+}
+
+.photo-params td:last-child {
+    text-align: end;
+}
+
+.photo-params td:first-child {
+    text-align: start;
+}
+
+.photo-params .make-model {
+    font-weight: bold;
+}
+
+.photo-params .size {
+    border-left: 0;
+}
+
+.photo-params .location {
+    border-right: 0;
+}
+
+.photo-params.debug thead {
+    font-size: 2rem;
+    font-weight: bold;
+    border-bottom: 2px solid rgb(var(--dk-gray));
+}
+
+.photo-params.debug {
+    width: 100%;
+}
+
+.photo-params.debug td {
+    border: 1px solid var(--photo-params-border-color);
+    overflow: scroll;
+    vertical-align: top;
+}

layouts/_default/baseof.html

@@ -5,7 +5,7 @@
   <body>
     {{ block "body" . }}
     {{ block "header" . }}{{ end }}
-    <main class="{{ .Type }}">
+    <main class="{{ .Type }} {{ .Kind }}{{ if gt (len .Pages) 0 }} list{{ end }}">
       {{ block "main" . }}{{ end }}
     </main>
     {{ partial "development/page_info.html" . }}
@@ -16,35 +16,37 @@
   <style>
     @font-face {
       font-family: "Museo_Slab";
-      src: url("{{ `/fonts/Museo_Slab_500.woff2` | absURL }}") format("woff2"),
-           url("{{ `/fonts/Museo_Slab_500.woff` | absURL }}") format("woff");
+      src: url("{{ `/fonts/Museo_Slab_500.woff2` | relURL }}") format("woff2"),
+           url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff");
       font-weight: normal;
       font-style: normal;
     }
   </style>
-  <link rel="stylesheet" as="style" href="{{ `/styles/root.css` | absURL }}">
-  {{ if not hugo.IsProduction }}
-  <link rel="stylesheet" as="style" href="/styles/development.css">
-  {{ end }}
-  {{ block "styles" . }}{{ end }}
+  <link rel="stylesheet" as="style" href="{{ `/styles/root.css` | relURL }}">
+  {{- if not hugo.IsProduction -}}
+    <link rel="stylesheet" as="style" href="{{ `/styles/development.css` | relURL }}">
+  {{- end -}}
 
   {{- $includedCSS := slice -}}
   {{- if not .FirstSection.IsHome -}}
     {{- range .FirstSection.Resources.Match "*.css" -}}
       {{- if not (in $includedCSS .Permalink) -}}
         {{- $includedCSS = $includedCSS | append .Permalink -}}
-        <link rel="stylesheet" as="style" href="{{ .Permalink }}">
+        <link rel="stylesheet" as="style" href="{{ .RelPermalink }}">
       {{- end -}}
     {{- end -}}
   {{- end -}}
+
   {{- range .Resources.Match "*.css" -}}
     {{- if not (in $includedCSS .Permalink) -}}
       {{- $includedCSS = $includedCSS | append .Permalink -}}
-      <link rel="stylesheet" as="style" href="{{ .Permalink }}">
+      <link rel="stylesheet" as="style" href="{{ .RelPermalink }}">
     {{- end -}}
   {{- end -}}
 
+  {{ block "styles" . }}{{ end }}
+
   {{ block "scripts" . }}{{ end }}
 
-  <script src="{{ `scripts/site.js` | absURL }}"></script>
+  <script src="{{ `scripts/site.js` | relURL }}"></script>
 </html>

layouts/_default/index.html

@@ -1,22 +1,16 @@
 {{ define "main" }}
-<div class="platter">
-  <div class="grid">
-    <div id="title">
+<div class="platter grid">
   <h1 class="site">{{ .Title }}</h1>
-    </div>
   <div id="content">
     {{ .Content }}
   </div>
-    {{ with site.Menus.main }}
-    {{ $url := $.RelPermalink }}
-    <div id="nav">
+  {{- with site.Menus.main -}}
+    {{- $url := $.RelPermalink -}}
     <nav class="site bulleted">
-        {{ range . }}
+      {{- range . -}}
         <li><a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
-        {{ end }}
+      {{- end -}}
     </nav>
-    </div>
   {{ end }}
-  </div>
 </div>
 {{ end }}

layouts/_default/single.html

@@ -7,27 +7,27 @@
 {{ end }}
 
 {{ define "styles" }}
-  {{ if .Page.Scratch.Get "includes_railroad_diagram" }}
+  {{- if .Page.Scratch.Get "includes_railroad_diagram" -}}
     <link rel="preload stylesheet" as="style" href="{{ `styles/railroad.css` | absURL }}">
-  {{ end }}
+  {{- end -}}
   <link rel="preload stylesheet" as="style" href="{{ `styles/monokai.css` | absURL }}">
 {{ end }}
 
 {{ define "scripts" }}
-  {{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }}
+  {{- if .Page.Scratch.Get "includes_railroad_diagram" -}}
     <script defer type="module" src="{{ `scripts/railroad.js` | absURL }}"></script>
     <script defer type="module" src="{{ `scripts/railroad-utils.js` | absURL }}"></script>
-  {{ end }}
+  {{- end -}}
 
-  {{ if .Page.Scratch.Get "includes_p5_sketch" }}
+  {{- if .Page.Scratch.Get "includes_p5_sketch" -}}
     <script defer src="{{ `scripts/p5-1.4.1.min.js` | absURL }}"></script>
     <script defer src="{{ `scripts/sketch-utils.js` | absURL }}"></script>
-  {{ end }}
+  {{- end -}}
 
-  {{ range $script := .Resources.Match "*.js" }}
-  {{ $isModule := default true $script.Params.is_module }}
+  {{- range $script := .Resources.Match "*.js" -}}
+    {{- $isModule := default true $script.Params.is_module -}}
     <script defer {{ if $isModule }}type="module"{{ end }} src="{{ $script.Permalink | relURL }}"></script>
-  {{ end }}
+  {{- end -}}
 {{ end }}
 
 {{ define "footer" }}

layouts/partials/development/photo_exif_table.html

@@ -0,0 +1,15 @@
+<details>
+    <summary>Debug EXIF Data</summary>
+    <table class="photo-params debug">
+        <thead>
+            <td>Key</td>
+            <td>Value</td>
+        </thead>
+        {{ range $k, $v := .Tags }}
+        <tr>
+            <td>{{ $k }}</td>
+            <td>{{ $v }}</td>
+        </tr>
+        {{ end }}
+    </table>
+</details>

layouts/partials/footer.html

@@ -1,10 +1,8 @@
 <footer class="site">
-  <div>
   <ul class="slogans">
     <li>Trans rights are human rights.</li>
     <li>Black lives matter.</li>
     <li>Get vaccinated.</li>
   </ul>
   <p>Copyright © <time datetime="{{ now.Year }}">{{ now.Year }}</time> <a href="{{ `` | absURL }}">Eryn Wells</a></p>
-  </div>
 </footer>

layouts/partials/head.html

@@ -2,13 +2,15 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000">
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff">
 
   <title>{{ if not .IsHome }}{{ .Title }} - {{ end }}{{ site.Title }}</title>
 
   {{- if eq .Kind "page" -}}
     <meta name="description" content="{{ .Summary }}" />
     <meta name="author" content="{{ .Params.Author | default site.Author.name }}">
-  {{- else -}}
+    {{ else }}
     <meta name="description" content="{{ .Params.description }}">
     <meta name="author" content="{{ site.Author.name }}">
   {{- end -}}

layouts/partials/header.html

@@ -1,6 +1,5 @@
 <header class="site">
-  <div class="platter">
-    <div class="grid">
+  <div class="platter grid">
       <h1 class="site">
         <a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
       </h1>
@@ -18,7 +17,7 @@
       </nav>
       {{ end }}
 
-      <nav class="site social">
+      <nav class="social">
         <li><a style="--url: var(--twitter-icon)" href="https://twitter.com/erynofwales" target="_blank" aria-label="twitter"><span>tw</span></a></li>
         <li><a style="--url: var(--github-icon)" href="https://github.com/erynofwales" target="_blank" aria-label="github"><span>gh</span></a></li>
         <li><a style="--url: var(--instagram-icon)" href="https://instagram.com/erynofwales" target="_blank" aria-label="instagram"><span>ig</span></a></li>
@@ -27,5 +26,4 @@
         {{ end }}
       </nav>
   </div>
-  </div>
 </header>

layouts/partials/photo_exif_table.html

@@ -0,0 +1,31 @@
+<div class="photo-params">
+  <div class="container">
+    <table>
+      <thead>
+        <td class="make-model" colspan=4>{{ .Tags.Make }} {{ .Tags.Model }}</td>
+      </thead>
+      <tr>
+        <td colspan="2" class="location">
+          {{ $lat := float .Lat }}{{ $latDir := cond (eq $lat 0) "" (cond (gt $lat 0) "N" "S") }}
+          <data class="latitude" value="{{ $lat }}">{{ .Lat | lang.FormatNumber (cond (ne $lat 0) 3 0) }}º{{ $latDir }}</data>,
+          {{ $long := float .Long }}{{ $longDir := cond (eq $long 0) "" (cond (gt $long 0) "E" "W") }}
+          <data class="longitude" value="{{ $long }}">{{ .Long | lang.FormatNumber (cond (ne $long 0) 3 0) }}º{{ $longDir }}</data>
+        </td>
+        <td colspan="2" class="size">
+          {{ $widthpx := .Tags.PixelXDimension }}
+          {{ $heightpx := .Tags.PixelYDimension }}
+          {{ if and (gt $widthpx 0) (gt $heightpx 0) }}
+          {{ $megapixels := div (mul $widthpx $heightpx) 1e6 }}
+          <data value="{{ $megapixels }}">{{ $megapixels | lang.FormatNumber 0 }} MP</data> • {{ $widthpx }} × {{ $heightpx }}
+          {{ end }}
+        </td>
+      </tr>
+      <tr class="exposure-attributes">
+        <td class="iso">{{ with .Tags.ISOSpeedRatings }}ISO {{ . }}{{ end }}</td>
+        <td class="focal-length">{{ with .Tags.FocalLengthIn35mmFilm }}{{ . }} mm{{ end }}</td>
+        <td class="f-number">{{ with .Tags.FNumber }}ƒ{{ . }}{{ end }}</td>
+        <td class="exposure-time">{{ with .Tags.ExposureTime }}{{ . }} s{{ end }}</td>
+      </tr>
+    </table>
+  </div>
+</div>

layouts/photos/li_thumbnail_in_grid.html

@@ -0,0 +1,9 @@
+{{- $thumbnailResource := .Resources.GetMatch (index .Params "thumbnail")
+                        | default (index (.Resources.ByType "image") 0) -}}
+{{- $orientation := partial "images/orientation_angle.html" $thumbnailResource -}}
+{{- $thumbnail := $thumbnailResource.Fit (printf "%dx%d r%d" 600 600 (sub 360 $orientation)) -}}
+{{- $thumbnail = $thumbnail.Crop "600x600" -}}
+{{- $altText := $thumbnailResource.Params.alt -}}
+<a href="{{ .RelPermalink }}" title="{{ .Title }}">
+  <img src="{{ $thumbnail.RelPermalink }}" {{ with $altText }}alt="{{ . }}"{{ end }}>
+</a>

layouts/photos/list.html

@@ -0,0 +1,20 @@
+{{ define "header" }}
+  {{ partial "header.html" . }}
+{{ end }}
+
+{{ define "main" }}
+{{- $pages := (.Paginate (first 50 (.Pages.GroupByDate "January 2006"))).PageGroups -}}
+{{ $pages := .Pages.ByDate.GroupByDate "Jan 2006" }}
+{{- range $pages -}}
+  <div>
+    <h6><span>{{ .Key | title }}</span></h6>
+  </div>
+  {{- range .Pages -}}
+    {{- .Render "li_thumbnail_in_grid" -}}
+  {{- end -}}
+{{- end -}}
+{{ end }}
+
+{{ define "footer" }}
+  {{ partial "footer.html" . }}
+{{ end }}

layouts/photos/single.html

@@ -0,0 +1,47 @@
+{{ define "header" }}
+  {{ partial "header.html" . }}
+{{ end }}
+
+{{ define "main" }}
+<nav><a class="back" href="{{ ref . `photos` }}">Back</a></nav>
+
+{{ if .Title }}
+<header>
+  {{ partial "development/draft_tag.html" . }}
+  <div class="post-title">
+    <h1 {{ with .Params.langs.title }}lang="{{ . }}"{{ end }}>{{ .Title }}</h1>
+    <div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
+  </div>
+</header>
+{{ end }}
+
+{{ $photos := .Resources.ByType "image" }}
+{{ if eq (len $photos) 0 }}
+  {{ errorf "Missing photo from photos page %q" .Path }}
+{{ end }}
+
+{{ if eq (len $photos) 1 }}
+  {{- $img := index $photos 0 -}}
+  <figure><img src="{{ $img.RelPermalink }}"></figure>
+
+  {{ .Content }}
+
+  {{- partial "photo_exif_table.html" $img.Exif -}}
+
+  {{- if in ($.Site.BaseURL | string) "localhost" -}}
+    {{- partial "development/photo_exif_table.html" $img.Exif -}}
+  {{- end -}}
+{{ else }}
+  <figure>
+    <ul class="carousel">
+      {{- range $photos -}}
+        <li>{{ . }}</li>
+      {{- end -}}
+    </ul>
+  </figure>
+{{ end }}
+{{ end }}
+
+{{ define "footer" }}
+  {{ partial "footer.html" . }}
+{{ end }}

layouts/shortcodes/figures/railroad.html

@@ -1,11 +1,4 @@
-{{ $id := .Get "id" }}
-{{ .Page.Scratch.Set "includes_railroad_diagram" true }}
-<div class="centered">
-    <figure class="railroad-diagram" {{ if $id }}id="{{ $id }}"{{ end }}></figure>
-</div>
-<script defer type="module">
-    import { railroadDiagram } from {{ `/scripts/railroad-utils.js` | relURL }};
-    railroadDiagram(rr => {
-        {{ .Inner | safeJS }}
-    }, "{{ $id }}");
-</script>
+{{- $id := .Get "id" -}}
+{{- .Page.Scratch.Set "includes_railroad_diagram" true -}}
+<figure class="railroad-diagram" {{ if $id }}id="{{ $id }}"{{ end }}></figure>
+{{ .Inner }}

layouts/shortcodes/scripts/railroad.html

@@ -0,0 +1,8 @@
+{{- $parentID := .Parent.Get "id" -}}
+{{- $narrowOnly := .Get "narrow" }}
+<script defer type="module">
+    import { railroadDiagram } from {{ `/scripts/railroad-utils.js` | relURL }};
+    railroadDiagram(rr => {
+        {{ .Inner | safeJS }}
+    }, "{{ $parentID }}", {{ if $narrowOnly }}true{{ else }}false{{ end }});
+</script>

static/scripts/railroad-utils.js

@@ -1,6 +1,63 @@
 import rr from "./railroad.js";
 
-export function railroadDiagram(builder, elementID) {
-    const diagram = builder(rr);
-    diagram.addTo(document.getElementById(elementID));
+class RailroadDiagramManager {
+    constructor() {
+        this.figures = new Map();
+        this.isCurrentlyNarrow = undefined;
+
+        this.diagramBreakpoint = window.matchMedia("(max-width: 450px)");
+        this.diagramBreakpoint.addEventListener("change", () => {
+            this.updateVisiblity();
+        });
+    }
+
+    add(svg) {
+        const parent = svg.parentElement;
+        if (!this.figures.has(parent)) {
+            this.figures.set(parent, []);
+        }
+
+        this.figures.get(parent).push(svg);
+
+        parent.removeChild(svg);
+    }
+
+    updateVisiblity() {
+        const isNarrow = this.diagramBreakpoint.matches;
+
+        if (isNarrow === this.isCurrentlyNarrow) {
+            return;
+        }
+
+        this.isCurrentlyNarrow = isNarrow;
+
+        for (let [figure, svgs] of this.figures.entries()) {
+            for (let svg of svgs) {
+                const svgHasNarrowClass = svg.classList.contains("narrow");
+                if (isNarrow && svgHasNarrowClass)
+                    figure.appendChild(svg);
+                else if (!isNarrow && !svgHasNarrowClass)
+                    figure.appendChild(svg);
+                else if (svg.parentElement === figure)
+                    figure.removeChild(svg);
+            }
+        }
+    }
 }
+
+let railroadDiagramManager = new RailroadDiagramManager();
+
+export function railroadDiagram(builder, elementID, isNarrow) {
+    const diagram = builder(rr);
+    const svg = diagram.addTo(document.getElementById(elementID));
+
+    if (isNarrow) {
+        svg.classList.add("narrow");
+    }
+
+    railroadDiagramManager.add(svg);
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+    railroadDiagramManager.updateVisiblity();
+});

static/styles/railroad.css

@@ -9,7 +9,7 @@
 
 svg.railroad-diagram path {
     stroke-width: 2;
-    stroke: var(--foreground-body-color);
+    stroke: var(--html-color);
     fill: none;
 }
 
@@ -17,7 +17,7 @@ svg.railroad-diagram text {
     font-family: var(--font-family-monospace);
     text-anchor: middle;
     white-space: pre;
-    fill: var(--foreground-body-color);
+    fill: var(--html-color);
 }
 
 svg.railroad-diagram text.diagram-text {
@@ -42,7 +42,7 @@ svg.railroad-diagram g.non-terminal text {
 
 svg.railroad-diagram rect {
     stroke-width: 2;
-    stroke: var(--foreground-body-color);
+    stroke: var(--html-color);
     fill: var(--rect-fill);
 }
 
@@ -54,8 +54,8 @@ svg.railroad-diagram rect.group-box {
 
 svg.railroad-diagram path.diagram-text {
     stroke-width: 2;
-    stroke: var(--foreground-body-color);
-    fill: var(--background-body-color);
+    stroke: var(--html-color);
+    fill: var(--html-background-color);
     cursor: help;
 }
 

static/styles/root.css

@@ -17,9 +17,6 @@
     --purple: 161, 49, 232;
     --lilac: 187, 121, 245;
 
-    --background-color: rgb(var(--white));
-    --foreground-body-color: rgba(var(--black), 0.8);
-    --foreground-header-color: rgb(var(--black));
     --site-nav-link-color: rgb(var(--mid-blue));
 
     --separator-color: rgb(var(--lt-gray));
@@ -38,10 +35,19 @@
 
     --body-font-size: 2rem;
     --body-item-spacing: 1em;
-    --body-line-height: 1.4;
+    --body-line-height: 1.5;
     --body-header-line-height: 1.1;
     --body-code-background-color: rgb(var(--super-lt-gray));
 
+    --heading-color: rgb(var(--black));
+
+    --html-background-color: rgb(var(--white));
+    --html-color: rgba(var(--black), 0.8);
+
+    --platter-background-color: rgba(var(--white), var(--platter-background-opacity));
+    --platter-background-opacity: 0.6;
+    --platter-backdrop-filter: blur(10px);
+
     --content-width: 80rem;
 
     --transition-duration: 0.7s;
@@ -55,13 +61,18 @@
 }
 @media (prefers-color-scheme: dark) {
     :root {
-        --background-color: rgb(var(--black));
-        --foreground-body-color: rgba(var(--white), 0.8);
-        --foreground-header-color: rgb(var(--white));
         --separator-color: rgb(var(--dk-gray));
         --box-shadow-color: rgba(var(--dk-gray), 0.8);
         --body-code-background-color: rgb(var(--dk-gray));
 
+        --heading-color: rgb(var(--white));
+
+        --html-background-color: rgb(var(--black));
+        --html-color: rgba(var(--white), 0.8);
+
+        --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
+        --platter-backdrop-filter: brightness(0.66) blur(10px);
+
         --twitter-icon: url(/icons/twitter-dark.svg);
         --github-icon: url(/icons/github-dark.svg);
         --instagram-icon: url(/icons/instagram-dark.svg);
@@ -70,37 +81,9 @@
 }
 
 @layer reset {
-    * { box-sizing: border-box; }
-
     body, button, h1, h2, h3, h4, h5, h6, input, ol, ul, p, pre, textarea {
         padding: 0; margin: 0;
     }
-
-    table {
-        border-spacing: 0;
-        border-collapse: collapse;
-    }
-
-    button,
-    input,
-    textarea {
-        font: inherit;
-        background: transparent;
-        border: 0;
-        outline: 0;
-        -webkit-appearance: none;
-    }
-
-    button,
-    input[type='button'],
-    input[type='submit'] {
-        cursor: pointer;
-    }
-
-    input:-webkit-autofill,
-    textarea:-webkit-autofill {
-        box-shadow: 0 0 0 6rem var(--white) inset;
-    }
 }
 
 a {
@@ -120,7 +103,6 @@ blockquote {
 }
 
 body {
-    color: var(--foreground-body-color);
     font-size: var(--body-font-size);
     line-height: var(--body-line-height);
 }
@@ -135,6 +117,7 @@ code {
 
 figcaption {
     font-size: 75%;
+    line-height: var(--body-line-height);
     margin-block-start: 0.2em;
     text-align: center;
 }
@@ -142,6 +125,7 @@ figcaption {
 figure {
     border-radius: 6px;
     display: inline-block;
+    line-height: 1;
     margin: 0;
     margin-block: 0 var(--body-item-spacing);
     margin-inline: 0;
@@ -185,18 +169,11 @@ footer.site {
     display: flex;
     flex-direction: column;
     font-size: 1.6rem;
-    margin-block-start: 2rem;
+    margin-block: var(--body-item-spacing);
     text-align: center;
 }
 
-footer.site > div {
-    border-top: 1px solid var(--footer-border-color);
-    padding-block-start: 2rem;
-    max-width: var(--content-width);
-    width: 100%;
-}
-
-footer.site ul {
+footer.site > ul {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -204,11 +181,11 @@ footer.site ul {
     list-style: none;
 }
 
-footer.site .slogans li {
+footer.site > .slogans > li {
     margin-inline-start: 0.5em;
 }
 
-footer.site p {
+footer.site > p {
     margin: 0;
 }
 
@@ -222,8 +199,16 @@ footer.site p + p {
     }
 }
 
+h1 { font-size: 1.6em; }
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.4em; }
+h4 { font-size: 1.3em; }
+h5 { font-size: 1.3em; }
+h6 { font-size: var(--body-font-size); }
+h5, h6 { font-family: var(--font-family-body); }
+
 h1, h2, h3, h4, h5, h6 {
-    color: var(--foreground-header-color);
+    color: var(--heading-color);
     font-family: var(--font-family-heading);
     font-weight: 600;
     margin-block: 3.5rem 1rem;
@@ -231,11 +216,6 @@ h1, h2, h3, h4, h5, h6 {
     line-height: var(--body-header-line-height);
 }
 
-h1:first-child, h2:first-child, h3:first-child,
-h4:first-child, h5:first-child, h6:first-child {
-    margin-block-start: 0;
-}
-
 h1.site {
     color: rgb(var(--mid-blue));
     font-size: 2.5em;
@@ -255,8 +235,8 @@ h1.site {
     }
 }
 
-h1.site * { color: inherit; }
-h1.site a:hover { text-decoration: none; }
+h1.site > a { color: inherit; }
+h1.site > a:hover { text-decoration: none; }
 
 header.site {
     display: flex;
@@ -281,52 +261,53 @@ header.site.animated {
     }
 }
 
-header.site h1 {
+header.site > .grid > h1 {
     font-family: var(--font-family-site-heading);
     font-size: 2em;
     margin: 0;
+    order: 1;
+    white-space: nowrap;
 }
 
-header.site .grid {
+header.site > .grid {
     align-items: baseline;
-    display: grid;
+    display: flex;
+    flex-wrap: wrap;
     gap: 0 0.5em;
-    grid-template-columns: max-content auto max-content;
-    grid-template-areas:
-        "title menu social";
+    margin: 0 auto;
     max-width: var(--content-width);
-    width: var(--content-width);
+    padding: 1.5rem 3rem;
+    width: 100%;
 }
-@media (max-width: 450px) {
-    header.site .grid {
-        grid-template-columns: repeat(2, max-content);
-        grid-template-rows: repeat(2, max-content);
-        grid-template-areas:
-            "title social"
-            "menu menu";
-        max-width: var(--content-width);
-        width: inherit;
+
+header.site > .grid > nav:first-of-type {
+    justify-content: start;
+    order: 2;
+}
+
+header.site > .grid > nav:last-of-type {
+    justify-content: end;
+    order: 3;
+}
+
+@media (max-width: 516px) {
+    header.site > .platter {
+        border-radius: 0;
+    }
+    header.site > .grid {
+        max-width: none;
     }
 }
 
-header.site .platter {
-    margin: 0 auto;
-    padding: 1.5rem 3rem;
-}
-
-header.site .grid nav:first-of-type {
-    grid-area: menu;
-    justify-content: start;
-}
-
-header.site .grid nav:last-of-type {
-    grid-area: social;
-    justify-content: end;
+@media (max-width: 435px) {
+    header.site > .grid > nav:first-of-type {
+        order: 5;
+    }
 }
 
 html {
-    background-color: var(--background-color);
-    color: var(--foreground-color);
+    background-color: var(--html-background-color);
+    color: var(--html-color);
     font-family: var(--font-family-body);
     font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
 }
@@ -339,24 +320,21 @@ img {
 img.circular {
     shape-outside: circle(50%);
     -webkit-clip-path: circle(50%);
+    clip-path: circle(50%);
 }
 
 main {
+    box-sizing: border-box;
     max-width: var(--content-width);
     margin: var(--body-item-spacing) auto;
+    padding-inline: var(--body-item-spacing);
     width: 100%;
 }
 
-main h1 { font-size: 1.6em; }
-main h2 { font-size: 1.5em; }
-main h3 { font-size: 1.4em; }
-main h4 { font-size: 1.3em; }
-main h5 { font-size: 1.3em; }
-main h6 { font-size: var(--body-font-size); }
+main > :first-child { margin-block-start: 0; }
+main > :last-child { margin-block-end: 0; }
 
-main h5, main h6 { font-family: var(--font-family-body); }
-
-nav.site {
+header.site > .grid > nav {
     align-items: center;
     display: flex;
     font-size: max(1.5rem, 80%);
@@ -366,21 +344,22 @@ nav.site {
     text-transform: lowercase;
 }
 
-nav.site li {
+header.site > .grid > nav > li {
     color: var(--site-nav-link-color);
     display: block;
     margin-inline-end: 0.5em;
 }
-nav.site .active { font-weight: bold; }
 
-nav.bulleted li:first-child::before {
-    color: var(--foreground-color);
+header.site > .grid > nav > .active { font-weight: bold; }
+
+nav.bulleted > li:first-child::before {
+    color: var(--html-color);
     content: "";
     margin-inline-end: 0;
 }
 
-nav.bulleted li::before {
-    color: var(--foreground-header-color);
+nav.bulleted > li::before {
+    color: var(--heading-color);
     content: "•";
     font-size: 60%;
     font-weight: normal;
@@ -391,9 +370,8 @@ nav.bulleted li::before {
 p {
     letter-spacing: 0.025em;
     line-height: var(--body-line-height);
+    margin-block-end: var(--body-item-spacing);
 }
-p { margin-block-end: var(--body-item-spacing); }
-p:last-child { margin-block-end: 0; }
 
 ul ul,
 ul ol,
@@ -505,17 +483,14 @@ ol ol {
     width: 100%;
 }
 
-.social menu li + li {
-    margin-left: var(--social-menu-padding);
-}
-
 .social {
-    display: flex;
+    display: block;
     letter-spacing: 2px;
     margin-left: auto;
+    order: 2;
 }
 
-.social a {
+.social > li > a {
     background-image: var(--url);
     background-repeat: no-repeat;
     background-size: var(--menu-icon-size);
@@ -524,7 +499,7 @@ ol ol {
     width: var(--menu-icon-size);
 }
 
-.social a span {
+.social > li > a > span {
     display: none;
 }
 
@@ -577,7 +552,9 @@ ol ol {
 }
 
 .platter {
-    background: var(--background-color);
+    -webkit-backdrop-filter: var(--platter-backdrop-filter);
+    backdrop-filter: var(--platter-backdrop-filter);
+    background-color: var(--platter-background-color);
     border: 1px solid var(--header-border-color);
     border-radius: 12px;
     box-shadow: 3px 4px 4px var(--header-box-shadow-color);