forked from projects/thebadspace
ro
9be54fa13c
Hit the major friction points in the responsive UI. Still have some polishing to do but there shouldn't be any show stoppers at this points. Also moved some variable to the env so they can be changed easily when necessary
109 lines
1.9 KiB
CSS
109 lines
1.9 KiB
CSS
section.index-search {
|
|
width: 100%;
|
|
background: var(--white);
|
|
}
|
|
|
|
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 {
|
|
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;
|
|
}
|
|
|
|
form.index-search-form > button > img#search-icon {
|
|
float: right;
|
|
}
|
|
}
|