Add info text to menu button (visually hidden). Clean up redundant cs…

…s vars
chrisnajman · Jan 8, 2024 · 97637b9 · 97637b9
1 parent 5564b2e
commit 97637b9
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 34 deletions.
diff --git a/css/base.css b/css/base.css
@@ -16,15 +16,6 @@ html {
     }
 }
 
-:root {
-    --font-sans: system-ui, sans-serif;
-    --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
-    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
-    --horz-center: 0 auto;
-    --flex: flex;
-    --grid: grid;
-}
-
 ul:empty,
 p:empty {
     display: none;
@@ -104,7 +95,7 @@ button {
 .page-layout {
     min-height: 100vh;
     min-height: 100dvh;
-    display: var(--grid);
+    display: grid;
     grid-template-rows: auto 1fr auto;
 }
 
@@ -132,15 +123,15 @@ button {
         text-wrap: balance;
         padding-inline: 1rem;
         max-width: 60ch;
-        margin: var(--horz-center);
+        margin: 0 auto;
     }
 }
 
 .main {
     max-width: 80rem;
-    margin: var(--horz-center);
+    margin: 0 auto;
     padding: 5rem 2rem;
-    display: var(--flex);
+    display: flex;
     flex-direction: column;
 
     & h2 {
@@ -188,14 +179,14 @@ button {
     fill: var(--header-footer-txt);
     width: 3.6rem;
     height: 3.6rem;
-    margin: var(--horz-center);
+    margin: 0 auto;
 }
 
 .article {
     max-width: 100rem;
-    margin: var(--horz-center);
+    margin: 0 auto;
     padding: 3rem 0 8rem;
-    display: var(--flex);
+    display: flex;
     flex-direction: column;
     gap: 3rem;
 
@@ -210,7 +201,7 @@ button {
     }
 
     & section {
-        display: var(--flex);
+        display: flex;
         flex-direction: column;
         gap: 2.5rem;
     }

diff --git a/css/primary-navigation.css b/css/primary-navigation.css
@@ -12,13 +12,13 @@
 
     & nav {
         width: fit-content;
-        margin: var(--horz-center);
+        margin: 0 auto;
 
         @media screen and (width <= 768px) {
             &.menu-hidden,
             &.menu-visible {
                 margin: 0 auto 0 2rem;
-                display: var(--grid);
+                display: grid;
                 grid-template-rows: 0fr;
                 transition: grid-template-rows var(--animation-timing) ease-in;
 
@@ -37,30 +37,29 @@
     & ul {
         list-style: none;
         padding-left: 0;
-        display: var(--flex);
+        display: flex;
         gap: 2rem;
         align-items: baseline;
 
         @media screen and (width <= 768px) {
             flex-direction: column;
+            gap: 1rem;
         }
     }
     & span {
-        /* text-decoration: none; */
         color: var(--nav-link);
         border-bottom: 5px solid transparent;
         padding-block-end: 0.5rem;
         margin-bottom: 1rem;
         display: block;
-        cursor: pointer;
+        cursor: default;
 
         &:hover {
             border-bottom-color: var(--nav-link);
         }
 
         &.active,
         &.active:hover {
-            /* text-decoration: none; */
             pointer-events: none;
             border-bottom-color: var(--nav-link);
             font-weight: 600;
@@ -80,10 +79,10 @@
 @media screen and (width <= 768px) {
     .hamburger-button-wrapper {
         width: fit-content;
-        display: var(--flex);
+        display: flex;
         gap: 1rem;
         align-items: center;
-        margin: var(--horz-center);
+        margin: 0 auto;
         position: absolute;
         top: -1.2rem;
         right: 2rem;

diff --git a/css/theme-switcher.css b/css/theme-switcher.css
@@ -14,7 +14,7 @@
 }
 
 .btn-theme-toggle {
-    display: var(--flex);
+    display: flex;
     align-items: center;
     padding: 0.5rem 0.5rem 0.75rem 0;
     border-bottom: 5px solid var(--clr-green);

diff --git a/css/theme.css b/css/theme.css
@@ -1,4 +1,8 @@
 :root {
+    --font-sans: system-ui, sans-serif;
+    --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
+    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+
     --clr-light-blue: rgb(135, 206, 235);
     --clr-blue: rgb(0, 117, 255);
     --clr-lightest: white;

diff --git a/index.html b/index.html
@@ -40,6 +40,7 @@ <h1>Accessible Mobile Menu</h1>
                     <h2>Menu</h2>
                     <button class="hamburger-button" id="hamburger-button" aria-controls="site-navigation"
                         aria-expanded="false">
+                        <span id="btn-txt" class="visually-hidden">Expand menu</span>
                         <svg class="lines" viewBox="0 0 100 100">
                             <rect class="line top" y="28" x="10" rx="5"></rect>
                             <rect class="line middle" y="47" x="10" rx="5"></rect>

diff --git a/js/hamburger-button.js b/js/hamburger-button.js
@@ -1,13 +1,18 @@
 export default function btnHamburger() {
   const hamburgerButton = document.getElementById("hamburger-button")
+  const btnTxt = document.getElementById("btn-txt")
   const primaryNavigation = document.getElementById("primary-navigation")
   const siteNavigation = document.getElementById("site-navigation")
 
-  hamburgerButton.addEventListener("click", () => {
+  hamburgerButton.addEventListener("click", (e) => {
     const isExpanded = hamburgerButton.getAttribute("aria-expanded")
-    isExpanded === "false"
-      ? hamburgerButton.setAttribute("aria-expanded", "true")
-      : hamburgerButton.setAttribute("aria-expanded", "false")
+    if (isExpanded === "false") {
+      hamburgerButton.setAttribute("aria-expanded", "true")
+      btnTxt.textContent = "Close menu"
+    } else {
+      hamburgerButton.setAttribute("aria-expanded", "false")
+      btnTxt.textContent = "Expand menu"
+    }
     siteNavigation.classList.toggle("menu-hidden")
     siteNavigation.classList.toggle("menu-visible")
     primaryNavigation.classList.toggle("padding")

diff --git a/ref/question.txt b/ref/question.txt
@@ -81,7 +81,7 @@ Base the readme on the following HTML, CSS and JavaScript:
 
     & nav {
         width: fit-content;
-        margin: var(--horz-center);
+        margin: 0 auto;
         @media screen and (width <= 768px) {
             flex-direction: column;
             margin: 0 auto 0 2rem;
@@ -91,7 +91,7 @@ Base the readme on the following HTML, CSS and JavaScript:
     & ul {
         list-style: none;
         padding-left: 0;
-        display: var(--flex);
+        display: flex;
         gap: 2rem;
         align-items: baseline;
 
@@ -132,10 +132,10 @@ Base the readme on the following HTML, CSS and JavaScript:
 @media screen and (width <= 768px) {
     .hamburger-button-wrapper {
         width: fit-content;
-        display: var(--flex);
+        display: flex;
         gap: 1rem;
         align-items: center;
-        margin: var(--horz-center);
+        margin: 0 auto;
         position: absolute;
         top: -1.2rem;
         right: 2rem;