searchhut: web: general UI improvements v1 PROPOSED

Umar Getagazov: 1
 web: general UI improvements

 3 files changed, 44 insertions(+), 21 deletions(-)

[PATCH searchhut] web: general UI improvements Export this patch

This mainly improves accessibility and tweaks the search bar CSS for
browsers that do not support flexbox (e.g. NetSurf).
---
 static/main.css       | 49 +++++++++++++++++++++++++++++++------------
 templates/footer.html | 10 ++++-----
 templates/form.html   |  6 +++---
 3 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/static/main.css b/static/main.css
index ce47042..1b39bce 100644
--- a/static/main.css
+++ b/static/main.css
@@ -14,6 +14,16 @@ body {
 	flex-direction: column;
 }
 
+.visually-hidden {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
 header {
 	font-size: 1.5rem;
 	font-size: min(max(1.5rem, 4vw), 2rem);
@@ -87,11 +97,17 @@ button:hover {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	align-items: center;
+	max-width: 800px;
+	width: 100%;
+	margin: 0 auto;
+	text-align: center;
 }
 
-.index form {
-	width: 100%;
+.index .alert {
+	display: inline-block;
+	margin-left: auto;
+	margin-right: auto;
+	text-align: left;
 }
 
 .search main {
@@ -128,10 +144,6 @@ form {
 	flex-direction: column;
 }
 
-form label {
-	display: none;
-}
-
 h1 {
 	font-weight: normal;
 	text-align: center;
@@ -154,45 +166,56 @@ ol {
 	margin: 0 auto;
 }
 
+.input-group input,
+.input-group button {
+	margin-bottom: 0.25rem;
+}
+
 .input-group input[type="text"] {
 	width: 100%;
 }
 
 .input-group button {
+	display: inline-block;
 	width: 100%;
 	height: 2.5em;
-	margin-top: 0.5rem;
 }
 
 @media (min-width: 320px) {
 	.input-group {
 		display: flex;
+		text-align: center;
 	}
 
 	.input-group input[type="text"] {
-		width: 0;
 		flex: 1;
+		margin-right: 0.5rem;
 	}
 
 	.input-group button {
 		width: auto;
 		height: auto;
-		margin-top: 0;
-		margin-left: 0.5rem;
 	}
 }
 
 .infolinks {
+	list-style: none;
 	text-align: center;
 	margin-top: 1rem;
+	margin-bottom: 0;
+	padding: 0;
 }
 
-.infolinks a {
-	color: gray;
+.infolinks li {
+	display: inline;
 	margin: 0 0.75rem;
 	white-space: nowrap;
 }
 
+.infolinks a {
+	color: gray;
+}
+
 .alert {
 	margin-top: 1rem;
 	padding: 1rem;
diff --git a/templates/footer.html b/templates/footer.html
index 3c29c93..65de7e9 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,7 +1,7 @@
 <footer>
-  <div class="infolinks">
-    <a href="/about">About searchhut</a>
-    <a href="/docs">Documentation</a>
-    <a href="https://sr.ht/~sircmpwn/searchhut">Source code</a>
-  </div>
+  <ul class="infolinks">
+    <li><a href="/about">About searchhut</a></li>
+    <li><a href="/docs">Documentation</a></li>
+    <li><a href="https://sr.ht/~sircmpwn/searchhut">Source code</a></li>
+  </ul>
 </footer>
diff --git a/templates/form.html b/templates/form.html
index 30f359b..e1d770e 100644
--- a/templates/form.html
+++ b/templates/form.html
@@ -1,14 +1,14 @@
 <form action="/search" role="search">
   <h1 translate="no">
     <a href="/">
-      <span class="icon">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path></svg>
+      <span class="icon" aria-hidden="true">
+        <svg width="28" height="28" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path></svg>
       </span>
       <span>searchhut</span>
     </a>
   </h1>
   <div class="input-group">
-    <label for="q">Search terms</label>
+    <label for="q" class="visually-hidden">Search terms</label>
     <input
       type="text"
       id="q"
-- 
2.32.1 (Apple Git-133)