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

blueprint & templates Impacts
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-24 17:05:22 +01:00
parent fab10a38d8
commit 7b3ebb3ca4
15 changed files with 369 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

23
assets/css/components/_card-block.scss
View file

@ -65,15 +65,32 @@
.investigations{
text-decoration: none;
list-style: none;
// border-top: var(--border-light);
padding-top: calc(var(--spacing)*0.5);
width: 100%;
z-index: 100;
li{
font-size: var(--fs-small);
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-txt-light);
font-size: var(--fs-small);
a{
text-decoration: none;
color: var(--color-txt-light);
}
a::before{
content: "↪ "
}
&:hover{
a{
text-decoration: underline 1px;
text-underline-offset: 2px;
color: var(--color-txt);
}
}
}
}
@ -100,6 +117,10 @@
top: 3px;
}
// .link-block{
// background-color: rgba(255, 0, 0, 0.781);
// }

66
assets/css/components/_category.scss
View file

@ -23,3 +23,69 @@
.page__type{
height: calc(var(--h-block)*1);
border-radius: var(--radius-small);
border: var(--border-medium);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding-top: 5px;
font-size: var(--fs-small);
background-color: var(--color-bg);
color: var(--color-txt-light);
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
@media #{$small} {
height: calc(var(--h-block)*0.75);
font-size: var(--fs-xsmall);
padding: 0 1ch;
padding-top: 3px;
}
}
.page__category{
height: calc(var(--h-block)*1);
border-radius: var(--radius-small);
margin-left: calc(var(--padding-inner)*0.25);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding-top: 5px;
font-size: var(--fs-small);
background-color: var(--color-txt);
color: var(--color-bg);
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
@media #{$small} {
height: calc(var(--h-block)*0.75);
font-size: var(--fs-xsmall);
padding: 0 1ch;
padding-top: 3px;
}
}

51
assets/css/components/_figures.scss
View file

