SCSS: Add missing navbar-links css to header

wikjoh · Oct 5, 2024 · afe6bc0 · afe6bc0
1 parent b7e01de
commit afe6bc0
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 57 deletions.
diff --git a/css/main.css b/css/main.css
@@ -641,6 +641,40 @@ header#nav {
   transition: 0.5s ease;
 }
 
+.navbar-links {
+  margin-left: 3rem;
+}
+.navbar-links ul {
+  list-style: none;
+}
+
+.main-navbar {
+  justify-content: space-between;
+  padding-top: var(--header-pt);
+  /* Hide in mobile */
+  /* Remove extra pixels on bottom of logo image */
+}
+.main-navbar #navbar-links, .main-navbar .btn-signin {
+  display: none;
+}
+.main-navbar .logo-img {
+  vertical-align: bottom;
+}
+.main-navbar .navbar-right {
+  position: relative;
+}
+.main-navbar .dm-text {
+  font-size: var(--fs-body-m);
+  font-weight: var(--fw-semi);
+  color: var(--color-gray-700);
+  margin-right: 1rem;
+  /* Hide on mobile */
+  display: none;
+}
+.main-navbar .btn-signin {
+  margin-left: 2rem;
+}
+
 /* When visually hidden checkbox is in focus, put outline on toggle switch */
 body:has(.darkmode-checkboxes:focus-visible) .dm-toggle-switch {
   outline-color: var(--color-primary);
@@ -679,33 +713,6 @@ header#nav:has(#burger-toggle:checked) .burger-nav.hide-aria {
   display: none;
 }
 
-.main-navbar {
-  justify-content: space-between;
-  padding-top: var(--header-pt);
-  /* Hide in mobile */
-  /* Remove extra pixels on bottom of logo image */
-}
-.main-navbar #navbar-links, .main-navbar .btn-signin {
-  display: none;
-}
-.main-navbar .logo-img {
-  vertical-align: bottom;
-}
-.main-navbar .navbar-right {
-  position: relative;
-}
-.main-navbar .dm-text {
-  font-size: var(--fs-body-m);
-  font-weight: var(--fw-semi);
-  color: var(--color-gray-700);
-  margin-right: 1rem;
-  /* Hide on mobile */
-  display: none;
-}
-.main-navbar .btn-signin {
-  margin-left: 2rem;
-}
-
 section#hero {
   /* Add padding to give room for navbar */
   padding-top: 4rem;

diff --git a/css/scss/sections/_header.scss b/css/scss/sections/_header.scss
@@ -15,35 +15,11 @@ header#nav {
   transition: .5s ease;
 }
 
-/* When visually hidden checkbox is in focus, put outline on toggle switch */
-body:has(.darkmode-checkboxes:focus-visible) .dm-toggle-switch {
-  outline-color: var(--color-primary);
-  outline-offset: .2em;
-  outline-width: .4em;
-  outline-style: solid;
-}
-
-/* Apply outline to burgermenubtn when checkbox is focused */
-header#nav:has(#burger-toggle:focus-visible) .btn-burger {
-  outline-color: var(--color-primary);
-  outline-offset: .2em;
-  outline-width: .4em;
-  outline-style: solid;
-}
-
-header#nav:has(#burger-toggle:checked) {
-  backdrop-filter: blur(20px);
-  background-color: var(--color-bg);
-  .burger-menu-open {
-    display: none;
-  }
-  .burger-menu-close {display: block;}
-  .burger-menu {
-    grid-template-rows: 1fr;
-    box-shadow: 0 25px 15px var(--color-bg);
+.navbar-links {
+  margin-left: 3rem;
+  ul {
+    list-style: none;
   }
-  .burger-nav.reveal-aria {display: block;}
-  .burger-nav.hide-aria {display: none;}
 }
 
 .main-navbar {
@@ -54,7 +30,7 @@ header#nav:has(#burger-toggle:checked) {
   #navbar-links, .btn-signin {
     display: none;
   }
-
+  
   /* Remove extra pixels on bottom of logo image */
   .logo-img {
     vertical-align: bottom;
@@ -72,8 +48,39 @@ header#nav:has(#burger-toggle:checked) {
     /* Hide on mobile */
     display: none;
   }
-
+  
   .btn-signin {
     margin-left: 2rem;
   }
+}
+
+/* When visually hidden checkbox is in focus, put outline on toggle switch */
+body:has(.darkmode-checkboxes:focus-visible) .dm-toggle-switch {
+  outline-color: var(--color-primary);
+  outline-offset: .2em;
+  outline-width: .4em;
+  outline-style: solid;
+}
+
+/* Apply outline to burgermenubtn when checkbox is focused */
+header#nav:has(#burger-toggle:focus-visible) .btn-burger {
+  outline-color: var(--color-primary);
+  outline-offset: .2em;
+  outline-width: .4em;
+  outline-style: solid;
+}
+
+header#nav:has(#burger-toggle:checked) {
+  backdrop-filter: blur(20px);
+  background-color: var(--color-bg);
+  .burger-menu-open {
+    display: none;
+  }
+  .burger-menu-close {display: block;}
+  .burger-menu {
+    grid-template-rows: 1fr;
+    box-shadow: 0 25px 15px var(--color-bg);
+  }
+  .burger-nav.reveal-aria {display: block;}
+  .burger-nav.hide-aria {display: none;}
 }