Merge pull request #221 from querkmachine/brand-refresh-2025

Author: querkmachine

eleventy.config.js

@@ -106,6 +106,9 @@ export default function (eleventyConfig) {
   // Collections
   eleventyConfig.addCollection("tags", getAllTags);
 
+  // Bundles
+  eleventyConfig.addBundle("css");
+
   // Custom Nunjucks functions
   eleventyConfig.addNunjucksGlobal("merge", mergeArrays);
   eleventyConfig.addNunjucksGlobal("getTableOfContents", getTableOfContents);

src/404.njk

@@ -5,74 +5,60 @@ eleventyExcludeFromCollections: true
 
 {% extends 'src/_layouts/layout.njk' %}
 
-{% block head %}
-<style>
-  .page-background {
-    inline-size: 100%;
-    block-size: 100%;
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-  }
+{% css %}
+.pageWrapper {
+  max-width: 22em;
+  margin-inline: auto;
+  text-align: center;
+}
 
-  .page-content {
-    max-width: 22em;
-    margin-inline: auto;
-    text-align: center;
-  }
-    
-  .page-noodle {
-    margin-block-end: 0;
-  }
-  
-  .page-heading {
-    margin-block-start: calc(var(--space-3) * -1);
-    margin-block-end: var(--space-5);
-    transform: rotate(2deg);
-  }
-  
-  .page-advice {
-    transform: rotate(-3deg);
-  }
-  
-  .page-it,
-  .page-you {
-    color: var(--color-text-accent);
-  }
-  
-  .page-it {
-    position: relative;
-  }
-  
-  .page-it::after {
-    content: "";
-    display: block;
-    width: 100%;
-    aspect-ratio: 9/16;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    background-image: url("{{ '/assets/images/noodle-404-drips.webp' | url }}");
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-</style>
-{% endblock %}
+.pageImage {
+  margin-block-end: 0;
+}
 
-{% block beforeMasthead %}
-<canvas class="page-background" id="background" width="1000" height="500" hidden></canvas>
-{% endblock %}
+.pageHeading {
+  margin-block-start: calc(var(--space-3) * -1);
+  margin-block-end: var(--space-5);
+  transform: rotate(2deg);
+}
+
+.pageContent {
+  transform: rotate(-3deg);
+}
+
+.pageIt,
+.pageYou {
+  color: var(--color-text-accent);
+}
+
+.pageIt {
+  position: relative;
+}
+
+.pageIt::after {
+  content: "";
+  display: block;
+  width: 100%;
+  aspect-ratio: 9/16;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-image: url("{{ '/assets/images/noodle-404-drips.webp' | url }}");
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+{% endcss %}
 
 {% block main %}
   <div class="kim-!-padding-block-start-3-4 kim-!-padding-block-end-3-4">
     <div class="kimWrapper">
-      <div class="page-content">
-        {% responsiveImage "./src/assets/images/noodle-404.webp", "An amphimorpho stuck to the wall, looking at the viewer aggressively.", { classes: "page-noodle", lazy: false } %}
-        <h1 class="kimHeading-s page-heading">
+      <div class="pageWrapper">
+        {% responsiveImage "./src/assets/images/noodle-404.webp", "An amphimorpho stuck to the wall, looking at the viewer aggressively.", { classes: "pageImage", lazy: false } %}
+        <h1 class="kimHeading-s pageHeading">
           The page you were looking for couldn&rsquo;t be found&hellip;<br>
-          but <span class="page-it">it</span> has found <span class="page-you">you</span>!
+          but <span class="pageIt">it</span> has found <span class="pageYou">you</span>!
         </h1>
-        <div class="page-advice">
+        <div class="pageContent">
           <p class="kimBody">You might want to get out of here fast.<br>
           <a href="{{ '/' | url }}" class="kimLink">Return home, quickly!</a></p>
         </div>
@@ -83,11 +69,3 @@ eleventyExcludeFromCollections: true
 
 {% block masthead %}{# Keep it simple, stupid. #}{% endblock %}
 {% block footer %}{# Keep it really simple, stupid. #}{% endblock %}
-
-{% block scripts %}
-{{ super() }}
-<script type="module">
-  import Spots from "{{ '/assets/javascript/spots.js' | url | cachebust }}";
-  new Spots(document.querySelector(".page-background"), { isAnimated: true });
-</script>
-{% endblock %}

src/_includes/blog-card.njk

@@ -9,6 +9,7 @@
       {%- if options.prelabel %}{{ options.prelabel }}: {% endif -%}
       <a class="kimLink kimBlogCard_link" href="{{ post.url | absoluteUrl(site.domain) }}" itemprop="url" {%- if options.rel %} rel="{{ options.rel }}"{% endif %}>
         <span itemprop="name" {%- if post.data.titleLang %} lang="{{ post.data.titleLang }}"{% endif %}>
+          <span class="kim-!-visually-hidden">Published</span>
           {{- post.data.title | markdownInline | safe -}}
         </span>
       </a>

src/_includes/development-tag.njk

@@ -1,6 +1,6 @@
 {%- if site.environment == "dev" %}
-  <details id="dev-tag">
-    <summary id="dev-tag__label">
+  <details id="pageDevTag">
+    <summary>
       <span>Development</span>
     </summary>
     <div>
@@ -16,7 +16,7 @@
   </details>
 
   <style>
-    #dev-tag {
+    #pageDevTag {
       position: sticky;
       width: 100%;
       top: 0;
@@ -25,22 +25,22 @@
       color: white;
       background-color: #c00;
     }
-    #dev-tag summary { list-style: none; }
-    #dev-tag summary::-webkit-details-marker { display: none; }
-    #dev-tag summary {
+    #pageDevTag summary { list-style: none; }
+    #pageDevTag summary::-webkit-details-marker { display: none; }
+    #pageDevTag summary {
       padding: .25em 1em .25em .5em;
       font-size: smaller;
       font-weight: bold;
       text-transform: uppercase;
       cursor: pointer;
     }
-    #dev-tag div {
+    #pageDevTag div {
       display: grid;
       grid-template-columns: 8em 1fr;
       gap: .5em;
       padding: .5em;
     }
-    #dev-tag textarea {
+    #pageDevTag textarea {
       width: 100%;
       height: 10em;
       resize: vertical;

src/_includes/table-of-contents.njk

@@ -11,15 +11,11 @@
   </li>
 {%- endmacro %}
 
-{%- set toc = getTableOfContents(content) %}
-
-{%- if toc | length > 0%}
 <nav class="kimToc" aria-labelledby="toc-heading">
-  <h2 class="kimBody kimToc_heading" id="toc-heading">Contents</h2>
+  <h2 class="kimHeading-2xs" id="toc-heading">On this page</h2>
   <ul class="kimList kimBody-s kimToc_list">
     {%- for i in toc %}
       {{ _tocItem(i) }}
     {%- endfor %}
   </ul>
-</nav>
-{%- endif %}
+</nav>

src/_layouts/blog-archive.njk

@@ -4,14 +4,13 @@
 
 {% set yearList = postsList | getArchiveYears | reverse %}
 
-{% block head %}
-  <style>
-  .page-sticky-heading {
-    position: sticky;
-    inset-block-start: var(--space-5);
-  }
-  </style>
-{% endblock %}
+{% css %}
+.pageYearHeading {
+  position: sticky;
+  inset-block-start: var(--space-5);
+  font-variant-numeric: tabular-nums;
+}
+{% endcss %}
 
 {% block main %}
   <div class="kim-!-margin-block-8-9">
@@ -37,7 +36,7 @@
         <hr class="kimRule">
         <div class="kimGrid">
           <div class="kimGrid_column kimGrid_column-full defiant:kimGrid_column-oneThird">
-            <h2 class="kimHeading-l kim-!-margin-block-start-0 page-sticky-heading">{{ year }}</h2>
+            <h2 class="kimHeading-l kim-!-margin-block-start-0 pageYearHeading">{{ year }}</h2>
           </div>
           <div class="kimGrid_column kimGrid_column-full defiant:kimGrid_column-twoThirds">
             <ol class="kimList kimList-spaced">