mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Add non-interactive space between form tap targets
Also fixes alignment on some browsers like IE.
This commit is contained in:
parent
d6d88f1e92
commit
69a49b5dc0
2 changed files with 18 additions and 5 deletions
|
@ -11,7 +11,7 @@
|
||||||
* background-color is all I need.
|
* background-color is all I need.
|
||||||
* This is the brightest background that still achieves an APCA
|
* This is the brightest background that still achieves an APCA
|
||||||
* contrast of 90 Lc.*/
|
* contrast of 90 Lc.*/
|
||||||
background-color: #1a1919;
|
background-color: #191919;
|
||||||
/* Dimming the default text color is not the same as reducing screen
|
/* Dimming the default text color is not the same as reducing screen
|
||||||
* brightness, since other colors in this stylesheet have brighter
|
* brightness, since other colors in this stylesheet have brighter
|
||||||
* red and blue channels than the default text. */
|
* red and blue channels than the default text. */
|
||||||
|
|
|
@ -106,8 +106,9 @@ html {
|
||||||
|
|
||||||
/* If we have a list of disclosure widgets, we need some
|
/* If we have a list of disclosure widgets, we need some
|
||||||
* non-interactive space on the screen that's safe to tap. */
|
* non-interactive space on the screen that's safe to tap. */
|
||||||
|
form,
|
||||||
li details {
|
li details {
|
||||||
margin: .5em .25em;
|
margin: .5em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SC 2.5.5, Google a11y: Increase tap target size a bit
|
/* SC 2.5.5, Google a11y: Increase tap target size a bit
|
||||||
|
@ -178,25 +179,37 @@ nav ul li {
|
||||||
margin-right: .375em;
|
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 {
|
form {
|
||||||
display: table;
|
display: table;
|
||||||
width: 100%
|
width: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* A text box should not look like a button */
|
||||||
input[type="search"] {
|
input[type="search"] {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
width: 100%;
|
width: 98%;
|
||||||
}
|
}
|
||||||
|
|
||||||
form > div {
|
form > div {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
|
vertical-align: top; /* IE and some botique browsers need this */
|
||||||
width: 1%;
|
width: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Don't shrink the size of the text in forms. */
|
|
||||||
input {
|
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;
|
appearance: none;
|
||||||
|
|
||||||
|
/* Don't shrink the size of the text in forms. */
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue