From 4bae7cb0b94d17b65aa9bb5341f6b6459f05c9cf Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 12 Jun 2023 21:53:01 +0200
Subject: [PATCH 1/5] style: removed borders and made heading small

---
 src/components/Library.astro | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Library.astro b/src/components/Library.astro
index a761568..353a98e 100644
--- a/src/components/Library.astro
+++ b/src/components/Library.astro
@@ -7,6 +7,7 @@ export interface Props {
 const {postDivSelector, skipSave = false} = Astro.props;
 ---
 <div id="library">
+  <span id="heading"></span>
   <ul id="post-list"></ul>
 </div>
 
@@ -32,6 +33,9 @@ const {postDivSelector, skipSave = false} = Astro.props;
   const list = document.querySelector('#post-list');
 
   if(cachedRequests?.length) {
+    const heading = document.querySelector('#library span#heading') as HTMLHeadingElement;
+    heading.innerHTML = 'History';
+
     cachedRequests
     // temporary delete all cached errors
     .filter(request => {
@@ -79,18 +83,18 @@ const {postDivSelector, skipSave = false} = Astro.props;
 
 <style lang="scss">
   #library {
-    :global(h2) {
-      text-align: center;
+    :global(span#heading) {
+      color: #555;
+      font-size: small;
+      text-transform: uppercase;
     }
   }
   #post-list {
+
     :global(li) {
       list-style: none;
-      display: block;
-      float: left;
       width: calc(100% + 40px);
       margin-left: -40px;
-      border-bottom: 1px solid #eee;
 
       :global(a) {
         text-decoration: none;
@@ -101,8 +105,7 @@ const {postDivSelector, skipSave = false} = Astro.props;
         }
 
         :global(.post-card) {
-          padding: 1rem 0;
-
+          padding-top: 1rem;
           :global(.post-card__image) {
             float: left;
             margin-right: 0.5rem;

From 66238c11691abe87c449d1ee6f7a6a7bcc29428c Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 12 Jun 2023 22:00:06 +0200
Subject: [PATCH 2/5] style: address bar color adjustments

---
 src/components/AddressBar.astro | 10 ++++------
 src/layouts/Layout.astro        |  5 +++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/AddressBar.astro b/src/components/AddressBar.astro
index 2abc001..aa25800 100644
--- a/src/components/AddressBar.astro
+++ b/src/components/AddressBar.astro
@@ -11,7 +11,7 @@ const form = new FormGroup([
   {
     name: "url",
     value: url,
-    placeholder: "Put the URL here",
+    placeholder: "Type a URL here",
     validators: [Validators.required, Validators.minLength(11)],
   },
 ]);
@@ -37,7 +37,6 @@ const form = new FormGroup([
 
 <style lang="scss">
   .address-bar {
-    background-color:antiquewhite;
     text-align: center;
     padding: 0.5em;
     width: 100%;
@@ -60,13 +59,12 @@ const form = new FormGroup([
   }
 
   :global(input) {
-    width: 100%;
+    width: var(--cozy-width);
     text-align: center;
     border: 0px;
     border-radius: 5px;
     padding: 0.5rem;
-  }
-  :global(input[type="text"]) {
-    border: 2px solid brown;
+    background-color: #f5f5f5;
+    box-shadow: 0 0 1px 1px #ccc;
   }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 0805f0c..501065b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -40,7 +40,7 @@ const { meta } = Astro.props;
 
 <style>
   #main-content {
-    max-width: 600px;
+    max-width: var(--cozy-width);
     margin: 0 auto;
   }
 
@@ -49,12 +49,13 @@ const { meta } = Astro.props;
     padding: 0 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";
   }
+
   html * {
     font-family: var(--system-ui);
   }

From 739d1bf175be73cf933572087dd9a218dac236d8 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 12 Jun 2023 22:06:33 +0200
Subject: [PATCH 3/5] style: spacing and cursor

---
 src/components/AddressBar.astro | 1 +
 src/layouts/Layout.astro        | 1 -
 src/pages/index.astro           | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AddressBar.astro b/src/components/AddressBar.astro
index aa25800..ca2b713 100644
--- a/src/components/AddressBar.astro
+++ b/src/components/AddressBar.astro
@@ -66,5 +66,6 @@ const form = new FormGroup([
     padding: 0.5rem;
     background-color: #f5f5f5;
     box-shadow: 0 0 1px 1px #ccc;
+    cursor: pointer;
   }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 501065b..bbd10b3 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -45,7 +45,6 @@ const { meta } = Astro.props;
   }
 
   #main-content * {
-    margin: 1rem 0 0;
     padding: 0 0.5rem;
   }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 732d959..ec7444e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -44,5 +44,5 @@ if (url === '') {
       : 
       <div slot="post" id="outlet"></div>
     }
-        <Library skipSave={skipSave} slot="library" postDivSelector="#outlet" />
+    <Library skipSave={skipSave} slot="library" postDivSelector="#outlet" />
 </Layout>

From 4b9c005beda6d87de4878cc6332f097689a0a0b9 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 12 Jun 2023 22:07:29 +0200
Subject: [PATCH 4/5] style: add bottom padding to main content

---
 src/layouts/Layout.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index bbd10b3..ab351b6 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -45,7 +45,7 @@ const { meta } = Astro.props;
   }
 
   #main-content * {
-    padding: 0 0.5rem;
+    padding: 0 0.5rem 1rem;
   }
 </style>
 <style is:global lang="scss">

From 9f0eb454a3fa722a0862366690f92cef064a29e8 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 12 Jun 2023 22:17:55 +0200
Subject: [PATCH 5/5] style: spacing adjustments

---
 src/components/AddressBar.astro | 5 +++--
 src/components/Library.astro    | 3 +--
 src/layouts/Layout.astro        | 5 +----
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/AddressBar.astro b/src/components/AddressBar.astro
index ca2b713..2f3aaef 100644
--- a/src/components/AddressBar.astro
+++ b/src/components/AddressBar.astro
@@ -59,13 +59,14 @@ const form = new FormGroup([
   }
 
   :global(input) {
-    width: var(--cozy-width);
+    width: 100%;
+    max-width: var(--cozy-width);
     text-align: center;
     border: 0px;
     border-radius: 5px;
     padding: 0.5rem;
     background-color: #f5f5f5;
-    box-shadow: 0 0 1px 1px #ccc;
+    box-shadow: 0 1px 3px 1px #ccc;
     cursor: pointer;
   }
 </style>
diff --git a/src/components/Library.astro b/src/components/Library.astro
index 353a98e..84ce1cc 100644
--- a/src/components/Library.astro
+++ b/src/components/Library.astro
@@ -108,8 +108,7 @@ const {postDivSelector, skipSave = false} = Astro.props;
           padding-top: 1rem;
           :global(.post-card__image) {
             float: left;
-            margin-right: 0.5rem;
-            margin: 0.25rem 1rem 0.25rem 0;
+            margin: 0.25rem 0.5rem 0.25rem 0;
 
             :global(img, svg) {
               width: 70px;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ab351b6..457e362 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -42,10 +42,7 @@ const { meta } = Astro.props;
   #main-content {
     max-width: var(--cozy-width);
     margin: 0 auto;
-  }
-
-  #main-content * {
-    padding: 0 0.5rem 1rem;
+    padding: 0 1em 1em;
   }
 </style>
 <style is:global lang="scss">