fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 12:52:10 +00:00
Code Issues Projects Releases Wiki Activity

Add non-interactive space between form tap targets

Browse source 
Also fixes alignment on some browsers like IE.
This commit is contained in:
Rohan Kumar 2022-05-26 18:00:02 -07:00
parent d6d88f1e92
commit 69a49b5dc0
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/dark.css
View file

@ -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. */

21
assets/css/main.css
View file

@ -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;
}