You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.0 KiB
CSS
120 lines
2.0 KiB
CSS
body { min-height: 100vh }
|
|
body::before {
|
|
content: "";
|
|
height: 8px;
|
|
background: linear-gradient(270deg, #D32D41 0%, #FF7300 100%) 0% 0% no-repeat padding-box;
|
|
}
|
|
|
|
header nav a:hover { color: #dd4733 }
|
|
|
|
a {
|
|
color: #000;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
width: var(--width);
|
|
margin: 0 auto;
|
|
padding: 1em;
|
|
}
|
|
|
|
section.search {
|
|
height: 70vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
section.search input {
|
|
max-width: 40em;
|
|
width: 100%;
|
|
padding: 1.5em 2em;
|
|
border: 0;
|
|
border-radius: .5em;
|
|
box-shadow: 3px 3px 10px #00000026;
|
|
font-family: "roboto-light";
|
|
}
|
|
|
|
section.filter { margin-bottom: 3em }
|
|
section.filter ul {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
grid-row-gap: 1em;
|
|
grid-column-gap: 1em;
|
|
justify-content: space-between;
|
|
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
section.filter ul li {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
font-size: .9em;
|
|
|
|
padding: .8em;
|
|
border: 1px solid #808080;
|
|
border-radius: .5em;
|
|
color: #6F6F6F;
|
|
font-weight: bold;
|
|
}
|
|
section.filter ul li:hover {
|
|
border: 1px solid rgba(0,0,0,0);
|
|
box-shadow: 3px 3px 10px #00000026;
|
|
color: #dd4733;
|
|
cursor: pointer;
|
|
}
|
|
|
|
section.list {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-column-gap: 1em;
|
|
grid-row-gap: 1em;
|
|
|
|
font-size: .8em;
|
|
}
|
|
section.list .item {
|
|
padding: 1.5em;
|
|
border: 1px dashed #808080;
|
|
border-radius: 10px;
|
|
}
|
|
section.list .item .head {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
grid-column-gap: 1em;
|
|
align-items: center;
|
|
}
|
|
section.list .item .head img {
|
|
width: 100%;
|
|
border-radius: 1em;
|
|
}
|
|
section.list .item .head .title {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
color: #6F6F6F;
|
|
}
|
|
section.list .item p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
footer {
|
|
color: #fff;
|
|
background-color: #000;
|
|
margin-top: 10em;
|
|
}
|
|
footer a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|