feat: better inter-blog navigation

Author: csswizardry

archive.html

@@ -9,18 +9,19 @@
 
 <section class="posts">
 
+  <ul class="c-nav-secondary" id="section:about">
+    <li class="c-nav-secondary__item"><a href="/blog/" class="c-nav-secondary__link  is-current">All</a></li>
+    <li class="c-nav-secondary__item"><a href="/blog/category/" class="c-nav-secondary__link">Categories</a></li>
+    <li class="c-nav-secondary__item"><a href="/blog/tags/" class="c-nav-secondary__link">Tags</a></li>
+  </ul>
+
   {% assign random = site.time | date: "%s%N" | modulo: site.posts.size %}
 
   <p>This is the full archive of everything I’ve published here:
   <b>{{ site.posts | size }}</b> articles on web performance, site-speed,
   Core Web Vitals, caching, browser behaviour, and the occasional older CSS
   piece.</p>
 
-  <ul class="c-nav-secondary" id="section:about">
-    <li class="c-nav-secondary__item"><a href="/blog/category/" class="c-nav-secondary__link">Categories</a></li>
-    <li class="c-nav-secondary__item"><a href="/blog/tags/" class="c-nav-secondary__link">Tags</a></li>
-  </ul>
-
   <p>If you’d rather start somewhere less chronological, try
   <a href="{{ site.posts[random].url }}"><cite>{{ site.posts[random].title }}</cite></a>
   <small>(<time>{{ site.posts[random].date | date: "%Y" }}</time>)</small>

blog.html

@@ -8,18 +8,19 @@
 
 <section class="posts">
 
+  <ul class="c-nav-secondary" id="section:about">
+    <li class="c-nav-secondary__item"><a href="/blog/" class="c-nav-secondary__link  is-current">All</a></li>
+    <li class="c-nav-secondary__item"><a href="/blog/category/" class="c-nav-secondary__link">Categories</a></li>
+    <li class="c-nav-secondary__item"><a href="/blog/tags/" class="c-nav-secondary__link">Tags</a></li>
+  </ul>
+
   {% assign random = site.time | date: "%s%N" | modulo: site.posts.size %}
 
   <p>This is the full archive of everything I’ve published here:
   <b>{{ site.posts | size }}</b> articles on web performance, site-speed,
   Core Web Vitals, caching, browser behaviour, and the occasional older CSS
   piece.</p>
 
-  <ul class="c-nav-secondary" id="section:about">
-    <li class="c-nav-secondary__item"><a href="/blog/category/" class="c-nav-secondary__link">Categories</a></li>
-    <li class="c-nav-secondary__item"><a href="/blog/tags/" class="c-nav-secondary__link">Tags</a></li>
-  </ul>
-
   <p>If you’d rather start somewhere less chronological, try
   <a href="{{ site.posts[random].url }}"><cite>{{ site.posts[random].title }}</cite></a>
   <small>(<time>{{ site.posts[random].date | date: "%Y" }}</time>)</small>

category/index.html

@@ -1,11 +1,15 @@
 ---
 layout: page
-title: Categories
+title: CSS Wizardry Blog Categories
 permalink: /blog/category/
 meta: "Browse by subject: web performance, front-end development, tooling, the business of consulting, and everything else written here."
 ---
 
-<p><a href="/blog/">« All posts</a></p>
+<ul class="c-nav-secondary" id="section:about">
+  <li class="c-nav-secondary__item"><a href="/blog/" class="c-nav-secondary__link">All</a></li>
+  <li class="c-nav-secondary__item"><a href="/blog/category/" class="c-nav-secondary__link  is-current">Categories</a></li>
+  <li class="c-nav-secondary__item"><a href="/blog/tags/" class="c-nav-secondary__link">Tags</a></li>
+</ul>
 
 {% assign category_pages = site.pages | where_exp: "item", "item.category" | sort: "category" %}
 {% assign category_count = category_pages | size %}
@@ -19,7 +23,7 @@
   <a href="{{ '/blog/tags/' | relative_url }}">tags</a> go a good deal
   deeper.</p>
 
-<ul>
+<ul class=o-list-columnar>
   {% for category_page in category_pages %}
     <li><a href="{{ category_page.url | relative_url }}">{{ category_page.category }}</a></li>
   {% endfor %}

tag/index.html

@@ -1,11 +1,15 @@
 ---
 layout: page
-title: Tags
+title: CSS Wizardry Blog Tags
 permalink: /blog/tags/
 meta: "Every subject covered on CSS Wizardry, from Core Web Vitals and caching to CSS, RUM, and the browser internals sitting underneath them."
 ---
 
-<p><a href="/blog/">« All posts</a></p>
+<ul class="c-nav-secondary" id="section:about">
+  <li class="c-nav-secondary__item"><a href="/blog/" class="c-nav-secondary__link">All</a></li>
+  <li class="c-nav-secondary__item"><a href="/blog/category/" class="c-nav-secondary__link">Categories</a></li>
+  <li class="c-nav-secondary__item"><a href="/blog/tags/" class="c-nav-secondary__link  is-current">Tags</a></li>
+</ul>
 
 {% assign tag_pages = site.pages | where_exp: "item", "item.tag" | sort: "tag" %}
 {% assign tag_count = tag_pages | size %}
@@ -18,7 +22,7 @@
   Wizardry. If you’d rather browse by broader subject, try the
   <a href="{{ '/blog/category/' | relative_url }}">categories</a> instead.</p>
 
-<ul>
+<ul class=o-list-columnar>
   {% for tag_page in tag_pages %}
     <li><a href="{{ tag_page.url | relative_url }}">{{ tag_page.tag }}</a></li>
   {% endfor %}