Merge pull request #65 from ayoayco/style/footer-improvements

style: footer improvements

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>

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>

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>
 

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>