mirror of
https://koodu.h-i.works/projects/thebadspace
synced 2025-05-06 14:41:02 -05:00
3e070676e4
adds a focus indicator that passes the accessibility requirements WCAG 2.2: §1.4.11 & §2.4.7
124 lines
2.1 KiB
CSS
124 lines
2.1 KiB
CSS
section.index-search {
|
||
width: 100%;
|
||
background: var(--white);
|
||
}
|
||
|
||
/* TODO: move to a global file? it’s not only for forms. */
|
||
section.index-search :focus-visible {
|
||
outline: 2px solid var(--white);
|
||
outline-offset: -4px;
|
||
}
|
||
|
||
section.start a.search-link {
|
||
color: var(--highlight);
|
||
font-size: 2.5em;
|
||
font-weight: bold;
|
||
border: 0;
|
||
display: block;
|
||
}
|
||
|
||
form.index-search-form {
|
||
width: 80%;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 30px 0;
|
||
}
|
||
|
||
form.index-search-form > input[type="text"] {
|
||
width: 88%;
|
||
height: 50px;
|
||
font: 44px var(--base-type);
|
||
}
|
||
|
||
form.index-search-form > button {
|
||
height: 60px;
|
||
width: 60px;
|
||
position: relative;
|
||
top: 9px;
|
||
right: 0;
|
||
}
|
||
|
||
form.index-search-form > button > img#search-icon {
|
||
float: none;
|
||
}
|
||
|
||
form.index-search-form > button > label {
|
||
font-weight: 500;
|
||
top: 15px;
|
||
position: relative;
|
||
font-size: 1.5em;
|
||
display: none;
|
||
}
|
||
|
||
::placeholder {
|
||
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
||
color: var(--highlight);
|
||
}
|
||
|
||
section.index-meta article {
|
||
padding-block: 30px;
|
||
}
|
||
|
||
table.index-meta {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
table.index-meta tr + tr > * {
|
||
padding-block-start: 10px;
|
||
}
|
||
|
||
table.index-meta :is(th, td) {
|
||
padding: 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
table.index-meta th {
|
||
color: var(--secondary);
|
||
text-align: left;
|
||
}
|
||
|
||
table.index-meta td {
|
||
padding-inline-start: 10px;
|
||
color: var(--white);
|
||
text-align: right;
|
||
}
|
||
|
||
@media only screen and (max-width: 800px) {
|
||
form.index-search-form > input[type="text"] {
|
||
width: 85%;
|
||
height: 50px;
|
||
font: 34px var(--base-type);
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 650px) {
|
||
form.index-search-form > input[type="text"] {
|
||
width: 80%;
|
||
height: 50px;
|
||
font: 34px var(--base-type);
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 480px) {
|
||
form.index-search-form > input[type="text"] {
|
||
width: 99%;
|
||
height: 50px;
|
||
font: 27px var(--base-type);
|
||
}
|
||
|
||
form.index-search-form > button {
|
||
width: 99%;
|
||
top: 15px;
|
||
}
|
||
|
||
form.index-search-form > button > label {
|
||
display: inline;
|
||
}
|
||
|
||
form.index-search-form > button > img#search-icon {
|
||
float: right;
|
||
}
|
||
}
|