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

21
assets/css/main.css
View file

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