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

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

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