From c2410dce821398a4b8f398e3f0e414ea8d23f82e Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Mon, 10 Jun 2024 16:55:19 +0800
Subject: [PATCH] Make navigation links flexbox on all screen sizes

---
 src/_includes/global/navbar.njk | 39 ++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/_includes/global/navbar.njk b/src/_includes/global/navbar.njk
index 0fc33156..b46cfeee 100644
--- a/src/_includes/global/navbar.njk
+++ b/src/_includes/global/navbar.njk
@@ -37,34 +37,35 @@
     }
 
     .navbar__toggle:focus,
-    .navbar a:focus {
+    .navbar__links a:focus {
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .navbar a {
-        color: var(--clr-navbar-link);
-        text-decoration: none;
-        cursor: pointer;
-    }
-
-    .navbar a:hover {
-        color: var(--clr-link-hover);
-    }
-
-    .navbar a:focus {
-        outline-offset: 0.3em;
-    }
-
     .navbar__links {
         list-style: none;
+        padding: 0.2em 0 0 0;
         display: none;
+        flex-wrap: wrap;
         gap: 1em;
-        padding: 0.5em 1.8em;
-        overflow: auto;
     }
 
     .navbar__links--show {
-        display: grid;
+        display: flex;
+    }
+
+    .navbar__links a {
+        color: var(--clr-navbar-link);
+        text-decoration: none;
+        cursor: pointer;
+        display: block;
+    }
+
+    .navbar__links a:hover {
+        color: var(--clr-link-hover);
+    }
+
+    .navbar__links a:focus {
+        outline-offset: 0.2em;
     }
 
     /* Tablet screen size */
@@ -81,9 +82,7 @@
             display: flex;
             justify-content: space-evenly;
             gap: 0.5em;
-            flex-wrap: wrap;
             padding: 0;
-            overflow: unset;
         }
     }
 </style>