Make header less funky for mobile users

QuiteAFancyEmerald · Jul 19, 2024 · 548ba50 · 548ba50
1 parent d67ed4f
commit 548ba50
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 9 deletions.
diff --git a/views/assets/css/styles-1644738239.css b/views/assets/css/styles-1644738239.css
@@ -281,6 +281,7 @@ details[open] summary {
 #header {
   background-color: var(--nord0m1);
   display: flex;
+  flex-flow: row wrap;
   justify-content: space-between; /* Align items horizontally */
   align-items: center; /* Align items vertically */
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.274);
@@ -349,8 +350,8 @@ details[open] summary {
   margin: 0;
   display: flex;
   align-items: center; /* Align items vertically */
-
   letter-spacing: 1px;
+  order: 3;
 }
 
 .navbar > li {
@@ -369,6 +370,7 @@ details[open] summary {
   display: flex; /* Ensure it stays horizontal */
   align-items: center; /* Align items vertically */
   color: var(--nord4);
+  order: 2;
 }
 
 .navbar-1 > li {
@@ -495,8 +497,8 @@ details[open] summary {
   }
 
   .navbar-1 {
-    justify-content: flex-end; /* Align navbar-1 to the right on larger screens */
-    flex-grow: 1; /* Allow navbar-1 to take up remaining space */
+    justify-content: flex-start; /* Align navbar-1 to the left on smaller screens */
+    flex: 0 0 100%; /* Force navbar-1 to be on a new row */
   }
 
   .navbar-1 > li {
@@ -510,10 +512,11 @@ details[open] summary {
   #banner {
     display: none;
   }
-
+/*
   .mnave {
     display: none !important;
   }
+*/
 }
 
 .footerflex {
@@ -590,6 +593,7 @@ details[open] summary {
   margin: 20px;
   cursor: pointer;
   float: right;
+  order: 1;
 }
 
 #mnavecb {
@@ -646,7 +650,6 @@ details[open] summary {
 @media only screen and (max-width: 1160px) {
   #header {
     height: auto;
-    display: block;
   }
   .navbar {
     display: none;
@@ -1137,6 +1140,36 @@ iner
     height: 25px;
   }
 
+  .brand {
+    font-size: 14px;
+  }
+
+  .navbar, .navbar-1 {
+    font-size: 11px;
+  }
+
+  .mnave {
+    width: 25px;
+    height: 25px;
+    margin: 10px;
+  }
+
+  .mnavebutton,
+  .mnavebutton::before,
+  .mnavebutton::after {
+    height: 2px;
+    width: 18px;
+    border-radius: 1px;
+  }
+
+  .mnavebutton::before {
+    top: 6px;
+  }
+
+  .mnavebutton::after {
+    top: -6px;
+  }
+
   .text-wrap {
     width: 250px;
   }

diff --git a/views/pages/misc/deobf/header.html b/views/pages/misc/deobf/header.html
@@ -2,10 +2,6 @@
   <div class="logo"></div>
   <a href="/" class="brand pulse">Holy Unblocker v6.3.x</a>
 </div>
-<input id="mnavecb" type="checkbox" />
-<label for="mnavecb" class="mnave">
-  <span class="mnavebutton"></span>
-</label>
 <ul class="navbar-1">
   <li class="pulse" style="margin-left: 0; "><a href="/?browse">Web Proxies</a></li>
   <li class="pulse"><a href="/?g">Games</a></li>
@@ -14,6 +10,10 @@
     <a href="/?apps">Applications</a>
   </li>
 </ul>
+<input id="mnavecb" type="checkbox" />
+<label for="mnavecb" class="mnave">
+  <span class="mnavebutton"></span>
+</label>
 <ul class="navbar">
   <!-- tabindex="0" is required on the dropdowns -->
   <li class="dropdown-parent">