Take an .images list of resources in figures/fullwidth and figures/small

These two templates take a list of resources to operate on. Since these render
image figures, that list is called "images".

assets/css/010_colors.css

@@ -47,7 +47,7 @@
 
 :root {
   --background-color: light-dark(var(--gray7), var(--gray1));
-  --hr-color: light-dark(var(--gray5), var(--gray2));
+  --hr-color: var(--text-color-secondary);
   --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,17 +51,30 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 hr {
-  margin-block: var(--space-m);
+  margin-block: var(--space-l);
 }
 
-p + p {
+:is(dl, p, ol, ul) + :is(dl, p, ol, ul) {
   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;
 }
 
-:is(.list-header, p) {
+.list-header, p {
   grid-column: main-start / main-end;
 }
 
@@ -106,14 +106,10 @@ body {
   grid-column: main-start / main-end;
 }
 
-.content > :is(.figure--image, .codeblock) {
+.content > .codeblock {
   grid-column: wide-gutter-start / wide-gutter-end;
 }
 
-figure, img {
-  max-width: 100%;
-}
-
 img {
   object-fit: contain;
 }
@@ -142,3 +138,38 @@ 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 {
+p, dd {
   letter-spacing: 0.01em;
 }
 

assets/css/050_figures.css

@@ -9,21 +9,29 @@
 
 .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;
 
-  .figure__container {
-    align-items: center;
+  &:has(> img:only-child) {
     display: flex;
-    gap: var(--body-item-spacing);
-    grid-column: wide-gutter-start / wide-gutter-end;
     justify-content: center;
-    min-width: fit-content;
   }
 
-  &:has(> img:only-child, .figure__container > img:only-child) {
-    display: flex;
-    justify-content: center;
+  &:has(.youtube) {
+    display: block;
+    grid-template-columns: unset;
   }
 
   > a:has(img:only-child) {
@@ -46,27 +54,34 @@
 }
 
 
-.figure--main-column {
-  grid-column: main-start / main-end;
-}
-
-
-.figure--code {
-  grid-column: gutter-start / gutter-end;
-}
-
-
-.figure--youtube {
+.figure :is(img, video) {
   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%;
-    }
   }
 }
 
@@ -78,3 +93,8 @@ figcaption {
   grid-column: main-start / main-end;
   letter-spacing: 0.01em;
 }
+
+
+.content-grid > .figure {
+  grid-column: unset;
+}

assets/css/050_lists.css

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

assets/css/050_tags.css

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

assets/css/090_content_grid.css

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

assets/css/099_footnotes.css

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

assets/css/099_page_navigation.css

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

i18n/en.yaml

@@ -5,10 +5,15 @@ 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,6 +12,7 @@
     <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,3 +20,9 @@
     </footer>
   </main>
 {{ end }}
+
+{{ define "after_content" }}
+  {{ range .Resources.Match "*.css" }}
+    <link rel="stylesheet" href="{{ .RelPermalink }}">
+  {{ end }}
+{{ end }}

layouts/blog/single.html

@@ -12,3 +12,9 @@
     </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.Date -}}
+{{- $date := $page.PublishDate -}}
 
 {{- if or (not $dateName) (eq $dateName "date") }}
   {{- $name = T "datePublishedName" -}}

layouts/partials/page/figures/caption.html

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

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

@@ -0,0 +1,45 @@
+{{- $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

@@ -0,0 +1,10 @@
+{{- $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

@@ -0,0 +1,8 @@
+{# 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

@@ -0,0 +1,24 @@
+{{- $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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,27 @@
+{{- $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

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

layouts/partials/page/section_year_nav.html

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

layouts/partials/page/taxonomy_list.html

@@ -16,7 +16,9 @@
   <div class="tag">
     <span class="tag__name">{{ $name }}</span>
     <ul class="tag__value--list" data-name="{{ $name }}">
-      {{ range . }}<li class="tag__value__list-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>{{ end }}
+      {{ range . -}}
+        <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.Date -}}
+  {{- with .page.PublishDate -}}
     <time class="page-date" datetime="{{ . | time.Format "2006-01-02" }}">
       {{- . | time.Format "January 02, 2006" -}}
     </time>

layouts/shortcodes/2col.html

@@ -0,0 +1,10 @@
+{{- $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

@@ -0,0 +1,4 @@
+{{- $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--youtube{{ with $class }}  {{ . }}{{ end }}">
+<figure class="figure{{ 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>