Add nav link hover effect

namanyayg · Jan 14, 2024 · 48de2fb · 48de2fb
1 parent 4770dc3
commit 48de2fb
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 _site
+_drafts
 .sass-cache
 .jekyll-cache
 .jekyll-metadata

diff --git a/_includes/header.html b/_includes/header.html
@@ -22,10 +22,10 @@
         </label>
 
         <div class="trigger">
-          <a class="page-link" href="https://nmn.gl">Home</a>
-          <a class="page-link" href="https://nmn.gl/#about">About</a>
-          <a class="page-link" rel="author" href="{{ "/" | relative_url }}">Blog</a>
-          <a class="page-link" rel="author" href="https://nmn.gl/lab">Lab</a>
+          <a class="page-link" href="https://nmn.gl"><span>Home</span></a>
+          <a class="page-link" href="https://nmn.gl/#about"><span>About</span></a>
+          <a class="page-link" rel="author" href="{{ "/" | relative_url }}"><span>Blog</span></a>
+          <a class="page-link" rel="author" href="https://nmn.gl/lab"><span>Lab</span></a>
         </div>
       </nav>
     {%- endif -%}

diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss
@@ -68,6 +68,16 @@
     line-height: $base-line-height;
     text-transform: lowercase;
 
+    span {
+      transition: all .15s ease;
+      display: inline-block;
+    }
+
+    &:hover {
+      span {
+        transform: translateY(-.25em);
+      }
+    }
     // Gaps between nav items, but not on the last one
     &:not(:last-child) {
       margin-right: $spacing-unit;