Pager & Navigation layout tweaked

brklntmhwk · Mar 28, 2024 · ae39ea6 · ae39ea6
1 parent 20d1171
commit ae39ea6
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 34 deletions.
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -38,7 +38,7 @@ const meta = await getEntry('meta', 'site-data')
     </a>
   </div>
   <div class="mobile-menu">
-    <Svg iconName="hamburger" width={32} height={32} />
+    <button><Svg iconName="hamburger" width={32} height={32} /></button>
   </div>
 </nav>
 
@@ -48,11 +48,12 @@ const meta = await getEntry('meta', 'site-data')
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: 0 8px;
   }
   nav a {
-    padding: 1em 0.5em;
+    /* padding: 1em 0.5em; */
     color: var(--black);
-    border-bottom: 4px solid transparent;
+    border-bottom: 2px solid transparent;
     text-decoration: none;
   }
   nav a.active {
@@ -66,28 +67,56 @@ const meta = await getEntry('meta', 'site-data')
   .mobile-menu {
     display: block;
   }
+  .mobile-menu button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
   @media (min-width: 768px) {
+    nav {
+      padding: 0 10px;
+    }
     .social-links,
     .nav-links {
       display: flex;
+      column-gap: 15px;
     }
     .mobile-menu {
       display: none;
     }
   }
   @media (min-width: 1024px) {
     nav {
-      display: block;
+      display: grid;
+      grid-template-rows: 1fr 3fr 1fr;
+      grid-template-areas:
+        'blog-title'
+        'nav-links'
+        'social-links';
+      justify-content: start;
+      align-items: start;
       position: sticky;
       top: 0;
-      padding: 8px 15px 5px 25px;
-      width: 20rem;
-      border: 2px solid black;
+      padding: 12px 15px 12px 25px;
+      width: 18rem;
+      height: 100vh;
+      border-right: 1px solid black;
       box-sizing: border-box;
     }
+    nav h2 {
+      grid-area: blog-title;
+    }
     .nav-links {
       display: grid;
-      gap: 4px;
+      grid-area: nav-links;
+      gap: 15px;
+    }
+    .social-links {
+      grid-area: social-links;
+      display: flex;
+      justify-content: space-evenly;
+      column-gap: 10px;
+      align-self: end;
     }
   }
 </style>
diff --git a/src/components/Pager.astro b/src/components/Pager.astro
@@ -36,25 +36,29 @@ const paginator = (
       {page.url.prev ? (
         <div>
           <a href={page.url.prev}>
-            <Svg iconName="left-arrow" width={20} height={20} />
+            <Svg iconName="left-arrow" width={22} height={22} />
           </a>
         </div>
       ) : (
-        <Svg iconName="left-arrow" width={20} height={20} />
+        <Svg iconName="left-arrow" width={22} height={22} />
       )}
       {paginator(page.currentPage, page.lastPage).map((pg) => {
-        if (pg === 1) {
-          return (
-            <li>
-              <a href="/blog">{pg}</a>
-            </li>
-          )
+        if (pg === page.currentPage) {
+          return <li>{pg}</li>
         } else {
-          return (
-            <li>
-              <a href={`/blog/${pg}`}>{pg}</a>
-            </li>
-          )
+          if (pg === 1) {
+            return (
+              <li>
+                <a href="/blog">{pg}</a>
+              </li>
+            )
+          } else {
+            return (
+              <li>
+                <a href={`/blog/${pg}`}>{pg}</a>
+              </li>
+            )
+          }
         }
       })}
       <p>
@@ -63,11 +67,11 @@ const paginator = (
       {page.url.next ? (
         <div>
           <a href={page.url.next}>
-            <Svg iconName="right-arrow" width={20} height={20} />
+            <Svg iconName="right-arrow" width={22} height={22} />
           </a>
         </div>
       ) : (
-        <Svg iconName="right-arrow" width={20} height={20} />
+        <Svg iconName="right-arrow" width={22} height={22} />
       )}
     </nav>
   )
@@ -79,7 +83,11 @@ const paginator = (
     justify-content: space-evenly;
     align-items: center;
   }
-  li {
+  nav li {
     list-style-type: none;
+    font-size: 20px;
+  }
+  nav a {
+    text-decoration: none;
   }
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -31,20 +31,21 @@
   font-display: swap;
 }
 body {
+  width: 100%;
   font-family: 'Atkinson', sans-serif;
   margin: 0;
   padding: 0;
   text-align: left;
-  background: linear-gradient(var(--gray-gradient)) no-repeat;
-  background-size: 100% 600px;
+  /* background: linear-gradient(var(--gray-gradient)) no-repeat;
+  background-size: 100% 600px; */
   word-wrap: break-word;
   overflow-wrap: break-word;
   color: rgb(var(--gray-dark));
   font-size: 20px;
   line-height: 1.7;
 }
 main {
-  width: 100%;
+  /* width: 100%; */
   /* width: 720px; */
   /* max-width: calc(100% - 18rem); */
   grid-area: main;
@@ -130,14 +131,15 @@ hr {
   border: none;
   border-top: 1px solid rgb(var(--gray-light));
 }
-@media (max-width: 720px) {
+
+/* @media (max-width: 720px) {
   body {
     font-size: 18px;
   }
   main {
     padding: 1em;
   }
-}
+} */
 .base-wrapper {
   width: 100%;
   display: grid;
@@ -153,17 +155,24 @@ hr {
   }
 } */
 @media (min-width: 1024px) {
+  main {
+    /* width: 100%; */
+    grid-area: main;
+    padding: 2.5em 2em;
+    overflow-y: auto;
+  }
+
   .base-wrapper {
     width: 100%;
+    min-height: 100vh;
     display: grid;
-    grip-gap: 5px;
-    grid-template-columns: 20rem 1fr;
-    grid-template-rows: 2.5fr 1fr;
+    grid-template-columns: 18rem 1fr;
+    grid-template-rows: 1fr auto;
     /* grid-auto-columns: 18rem minmax(50rem, auto); */
-    /* grid-auto-rows: minmax(100px, auto); */
+    grid-auto-rows: minmax(100px, auto);
     grid-template-areas:
       'navigation main'
-      'footer footer';
+      'navigation footer';
   }
 }
 .sr-only {