ForRo/public/assets/css/front/index.css

109 lines
1.9 KiB
CSS
Raw Normal View History

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;
}
}