assets/css/010_colors.css

@@ -47,7 +47,7 @@
 
 :root {
   --background-color: light-dark(var(--gray7), var(--gray1));
-  --hr-color: var(--text-color-secondary);
+  --hr-color: light-dark(var(--gray5), var(--gray2));
   --text-color-primary: light-dark(var(--gray1), var(--gray7));
   --text-color-secondary: light-dark(var(--gray4), var(--gray5));
   --text-color-light: light-dark(var(--gray5), var(--gray4));

assets/css/010_spacing.css

@@ -51,30 +51,17 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 hr {
-  margin-block: var(--space-l);
+  margin-block: var(--space-m);
 }
 
-:is(dl, p, ol, ul) + :is(dl, p, ol, ul) {
+p + p {
   margin-block-start: var(--space-paragraph);
 }
 
 
 /* Figures */
 
-{{-
+{{- $elementsWithXLBlockMargins := "blockquote, table, .codeblock, .figure--main-column, .figure--code, .figure--image, .figure--video, .figure--youtube, .highlight" -}}
-  $elementsWithXLBlockMargins := delimit
-    (slice
-      "blockquote"
-      "table"
-      ".codeblock"
-      ".content-grid"
-      ".figure"
-      ".highlight"
-      ".instagram-media"
-      ".two-column:has(figure:first-child + figure:last-child)"
-    )
-  ", "
--}}
 
 p + :is({{ $elementsWithXLBlockMargins }}) {
     margin-block-start: var(--space-xl);

assets/css/010_structure.css

@@ -98,7 +98,7 @@ body {
   gap: var(--space-xl) 0;
 }
 
-.list-header, p {
+:is(.list-header, p) {
   grid-column: main-start / main-end;
 }
 
@@ -106,10 +106,14 @@ body {
   grid-column: main-start / main-end;
 }
 
-.content > .codeblock {
+.content > :is(.figure--image, .codeblock) {
   grid-column: wide-gutter-start / wide-gutter-end;
 }
 
+figure, img {
+  max-width: 100%;
+}
+
 img {
   object-fit: contain;
 }
@@ -138,38 +142,3 @@ section.content--small-right-column {
     margin-block: 0;
   }
 }
-
-
-
-
-
-/*********************
- * 2 COLUMN CONTAINER
- *********************/
-
-main.content > .two-column {
-  display: grid;
-  grid-column: main-start / main-end;
-  grid-template-columns: 1fr 1fr;
-
-  &.wide {
-    grid-column: wide-gutter-start / wide-gutter-end;
-  }
-
-  > :first-child {
-    grid-column: unset;
-  }
-
-  > :last-child {
-    grid-column: unset;
-  }
-
-  > .figure {
-    display: block;
-  }
-
-  &:has(figure:first-child + figure:last-child) {
-    gap: var(--space-xs);
-    grid-column: wide-gutter-start / wide-gutter-end;
-  }
-}

assets/css/010_typography.css

@@ -82,7 +82,7 @@ h4 {
   font-size: var(--text-m);
 }
 
-p, dd {
+p {
   letter-spacing: 0.01em;
 }
 

assets/css/050_figures.css

@@ -9,29 +9,21 @@
 
 .figure {
   grid-column: wide-gutter-start / wide-gutter-end;
-}
-
-.figure--main-column {
-  grid-column: main-start / main-end;
-}
-
-.figure--code {
-  grid-column: gutter-start / gutter-end;
-}
-
-
-.figure {
   display: grid;
   grid-template-columns: subgrid;
 
-  &:has(> img:only-child) {
+  .figure__container {
+    align-items: center;
     display: flex;
+    gap: var(--body-item-spacing);
+    grid-column: wide-gutter-start / wide-gutter-end;
     justify-content: center;
+    min-width: fit-content;
   }
 
-  &:has(.youtube) {
+  &:has(> img:only-child, .figure__container > img:only-child) {
-    display: block;
+    display: flex;
-    grid-template-columns: unset;
+    justify-content: center;
   }
 
   > a:has(img:only-child) {
@@ -54,34 +46,27 @@
 }
 
 
-.figure :is(img, video) {
+.figure--main-column {
+  grid-column: main-start / main-end;
+}
+
+
+.figure--code {
+  grid-column: gutter-start / gutter-end;
+}
+
+
+.figure--youtube {
   grid-column: wide-gutter-start / wide-gutter-end;
-  width: 100%;
-}
 
-
+  .youtube {
-.figure--small {
-  display: flow;
-  margin-inline: auto;
-
-  img {
-    max-width: 480px;
-  }
-}
-
-
-.figure video {
-  width: 100%;
-}
-
-
-.figure .youtube {
-  width: 100%;
-
-  iframe {
-    aspect-ratio: 16 / 9;
-    margin-bottom: -3px;
     width: 100%;
+
+    iframe {
+      aspect-ratio: 16 / 9;
+      margin-bottom: -3px;
+      width: 100%;
+    }
   }
 }
 
@@ -93,8 +78,3 @@ figcaption {
   grid-column: main-start / main-end;
   letter-spacing: 0.01em;
 }
-
-
-.content-grid > .figure {
-  grid-column: unset;
-}

assets/css/050_lists.css

@@ -12,10 +12,8 @@ ol,
 ul
 {
   grid-column: main-start / main-end;
-  margin-block: 0;
 }
 
-
 ol {
   display: grid;
   grid-template-columns: min-content 1fr;
@@ -48,7 +46,6 @@ ol {
   }
 }
 
-
 ul {
   list-style-type: "*";
   padding-inline-start: 1ch;
@@ -58,7 +55,6 @@ ul {
   }
 }
 
-
 li {
   &::marker, &::before {
     color: var(--text-color-secondary);
@@ -66,15 +62,15 @@ li {
   }
 }
 
-
 dl {
   dd {
     color: var(--text-color-secondary);
-    font-size: var(--text-s);
+    font-style: italic;
-    margin-inline: var(--space-l);
+    line-height: 1.2;
+    margin-inline-start: var(--space-l);
 
     &:has(+ dt) {
-      margin-block-end: var(--space-paragraph);
+      margin-block-end: var(--space-xs);
     }
   }
 }

assets/css/050_tags.css

@@ -37,12 +37,12 @@
     padding-inline-start: 0;
   }
 
-  .tag__list-item {
+  .tag__value__list-item {
     padding-inline-start: 0;
     white-space: nowrap;
   }
 
-  .tag__list-item:not(:first-child)::before {
+  .tag__value__list-item:not(:first-child)::before {
     color: var(--text-color-secondary);
     content: ":";
     margin-inline-end: var(--spacing);

assets/css/090_content_grid.css

@@ -1,13 +0,0 @@
-
-
-
-
-
-/***************
- * CONTENT GRID
- ***************/
-
-.content-grid {
-  display: grid;
-  grid-template-columns: repeat(var(--columns), 1fr);
-}

assets/css/099_footnotes.css

@@ -6,6 +6,7 @@
   font-size: var(--text-s);
 
   hr {
+    border-top: 2px dashed var(--gray6);
     margin-block-start: var(--space-xl);
   }
 

assets/css/099_page_header.css

@@ -31,10 +31,9 @@
   }
 
   .page-date {
-    color: var(--text-color-secondary);
     display: block;
     font-family: var(--font-family-body);
     font-size: var(--text-s);
-    margin-block: var(--space-xs) 0;
+    margin-block: var(--space-paragraph) 0;
   }
 }

assets/css/099_page_navigation.css

@@ -15,27 +15,27 @@
     justify-content: flex-end;
   }
 
-  .prev, .next {
+  li {
     display: block;
     padding-inline: 0;
   }
 
-  .next {
+  .next-page {
     text-align: right;
   }
 
-  .prev::before,
+  .previous-page::before,
-  .next::after {
+  .next-page::after {
     color: var(--text-color-secondary);
     font-family: var(--font-family-monospace);
   }
 
-  .prev::before {
+  .previous-page::before {
     content: "<-";
     padding-inline-end: var(--space-s);
   }
 
-  .next::after {
+  .next-page::after {
     content: "->";
     padding-inline-start: var(--space-s);
   }

i18n/en.yaml

@@ -5,15 +5,10 @@ draftYes: "YES"
 draftNo: "NO"
 
 home: Home
-
+tableOfContents: Table of Contents
-instagram: Instagram
 
 # Title of section of a list page where years older than
 # .Site.Params.blog.yearLimit are collapsed into a bulleted list.
 olderPagesSectionTitle: Older
 
-source: Source
-
-tableOfContents: Table of Contents
-
 yearsTagTitle: Years

layouts/_default/baseof.html

@@ -12,7 +12,6 @@
     <footer class="site-footer">
       {{ partialCached "site/footer.html" . }}
     </footer>
-    {{ block "after_content" . }}{{ end }}
     {{ partial "base/body-extras.html" . }}
   </body>
   {{- block "after_js" . }}{{ end }}

layouts/_default/single.html

@@ -20,9 +20,3 @@
     </footer>
   </main>
 {{ end }}
-
-{{ define "after_content" }}
-  {{ range .Resources.Match "*.css" }}
-    <link rel="stylesheet" href="{{ .RelPermalink }}">
-  {{ end }}
-{{ end }}

layouts/blog/single.html

@@ -12,9 +12,3 @@
     </footer>
   </main>
 {{ end }}
-
-{{ define "after_content" }}
-  {{ range .Resources.Match "*.css" }}
-    <link rel="stylesheet" href="{{ .RelPermalink }}">
-  {{ end }}
-{{ end }}

layouts/partials/page/date.html

@@ -12,7 +12,7 @@
 {{- $dateName := .date -}}
 
 {{- $name := "" -}}
-{{- $date := $page.PublishDate -}}
+{{- $date := $page.Date -}}
 
 {{- if or (not $dateName) (eq $dateName "date") }}
   {{- $name = T "datePublishedName" -}}

layouts/partials/page/figures/caption.html

@@ -1,6 +0,0 @@
-<figcaption>
-  {{ .resource.Title | markdownify }}
-  {{ with .resource.Params.source -}}
-    {{ partial "page/figures/resource-source.html" . }}
-  {{- end -}}
-</figcaption>

layouts/partials/page/figures/fullwidth-image.html

@@ -1,45 +0,0 @@
-{{- $image := .resource -}}
-
-{{- $isSVG := strings.Contains $image.MediaType.SubType "svg" -}}
-{{- $linksToFullSizeImage := and .linksToFullSizeImage (not $isSVG) -}}
-
-{{- $resizedImages := dict "full" $image -}}
-{{- if not $isSVG -}}
-  {{-
-    $resizedImages := dict
-      "full"    ($image.Fit "2560x2560")
-      "half"    ($image.Fit "1280x1280")
-      "quarter" ($image.Fit "640x640")
-  -}}
-{{ end }}
-
-{{- $classes := slice "figure" "figure--image" -}}
-{{- if eq .size "main" -}}
-  {{ $classes = $classes | append "figure--main-column" }}
-{{- end -}}
-{{- with .class -}}
-  {{ $classes = $classes | append . }}
-{{- end -}}
-
-<figure class="{{ delimit $classes "  " }}">
-  {{ if $linksToFullSizeImage -}}
-    <a href="{{ $image.RelPermalink }}">
-  {{- end -}}
-    <img
-      src="{{ (index $resizedImages "full").RelPermalink }}"
-      {{ if gt (len $resizedImages) 1 -}}
-        srcset="
-          {{ (index $resizedImages "full").RelPermalink }} 2560w,
-          {{ (index $resizedImages "half").RelPermalink }} 1280w,
-          {{ (index $resizedImages "quarter").RelPermalink }} 640w,
-        "
-      {{ end }}
-      {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
-      {{ with $image.Title }} title="{{ . }}"{{ end }}>
-  {{ if .linksToFullSizeImage -}}
-    </a>
-  {{- end -}}
-  {{ if .shouldShowTitle }}
-    {{ partial "page/figures/caption.html" . }}
-  {{ end }}
-</figure>

layouts/partials/page/figures/fullwidth-video.html

@@ -1,10 +0,0 @@
-{{- $video := .resource -}}
-
-<figure class="figure  figure--video">
-  <video controls>
-    <source src="{{ $video.RelPermalink }}" type="{{ $video.MediaType.Type }}">
-  </video>
-  {{ if .shouldShowTitle }}
-    {{ partial "page/figures/caption.html" . }}
-  {{ end }}
-</figure>

layouts/partials/page/figures/fullwidth.html

@@ -1,8 +0,0 @@
-{# TODO: Accommodate multiple images here #}
-{{- $resource := index .images 0 -}}
-
-{{- if eq $resource.ResourceType "image" -}}
-  {{ partial "page/figures/fullwidth-image.html" (merge . (dict "resource" $resource)) }}
-{{- else if eq $resource.ResourceType "video" -}}
-  {{ partial "page/figures/fullwidth-video.html" (merge . (dict "resource" $resource)) }}
-{{- end -}}

layouts/partials/page/figures/inline-image.html

@@ -1,24 +0,0 @@
-{{- $image := .page.Resources.GetMatch .name -}}
-
-{{ if not $image }}
-  {{ errorf "No images named '%s' found. %s " .name .page.Permalink }}
-{{ end }}
-
-{{ if ne $image.MediaType.SubType "svg" }}
-  {{ errorf "Only SVGs may be inlined. %s" $image.Permalink }}
-{{ end }}
-
-{{- $classes := slice "figure" "figure--image" "figure--inline-image" -}}
-{{- if eq .size "main" -}}
-  {{ $classes = $classes | append "figure--main-column" }}
-{{- end -}}
-{{- with .class -}}
-  {{ $classes = $classes | append . }}
-{{- end -}}
-
-<figure class="{{ delimit $classes "  " }}">
-  {{ $image.Content | safeHTML }}
-  {{ if .shouldShowTitle }}
-    {{ partial "page/figures/caption.html" (merge . (dict "resource" $image)) }}
-  {{ end }}
-</figure>

layouts/partials/page/figures/resource-source.html

@@ -1,19 +0,0 @@
-<span class="figure__source">
-  {{ if and .title .url }}
-    {{ i18n "source" }}: <a href="{{ .url }}">{{ .title }}</a>.
-  {{ else if .title }}
-    {{ .title }}
-  {{ else }}
-    {{ $sourceTitle := "" }}
-    {{ $parsedURL := urls.Parse .url }}
-    {{ if strings.Contains $parsedURL.Hostname "instagram.com" }}
-      {{ $sourceTitle = i18n "instagram" }}
-    {{ end }}
-
-    {{ if gt (len $sourceTitle) 0 }}
-      {{ i18n "source" }}: <a href="{{ .url }}">{{ $sourceTitle }}</a>
-    {{ else }}
-      <a href="{{ .url }}">{{ i18n "source" }}</a>
-    {{ end }}
-  {{ end }}
-</span>

layouts/partials/page/figures/small-image.html

@@ -1,27 +0,0 @@
-{{- $image := .resource -}}
-
-{{-
-  $resizedImages := dict
-    "2x" ($image.Fit "960x960")
-    "1x" ($image.Fit "480x480")
--}}
-
-<figure class="figure  figure--image  figure--small">
-  {{ if .linksToFullSizeImage -}}
-    <a href="{{ $image.RelPermalink }}">
-  {{- end -}}
-    <img
-      src="{{ (index $resizedImages "2x").RelPermalink }}"
-      srcset="
-        {{ (index $resizedImages "2x").RelPermalink }} 960w,
-        {{ (index $resizedImages "1x").RelPermalink }} 480w,
-      "
-      {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
-      {{ with $image.Title }} title="{{ . }}"{{ end }}>
-  {{ if .linksToFullSizeImage -}}
-    </a>
-  {{- end -}}
-  {{ if .shouldShowTitle }}
-    {{ partial "page/figures/caption.html" . }}
-  {{ end }}
-</figure>

layouts/partials/page/figures/small.html

@@ -1,12 +0,0 @@
-{{- $page := .page -}}
-{{- $shouldShowTitle := .shouldShowTitle -}}
-
-{# TODO: Accommodate multiple images here. #}
-{{- $resource := index .images 0 -}}
-{{- if not $resource }}
-  {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
-{{ end -}}
-
-{{- if eq $resource.ResourceType "image" -}}
-  {{ partial "page/figures/small-image.html" (merge . (dict "resource" $resource))  }}
-{{- end -}}

layouts/partials/page/prev_next_navigation.html

@@ -1,18 +1,18 @@
 {{ if .FirstSection }}
-  {{- $pages := (where .FirstSection.RegularPagesRecursive "Draft" "eq" false).ByDate -}}
+  {{- $pages := where .FirstSection.RegularPagesRecursive "Draft" "eq" false -}}
   {{- $previousInSection := $pages.Prev . -}}
   {{- $nextInSection := $pages.Next . -}}
 
   {{ if or $previousInSection $nextInSection }}
     <ul class="page-navigation">
       {{ with $nextInSection -}}
-        <li class="prev">
+        <li class="previous-page">
           <a href="{{ .Permalink }}">{{ .LinkTitle | markdownify }}</a>
         </li>
       {{- end }}
 
       {{ with $previousInSection -}}
-        <li class="next">
+        <li class="next-page">
           <a href="{{ .Permalink }}">{{ .LinkTitle | markdownify }}</a>
         </li>
       {{- end }}

layouts/partials/page/section_year_nav.html

@@ -1,11 +1,13 @@
+{{- $years := .years -}}
+{{- $includeCollapsedYearItem := .includeCollapsedYearItem -}}
 <nav class="year-nav  tag">
   <span class="tag__name">{{ i18n "yearsTagTitle" }}</span>
   <ul class="tag__value--list">
-    {{ range .years -}}
+    {{ range $years -}}
-      <li class="tag__list-item"><a href="#{{ .Date | time.Format "2006" }}">{{ .LinkTitle }}</a></li>
+      <li class="tag__value__list-item"><a href="#{{ .Date | time.Format "2006" }}">{{ .LinkTitle }}</a></li>
     {{ end }}
-    {{ if .includeCollapsedYearItem -}}
+    {{ if $includeCollapsedYearItem -}}
-      <li class="tag__list-item"><a href="#older">{{ i18n "olderPagesSectionTitle" }}</a></li>
+      <li class="tag__value__list-item"><a href="#older">{{ i18n "olderPagesSectionTitle" }}</a></li>
     {{ end }}
   </ul>
 </nav>

layouts/partials/page/taxonomy_list.html

@@ -16,9 +16,7 @@
   <div class="tag">
     <span class="tag__name">{{ $name }}</span>
     <ul class="tag__value--list" data-name="{{ $name }}">
-      {{ range . -}}
+      {{ range . }}<li class="tag__value__list-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>{{ end }}
-        <li class="tag__list-item"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
-      {{- end -}}
     </ul>
   </div>
 {{ end }}

layouts/partials/page_header.html

@@ -5,7 +5,7 @@
 {{- end }}
 
 {{ if not .page.IsNode }}
-  {{- with .page.PublishDate -}}
+  {{- with .page.Date -}}
     <time class="page-date" datetime="{{ . | time.Format "2006-01-02" }}">
       {{- . | time.Format "January 02, 2006" -}}
     </time>

layouts/shortcodes/2col.html

@@ -1,10 +0,0 @@
-{{- $size := .Get 0 | default "main" -}}
-
-{{- $classes := slice "two-column" -}}
-{{- if eq $size "wide" -}}
-  {{- $classes = $classes | append "wide" -}}
-{{- end -}}
-
-<div class="{{ delimit $classes "  " }}">
-  {{ .Inner }}
-</div>

layouts/shortcodes/content-grid.html

@@ -1,4 +0,0 @@
-{{- $columns := .Get "columns" -}}
-<div class="content-grid" style="--columns: {{ $columns }};">
-  {{ .Inner }}
-</div>

layouts/shortcodes/youtube.html

@@ -4,7 +4,7 @@
 {{- $id := .Get "id" | default (.Get 0) -}}
 {{- $class := .Get "class" | default (.Get 1) -}}
 {{- $title := .Get "title" | default "YouTube Video" }}
-<figure class="figure{{ with $class }}  {{ . }}{{ end }}">
+<figure class="figure--youtube{{ with $class }}  {{ . }}{{ end }}">
   <div class="youtube">
     <iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" allowfullscreen frameborder=0 title="{{ $title }}"></iframe>
   </div>