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

style page-single
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-24 17:42:51 +01:00
parent 7b3ebb3ca4
commit f61b6e8840
9 changed files with 264 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

96
assets/css/components/_text.scss
View file

@ -0,0 +1,96 @@
.main__single .page__content,
#investigation__content{
font-size: var(--fs-text);
p, li, ul{
font-size: var(--fs-text);
}
h3, h4, h5{
font-weight: 500;
max-width: var(--max-w-content);
margin-inline: auto;
}
h3 {
margin-top: calc(var(--spacing)*4);
margin-bottom: calc(var(--spacing)*2);
font-size: 1.45em;
text-transform: uppercase;
}
h4 {
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*1.5);
font-size: 1.2em;
text-transform: uppercase;
}
h5 {
margin-top: calc(var(--spacing)*1.5);
margin-bottom: calc(var(--spacing)*1);
font-size: 1.2em;
text-decoration: 1px underline var(--grey-600);
text-underline-offset: 5px;
}
p {
margin: calc(var(--spacing)*0.75) 0;
}
ul {
padding-left: 3ch;
li{
margin: calc(var(--spacing)*0.5) 0;
}
}
figcaption, .caption{
font-size: var(--fs-small);
color: var(--color-txt-light);
font-weight: 500;
line-height: 1.1;
margin: calc(var(--spacing) * 0.5) 0!important;
}
video, figure, img, picture{
width: 100%;
}
.insert{
max-width: var(--max-w-cards);
margin-inline: auto;
border: 1px solid var(--grey-600);
padding: calc(var(--padding-inner)*3);
background-color: var(--grey-800);
.insert--inner{
max-width: var(--max-w-content);
margin-inline: auto;
}
h3, h4, h5{
margin-top: 0;
}
}
& > .insert,
& > .swiper,
& > .slider-before-after,
& > figure{
margin-top: calc(var(--spacing)*2);
margin-bottom: calc(var(--spacing)*2);
& + .caption{
margin-top: calc(var(--spacing)*-1.5)!important;
}
}
}

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

@ -42,13 +42,6 @@ main .page__header {
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
max-width: var(--max-w-content); max-width: var(--max-w-content);
// @media #{$small} {
// font-size: var(--fs-small);
// font-weight: 500;
// border-top: var(--border-light);
// }
} }
} }

184
assets/css/style.css
View file

