From 8ce66202d1750b4874f91b4b4e4931487d942b21 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sat, 6 Sep 2025 03:32:35 +0000
Subject: [PATCH] Update web/templates/base.html

---
 web/templates/base.html | 90 +++++++++++------------------------------
 1 file changed, 24 insertions(+), 66 deletions(-)

diff --git a/web/templates/base.html b/web/templates/base.html
index c93122e..b79215f 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -28,18 +28,13 @@
   <!-- === PWA additions (BEGIN) === -->
   <link rel="manifest" href="/manifest.webmanifest">
   <meta name="theme-color" content="#f3f6f7">
-  <!--<meta name="theme-color" content="#2f6cab"> -->
-  <!-- iOS standalone when added to Home Screen -->
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="default">
-  <!-- iOS app icons -->
   <link rel="apple-touch-icon" sizes="180x180" href="{% static 'pwa/apple-touch-icon-180x180.png' %}">
   <link rel="apple-touch-icon" sizes="167x167" href="{% static 'pwa/apple-touch-icon-167x167.png' %}">
   <link rel="apple-touch-icon" sizes="152x152" href="{% static 'pwa/apple-touch-icon-152x152.png' %}">
   <link rel="apple-touch-icon" sizes="120x120" href="{% static 'pwa/apple-touch-icon-120x120.png' %}">
-  <!-- Optional fallback some iOS versions fetch if sizes are missing -->
   <link rel="apple-touch-icon" href="{% static 'pwa/apple-touch-icon-180x180.png' %}">
-  <!-- Optional: control the name under the icon -->
   <meta name="apple-mobile-web-app-title" content="Illustrations">
   <!-- === PWA additions (END) === -->
 
@@ -56,11 +51,7 @@
       top: 0;
       z-index: 1000;
     }
-
-    .topbar-wrap.is-scrolled {
-      box-shadow: 0 4px 16px rgba(0,0,0,.08);
-      border-bottom-color: transparent;
-    }
+    .topbar-wrap.is-scrolled { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-bottom-color: transparent; }
     .topbar{max-width:1100px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:14px; justify-content:space-between; font-size:17px;}
     .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--nav-ink); font-weight:600; letter-spacing:.2px;}
     .brand .tagline{color:var(--nav-ink-muted); font-weight:500; font-size:15px}
@@ -88,38 +79,15 @@
 
     @media (max-width:700px){
       .desktop-nav { display:none; }
-
       .hamburger{
-        display:inline-flex;
-        width:38px; height:34px;
-        align-items:center; justify-content:center;
-        border:1px solid var(--nav-border);
-        border-radius:10px;
-        background:var(--btn-bg);
-        cursor:pointer;
-        flex-direction: column;
-        gap: 4px;
-      }
-      .hamburger span{
-        display:block;
-        width:20px; height:2px;
-        margin:0;
-        background:var(--nav-ink);
-        border-radius:2px;
-      }
-
-      .mobile-menu{
-        position:absolute; top:56px; right:16px; left:16px; z-index:50;
-      }
-      .mobile-menu-inner{
-        background:#fff; border:1px solid var(--nav-border);
-        border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.08);
-        padding:8px; display:grid; gap:2px;
-      }
-      .mobile-link{
-        display:block; padding:12px 14px; border-radius:10px;
-        text-decoration:none; color:var(--nav-ink);
+        display:inline-flex; width:38px; height:34px; align-items:center; justify-content:center;
+        border:1px solid var(--nav-border); border-radius:10px; background:var(--btn-bg); cursor:pointer;
+        flex-direction: column; gap: 4px;
       }
