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-xsmall: 10px;
--fs-small: 12px;
--fs-normal: 16px;
--fs-medium: 20px;
--fs-small: 16px;
--fs-normal: 20px;
--fs-medium: 24px;
--fs-big: 30px;
--fs-xbig: 38px;

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

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

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

@ -24,21 +24,10 @@
@include figure-16-9();
figure{
margin-left: 45px;
@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{
display: flex;
flex-direction: column;
@ -47,12 +36,13 @@
}
.title{
font-weight: normal;
font-size: var(--fs-medium);
font-weight: 400;
font-size: var(--fs-small);
margin-bottom: 0.25em;
text-wrap: balance;
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
line-height: 1.1;
a{ text-decoration: none;}
}
@ -65,7 +55,7 @@
.description{
@include clamp(2);
margin-bottom: calc(var(--spacing)*0.75);
margin-top: calc(var(--spacing)*0.25);
}
@ -73,6 +63,7 @@
@include btn--go-to();
@include hover-card-line();
.keywords{ display: none; }
@media #{$medium}{
.title{

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

@ -18,8 +18,9 @@
.title{
flex-grow: 1;
font-weight: normal;
font-size: var(--fs-medium);
font-weight: 500;
font-size: var(--fs-small);
margin-bottom: 0.25em;
text-wrap: balance;
max-width: 42ch;
@ -33,6 +34,8 @@
.icon{
padding-right: 1ch;
position: relative;
top: 1px;
svg{
height: 15px;
width: 15px;
@ -97,28 +100,10 @@
}
figure{
margin-left: 45px;
@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 {
// max-width: 68ch;
font-size: var(--fs-medium);
// font-size: var(--fs-medium);
max-width: 58ch;
line-height: 1.1;
}
.description-medium{
font-size: var(--fs-medium);
// font-size: var(--fs-medium);
max-width: 58ch;
line-height: 1.1;
}

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

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

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

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

91
assets/css/style.css
View file

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

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

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

8
assets/fonts/stylesheet.css
View file

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

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

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