From b919c9eedc87abcba3df1ad69ea2ad6123b3defb Mon Sep 17 00:00:00 2001
From: r2dev2 <ronak.badhe@gmail.com>
Date: Mon, 24 Jun 2024 15:21:02 -0700
Subject: [PATCH 1/5] have a nav button

---
 _includes/nav.html        | 16 ++++++++-
 assets/styles/global.scss |  4 ++-
 assets/styles/main.scss   |  9 ++++-
 assets/styles/nav.scss    | 69 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 95 insertions(+), 3 deletions(-)

diff --git a/_includes/nav.html b/_includes/nav.html
index 40ceb3d..d46494c 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,4 +1,9 @@
-<nav>
+<div class="nav-toggle hamburger-container enabled">
+    <input type="checkbox" class="hamburger-toggle" checked>
+    <div class="hamburger-button"></div>
+</div>
+
+<nav class="ope">
     <div class="hex" role="img" aria-label="Navigation bar background graphic, styled like the address panel of a hex editor.">
         <ol>
             {%- for i in (0..256) -%}
@@ -20,4 +25,13 @@
             </li>
         {%- endfor -%}
     </ul>
+</div>
+
 </nav>
+
+<script>
+    const navOpener = document.querySelector('.nav-toggle');
+    const navClasses = document.querySelector('nav').classList;
+
+    navOpener.addEventListener('click', () => navClasses.contains('open') ? navClasses.add('open') : navClasses.remove('open'));
+</script>
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index fba56e4..e43ef8e 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -7,7 +7,7 @@ html,
 body {
   margin: 0;
   padding: 0;
-  background-color: #2c2c2c;
+  background-color: var(--cyber-dark-grey);
   color: #ffffff;
   
   --min-nav-inner-width: 8ch;
@@ -15,6 +15,8 @@ body {
   --nav-footer-font-size: max(2.1vw, calc(0.21 * var(--min-nav-inner-width)));
   --nav-footer-line-height-multiplier: 1.32;
   --nav-footer-line-height: calc(var(--nav-footer-line-height-multiplier) * var(--nav-footer-font-size));
+  --cyber-yellow: #FFBD3F;
+  --cyber-dark-grey: #2c2c2c;
 }
 
 body, p, code {
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 106f535..657530a 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -1,9 +1,16 @@
+body:has(nav.open) .content {
+    margin-left: var(--nav-width);
+}
+
+body:has(.nav-toggle.enabled) {
+    margin-top: 0.125rem;
+}
+
 .content {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 100vh;
-    margin-left: var(--nav-width);
 
     main {
         padding: 2rem 7%;
diff --git a/assets/styles/nav.scss b/assets/styles/nav.scss
index 8269337..bbe80bb 100644
--- a/assets/styles/nav.scss
+++ b/assets/styles/nav.scss
@@ -1,3 +1,72 @@
+nav:not(.open) > * {
+    display: none;
+}
+
+nav:not(.open) {
+    padding: 0;
+}
+
+body:has(nav.open) .nav-toggle {
+    display: none;
+}
+
+.nav-toggle {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    padding: 1.25rem 0.5rem;
+    background: var(--cyber-dark-grey);
+}
+
+/* yes this hamburger code is stolen directly from myself @ lactf ~ andrew */
+/* heehee i stole this hamburger code from andrew @ acmcyber.com ~ ronak */
+
+.hamburger-toggle {
+  display: none;
+}
+
+.hamburger-button {
+  &,
+  &::before,
+  &::after {
+    display: block;
+    position: absolute;
+    height: 4px;
+    width: 30px;
+    background-color: white;
+    border-radius: 2px;
+    transition: transform ease-out;
+  }
+
+  &::before {
+    content: "";
+    margin-top: -8px;
+  }
+
+  &::after {
+    content: "";
+    margin-top: 8px;
+  }
+}
+
+.hamburger-toggle:checked {
+  & ~ .hamburger-container .hamburger-button::before {
+    margin-top: 0px;
+    transform: rotate(405deg);
+  }
+
+  & ~ .hamburger-container .hamburger-button {
+    background: transparent;
+  }
+
+  & ~ .hamburger-container .hamburger-button::after {
+    margin-top: 0px;
+    transform: rotate(-405deg);
+  }
+}
+
 nav {
     --nav-inner-width: 8ch;
 

From 1afaaa53c858878a31dc67937769554a60046425 Mon Sep 17 00:00:00 2001
From: r2dev2 <ronak.badhe@gmail.com>
Date: Mon, 24 Jun 2024 16:01:06 -0700
Subject: [PATCH 2/5] hamburger mobile responsiveness works

---
 _includes/nav.html        | 41 +++++++++++++++++++++++++++++---------
 assets/styles/global.scss |  1 +
 assets/styles/main.scss   |  3 ++-
 assets/styles/nav.scss    | 42 +++++++++++++++++++--------------------
 4 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/_includes/nav.html b/_includes/nav.html
index d46494c..74f6da4 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,9 +1,4 @@
-<div class="nav-toggle hamburger-container enabled">
-    <input type="checkbox" class="hamburger-toggle" checked>
-    <div class="hamburger-button"></div>
-</div>
-
-<nav class="ope">
+<nav class="open">
     <div class="hex" role="img" aria-label="Navigation bar background graphic, styled like the address panel of a hex editor.">
         <ol>
             {%- for i in (0..256) -%}
@@ -25,13 +20,41 @@
             </li>
         {%- endfor -%}
     </ul>
-</div>
 
 </nav>
 
+<div class="nav-toggle hamburger-container">
+    <div class="hamburger-button"></div>
+</div>
+
+
 <script>
+    const responsiveNavThreshold = 500;
     const navOpener = document.querySelector('.nav-toggle');
-    const navClasses = document.querySelector('nav').classList;
+    const nav = document.querySelector('nav');
+
+    const toggle = (cl, attr) => cl.contains(attr) ? cl.remove(attr) : cl.add(attr);
+
+    navOpener.addEventListener('click', () => {
+        toggle(nav.classList, 'open');
+    });
+
+    let enabled = false;
 
-    navOpener.addEventListener('click', () => navClasses.contains('open') ? navClasses.add('open') : navClasses.remove('open'));
+    const setResponsive = () => {
+        if (window.innerWidth < responsiveNavThreshold) {
+            if (enabled) return;
+            enabled = true;
+            nav.classList.remove('open');
+            navOpener.classList.add('enabled');
+        }
+        else {
+            if (!enabled) return;
+            enabled = false;
+            nav.classList.add('open');
+            navOpener.classList.remove('enabled');
+        }
+    };
+    setResponsive();
+    window.addEventListener('resize', setResponsive);
 </script>
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index e43ef8e..b72c702 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -17,6 +17,7 @@ body {
   --nav-footer-line-height: calc(var(--nav-footer-line-height-multiplier) * var(--nav-footer-font-size));
   --cyber-yellow: #FFBD3F;
   --cyber-dark-grey: #2c2c2c;
+  --arcimation: 400ms cubic-bezier(.23,1,.32,1);
 }
 
 body, p, code {
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 657530a..12b5c8a 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -1,9 +1,10 @@
+// set a margin-left on content when navbar is open
 body:has(nav.open) .content {
     margin-left: var(--nav-width);
 }
 
 body:has(.nav-toggle.enabled) {
-    margin-top: 0.125rem;
+    margin-top: 1rem;
 }
 
 .content {
diff --git a/assets/styles/nav.scss b/assets/styles/nav.scss
index bbe80bb..092fb33 100644
--- a/assets/styles/nav.scss
+++ b/assets/styles/nav.scss
@@ -1,32 +1,31 @@
-nav:not(.open) > * {
-    display: none;
-}
-
+// when it is opened, a sliding effect will be created
 nav:not(.open) {
-    padding: 0;
+    transform: translateX(-100%);
 }
 
-body:has(nav.open) .nav-toggle {
+.nav-toggle:not(.enabled) {
     display: none;
 }
 
 .nav-toggle {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 4px;
-    padding: 1.25rem 0.5rem;
-    background: var(--cyber-dark-grey);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    top: 0.25rem;
+    left: 0.25rem;
+    width: 2rem;
+    height: 2rem;
+    padding: 0.5rem;
+    font-size: 2rem;
+    // below means 90% cyber-yellow, 10% black
+    background: color-mix(in srgb, var(--cyber-yellow) 90%, black);
 }
 
 /* yes this hamburger code is stolen directly from myself @ lactf ~ andrew */
 /* heehee i stole this hamburger code from andrew @ acmcyber.com ~ ronak */
 
-.hamburger-toggle {
-  display: none;
-}
-
 .hamburger-button {
   &,
   &::before,
@@ -37,7 +36,7 @@ body:has(nav.open) .nav-toggle {
     width: 30px;
     background-color: white;
     border-radius: 2px;
-    transition: transform ease-out;
+    transition: transform var(--arcimation);
   }
 
   &::before {
@@ -51,17 +50,17 @@ body:has(nav.open) .nav-toggle {
   }
 }
 
-.hamburger-toggle:checked {
-  & ~ .hamburger-container .hamburger-button::before {
+body:has(nav.open) {
+  .hamburger-button::before {
     margin-top: 0px;
     transform: rotate(405deg);
   }
 
-  & ~ .hamburger-container .hamburger-button {
+  .hamburger-button {
     background: transparent;
   }
 
-  & ~ .hamburger-container .hamburger-button::after {
+  .hamburger-button::after {
     margin-top: 0px;
     transform: rotate(-405deg);
   }
@@ -78,6 +77,7 @@ nav {
     padding: 1rem 0rem 0rem 1.75ch;
     -webkit-padding-start: 0.4rem;
     width: calc(var(--nav-width) - 2rem);
+    transition: var(--arcimation);
 
     div.hex {
         position: absolute;

From ef2e7e772e9f3db375e85677fc4c88df39c00b1a Mon Sep 17 00:00:00 2001
From: Ronak Badhe <50760816+r2dev2@users.noreply.github.com>
Date: Sun, 7 Jul 2024 22:36:21 -0700
Subject: [PATCH 3/5] Lowercase the hex

---
 assets/styles/global.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index b72c702..6264af7 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -15,7 +15,7 @@ body {
   --nav-footer-font-size: max(2.1vw, calc(0.21 * var(--min-nav-inner-width)));
   --nav-footer-line-height-multiplier: 1.32;
   --nav-footer-line-height: calc(var(--nav-footer-line-height-multiplier) * var(--nav-footer-font-size));
-  --cyber-yellow: #FFBD3F;
+  --cyber-yellow: #ffbd3f;
   --cyber-dark-grey: #2c2c2c;
   --arcimation: 400ms cubic-bezier(.23,1,.32,1);
 }

From a49f992f74aefdeebe41cdcbaa83b3bb27b23e81 Mon Sep 17 00:00:00 2001
From: r2dev2 <ronak.badhe@gmail.com>
Date: Sun, 7 Jul 2024 22:56:48 -0700
Subject: [PATCH 4/5] remove yellow bg on hamburger + cursor-pointer

---
 assets/styles/nav.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/assets/styles/nav.scss b/assets/styles/nav.scss
index 092fb33..6925e18 100644
--- a/assets/styles/nav.scss
+++ b/assets/styles/nav.scss
@@ -20,7 +20,12 @@ nav:not(.open) {
     padding: 0.5rem;
     font-size: 2rem;
     // below means 90% cyber-yellow, 10% black
-    background: color-mix(in srgb, var(--cyber-yellow) 90%, black);
+    // commenting out below as hamburger button looks better without a button
+    // background: color-mix(in srgb, var(--cyber-yellow) 90%, black);
+}
+
+.nav-toggle:hover {
+    cursor: pointer;
 }
 
 /* yes this hamburger code is stolen directly from myself @ lactf ~ andrew */

From 2e898143690371d03a9ce48e9e63106b36d12061 Mon Sep 17 00:00:00 2001
From: Arc-blroth <45273859+Arc-blroth@users.noreply.github.com>
Date: Sun, 7 Jul 2024 23:00:28 -0700
Subject: [PATCH 5/5] padding -> margin for body top

---
 assets/styles/main.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 12b5c8a..056939f 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -4,7 +4,7 @@ body:has(nav.open) .content {
 }
 
 body:has(.nav-toggle.enabled) {
-    margin-top: 1rem;
+    padding-top: 1rem;
 }
 
 .content {