+      .hamburger span{ display:block; width:20px; height:2px; margin:0; background:var(--nav-ink); border-radius:2px; }
+      .mobile-menu{ position:absolute; top:56px; right:16px; left:16px; z-index:50; }
+      .mobile-menu-inner{ background:#fff; border:1px solid var(--nav-border); border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.08); padding:8px; display:grid; gap:2px; }
+      .mobile-link{ display:block; padding:12px 14px; border-radius:10px; text-decoration:none; color:var(--nav-ink); }
       .mobile-link:hover{ background:var(--btn-hover); }
       .mobile-link.primary{ background:var(--nav-brand); color:#fff; }
       .mobile-link.danger{ color:#b91c1c; }
@@ -129,7 +97,6 @@
     /* --- user menu (desktop dropdown) --- */
     .user-chip{ cursor:pointer; text-decoration:none; }
     .user-chip:hover{ background:var(--btn-hover); }
-
     .user-dropdown{ position:relative; }
     .user-menu{
       position:absolute; right:0; top:calc(100% + 8px);
@@ -138,21 +105,20 @@
       min-width: 160px; padding:6px; display:grid; gap:4px; z-index:60;
     }
     .user-menu[hidden]{ display:none !important; }
-
     .user-menu .menu-item{
-      display:block; width:100%; text-align:left;
-      padding:10px 12px; border-radius:10px;
-      text-decoration:none; color:var(--nav-ink);
-      background:transparent; border:none; cursor:pointer;
-      font-size:16px;            /* ensure uniform size */
-      font-family:inherit;
+      display:block; width:100%; text-align:left; padding:10px 12px; border-radius:10px;
+      text-decoration:none; color:var(--nav-ink); background:transparent; border:none; cursor:pointer;
+      font-size:16px; font-family:inherit;
     }
     .user-menu .menu-item:hover{ background:var(--btn-hover); }
     .user-menu .danger-btn{ color:#b91c1c; }
   </style>
 </head>
 
-<body class="{% block body_class %}{% endblock %}">
+{# Auto-apply 'themed-bg' for Classic so your original gradient shows everywhere (passthrough) #}
+{% with current_theme=request.session.theme|default:'classic' %}
+<body class="{% block body_class %}{% endblock %}{% if current_theme == 'classic' %} themed-bg{% endif %}">
+{% endwith %}
   <div class="topbar-wrap">
     <div class="topbar">
       <div class="brand">
@@ -172,15 +138,10 @@
               {{ user.username }}
             </button>
             <div id="userMenu" class="user-menu" hidden>
-              {% if user.is_superuser %}
-                <a class="menu-item" href="/admin/">Admin</a>
-              {% endif %}
-              {% if user.is_staff %}
-                <a class="menu-item" href="{% url 'export_csv' %}">Backup</a>
-              {% endif %}
+              {% if user.is_superuser %}<a class="menu-item" href="/admin/">Admin</a>{% endif %}
+              {% if user.is_staff %}<a class="menu-item" href="{% url 'export_csv' %}">Backup</a>{% endif %}
               <a class="menu-item" href="{% url 'settings_home' %}">Settings</a>
-              <form method="post" action="{% url 'logout' %}">
-                {% csrf_token %}
+              <form method="post" action="{% url 'logout' %}">{% csrf_token %}
                 <button class="menu-item danger-btn" type="submit">Logout</button>
               </form>
             </div>
@@ -245,7 +206,6 @@
       if (btn && menu) {
         const open = () => { menu.hidden = false; btn.setAttribute('aria-expanded','true'); };
         const close = () => { menu.hidden = true; btn.setAttribute('aria-expanded','false'); };
-
         btn.addEventListener('click', () => (menu.hidden ? open() : close()));
         document.addEventListener('click', (e) => {
           if (menu.hidden) return;
@@ -279,19 +239,17 @@
     })();
   </script>
   <script>
-  // Sticky header: add shadow when page is scrolled
+    // Sticky header: add shadow when page is scrolled
     (function () {
       const bar = document.querySelector('.topbar-wrap');
       if (!bar) return;
-
-     const onScroll = () => {
-       const y = window.scrollY || document.documentElement.scrollTop || 0;
-      bar.classList.toggle('is-scrolled', y > 2);
+      const onScroll = () => {
+        const y = window.scrollY || document.documentElement.scrollTop || 0;
+        bar.classList.toggle('is-scrolled', y > 2);
       };
-
       document.addEventListener('scroll', onScroll, { passive: true });
-     onScroll(); // initialize
-   })();
+      onScroll(); // initialize
+    })();
   </script>
   <!-- === PWA service worker registration (BEGIN) === -->
   <script>