From 3efb80f45ba1d7f31ed177eed442443392acb076 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Sat, 19 Jul 2025 00:50:53 +0200
Subject: [PATCH] refactor: :recycle: move page footer into its own component

---
 src/components/page-footer.webc | 61 +++++++++++++++++++++++++++++++++
 src/layouts/character.webc      | 12 +------
 2 files changed, 62 insertions(+), 11 deletions(-)
 create mode 100644 src/components/page-footer.webc

diff --git a/src/components/page-footer.webc b/src/components/page-footer.webc
new file mode 100644
index 0000000..8968d70
--- /dev/null
+++ b/src/components/page-footer.webc
@@ -0,0 +1,61 @@
+<script webc:setup>
+  const feedbackLink = 'https://cloud.sebin-nyshkim.net/apps/forms/s/eHjsosE9FB4fCpjBt4mbPfje';
+</script>
+
+<footer webc:root="override">
+  <p>
+    Made with ❤️ and <a href="https://11ty.dev" target="_blank">11ty</a><br />
+    Icons by <a href="https://fontawesome.com/">Font Awesome</a>
+  </p>
+  <p>
+    &copy; <time @text="new Date().getFullYear()"></time> Sebin Nyshkim<br />
+    Got
+    <a :href="feedbackLink" target="_blank"> feedback </a>?<br />
+    <a href="/privacy">Privacy Policy</a>
+  </p>
+</footer>
+
+<style webc:scoped="footer">
+  :host {
+    --columns: 1fr;
+
+    grid-area: footer;
+    display: grid;
+    grid-template-columns: var(--columns);
+    gap: 1em;
+    width: 100%;
+    max-width: 65ch;
+    padding-inline: var(--inbox-spacing);
+
+    @media (min-width: 35em) {
+      --columns: repeat(2, 1fr);
+    }
+  }
+
+  :host p {
+    --text-align: center;
+
+    margin: 0;
+    text-align: var(--text-align);
+
+    @media (min-width: 35em) {
+      margin: revert;
+    }
+  }
+
+  :host p:first-child {
+    text-align: var(--text-align);
+
+    @media (min-width: 35em) {
+      --text-align: start;
+    }
+  }
+
+  :host p:last-child {
+    text-align: var(--text-align);
+
+    @media (min-width: 35em) {
+      --text-align: end;
+    }
+  }
+</style>
diff --git a/src/layouts/character.webc b/src/layouts/character.webc
index 7932c32..1744f36 100644
--- a/src/layouts/character.webc
+++ b/src/layouts/character.webc
@@ -1,6 +1,5 @@
 ---
 layout: base.webc
-feedbackLink: https://cloud.sebin-nyshkim.net/apps/forms/s/eHjsosE9FB4fCpjBt4mbPfje
 ---
 
 <popup-modal id="nsfw-warning" :open="isOpen">
@@ -32,16 +31,7 @@ feedbackLink: https://cloud.sebin-nyshkim.net/apps/forms/s/eHjsosE9FB4fCpjBt4mbP
     <template @raw="content" webc:nokeep></template>
   </page-content>
 
-  <footer>
-    <p>
-      Made with ❤️ and <a href="https://11ty.dev" target="_blank">11ty</a><br />
-      Icons by <a href="https://fontawesome.com/">Font Awesome</a>
-    </p>
-    <p>
-      &copy; <time @text="new Date().getFullYear()"></time> Sebin Nyshkim<br />
-      Got <a :href="feedbackLink" target="_blank">feedback</a>?
-    </p>
-  </footer>
+  <page-footer></page-footer>
 </main>
 
 <style>