mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Form improvements
- Make webmention submission form a fieldset - Re-order CSS to avoid descending specificity - Make search label mention Search My Site
This commit is contained in:
Rohan Kumar
parent
0ed68c5e9a
commit
927987093e
3 changed files with 57 additions and 50 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
<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 }}">
|
||||
<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>
|
||||
<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">
|
||||
{{ $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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue