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

responsive
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-07 15:59:34 +01:00
parent 48ded249a3
commit da79013711
14 changed files with 203 additions and 200 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,117 +1,100 @@
.card--article-small{
.card--article-small {
@include grid-content();
padding-top: calc(var(--spacing)*0.5);
padding-bottom: calc(var(--spacing)*0.5);
border-bottom: var(--border-light);
&:first-of-type{
&:first-of-type {
border-top: var(--border-light);
}
&.has-link {
@include hover-card-line();
}
// &:first-of-type{
// padding-top: calc(var(--spacing)*0.5);
// border-top: var(--border-light);
// }
@include figure-16-9();
figure{
@media #{$x-small}{ margin-left: 0px; }
figure {
@media #{$x-small} {
margin-left: 0px;
}
}
.content{
.content {
display: flex;
flex-direction: column;
padding-top: calc(var(--spacing)*0.25);
padding-right: calc(var(--padding-inner)*3);
}
.title{
.title {
font-weight: 500;
font-size: var(--fs-small);
margin-bottom: 0.25em;
margin-bottom: 0.25em;
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
line-height: 1.1;
a{ text-decoration: none;}
line-height: var(--leading-title);
a {
text-decoration: none;
}
}
time{
time {
flex-grow: 1;
color: var(--color-txt-light);
}
.description{
@include clamp(2);
.description {
@include clamp(2);
margin-bottom: calc(var(--spacing)*0.75);
margin-top: calc(var(--spacing)*0.25);
}
@include btn--go-to();
@include hover-card-line();
.keywords{ display: none; }
@media #{$medium}{
.title{
.keywords {
display: none;
}
@media #{$medium} {
.title {
font-size: var(--fs-normal);
margin-bottom: 0;
}
}
@media #{$x-small}{
@media #{$x-small} {
// figure{
// aspect-ratio: inherit;
// width: 100%;
// height: 100%;
// }
.content {
display: contents;
}
.icon-article{ display: none; }
.description{
display: none;
}
.content{
padding: 0;
}
.title{
margin-bottom: 0;
}
time{
.title {
font-size: var(--fs-small);
margin-top: 0.25em;
padding-top: calc(var(--spacing)*0.25);
}
.keywords {
display: block;
line-height: 1.1;
margin-top: calc(var(--spacing)*0.5);
padding-right: calc(var(--padding-inner)*1);
li, a{
display: inline;
border: none;
padding: 0px;
color: var(--color-txt-light);
}
figure {
grid-row: 1/3;
}
.description {
grid-column: span 2;
}
}
}

2
assets/css/components/_card-article.scss
View file

@ -42,7 +42,7 @@
.title{
margin-top: calc(var(--spacing)*0.75);
font-size: var(--fs-normal);
line-height: 1.1;
line-height: var(--leading-title);
font-weight: 500;
text-transform: uppercase;
text-wrap: balance;

51
assets/css/components/_card-folder.scss
View file

@ -36,6 +36,7 @@
font-weight: 500;
font-size: var(--fs-normal);
line-height: var(--leading-title);
margin-bottom: 0.75em;
text-wrap: balance;
@ -110,6 +111,7 @@
padding-left: 0;
padding-right: 0;
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
}
@ -126,33 +128,44 @@
font-size: var(--fs-small);
}
}
@media #{$x-small} {
@container cardfolder (width < 680px) {
figure{
aspect-ratio: inherit;
width: 100%;
height: 100%;
}
.short{
margin-top: calc(var(--spacing)*0.5);
}
}
.card--folder{
@container cardfolder (width < 520px) {
figure{
aspect-ratio: inherit;
width: 100%;
height: 100%;
}
.short, ul{
font-size: var(--fs-small);
.content {
display: contents;
}
figure {
grid-row: 1/3;
}
.title {
font-size: var(--fs-small);
padding-top: calc(var(--spacing)*0.25);
margin-bottom: 0;
}
.short {
grid-column: span 2;
}
ul{
grid-column: 2;
grid-row: 2;
padding-top: 0;
}
}
}

17
assets/css/components/_card-impact-small.scss
View file

@ -32,17 +32,8 @@
.keywords {
grid-column: 2;
z-index: 10;
@media #{$x-small} { display: none; }
@media #{$x-small} {
display: block;
line-height: 1.1;
li, a{
display: inline;
border: none;
padding: 0px;
color: var(--color-txt-light);
}
}
}
@ -98,13 +89,7 @@
}
// .open-graph__inner {
// margin-top: calc(var(--spacing)*0.5);
// .card--open-graph {
// margin-bottom: calc(var(--spacing)*0.5);
// }
// }
}

8
assets/css/components/_form-newsletter.scss
View file

@ -18,14 +18,14 @@
padding: 0 2ch;
font-family: var(--font);
font-size: var(--fs-normal);
font-size: var(--fs-small);
z-index: 40;
padding-top: 4px;
background: var(--color-bg);
color: var(--color-txt);
&::placeholder{
font-family: var(--font);
font-size: var(--fs-normal);
font-size: var(--fs-small);
color: var(--color-txt);
}
@ -49,7 +49,7 @@
--size: calc(var(--h-block)*1.25 - 8px);
font-family: var(--font);
font-size: var(--fs-button-bold);
font-size: var(--fs-small);
height: var(--size);
@ -83,7 +83,7 @@
.txt{
position: relative;
top: 2px;
font-size: var(--fs-normal);
font-size: var(--fs-small);
display: none;
padding-left: 1ch;
}

12
assets/css/components/_list-socials.scss
View file

@ -36,8 +36,10 @@
display: block;
li{
margin-bottom: calc(var(--spacing)*0.5);
margin-bottom: calc(var(--spacing)*0.25);
break-inside: avoid;
font-size: var(--fs-small);
}
a{
@ -48,6 +50,14 @@
content: '↗';
color: var(--grey-300);
}
&:hover{
color: var(--color-accent);
&::after{
color: var(--color-accent);
opacity: 0.5;
}
}
}
.text{
display: block;