From 11f8629251a63f3a3260b9ed28277ed312abd136 Mon Sep 17 00:00:00 2001
From: Arne Rief <arne.rief@gmail.com>
Date: Mon, 20 Feb 2023 10:04:10 +0100
Subject: Small media query adjustments

---
 sass/layout/_nav.scss | 39 ++++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 19 deletions(-)

(limited to 'sass/layout/_nav.scss')

diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
index 8d03e69..e2d462e 100644
--- a/sass/layout/_nav.scss
+++ b/sass/layout/_nav.scss
@@ -6,6 +6,11 @@ nav {
   height: 10vh;
   width: 100vw;
 
+  // tablet & mobile
+  @include responsive(tablet) {
+    height: fit-content;
+  }
+
   ul {
     display: flex;
     align-items: center;
@@ -14,12 +19,25 @@ nav {
     list-style-type: none;
     padding: 0 3rem;
     width: 100%;
+
+    // tablet & mobile
+    @include responsive(tablet) {
+      @include flex-column-center;
+      gap: 1rem;
+      padding: 0;
+    }
   }
 
   // logo to the left side of navbar
   li:first-child {
     text-align: left;
     margin-right: auto;
+
+    // tablet & mobile
+    @include responsive(tablet) {
+      text-align: center;
+      margin-right: 1.5rem;
+    }
   }
 
   li a {
@@ -35,27 +53,10 @@ nav {
     &:hover {
       @include main-link-hover;
     }
-  }
-}
-
-// tablet & mobile
-@media screen and (max-width: 980px) {
-  nav {
-    height: fit-content;
-
-    ul {
-      @include flex-column-center;
-      gap: 1rem;
-      padding: 0;
-    }
 
-    li a {
+    // tablet & mobile
+    @include responsive(tablet) {
       font-size: $big-text;
     }
-
-    li:first-child {
-      text-align: center;
-      margin-right: 1.5rem;
-    }
   }
 }
-- 
cgit v1.2.3