fix links alignment in nav-menu overlay

nitinsooni · Oct 23, 2024 · 316f21f · 316f21f
1 parent ae9175d
commit 316f21f
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 27 deletions.
diff --git a/blog.html b/blog.html
@@ -42,10 +42,10 @@
         </div>
         <div class="nav-overlay">
             <div class="container">
-                <a href="#home" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-house"></i></span>Home</a>
-                <a href="#portfolio" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-user-tie"></i></span>Portfolio</a>
-                <a href="#contact" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-address-card"></i></span>Contact</a>
-                <a href="/blog.html" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-align-left"></i></span>Blog</a>
+                <a href="#home" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-house"></i></span><span class="text">Home</span></a>
+                <a href="#portfolio" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-user-tie"></i></span><span class="text">Portfolio</span></a>
+                <a href="#contact" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-address-card"></i></span><span class="text">Contact</span></a>
+                <a href="/blog.html" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-align-left"></i></span><span class="text">Blog</span></a>
             </div>
         </div>
     </nav>

diff --git a/blog/blog-template.html b/blog/blog-template.html
@@ -42,10 +42,10 @@
         </div>
         <div class="nav-overlay">
             <div class="container">
-                <a href="#home" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-house"></i></span>Home</a>
-                <a href="#portfolio" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-user-tie"></i></span>Portfolio</a>
-                <a href="#contact" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-address-card"></i></span>Contact</a>
-                <a href="/blog.html" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-align-left"></i></span>Blog</a>
+                <a href="#home" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-house"></i></span><span class="text">Home</span></a>
+                <a href="#portfolio" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-user-tie"></i></span><span class="text">Portfolio</span></a>
+                <a href="#contact" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-address-card"></i></span><span class="text">Contact</span></a>
+                <a href="/blog.html" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-align-left"></i></span><span class="text">Blog</span></a>
             </div>
         </div>
     </nav>

diff --git a/css/style.css b/css/style.css
@@ -280,7 +280,6 @@ nav .nav-l .hamburger {
 }
 
 nav .nav-l .hamburger.active {
-    position: fixed;
     transform: rotate(45deg);
     pointer-events: all;
 }
@@ -327,33 +326,34 @@ nav .nav-overlay {
     justify-content: center;
     background: rgba(0, 0, 0, .3);
     backdrop-filter: blur(48px);
-    clip-path: circle(50px at 100% -20%);
+    clip-path: circle(0 at 100% 0);
     transition: clip-path 1s ease-out;
     pointer-events: none;
 }
 
 nav .nav-overlay.active {
-    clip-path: circle(1000px at 80% -10%);
+    clip-path: circle(150% at 80% -10%);
     pointer-events: all;
 }
 
-nav .nav-overlay .container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-}
-
 nav .nav-overlay .container .nav-link {
     color: var(--text-primary);
-    font-size: 1.2rem;
     text-decoration: none;
-    margin: 1.2rem 0;
+    display: grid;
+    grid-template-columns: 2rem auto;
+    gap: 1rem;
+    margin: 2.5rem 0;
 }
 
 nav .nav-overlay .container .nav-link i {
-    font-size: 1.3rem;
-    padding-right: .75rem;
+    font-size: 1.5rem;
+    display: flex;
+    justify-content: center;
+}
+
+nav .nav-overlay .container .nav-link .text {
+    font-size: 1.2rem;
+    text-align: left;
 }
 
 .scroll-to-top {