132 lines
2.5 KiB
CSS
132 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 {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
div.index-meta {
|
||
display: grid;
|
||
grid-template-columns: 50% 50%;
|
||
gap: 10px;
|
||
width: 98%;
|
||
font-weight: 500;
|
||
color: var(--secondary);
|
||
}
|
||
|
||
div.index-meta > label:nth-child(2),
|
||
div.index-meta > label:nth-child(4),
|
||
div.index-meta > label:nth-child(6) {
|
||
color: var(--white);
|
||
width: 100%;
|
||
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;
|
||
}
|
||
}
|