feat: add footer

src/_data/meta.js

@@ -15,5 +15,11 @@ module.exports = {
   blog: {
     name: "wonderfulfrog",
     description: "Devin Haska's digital garden.",
+    feed: "",
+  },
+  social: {
+    rss: "",
+    github: "",
+    mastodon: "",
   },
 };

src/_data/navigation.js

@@ -13,5 +13,19 @@ module.exports = {
       url: "/catalogue",
     },
   ],
-  bottom: [],
+  bottom: [
+    {
+      text: "Colophon",
+      url: "/colophon",
+    },
+    { text: "Blogroll", url: "/blogroll" },
+    {
+      text: "/uses",
+      url: "/uses",
+    },
+    {
+      text: "/now",
+      url: "/now",
+    },
+  ],
 };

src/_includes/partials/footer.html

@@ -1,3 +1,28 @@
-<footer>
-    Footer.
+{% set socialLinks = meta.social | entries %}
+<footer class="[ footer ]">
+    <div class="[ wrapper ] [ flex justify-between ]">
+        <div class="[ flow ]">
+            <p>&copy; {{ meta.author }} 2018-2024.</p>
+            <nav>
+                <ul class="[ footer-links ] [ flex list-none ]">
+                    {% for link in socialLinks %}
+                        {% set key = link | first %}
+                        {% set url = link | last %}
+                        <li>
+                            <a href="{{ url }}" target="_blank" rel="external noreferrer noopener">{{ key }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </nav>
+        </div>
+        <nav>
+            <ul class="[ footer-links ] [ flex list-none ]">
+                {% for link in navigation.bottom %}
+                    <li>
+                        <a href="{{ link.url }}">{{ link.text }}</a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </nav>
+    </div>
 </footer>

src/assets/css/blocks/footer.css

@@ -0,0 +1,11 @@
+.footer {
+  background-color: var(--color-bg-soft);
+  margin-block-start: 1.5rem;
+  padding-block: 1.5rem;
+}
+
+.footer-links {
+  margin: 0;
+  padding: 0;
+  gap: 0.5rem;
+}

src/assets/css/global/variables.css

@@ -7,6 +7,7 @@
   --color-dark: var(--color-neutral-950);
 
   --color-bg: var(--color-light);
+  --color-bg-soft: var(--color-neutral-100);
   --color-text: var(--color-dark);
   --color-text-soft: var(--color-neutral-600);
   --color-primary: var(--color-aqua-400);

src/assets/css/utils/list.css

@@ -0,0 +1,11 @@
+.list-none {
+  list-style-type: none;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.list-decimal {
+  list-style-type: decimal;
+}