refactor: ♻️ move page footer into its own component

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>

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>