@ -1361,6 +1361,110 @@ button.sort[data-sort-type=up] .arrow {
right: 16px; right: 16px;
} }
} }
.main__single .page__content,
#investigation__content {
font-size: var(--fs-text);
}
.main__single .page__content p, .main__single .page__content li, .main__single .page__content ul,
#investigation__content p,
#investigation__content li,
#investigation__content ul {
font-size: var(--fs-text);
}
.main__single .page__content h3, .main__single .page__content h4, .main__single .page__content h5,
#investigation__content h3,
#investigation__content h4,
#investigation__content h5 {
font-weight: 500;
max-width: var(--max-w-content);
margin-inline: auto;
}
.main__single .page__content h3,
#investigation__content h3 {
margin-top: calc(var(--spacing) * 4);
margin-bottom: calc(var(--spacing) * 2);
font-size: 1.45em;
text-transform: uppercase;
}
.main__single .page__content h4,
#investigation__content h4 {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 1.5);
font-size: 1.2em;
text-transform: uppercase;
}
.main__single .page__content h5,
#investigation__content h5 {
margin-top: calc(var(--spacing) * 1.5);
margin-bottom: calc(var(--spacing) * 1);
font-size: 1.2em;
-webkit-text-decoration: 1px underline var(--grey-600);
text-decoration: 1px underline var(--grey-600);
text-underline-offset: 5px;
}
.main__single .page__content p,
#investigation__content p {
margin: calc(var(--spacing) * 0.75) 0;
}
.main__single .page__content ul,
#investigation__content ul {
padding-left: 3ch;
}
.main__single .page__content ul li,
#investigation__content ul li {
margin: calc(var(--spacing) * 0.5) 0;
}
.main__single .page__content figcaption, .main__single .page__content .caption,
#investigation__content figcaption,
#investigation__content .caption {
font-size: var(--fs-small);
color: var(--color-txt-light);
font-weight: 500;
line-height: 1.1;
margin: calc(var(--spacing) * 0.5) 0 !important;
}
.main__single .page__content video, .main__single .page__content figure, .main__single .page__content img, .main__single .page__content picture,
#investigation__content video,
#investigation__content figure,
#investigation__content img,
#investigation__content picture {
width: 100%;
}
.main__single .page__content .insert,
#investigation__content .insert {
max-width: var(--max-w-cards);
margin-inline: auto;
border: 1px solid var(--grey-600);
padding: calc(var(--padding-inner) * 3);
background-color: var(--grey-800);
}
.main__single .page__content .insert .insert--inner,
#investigation__content .insert .insert--inner {
max-width: var(--max-w-content);
margin-inline: auto;
}
.main__single .page__content .insert h3, .main__single .page__content .insert h4, .main__single .page__content .insert h5,
#investigation__content .insert h3,
#investigation__content .insert h4,
#investigation__content .insert h5 {
margin-top: 0;
}
.main__single .page__content > .insert, .main__single .page__content > .swiper, .main__single .page__content > .slider-before-after, .main__single .page__content > figure,
#investigation__content > .insert,
#investigation__content > .swiper,
#investigation__content > .slider-before-after,
#investigation__content > figure {
margin-top: calc(var(--spacing) * 2);
margin-bottom: calc(var(--spacing) * 2);
}
.main__single .page__content > .insert + .caption, .main__single .page__content > .swiper + .caption, .main__single .page__content > .slider-before-after + .caption, .main__single .page__content > figure + .caption,
#investigation__content > .insert + .caption,
#investigation__content > .swiper + .caption,
#investigation__content > .slider-before-after + .caption,
#investigation__content > figure + .caption {
margin-top: calc(var(--spacing) * -1.5) !important;
}
.card--article { .card--article {
border: var(--border-light); border: var(--border-light);
position: relative; position: relative;
@ -2914,6 +3018,31 @@ main .page__header .page__description {
} }
} }
.main__single .page__header {
max-width: var(--max-w-content);
border-bottom: var(--border-light);
padding-bottom: calc(var(--spacing) * 1);
}
.main__single .page__header .page__description {
margin-bottom: calc(var(--spacing) * 1);
}
.main__single .page__header > figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
.main__single .page__header > figure img, .main__single .page__header > figure picture {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
.main__single .page__content {
max-width: var(--max-w-content);
margin-top: calc(var(--spacing) * 3);
}
[data-template=investigation] main { [data-template=investigation] main {
position: relative; position: relative;
} }
@ -2940,9 +3069,6 @@ main .page__header .page__description {
margin-bottom: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2);
} }
} }
[data-template=investigation] main .investigation__content {
font-size: var(--fs-text);
}
[data-template=investigation] main #investigation__dl { [data-template=investigation] main #investigation__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);
@ -2992,46 +3118,10 @@ main .page__header .page__description {
#investigation__content .section-title-only { #investigation__content .section-title-only {
margin-bottom: 0; margin-bottom: 0;
} }
#investigation__content h3, #investigation__content h4, #investigation__content h5 {
font-weight: 500;
max-width: var(--max-w-content);
margin-inline: auto;
}
#investigation__content h3 {
margin-top: calc(var(--spacing) * 4);
margin-bottom: calc(var(--spacing) * 2);
font-size: 1.45em;
text-transform: uppercase;
}
#investigation__content h4 {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 1.5);
font-size: 1.2em;
text-transform: uppercase;
}
#investigation__content h5 {
margin-top: calc(var(--spacing) * 1.5);
margin-bottom: calc(var(--spacing) * 1);
font-size: 1.2em;
-webkit-text-decoration: 1px underline var(--grey-600);
text-decoration: 1px underline var(--grey-600);
text-underline-offset: 5px;
}
#investigation__content .section-txt { #investigation__content .section-txt {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin-inline: auto; margin-inline: auto;
} }
#investigation__content .insert {
max-width: var(--max-w-cards);
margin-inline: auto;
border: 1px solid var(--grey-600);
padding: calc(var(--padding-inner) * 3);
background-color: var(--grey-800);
}
#investigation__content .insert .insert--inner {
max-width: var(--max-w-content);
margin-inline: auto;
}
#investigation__content .subsection-txt .insert { #investigation__content .subsection-txt .insert {
margin-top: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2);
margin-bottom: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2);
@ -3137,15 +3227,6 @@ main .page__header .page__description {
gap: 8px; gap: 8px;
z-index: 10; z-index: 10;
} }
#investigation__content p {
margin: calc(var(--spacing) * 0.75) 0;
}
#investigation__content ul {
padding-left: 3ch;
}
#investigation__content ul li {
margin: calc(var(--spacing) * 0.5) 0;
}
#investigation__content .insert--inner > :last-child { #investigation__content .insert--inner > :last-child {
margin-bottom: 0px; margin-bottom: 0px;
} }
@ -3165,13 +3246,6 @@ main .page__header .page__description {
.media figure { .media figure {
height: auto; height: auto;
} }
.media figcaption, .media .caption {
font-size: var(--fs-small);
color: var(--color-txt-light);
font-weight: 500;
line-height: 1.1;
margin: calc(var(--spacing) * 0.5) 0 !important;
}
.content-package { .content-package {
max-width: var(--max-w-cards); max-width: var(--max-w-cards);

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

File diff suppressed because one or more lines are too long

1
assets/css/style.scss
View file

@ -40,6 +40,7 @@
@import "partials/container-cards"; @import "partials/container-cards";
@import "template/home"; @import "template/home";
@import "template/page-single";
@import "template/investigation"; @import "template/investigation";
@import "template/investigation_content"; @import "template/investigation_content";
@import "template/package"; @import "template/package";

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

@ -29,9 +29,6 @@
} }
} }
.investigation__content{
font-size: var(--fs-text);
}
@ -87,5 +84,6 @@
} }

