From 69a49b5dc0ab9e658990ad7f39e99d15b8be3313 Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Thu, 26 May 2022 18:00:02 -0700
Subject: [PATCH] Add non-interactive space between form tap targets

Also fixes alignment on some browsers like IE.
---
 assets/css/dark.css |  2 +-
 assets/css/main.css | 21 +++++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/assets/css/dark.css b/assets/css/dark.css
index 652f8a9..1e72bf1 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -11,7 +11,7 @@
 		 * background-color is all I need.
 		 * This is the brightest background that still achieves an APCA
 		 * contrast of 90 Lc.*/
-		background-color: #1a1919;
+		background-color: #191919;
 		/* Dimming the default text color is not the same as reducing screen
 		 * brightness, since other colors in this stylesheet have brighter
 		 * red and blue channels than the default text. */
diff --git a/assets/css/main.css b/assets/css/main.css
index 3327d75..fffab2b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -106,8 +106,9 @@ html {
 
 	/* If we have a list of disclosure widgets, we need some
 	 * non-interactive space on the screen that's safe to tap. */
+	form,
 	li details {
-		margin: .5em .25em;
+		margin: .5em 0;
 	}
 
 	/* SC 2.5.5, Google a11y: Increase tap target size a bit
@@ -178,25 +179,37 @@ nav ul li {
 	margin-right: .375em;
 }
 
-/* Make search box and submit button wide enough */
+/* Make search box and submit button as wide as possible while keeping
+ * them next to each other. */
+
+/* Use table-style layout (no, not actual tables. eww.). It's like a
+ * single-row flexbox that supports more browsers. Kanged this CSS from
+ * ww.gov.uk. Give the entire width of the row to the search box, but
+ * allow the minimum width for the submit button. */
 form {
 	display: table;
 	width: 100%
 }
 
+/* A text box should not look like a button */
 input[type="search"] {
 	display: table-cell;
-	width: 100%;
+	width: 98%;
 }
 
 form > div {
 	display: table-cell;
+	vertical-align: top; /* IE and some botique browsers need this */
 	width: 1%;
 }
 
-/* Don't shrink the size of the text in forms. */
 input {
+	/* Browsers like Safari make the submit button pill-shaped which
+	 * clashes with the input box. The only purely-cosmetic change on this
+	 * site. */
 	appearance: none;
+
+	/* Don't shrink the size of the text in forms. */
 	font-size: inherit;
 }