105 lines
2.4 KiB
CSS
105 lines
2.4 KiB
CSS
.article-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
width: 100%;
|
|
margin: auto;
|
|
padding: 1rem;
|
|
gap: 2rem;
|
|
|
|
.article-card-link {
|
|
text-decoration: none;
|
|
border: solid 2px #00101f;
|
|
border-radius: .5em;
|
|
color: #6c7a89;
|
|
box-shadow: 0 1px 1rem #000;
|
|
background: #01010c radial-gradient(at bottom center, #00101f, #000614, #01010c) no-repeat;
|
|
position: relative;
|
|
|
|
.article-card {
|
|
font-size: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
figure {
|
|
width: 100%;
|
|
margin: 0;
|
|
|
|
img {
|
|
border-radius: .5rem .5rem 0 0;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
color: #a8b4bd;
|
|
flex-grow: 1;
|
|
align-content: center;
|
|
margin: .5rem;
|
|
|
|
small {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
h2 {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.article-card-body {
|
|
text-align: center;
|
|
margin-bottom: .5rem;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0 1px 1em #021127;
|
|
border: solid 2px #021127;
|
|
|
|
figure {
|
|
img {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ribbon {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 5px 10px;
|
|
font-size: 0.5em;
|
|
border-top-right-radius: 1em;
|
|
border-bottom-left-radius: 1em;
|
|
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
|
|
|
|
&.sponsored {
|
|
background-color: #4a5568;
|
|
color: #ffffff;
|
|
}
|
|
|
|
&.dead {
|
|
background-color: #ff0000;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 799px) {
|
|
.article-list {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 399px) {
|
|
.article-list {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
}
|