From bd100977ab42b17786ef922f0c54fbd3977e8c94 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 24 Jun 2023 11:01:40 +0200
Subject: [PATCH] style: footer improvements

---
 src/components/Footer.astro | 48 +++++++++++++++++++++----------------
 src/components/Post.astro   | 10 ++++----
 src/layouts/Layout.astro    |  2 +-
 src/pages/index.astro       |  4 +++-
 4 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 9468c7d..bbc9762 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,31 +2,30 @@
 import Icon from 'astro-iconify'
 ---
 
-<footer class="footer">
+<footer>
+  <section>
+    Remove distractions.<br />Save for later.
+  </section>
 
-  <p>Remove distractions. Save for later.</p>
-  <p>No sign-ups. No setups. It just works.</p>
-  <p>
+
+  <section class="attribution">
+    <a href="http://ayos.blog/building-a-cozy-web/">Hand-crafted</a> with <Icon name="line-md:heart" /> by <a href="https://ayo.ayco.io">Ayo Ayco</a>
+    <br />
     <a href="https://github.com/ayoayco/cozy">Star on GitHub to support!</a>
-  </p>
+  </section>
 
-  <p class="footer__attribution">
-    <a href="http://ayos.blog/building-a-cozy-web/">Hand-crafted</a> with <Icon name="line-md:heart" /> by <a href="https://ayo.ayco.io">Ayo Ayco</a
-    >
-  </p>
-
-  <p class="footer__disclaimer">All content rights and credits are reserved to their respective owners.</p>
- 
+  <section class="disclaimer">All rights reserved to content owners.</section>
 </footer>
+
 <style lang="scss">
-  .footer {
+  footer {
     width: 100%;
-    max-width: 350px;
     margin: 0 auto;
     text-align: center;
     color: #333;
     font-size: small;
-    padding-bottom: 1rem;
+    display: flex;
+    border-top: 1px solid #eee;
 
     svg {
       width: 1.25rem;
@@ -37,13 +36,20 @@ import Icon from 'astro-iconify'
       color: red;
     }
 
-    &__disclaimer, &__attribution {
-      padding: 1rem 0 0;
-    }
+    section {
+      flex: 1;
+      padding: 1rem 1rem 0;
 
-    &__title {
-      font-weight: bold;
-      font-size: 1.2rem;
+      &.attribution {
+        flex: 2;
+      }
+    }
+  }
+
+  @media (max-width: 600px) {
+    footer {
+      flex-direction: column;
+      max-width: 350px;
     }
   }
 </style>
diff --git a/src/components/Post.astro b/src/components/Post.astro
index 6726ddb..d1cbfa4 100644
--- a/src/components/Post.astro
+++ b/src/components/Post.astro
@@ -69,11 +69,11 @@ const datePublished =
 
     pre {
       white-space: pre-wrap;
-    }
-    pre:has(code) {
-      padding: 1em;
-      background: #f6f8fa;
-      border-radius: 5px;
+      &:has(code) {
+        padding: 1em;
+        background: #f6f8fa;
+        border-radius: 5px;
+      }
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 2c8aa3b..3812b32 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -50,8 +50,8 @@ const appTitle = `Cozy 🧸${meta.title && ` | ${meta.title}`}`;
           <slot name="library" />
         </div>
       </div>
+      <slot name="footer">
     </div>
-    <Footer />
   </body>
 </html>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a7008c5..71b32b9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,6 +4,7 @@ import AddressBar from "../components/AddressBar.astro";
 import Post from "../components/Post.astro";
 import Layout from "../layouts/Layout.astro";
 import Library from "../components/Library.astro";
+import Footer from "../components/Footer.astro";
 
 const params = Astro.url.searchParams;
 const url = params.get('url') || '';
@@ -39,5 +40,6 @@ if (url === '') {
 <Layout meta={article}>
     <AddressBar url={url} />
     <Post slot="post" article={article} />
-    <Library skipSave={skipSave} slot="library" postDivSelector="#post"/>
+    <Library slot="library" skipSave={skipSave} postDivSelector="#post"/>
+    <Footer slot="footer" />
 </Layout>