From fc588876e19761359a3e25352eba0421db9f24af Mon Sep 17 00:00:00 2001
From: Chom <112128328+tomasohCHOM@users.noreply.github.com>
Date: Thu, 14 Mar 2024 17:29:15 -0700
Subject: [PATCH 1/2] Add gradient navbar border

---
 src/lib/components/nav/bar.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lib/components/nav/bar.svelte b/src/lib/components/nav/bar.svelte
index dd8fbfd07..11db28f80 100644
--- a/src/lib/components/nav/bar.svelte
+++ b/src/lib/components/nav/bar.svelte
@@ -91,6 +91,11 @@
     justify-content: center;
     padding: 16px 0;
     z-index: 10;
+    border-bottom: 4px solid;
+    border-image: var(--acm-union) 1;
+    background-origin: border-box;
+    background-clip: content-box, border-box;
+    filter: brightness(110%);
 
     .blurrybar {
       position: absolute;

From bc33bbd2fb8781a662f409b80545cd2bdd8cc8dd Mon Sep 17 00:00:00 2001
From: Chom <112128328+tomasohCHOM@users.noreply.github.com>
Date: Fri, 15 Mar 2024 17:01:14 -0700
Subject: [PATCH 2/2] Rewrite navbar scss to css

---
 src/lib/components/nav/bar.svelte | 395 ++++++++++++++----------------
 static/global.css                 |   4 +
 2 files changed, 189 insertions(+), 210 deletions(-)

diff --git a/src/lib/components/nav/bar.svelte b/src/lib/components/nav/bar.svelte
index 11db28f80..1ef5fc6c7 100644
--- a/src/lib/components/nav/bar.svelte
+++ b/src/lib/components/nav/bar.svelte
@@ -27,8 +27,6 @@
 <nav>
   <input type="checkbox" id="navToggle" class="toggle" bind:this={checkbox} />
 
-  <div class="blurrybar" />
-
   <div class="backdrop" on:click={handleClose} on:keypress={handleClose} role="presentation" />
 
   <div class="container">
@@ -91,228 +89,205 @@
     justify-content: center;
     padding: 16px 0;
     z-index: 10;
+    background-color: var(--navbar-bg);
     border-bottom: 4px solid;
     border-image: var(--acm-union) 1;
     background-origin: border-box;
-    background-clip: content-box, border-box;
-    filter: brightness(110%);
+  }
 
