From ad1b670ddce235eea88e100c803e0510ee848cc3 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 12 Jun 2023 22:33:01 +0200
Subject: [PATCH] style: spacing adjustments

---
 src/components/AddressBar.astro |  8 +++-----
 src/components/Library.astro    |  2 +-
 src/layouts/Layout.astro        | 24 +++++++++++++-----------
 3 files changed, 17 insertions(+), 17 deletions(-)
diff --git a/src/components/AddressBar.astro b/src/components/AddressBar.astro
index 2f3aaef..b4fea70 100644
--- a/src/components/AddressBar.astro
+++ b/src/components/AddressBar.astro
@@ -38,13 +38,12 @@ const form = new FormGroup([
 <style lang="scss">
   .address-bar {
     text-align: center;
-    padding: 0.5em;
     width: 100%;
   }
 
   nav {
-    margin: 0.5em 0;
-
+    padding: 0.5rem;
+    font-size: small;
     a:hover {
       text-decoration: underline;
     }
@@ -54,13 +53,12 @@ const form = new FormGroup([
     }
     img {
       display: inline;
-      vertical-align: middle;
+      vertical-align: bottom;
     }
   }
 
   :global(input) {
     width: 100%;
-    max-width: var(--cozy-width);
     text-align: center;
     border: 0px;
     border-radius: 5px;
diff --git a/src/components/Library.astro b/src/components/Library.astro
index 84ce1cc..f406ced 100644
--- a/src/components/Library.astro
+++ b/src/components/Library.astro
@@ -105,7 +105,7 @@ const {postDivSelector, skipSave = false} = Astro.props;
         }
 
         :global(.post-card) {
-          padding-top: 1rem;
+          padding-bottom: 0.5rem;
           :global(.post-card__image) {
             float: left;
             margin: 0.25rem 0.5rem 0.25rem 0;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 457e362..c991270 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -26,28 +26,30 @@ const { meta } = Astro.props;
 
   </head>
   <body>
-    <slot />
-    <div id="main-content">
-      <div id="post-wrapper">
-        <slot name="post" />
-      </div>
-      <div id="library-wrapper">
-        <slot name="library" />
+    <div id="app-wrapper">
+      <slot />
+      <div id="main-content">
+        <div id="post-wrapper">
+          <slot name="post" />
+        </div>
+        <div id="library-wrapper">
+          <slot name="library" />
+        </div>
       </div>
     </div>
   </body>
 </html>
 
 <style>
-  #main-content {
-    max-width: var(--cozy-width);
+  #app-wrapper {
+    width: 100%;
+    max-width: 650px;
     margin: 0 auto;
-    padding: 0 1em 1em;
+    padding: 0.5rem;
   }
 </style>
 <style is:global lang="scss">
   :root {
-    --cozy-width: 600px;
     --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
       "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   }
