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

mofifications w/ Francesco
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m18s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-03 08:24:43 +01:00
parent 54a33a274b
commit 193577b145
13 changed files with 101 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/css/base/_var.scss
View file

@ -9,9 +9,9 @@
// --fs-big: 38px; // --fs-big: 38px;
--fs-xsmall: 10px; --fs-xsmall: 10px;
--fs-small: 12px; --fs-small: 16px;
--fs-normal: 16px; --fs-normal: 20px;
--fs-medium: 20px; --fs-medium: 24px;
--fs-big: 30px; --fs-big: 30px;
--fs-xbig: 38px; --fs-xbig: 38px;

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

@ -35,10 +35,11 @@ button:disabled{
.btn--small{ .btn--small{
height: calc(var(--h-block)*0.75); height: calc(var(--h-block)*1);
border: var(--border-light); border: var(--border-light);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
font-size: var(--fs-small); font-size: var(--fs-small);
font-weight: 500;
line-height: 1; line-height: 1;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -99,6 +100,7 @@ button:disabled{
border: var(--border); border: var(--border);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
font-size: var(--fs-small); font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
line-height: 1; line-height: 1;
overflow: hidden; overflow: hidden;

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

@ -24,20 +24,9 @@
@include figure-16-9(); @include figure-16-9();
figure{ figure{
margin-left: 45px;
@media #{$x-small}{ margin-left: 0px; } @media #{$x-small}{ margin-left: 0px; }
} }
.icon-article{
position: absolute;
left: 10px;
padding-top: calc(var(--spacing)*0.5);
svg{
width: 20px;
fill: var(--color-txt);
}
}
.content{ .content{
display: flex; display: flex;
@ -47,12 +36,13 @@
} }
.title{ .title{
font-weight: normal; font-weight: 400;
font-size: var(--fs-medium); font-size: var(--fs-small);
margin-bottom: 0.25em; margin-bottom: 0.25em;
text-wrap: balance; text-wrap: balance;
max-width: 42ch; max-width: 42ch;
text-transform: uppercase; text-transform: uppercase;
line-height: 1.1;
a{ text-decoration: none;} a{ text-decoration: none;}
} }
@ -65,7 +55,7 @@
.description{ .description{
@include clamp(2); @include clamp(2);
margin-bottom: calc(var(--spacing)*0.75); margin-bottom: calc(var(--spacing)*0.75);
margin-top: calc(var(--spacing)*0.25);
} }
@ -73,6 +63,7 @@
@include btn--go-to(); @include btn--go-to();
@include hover-card-line(); @include hover-card-line();
.keywords{ display: none; }
@media #{$medium}{ @media #{$medium}{
.title{ .title{

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

@ -18,8 +18,9 @@
.title{ .title{
flex-grow: 1; flex-grow: 1;
font-weight: normal; font-weight: 500;
font-size: var(--fs-medium); font-size: var(--fs-small);
margin-bottom: 0.25em; margin-bottom: 0.25em;
text-wrap: balance; text-wrap: balance;
max-width: 42ch; max-width: 42ch;
@ -33,6 +34,8 @@
.icon{ .icon{
padding-right: 1ch; padding-right: 1ch;
position: relative;
top: 1px;
svg{ svg{
height: 15px; height: 15px;
width: 15px; width: 15px;
@ -97,28 +100,10 @@
} }
figure{ figure{
margin-left: 45px;
@media #{$x-small}{ margin-left: 0px; } @media #{$x-small}{ margin-left: 0px; }
} }
.title .icon{
display: none;
}
.icon-folder{
position: absolute;
left: 10px;
padding-top: calc(var(--spacing)*0.5);
@media #{$x-small}{ display: none; }
svg{
width: 20px;
fill: var(--color-txt);
}
}
} }

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

@ -47,13 +47,13 @@ main .page__header {
.description { .description {
// max-width: 68ch; // max-width: 68ch;
font-size: var(--fs-medium); // font-size: var(--fs-medium);
max-width: 58ch; max-width: 58ch;
line-height: 1.1; line-height: 1.1;
} }
.description-medium{ .description-medium{
font-size: var(--fs-medium); // font-size: var(--fs-medium);
max-width: 58ch; max-width: 58ch;
line-height: 1.1; line-height: 1.1;
} }

4
assets/css/partials/_site-header.scss
View file

@ -65,6 +65,7 @@
align-items: center; align-items: center;
gap: var(--gap); gap: var(--gap);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500;
} }
@ -85,6 +86,9 @@
#lang-toggle{ #lang-toggle{
display: flex; display: flex;
gap: 1ch; gap: 1ch;
button{
font-weight: 500;
}
button:disabled{ color: var(--color-txt-light); } button:disabled{ color: var(--color-txt-light); }
} }

1
assets/css/partials/_site-menu.scss
View file

@ -33,6 +33,7 @@
ul{ ul{
list-style-type: none; list-style-type: none;
text-transform: uppercase; text-transform: uppercase;
font-weight: 500;
li{ li{
font-size: var(--fs-normal); font-size: var(--fs-normal);
a{ a{

91
assets/css/style.css
View file

@ -3,9 +3,9 @@
--font: "Executive", Arial, sans-serif; --font: "Executive", Arial, sans-serif;
--title: "System", Arial, sans-serif; --title: "System", Arial, sans-serif;
--fs-xsmall: 10px; --fs-xsmall: 10px;
--fs-small: 12px; --fs-small: 16px;
--fs-normal: 16px; --fs-normal: 20px;
--fs-medium: 20px; --fs-medium: 24px;
--fs-big: 30px; --fs-big: 30px;
--fs-xbig: 38px; --fs-xbig: 38px;
--fs-button-bold: 22px; --fs-button-bold: 22px;
@ -204,6 +204,7 @@ body.is-hidden .btn--back-to-top {
align-items: center; align-items: center;
gap: var(--gap); gap: var(--gap);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500;
} }
#site-header #theme-toggle { #site-header #theme-toggle {
width: var(--h-block); width: var(--h-block);
@ -221,6 +222,9 @@ body.is-hidden .btn--back-to-top {
display: flex; display: flex;
gap: 1ch; gap: 1ch;
} }
#site-header #lang-toggle button {
font-weight: 500;
}
#site-header #lang-toggle button:disabled { #site-header #lang-toggle button:disabled {
color: var(--color-txt-light); color: var(--color-txt-light);
} }
@ -277,10 +281,11 @@ button:disabled {
} }
.btn--small { .btn--small {
height: calc(var(--h-block) * 0.75); height: calc(var(--h-block) * 1);
border: var(--border-light); border: var(--border-light);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
font-size: var(--fs-small); font-size: var(--fs-small);
font-weight: 500;
line-height: 1; line-height: 1;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -339,6 +344,7 @@ button:disabled {
border: var(--border); border: var(--border);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
font-size: var(--fs-small); font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
line-height: 1; line-height: 1;
overflow: hidden; overflow: hidden;
@ -1289,23 +1295,11 @@ button.sort[data-sort-type=up] .arrow {
object-fit: cover; object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
} }
.card--article-small figure {
margin-left: 45px;
}
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
.card--article-small figure { .card--article-small figure {
margin-left: 0px; margin-left: 0px;
} }
} }
.card--article-small .icon-article {
position: absolute;
left: 10px;
padding-top: calc(var(--spacing) * 0.5);
}
.card--article-small .icon-article svg {
width: 20px;
fill: var(--color-txt);
}
.card--article-small .content { .card--article-small .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1313,12 +1307,13 @@ button.sort[data-sort-type=up] .arrow {
padding-right: calc(var(--padding-inner) * 3); padding-right: calc(var(--padding-inner) * 3);
} }
.card--article-small .title { .card--article-small .title {
font-weight: normal; font-weight: 400;
font-size: var(--fs-medium); font-size: var(--fs-small);
margin-bottom: 0.25em; margin-bottom: 0.25em;
text-wrap: balance; text-wrap: balance;
max-width: 42ch; max-width: 42ch;
text-transform: uppercase; text-transform: uppercase;
line-height: 1.1;
} }
.card--article-small .title a { .card--article-small .title a {
text-decoration: none; text-decoration: none;
@ -1333,6 +1328,7 @@ button.sort[data-sort-type=up] .arrow {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
margin-bottom: calc(var(--spacing) * 0.75); margin-bottom: calc(var(--spacing) * 0.75);
margin-top: calc(var(--spacing) * 0.25);
} }
.card--article-small .btn--go-to { .card--article-small .btn--go-to {
position: absolute; position: absolute;
@ -1381,6 +1377,9 @@ button.sort[data-sort-type=up] .arrow {
.card--article-small:hover::before { .card--article-small:hover::before {
border-color: var(--color-txt); border-color: var(--color-txt);
} }
.card--article-small .keywords {
display: none;
}
@media screen and (max-width: 1080px) { @media screen and (max-width: 1080px) {
.card--article-small .title { .card--article-small .title {
font-size: var(--fs-normal); font-size: var(--fs-normal);
@ -1883,8 +1882,8 @@ button.sort[data-sort-type=up] .arrow {
} }
.card--folder .title { .card--folder .title {
flex-grow: 1; flex-grow: 1;
font-weight: normal; font-weight: 500;
font-size: var(--fs-medium); font-size: var(--fs-small);
margin-bottom: 0.25em; margin-bottom: 0.25em;
text-wrap: balance; text-wrap: balance;
max-width: 42ch; max-width: 42ch;
@ -1901,6 +1900,8 @@ button.sort[data-sort-type=up] .arrow {
} }
.card--folder .title .icon { .card--folder .title .icon {
padding-right: 1ch; padding-right: 1ch;
position: relative;
top: 1px;
} }
.card--folder .title .icon svg { .card--folder .title .icon svg {
height: 15px; height: 15px;
@ -1999,31 +2000,11 @@ button.sort[data-sort-type=up] .arrow {
[data-template=investigation-summary] .card--folder.has-link:hover::before { [data-template=investigation-summary] .card--folder.has-link:hover::before {
border-color: var(--color-txt); border-color: var(--color-txt);
} }
[data-template=investigation-summary] .card--folder figure {
margin-left: 45px;
}
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
[data-template=investigation-summary] .card--folder figure { [data-template=investigation-summary] .card--folder figure {
margin-left: 0px; margin-left: 0px;
} }
} }
[data-template=investigation-summary] .card--folder .title .icon {
display: none;
}
[data-template=investigation-summary] .card--folder .icon-folder {
position: absolute;
left: 10px;
padding-top: calc(var(--spacing) * 0.5);
}
@media screen and (max-width: 560px) {
[data-template=investigation-summary] .card--folder .icon-folder {
display: none;
}
}
[data-template=investigation-summary] .card--folder .icon-folder svg {
width: 20px;
fill: var(--color-txt);
}
@container cardfolder (width < 680px) { @container cardfolder (width < 680px) {
figure { figure {
@ -2310,6 +2291,7 @@ button.sort[data-sort-type=up] .arrow {
align-items: center; align-items: center;
gap: var(--gap); gap: var(--gap);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500;
} }
#site-header #theme-toggle { #site-header #theme-toggle {
width: var(--h-block); width: var(--h-block);
@ -2327,6 +2309,9 @@ button.sort[data-sort-type=up] .arrow {
display: flex; display: flex;
gap: 1ch; gap: 1ch;
} }
#site-header #lang-toggle button {
font-weight: 500;
}
#site-header #lang-toggle button:disabled { #site-header #lang-toggle button:disabled {
color: var(--color-txt-light); color: var(--color-txt-light);
} }
@ -2385,6 +2370,7 @@ button.sort[data-sort-type=up] .arrow {
#site-menu nav ul { #site-menu nav ul {
list-style-type: none; list-style-type: none;
text-transform: uppercase; text-transform: uppercase;
font-weight: 500;
} }
#site-menu nav ul li { #site-menu nav ul li {
font-size: var(--fs-normal); font-size: var(--fs-normal);
@ -2544,12 +2530,10 @@ main .page__header .page__title {
text-wrap: balance; text-wrap: balance;
} }
main .page__header .description { main .page__header .description {
font-size: var(--fs-medium);
max-width: 58ch; max-width: 58ch;
line-height: 1.1; line-height: 1.1;
} }
main .page__header .description-medium { main .page__header .description-medium {
font-size: var(--fs-medium);
max-width: 58ch; max-width: 58ch;
line-height: 1.1; line-height: 1.1;
} }
@ -2697,10 +2681,9 @@ main .page__header .description-medium {
display: block; display: block;
} }
#home__hero .baseline { #home__hero .baseline {
font-family: var(--title);
font-size: 45px; font-size: 45px;
line-height: 1.1; line-height: 1.1;
max-width: 26ch; max-width: 32ch;
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
#home__hero .baseline { #home__hero .baseline {
@ -2718,6 +2701,10 @@ main .page__header .description-medium {
[data-template=investigation-summary] main { [data-template=investigation-summary] main {
position: relative; position: relative;
} }
[data-template=investigation-summary] main .page__header {
margin-inline: auto;
max-width: var(--max-w-content);
}
[data-template=investigation-summary] main .panel-left { [data-template=investigation-summary] main .panel-left {
width: calc((100vw - var(--max-w-cards) - var(--padding-body) * 4) * 0.5); width: calc((100vw - var(--max-w-cards) - var(--padding-body) * 4) * 0.5);
} }
@ -2743,6 +2730,8 @@ main .page__header .description-medium {
[data-template=investigation-summary] main .section__article { [data-template=investigation-summary] main .section__article {
margin-top: calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
max-width: var(--max-w-content);
margin-inline: auto;
} }
[data-template=investigation-summary] main .section__article:target { [data-template=investigation-summary] main .section__article:target {
padding-top: calc(var(--header-h) + var(--spacing) * 1); padding-top: calc(var(--header-h) + var(--spacing) * 1);
@ -2751,15 +2740,23 @@ main .page__header .description-medium {
color: var(--grey-200); color: var(--grey-200);
} }
[data-template=investigation-summary] main .section__article .section__title { [data-template=investigation-summary] main .section__article .section__title {
font-weight: normal; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1);
padding-right: 2ch; padding-right: 2ch;
text-wrap: balance; text-wrap: balance;
} }
[data-template=investigation-summary] main #section__dl,
[data-template=investigation-summary] main #section__impacts,
[data-template=investigation-summary] main #section__folder,
[data-template=investigation-summary] main #section__related-articles {
font-size: var(--fs-small);
}
[data-template=investigation-summary] main #section__dl { [data-template=investigation-summary] main #section__dl {
margin-top: calc(var(--spacing) * 1.5); margin-top: calc(var(--spacing) * 1.5);
border-bottom: var(--border-light); border-bottom: var(--border-light);
max-width: var(--max-w-content);
margin-inline: auto;
} }
[data-template=investigation-summary] main #section__dl .dl__group { [data-template=investigation-summary] main #section__dl .dl__group {
display: grid; display: grid;
@ -2784,7 +2781,7 @@ main .page__header .description-medium {
margin-inline: auto; margin-inline: auto;
} }
[data-template=investigation-summary] main #section__synthese p + p { [data-template=investigation-summary] main #section__synthese p + p {
margin-top: 0.5em; margin-top: 1em;
} }
[data-template=investigation-summary] main #section__synthese h4 { [data-template=investigation-summary] main #section__synthese h4 {
margin-top: 2em; margin-top: 2em;
@ -2817,7 +2814,7 @@ main .page__header .description-medium {
text-align: center; text-align: center;
color: var(--color-txt-light); color: var(--color-txt-light);
margin-bottom: 4px; margin-bottom: 4px;
font-weight: bold; font-weight: 500;
font-size: var(--fs-small); font-size: var(--fs-small);
} }
[data-template=investigation-summary] main .panel-left #nav--page ul li a { [data-template=investigation-summary] main .panel-left #nav--page ul li a {

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

File diff suppressed because one or more lines are too long

3
assets/css/template/_home.scss
View file

@ -176,10 +176,9 @@
} }
.baseline { .baseline {
font-family: var(--title);
font-size: 45px; font-size: 45px;
line-height: 1.1; line-height: 1.1;
max-width: 26ch; max-width: 32ch;
@media #{$x-small} { @media #{$x-small} {
font-size: 34px; font-size: 34px;

30
assets/css/template/_investigation-summary.scss
View file

@ -2,6 +2,11 @@
position: relative; position: relative;
.page__header{
margin-inline: auto;
max-width: var(--max-w-content);
}
@ -31,6 +36,8 @@
.section__article { .section__article {
margin-top: calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
max-width: var(--max-w-content);
margin-inline: auto;
&:target{ &:target{
padding-top: calc(var(--header-h) + var(--spacing)*1); padding-top: calc(var(--header-h) + var(--spacing)*1);
@ -41,7 +48,7 @@
} }
.section__title { .section__title {
font-weight: normal; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1);
padding-right: 2ch; padding-right: 2ch;
@ -50,10 +57,22 @@
} }
#section__dl,
#section__impacts,
#section__folder,
#section__related-articles{
font-size: var(--fs-small);
}
#section__dl { #section__dl {
margin-top: calc(var(--spacing) * 1.5); margin-top: calc(var(--spacing) * 1.5);
border-bottom: var(--border-light); border-bottom: var(--border-light);
max-width: var(--max-w-content);
margin-inline: auto;
.dl__group { .dl__group {
@include grid-content(); @include grid-content();
@ -83,7 +102,7 @@
margin-inline: auto; margin-inline: auto;
p+p { p+p {
margin-top: 0.5em; margin-top: 1em;
} }
h4 { h4 {
@ -114,7 +133,7 @@
#nav--page { #nav--page {
padding-bottom: var(--spacing); padding-bottom: var(--spacing);
width: calc(var(--panel-w)*0.5); width: calc(var(--panel-w)*0.5);
ul { ul {
list-style: none; list-style: none;
@ -122,7 +141,7 @@
text-align: center; text-align: center;
color: var(--color-txt-light); color: var(--color-txt-light);
margin-bottom: 4px; margin-bottom: 4px;
font-weight: bold; font-weight: 500;
font-size: var(--fs-small); font-size: var(--fs-small);
a { a {
@ -153,6 +172,9 @@
} }
// SMALL ---------------------------------------------------------- // SMALL ----------------------------------------------------------

8
assets/fonts/stylesheet.css
View file

@ -2,22 +2,22 @@
@font-face { @font-face {
font-family: "Executive"; font-family: "Executive";
src: url("Executive-55Regular.woff") format("woff"); src: url("Executive-55Regular.woff") format("woff");
font-weight: 300; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Executive"; font-family: "Executive";
src: url("Executive-56Italic.woff") format("woff"); src: url("Executive-56Italic.woff") format("woff");
font-weight: 300; font-weight: normal;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: "Executive"; font-family: "Executive";
src: url("Executive-65Medium.woff") format("woff"); src: url("Executive-65Medium.woff") format("woff");
font-weight: normal; font-weight: 500;
font-style: normal; font-style: 500;
} }
@font-face { @font-face {

2
site/templates/investigation-summary.php
View file

@ -319,7 +319,6 @@ if ($folder):
<h3 class="section__title">Dans le dossier</h3> <h3 class="section__title">Dans le dossier</h3>
<article class="card--folder"> <article class="card--folder">
<span class="icon-folder"><?= svg('assets/icons/folder.svg') ?></span>
<?php if ($cover = $folder->cover()->toFile()): ?> <?php if ($cover = $folder->cover()->toFile()): ?>
<figure> <figure>
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>"> <img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
@ -365,7 +364,6 @@ if ($folder):
<?php foreach ($relatedInvestigations as $related): ?> <?php foreach ($relatedInvestigations as $related): ?>
<article class="card--article-small"> <article class="card--article-small">
<span class="icon-article"><?= svg('assets/icons/article.svg') ?></span>
<?php if ($cover = $related->cover()->toFile()): ?> <?php if ($cover = $related->cover()->toFile()): ?>
<figure> <figure>