index-main/assets/css/components/_card-article-small.scss
Julie Blanc 50f4836be1
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
arrow go-to
2026-01-25 22:25:08 +01:00

82 lines
No EOL
1.6 KiB
SCSS

.card--article-small{
@include grid-content();
margin-bottom: calc(var(--spacing)*0.5);
padding-bottom: calc(var(--spacing)*0.5);
border-bottom: var(--border-light);
&:first-of-type{
padding-top: calc(var(--spacing)*0.5);
border-top: var(--border-light);
}
@include figure-16-9();
.content{
display: flex;
flex-direction: column;
padding-top: calc(var(--spacing)*0.25);
padding-right: calc(var(--padding-inner)*3);
}
.title{
font-weight: normal;
font-size: var(--fs-medium);
margin-bottom: 0.25em;
text-wrap: balance;
max-width: 42ch;
a{ text-decoration: none;}
}
time{
flex-grow: 1;
color: var(--color-txt-light);
}
.keywords--small{
margin-top: 1.5em;
padding-bottom: calc(var(--spacing)*0.25);
color: var(--color-txt-light);
z-index: 1000;
max-width: 32ch;
}
&:hover{
.title{ text-decoration: underline;}
}
@include btn--go-to();
@media #{$medium}{
.title{
font-size: var(--fs-normal);
margin-bottom: 0;
}
}
@media #{$x-small}{
.content{
padding: 0;
}
.title{
margin-bottom: 0;
}
time{
font-size: var(--fs-small);
margin-top: 0.25em;
}
.keywords--small{
font-size: var(--fs-small);
margin-top: 0.5em;
padding-bottom: 0;
}
}
}