enhancement(app): Improve Nav UI, reorg CSS for better responsiveness

djsiddz · Feb 7, 2024 · a414158 · a414158
1 parent f6798ed
commit a414158
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 50 deletions.
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -9,18 +9,33 @@
 </nav>
 <style>
   nav {
-    font-size: 1.5rem;
+    border: 2px solid whitesmoke;
+    border-radius: 2rem;
+    font-size: 1rem;
     display: flex;
-    gap: 1.5rem;
-    padding: 1rem 0 4rem 0;
+    gap: 4rem;
+    padding: 0.25rem 3rem;
+    margin-top: 1rem;
   }
+  nav > a {
+  color: whitesmoke;
+}
+nav > a:hover {
+  color: #ffff85;
+}
+
   @media (orientation: portrait) {
     nav {
-      display: flex;
-      flex-direction: column;
       font-size: 0.75rem;
       gap: 1rem;
-      padding: 2rem 0;
+      padding: 0.25rem 1.25rem;
+    }
+  }
+  @media (max-width: 315px) {
+    nav {
+      border: none;
+      flex-direction: column;
+      padding: 0.25rem;
     }
   }
 </style>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -1,6 +1,9 @@
 ---
 import "../styles/global.css";
 
+import Footer from "../components/Footer.astro";
+import Nav from "../components/Nav.astro";
+
 const { pageTitle } = Astro.props;
 ---
 
@@ -19,6 +22,10 @@ const { pageTitle } = Astro.props;
     <title>{pageTitle}</title>
   </head>
   <body>
-    <slot />
+    <section>
+      <Nav/>
+      <slot />
+      <Footer/>
+    </section>
   </body>
 </html>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,42 +1,35 @@
 ---
-import Footer from "../components/Footer.astro";
-import Nav from "../components/Nav.astro";
-
 import MainLayout from "../layouts/MainLayout.astro";
 
 const hobbies = ["Space Exploration", "Writing", "Space Photography"];
 ---
 
 <MainLayout pageTitle="Space Ahead | About">
-  <section>
-    <Nav />
-    <div class="pageContent">
-      <h1 class="honk-ff"><span class="blinking">About</span> Space Ahead</h1>
-      <p class="kanit-regular balance-text">
-        Space Ahead is 👩‍🚀 <strong>Astro-naut Sid</strong>'s blog. He writes
-        stories about his travels to galaxies far and wide.
-      </p>
+  <div class="pageContent">
+    <h1 class="honk-ff"><span class="blinking">About</span> Space Ahead</h1>
+    <p class="kanit-regular balance-text">
+      Space Ahead is 👩‍🚀 <strong>Astro-naut Sid</strong>'s blog. He writes
+      stories about his travels to galaxies far and wide.
+    </p>
 
-      <p class="kanit-regular balance-text">
-        Sid is known for his love of adventure and his insatiable curiosity
-        about the universe. He has explored countless planets, discovered new
-        life forms, and made friends with aliens along the way. 🚀
-      </p>
-      <p class="kanit-regular balance-text">
-        His favorite planet is <span class="kanit-bold">Earth</span>, where he
-        once had a close encounter with a friendly alien named <span
-          class="kanit-bold">Astro</span
-        >. Sid's next mission is to explore the <span class="kanit-bold"
-          >Andromeda Galaxy</span
-        > and discover what secrets it holds. 🪐
-      </p>
-      <p class="kanit-regular">My hobbies are:</p>
-      <ul class="hobbies kanit-bold">
-        {hobbies.map((hobby) => <li>{hobby}</li>)}
-      </ul>
-    </div>
-    <Footer />
-  </section>
+    <p class="kanit-regular balance-text">
+      Sid is known for his love of adventure and his insatiable curiosity
+      about the universe. He has explored countless planets, discovered new
+      life forms, and made friends with aliens along the way. 🚀
+    </p>
+    <p class="kanit-regular balance-text">
+      His favorite planet is <span class="kanit-bold">Earth</span>, where he
+      once had a close encounter with a friendly alien named <span
+        class="kanit-bold">Astro</span
+      >. Sid's next mission is to explore the <span class="kanit-bold"
+        >Andromeda Galaxy</span
+      > and discover what secrets it holds. 🪐
+    </p>
+    <p class="kanit-regular" style="margin-bottom: 0">My hobbies are:</p>
+    <ul class="hobbies kanit-bold">
+      {hobbies.map((hobby) => <li>{hobby}</li>)}
+    </ul>
+  </div>
 </MainLayout>
 <style>
   .pageContent {
@@ -48,6 +41,7 @@ const hobbies = ["Space Exploration", "Writing", "Space Photography"];
     display: inline-flex;
     flex-wrap: wrap;
     gap: 1rem;
+    margin-top: 0;
   }
   /* .hobbies li {
     padding: 0 0 0 1rem;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,12 +1,6 @@
 ---
-import Footer from "../components/Footer.astro";
-import Nav from "../components/Nav.astro";
 import MainLayout from "../layouts/MainLayout.astro";
 ---
 <MainLayout pageTitle="Space Ahead - An Astro Blog">
-	<section>
-		<h1 class="honk-ff">Space Ahead <span class="blinking">!</span></h1>
-		<Nav/>
-		<Footer/>
-	</section>
+	<h1 class="honk-ff balance-text">Space Ahead <span class="blinking">!</span></h1>
 </MainLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -83,17 +83,20 @@ body {
   background-attachment: fixed;
 }
 section {
+  min-height: 90%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  min-height: 90%;
+  justify-content: space-between;
   padding: 1rem;
 }
 h1 {
   font-size: 4rem;
   margin: 0;
 }
+p {
+  margin-bottom: 2rem;
+}
 
 @media (orientation: portrait) {
   body {
@@ -103,13 +106,18 @@ h1 {
     color: whitesmoke;
     background-attachment: fixed;
   }
+  section {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+  }
   h1 {
     font-size: 2.5rem;
     margin: 0;
   }
+}
+@media (max-width: 315px) {
   section {
-    display: flex;
-    justify-content: center;
-    align-items: start;
+    gap: 3rem;
   }
 }