feat: 💬 add attributions to site footer

src/layouts/character.webc

@@ -3,9 +3,7 @@ layout: base.webc
 ---
 
 <popup-modal id="nsfw-warning" :open="isOpen">
-  <template webc:nokeep slot="heading">
-    🔞 Whoa, Nelly! 🔞
-  </template>
+  <template webc:nokeep slot="heading"> 🔞 Whoa, Nelly! 🔞 </template>
   <template webc:nokeep slot="message">
     <p>Entering the kinky zone!</p>
     <p>You confirm that you are of legal age to view adult content!</p>
@@ -32,12 +30,18 @@ layout: base.webc
     <article @raw="content"></article>
   </page-content>
 
-  <footer>&copy; Sebin Nyshkim 2025</footer>
+  <footer>
+    <p>
+      Made with <a href="https://11ty.dev" target="_blank">11ty</a><br />
+      Icons by <a href="https://fontawesome.com/">Font Awesome</a>
+    </p>
+    <p>&copy; Sebin Nyshkim 2025</p>
+  </footer>
 </main>
 
 <style>
   main {
-    --inbox-margin: 1rem;
+    --inbox-spacing: 1rem;
 
     display: grid;
     justify-content: center;
@@ -56,7 +60,7 @@ layout: base.webc
     margin-block: var(--page-spacing);
 
     @media (min-width: 64em) {
-      --inbox-margin: 1.5rem;
+      --inbox-spacing: 1.5rem;
 
       grid-auto-columns: revert;
       grid-template-columns: 18em minmax(0, 65ch);
@@ -67,12 +71,12 @@ layout: base.webc
   }
 
   h1 {
-    margin-inline: var(--inbox-margin);
+    margin-inline: var(--inbox-spacing);
   }
 
   article {
-    margin-block: var(--inbox-margin);
-    margin-inline: var(--inbox-margin);
+    margin-block: var(--inbox-spacing);
+    margin-inline: var(--inbox-spacing);
     hyphens: auto;
   }
 
@@ -85,7 +89,43 @@ layout: base.webc
   }
 
   footer {
-    text-align: end;
+    --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);
+    }
+  }
+
+  footer p:first-child {
+    text-align: center;
+
+    @media (min-width: 35em) {
+      text-align: start;
+    }
+  }
+
+  footer p {
+    margin: 0;
+    text-align: center;
+
+    @media (min-width: 35em) {
+      margin: revert;
+    }
+  }
+
+  footer p:last-child {
+    text-align: center;
+
+    @media (min-width: 35em) {
+      text-align: end;
+    }
   }
 </style>