Form improvements

- Make webmention submission form a fieldset
- Re-order CSS to avoid descending specificity
- Make search label mention Search My Site

assets/css/main.css

@@ -179,41 +179,6 @@ nav ul li {
 	margin-right: .375em;
 }
 
-/* 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 > div {
-	display: table;
-	width: 100%
-}
-
-/* A text box should not look like a button */
-input:not([type="submit"]) {
-	display: table-cell;
-	width: 98%;
-}
-
-form > div > div {
-	display: table-cell;
-	vertical-align: top; /* IE and some botique browsers need this */
-	width: 1%;
-}
-
-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 or make it system-ui. */
-	font-family: sans-serif;
-	font-size: inherit;
-}
-
 /* narrow screens: reduce margin for blockquotes a lot, using
  * a border instead. Put it on the left and right to make it
  * LTR/RTL-neutral, for machine translators that change text
@@ -284,8 +249,11 @@ samp {
 	font-family: monospace, monospace;
 }
 
-/* Some browsers don't support the hidden attr */
+/* Some browsers don't support the hidden attr.
-span[hidden] {
+ * I use hidden spans in backlinks to provide ARIA labels.
+ * Some ancient browsers don't support input[type="hidden"] */
+span[hidden],
+input[type="hidden"] {
 	display: none;
 }
 
@@ -354,6 +322,42 @@ section[aria-labelledby="webmentions"] {
 	content-visibility: auto;
 }
 
+/* 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 > div {
+	display: table;
+	width: 100%
+}
+
+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 or make it system-ui. */
+	font-family: sans-serif;
+	font-size: inherit;
+}
+
+/* A text box should take all available width */
+input:not([type="submit"]) {
+	display: table-cell;
+	width: 98%;
+}
+
+/* Pseudo-table-cell containing the submit button */
+form > div > div {
+	display: table-cell;
+	vertical-align: top; /* IE and some botique browsers need this */
+	width: 1%;
+}
+
 
 /* Some browser focus indicators are inaccessible; override them with
  * something more visible. See WCAG 2.x SC 2.4.12. I also tried to

layouts/partials/search.html

@@ -1,7 +1,7 @@
 <form
 	itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction"
 	action="https://searchmysite.net/search/" method="get">
-	<label for="search">Search this site:</label>
+	<label for="search">Search this site (powered by <a rel="nofollow" href="https://searchmysite.net/">Search My Site</a>):</label>
 	<div><!--We need the extra divs to serve as pseudo-table-cells.-->
 		<input id="search" itemprop="query" type="search" value="domain:seirdy.one " name="q">
 		<div><input type="submit" value="search"></div>

layouts/partials/webmention-form.html

@@ -1,12 +1,15 @@
+<fieldset>
+	<legend>Publish a response on your own website and share the link here to send me a webmention! Include a link to this page's canonical location for it to be accepted.</legend>
 	<form
 		itemprop="potentialAction" itemscope itemtype="https://schema.org/CommentAction"
 		action="https://seirdy.one/webmentions/receive" method="post">
 		<meta itemprop="actionStatus" content="PotentialActionStatus">
-	<label for="menchie">Publish a response on your own website and share the link here to send me a webmention! Include a link to this page's canonical location for it to be accepted.</label>
 		{{ $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" -}}
 		<input type="hidden" name="target" value="{{ .Site.Params.canonicalBaseURL }}{{ $canonicalRelPermalink }}">
+		<label for="menchie">URL of page linking here</label>
 		<div><!--We need the extra divs to serve as pseudo-table-cells.-->
 			<input id="menchie" type="url" name="source">
 			<div><input type="submit" value="submit"></div>
 		</div>
 	</form>
+</fieldset>