Zoë
85ad3d9225
this change allows us to use the font colour for the icon. it might also be nice to use a sprite.svg for all icons. this would use the same <use> mechanism as i did here. this also optimises the SVG a bit
111 lines
2 KiB
CSS
111 lines
2 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 > svg {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
|
||
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 {
|
||
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"] {
|
||
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;
|
||
}
|
||
}
|