@ -1,11 +1,10 @@
@mixin figure-16-9{
& > picture,
@mixin figure-16-9{
& > figure{
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
img{
img, picture{
width: 100%;
height: 100%;
object-fit: cover;
@ -16,49 +15,3 @@
}
@mixin figure-3-1(){
& > picture,
& > figure{
aspect-ratio: 3/1;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
// @mixin figure-2-1(){
// & > picture,
// & > figure{
// aspect-ratio: 2/1;
// overflow: hidden;
// img{
// width: 100%;
// height: 100%;
// object-fit: cover;
// }
// }
// }
// @mixin figure-16-9-hover{
// figure{
// aspect-ratio: 16/9;
// display: flex;
// overflow: hidden;
// img{
// width: 100%;
// height: 100%;
// object-fit: cover;
// transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
// }
// }
// &:hover{
// figure img{ transform: scale(1.05); }
// }
// }

6
assets/css/partials/_main-layout.scss
View file

@ -17,11 +17,15 @@ body{
min-height: 100dvh;
min-height: 100vh;
.page__header,
.page__content{
max-width: var(--max-w-cards);
margin-inline: auto;
}
.page__header{
max-width: var(--max-w-cards);
margin-inline: auto;
}
}

44
assets/css/partials/_page-header.scss
View file

@ -1,40 +1,9 @@
.page__type{
height: calc(var(--h-block)*1);
border-radius: var(--radius-small);
border: var(--border-medium);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding-top: 5px;
font-size: var(--fs-small);
background-color: var(--color-bg);
color: var(--color-txt-light);
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
@media #{$small} {
height: calc(var(--h-block)*0.75);
font-size: var(--fs-xsmall);
padding: 0 1ch;
padding-top: 3px;
}
}
main .page__header {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 2);
@media #{$small} {
margin-top: calc(var(--spacing) * 1);
@ -61,11 +30,18 @@ main .page__header {
}
.description {
.date{
display: block;
margin-top: calc(var(--spacing) * -1);
margin-bottom: calc(var(--spacing) * 1.5);
color: var(--color-txt-light);
}
.page__description {
font-size: var(--fs-text);
margin-bottom: calc(var(--spacing) * 3);
max-width: var(--max-w-content);
// @media #{$small} {
// font-size: var(--fs-small);
// font-weight: 500;

125
assets/css/style.css
View file

@ -668,6 +668,58 @@ button:disabled {
white-space: nowrap;
}
.page__type {
height: calc(var(--h-block) * 1);
border-radius: var(--radius-small);
border: var(--border-medium);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding-top: 5px;
font-size: var(--fs-small);
background-color: var(--color-bg);
color: var(--color-txt-light);
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
}
@media screen and (max-width: 768px) {
.page__type {
height: calc(var(--h-block) * 0.75);
font-size: var(--fs-xsmall);
padding: 0 1ch;
padding-top: 3px;
}
}
.page__category {
height: calc(var(--h-block) * 1);
border-radius: var(--radius-small);
margin-left: calc(var(--padding-inner) * 0.25);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding-top: 5px;
font-size: var(--fs-small);
background-color: var(--color-txt);
color: var(--color-bg);
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
}
@media screen and (max-width: 768px) {
.page__category {
height: calc(var(--h-block) * 0.75);
font-size: var(--fs-xsmall);
padding: 0 1ch;
padding-top: 3px;
}
}
.keywords {
list-style: none;
display: flex;
@ -1316,12 +1368,12 @@ button.sort[data-sort-type=up] .arrow {
flex-direction: column;
padding: var(--padding-inner);
}
.card--article > picture, .card--article > figure {
.card--article > figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
.card--article > picture img, .card--article > figure img {
.card--article > figure img, .card--article > figure picture {
width: 100%;
height: 100%;
-o-object-fit: cover;
@ -1485,16 +1537,15 @@ button.sort[data-sort-type=up] .arrow {
.card--article-small:first-of-type {
border-top: var(--border-light);
}
.card--package > picture, .card--package > figure,
.card--article-small > picture,
.card--package > figure,
.card--article-small > figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
.card--package > picture img, .card--package > figure img,
.card--article-small > picture img,
.card--article-small > figure img {
.card--package > figure img, .card--package > figure picture,
.card--article-small > figure img,
.card--article-small > figure picture {
width: 100%;
height: 100%;
-o-object-fit: cover;
@ -1713,12 +1764,12 @@ button.sort[data-sort-type=up] .arrow {
.card--block:hover::before {
border-color: var(--color-txt);
}
.card--block > picture, .card--block > figure {
.card--block > figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
.card--block > picture img, .card--block > figure img {
.card--block > figure img, .card--block > figure picture {
width: 100%;
height: 100%;
-o-object-fit: cover;
@ -1772,17 +1823,31 @@ button.sort[data-sort-type=up] .arrow {
.card--block .investigations {
text-decoration: none;
list-style: none;
padding-top: calc(var(--spacing) * 0.5);
width: 100%;
z-index: 100;
}
.card--block .investigations li {
font-size: var(--fs-small);
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-txt-light);
font-size: var(--fs-small);
}
.card--block .investigations li a {
text-decoration: none;
color: var(--color-txt-light);
}
.card--block .investigations li a::before {
content: "↪ ";
}
.card--block .investigations li:hover a {
-webkit-text-decoration: underline 1px;
text-decoration: underline 1px;
text-underline-offset: 2px;
color: var(--color-txt);
}
.card--block .card--open-graph {
width: 100%;
margin: calc(var(--spacing) * 0.5) 0;
@ -2691,36 +2756,13 @@ body main {
min-height: 100dvh;
min-height: 100vh;
}
body main .page__header,
body main .page__content {
max-width: var(--max-w-cards);
margin-inline: auto;
}
.page__type {
height: calc(var(--h-block) * 1);
border-radius: var(--radius-small);
border: var(--border-medium);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding-top: 5px;
font-size: var(--fs-small);
background-color: var(--color-bg);
color: var(--color-txt-light);
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
}
@media screen and (max-width: 768px) {
.page__type {
height: calc(var(--h-block) * 0.75);
font-size: var(--fs-xsmall);
padding: 0 1ch;
padding-top: 3px;
}
body main .page__header {
max-width: var(--max-w-cards);
margin-inline: auto;
}
main .page__header {
@ -2752,9 +2794,16 @@ main .page__header .page__title {
margin-bottom: calc(var(--spacing) * 1);
}
}
main .page__header .description {
main .page__header .date {
display: block;
margin-top: calc(var(--spacing) * -1);
margin-bottom: calc(var(--spacing) * 1.5);
color: var(--color-txt-light);
}
main .page__header .page__description {
font-size: var(--fs-text);
margin-bottom: calc(var(--spacing) * 3);
max-width: var(--max-w-content);
}
.container-cards {
@ -2873,7 +2922,7 @@ main .page__header .description {
max-width: var(--max-w-content);
margin-bottom: 0px;
}
[data-template=investigation] main .page__header .description {
[data-template=investigation] main .page__header .page__description {
margin-bottom: 0px;
}
[data-template=investigation] main .page__content {

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

2
assets/css/template/_investigation.scss
View file

@ -8,7 +8,7 @@
margin-bottom: 0px;
.description{
.page__description{
margin-bottom: 0px;
}
}