-    .blurrybar {
-      position: absolute;
+  nav .backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    opacity: 0;
+    background-color: var(--perma-dark);
+    transition: opacity 0.25s ease-in;
+    pointer-events: none;
+  }
+
+  nav .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    width: 1280px;
+  }
+
+  nav .container .logo-container .logo {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    gap: 4px;
+  }
+
+  nav .container .logo-container .logo .badge {
+    height: 64px;
+    width: auto;
+    filter: drop-shadow(0 1.5px 4.5px rgba(44, 145, 198, 0.5));
+    z-index: -1;
+  }
+
+  nav .container .logo-container .logo h3 {
+    /* None of the CSS sizing tags are used here because the logo text scales to very specific px sizes */
+    font-size: clamp(1.25rem, 1.2039rem + 0.2632vw, 1.625rem);
+  }
+
+  nav section {
+    display: flex;
+    align-items: center;
+    gap: 64px;
+    height: 100%;
+  }
+
+  nav section .pages,
+  nav section li,
+  nav section a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+
+  nav section .pages {
+    gap: 50px;
+    list-style: none;
+  }
+
+  nav section .pages a {
+    text-decoration: none;
+    transition: 0.25s ease-in-out;
+    padding: 8px 8px;
+  }
+
+  nav section .pages a:hover,
+  nav section .pages a[aria-current='true'] {
+    color: var(--acm-blue);
+  }
+
+  nav section .hidden {
+    opacity: 0;
+  }
+
+  nav section .toggle-container::not(.hidden) {
+    opacity: 1;
+  }
+
+  nav section .toggle-container {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  nav section .toggle-container .dark-toggle {
+    display: flex;
+    align-items: center;
+    max-width: fit-content;
+    padding: 6px 12px;
+    background-color: var(--perma-dark);
+    border-radius: 8px;
+    gap: 4px;
+  }
+
+  nav section .toggle-container .dark-toggle:hover {
+    cursor: pointer;
+    background-color: #3d4043;
+  }
+
+  nav .toggle,
+  nav .menu {
+    display: none;
+    z-index: 10;
+  }
+
+  @media screen and (max-width: 900px) {
+    nav .container .logo-container .logo .badge {
+      height: 64px;
+    }
+
+    nav .container .pages {
+      position: fixed;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      top: 0;
+      right: 0;
+      width: 0;
+      // background-color: var(--acm-abyss);
+      background-color: var(--navbar-mobile-sidebar-bg);
+      overflow: hidden;
+      z-index: 9;
+      transition: 0.25s ease-in-out;
+    }
+
+    nav .container .pages a {
+      justify-content: center;
+      font-size: var(--size-lg);
+      width: 100%;
+      text-align: center;
+    }
+
+    nav .container .pages li {
+      height: 10vh;
+    }
+
+    nav .container .pages li,
+    nav .container .pages a {
       width: 100%;
-      height: 100px;
-      margin-top: -20px;
-      background-color: var(--navbar-bg);
-      box-shadow: var(--navbar-shadow);
-      z-index: -1;
-      -webkit-backdrop-filter: blur(10px);
-      backdrop-filter: blur(10px);
     }
 
-    .backdrop {
+    nav .toggle-container .dark-toggle {
       position: absolute;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      opacity: 0;
-      background-color: var(--perma-dark);
-      transition: opacity 0.25s ease-in;
-      pointer-events: none;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 56px;
+      z-index: 8;
     }
 
-    .container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 16px;
-      width: 1280px;
-
-      .logo-container {
-        .logo {
-          display: flex;
-          align-items: center;
-          text-decoration: none;
-          gap: 4px;
-
-          .badge {
-            height: 64px;
-            width: auto;
-            filter: drop-shadow(0 1.5px 4.5px rgba(44, 145, 198, 0.5));
-            z-index: -1;
-          }
-
-          h3 {
-            /* None of the CSS sizing tags are used here because the logo text scales to very specific px sizes */
-            font-size: clamp(1.25rem, 1.2039rem + 0.2632vw, 1.625rem);
-          }
-        }
-      }
-
-      section {
-        display: flex;
-        align-items: center;
-        gap: 64px;
-        height: 100%;
-
-        .pages,
-        li,
-        a {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          height: 100%;
-        }
-
-        .pages {
-          gap: 50px;
-          list-style: none;
-
-          a {
-            text-decoration: none;
-            transition: 0.25s ease-in-out;
-            padding: 8px 8px;
-
-            &:hover,
-            &[aria-current='true'] {
-              color: var(--acm-blue);
-            }
-          }
-        }
-
-        .hidden {
-          opacity: 0;
-        }
-
-        .toggle-container::not(.hidden) {
-          opacity: 1;
-        }
-
-        .toggle-container {
-          display: flex;
-          justify-content: flex-end;
-
-          .dark-toggle {
-            display: flex;
-            align-items: center;
-            max-width: fit-content;
-            padding: 6px 12px;
-            background-color: var(--perma-dark);
-            border-radius: 8px;
-            gap: 4px;
-
-            &:hover {
-              cursor: pointer;
-              background-color: #3d4043;
-            }
-          }
-        }
-      }
+    nav .menu {
+      display: block;
+      position: absolute;
+      padding: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 8px;
+      cursor: pointer;
     }
 
-    .toggle,
-    .menu {
-      display: none;
-      z-index: 10;
+    nav .menu:hover .menuLine {
+      background-color: var(--acm-blue);
     }
-  }
 
-  @media screen and (max-width: 900px) {
-    nav {
-      .container {
-        .logo-container .logo .badge {
-          height: 64px;
-        }
-
-        .pages {
-          position: fixed;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          top: 0;
-          right: 0;
-          width: 0;
-          background-color: var(--acm-light);
-          overflow: hidden;
-          z-index: 9;
-          transition: 0.25s ease-in-out;
-
-          a {
-            justify-content: center;
-            font-size: var(--size-lg);
-            width: 100%;
-            text-align: center;
-          }
-
-          li {
-            height: 10vh;
-          }
-
-          li,
-          a {
-            width: 100%;
-          }
-        }
-      }
-
-      .toggle-container .dark-toggle {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        right: 56px;
-        z-index: 8;
-      }
-
-      .menu {
-        display: block;
-        position: absolute;
-        padding: 8px;
-        top: 50%;
-        transform: translateY(-50%);
-        right: 8px;
-        cursor: pointer;
-
-        .menuLine {
-          width: 24px;
-          height: 2px;
-          margin: 6px 0;
-          background-color: var(--acm-dark);
-          transition: 0.25s ease-in-out;
-        }
-
-        &:hover {
-          .menuLine {
-            background-color: var(--acm-blue);
-          }
-        }
-      }
-
-      & :checked ~ .backdrop {
-        opacity: 0.7;
-        pointer-events: all;
-      }
-
-      & :checked ~ .container {
-        .pages {
-          width: 60%;
-          background-color: var(--acm-light);
-        }
-      }
-
-      & :checked ~ .menu {
-        .menuLine {
-          background-color: var(--acm-blue);
-          &:nth-child(1) {
-            transform: translateY(8px) rotate(45deg);
-          }
-          &:nth-child(2) {
-            opacity: 0;
-          }
-          &:nth-child(3) {
-            transform: translateY(-8px) rotate(-45deg);
-          }
-        }
-      }
+    nav .menu .menuLine {
+      width: 24px;
+      height: 2px;
+      margin: 6px 0;
+      background-color: var(--acm-dark);
+      transition: 0.25s ease-in-out;
+    }
+
+    nav :checked ~ .backdrop {
+      opacity: 0.7;
+      pointer-events: all;
+    }
+
+    nav :checked ~ .container .pages {
+      width: 60%;
+      pointer-events: all;
+    }
+
+    nav :checked ~ .menu .menuLine {
+      background-color: var(--acm-blue);
+    }
+
+    nav :checked ~ .menu .menuLine:nth-child(1) {
+      transform: translateY(8px) rotate(45deg);
+    }
+    nav :checked ~ .menu .menuLine:nth-child(2) {
+      opacity: 0;
+    }
+    nav :checked ~ .menu .menuLine:nth-child(3) {
+      transform: translateY(-8px) rotate(-45deg);
     }
   }
 </style>
diff --git a/static/global.css b/static/global.css
index b6557b418..1b756e41e 100644
--- a/static/global.css
+++ b/static/global.css
@@ -82,6 +82,7 @@
   --acm-odd: var(--perma-light);
   --acm-even: var(--acm-dew);
   --navbar-bg: var(--perma-light);
+  --navbar-mobile-sidebar-bg: var(--perma-light);
   --navbar-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.25);
   --footer-bg: var(--acm-ocean);
   --button-bg: var(--acm-midnight);
@@ -236,6 +237,7 @@ body:has(nav > input[type='checkbox']:checked) {
   --acm-odd: var(--acm-midnight);
   --acm-even: var(--acm-abyss);
   --navbar-bg: var(--acm-ocean);
+  --navbar-mobile-sidebar-bg: var(--acm-abyss);
   --navbar-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.6);
   --footer-bg: var(--acm-midnight);
   --button-bg: var(--acm-blue);
@@ -251,6 +253,7 @@ body:has(nav > input[type='checkbox']:checked) {
     --acm-odd: var(--perma-light);
     --acm-even: var(--acm-dew);
     --navbar-bg: var(--perma-light);
+    --navbar-mobile-sidebar-bg: var(--perma-light);
     --navbar-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.25);
     --footer-bg: var(--acm-ocean);
     --button-bg: var(--acm-midnight);
@@ -267,6 +270,7 @@ body:has(nav > input[type='checkbox']:checked) {
     --acm-odd: var(--acm-midnight);
     --acm-even: var(--acm-abyss);
     --navbar-bg: var(--acm-ocean);
+    --navbar-mobile-sidebar-bg: var(--acm-abyss);
     --navbar-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.6);
     --footer-bg: var(--acm-midnight);
     --button-bg: var(--acm-blue);