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

merge
Some checks failed
Deploy / Deploy to Production (push) Has been cancelled
Details

Browse source
This commit is contained in:
isUnknown 2026-01-13 14:12:50 +01:00
parent 4540c6e74b
commit 57b03d5a3d
3 changed files with 255 additions and 302 deletions
Download patch file Download diff file Expand all files Collapse all files

7
assets/css/style.css
View file

@ -1749,7 +1749,8 @@ body main {
[data-template=investigation-summary] main .section__article { [data-template=investigation-summary] main .section__article {
margin: calc(var(--spacing) * 1.5) 0; margin: calc(var(--spacing) * 1.5) 0;
} }
[data-template=investigation-summary] main #section__impacts, [data-template=investigation-summary] main #section__en-lien { [data-template=investigation-summary] main #section__impacts,
[data-template=investigation-summary] main #section__en-lien {
margin-top: 0px; margin-top: 0px;
} }
[data-template=investigation-summary] main #hero { [data-template=investigation-summary] main #hero {
@ -1878,8 +1879,8 @@ body main {
margin: 0 auto; margin: 0 auto;
} }
[data-template=investigation-summary] main header { [data-template=investigation-summary] main header {
margin-left: auto !important; margin-left: auto;
margin-right: auto !important; margin-right: auto;
} }
[data-template=investigation-summary] main .section__article { [data-template=investigation-summary] main .section__article {
max-width: var(--max-w-content); max-width: var(--max-w-content);

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

File diff suppressed because one or more lines are too long

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

@ -1,41 +1,34 @@
[data-template="investigation-summary"] main{ [data-template="investigation-summary"] main {
position: relative; position: relative;
header {
.page-title {
header{
.page-title{
text-transform: uppercase; text-transform: uppercase;
font-weight: normal; font-weight: normal;
font-size: var(--fs-big); font-size: var(--fs-big);
line-height: var(--leading-tight); line-height: var(--leading-tight);
margin-top: calc(var(--spacing)*1); margin-top: calc(var(--spacing) * 1);
} }
} }
.section__article{ .section__article {
a:hover{ a:hover {
color: var(--grey-200); color: var(--grey-200);
} }
.section__title{ .section__title {
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: calc(var(--spacing)*0.5) margin-bottom: calc(var(--spacing) * 0.5);
} }
} }
#nav--page {
ul {
#nav--page{
ul{
list-style: none; list-style: none;
li{ li {
text-align: center; text-align: center;
color: var(--color-txt-light); color: var(--color-txt-light);
a{ a {
display: block; display: block;
padding: 0.3em 0; padding: 0.3em 0;
text-decoration: none; text-decoration: none;
@ -44,118 +37,107 @@
} }
} }
#section__short{ #section__short {
font-size: var(--fs-medium); font-size: var(--fs-medium);
} }
#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);
.dl__group{ .dl__group {
@include grid-content(); @include grid-content();
border-top: var(--border-light); border-top: var(--border-light);
padding: calc(var(--spacing)*0.5) 0; padding: calc(var(--spacing) * 0.5) 0;
} }
dt{ dt {
color: var(--color-txt-light); color: var(--color-txt-light);
padding-right: 1ch; padding-right: 1ch;
} }
ul:not(.keywords){ ul:not(.keywords) {
list-style: none; list-style: none;
li{ li {
padding-bottom: 0.2em; padding-bottom: 0.2em;
} }
} }
} }
#section__synthese {
#section__synthese{ p + p {
p + p{
margin-top: 0.5em; margin-top: 0.5em;
} }
h4{ h4 {
margin-top: 2em; margin-top: 2em;
margin-bottom: 1em; margin-bottom: 1em;
font-size: var(--fs-normal); font-size: var(--fs-normal);
font-weight: normal; font-weight: normal;
text-decoration: 1px underline var(--color-txt-light); text-decoration: 1px underline var(--color-txt-light);
text-underline-offset: 3px; text-underline-offset: 3px;
} }
} }
} }
// SMALL ---------------------------------------------------------- // SMALL ----------------------------------------------------------
// ---------------------------------------------------------------- // ----------------------------------------------------------------
@media #{$small} {
@media #{$small}{ [data-template="investigation-summary"] main {
header {
[data-template="investigation-summary"] main{ padding-top: calc(var(--spacing) * 1);
.page-type {
header{
padding-top: calc(var(--spacing)*1);
.page-type{
font-size: var(--fs-small); font-size: var(--fs-small);
} }
} }
.section__article{ .section__article {
margin: calc(var(--spacing)*1.5) 0; margin: calc(var(--spacing) * 1.5) 0;
} }
#section__impacts, #section__en-lien{ #section__impacts,
#section__en-lien {
margin-top: 0px; margin-top: 0px;
} }
#hero{ #hero {
margin: calc(var(--spacing)*0.5) 0; margin: calc(var(--spacing) * 0.5) 0;
figcaption{ figcaption {
margin: 0 var(--padding-body); margin: 0 var(--padding-body);
} }
} }
.modal--share{ .modal--share {
position: absolute; position: absolute;
width: calc(100% - var(--padding-body)*2); width: calc(100% - var(--padding-body) * 2);
bottom: calc(var(--spacing) * 2); bottom: calc(var(--spacing) * 2);
} }
#banner--page { #banner--page {
padding: calc(var(--spacing)*0.5) 0; padding: calc(var(--spacing) * 0.5) 0;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
padding: calc(var(--spacing)*0.75) var(--padding-body); padding: calc(var(--spacing) * 0.75) var(--padding-body);
padding-top: var(--spacing); padding-top: var(--spacing);
background-color: var(--color-bg); background-color: var(--color-bg);
background: linear-gradient(0deg,var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%); background: linear-gradient(
0deg,
var(--color-bg) 0%,
var(--color-bg) 64%,
transparent 100%
);
z-index: 800; z-index: 800;
#nav--page{ #nav--page {
display: none; display: none;
} }
.btn--group{ .btn--group {
display: flex; display: flex;
gap: calc(var(--spacing)*0.25); gap: calc(var(--spacing) * 0.25);
position: relative; position: relative;
> button, > button,
@ -163,64 +145,47 @@
width: 50%; width: 50%;
cursor: pointer; cursor: pointer;
} }
} }
} }
// action // action
#banner--page{ #banner--page {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity .2s ease-in; transition: opacity 0.2s ease-in;
} }
#banner--page.is-visible{ #banner--page.is-visible {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
} }
} }
@media #{$x-small} {
[data-template="investigation-summary"] main {
@media #{$x-small}{ #section__dl .dl__group {
[data-template="investigation-summary"] main{
#section__dl .dl__group{
column-gap: 1ch; column-gap: 1ch;
font-size: var(--fs-small); font-size: var(--fs-small);
padding: calc(var(--spacing)*0.25) 0; padding: calc(var(--spacing) * 0.25) 0;
} }
} }
} }
// DESKTOP ---------------------------------------------------------- // DESKTOP ----------------------------------------------------------
// ---------------------------------------------------------------- // ----------------------------------------------------------------
@media #{$small-up} {
@media #{$small-up}{ [data-template="investigation-summary"] main {
#banner--page {
[data-template="investigation-summary"] main{
#banner--page{
height: calc(100vh - var(--header-h)); height: calc(100vh - var(--header-h));
height: calc(100dvh - var(--header-h)); height: calc(100dvh - var(--header-h));
margin-bottom: calc((100vh - var(--header-h))*-1); margin-bottom: calc((100vh - var(--header-h)) * -1);
margin-bottom: calc((100dvh - var(--header-h))*-1); margin-bottom: calc((100dvh - var(--header-h)) * -1);
padding: var(--padding-body); padding: var(--padding-body);
padding-left: 0px; padding-left: 0px;
padding-bottom: calc(var(--padding-body)*2); padding-bottom: calc(var(--padding-body) * 2);
position: sticky; position: sticky;
top: var(--header-h); top: var(--header-h);
width: var(--banner-medium); width: var(--banner-medium);
@ -229,11 +194,11 @@
justify-content: space-between; justify-content: space-between;
} }
#banner--page .btn--group{ #banner--page .btn--group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: calc(var(--spacing)*0.25); gap: calc(var(--spacing) * 0.25);
> button, > button,
> label { > label {
@ -241,86 +206,73 @@
max-width: 160px; max-width: 160px;
cursor: pointer; cursor: pointer;
} }
} }
#hero{ #hero {
margin-top: calc(var(--spacing)*1); margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing)*3); margin-bottom: calc(var(--spacing) * 3);
} }
.section__article{ .section__article {
margin-left: var(--banner-medium); margin-left: var(--banner-medium);
margin-top: calc(var(--spacing)*3); margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing)*3); margin-bottom: calc(var(--spacing) * 3);
} }
#section__short{ #section__short {
margin-top: var(--padding-body); margin-top: var(--padding-body);
} }
header {
header{
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin-left: var(--banner-medium); margin-left: var(--banner-medium);
margin-top: calc(var(--spacing)*1.5); margin-top: calc(var(--spacing) * 1.5);
margin-bottom: calc(var(--spacing)*0.5); margin-bottom: calc(var(--spacing) * 0.5);
} }
.section__article{ .section__article {
.section__title{ .section__title {
font-size: var(--fs-medium); font-size: var(--fs-medium);
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
} }
} }
#section__synthese{ #section__synthese {
font-size: var(--fs-medium); font-size: var(--fs-medium);
} }
} }
.modal--share{ .modal--share {
position: absolute; position: absolute;
bottom: calc(var(--padding-body)*2 + var(--h-block) + var(--spacing) * 0.25); bottom: calc(
var(--padding-body) * 2 + var(--h-block) + var(--spacing) * 0.25
);
width: calc(100% - var(--padding-body)); width: calc(100% - var(--padding-body));
} }
} }
@media #{$medium-up} {
[data-template="investigation-summary"] main {
#banner--page {
@media #{$medium-up}{ width: calc((100% - var(--max-w-content)) / 2);
[data-template="investigation-summary"] main{
#banner--page{
width: calc((100% - var(--max-w-content))/2);
} }
#hero{ #hero {
margin-top: 0; margin-top: 0;
margin-bottom: calc(var(--spacing)*3); margin-bottom: calc(var(--spacing) * 3);
figcaption{ figcaption {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin: 0 auto; margin: 0 auto;
} }
} }
header {
margin-left: auto;
header{ margin-right: auto;
margin-left: auto!important;
margin-right: auto!important;
} }
.section__article {
.section__article{
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin: calc(var(--spacing)*3) auto; margin: calc(var(--spacing) * 3) auto;
} }
} }
} }