Better navbar cutoff for mobile

Owez · Dec 10, 2023 · 297b80a · 297b80a
1 parent f4b2379
commit 297b80a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/sass/style.scss b/sass/style.scss
@@ -40,19 +40,21 @@ a {
 // Space between the screen and the left of navbar
 #nav-left {
     margin-left: $nav-space;
-
-    // Cut my name off if it's too crampt
-    @media screen and (max-width: 400px) {
-        text-indent: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        width: 0;
-    }
 }
 
 // Space between the screen and the right of navbar
 #nav-right {
     margin-right: $nav-space;
+
+    // Cut optional content off if it's too crampt
+    &.optional {
+        @media screen and (max-width: 400px) {
+            text-indent: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            width: 0;
+        }
+    }
 }
 
 // Navbar

diff --git a/templates/article.html b/templates/article.html
@@ -14,7 +14,7 @@
     <!-- NOTE: navbar should ideally be a component -->
     <a id="nav-left" class="nav-link" href="/">Owen Griffiths</a>
     <div>
-        <a id="nav-right" class="nav-link" href="/#about">About</a>
+        <a id="nav-right" class="nav-link optional" href="/#about">About</a>
         <a id="nav-right" class="nav-link" href="/blog">Blog</a>
     </div>
 </nav>

diff --git a/templates/blog.html b/templates/blog.html
@@ -15,7 +15,7 @@
     <!-- NOTE: navbar should ideally be a component -->
     <a id="nav-left" class="nav-link" href="/">Owen Griffiths</a>
     <div>
-        <a id="nav-right" class="nav-link" href="/#about">About</a>
+        <a id="nav-right" class="nav-link optional" href="/#about">About</a>
         <a id="nav-right" class="nav-link" href="/blog">Blog</a>
     </div>
 </nav>

diff --git a/templates/index.html b/templates/index.html
@@ -11,7 +11,7 @@
         <!-- NOTE: navbar should ideally be a component -->
         <a id="nav-left" class="nav-link" href="/">Owen Griffiths</a>
         <div>
-            <a id="nav-right" class="nav-link" href="/#about">About</a>
+            <a id="nav-right" class="nav-link optional" href="/#about">About</a>
             <a id="nav-right" class="nav-link" href="/blog">Blog</a>
         </div>
     </nav>