mirrors/thebadspace
1
0
Fork 0
mirror of https://koodu.h-i.works/projects/thebadspace synced 2025-05-06 14:41:02 -05:00
Code Packages Releases Activity

refactor: rework the search form with CSS Grid

Browse Source
This commit is contained in:
Zoë 2025-05-02 17:49:46 +02:00
parent 04ac27ea04
commit fed8748923
No known key found for this signature in database
GPG Key ID: B4CA6F5B4034F028
1 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
public/assets/css/front/index.css
View File

@ -18,38 +18,57 @@ section.start a.search-link {
} }
form.index-search-form { form.index-search-form {
display: grid;
grid-template-columns: auto max-content;
gap: 15px;
width: 80%; width: 80%;
max-width: 1000px; max-width: 1000px;
margin: 0 auto; margin: 0 auto;
padding: 30px 0; 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"] { form.index-search-form > input[type="text"] {
width: 88%;
height: 50px;
font: 44px var(--base-type); 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 { form.index-search-form > button {
height: 60px; display: grid;
grid-template-columns: auto;
align-items: center;
padding: 0;
width: 60px; width: 60px;
position: relative;
top: 9px;
right: 0;
text-transform: uppercase; text-transform: uppercase;
} }
form.index-search-form > button > svg { form.index-search-form > button > svg {
justify-self: center;
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
form.index-search-form > button > label { form.index-search-form > button > span {
font-weight: 500;
top: 15px;
position: relative;
font-size: 1.5em;
display: none; display: none;
margin-top: 3px;
font-weight: 500;
font-size: 1.5em;
} }
::placeholder { ::placeholder {
@ -89,33 +108,34 @@ table.index-meta td {
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
form.index-search-form > input[type="text"] { form.index-search-form > input[type="text"] {
width: 85%;
height: 50px;
font: 34px var(--base-type); font: 34px var(--base-type);
} }
} }
@media only screen and (max-width: 650px) { @media only screen and (max-width: 650px) {
form.index-search-form > input[type="text"] { form.index-search-form > input[type="text"] {
width: 80%;
height: 50px;
font: 34px var(--base-type); font: 34px var(--base-type);
} }
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
form.index-search-form {
grid-template-columns: auto;
}
form.index-search-form > input[type="text"] { form.index-search-form > input[type="text"] {
width: 99%;
height: 50px;
font: 27px var(--base-type); font: 27px var(--base-type);
} }
form.index-search-form > input[type="text"],
form.index-search-form > button { form.index-search-form > button {
width: 99%; width: 100%;
top: 15px;
} }
form.index-search-form > button > label { form.index-search-form > button {
display: inline; grid-template-columns: auto 60px;
}
form.index-search-form > button span {
display: block;
} }
} }