moved menu to a top navigation bar to the homepage and updated CSS for improved layout and styling.

zesameri · zesameri · commit 488f9237c171 · 2025-06-23T22:05:34.000-04:00
diff --git a/css/main.css b/css/main.css
@@ -24,6 +24,9 @@ section {
   width: calc(100vw - 20em);
   padding-top: 5vh;
   padding-left: 6vw;
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
 }
 .bio {
   padding-bottom: 10vh;
@@ -135,3 +138,35 @@ a {
   padding-left: 6vw;
   padding-bottom: 5em;
 }
+
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-right: 5em;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+.top-nav {
+  display: flex;
+  gap: 2em;
+  align-items: center;
+}
+
+.nav-link {
+  color: inherit;
+  text-decoration: none;
+  font-size: 0.8em;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+
+.nav-link:hover {
+  opacity: 1;
+}
diff --git a/index.html b/index.html
@@ -34,10 +34,17 @@
 </head>
 <body>
   <section class="hero">
-    <h1 class="header">
-      <a class="simple-link" href="./index.html"> zesameri </a>
-      <a class="simple-link" href="./secrets.html"> <img class="header-img" src="assets/images/flower.svg" alt="Flower"></a>
-    </h1>
+    <div class="top-bar">
+      <h1 class="header">
+        <a class="simple-link" href="./index.html"> zesameri </a>
+        <a class="simple-link" href="./secrets.html"> <img class="header-img" src="assets/images/flower.svg" alt="Flower"></a>
+      </h1>
+      <nav class="top-nav">
+        <a class="nav-link" href="./essays.html">essays</a>
+        <a class="nav-link" href="./poems.html">poems</a>
+        <a class="nav-link" href="./recs.html">recs</a>
+      </nav>
+    </div>
     <div class="bio">
       <p>
         I felt intrigued to express a piece of me to the abyss of the Internet.
@@ -51,12 +58,6 @@ <h1 class="header">
       </p>
     </div>
   </section>
-  <section class="menu" id="menu">
-    <div><div><a class="simple-link" href="./essays.html"> essays </a></div></div>
-    <div><div><a class="simple-link" href="./poems.html"> poems </a></div></div>
-    <div><div><a class="simple-link" href="./recs.html"> recs </a></div></div>
-    <div><div> tbd </div></div>
-  </section>
   <footer class="footer hero-footer" id="footer">
     <a class="footer__link--email" href="mailto:zesameri@gmail.com">talk to me</a>
     <a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">i'm smart</a>
@@ -65,13 +66,5 @@ <h1 class="header">
     <a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">eww</a>
     <div class="crumple" aria-hidden=""></div>
   </footer>
-  <footer class="footer menu-footer" id="footer">
-    <a class="footer__link--email" href="https://twitter.com/zesameri">talk to me</a>
-    <a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">i'm smart</a>
-    <a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">vibes</a>
-    <a class="footer__link--linkedin" href="https://www.linkedin.com/in/merhoo/" target="_blank" rel="noopener noreferrer">love me</a>
-    <a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">eww</a>
-    <div class="crumple" aria-hidden=""></div>
-  </footer>
 </body>
 </html>
