Merge pull request #105 from pbrucla/r2dev2/mobile-view

Mobile Responsiveness
pbrucla · Jul 8, 2024 · cfaa53f · cfaa53f
2 parents 0b922cb + 2e89814
commit cfaa53f
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 3 deletions.
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,4 +1,4 @@
-<nav>
+<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) -%}
@@ -20,4 +20,41 @@
             </li>
         {%- endfor -%}
     </ul>
+
 </nav>
+
+<div class="nav-toggle hamburger-container">
+    <div class="hamburger-button"></div>
+</div>
+
+
+<script>
+    const responsiveNavThreshold = 500;
+    const navOpener = document.querySelector('.nav-toggle');
+    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;
+
+    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
@@ -7,14 +7,17 @@ html,
 body {
   margin: 0;
   padding: 0;
-  background-color: #2c2c2c;
+  background-color: var(--cyber-dark-grey);
   color: #ffffff;
 
   --min-nav-inner-width: 8ch;
   --nav-width: calc(max(var(--min-nav-inner-width), 10%) + 2rem);
   --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;
+  --arcimation: 400ms cubic-bezier(.23,1,.32,1);
 }
 
 body, p, code {

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
@@ -1,9 +1,17 @@
+// 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) {
+    padding-top: 1rem;
+}
+
 .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
@@ -1,3 +1,76 @@
+// when it is opened, a sliding effect will be created
+nav:not(.open) {
+    transform: translateX(-100%);
+}
+
+.nav-toggle:not(.enabled) {
+    display: none;
+}
+
+.nav-toggle {
+    position: fixed;
+    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
+    // 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 */
+/* heehee i stole this hamburger code from andrew @ acmcyber.com ~ ronak */
+
+.hamburger-button {
+  &,
+  &::before,
+  &::after {
+    display: block;
+    position: absolute;
+    height: 4px;
+    width: 30px;
+    background-color: white;
+    border-radius: 2px;
+    transition: transform var(--arcimation);
+  }
+
+  &::before {
+    content: "";
+    margin-top: -8px;
+  }
+
+  &::after {
+    content: "";
+    margin-top: 8px;
+  }
+}
+
+body:has(nav.open) {
+  .hamburger-button::before {
+    margin-top: 0px;
+    transform: rotate(405deg);
+  }
+
+  .hamburger-button {
+    background: transparent;
+  }
+
+  .hamburger-button::after {
+    margin-top: 0px;
+    transform: rotate(-405deg);
+  }
+}
+
 nav {
     --nav-inner-width: 8ch;
 
@@ -9,6 +82,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;