2
0
Fork 0
inspin.io/assets/style/pages/article/cards.css

95 lines
1.7 KiB
CSS

.article .cards {
padding: 2rem 1.25rem 4rem 1.25rem;
.card {
margin: 0 0 2rem 0;
a {
display: grid;
grid-gap: 0 1.5rem;
grid-template-columns: 1fr 1.5fr;
img {
grid-column: 1;
max-width: 100%;
border: .15rem solid var(--w-color);
border-radius: .25rem;
}
.meta {
grid-column: 2;
h3 {
font-size: 1.55rem;
font-weight: 600;
line-height: 2.05rem;
padding: 0;
margin: .5rem 0;
}
p {
color: var(--fs-color);
font-size: 1.1rem;
font-weight: 300;
}
h3,
.desc {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.desc {
padding: 0 1rem 0 0;
}
.date,
.tags {
display: inline-block;
font-size: .9rem;
padding: 0 1.5rem 0 0;
margin: 0;
}
.tags {
padding: 0;
&:not(:last-child):after {
position: relative;
content: '•';
font-size: .7rem;
padding: 0 .35rem;
top: -.05rem;
}
}
}
}
}
}
@media only screen and (--viewport-4) {
.article .cards {
padding: 2rem 2.25rem 4rem 2.25rem;
.card {
margin: 0 0 3rem 0;
a {
display: block;
.meta {
.desc {
margin: .5rem 0;
}
.date {
display: none;
}
}
}
}
}
}