Add mobile menu todo and adjust spacing/theme variables for better layout

Author: ralyodio

HUMAN-TODO.md

@@ -1,5 +1,6 @@
 # todo
 
+- [ ] add mobile menu for PWA that shows hamburger menu. instead of topnav bar.
 - [ ] add terms and privacy and refund policy pages
 - [ ] make sure all payment pages reference USDC too, its missing on register page
 - [ ] use new cryptapi.io api endpoints

public/css/layout.css

@@ -8,7 +8,7 @@
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 var(--spacing-md);
+  padding: 0 var(--spacing-md-lg);
 }
 
 .container-sm {
@@ -314,7 +314,7 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  padding: 0 var(--spacing-md);
+  padding: 0 var(--spacing-md-lg);
 }
 
 #app {

public/css/theme.css

@@ -52,6 +52,7 @@
   --spacing-xs: 4px;               /* Extra small spacing */
   --spacing-sm: 8px;               /* Small spacing */
   --spacing-md: 16px;              /* Medium spacing */
+  --spacing-md-lg: 1.2rem;         /* Medium-large spacing (19.2px at default font size) */
   --spacing-lg: 24px;              /* Large spacing */
   --spacing-xl: 32px;              /* Extra large spacing */
   --spacing-xxl: 48px;             /* Double extra large spacing */

public/js/components/pf-header.js

@@ -41,10 +41,12 @@ class PfHeader extends HTMLElement {
           justify-content: center;
           cursor: pointer;
           transition: background-color 0.2s;
+          color: var(--text-primary, #111827); /* Add explicit color for default state */
         }
         
         .theme-toggle:hover {
-          background-color: #f0f0f0;
+          background-color: var(--surface-variant, #f3f4f6); /* Use theme-appropriate background */
+          color: var(--text-primary, #111827); /* Maintain text color on hover */
         }
         
         .theme-toggle svg {