Prevent admin nav wrapping to match public header height

public/assets/css/admin.css

@@ -11,6 +11,23 @@
     min-height: 100vh;
 }
 
+/* Keep admin header single-row like public header */
+.admin-body header nav {
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: thin;
+}
+.admin-body header nav > a,
+.admin-body header nav ul {
+    flex-shrink: 0;
+}
+.admin-body header nav,
+.admin-body header nav ul,
+.admin-body header nav li {
+    list-style: none;
+    flex-wrap: nowrap;
+}
+
 .admin-body header nav ul [data-nav-logout] a {
     opacity: 0.6;
 }

public/assets/css/common.css

@@ -75,12 +75,10 @@ body > header {
   flex-shrink: 0;
   background: linear-gradient(
     180deg,
-    var(--gradient-start) 0%,
-    var(--gradient-2) 20%,
-    var(--gradient-3) 40%,
-    var(--gradient-4) 60%,
-    var(--gradient-4) 88%,
-    var(--header-gradient-fade) 96%
+    var(--gradient-1) 0%,
+    var(--gradient-2) 33%,
+    var(--gradient-3) 66%,
+    var(--gradient-4) 100%
   );
 }
 
@@ -98,7 +96,9 @@ body > header nav {
   text-transform: uppercase;
   color: var(--accent-foreground);
   text-decoration: none;
-  text-shadow: 0 0 16px var(--header-shadow-strong), 0 0 32px var(--header-shadow-soft);
+  text-shadow:
+    0 0 16px var(--header-shadow-strong),
+    0 0 32px var(--header-shadow-soft);
 }
 
 .nav-left {
@@ -147,7 +147,9 @@ body > header nav ul a {
 /* Subtle shadow on all header text to improve legibility against the gradient */
 body > header nav > a,
 body > header nav ul a {
-  text-shadow: 0 0 16px var(--header-shadow-strong), 0 0 32px var(--header-shadow-soft);
+  text-shadow:
+    0 0 16px var(--header-shadow-strong),
+    0 0 32px var(--header-shadow-soft);
 }
 
 body > header nav ul a:hover {
@@ -165,6 +167,13 @@ body > header nav ul a[aria-current="page"] {
    ============================================================ */
 .header-search-wrap {
   padding: 0 0;
+  background-color: var(--gradient-4);
+
+  background: linear-gradient(
+    180deg,
+    var(--gradient-4) 0%,
+    #ffffffee 100%
+  );
 }
 
 .header-search-wrap form[role="search"] {
@@ -173,7 +182,7 @@ body > header nav ul a[aria-current="page"] {
   gap: var(--space-2xs);
   padding: var(--space-3xs) var(--space-s);
   border: 1px solid var(--accent-primary);
-  border-radius: 0;
+  border-radius: 10px;
   background: var(--bg-primary);
   width: 100%;
   color: var(--accent-primary);

public/assets/css/main.css

@@ -126,8 +126,8 @@
 .card__gradient-author {
   color: var(--accent-foreground);
   font-size: var(--step--2);
-  opacity: .85;
-  margin-bottom: .25rem;
+  opacity: 0.85;
+  margin-bottom: 0.25rem;
   display: block;
 }
 

public/assets/css/variables.css

@@ -76,7 +76,7 @@
   --accent-red: #f25a5a;
 
   /* Gradient (header) */
-  --gradient-start: #3c856c;
+  --gradient-1: #3c856c;
   --gradient-2: #60ecb4;
   --gradient-3: #e390ff;
   --gradient-4: #9557b5;
@@ -113,7 +113,7 @@
   --blue-muted-bg-hover: rgba(65, 173, 255, 0.22);
   --yellow-muted-bg: rgba(243, 156, 18, 0.12);
   --yellow-muted-border: rgba(243, 156, 18, 0.30);
-  --yellow-muted-bg-hover:rgba(243, 156,  18, 0.22);
+  --yellow-muted-bg-hover: rgba(243, 156, 18, 0.22);
   --green-muted-bg: rgba(76, 175, 80, 0.12);
   --green-muted-border: rgba(76, 175, 80, 0.30);
   --green-muted-bg-hover: rgba(76, 175, 80, 0.22);

templates/header.php

@@ -55,6 +55,8 @@ $_thesisId     = $_GET['id'] ?? null;
         </ul>
     </nav>
 
+    <?php endif; ?>
+
 </header>
 
 <?php if (!$_isAdmin): ?>