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

ajustements style
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-06 15:10:27 +01:00
parent 193577b145
commit b9cefffdfa
17 changed files with 174 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -99,7 +99,7 @@ button:disabled{
height: calc(var(--h-block)*1);
border: var(--border);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
font-weight: 500;
text-transform: uppercase;
line-height: 1;

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

@ -36,7 +36,7 @@
}
.title{
font-weight: 400;
font-weight: 500;
font-size: var(--fs-small);
margin-bottom: 0.25em;
text-wrap: balance;

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

@ -6,6 +6,8 @@
padding: var(--padding-inner);
@include figure-16-9();
.content{
@ -38,9 +40,10 @@
}
.title{
margin-top: calc(var(--spacing)*0.5);
font-size: var(--fs-medium);
font-weight: normal;
margin-top: calc(var(--spacing)*0.75);
font-size: var(--fs-normal);
line-height: 1.1;
font-weight: 500;
text-transform: uppercase;
text-wrap: balance;
// flex-grow: 2;
@ -55,12 +58,15 @@
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--fs-small);
}
.dl{
margin-top: calc(var(--spacing)*0.5);
// font-size: var(--fs-small);
border-bottom: var(--border-light);
font-size: var(--fs-small);
.dl__group{
@include grid-content();
border-top: var(--border-light);

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

@ -10,18 +10,31 @@
container-type: inline-size;
container-name: cardfolder;
figure{
background-color: var(--color-accent);
// border: 1px solid var(--color-accent);
// opacity: 0.9;
img{
mix-blend-mode: multiply;
filter: grayscale(1) brightness(1.2);
}
}
.content{
display: flex;
flex-direction: column;
font-size: var(--fs-small);
}
.title{
flex-grow: 1;
font-weight: 500;
font-size: var(--fs-small);
font-size: var(--fs-normal);
margin-bottom: 0.25em;
margin-bottom: 0.75em;
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
@ -47,6 +60,8 @@
.short{
@include clamp(3);
flex-grow: 1;
padding-right: calc(var(--padding-inner)*2);
}
ul{
@ -104,7 +119,9 @@
}
.title{
font-size: var(--fs-small);
}
}

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

@ -98,13 +98,13 @@
}
.open-graph__inner {
margin-top: calc(var(--spacing)*0.5);
.card--open-graph {
margin-bottom: calc(var(--spacing)*0.5);
}
// .open-graph__inner {
// margin-top: calc(var(--spacing)*0.5);
// .card--open-graph {
// margin-bottom: calc(var(--spacing)*0.5);
// }
}
// }
}

31
assets/css/components/_card-impact.scss
View file

@ -15,6 +15,7 @@
padding: calc(var(--padding-inner)*1.5) var(--padding-inner);
font-size: var(--fs-small);
// border-bottom: var(--border-light);
// padding: calc(var(--spacing)*0.5) 0;
@ -23,11 +24,6 @@
// }
@include btn--go-to();
.btn--go-to {
@ -83,7 +79,7 @@
z-index: 10;
grid-column: 2;
list-style: none;
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
a {
@ -151,15 +147,15 @@
.open-graph__inner {
margin-top: calc(var(--spacing)*0.5);
// margin-bottom: calc(var(--spacing)*1);
// .open-graph__inner {
// margin-top: calc(var(--spacing)*0.5);
// // margin-bottom: calc(var(--spacing)*1);
.card--open-graph {
margin-bottom: calc(var(--spacing)*0.5);
}
// .card--open-graph {
// margin-bottom: calc(var(--spacing)*0.5);
// }
}
// }
}
}
@ -178,7 +174,7 @@
top: 0px!important;
}
.content{
.card--impact__inner > .content{
margin-top: calc(var(--spacing)*0.75);
margin-bottom: calc(var(--spacing)*0.25);
padding-right: 0!important;
@ -198,12 +194,15 @@
margin-top: calc(var(--spacing)*1);
}
.date,
.content,
details {
font-size: 14px !important;
font-size: var(--fs-small) !important;
}
.date{
font-size: var(--fs-xsmall) !important;
}
.btn--go-to {
top: calc(var(--padding-inner)*1.25)!important;
bottom: auto;

47
assets/css/components/_card-open-graph.scss
View file

@ -1,6 +1,16 @@
.card--open-graph{
@include grid-content();
container-type: inline-size;
container-name: opengraph;
.open-graph__inner{
@include grid-content();
}
// border: var(--border-light);
border: 1px solid var(--grey-600);
@ -31,21 +41,23 @@
}
.content{
padding: var(--padding-inner);
padding-left: 0;
padding-top: calc(var(--padding-inner)*0.75);
padding-bottom: calc(var(--padding-inner)*0.75);
padding-right: var(--padding-inner);
grid-column: 2;
grid-row: 1;
}
.site-name{
color: var(--color-txt-light);
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
margin-bottom: 3px;
}
.title{
font-size: var(--fs-normal);
font-weight: normal;
font-size: var(--fs-small);
font-weight: 500;
line-height: 1.1;
padding-top: 2px;
display: -webkit-box;
@ -59,7 +71,7 @@
}
.description{
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
@ -73,20 +85,17 @@
}
.open-graph__inner{
container-type: inline-size;
container-name: opengraph;
}
@container opengraph (width < 500px) {
.card--open-graph{
// .card--open-graph{
// background-color: red!important;
.content{
padding: calc(var(--padding-inner)*0.5);
}
// .content{
// padding: calc(var(--padding-inner)*0.5);
// }
figure{
aspect-ratio: inherit;
}
}
// figure{
// aspect-ratio: inherit;
// }
// }
}

2
assets/css/components/_keywords.scss
View file

@ -13,7 +13,7 @@
padding-top: 2px;
border: var(--border-light);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
line-height: 1;
white-space: nowrap;
text-decoration: none;

5
assets/css/components/_tags.scss
View file

@ -6,11 +6,12 @@
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding: 0 1ch;
padding-top: 3px;
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
line-height: 1;
font-weight: 500;
background-color: var(--color-txt);
color: var(--color-bg);