💄 Add links to the site footer

src/_data/site.js

@@ -14,5 +14,13 @@ module.exports = function () {
       "https://twitter.com/batbeeps",
       "https://github.com/querkmachine",
     ],
+    footerLinks: [
+      { href: "/about/", text: "About beeps" },
+      { href: "/brand/", text: "Brand" },
+      { href: "/colophon/", text: "Colophon" },
+      { href: "/links/", text: "Cool links" },
+      { href: "/privacy/", text: "Privacy" },
+      { href: "/contact/", text: "Contact" },
+    ],
   };
 };

src/_layouts/layout.njk

@@ -83,14 +83,14 @@
         </div>
       {% endblock %}
       <div class="kimWrapper kimFooter_inner">
+        <ul class="kimFooter_links" aria-label="Minor content">
+          {%- for link in site.footerLinks %}
+            <li><a class="kimLink" href="{{ link.href | url }}">{{ link.text }}</a></li>
+          {%- endfor%}
+        </ul>
         <div class="kimFooter_themeSwitch">
           {% include "src/_includes/color-scheme-switch.njk" %}
         </div>
-        <small class="kimFooter_boilerplate">
-          {% block boilerplate %}
-            Made by <a class="kimLink-plain" href="{{ '/about/' | url }}">beeps</a> and <a class="kimLink-plain" href="{{ '/colophon/' | url }}">uncountable others</a>. Keep circulating the HTML.
-          {% endblock %}
-        </small>
       </div>
     </footer>
   {% endblock %}

src/assets/components/_footer.scss

@@ -27,11 +27,15 @@
       align-items: center;
     }
   }
-  &_themeSwitch {
-    margin-right: auto;
-  }
-  &_boilerplate {
+  &_links {
     @include typography.kim-font-size(12);
     display: block;
+    margin: 0;
+    padding: 0;
+    margin-right: auto;
+    li {
+      @include spacing.kim-responsive-margin(2, $direction: right);
+      display: inline-block;
+    }
   }
 }