From e470d062a6b2d7ecfebe060890d1028925910107 Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Sun, 11 Aug 2024 23:58:04 -0500
Subject: [PATCH] use flex for navbar instead of grid

---
 style.css | 38 +++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/style.css b/style.css
index b91c1cd..c225a6c 100644
--- a/style.css
+++ b/style.css
@@ -305,17 +305,16 @@ styling of the terminal windows
 top navbar styling. attempts to look like a desktop panel/window manager bar
 */
 .navbar {
+    display: flex;
+    flex-direction: row;
     position: fixed;
     top: 0 !important;
     z-index: 10;
     min-width: 100%;
     max-width: 100%;
-    min-height: 2.3em;
-    max-height: 2.3em;
-
-    display: grid;
-    grid-gap: 1em;
-    grid-template-columns: max-content auto max-content;
+    min-height: 1.8em !important;
+    max-height: 1.8em !important;
+    margin-top: .5em;
 
     font-family: "Lexend Deca";
     align-content: center;
@@ -323,7 +322,7 @@ top navbar styling. attempts to look like a desktop panel/window manager bar
     color: var(--text);
 
     .nav-base {
-        padding: .2em;
+        padding: 0px .2em !important;
         border-radius: 8px;
         box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
         max-width: fit-content;
@@ -333,7 +332,7 @@ top navbar styling. attempts to look like a desktop panel/window manager bar
         background-color: var(--green);
         text-decoration: unset !important;
         color: var(--crust);
-        margin-left: .4em !important;
+        margin-left: .5em !important;
     }
     .nav-baselink-mobile {
         display: none;
@@ -345,6 +344,7 @@ top navbar styling. attempts to look like a desktop panel/window manager bar
         background-color: var(--base);
         color: var(--text);
         padding: 0px 5px 0px;
+        margin-left: .5em !important;
     }
     .nav-links a {
         color: var(--text);
@@ -357,7 +357,8 @@ top navbar styling. attempts to look like a desktop panel/window manager bar
     .nav-systray {
         background-color: var(--crust);
         color: var(--text);
-        margin-right: .4em !important;
+        margin-left: auto !important;
+        margin-right: .5em !important;
         i {
             padding: 0px 2px 0px 2px;
         }
@@ -927,9 +928,13 @@ modify widths and spacing depending on the size of the display
 */
 @media screen and (max-width: 59em) {
     .navbar {
-        min-height: 2.3em;
-        max-height: 2.3em;
+        min-height: 1.8em !important;
+        max-height: 1.8em !important;
+        flex-wrap: wrap;
 
+        .nav-base {
+            padding: .27em .2em !important;
+        }
         .nav-baselink {
             display: none !important;
         }
@@ -948,25 +953,24 @@ modify widths and spacing depending on the size of the display
         .hover-tip {
             display: unset !important;
             background-color: var(--base);
+            margin-left: .5em !important;
             animation: blink 3s ease-inr-out infinite;
             -moz-animation: blink 3s ease-in-out infinite;
             -webkit-animation: blink 3s ease-in-out infinite;
         }
         .nav-links {
             display: none !important;
+            order: 1;
+            margin-top: .5em;
         }
     }
     .navbar:hover {
-        grid-template-columns: max-content auto;
-        grid-template-rows: auto auto;
-        min-height: 4.9em !important;
-        max-height: 5.5em !important;
+        min-height: 4.06em !important;
         .hover-tip {
             display: none !important;
         }
         .nav-links {
             display: unset !important;
-            grid-row: 2 !important;
             padding: .2em;
             margin-left: .4em !important;
         }
@@ -979,7 +983,7 @@ modify widths and spacing depending on the size of the display
     }
 
     .terminal:nth-child(2) {
-        margin-top: 2.4em;
+        margin-top: 2.8em;
     }
     .terminal {
         .term-titlebar {