studio-variable/index-main
4
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

style cards small
All checks were successful
Deploy / Deploy to Production (push) Successful in 15s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-25 14:14:37 +01:00
parent e69e765586
commit 1fedb2392c
10 changed files with 202 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

84
assets/css/components/_card-article-small.scss
View file

@ -10,17 +10,10 @@
border-top: var(--border-light);
}
// &.has-link {
// @include hover-card-line();
// }
@include figure-16-9();
figure {
@media #{$x-small} {
margin-left: 0px;
}
}
.type {
@ -91,7 +84,6 @@
.description {
font-size: var(--fs-small);
@include clamp(2);
// margin-bottom: calc(var(--spacing)*0.75);
margin-top: calc(var(--spacing)*0.25);
display: none;
}
@ -101,9 +93,7 @@
@include btn--go-to();
@include hover-card-line();
.keywords {
display: none;
}
@media #{$medium} {
.title {
@ -112,24 +102,70 @@
}
}
@media #{$x-small} {
@media #{$small} {
row-gap: 0;
display: block;
.content {
display: contents;
.content{
padding: calc(var(--spacing)*0.5) var(--padding-inner);
}
.title {
font-size: var(--fs-small);
padding-top: calc(var(--spacing)*0.25);
.type{
margin-bottom: calc(var(--spacing)*0.75);
}
figure {
grid-row: 1/3;
}
.title{
margin-bottom: calc(var(--spacing)*0.25);
}
.description {
grid-column: span 2;
}
.details,
.date{
margin-top: calc(var(--spacing)*0.5);
}
.btn--go-to{
bottom: calc(var(--padding-inner) * 0.75);
right: calc(var(--padding-inner)*0.75);
}
// .content {
// align-self: auto;
// height: 100%;
// padding: 0;
// padding-bottom: calc(var(--padding-inner)*0.5);
// display: flex;
// flex-direction: column;
// align-content: center;
// }
// .type{
// display: none;
// }
// .title {
// font-size: var(--fs-xsmall);
// padding-top: calc(var(--spacing)*0.5);
// padding-right: 2ch;
// text-wrap: wrap;
// flex-grow: 1;
// }
// .date{
// font-size: var(--fs-xsmall);
// }
// figure {
// grid-row: 1
// }
}