From eee51de682e5f81657cbb0c1bb54e298384bb8be Mon Sep 17 00:00:00 2001
From: Alex <alex@pop-os.heliobroadband.com>
Date: Fri, 5 Jun 2026 11:10:00 -0700
Subject: [PATCH] mobile menu fixes

---
 assets/landing.js                         |  5 ++++
 assets/styles/landing.css                 | 36 ++++++++++++++++++-----
 assets/styles/scss/landing/_computer.scss | 36 ++++++++++++++++++-----
 3 files changed, 62 insertions(+), 15 deletions(-)

diff --git a/assets/landing.js b/assets/landing.js
index 349ac7f..ae1fb26 100644
--- a/assets/landing.js
+++ b/assets/landing.js
@@ -4,10 +4,15 @@ import './stimulus_bootstrap.js';
 const mobileMenu = () => {
     const icon = document.querySelector('.icon-menu');
     const menu = document.querySelector('.front-menu');
+    const header = document.querySelector('header');
+    const body = document.querySelector('body');
+
 
     icon.addEventListener('click', (event) => {
         icon.classList.toggle('open');
         menu.classList.toggle('open');
+        header.classList.toggle('open');
+        body.classList.toggle('menu-open');
     });
 }
 
diff --git a/assets/styles/landing.css b/assets/styles/landing.css
index f1aebbd..224ee81 100644
--- a/assets/styles/landing.css
+++ b/assets/styles/landing.css
@@ -59,7 +59,7 @@
   cursor: pointer;
 }
 .home header nav .icon.icon-menu.open {
-  right: calc(33.3333333333% + 1rem);
+  right: 200px;
 }
 .home header nav .front-menu {
   display: flex;
@@ -72,9 +72,10 @@
   margin: 0;
   padding: 0;
   transition: right 200ms ease;
+  background-color: #d7b94c;
 }
 .home header nav .front-menu.open {
-  right: 1rem;
+  right: 0;
 }
 @media screen and (min-width: 600px) {
   .home header nav .front-menu {
@@ -82,19 +83,29 @@
     position: relative;
     top: unset;
     right: unset;
+    background-color: unset;
   }
 }
 .home header nav .front-menu {
   list-style: none;
 }
+.home header nav .front-menu li {
+  display: block;
+  padding: 5px 10px;
+}
 .home header nav .front-menu li a {
   display: block;
   font-family: AtomicAge-Regular;
-  color: #d7b94c;
+  color: #FBFCFF;
   font-size: 1.5rem;
   text-decoration: none;
   padding-bottom: 2px;
 }
+@media (min-width: 600px) {
+  .home header nav .front-menu li a {
+    color: #d7b94c;
+  }
+}
 .home header nav .front-menu li a:hover {
   border-bottom: 2px solid #d7b94c;
   padding-bottom: 0;
@@ -119,9 +130,14 @@
   display: flex;
   min-height: 100vh;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
 }
+@media (min-width: 600px) {
+  .home #root.v1 .top {
+    align-items: center;
+  }
+}
 .home #root.v1 .top .computer {
   display: block;
   max-width: 800px;
@@ -132,10 +148,16 @@
   border: 2rem solid #a6a695;
   padding: 1rem 1rem;
   box-shadow: 0 0 5px 10px rgba(29, 31, 32, 0.45);
+  margin-top: 5rem;
+}
+@media (min-width: 600px) {
+  .home #root.v1 .top .computer {
+    margin-top: -2rem;
+  }
 }
 .home #root.v1 .top .computer .heading {
   margin: 0;
-  font-size: 1rem;
+  font-size: 0.85rem;
   font-family: Montserrat-Light;
   color: #d7b94c;
   position: relative;
@@ -178,7 +200,7 @@
   opacity: 0;
   animation: showText 0.1s forwards;
   animation-delay: 1s;
-  font-size: 1rem;
+  font-size: 0.95rem;
   color: #d7b94c;
 }
 @media screen and (min-width: 600px) {
@@ -221,7 +243,7 @@
   }
 }
 .home #root.v1 .top .computer #outro .menu a {
-  font-size: 1rem;
+  font-size: 0.95rem;
   color: #d7b94c;
   cursor: pointer;
 }
diff --git a/assets/styles/scss/landing/_computer.scss b/assets/styles/scss/landing/_computer.scss
index 3e1ea32..9d19106 100644
--- a/assets/styles/scss/landing/_computer.scss
+++ b/assets/styles/scss/landing/_computer.scss
@@ -66,7 +66,7 @@
           }
 
           &.open {
-            right: calc(1/3 * 100% + 1rem);
+            right: 200px;
           }
         }
       }
@@ -84,9 +84,11 @@
         padding: 0;
 
         transition: right 200ms ease;
+        background-color: colors.$primaryYellow;
+        
         
         &.open {
-          right: 1rem;
+          right: 0;
         }
 
         @media screen and (min-width: 600px) {
@@ -94,19 +96,28 @@
           position: relative;
           top: unset;
           right: unset;
+          background-color: unset;
+
         }
 
         list-style: none;
 
         li {
+          display: block;
+          padding: 5px 10px;
+
           a {
             display: block;
             font-family: AtomicAge-Regular;
-            color: colors.$primaryYellow;
+            color: colors.$primaryWhite;
             font-size: 1.5rem;
             text-decoration: none;
             padding-bottom: 2px;
 
+            @media (min-width: 600px) {
+              color: colors.$primaryYellow;
+            }
+
             &:hover {
               border-bottom: 2px solid colors.$primaryYellow;
               padding-bottom: 0;
@@ -140,9 +151,13 @@
         display: flex;
         min-height: 100vh;
         justify-content: center;
-        align-items: center;
+        align-items: flex-start;
         width: 100%;
 
+        @media (min-width: 600px) {
+          align-items: center;
+        }
+
         .computer {
           display: block;
           max-width: 800px;
@@ -152,12 +167,17 @@
           background-color: colors.$primaryBlack;
           border: 2rem solid colors.$computerBorder;
           padding: 1rem 1rem;
-
           box-shadow: 0 0 5px 10px rgba(29, 31, 32, 0.45);
+
+          margin-top: 5rem;
+
+          @media (min-width: 600px) {
+            margin-top: -2rem;
+          }
     
           .heading {
             margin: 0;
-            font-size: 1rem;
+            font-size: 0.85rem;
             font-family: Montserrat-Light;
             color: colors.$primaryYellow;
             position: relative;
@@ -206,7 +226,7 @@
               opacity: 0;
               animation: showText 0.1s forwards;
               animation-delay: 1s;
-              font-size: 1rem;
+              font-size: 0.95rem;
               color: colors.$primaryYellow;
 
               @media screen and (min-width: 600px) {
@@ -252,7 +272,7 @@
               }
       
               a {
-                font-size: 1rem;
+                font-size: 0.95rem;
                 color: colors.$primaryYellow;
                 cursor: pointer;