From fd94e2daa05bfcecdc444e5492ee8d4aa58b9875 Mon Sep 17 00:00:00 2001
From: admin <admin@git.optimex.systems>
Date: Sun, 14 Jun 2026 21:00:04 +0000
Subject: [PATCH] Center logo above title in header for desktop and mobile

---
 misc/header.html | 112 +++++++++++++++++++++++------------------------
 1 file changed, 54 insertions(+), 58 deletions(-)

diff --git a/misc/header.html b/misc/header.html
index d622d9f..65b9fa1 100644
--- a/misc/header.html
+++ b/misc/header.html
@@ -9,15 +9,29 @@
     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap" rel="stylesheet">
     
     <style>
-        .header-container {{
+        .header-wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 20px 20px 0;
+            box-sizing: border-box;
+        }
+
+        .logo-container {
             display: flex;
             align-items: center;
-            justify-content: space-between;
-            padding: 20px 40px;
-            box-sizing: border-box;
-        }}
+            justify-content: center;
+            margin-bottom: 10px;
+        }
 
-        .header-title {{
+        .logo {
+            width: 120px;
+            height: auto;
+            display: block;
+        }
+
+        .header-title {
             font-family: 'Cormorant Garamond', serif;
             font-size: 42px;
             font-weight: bold;
@@ -25,94 +39,76 @@
             margin: 0;
             position: relative;
             padding: 0.4em 0;
-            flex: 1;
-        }}
+            text-align: center;
+            max-width: 90%;
+        }
 
-        .header-title::before, .header-title::after {{
+        .header-title::before,
+        .header-title::after {
             content: "";
             position: absolute;
             height: 2px;
-            width: 100%;
+            width: 80%;
             background-color: {accent_color};
-            left: 0;
-        }}
+            left: 10%;
+        }
 
-        .header-title::before {{ top: 0.4em; }}
-        .header-title::after {{ bottom: 0.4em; }}
+        .header-title::before {
+            top: 0.4em;
+        }
 
-        .logo-container {{
-            display: inline-block;
-            max-width: 75px;
-            max-height: 75px;
-            margin-left: 20px;
-        }}
+        .header-title::after {
+            bottom: 0.4em;
+        }
 
-        .logo {{
-            max-width: 100%;
-            max-height: 100%;
-            height: auto;
-            display: block;
-        }}
-
-        .header-description {{
+        .header-description {
             text-align: center;
             padding: 10px 40px 20px;
             max-width: 800px;
             margin: 0 auto;
-        }}
+        }
 
         .header-description p,
-        .header-description h2 {{
+        .header-description h2 {
             font-size: 15px;
             margin: 8px 0;
             line-height: 1.5;
-        }}
+        }
 
-        .header-description h2 {{
+        .header-description h2 {
             font-weight: bold;
             color: {accent_color};
-        }}
+        }
 
-        @media (max-width: 768px) {{
-            .header-container {{
-                flex-direction: column;
-                align-items: center;
-                padding: 15px;
-                gap: 10px;
-            }}
-
-            .header-title {{
+        @media (max-width: 768px) {
+            .header-title {
                 font-size: 28px;
-                text-align: center;
-            }}
+            }
 
-            .header-title::before, .header-title::after {{
+            .header-title::before,
+            .header-title::after {
                 width: 80%;
                 left: 10%;
-            }}
+            }
 
-            .logo-container {{
-                margin-left: 0;
-            }}
+            .logo {
+                width: 110px;
+            }
 
-            .logo {{
-                height: 16px;
-            }}
-
-            .header-description {{
+            .header-description {
                 padding: 10px 20px 15px;
-            }}
-        }}
+            }
+        }
     </style>
 </head>
 <body>
-    <div class="header-container">
-        <h1 class="header-title">{webui_title}</h1>
+    <div class="header-wrapper">
         <div class="logo-container">
             <a href="{header_logo_url}">
                 <img src="{header_logo_src}" alt="{webui_title}" class="logo">
             </a>
         </div>
+        <h1 class="header-title">{webui_title}</h1>
     </div>
     <div class="header-description">
         <p>