Merge pull request #12 from thavelick/mobile_responsiveness_fixes

thavelick · web-flow · commit 8970f96e2f9f · 2025-07-20T17:57:35.000-06:00
Fix mobile responsiveness and improve UI
diff --git a/public_html/index.html b/public_html/index.html
@@ -2,6 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="icon.svg" />
     <link rel="manifest" href="manifest.json" />
     <link
diff --git a/public_html/service-worker-lib.js b/public_html/service-worker-lib.js
@@ -1,4 +1,4 @@
-const STATIC_CACHE_NAME = "just-bangs-static-v5";
+const STATIC_CACHE_NAME = "just-bangs-static-v6";
 
 const STATIC_ASSETS = [
   "./",
diff --git a/public_html/style.css b/public_html/style.css
@@ -94,7 +94,7 @@ html.light-mode input[type="text"] {
   height: 25px;
   cursor: pointer;
   transition: all 0.3s ease;
-  z-index: 1000;
+  z-index: 100;
 }
 
 .toggle-slider {
@@ -146,7 +146,7 @@ html.dark-mode .toggle-slider::after {
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
-  z-index: 1001;
+  z-index: 50;
 }
 
 .hamburger-menu:hover {
@@ -170,7 +170,7 @@ html.dark-mode .hamburger-menu:hover {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 1000;
+  z-index: 200;
   display: none;
 }
 
@@ -326,6 +326,28 @@ html.dark-mode .bang-url {
   .bang-url {
     font-size: 12px;
   }
+
+  input::placeholder {
+    opacity: 0;
+  }
+
+  form {
+    flex-direction: column;
+    align-items: center;
+    padding: 0 1em;
+  }
+
+  input[type="text"] {
+    width: 100%;
+    margin-bottom: 0.5em;
+  }
+
+  input[type="submit"],
+  input[type="button"] {
+    margin-left: 0;
+    width: auto;
+    padding: 0.3em 1em;
+  }
 }
 
 @media (min-width: 768px) {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-const STATIC_CACHE_NAME = "just-bangs-static-v5";`
	`1`	`+const STATIC_CACHE_NAME = "just-bangs-static-v6";`
`2`	`2`
`3`	`3`	`const STATIC_ASSETS = [`
`4`	`4`	`"./",`