62
assets/css/template/_investigation_content.scss
View file

@ -10,35 +10,6 @@
} }
h3, h4, h5{
font-weight: 500;
max-width: var(--max-w-content);
margin-inline: auto;
}
h3 {
margin-top: calc(var(--spacing)*4);
margin-bottom: calc(var(--spacing)*2);
font-size: 1.45em;
text-transform: uppercase;
}
h4 {
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*1.5);
font-size: 1.2em;
text-transform: uppercase;
}
h5 {
margin-top: calc(var(--spacing)*1.5);
margin-bottom: calc(var(--spacing)*1);
font-size: 1.2em;
text-decoration: 1px underline var(--grey-600);
text-underline-offset: 5px;
}
.section-txt{ .section-txt{
@ -49,18 +20,7 @@
} }
.insert{
max-width: var(--max-w-cards);
margin-inline: auto;
border: 1px solid var(--grey-600);
padding: calc(var(--padding-inner)*3);
background-color: var(--grey-800);
.insert--inner{
max-width: var(--max-w-content);
margin-inline: auto;
}
}
.subsection-txt .insert{ .subsection-txt .insert{
margin-top: calc(var(--spacing)*2); margin-top: calc(var(--spacing)*2);
@ -71,7 +31,6 @@
.subsection-txt { .subsection-txt {
max-width: var(--max-w-content); max-width: var(--max-w-content);
} }
@ -199,17 +158,7 @@
p {
margin: calc(var(--spacing)*0.75) 0;
}
ul {
padding-left: 3ch;
li{
margin: calc(var(--spacing)*0.5) 0;
}
}
.insert--inner > :last-child{ .insert--inner > :last-child{
@ -237,16 +186,5 @@
height: auto; height: auto;
} }
figcaption, .caption{
font-size: var(--fs-small);
color: var(--color-txt-light);
font-weight: 500;
line-height: 1.1;
margin: calc(var(--spacing) * 0.5) 0!important;
}
// .swiper{
// width: calc(100% - 60px);
// max-width: 600px;
// }
} }

23
assets/css/template/_page-single.scss Normal file
View file

@ -0,0 +1,23 @@
.main__single {
.page__header{
max-width: var(--max-w-content);
border-bottom: var(--border-light);
padding-bottom: calc(var(--spacing)*1);
.page__description{
margin-bottom: calc(var(--spacing)*1);
}
@include figure-16-9();
}
.page__content{
max-width: var(--max-w-content);
margin-top: calc(var(--spacing)*3);
}
}

17
site/templates/impact.php
View file

@ -1,6 +1,6 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main> <main class="main__single">
<header class="page__header"> <header class="page__header">
<p class="page__type">Impact</p> <p class="page__type">Impact</p>
@ -18,21 +18,22 @@
<?php if ($page->chapo()->isNotEmpty()): ?> <?php if ($page->chapo()->isNotEmpty()): ?>
<p class="page__description"><?= $page->chapo()->inline() ?></p> <p class="page__description"><?= $page->chapo()->inline() ?></p>
<?php endif ?> <?php endif ?>
<?php if ($cover = $page->cover()->toFile()): ?>
<figure class="page__cover">
<?php snippet('picture', ['file' => $cover]) ?>
</figure>
<?php endif ?>
</header> </header>
<div class="page__content"> <div class="page__content">
<?php if ($cover = $page->cover()->toFile()): ?>
<figure class="impact__cover">
<?php snippet('picture', ['file' => $cover]) ?>
</figure>
<?php endif ?>
<?php if ($page->body()->isNotEmpty()): ?> <?php if ($page->body()->isNotEmpty()): ?>
<div class="impact__body">
<?= $page->body()->toBlocks() ?> <?= $page->body()->toBlocks() ?>
</div>
<?php endif ?> <?php endif ?>
<?php $investigations = $page->linkedInvestigations()->toPages() ?> <?php $investigations = $page->linkedInvestigations()->toPages() ?>