mirror of
https://koodu.h-i.works/projects/thebadspace
synced 2025-05-06 14:41:02 -05:00
142 lines
2.5 KiB
CSS
142 lines
2.5 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 {
|
||
display: grid;
|
||
grid-template-columns: auto max-content;
|
||
gap: 15px;
|
||
width: 80%;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 30px 0;
|
||
}
|
||
|
||
form.index-search-form > input,
|
||
form.index-search-form > button {
|
||
display: block;
|
||
margin: 0;
|
||
width: 100%;
|
||
height: 60px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
form.index-search-form > input:focus {
|
||
color: var(--white);
|
||
}
|
||
|
||
form.index-search-form > input[type="text"] {
|
||
font: 44px var(--base-type);
|
||
}
|
||
|
||
form.index-search-form > input[type="hidden"] {
|
||
/* This removes it from the grid calculations */
|
||
position: absolute;
|
||
}
|
||
|
||
form.index-search-form > button {
|
||
display: grid;
|
||
grid-template-columns: auto;
|
||
align-items: center;
|
||
padding: 0;
|
||
width: 60px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
form.index-search-form > button > svg {
|
||
justify-self: center;
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
|
||
form.index-search-form > button > span {
|
||
display: none;
|
||
margin-top: 3px;
|
||
font-weight: 500;
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
::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"] {
|
||
font: 34px var(--base-type);
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 650px) {
|
||
form.index-search-form > input[type="text"] {
|
||
font: 34px var(--base-type);
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 480px) {
|
||
form.index-search-form {
|
||
grid-template-columns: auto;
|
||
}
|
||
form.index-search-form > input[type="text"] {
|
||
font: 27px var(--base-type);
|
||
}
|
||
|
||
form.index-search-form > input[type="text"],
|
||
form.index-search-form > button {
|
||
width: 100%;
|
||
}
|
||
|
||
form.index-search-form > button {
|
||
grid-template-columns: auto 60px;
|
||
}
|
||
|
||
form.index-search-form > button span {
|
||
display: block;
|
||
}
|
||
}
|