diff --git a/assets/css/main.css b/assets/css/main.css index 77e10c1..446d20b 100644 --- a/assets/css/main.css +++ b/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 */ -span[hidden] { +/* Some browsers don't support the hidden attr. + * 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 diff --git a/layouts/partials/search.html b/layouts/partials/search.html index 9209df7..9cd3962 100644 --- a/layouts/partials/search.html +++ b/layouts/partials/search.html @@ -1,7 +1,7 @@