chore: improve + simplify update timestamps in footer

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "16.3.0",
+  "version": "16.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "16.3.0",
+      "version": "16.4.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.2.2",
@@ -3368,9 +3368,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.774",
+      "version": "1.4.775",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.774.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.775.tgz",
-      "integrity": "sha512-132O1XCd7zcTkzS3FgkAzKmnBuNJjK8WjcTtNuoylj7MYbqw5eXehjQ5OK91g0zm7OTKIPeaAG4CPoRfD9M1Mg==",
+      "integrity": "sha512-JpOfl1aNAiZ88wFzjPczTLwYIoPIsij8S9/XQH9lqMpiJOf23kxea68B8wje4f68t4rOIq4Bh+vP4I65njiJBw==",
       "dev": true
     },
     "node_modules/encodeurl": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "16.3.0",
+  "version": "16.4.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/main.liquid

@@ -3,5 +3,5 @@ layout: base
 ---
 <div class="main-wrapper">
   <main>{{ content }}</main>
-  {% render "partials/footer.liquid", page:page, nav:nav %}
+  {% render "partials/footer.liquid", page:page, nav:nav, updated:updated %}
 </div>

src/_includes/partials/footer.liquid

@@ -1,10 +1,11 @@
-<footer>
+<footer{% unless updated %} style="margin-top:var(--sizing-3xl)"{% endunless %}>
-  <nav aria-label="Social icons" class="flex-centered justify-centered text-centered">
+  {% if updated %}<p class="explainer text-small text-centered"><em>This page was last updated on {{ updated | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}.</em></p>{% endif %}
+  <nav aria-label="Social icons" class="social flex-centered justify-centered text-centered">
     {% for link in nav.social %}
       {% render "partials/nav/linked-icon.liquid", name:link.name, link:link.url, icon:link.icon %}
     {% endfor %}
   </nav>
-  <nav aria-label="Secondary site navigation" class="flex-centered justify-centered text-centered">
+  <nav aria-label="Secondary site navigation" class="sub-pages flex-centered justify-centered text-centered">
     {% for link in nav.footer %}
       {% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
       {% if not forloop.last %}<span>•</span>{% endif %}

src/assets/styles/base/index.css

@@ -116,9 +116,9 @@ a {
 a:hover,
 a:focus,
 a:active,
-:is(.main-title, footer nav:last-child) a:hover,
+:is(.main-title, footer nav.sub-pages) a:hover,
-:is(.main-title, footer nav:last-child) a:focus,
+:is(.main-title, footer nav.sub-pages) a:focus,
-:is(.main-title, footer nav:last-child) a:active {
+:is(.main-title, footer nav.sub-pages) a:active {
   color: var(--accent-color-hover);
   transition-property: color;
   transition-timing-function: var(--transition-ease-in-out);
@@ -377,39 +377,41 @@ article {
   }
 }
 
-.explainer {
+footer {
-  padding-top: var(--sizing-lg);
+  & .explainer {
-  margin-block: 0;
+    margin: var(--sizing-3xl) 0 var(--sizing-lg);
-}
-
-footer nav:first-child {
-  gap: var(--sizing-sm);
-  margin-top: var(--sizing-3xl);
-  padding: var(--sizing-3xl) 0 var(--sizing-lg);
-  width: 100%;
-
-  & svg {
-    margin-top: 0;
   }
 
-  & a {
+  & nav {
-    width: var(--sizing-xl);
+    &.social {
-    height: var(--sizing-xl);
+      gap: var(--sizing-sm);
+      margin-bottom: var(--sizing-lg);
+      width: 100%;
+
+      & svg {
+        margin-top: 0;
+      }
+
+      & a {
+        width: var(--sizing-xl);
+        height: var(--sizing-xl);
+      }
+    }
+
+    &.sub-pages {
+      font-size: var(--font-size-sm);
+      line-height: var(--line-height-sm);
+      padding-bottom: var(--sizing-3xl);
+
+      & span:not(.active) {
+        margin-left: var(--sizing-xs);
+        margin-right: var(--sizing-xs);
+      }
+    }
   }
 }
 
-footer nav:last-child {
+:is(.main-title, footer nav.sub-pages) a {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  padding-bottom: var(--sizing-3xl);
-
-  & span:not(.active) {
-    margin-left: var(--sizing-xs);
-    margin-right: var(--sizing-xs);
-  }
-}
-
-:is(.main-title, footer nav:last-child) a {
   color: var(--text-color);
 }
 
@@ -626,7 +628,7 @@ li {
     }
   }
 
-  footer nav:first-child {
+  footer nav.social {
     gap: var(--sizing-md);
   }
 }

src/pages/main/books/index.html

@@ -2,6 +2,7 @@
 title: Currently reading • Books
 layout: default
 permalink: "/books/index.html"
+updated: "now"
 schema: books
 ---
 {%- assign bookData = books | bookStatus: 'started' | reverse -%}
@@ -28,5 +29,4 @@ schema: books
     {% if book.description %}<blockquote class="description">{{ book.description }}</blockquote>{% endif %}
   </div>
 </article>
-{% endfor %}
+{% endfor %}
-<p class="explainer text-small text-centered"><em>This page was last updated on {{ "now" | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}. It typically updates once an hour.</em></p>

src/pages/main/music/index.html

@@ -2,6 +2,7 @@
 title: Music
 layout: default
 permalink: "/music/index.html"
+updated: "now"
 schema: music
 ---
 {% capture js %}
@@ -91,5 +92,4 @@ schema: music
   {% render "partials/media/music/tracks/chart.liquid", data:music.allTime.tracks, mostPlayed:music.allTime.tracks[0].plays %}
 </div>
 <p><strong class="highlight-text">More:</strong> <a href="/music/tracks/this-week/">This week</a> • <a href="/music/tracks/this-month/">This month</a> • <a href="/music/tracks/three-months/">3 months</a> • <a href="/music/tracks/all-time/">All time</a></p>
-{% render "partials/media/music/releases.liquid", albumReleases:albumReleases %}
+{% render "partials/media/music/releases.liquid", albumReleases:albumReleases %}
-<p class="explainer text-small text-centered"><em>This page was last updated on {{ "now" | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}. It typically updates once an hour.</em></p>

src/pages/main/now.html

@@ -17,5 +17,5 @@ updated: 2024-05-18T15:49:00Z
 <p><strong class="highlight-text">Encouraging folks to block AI web crawlers:</strong> <a href="https://coryd.dev/posts/2024/go-ahead-and-block-ai-web-crawlers/">they're insidious, abusive and should be blocked.</a> <a href="https://github.com/ai-robots-txt/ai.robots.txt">I'm happy to take contributions, once again,</a> as we encourage folks to block them as best they can.</p>
 <h3>Mentoring</h3>
 <p>I've been mentoring through <a href="https://www.underdogdevs.org">Underdog Devs</a> on and off for a few years now and find it incredibly rewarding.</p>
-<p class="explainer text-small text-centered">This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.</p>
+<hr class="large-spacing" />
-<p class="explainer text-small text-centered"><em>This page was last updated on {{ updated | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}.</em></p>
+<p>This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.</p>

src/pages/main/watching/index.html

@@ -2,6 +2,7 @@
 title: Watching
 layout: default
 permalink: "/watching/index.html"
+updated: "now"
 schema: watching
 ---
 {% assign featuredMovie = movies.favorites | featuredWatching: 1 | first %}
@@ -34,5 +35,4 @@ schema: watching
   </h2>
 </a>
 {% assign favoriteShows = tv.favorites | featuredWatching: 6 %}
-{% render "partials/media/watching/favorites-grid.liquid", favorites:favoriteShows, count: 6 %}
+{% render "partials/media/watching/favorites-grid.liquid", favorites:favoriteShows, count: 6 %}
-<p class="explainer text-small text-centered"><em>This page was last updated on {{ "now" | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}. It typically updates once an hour.</em></p>

src/pages/secondary/uses.md

@@ -76,4 +76,6 @@ Software and services that I use for work and my own enjoyment.
 - [Backblaze](https://backblaze.com): It backs up my MacBook Air and attached storage drive and I don't have to think about it.
 - <a onclick="clicky?.log('/uses','Proton referral', 'click')" href="https://pr.tn/ref/X775YX40Z50G">Proton</a>: a reliable, trustworthy VPN with all of the features you'd expect from such a service.
 
+<hr class="large-spacing" />
+
 Check out [uses.tech](https://uses.tech) for more lists like this one.