Merge pull request #36 from ayoayco/style/list-and-address-bar-adjustments

style: list and address bar adjustments

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%;
@@ -61,12 +60,13 @@ const form = new FormGroup([
 
   :global(input) {
     width: 100%;
+    max-width: var(--cozy-width);
     text-align: center;
     border: 0px;
     border-radius: 5px;
     padding: 0.5rem;
-  }
+    background-color: #f5f5f5;
-  :global(input[type="text"]) {
+    box-shadow: 0 1px 3px 1px #ccc;
-    border: 2px solid brown;
+    cursor: pointer;
   }
 </style>

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) {
+    :global(span#heading) {
-      text-align: center;
+      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,12 +105,10 @@ 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;
+            margin: 0.25rem 0.5rem 0.25rem 0;
-            margin: 0.25rem 1rem 0.25rem 0;
 
             :global(img, svg) {
               width: 70px;

src/layouts/Layout.astro

@@ -40,21 +40,18 @@ const { meta } = Astro.props;
 
 <style>
   #main-content {
-    max-width: 600px;
+    max-width: var(--cozy-width);
     margin: 0 auto;
-  }
+    padding: 0 1em 1em;
-
-  #main-content * {
-    margin: 1rem 0 0;
-    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);
   }

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>