studio-variable/index-main
4
0
Fork 0
Code Issues 14 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

30
assets/css/components/_buttons.scss
View file

@ -135,16 +135,15 @@ button:disabled{
height: calc(var(--h-block)*1);
border: var(--border);
border-radius: var(--radius-btn);
font-size: var(--fs-xsmall);
font-weight: 500;
text-transform: uppercase;
font-size: var(--fs-small);
// font-weight: 500;
// text-transform: uppercase;
line-height: 1;
overflow: hidden;
white-space: nowrap;
@include icon(12px);
svg{
width: 18px;
height: 18px;
position: relative;
position: relative;
top: -1px;
}
a{
@ -154,7 +153,7 @@ button:disabled{
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 2ch;
padding: 0 1.25ch;
padding-top: 4px;
}
&.no-link{
@ -162,10 +161,12 @@ button:disabled{
align-items: center;
justify-content: center;
gap: 1ch;
padding: 0 2ch;
padding: 0 1.25ch;
padding-top: 4px;
}
}
@ -189,7 +190,10 @@ button:disabled{
.btn--bold-inline{
background-color: var(--color-bg);
svg{ fill: var(--color-txt); }
// svg{
// fill: var(--color-txt);
// size: 13px!important;
// }
&:hover{
background-color: var(--grey-950);
color: var(--grey-100);
@ -229,16 +233,16 @@ button:disabled{
}
@media #{$small}{
svg{
width: 11px;
height: 11px;
width: 12px;
height: 12px;
}
}
@media #{$x-small}{
right: calc(var(--padding-inner)*0.5);
bottom: calc(var(--padding-inner)*0.25);
svg{
width: 11px;
height: 11px;
width: 12px;
height: 12px;
}
}
}

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
// }
}

7
assets/css/components/_text.scss
View file

@ -66,6 +66,9 @@
margin-inline: auto;
border: 1px solid var(--grey-600);
padding: calc(var(--padding-inner)*3);
@media #{$small} {
padding: calc(var(--padding-inner)*1);
}
background-color: var(--grey-800);
.insert--inner{
@ -75,6 +78,10 @@
h3, h4, h5{
margin-top: 0;
@media #{$small} {
margin-top: calc(var(--spacing)*0.5);
margin-bottom: calc(var(--spacing)*0.75);
}
}
}