Compare commits
67 commits
back_enque
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
54a33a274b | ||
|
|
453b29c246 | ||
|
|
b3f985a41b | ||
|
|
9ead1c51f4 | ||
|
|
dbf9097701 | ||
|
|
a0f0110fa6 | ||
|
|
80a606243e | ||
|
|
4fee638a93 | ||
|
|
3836144423 | ||
|
|
d3c5e5c39d | ||
|
|
951de348b8 | ||
|
|
1ea9f36aa1 | ||
|
|
8a4f9d6b64 | ||
|
|
a1554cfae0 | ||
|
|
4610cc4fe7 | ||
|
|
e6f62a62df | ||
|
|
849b506c50 | ||
|
|
50f4836be1 | ||
|
|
f28680f77e | ||
|
|
bd97c1c33e | ||
|
|
bee25e5922 | ||
|
|
05e49af352 | ||
|
|
84f67c88cc | ||
|
|
d5e458afd8 | ||
|
|
43ad7241d4 | ||
|
|
2f7473be0a | ||
|
|
d7a8611376 | ||
|
|
d28c90aefe | ||
|
|
9616e62906 | ||
|
|
24c85a758a | ||
|
|
770391fb52 | ||
|
|
57b03d5a3d | ||
|
|
4540c6e74b | ||
|
|
f9cdc18144 | ||
|
|
bfa3025a54 | ||
|
|
36a7262c83 | ||
|
|
4ff06a3adc | ||
|
|
3bd62f955f | ||
|
|
fe56d81c45 | ||
|
|
d758cd0843 | ||
|
|
dce79809bc | ||
|
|
0364f65771 | ||
|
|
1e6b241a98 | ||
|
|
b5c8a389c3 | ||
|
|
9444a59260 | ||
|
|
3e9f68e248 | ||
|
|
b158d37cec | ||
|
|
1eb88cf679 | ||
|
|
a2d918ed82 | ||
|
|
f2ca803842 | ||
|
|
a7f45c1ed6 | ||
|
|
eaf77e8975 | ||
|
|
672553f3aa | ||
|
|
2df3106031 | ||
|
|
3ea41b5cf0 | ||
|
|
5f4783f0b6 | ||
|
|
6d122fcf0c | ||
|
|
002b77b37a | ||
|
|
90aa3babd6 | ||
|
|
610bee465c | ||
|
|
8fc46375a0 | ||
|
|
0cd10384c0 | ||
|
|
239f018a37 | ||
|
|
6e51087b70 | ||
|
|
480bc82541 | ||
|
|
43e50ebc37 | ||
| 83bddb0947 |
113 changed files with 7439 additions and 2078 deletions
|
|
@ -4,8 +4,8 @@
|
|||
"Bash(git add:*)",
|
||||
"Bash(git commit:*)",
|
||||
"Bash(cat:*)",
|
||||
"Bash(curl:*)",
|
||||
"Bash(php -l:*)"
|
||||
"WebFetch(domain:unicode-org.github.io)",
|
||||
"Bash(git mv:*)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ jobs:
|
|||
set ftp:ssl-allow no
|
||||
open -u $USERNAME,$PASSWORD $PREPRODUCTION_HOST
|
||||
mirror --reverse --verbose --ignore-time --parallel=10 -x local/ assets assets
|
||||
mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ -x header.php site site
|
||||
mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ site site
|
||||
mirror --reverse --verbose --ignore-time --parallel=10 kirby kirby
|
||||
mirror --reverse --verbose --ignore-time --parallel=10 vendor vendor
|
||||
quit
|
||||
|
|
|
|||
8
.gitignore
vendored
8
.gitignore
vendored
|
|
@ -60,11 +60,5 @@ Icon
|
|||
/vendor/*
|
||||
|
||||
# Local
|
||||
# ---------------
|
||||
local/
|
||||
/local/*
|
||||
|
||||
# Claude config
|
||||
# ---------------
|
||||
.claude/
|
||||
/.claude/*
|
||||
.claude
|
||||
|
|
|
|||
|
|
@ -29,9 +29,6 @@ body{
|
|||
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
|
||||
img{
|
||||
|
|
@ -51,7 +48,7 @@ img{
|
|||
// }
|
||||
}
|
||||
|
||||
|
||||
.swiper-button-next, .swiper-button-prev,
|
||||
body, #site-header, #site-footer{
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
|
@ -61,4 +58,57 @@ body, #site-header, #site-footer{
|
|||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin hide-scroll(){
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clamp($lines) {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin hover-card-line(){
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
position: relative;
|
||||
&::before{
|
||||
content: '';
|
||||
width: 100%;
|
||||
border-top: 1px solid transparent;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
&::before{
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body.menu-open,
|
||||
body.is-hidden{
|
||||
overflow-y: hidden;
|
||||
main, footer, #nav-highlight, .btn--back-to-top{
|
||||
transition: opacity .3s ease-in;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,3 +11,8 @@ $paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
|
|||
@media #{$medium}{
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,10 @@
|
|||
|
||||
--fs-button-bold: 22px;
|
||||
|
||||
--max-w-content: 700px;
|
||||
--max-w-container: 1280px;
|
||||
--max-w-content: 640px;
|
||||
--max-w-cards: 940px;
|
||||
--z-header: 2000;
|
||||
--panel-w: 310px;
|
||||
|
||||
@media #{$small} {
|
||||
--fs-medium: 20px;
|
||||
|
|
@ -26,7 +28,7 @@
|
|||
}
|
||||
|
||||
--leading-tight: 1.05;
|
||||
--leading-normal: 1.2;
|
||||
--leading-normal: 1.3;
|
||||
// --leading-relaxed: 1.4;
|
||||
// --leading-loose: 1.8;
|
||||
|
||||
|
|
@ -41,6 +43,7 @@
|
|||
--grey-400: #969696;
|
||||
--grey-600: #6d6d6d;
|
||||
--grey-800: #383838;
|
||||
--grey-950: #222222;
|
||||
|
||||
--color-bg: #161616;
|
||||
--color-txt: #ffffff;
|
||||
|
|
@ -89,21 +92,23 @@
|
|||
|
||||
--header-h: 60px;
|
||||
|
||||
--padding-body: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--grey-100: #1f1f1f;
|
||||
--grey-100: #2f2f2f;
|
||||
--grey-200: #2f2f2f;
|
||||
--grey-300: #4a4a4a;
|
||||
--grey-400: #6a6a6a;
|
||||
--grey-600: #9a9a9a;
|
||||
--grey-800: #cfcfcf;
|
||||
--grey-950: #eaeaea;
|
||||
|
||||
--color-bg: #efefef;
|
||||
--color-txt: #000000;
|
||||
--color-txt: #161616;
|
||||
--color-txt-light: var(--grey-400);
|
||||
|
||||
--color-accent: #ff00ff;
|
||||
|
|
|
|||
|
|
@ -1,60 +0,0 @@
|
|||
#btn--don__mobile {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: calc(var(--spacing) * 1.5);
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
transition: opacity ease-in 0.2s;
|
||||
|
||||
pointer-events: none;
|
||||
&.is-visible {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.is-sticky {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media #{$small-up} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--don {
|
||||
--vertical-padding: 0.5ch;
|
||||
height: calc(var(--h-block) + var(--vertical-padding));
|
||||
border-radius: calc(var(--h-block) / 1);
|
||||
padding: var(--vertical-padding) 2ch;
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-bold);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5ch;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 28px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--color-bg);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
48
assets/css/components/_btn-group-mobile.scss
Normal file
48
assets/css/components/_btn-group-mobile.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
.btn--group__mobile{
|
||||
z-index: calc(var(--z-header) - 10);
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease-in;
|
||||
|
||||
&.is-visible{
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: calc(var(--h-block) * 3);
|
||||
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) 75%,
|
||||
transparent 100%);
|
||||
|
||||
// background-color: yellow;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: var(--padding-inner);
|
||||
button, .dropdown{
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
.btn--group__mobile{
|
||||
display: none;
|
||||
opacity: 0!important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3,8 +3,12 @@ button{
|
|||
font-family: var(--font);
|
||||
font-size: var(--fons-normal);
|
||||
color: var(--color-txt);
|
||||
svg{
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
&:hover{
|
||||
color: var(--grey-100);
|
||||
svg{ fill: var(--grey-100); }
|
||||
}
|
||||
|
||||
a{
|
||||
|
|
@ -30,7 +34,64 @@ button:disabled{
|
|||
}
|
||||
|
||||
|
||||
.btn--small{
|
||||
height: calc(var(--h-block)*0.75);
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.icon{
|
||||
--size: 10px;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
position: relative;
|
||||
top: -8px;
|
||||
svg{
|
||||
width: 100%;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
&.no-link{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
|
||||
}
|
||||
&:hover{
|
||||
color: currentColor;
|
||||
border-color: currentColor;
|
||||
background-color: var(--grey-950);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn--small.is-selected{
|
||||
background-color: var(--color-txt);
|
||||
border-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
a{ color: var(--color-bg); }
|
||||
svg{ fill: var(--color-bg); }
|
||||
}
|
||||
|
||||
.btn--bold,
|
||||
.btn--bold-inline{
|
||||
display: block;
|
||||
|
|
@ -42,10 +103,17 @@ button:disabled{
|
|||
line-height: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
svg{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2ch;
|
||||
|
|
@ -55,10 +123,12 @@ button:disabled{
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
padding: 0 2ch;
|
||||
padding-top: 4px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -67,112 +137,125 @@ button:disabled{
|
|||
.btn--bold{
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
svg{ fill: var(--color-bg); }
|
||||
&:hover{
|
||||
background-color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
a{
|
||||
color: var(--color-bg);
|
||||
}
|
||||
svg{ fill: var(--color-bg); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn--bold-inline{
|
||||
background-color: var(--color-bg);
|
||||
svg{ fill: var(--color-txt); }
|
||||
&:hover{
|
||||
background-color: var(--grey-950);
|
||||
color: var(--grey-100);
|
||||
border-color: var(--grey-100);
|
||||
a{
|
||||
background-color: var(--grey-950);
|
||||
color: var(--grey-100);
|
||||
}
|
||||
svg{ fill: var(--grey-100); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn--bold-inline:hover{
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
a{
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
.btn--toc{
|
||||
svg{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// DELETE ?
|
||||
|
||||
.btn__default{
|
||||
|
||||
|
||||
--size: calc(var(--h-block) - 8px);
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-normal);
|
||||
height: var(--size);
|
||||
padding-right: 1.5ch;
|
||||
|
||||
@mixin btn--go-to(){
|
||||
position: relative;
|
||||
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0ch;
|
||||
// padding-right: 0.5ch;
|
||||
color: var(--color-accent);
|
||||
font-weight: var(--fw-medium);
|
||||
text-decoration: none;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
.icon, .txt{ z-index: 10; }
|
||||
|
||||
.icon{
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-bg);
|
||||
text-align: center;
|
||||
|
||||
.btn--go-to{
|
||||
position: absolute;
|
||||
right: var(--padding-inner);
|
||||
bottom: calc(var(--padding-inner) - 3px);
|
||||
svg{
|
||||
fill: var(--color-bg);
|
||||
width: 80%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
@media #{$small}{
|
||||
svg{
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
@media #{$x-small}{
|
||||
right: calc(var(--padding-inner)*0.5);
|
||||
bottom: calc(var(--padding-inner)*0.25);
|
||||
svg{
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.btn--go-to{
|
||||
animation: wiggle-left 0.8s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.txt{
|
||||
font-family: var(--font-title);
|
||||
color: var(--color-accent);
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-bold);
|
||||
padding-left: 1ch;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes wiggle-left {
|
||||
0% { transform: translateX(0); }
|
||||
40% { transform: translateX(-10px); }
|
||||
80% { transform: translateX(0); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn--back-to-top{
|
||||
display: flex;
|
||||
border-color: var(--color-txt);
|
||||
width: fit-content;
|
||||
margin: var(--spacing) auto;
|
||||
@media #{$small}{
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: calc(var(--size)/2);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
transition: width .2s
|
||||
.icon{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
svg{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
//
|
||||
.txt{
|
||||
color: var(--color-bg);
|
||||
display: block;
|
||||
}
|
||||
&::after{
|
||||
width: 100%;
|
||||
background-color: var(--grey-950);
|
||||
color: var(--grey-100);
|
||||
border-color: var(--grey-100);
|
||||
a{
|
||||
background-color: var(--grey-950);
|
||||
color: var(--grey-100);
|
||||
}
|
||||
svg{ fill: var(--grey-100); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,22 +3,56 @@
|
|||
.card--article-small{
|
||||
|
||||
@include grid-content();
|
||||
margin-bottom: var(--spacing);
|
||||
|
||||
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
padding-bottom: calc(var(--spacing)*0.5);
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
|
||||
|
||||
// &:first-of-type{
|
||||
// padding-top: calc(var(--spacing)*0.5);
|
||||
// border-top: var(--border-light);
|
||||
// }
|
||||
|
||||
@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;
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
|
||||
padding-right: calc(var(--padding-inner)*3);
|
||||
}
|
||||
|
||||
.title{
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
a{ text-decoration: none;}
|
||||
|
||||
}
|
||||
|
|
@ -27,15 +61,18 @@
|
|||
flex-grow: 1;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.keywords{
|
||||
margin-top: 1.5em;
|
||||
padding-bottom: calc(var(--spacing)*0.25);
|
||||
color: var(--color-txt-light);
|
||||
|
||||
.description{
|
||||
@include clamp(2);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
|
||||
}
|
||||
|
||||
&:hover{
|
||||
.title{ text-decoration: underline;}
|
||||
}
|
||||
|
||||
|
||||
@include btn--go-to();
|
||||
@include hover-card-line();
|
||||
|
||||
|
||||
@media #{$medium}{
|
||||
.title{
|
||||
|
|
@ -45,6 +82,17 @@
|
|||
}
|
||||
|
||||
@media #{$x-small}{
|
||||
|
||||
// figure{
|
||||
// aspect-ratio: inherit;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
.icon-article{ display: none; }
|
||||
.description{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -55,12 +103,24 @@
|
|||
font-size: var(--fs-small);
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.keywords{
|
||||
margin-top: 0.5em;
|
||||
padding-bottom: 0;
|
||||
|
||||
.keywords {
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
padding-right: calc(var(--padding-inner)*1);
|
||||
li, a{
|
||||
display: inline;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -4,14 +4,37 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: var(--padding-inner);
|
||||
|
||||
@include figure-16-9();
|
||||
|
||||
.content{
|
||||
padding: var(--padding-inner);
|
||||
// padding: var(--padding-inner);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 2;
|
||||
}
|
||||
.pin{
|
||||
position: absolute;
|
||||
top: calc(var(--padding-inner)*1.5);
|
||||
left: calc(var(--padding-inner)*1.5);
|
||||
z-index: 10;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: var(--radius-small);
|
||||
background-color: rgba(255, 255, 255, 0.27);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg{
|
||||
width: 16px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
.time-alone{
|
||||
display: none;
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
}
|
||||
|
||||
.title{
|
||||
|
|
@ -19,14 +42,14 @@
|
|||
font-size: var(--fs-medium);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
flex-grow: 2;
|
||||
text-wrap: balance;
|
||||
// flex-grow: 2;
|
||||
|
||||
a{ text-decoration: none;}
|
||||
}
|
||||
|
||||
.description{
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
font-size: var(--fs-small);
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
|
|
@ -36,7 +59,8 @@
|
|||
|
||||
.dl{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
|
||||
// font-size: var(--fs-small);
|
||||
border-bottom: var(--border-light);
|
||||
.dl__group{
|
||||
@include grid-content();
|
||||
border-top: var(--border-light);
|
||||
|
|
@ -48,24 +72,37 @@
|
|||
padding-right: 1ch;
|
||||
}
|
||||
|
||||
ul:not(.keywords){
|
||||
ul{
|
||||
list-style: none;
|
||||
li{
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
li{ padding-bottom: 0.2em; }
|
||||
}
|
||||
|
||||
.dl__group__keywords{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.keywords-wrapper{
|
||||
z-index: 3000;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
// margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
.keywords{
|
||||
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
|
||||
&:hover{
|
||||
border-color: var(--color-txt);
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
|
||||
.link-block{
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
153
assets/css/components/_card-folder.scss
Normal file
153
assets/css/components/_card-folder.scss
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
.card--folder{
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
border: var(--border-light);
|
||||
padding: var(--padding-inner);
|
||||
@include grid-content();
|
||||
@include figure-16-9();
|
||||
|
||||
|
||||
container-type: inline-size;
|
||||
container-name: cardfolder;
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.title{
|
||||
flex-grow: 1;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
text-transform: uppercase;
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
a{ text-decoration: none;}
|
||||
|
||||
@media #{$small}{
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
|
||||
.icon{
|
||||
padding-right: 1ch;
|
||||
svg{
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.short{
|
||||
@include clamp(3);
|
||||
}
|
||||
|
||||
ul{
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1ch;
|
||||
color: var(--color-txt-light);
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
|
||||
li + li{
|
||||
&::before{
|
||||
content: "|";
|
||||
padding-right: 1ch;
|
||||
}
|
||||
}
|
||||
@media #{$small}{
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
|
||||
.btn--go-to{
|
||||
position: absolute;
|
||||
right: calc(var(--padding-inner)*1);
|
||||
bottom: var(--padding-inner);
|
||||
}
|
||||
|
||||
@include btn--go-to();
|
||||
|
||||
&:hover{
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
[data-template="investigation-summary"] .card--folder{
|
||||
|
||||
border: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@container cardfolder (width < 680px) {
|
||||
figure{
|
||||
aspect-ratio: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.short{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@container cardfolder (width < 520px) {
|
||||
figure{
|
||||
aspect-ratio: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.short, ul{
|
||||
font-size: var(--fs-small);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
111
assets/css/components/_card-impact-small.scss
Normal file
111
assets/css/components/_card-impact-small.scss
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
.card--impact-small {
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
|
||||
@include grid-content();
|
||||
padding: var(--padding-inner) 0;
|
||||
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
|
||||
@include btn--go-to();
|
||||
|
||||
.btn--go-to {
|
||||
top: calc(var(--padding-inner)*1);
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.card--open-graph {
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.keywords {
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
|
||||
@media #{$x-small} {
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
li, a{
|
||||
display: inline;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]) .content,
|
||||
.keywords {
|
||||
@media #{$x-small} {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]) {
|
||||
.content {
|
||||
padding-right: calc(var(--padding-inner)*2.5);
|
||||
@media #{$x-small} {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.open-graph__details {
|
||||
grid-column: 2;
|
||||
@include details-summary();
|
||||
|
||||
summary {
|
||||
color: var(--color-txt-light);
|
||||
|
||||
.arrow-details svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
summary {
|
||||
@include grid-content();
|
||||
grid-row-gap: 0;
|
||||
|
||||
.summary-inner {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
grid-column: 1/3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.open-graph__inner {
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
.card--open-graph {
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,77 +1,264 @@
|
|||
.card--impact{
|
||||
@include grid-content();
|
||||
padding: calc(var(--spacing)*0.5) 0;
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
.card--impact {
|
||||
|
||||
.content{
|
||||
grid-column: 2;
|
||||
}
|
||||
&:not([data-impact-type="media"]) .content{
|
||||
@media #{$x-small}{ grid-column: span 2; }
|
||||
}
|
||||
container-type: inline-size;
|
||||
container-name: impact;
|
||||
border: var(--border-light);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
|
||||
.tag{
|
||||
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
|
||||
}
|
||||
|
||||
.content{
|
||||
.see-more{
|
||||
color: var(--color-txt-light);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
&::after{
|
||||
content: ' +'
|
||||
}
|
||||
}
|
||||
&.has-link {
|
||||
@include hover-card-line();
|
||||
}
|
||||
|
||||
|
||||
.open-graph__details{
|
||||
grid-column: span 2;
|
||||
@include details-summary();
|
||||
summary{
|
||||
color: var(--color-txt-light);
|
||||
.arrow-details svg{ fill: var(--color-txt-light);}
|
||||
}
|
||||
}
|
||||
.card--impact__inner {
|
||||
@include grid-content();
|
||||
padding: calc(var(--padding-inner)*1.5) var(--padding-inner);
|
||||
|
||||
|
||||
// @media #{$x-small-up}{
|
||||
|
||||
.open-graph__details{
|
||||
summary{
|
||||
@include grid-content();
|
||||
.summary-inner{
|
||||
grid-column: 2;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.open-graph__inner{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
@media #{$small-up}{
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
}
|
||||
.card--open-graph{
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// border-bottom: var(--border-light);
|
||||
// padding: calc(var(--spacing)*0.5) 0;
|
||||
// &:first-of-type{
|
||||
// border-top: var(--border-light);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@include btn--go-to();
|
||||
|
||||
.btn--go-to {
|
||||
top: calc(var(--padding-inner)*1);
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.card--open-graph {
|
||||
grid-row: 1/3;
|
||||
grid-column: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.keywords-wrapper {
|
||||
grid-column: 1;
|
||||
grid-row: 2/4;
|
||||
align-self: end;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]) .content {
|
||||
@media #{$x-small} {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]) {
|
||||
.content {
|
||||
padding-right: calc(var(--padding-inner)*2.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.investigations {
|
||||
z-index: 10;
|
||||
grid-column: 2;
|
||||
list-style: none;
|
||||
font-size: var(--fs-small);
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-txt-light);
|
||||
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
a {
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.open-graph__details {
|
||||
grid-column: 2;
|
||||
@include details-summary();
|
||||
|
||||
summary {
|
||||
color: var(--color-txt-light);
|
||||
|
||||
.arrow-details svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
summary {
|
||||
@include grid-content();
|
||||
grid-row-gap: 0;
|
||||
|
||||
.summary-inner {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
grid-column: 1/3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.open-graph__inner {
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
// margin-bottom: calc(var(--spacing)*1);
|
||||
|
||||
.card--open-graph {
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@container impact (width < 460px) {
|
||||
.card--impact__inner{
|
||||
display: block!important;
|
||||
padding-top: var(--padding-inner)!important;
|
||||
padding-bottom: calc(var(--padding-inner)*0.75)!important;
|
||||
|
||||
|
||||
.tag, .date{
|
||||
display: inline-flex;
|
||||
margin-right: 2ch;
|
||||
top: 0px!important;
|
||||
}
|
||||
|
||||
.content{
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
padding-right: 0!important;
|
||||
}
|
||||
|
||||
.card--open-graph{
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.investigations{
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.keywords-wrapper {
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
|
||||
}
|
||||
.date,
|
||||
.content,
|
||||
details {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.btn--go-to {
|
||||
top: calc(var(--padding-inner)*1.25)!important;
|
||||
bottom: auto;
|
||||
right: calc(var(--padding-inner)*1.25)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
.card--impact__inner{
|
||||
display: block!important;
|
||||
padding-top: var(--padding-inner)!important;
|
||||
padding-bottom: calc(var(--padding-inner)*0.75)!important;
|
||||
|
||||
|
||||
.tag, .date{
|
||||
display: inline-flex;
|
||||
margin-right: 2ch;
|
||||
top: 0px!important;
|
||||
}
|
||||
|
||||
.content{
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
padding-right: 0!important;
|
||||
}
|
||||
|
||||
.card--open-graph{
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.investigations{
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.keywords-wrapper {
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
|
||||
}
|
||||
.date,
|
||||
.content,
|
||||
details {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.btn--go-to {
|
||||
top: calc(var(--padding-inner)*1.25)!important;
|
||||
bottom: auto;
|
||||
right: calc(var(--padding-inner)*1.25)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,26 @@
|
|||
.card--open-graph{
|
||||
|
||||
@include grid-content();
|
||||
|
||||
border: var(--border-light);
|
||||
|
||||
// border: var(--border-light);
|
||||
border: 1px solid var(--grey-600);
|
||||
border-radius: var(--radius-small);
|
||||
position: relative;
|
||||
|
||||
figure{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include figure-16-9();
|
||||
// @include figure-16-9();
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
|
|
@ -33,11 +40,14 @@
|
|||
.site-name{
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
line-height: 1.1;
|
||||
padding-top: 2px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -57,7 +67,26 @@
|
|||
}
|
||||
|
||||
&:hover{
|
||||
.title{ text-decoration: underline;}
|
||||
border-color: var(--color-txt);
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.open-graph__inner{
|
||||
|
||||
container-type: inline-size;
|
||||
container-name: opengraph;
|
||||
}
|
||||
@container opengraph (width < 500px) {
|
||||
.card--open-graph{
|
||||
|
||||
.content{
|
||||
padding: calc(var(--padding-inner)*0.5);
|
||||
}
|
||||
|
||||
figure{
|
||||
aspect-ratio: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,6 +31,13 @@
|
|||
|
||||
}
|
||||
|
||||
summary:hover{
|
||||
color: var(--color-txt);
|
||||
.arrow-details svg{
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
&[open]{
|
||||
.arrow-details svg{
|
||||
transform: rotate(90deg);
|
||||
|
|
|
|||
170
assets/css/components/_dropdown.scss
Normal file
170
assets/css/components/_dropdown.scss
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&__trigger {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 180px;
|
||||
margin-top: var(--padding-inner);
|
||||
background-color: var(--color-bg);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-4px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||||
z-index: 100;
|
||||
|
||||
&::before{
|
||||
content: "◀";
|
||||
transform: rotate(90deg);
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
left: 16px;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: var(--padding-inner);
|
||||
}
|
||||
|
||||
a, button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75em 1ch;
|
||||
font-size: var(--fs-small);
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
color: var(--color-txt);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Positionnement par défaut : sous le bouton, aligné à gauche
|
||||
// Variante : aligné à droite
|
||||
&--align-right .dropdown__content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
&::before{
|
||||
left: auto;
|
||||
right: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
.dropdown__content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// PANEL
|
||||
&--position-mobile .dropdown__content {
|
||||
top: auto;
|
||||
bottom: calc(var(--h-block) + var(--padding-inner)*2);
|
||||
left: auto;
|
||||
right: 0;
|
||||
margin-top: 0;
|
||||
margin-left: 4px;
|
||||
|
||||
&::before{
|
||||
font-family: Arial;
|
||||
content: "◀";
|
||||
transform: rotate(-90deg);
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: -13px;
|
||||
left: auto;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&--position-mobile.is-open {
|
||||
.dropdown__content {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
&--position-panel .dropdown__content {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: calc(100% + var(--padding-inner));
|
||||
margin-top: 0;
|
||||
margin-left: 4px;
|
||||
|
||||
&::before{
|
||||
font-family: Arial;
|
||||
content: "◀";
|
||||
transform: rotate(0deg);
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 4px;
|
||||
left: -11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&--position-panel.is-open {
|
||||
.dropdown__content {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
|
||||
.dropdown__content{
|
||||
width: calc(100vw - var(--padding-body)*2);
|
||||
.modal--share{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1280px){
|
||||
|
||||
[data-template="investigations"]{
|
||||
.dropdown .dropdown__content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
&::before{
|
||||
left: auto;
|
||||
right: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -12,6 +12,23 @@
|
|||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin figure-16-9-hover{
|
||||
figure{
|
||||
aspect-ratio: 16/9;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||||
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
figure img{ transform: scale(1.05); }
|
||||
}
|
||||
|
|
|
|||
143
assets/css/components/_hero.scss
Normal file
143
assets/css/components/_hero.scss
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
#hero{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
|
||||
|
||||
|
||||
// @media #{$small}{
|
||||
// width: 100vw;
|
||||
// left: calc(var(--padding-body)*-1);
|
||||
// }
|
||||
|
||||
figcaption{
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
@media #{$x-small}{ font-size: var(--fs-xsmall); }
|
||||
padding: calc(var(--spacing)*0.5) var(--padding-body);
|
||||
padding-bottom: 0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
figure{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
img{
|
||||
width: 100%;
|
||||
aspect-ratio: 2/1;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-slide{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-button-prev, .swiper-button-next{
|
||||
--swiper-navigation-sides-offset: 32px;
|
||||
--swiper-navigation-size: 32px;
|
||||
|
||||
@media #{$x-small}{
|
||||
--swiper-navigation-sides-offset: 15px;
|
||||
--swiper-navigation-size: 15px;
|
||||
}
|
||||
opacity: 0.8;
|
||||
|
||||
// Position buttons relative to the image (16/9 aspect ratio)
|
||||
// Calculate: 50% of image height = 50% * (9/16) of width
|
||||
// Image is 100vw wide, so center at: (100vw * 9/16) / 2
|
||||
top: calc(100vw * 9 / 2 - var(--swiper-navigation-size)*0.5);
|
||||
margin-top: 0;
|
||||
|
||||
svg{ color: white; }
|
||||
}
|
||||
|
||||
.swiper-pagination{
|
||||
position: static;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
padding: 0 var(--padding-body);
|
||||
text-align: center;
|
||||
|
||||
.swiper-pagination-bullet{
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-txt-light);
|
||||
// opacity: 0.4;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active{
|
||||
background: var(--color-txt);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.player-container{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
aspect-ratio: 2/1;
|
||||
|
||||
.extract, video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.video-full{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
iframe{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
#hero-play-video{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
.btn--bold{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
padding: 0 1ch;
|
||||
opacity: 0.8;
|
||||
&:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.text{
|
||||
color: black;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
svg{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: black;
|
||||
opacity: 0.8;
|
||||
// opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,14 +1,50 @@
|
|||
.keywords{
|
||||
list-style: none;
|
||||
li{
|
||||
display: inline-block;
|
||||
padding-right: 0.75ch;
|
||||
a{
|
||||
text-decoration: none;
|
||||
&::before{
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75ch;
|
||||
|
||||
a{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--h-block)*0.75);
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
&::before{
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
&:hover{
|
||||
border-color: currentColor;
|
||||
background-color: var(--grey-800);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.keywords--small{
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
&::before{
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
&::after{
|
||||
content: "\00a0";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
}
|
||||
|
||||
.icon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
svg{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,34 +1,27 @@
|
|||
.modal--share{
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
width: 240px;
|
||||
padding-bottom: var(--padding-inner);
|
||||
background-color: var(--color-bg);
|
||||
padding: var(--padding-inner);
|
||||
padding-top: calc( var(--padding-inner)*0.5);
|
||||
padding-bottom: calc( var(--padding-inner)*1.5);
|
||||
|
||||
.modal-title{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.socials{
|
||||
display: block;
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
font-size: var(--fs-normal);
|
||||
padding-bottom: 6px;
|
||||
border-bottom: var(--border-light);
|
||||
padding-top: 6px;
|
||||
|
||||
a{
|
||||
font-size: var(--fs-normal);
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
gap: 2ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
svg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -38,27 +31,20 @@
|
|||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
&:hover{
|
||||
color: var(--color-accent);
|
||||
|
||||
.icon svg,
|
||||
.icon svg path,
|
||||
.icon svg rect{
|
||||
fill: var(--color-accent)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.copy-link{
|
||||
display: flex;
|
||||
gap: 0.5ch;
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
padding: 0 var(--padding-inner);
|
||||
height: var(--h-block);
|
||||
width: 100%;
|
||||
|
||||
.copy-link__field{
|
||||
flex-grow: 1;
|
||||
|
|
@ -99,24 +85,63 @@
|
|||
&:focus{
|
||||
border-color: var(--color-txt);
|
||||
outline: none;
|
||||
|
||||
}
|
||||
&.is-copied{
|
||||
color: var(--color-accent)!important;
|
||||
}
|
||||
}
|
||||
|
||||
button{
|
||||
.copy-link__btn{
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
border-radius: var(--radius-btn);
|
||||
padding: 0 1ch;
|
||||
font-size: var(--fs-small);
|
||||
padding-top: 2px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
width: 8ch!important;
|
||||
|
||||
&::after{
|
||||
content: "\00a0";
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: var(--color-accent);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// SHARE ACTIONS --------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
#share-banner__content,
|
||||
#share-banner__aside,
|
||||
#share-banner__desktop{
|
||||
display: none;
|
||||
}
|
||||
#share-banner__content ~ .modal--share,
|
||||
#share-banner__aside ~ .modal--share,
|
||||
#share-banner__desktop ~ .modal--share{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .2s ease-in;
|
||||
}
|
||||
|
||||
#share-banner__content:checked ~ .modal--share,
|
||||
#share-banner__aside:checked ~ .modal--share,
|
||||
#share-banner__desktop:checked ~ .modal--share{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
40
assets/css/components/_search-form.scss
Normal file
40
assets/css/components/_search-form.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.search-form{
|
||||
--icon: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: var(--icon) 1fr;
|
||||
input{
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
height: calc(var(--h-block) * 1.5);
|
||||
width: 100%;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-txt);
|
||||
padding-left: var(--icon);
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
padding-top: 3px;
|
||||
&::placeholder{
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
&:focus{
|
||||
border-color: var(--color-accent);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg{
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
86
assets/css/components/_slider-before-after.scss
Normal file
86
assets/css/components/_slider-before-after.scss
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
|
||||
.slider-before-after{
|
||||
|
||||
width: 100%;
|
||||
|
||||
max-width: 700px;
|
||||
z-index: 300;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
--position: 50%;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// max-width: 800px;
|
||||
// max-height: 90vh;
|
||||
// aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.slider-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left;
|
||||
}
|
||||
|
||||
.image-before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: var(--position);
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
/* for Firefox */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slider:focus-visible ~ .slider-button {
|
||||
outline: 5px solid black;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.slider-line {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: .2rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
/* z-index: 10; */
|
||||
left: var(--position);
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slider-button {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
padding: .5rem;
|
||||
border-radius: 100vw;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
top: 50%;
|
||||
left: var(--position);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
/* z-index: 100; */
|
||||
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
|
||||
}
|
||||
|
||||
}
|
||||
42
assets/css/components/_sort.scss
Normal file
42
assets/css/components/_sort.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
button.sort{
|
||||
.arrow{
|
||||
line-height: 0;
|
||||
--size: 12px;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s ease-in;
|
||||
svg{
|
||||
width: 100%;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
&[data-sort-type="up"]{
|
||||
.arrow{
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.page__sort {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
width: 100%;
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
// z-index: calc(var(--z-header) - 100);
|
||||
|
||||
}
|
||||
77
assets/css/components/_swiper.scss
Normal file
77
assets/css/components/_swiper.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
.swiper {
|
||||
|
||||
|
||||
--slide-padding: 30px;
|
||||
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
--swiper-navigation-size: 32px;
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
height: 100%;
|
||||
width: var(--slide-padding);
|
||||
top: 0px!important;
|
||||
height: calc(100% - var(--spacing)*1);
|
||||
// background-color: red;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&.swiper-button-disabled {
|
||||
opacity: 1;
|
||||
|
||||
svg {
|
||||
opacity: 0.05;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 0px!important;
|
||||
top: 0px;
|
||||
justify-content: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
padding-left: var(--slide-padding);
|
||||
padding-right: var(--slide-padding);
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
position: relative;
|
||||
margin-top: 0px!important;
|
||||
margin-top: calc(var(--spacing)*0.5)!important;
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-txt-light);
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
background: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
.tag{
|
||||
height: calc(var(--h-block)*0.75);
|
||||
border-radius: calc(var(--h-block)*0.75/2);
|
||||
// border-radius: calc(var(--h-block)*0.75/2);
|
||||
border-radius: var(--radius-small);
|
||||
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
|
|
@ -17,5 +18,7 @@
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.title-page{
|
||||
font-size: var(--fs-medium);
|
||||
|
||||
}
|
||||
23
assets/css/partials/_container-cards.scss
Normal file
23
assets/css/partials/_container-cards.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.container-cards{
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-gap: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.container-cards__investigations {
|
||||
|
||||
@media #{$x-small-up} {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: var(--padding-body);
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
@media #{$x-small} {
|
||||
margin-bottom: 10vh;
|
||||
.card--article {
|
||||
// margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
body{
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
// overflow-x: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -9,6 +11,22 @@ body{
|
|||
main{
|
||||
flex-grow: 1;
|
||||
padding: 0 var(--padding-body);
|
||||
padding-top: var(--header-h);
|
||||
padding-bottom: calc(var(--spacing)*2);
|
||||
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
|
||||
.page__header,
|
||||
.page__content{
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
60
assets/css/partials/_page-header.scss
Normal file
60
assets/css/partials/_page-header.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
.page__type{
|
||||
|
||||
height: calc(var(--h-block)*0.75);
|
||||
border-radius: var(--radius-small);
|
||||
border: var(--border-medium);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1.5ch;
|
||||
padding-top: 3px;
|
||||
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt-light);
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
main .page__header {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
|
||||
@media #{$small} {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
|
||||
}
|
||||
|
||||
.page__title {
|
||||
max-width: var(--max-w-content);
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.description {
|
||||
// max-width: 68ch;
|
||||
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 58ch;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.description-medium{
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 58ch;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,13 @@
|
|||
|
||||
background-color: var(--dark);
|
||||
padding: calc(var(--padding-body)*2) var(--padding-body);
|
||||
z-index: 500;
|
||||
|
||||
.site-footer__container{
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
|
|
@ -38,7 +44,6 @@
|
|||
|
||||
|
||||
@media #{$small}{
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
|
||||
|
||||
.footer__socials{
|
||||
|
|
@ -67,15 +72,11 @@
|
|||
|
||||
.site-footer__container{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
column-gap: calc(var(--spacing)*2);
|
||||
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer__socials .socials{
|
||||
max-width: 400px;
|
||||
columns: 2;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
@keyframes add-border {
|
||||
from {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
to {
|
||||
border-bottom: var(--grey-800);
|
||||
}
|
||||
}
|
||||
|
||||
#site-header {
|
||||
|
||||
z-index: 900;
|
||||
z-index: var(--z-header);
|
||||
--gap: 3ch;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100vw;
|
||||
height: var(--header-h);
|
||||
background-color: var(--color-bg);
|
||||
padding: 0 var(--padding-body);
|
||||
|
||||
box-shadow: -1px 4px 10px 0px var(--color-bg);
|
||||
|
||||
.site-header__inner{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-bottom: 1px solid var(--color-bg);
|
||||
// transition: border-color ease-in .5s;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -38,6 +37,7 @@
|
|||
|
||||
#site-title {
|
||||
flex-grow: 2;
|
||||
// opacity: 0;
|
||||
svg{
|
||||
width: 100px;
|
||||
@media #{$small}{
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.title-page{
|
||||
.header__title-page{
|
||||
display: none;
|
||||
flex-grow: 2;
|
||||
text-align: left;
|
||||
|
|
@ -92,6 +92,7 @@
|
|||
cursor: pointer;
|
||||
svg{
|
||||
width: 30px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.close{ display: none; }
|
||||
|
||||
|
|
@ -107,37 +108,11 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
#site-header.is-visible{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
.site-header__inner{
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
#nav-highlight li:not(.soutenir){
|
||||
display: none;
|
||||
}
|
||||
#site-title {
|
||||
@media #{$small-up}{
|
||||
flex-grow: 0;
|
||||
width: calc((100vw - var(--max-w-content))/2 - var(--padding-body)*2);
|
||||
}
|
||||
@media #{$medium}{
|
||||
width: calc(var(--banner-medium) - var(--padding-body));
|
||||
}
|
||||
}
|
||||
|
||||
.title-page{
|
||||
@media #{$small-up}{
|
||||
display: block;
|
||||
}
|
||||
flex-grow: 2;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ main{
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
// .site-header__inner{
|
||||
// border-color: var(--grey-800);
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,13 @@
|
|||
top: var(--header-h);
|
||||
right: calc(var(--menu-w)*-1);
|
||||
transition: right .3s ease-in;
|
||||
@media #{$small}{
|
||||
transition: right .4s ease-in;
|
||||
}
|
||||
background-color: var(--color-bg);
|
||||
border-left: var(--border-light);
|
||||
padding: var(--padding-body);
|
||||
z-index: 1000;
|
||||
z-index: calc(var(--z-header) - 1);
|
||||
|
||||
@media #{$x-small}{
|
||||
width: 100vw;
|
||||
|
|
@ -20,50 +23,11 @@
|
|||
flex-direction: column;
|
||||
|
||||
|
||||
form{
|
||||
.search-form{
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
--icon: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: var(--icon) 1fr;
|
||||
input{
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
height: calc(var(--h-block) * 1.5);
|
||||
width: 100%;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-txt);
|
||||
padding-left: var(--icon);
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
padding-top: 3px;
|
||||
&::placeholder{
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-normal);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
&:focus{
|
||||
border-color: var(--color-accent);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg{
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nav{
|
||||
flex-grow: 1;
|
||||
ul{
|
||||
|
|
@ -89,11 +53,11 @@
|
|||
}
|
||||
|
||||
body.menu-open{
|
||||
overflow: hidden;
|
||||
main, footer, #nav-highlight{
|
||||
transition: opacity .3s ease-in;
|
||||
opacity: 0.1;
|
||||
}
|
||||
// overflow: hidden;
|
||||
// main, footer, #nav-highlight{
|
||||
// transition: opacity .3s ease-in;
|
||||
// opacity: 0.1;
|
||||
// }
|
||||
#site-menu{
|
||||
right: 0;
|
||||
|
||||
|
|
|
|||
2688
assets/css/style.css
2688
assets/css/style.css
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -1,35 +1,49 @@
|
|||
@charset "UTF-8";
|
||||
@import 'base/responsive';
|
||||
@import 'base/var';
|
||||
@import 'base/body';
|
||||
@import "base/responsive";
|
||||
@import "base/var";
|
||||
@import "base/body";
|
||||
|
||||
@import 'partials/site-header';
|
||||
@import "partials/site-header";
|
||||
|
||||
// @import 'components/nav-tabs';
|
||||
// @import 'components/btn--default';
|
||||
@import 'components/buttons';
|
||||
@import 'components/tags';
|
||||
@import 'components/keywords';
|
||||
@import 'components/details-summary';
|
||||
|
||||
@import 'components/figures';
|
||||
@import 'components/form-newsletter';
|
||||
@import 'components/list-socials';
|
||||
@import 'components/modal-share';
|
||||
@import 'components/text';
|
||||
@import 'components/card-article';
|
||||
@import 'components/card-article-small';
|
||||
@import 'components/card-impact';
|
||||
@import 'components/card-open-graph';
|
||||
@import "components/buttons";
|
||||
@import "components/tags";
|
||||
@import "components/keywords";
|
||||
@import "components/details-summary";
|
||||
@import "components/sort";
|
||||
@import "components/btn-group-mobile";
|
||||
|
||||
|
||||
@import 'partials/site-header';
|
||||
@import 'partials/site-menu';
|
||||
@import 'partials/site-footer';
|
||||
@import 'partials/main-layout';
|
||||
|
||||
|
||||
@import 'template/investigations';
|
||||
@import 'template/investigation-summary';
|
||||
@import "components/figures";
|
||||
@import "components/hero";
|
||||
@import "components/form-newsletter";
|
||||
@import "components/search-form";
|
||||
@import "components/list-socials";
|
||||
@import "components/modal-share";
|
||||
@import "components/dropdown";
|
||||
@import "components/text";
|
||||
@import "components/card-article";
|
||||
@import "components/card-article-small";
|
||||
@import "components/card-impact";
|
||||
@import "components/card-impact-small";
|
||||
@import "components/card-folder";
|
||||
@import "components/card-open-graph";
|
||||
@import "components/swiper";
|
||||
@import "components/slider-before-after";
|
||||
|
||||
|
||||
@import "partials/site-header";
|
||||
@import "partials/site-menu";
|
||||
@import "partials/site-footer";
|
||||
@import "partials/main-layout";
|
||||
@import "partials/page-header";
|
||||
@import "partials/container-cards";
|
||||
|
||||
@import "template/home";
|
||||
@import "template/investigation-summary";
|
||||
@import "template/report";
|
||||
@import "template/folder";
|
||||
@import "template/impacts";
|
||||
|
|
|
|||
90
assets/css/template/_folder.scss
Normal file
90
assets/css/template/_folder.scss
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
.content-folder{
|
||||
// max-width: 1300px;
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-gap: calc(var(--padding-body)*1.5);
|
||||
// grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
|
||||
|
||||
position: relative;
|
||||
|
||||
.container-cards{
|
||||
display: block;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
#section__investigations article{
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
|
||||
.container__title{
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-normal);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media #{$medium}{
|
||||
#section__investigations{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: calc(var(--padding-inner)*1.5)!important;
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
article{ margin-bottom: 0px;}
|
||||
.container__title{
|
||||
grid-column: span 2;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
section:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing));
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media #{$medium-up}{
|
||||
#nav-folder{ display: none; }
|
||||
grid-template-columns: 1fr 1fr;
|
||||
#section__investigations{
|
||||
display: block;
|
||||
margin-bottom: 0px;
|
||||
article{
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$small}{
|
||||
display: block;
|
||||
#section__investigations{
|
||||
display: block;
|
||||
}
|
||||
.container__title{
|
||||
margin-bottom: calc(var(--spacing)*0.5)!important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
#nav-folder{
|
||||
display: flex;
|
||||
margin-top: calc(var(--spacing)*-1);
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
|
||||
svg{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
@media #{$medium-up}{
|
||||
#nav-folder{ display: none;}
|
||||
}
|
||||
202
assets/css/template/_home.scss
Normal file
202
assets/css/template/_home.scss
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
.section--home {
|
||||
|
||||
.btn--bold-inline {
|
||||
text-transform: none;
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.title-section {
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--fs-big);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.description-section {
|
||||
max-width: 42ch;
|
||||
font-size: var(--fs-medium);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
|
||||
@media #{$medium-up} {
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
.section--inner {
|
||||
max-width: 1280px;
|
||||
margin: calc(var(--spacing)*3) auto;
|
||||
display: grid;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: 1fr 640px;
|
||||
grid-gap: var(--gap);
|
||||
}
|
||||
|
||||
|
||||
.col-left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
}
|
||||
|
||||
.col-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
|
||||
&#home__investigations,
|
||||
&#home__hero {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
|
||||
.section--inner {
|
||||
margin-top: calc(var(--spacing)*3);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
}
|
||||
|
||||
.col-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
|
||||
.title-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
.section--inner {
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.col-left{
|
||||
margin-bottom: calc(var(--spacing)*1.5);
|
||||
}
|
||||
|
||||
|
||||
.title-section {
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.description-section {
|
||||
max-width: 42ch;
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
|
||||
.btn--bold-inline {
|
||||
color: var(--color-txt-light);
|
||||
border-color: var(--color-txt-light);
|
||||
height: calc(var(--h-block) * 0.75);
|
||||
// margin: 0 auto;
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
|
||||
a {
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#home__investigations {
|
||||
|
||||
.home-investigations-slider {
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card--article {
|
||||
|
||||
.time-alone {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dl,
|
||||
.pin {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#home__hero {
|
||||
margin-top: calc(var(--spacing)*3);
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
|
||||
@media #{$x-small} {
|
||||
margin-top: calc(var(--spacing)*2.5);
|
||||
padding-bottom: calc(var(--spacing)*1.5);
|
||||
margin-bottom: 0px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.section--inner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.baseline {
|
||||
font-family: var(--title);
|
||||
font-size: 45px;
|
||||
line-height: 1.1;
|
||||
max-width: 26ch;
|
||||
|
||||
@media #{$x-small} {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#home__folders {
|
||||
.card--folder {
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
}
|
||||
0
assets/css/template/_impacts.scss
Normal file
0
assets/css/template/_impacts.scss
Normal file
|
|
@ -1,362 +1,195 @@
|
|||
[data-template="investigation-summary"] main{
|
||||
|
||||
position: relative;
|
||||
|
||||
[data-template="investigation-summary"] main {
|
||||
position: relative;
|
||||
|
||||
|
||||
header{
|
||||
.page-type{
|
||||
text-transform: uppercase;
|
||||
color: var(--color-txt-light);
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
|
||||
|
||||
|
||||
.panel-left{
|
||||
width: calc((100vw - var(--max-w-cards) - var(--padding-body)*4)*0.5);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1340px){
|
||||
margin-left: auto;
|
||||
margin-right: calc(var(--padding-body)*3);
|
||||
.panel-left{
|
||||
width: calc(100vw - var(--max-w-cards) - var(--padding-body)*6);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1220px){
|
||||
margin-left: auto;
|
||||
margin-right: 0px;
|
||||
width: calc(100% - var(--panel-w)*0.5 - var(--padding-body));
|
||||
.panel-left{
|
||||
width: calc(var(--panel-w)*0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.section__article {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
|
||||
&:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing)*1);
|
||||
}
|
||||
h2{
|
||||
font-size: var(--fs-xbig);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--grey-200);
|
||||
}
|
||||
|
||||
.section__article{
|
||||
a:hover{
|
||||
color: var(--grey-200);
|
||||
}
|
||||
.section__title{
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing)*0.5)
|
||||
}
|
||||
.section__title {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
padding-right: 2ch;
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#hero{
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc(var(--padding-body)*-1);
|
||||
|
||||
figcaption{
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
@media #{$x-small}{ font-size: var(--fs-xsmall); }
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
|
||||
|
||||
}
|
||||
|
||||
&.hero-video{
|
||||
figure{
|
||||
width: 100%;
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
dt {
|
||||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
}
|
||||
|
||||
#nav--page{
|
||||
ul{
|
||||
list-style: none;
|
||||
li{
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
a{
|
||||
display: block;
|
||||
padding: 0.3em 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul:not(.keywords) {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#section__synthese {
|
||||
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
|
||||
p+p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
#section__short{
|
||||
font-size: var(--fs-medium);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.panel-left{
|
||||
//background-color: yellow;
|
||||
|
||||
height: calc(100vh - var(--header-h));
|
||||
position: fixed;
|
||||
left: var(--padding-body);
|
||||
padding-bottom: calc(var(--padding-body)*1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
z-index: calc(var(--z-header) - 1);
|
||||
|
||||
#nav--page {
|
||||
padding-bottom: var(--spacing);
|
||||
width: calc(var(--panel-w)*0.5);
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
margin-bottom: 4px;
|
||||
font-weight: bold;
|
||||
font-size: var(--fs-small);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 5px 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn--group{
|
||||
width: calc(var(--panel-w)*0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:calc(var(--spacing)*0.25);
|
||||
|
||||
#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;
|
||||
|
||||
}
|
||||
|
||||
button, .dropdown{
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// SHARE ACTIONS --------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
#share-banner__desktop{ display: none; }
|
||||
#share-banner__desktop ~ .modal--share{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .2s ease-in;
|
||||
}
|
||||
|
||||
#share-banner__desktop:checked ~ .modal--share{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// SMALL ----------------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
@media #{$small} {
|
||||
[data-template="investigation-summary"] main {
|
||||
width: 100%;
|
||||
|
||||
@media #{$small}{
|
||||
|
||||
[data-template="investigation-summary"] main{
|
||||
|
||||
header{
|
||||
padding-top: calc(var(--spacing)*1.5);
|
||||
.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)*1.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
header {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
.section__article {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
|
||||
#hero {
|
||||
figcaption {
|
||||
margin: 0 var(--padding-body);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-left {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
[data-template="investigation-summary"] main{
|
||||
#section__dl .dl__group{
|
||||
|
||||
column-gap: 1ch;
|
||||
font-size: var(--fs-small);
|
||||
padding: calc(var(--spacing)*0.25) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// DESKTOP ----------------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
|
||||
[data-template="investigation-summary"] main{
|
||||
|
||||
#banner--page{
|
||||
height: calc(100vh - var(--header-h));
|
||||
height: calc(100dvh - var(--header-h));
|
||||
margin-bottom: calc((100vh - var(--header-h))*-1);
|
||||
margin-bottom: calc((100dvh - var(--header-h))*-1);
|
||||
padding: var(--padding-body);
|
||||
padding-left: 0px;
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: var(--banner-medium);
|
||||
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: calc(var(--spacing)*3) 0;
|
||||
|
||||
}
|
||||
|
||||
.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: calc(var(--spacing)*2) auto;
|
||||
}
|
||||
|
||||
.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) + 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: calc(var(--spacing)*3) 0;
|
||||
figcaption{
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
header{
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing)*2) auto;
|
||||
}
|
||||
|
||||
.section__article{
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing)*3) auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media #{$x-small} {
|
||||
[data-template="investigation-summary"] main {
|
||||
#section__dl .dl__group {
|
||||
column-gap: 1ch;
|
||||
font-size: var(--fs-small);
|
||||
padding: calc(var(--spacing) * 0.25) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
|
||||
[data-template="investigations"] main{
|
||||
|
||||
#container-cards{
|
||||
max-width: var(--max-w-container);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: var(--padding-body);
|
||||
margin-bottom: 10vh;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
478
assets/css/template/_report.scss
Normal file
478
assets/css/template/_report.scss
Normal file
|
|
@ -0,0 +1,478 @@
|
|||
|
||||
|
||||
|
||||
|
||||
// LAOUT -----------------------------------
|
||||
|
||||
|
||||
@media #{$small}{
|
||||
[data-template="report"] {
|
||||
|
||||
#toggle-panel{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#report__aside{
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
height: 100vh;
|
||||
left: -100vw;
|
||||
z-index: calc(var(--z-header) + 10);
|
||||
transition: left .4s ease-in;
|
||||
background: var(--color-bg);
|
||||
|
||||
|
||||
.panel__header{
|
||||
margin: 0 var(--padding-body);
|
||||
border-bottom: var(--border-aside);
|
||||
height: var(--header-h);
|
||||
}
|
||||
|
||||
.panel__content{
|
||||
height: calc(100dvh - var(--header-h));
|
||||
height: calc(100vh - var(--header-h));
|
||||
padding-bottom: 30vh;
|
||||
}
|
||||
|
||||
.btn--group{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.panel-open #report__aside{
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.arrow-report{
|
||||
font-size: 14px;
|
||||
color: var(--color-txt-light);
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
}
|
||||
|
||||
.media-anchor{
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.arrow-report{
|
||||
position: relative;
|
||||
left: 50px;
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
[data-template="report"] {
|
||||
|
||||
|
||||
.report__header {
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-cards);
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
|
||||
.report__content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: calc(var(--padding-body)*2.5);
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
|
||||
.report__txt {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
#report__medias {
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--padding-body));
|
||||
align-self: start;
|
||||
|
||||
// border-left: var(--border-light);
|
||||
// padding-left: var(--padding-inner);
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
// border: var(--border-light);
|
||||
min-height: 100px;
|
||||
|
||||
}
|
||||
|
||||
#arrow__medias{
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--padding-body));
|
||||
align-self: start;
|
||||
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
transform: rotate(180deg);
|
||||
transform-origin: center;
|
||||
|
||||
|
||||
span{
|
||||
position: relative;
|
||||
left: 26px;
|
||||
top: calc(var(--spacing)*-5);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
#toggle-panel {
|
||||
position: fixed;
|
||||
top: var(--header-h);
|
||||
left: var(--padding-body);
|
||||
z-index: calc(var(--z-header) + 100);
|
||||
}
|
||||
|
||||
#report__aside {
|
||||
position: fixed;
|
||||
top: var(--header-h);
|
||||
left: var(--padding-body);
|
||||
width: var(--panel-w);
|
||||
height: calc(100vh - var(--header-h));
|
||||
z-index: calc(var(--z-header) + 200);
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 4px 0px 4px 1px var(--color-bg);
|
||||
|
||||
.panel__header{
|
||||
border: var(--border-aside);
|
||||
height: calc(var(--h-block)*1.5);
|
||||
}
|
||||
|
||||
.panel__content {
|
||||
height: calc(100% - var(--h-block)*4.25);
|
||||
padding-bottom: 80px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
#report__aside {
|
||||
left: calc(var(--panel-w)*-1);
|
||||
transition: left ease-in-out .5s;
|
||||
}
|
||||
#report {
|
||||
padding-left: calc(var(--padding-body)*2);
|
||||
transition: padding-left ease-in-out .5s;
|
||||
}
|
||||
|
||||
|
||||
.panel-open{
|
||||
|
||||
#report__aside{
|
||||
left: var(--padding-body);
|
||||
}
|
||||
#report {
|
||||
padding-left: calc(var(--panel-w) + var(--padding-body)*1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// HEADER -------------------------------------------------------------------------
|
||||
|
||||
.report__header {
|
||||
|
||||
|
||||
display: grid;
|
||||
column-gap: var(--padding-inner);
|
||||
row-gap: calc(var(--spacing)*1);
|
||||
grid-template-columns: 65% 35%;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
position: relative;
|
||||
|
||||
.report__title-group {
|
||||
grid-row: 1;
|
||||
grid-column: span 2;
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: normal;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: normal;
|
||||
text-wrap: balance;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include figure-16-9();
|
||||
|
||||
figure {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.report__dl {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
align-self: end;
|
||||
// font-size: var(--fs-small);
|
||||
border-bottom: var(--border-light);
|
||||
align-items: flex-start;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn--group {
|
||||
position: relative;
|
||||
grid-row: 3;
|
||||
grid-column: 1/3;
|
||||
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
flex-wrap: wrap;
|
||||
align-items: start;
|
||||
gap: calc(var(--spacing)*0.25);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// CONTENT -------------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
.report__content {
|
||||
|
||||
|
||||
|
||||
.section-content {
|
||||
padding-bottom: calc(var(--spacing)*3);
|
||||
&:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing)*2);
|
||||
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section-title {
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: var(--spacing);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: calc(var(--spacing)*0.5) 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 3ch;
|
||||
}
|
||||
}
|
||||
|
||||
.report__content:target {
|
||||
padding-top: calc(var(--header-h)*2 + var(--spacing)) !important;
|
||||
}
|
||||
|
||||
|
||||
.media{
|
||||
|
||||
video{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure{
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.caption{
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.swiper{
|
||||
width: calc(100% - 60px);
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/// PANEL-LEFT --------------------------------------------
|
||||
|
||||
|
||||
|
||||
#toggle-panel {
|
||||
width: calc(var(--h-block) * 1);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#report__aside {
|
||||
--border-aside: 1px solid var(--color-txt);
|
||||
|
||||
.panel__header {
|
||||
display: flex;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5ch;
|
||||
|
||||
.icon {
|
||||
width: calc(var(--h-block)*1.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
|
||||
.text {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
svg {
|
||||
width: 10px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.close svg {
|
||||
fill: var(--grey-200);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.panel__content {
|
||||
padding: var(--padding-body);
|
||||
overflow: scroll;
|
||||
@include hide-scroll();
|
||||
border: var(--border-aside);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
||||
#toc {
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: var(--fs-small);
|
||||
|
||||
color: var(--color-txt-light);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 5px 1ch;
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
li.selected {
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--grey-800);
|
||||
}
|
||||
|
||||
.toc-level-1 {
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toc-level-2 {
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
padding-left: 4ch;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn--group {
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
display: flex;
|
||||
gap: var(--padding-inner);
|
||||
|
||||
button {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1
assets/icons/article.svg
Normal file
1
assets/icons/article.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.362 2c4.156 0 2.638 6 2.638 6s6-1.65 6 2.457v11.543h-16v-20h7.362zm.827-2h-10.189v24h20v-14.386c0-2.391-6.648-9.614-9.811-9.614zm4.811 13h-10v-1h10v1zm0 2h-10v1h10v-1zm0 3h-10v1h10v-1z"/></svg>
|
||||
|
After Width: | Height: | Size: 289 B |
|
|
@ -1,4 +1,4 @@
|
|||
<svg style="fill: var(--color-txt)" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="22.3249" width="31.1111" height="2.22222" transform="rotate(-45 0 22.3249)" />
|
||||
<rect x="1.80078" width="31.1111" height="2.22222" transform="rotate(45 1.80078 0)" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 309 B After Width: | Height: | Size: 266 B |
1
assets/icons/filter.svg
Normal file
1
assets/icons/filter.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 0h22l-9 14.094v9.906l-4-2v-7.906z"/></svg>
|
||||
|
After Width: | Height: | Size: 137 B |
1
assets/icons/folder.svg
Normal file
1
assets/icons/folder.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.083 4c1.38 1.612 2.578 3 4.917 3h11v13h-20v-16h4.083zm.917-2h-7v20h24v-17h-13c-1.629 0-2.305-1.058-4-3z"/></svg>
|
||||
|
After Width: | Height: | Size: 207 B |
56
assets/icons/pdf.svg
Normal file
56
assets/icons/pdf.svg
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="550.801px" height="550.801px" viewBox="0 0 550.801 550.801" style="enable-background:new 0 0 550.801 550.801;"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<path d="M160.381,282.225c0-14.832-10.299-23.684-28.474-23.684c-7.414,0-12.437,0.715-15.071,1.432V307.6
|
||||
c3.114,0.707,6.942,0.949,12.192,0.949C148.419,308.549,160.381,298.74,160.381,282.225z"/>
|
||||
<path d="M272.875,259.019c-8.145,0-13.397,0.717-16.519,1.435v105.523c3.116,0.729,8.142,0.729,12.69,0.729
|
||||
c33.017,0.231,54.554-17.946,54.554-56.474C323.842,276.719,304.215,259.019,272.875,259.019z"/>
|
||||
<path d="M488.426,197.019H475.2v-63.816c0-0.398-0.063-0.799-0.116-1.202c-0.021-2.534-0.827-5.023-2.562-6.995L366.325,3.694
|
||||
c-0.032-0.031-0.063-0.042-0.085-0.076c-0.633-0.707-1.371-1.295-2.151-1.804c-0.231-0.155-0.464-0.285-0.706-0.419
|
||||
c-0.676-0.369-1.393-0.675-2.131-0.896c-0.2-0.056-0.38-0.138-0.58-0.19C359.87,0.119,359.037,0,358.193,0H97.2
|
||||
c-11.918,0-21.6,9.693-21.6,21.601v175.413H62.377c-17.049,0-30.873,13.818-30.873,30.873v160.545
|
||||
c0,17.043,13.824,30.87,30.873,30.87h13.224V529.2c0,11.907,9.682,21.601,21.6,21.601h356.4c11.907,0,21.6-9.693,21.6-21.601
|
||||
V419.302h13.226c17.044,0,30.871-13.827,30.871-30.87v-160.54C519.297,210.838,505.47,197.019,488.426,197.019z M97.2,21.605
|
||||
h250.193v110.513c0,5.967,4.841,10.8,10.8,10.8h95.407v54.108H97.2V21.605z M362.359,309.023c0,30.876-11.243,52.165-26.82,65.333
|
||||
c-16.971,14.117-42.82,20.814-74.396,20.814c-18.9,0-32.297-1.197-41.401-2.389V234.365c13.399-2.149,30.878-3.346,49.304-3.346
|
||||
c30.612,0,50.478,5.508,66.039,17.226C351.828,260.69,362.359,280.547,362.359,309.023z M80.7,393.499V234.365
|
||||
c11.241-1.904,27.042-3.346,49.296-3.346c22.491,0,38.527,4.308,49.291,12.928c10.292,8.131,17.215,21.534,17.215,37.328
|
||||
c0,15.799-5.25,29.198-14.829,38.285c-12.442,11.728-30.865,16.996-52.407,16.996c-4.778,0-9.1-0.243-12.435-0.723v57.67H80.7
|
||||
V393.499z M453.601,523.353H97.2V419.302h356.4V523.353z M484.898,262.127h-61.989v36.851h57.913v29.674h-57.913v64.848h-36.593
|
||||
V232.216h98.582V262.127z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
1
assets/icons/pin.svg
Normal file
1
assets/icons/pin.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M160 96C160 78.3 174.3 64 192 64L448 64C465.7 64 480 78.3 480 96C480 113.7 465.7 128 448 128L418.5 128L428.8 262.1C465.9 283.3 494.6 318.5 507 361.8L510.8 375.2C513.6 384.9 511.6 395.2 505.6 403.3C499.6 411.4 490 416 480 416L160 416C150 416 140.5 411.3 134.5 403.3C128.5 395.3 126.5 384.9 129.3 375.2L133 361.8C145.4 318.5 174 283.3 211.2 262.1L221.5 128L192 128C174.3 128 160 113.7 160 96zM288 464L352 464L352 576C352 593.7 337.7 608 320 608C302.3 608 288 593.7 288 576L288 464z"/></svg>
|
||||
|
After Width: | Height: | Size: 711 B |
1
assets/icons/play.svg
Normal file
1
assets/icons/play.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z"/></svg>
|
||||
|
After Width: | Height: | Size: 277 B |
1
assets/icons/printer.svg
Normal file
1
assets/icons/printer.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 18h-8v-1h8v1zm-2 1h-6v1h6v-1zm10-14v13h-4v6h-16v-6h-4v-13h4v-5h16v5h4zm-18 0h12v-3h-12v3zm12 10h-12v7h12v-7zm4-8h-20v9h2v-3h16v3h2v-9zm-1.5 1c-.276 0-.5.224-.5.5s.224.5.5.5.5-.224.5-.5-.224-.5-.5-.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 304 B |
1
assets/icons/share.svg
Normal file
1
assets/icons/share.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z"/></svg>
|
||||
|
After Width: | Height: | Size: 679 B |
|
|
@ -1,9 +1,3 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="39.2157" height="39.2157" fill="url(#pattern0_310_283)"/>
|
||||
<defs>
|
||||
<pattern id="pattern0_310_283" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_310_283" transform="scale(0.01)"/>
|
||||
</pattern>
|
||||
<image id="image0_310_283" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAklEQVR4nO2dW4hWVRTHT5OYTdnNzG7YFYIIuliSYaVmxBSk5fQgaqFI9aKRBZV2gW6WUBRkoUk+1EMIjYNp6UAmNV6iNFApIyvGkiyVqajRcZx+sXE9TMP3fbPPOfvsvc7M/sEHwwzMXmv9v3POPmutvXeSRCKRSCQSiUQikUgkUgugDrgSmAw0AuOA4aHt0g5wlsTqHomdiWFd3n/6APALlfkWeBq4xJkXJcfEAngG2FUlZj8Ds7P+87ew41+gFWhIBihAg8TAxMKGN9IOMJ1sfAaMTQYIwFjxOQtTbQc5DthNPlYAw5J+CnAqsCRnjH4wsbYZ7GbcsBe4Pemft6e9jmJ0o82A83HLotyzCz2zzZcdx+Zxm4HN7cY1q4ChSUkBhooPrnnfZvBPKYbtwIVJyQDOB7YWFJP1NgYUNbjhN+DqpCQAo4DfC4zHVzZGbKNY2oHRiXKAa4CDBcfCSpANFM8fwPWJ7ivjoIc4WN2yinh4VRNlTKIM4AbgT08xaLYx6D38YRwflSgBuBb4y6P/77rMYblin4YEJXCpTDp8stjGsBfwj0nVjPAS+co+Dwe+C+D3szbGzSMMXwIne1Hg//7WA5sD+fyQjYEzCMca4HgvShzzdRCwNqC/02yTZyFZ5EWNY76+EtjX22yMvI7wTPUgxrTQTlrNMIGLQlsJHDJT0ALFuAr4J7STwAW2mU0NtJlGgQLEGAb8iA5OsjXafEM1sM5lLUVqGi3ooCON4XvQw2MOBXkCPbSlMfwL9NBl8ksOxBgNHEEPm9MY34wu9gBn5BDjNOAndNGUxoE30ceKHIJ8gD4Wp3HgKXQyNYMYWXvMimZBGidmo5MDwNkp/DjHU6EpC7PSCHIHelmVwo8m9NKQtp6smekWPtyLbuybPcxtAd3sr9WqCpwptzfN2Nd/pL+3A90sqWH/MnTTYdXX28sps/5DM92VOlckW23+pplvUokhjplikXa29ixomZ899JW5YE0WQUyTdBmYVYLpev4inHkJoxy0AUPkoykpmq90W2WmYhJ7ZeBh4BHKwdHMHTZSjygD++VTBloyiSGC3BXa+n7I5LwVtp2hPehH7HSxVn1ciuW+kdrcmkuMHqK808dAkb5524kYIsgQZWXdsmFeYOudCSKijAB2hPashGwvrJFc3k2y7lwwENlQ+AYK0qC8UFkHhzZMbJ43sSpUjF7CXAF8FNpzZZjZ6Grgcm9CVKkuLpXVtQOVdtn7RM+Sb+AEYIJcqitNzh/o7KNIs09yO1o4KjbVKs51im+mXv8cMB4YnJQBed6MBC6WzyTgdVkks0tpIalbbFsrtt7Zw/6RXp8LRWBa7qXPq8xT5h3Ak1bLB7Qit68WpVdBVrrFp/FJWZC13hvp/2zUtMa+2kP9NWUP6aIxvr5qfE80Ieu8feyRovlqsW5xLRRJp2hvGfLB90Uswcsyrd3kxd1y0OpznX0lQR4NHQGFzAslRv0AT5dUo9157cNSkPuqmhSZEUKQZcru3a3oYWkIQTQF4EHgfvTweQhBtqCDTtmd4XTgMDpoDSHIx+iguYdNJu1fzu52B4KYMq4GpvSwaQo6eDGEILeE9ppjB6QM6vWian4XmgkhBKlT0P4/v4JdCxQsjwhz+IDZMzCg44cr5Y4ktxZyN6M5QcQQ5wfLwSQhWF7DruWBbNodvL4O3BSgBnIUuKyPPXi7AlQT/T87KgG8pO1NGP+ZhIWJFmT1a5PH7cnPtdz8wFfyc7W6bhTJ/m7S9NAE5nqwZ0uQ7K4NsoHmJwU6vyFNAUiu3CJLy+uBUxLNyMyriHOsDppGtQz2nFfQglCz696JSRmQb6bp93XFIXOcX85leS7fTZYGLdVmQTawmesgA9tlWlAd2DPJwVT4cNAXP4fd8V9nDMABYKJDWybm2LZpm6ru9jxI0m+OdJbbsq6IY/ZkK/U0myn/KrbrmtY6nBrPlLMSK63A+hv40GSSPdgyUcYyY/bmiMygZpbmwZ0Xc3iLbG7cCNxtDggjQB5IZoVjxIZGscn7wTKRSCQSiUQikUgkEokkhv8Ar2Kl60ZaukcAAAAASUVORK5CYII="/>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bluesky" viewBox="0 0 16 16">
|
||||
<path d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.698-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 580 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.2549 0C7.72549 0 0 7.72549 0 17.2549C0 25.9059 6.37255 33.0486 14.6761 34.2965V21.8282H10.4071V17.2925H14.6761V14.2745C14.6761 9.27765 17.1106 7.08392 21.2635 7.08392C23.2526 7.08392 24.3043 7.23137 24.8024 7.29882V11.258H21.9694C20.2063 11.258 19.5906 12.9294 19.5906 14.8133V17.2925H24.7576L24.0565 21.8282H19.5906V34.3333C28.0126 33.1906 34.5098 25.9898 34.5098 17.2549C34.5098 7.72549 26.7843 0 17.2549 0Z" fill="white"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
|
||||
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 542 B After Width: | Height: | Size: 435 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.14777 0C4.10333 0 0 4.10713 0 9.15288V22.2248C0 27.2692 4.10713 31.3725 9.15288 31.3725H22.2248C27.2692 31.3725 31.3725 27.2654 31.3725 22.2197V9.14777C31.3725 4.10333 27.2654 0 22.2197 0H9.14777ZM24.8366 5.22876C25.5582 5.22876 26.1438 5.81438 26.1438 6.53595C26.1438 7.25752 25.5582 7.84314 24.8366 7.84314C24.115 7.84314 23.5294 7.25752 23.5294 6.53595C23.5294 5.81438 24.115 5.22876 24.8366 5.22876ZM15.6863 7.84314C20.0118 7.84314 23.5294 11.3608 23.5294 15.6863C23.5294 20.0118 20.0118 23.5294 15.6863 23.5294C11.3608 23.5294 7.84314 20.0118 7.84314 15.6863C7.84314 11.3608 11.3608 7.84314 15.6863 7.84314ZM15.6863 10.4575C14.2995 10.4575 12.9696 11.0084 11.989 11.989C11.0084 12.9696 10.4575 14.2995 10.4575 15.6863C10.4575 17.073 11.0084 18.403 11.989 19.3836C12.9696 20.3641 14.2995 20.915 15.6863 20.915C17.073 20.915 18.403 20.3641 19.3836 19.3836C20.3641 18.403 20.915 17.073 20.915 15.6863C20.915 14.2995 20.3641 12.9696 19.3836 11.989C18.403 11.0084 17.073 10.4575 15.6863 10.4575Z" fill="white"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
|
||||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.1905 0H3.80952C1.70667 0 0 1.70667 0 3.80952V28.1905C0 30.2933 1.70667 32 3.80952 32H28.1905C30.2933 32 32 30.2933 32 28.1905V3.80952C32 1.70667 30.2933 0 28.1905 0ZM9.90476 12.1905V26.6667H5.33333V12.1905H9.90476ZM5.33333 7.97714C5.33333 6.91048 6.24762 6.09524 7.61905 6.09524C8.99048 6.09524 9.85143 6.91048 9.90476 7.97714C9.90476 9.04381 9.05143 9.90476 7.61905 9.90476C6.24762 9.90476 5.33333 9.04381 5.33333 7.97714ZM26.6667 26.6667H22.0952C22.0952 26.6667 22.0952 19.6114 22.0952 19.0476C22.0952 17.5238 21.3333 16 19.4286 15.9695H19.3676C17.5238 15.9695 16.7619 17.539 16.7619 19.0476C16.7619 19.741 16.7619 26.6667 16.7619 26.6667H12.1905V12.1905H16.7619V14.141C16.7619 14.141 18.2324 12.1905 21.1886 12.1905C24.2133 12.1905 26.6667 14.2705 26.6667 18.4838V26.6667Z" fill="white"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
|
||||
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 908 B After Width: | Height: | Size: 666 B |
|
|
@ -1,9 +1,3 @@
|
|||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="29.9355" height="30.8125" fill="url(#pattern0_441_207)"/>
|
||||
<defs>
|
||||
<pattern id="pattern0_441_207" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_441_207" transform="matrix(0.01 0 0 0.00971537 0 0.0142315)"/>
|
||||
</pattern>
|
||||
<image id="image0_441_207" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF9ElEQVR4nO2da4gXVRTA7+qurtnLHvQgozKpKBfzRUpWq9aamZUZ9jATg0AzisCUwp5QUREJEYSU1ReDFBYxk14EEWhRSaFRsWURViTUZg9d3X5x8AiL7M7MvTPrvTNzfzBf9nHuuXPmP/eexz1/YyKRSCQSiUQikUgkEolEIpFIYQDNwOnAWGAcMA1oA24AbgLu0Guu/uwa/Ru5xgPnAkf6nkdpkJulN3o+8BiwGngL+BL4jeL4G/gW+BB4A3gOWAS0AieZugKcBtwOvAxsA7oJgx3A68AS4CxTZeQJBO4DtlIetgHLgZNNxV5HTwN7KS9dwDOlX4eAUUAH1aFD5mTKCHAFsJvqsVvmZsoEMBH4i+ryD3CJKQPAecAfVJ/fxb8xIQM0Ah9THz4FmkyoAI9QPx40IQKcD+yjfnQF+eoC1lFf1piQAEYC/xXwpL0JLAZagFM0qDgcuBR4APjGQe7XwP3AZA3ZDFbZLTrWxgKc1u6gQi3qxboihlwDjMgwToNGeeUmp/FVVn9BxtYYVp6H6kkTAsAAYKfjJP4FrncMx7QnyG13CXMAc1QnF36UB8b4BrjIh3MFNAGbepG7Kc9WVF9tEqZ3YazxjWz7HJVfWMDYJwA/95D5C3BiAXIXOs5pufENsMFB8fUFjj+/h9wFnufVXtT4eRSXp9IGWTjHFDh+A/ARsLnId7imi20X+Z+KGt9V6aOwZ6vFGnEVsEzTrCMT/naM5M4Tfn+2yhBZM7OuMQ7JNDHgEOML4AIHgzyVQW5LL1tbmewLNgu2xtae7+VJl7z66Az/L4k1W/x57cDlDgrfmCJzeEphw6sW+r2UIGeXVLKk/L9UtNjSanyh5Ta2TEqRuTqDjGkZdJuSQc5rKTImOcxvpvGF4xPU51MJDMqY2GovKLYmvlBzyqfVlrnGF8BtDgoPS5A3OqOMTmBgSvRAEkhZGJcgZ5jD/OYZXxziA2RlcIK8qQV90k61kHNlghwJbpbqE3KrpbL7U+RNt5A1OiU3k5VZKT6ObRHfbFMig+wp0CATEuRcWIRBVNa+Mi3q8yyVrYNB2owvgFtqYJAuyzlOMb4AbrZUtg4GmWx8IV63pbJ7a2CQ8cYXsqOwVLarhAbZbznH1FR0vwHM8LjtnXCYDGK77T3e+CJjvKgn3SU0iA0SVW40vnAJvpXJIBxwDG3oND7RxJAtDSUyyADLue0wAVS629JYkEGKYlZKgqvwbGi/IdV6DjegqUQGabKUtdH4REpuCo72Ticsg0h+xoZVxif6jrXdpzeXyCDNlrJWGN8Av1oqfUSJDDLEUtZ84xvttmDD0BIZZGhpwiY9lH7PUun3gXf6uD7j8LM1QR/R1cYpPDoEg8hRggh0mBAAVvq+E4HwhAkBPdlUd7qAc0wIOCSpqsijJhS0z1Wd2ZLk7B52gGOoL194zX/0hZyLoH5sDrYLXcoBzCryosS5TKjUaKf1PXCtKUlvrCrTCTzs9XSUDRrz2UP12KmG6LNiP1gs4z59sQH43KEWqki+A57Vdh59HnkIHu3emZepPfIQ0pDgLj2W9gHwg0PuJQlJG3yi/Xsf0tNgZ5iqoN2j8zInZYxBeqK2VYv05ID/veIpS6+RXq4VwFLten0dcLGEOEqzFuSlgG5yy3zPoVIAd+Y0yFrfc6gUeiZPtoiu/JmU4o04ADye81OyxPccKoWWBuXp2burUr3WKxJK2SJRZN/zqAxa8ScOXh62i3Pmey6VQQueiwinrNMOPrmTQMBxUvajdQDlbKpfwJG3vN1KDyK7t3c1rLFYZbfpVxqN0B3emVpvPEpDHwuk+ECNuv2Qwzf+Tsv6RL/EJURmm7qioQufAcMwyz59on1MZEsbCotM3dFFdWUgPeKX+r4fwaDNYVZZtFDqj5yHv44LoaJ5D/kiyFcytg8nZ5xsrbRjknMtvudeCjjQGPlqjYet1/7tro3ypcHy2xo1mOj1uHKVAAaqf3GZVHyob3G3tnw9eN2jP5+hDumxvvWORCKRSCQSiUQikUgkEolETMX5H+qu+wk8Zr/DAAAAAElFTkSuQmCC"/>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16">
|
||||
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a4 4 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522q0-1.288.66-2.046c.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764q.662.757.661 2.046z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 952 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M29.4 3.5V25.9C29.4 27.8299 27.8299 29.4 25.9 29.4H3.5C1.5701 29.4 0 27.8299 0 25.9V3.5C0 1.5701 1.5701 0 3.5 0H25.9C27.8299 0 29.4 1.5701 29.4 3.5ZM20.6808 22.3391C22.5785 20.4435 22.5253 18.074 21.903 16.6201C21.525 15.7416 20.8474 14.9891 19.9444 14.4445L19.7883 14.3479C19.5573 14.2023 19.362 14.0854 19.0561 13.9685C19.0505 13.7739 19.0386 13.5793 19.0155 13.4036C18.6025 10.2109 16.5298 9.5291 14.8589 9.5186C13.3511 9.5186 12.0967 10.1626 11.3281 11.333L12.4985 12.1016C13.0137 11.3169 13.8082 10.9193 14.8547 10.9193C16.5116 10.9298 17.3922 11.7754 17.6267 13.58C16.828 13.4183 15.9285 13.3602 14.9618 13.4169C12.215 13.5751 11.0691 15.2306 11.1524 16.8021C11.2462 18.5423 12.747 19.7575 14.8036 19.7575C14.8946 19.7575 14.9849 19.7554 15.0724 19.7498C16.6803 19.6616 18.6459 18.8468 18.9994 15.5057C19.0141 15.5148 19.0281 15.5239 19.0428 15.533L19.2199 15.6429C19.8723 16.0363 20.3546 16.5648 20.6157 17.1724C21.0658 18.2231 21.0931 19.9472 19.6903 21.3486C18.4779 22.5596 17.0219 23.0839 14.8351 23.1C12.4061 23.0818 10.5658 22.2985 9.3667 20.7725C8.2495 19.3529 7.6727 17.3054 7.651 14.6986C7.6727 12.089 8.2495 10.0464 9.3667 8.6275C10.5665 7.1008 12.411 6.3182 14.8365 6.3C17.2809 6.3182 19.152 7.1043 20.3973 8.6366C21.0021 9.3807 21.4648 10.3229 21.7728 11.4352L23.1224 11.0628C22.7626 9.7622 22.2117 8.6485 21.4837 7.7532C19.9619 5.8814 17.7296 4.9217 14.8365 4.9C11.9525 4.9217 9.7419 5.8842 8.2656 7.7623C6.9531 9.4304 6.2748 11.7607 6.2503 14.6993C6.2748 17.6344 6.9531 19.9696 8.2656 21.6384C9.7419 23.5158 11.949 24.479 14.8351 24.5C17.3999 24.4811 19.2031 23.8147 20.6808 22.3391ZM17.4951 14.9835C17.5441 14.9947 17.5917 15.0052 17.6365 15.0157C17.633 15.0703 17.6295 15.1179 17.626 15.1543C17.4062 17.9039 16.0195 18.2966 14.9933 18.3526C14.9296 18.3561 14.8666 18.3582 14.8036 18.3582C13.5079 18.3582 12.6028 17.703 12.551 16.7279C12.5055 15.8753 13.1362 14.9247 15.0437 14.8155C15.2516 14.8029 15.456 14.7966 15.6562 14.7966C16.3275 14.7959 16.9463 14.8589 17.4951 14.9835Z" fill="white"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-threads" viewBox="0 0 16 16">
|
||||
<path d="M6.321 6.016c-.27-.18-1.166-.802-1.166-.802.756-1.081 1.753-1.502 3.132-1.502.975 0 1.803.327 2.394.948s.928 1.509 1.005 2.644q.492.207.905.484c1.109.745 1.719 1.86 1.719 3.137 0 2.716-2.226 5.075-6.256 5.075C4.594 16 1 13.987 1 7.994 1 2.034 4.482 0 8.044 0 9.69 0 13.55.243 15 5.036l-1.36.353C12.516 1.974 10.163 1.43 8.006 1.43c-3.565 0-5.582 2.171-5.582 6.79 0 4.143 2.254 6.343 5.63 6.343 2.777 0 4.847-1.443 4.847-3.556 0-1.438-1.208-2.127-1.27-2.127-.236 1.234-.868 3.31-3.644 3.31-1.618 0-3.013-1.118-3.013-2.582 0-2.09 1.984-2.847 3.55-2.847.586 0 1.294.04 1.663.114 0-.637-.54-1.728-1.9-1.728-1.25 0-1.566.405-1.967.868ZM8.716 8.19c-2.04 0-2.304.87-2.304 1.416 0 .878 1.043 1.168 1.6 1.168 1.02 0 2.067-.282 2.232-2.423a6.2 6.2 0 0 0-1.528-.161"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 901 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 301 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="34" height="26" viewBox="0 0 34 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M32.8615 4.31373C32.549 2.58885 31.0601 1.33272 29.3321 0.940564C26.7463 0.392157 21.9608 0 16.7831 0C11.6085 0 6.74632 0.392157 4.15748 0.940564C2.4326 1.33272 0.940564 2.50919 0.628064 4.31373C0.3125 6.27451 0 9.01961 0 12.549C0 16.0784 0.3125 18.8235 0.704657 20.7843C1.02022 22.5092 2.50919 23.7653 4.23407 24.1575C6.97917 24.7059 11.6851 25.098 16.8627 25.098C22.0404 25.098 26.7463 24.7059 29.4914 24.1575C31.2163 23.7653 32.7053 22.5888 33.0208 20.7843C33.3333 18.8235 33.7255 15.9988 33.8051 12.549C33.6458 9.01961 33.2537 6.27451 32.8615 4.31373ZM12.549 18.0392V7.05882L22.117 12.549L12.549 18.0392Z" fill="white"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
|
||||
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 737 B After Width: | Height: | Size: 893 B |
8
assets/icons/toc.svg
Normal file
8
assets/icons/toc.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
<path d="M200,21.163v4.211c0,5.131-4.166,9.297-9.297,9.297H71.411c-5.131,0-9.297-4.166-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h119.292C195.834,11.866,200,16.032,200,21.163Z"/>
|
||||
<path d="M38.741,21.163v4.211c0,5.131-4.166,9.297-9.297,9.297H8.956c-5.131,0-9.297-4.166-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h20.488C34.575,11.866,38.741,16.032,38.741,21.163Z"/>
|
||||
<path d="M200,97.827v4.211c0,5.132-4.166,9.297-9.297,9.297H71.411c-5.131,0-9.297-4.165-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h119.292C195.834,88.53,200,92.696,200,97.827Z"/>
|
||||
<path d="M38.741,97.827v4.211c0,5.132-4.166,9.297-9.297,9.297H8.956c-5.131,0-9.297-4.165-9.297-9.297v-4.211c0-5.131,4.166-9.297,9.297-9.297h20.488C34.575,88.53,38.741,92.696,38.741,97.827Z"/>
|
||||
<path d="M200,174.491v4.212c0,5.131-4.166,9.297-9.297,9.297H71.411c-5.131,0-9.297-4.166-9.297-9.297v-4.212c0-5.131,4.166-9.296,9.297-9.296h119.292C195.834,165.195,200,169.36,200,174.491Z"/>
|
||||
<path d="M38.741,174.491v4.212c0,5.131-4.166,9.297-9.297,9.297H8.956c-5.131,0-9.297-4.166-9.297-9.297v-4.212c0-5.131,4.166-9.296,9.297-9.296h20.488C34.575,165.195,38.741,169.36,38.741,174.491Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
assets/images/adam-raihane/fig-1-a.png
Normal file
BIN
assets/images/adam-raihane/fig-1-a.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 763 KiB |
BIN
assets/images/adam-raihane/fig-1-b.png
Normal file
BIN
assets/images/adam-raihane/fig-1-b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 400 KiB |
BIN
assets/images/adam-raihane/fig-1.png
Normal file
BIN
assets/images/adam-raihane/fig-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
assets/images/adam-raihane/fig-2.png
Normal file
BIN
assets/images/adam-raihane/fig-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
BIN
assets/images/adam-raihane/fig-3.png
Normal file
BIN
assets/images/adam-raihane/fig-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 695 KiB |
BIN
assets/images/adam-raihane/fig-4.png
Normal file
BIN
assets/images/adam-raihane/fig-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
BIN
assets/images/adam-raihane/fig-5.png
Normal file
BIN
assets/images/adam-raihane/fig-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
BIN
assets/images/adam-raihane/fig-6.png
Normal file
BIN
assets/images/adam-raihane/fig-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
BIN
assets/images/adam-raihane/fig-7.png
Normal file
BIN
assets/images/adam-raihane/fig-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 345 KiB |
BIN
assets/images/cover-rapport.png
Normal file
BIN
assets/images/cover-rapport.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 717 KiB |
BIN
assets/images/image-rapport.png
Normal file
BIN
assets/images/image-rapport.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 620 KiB |
|
|
@ -4,19 +4,14 @@ export function bannerStickyDesktop(responsiveSmall) {
|
|||
if (isInitialized) return;
|
||||
|
||||
let body = document.body;
|
||||
if (!body || body.dataset.template !== 'investigation-summary') return;
|
||||
let panel = body.querySelector(".panel-left");
|
||||
|
||||
if (!panel) return;
|
||||
|
||||
let bannerPage = body.querySelector("#banner--page");
|
||||
let sectionDl = document.querySelector("#section__dl");
|
||||
let footer = document.querySelector("#site-footer");
|
||||
|
||||
if (!bannerPage || !sectionDl || !footer) return;
|
||||
|
||||
// Stocker la hauteur initiale du banner
|
||||
const bannerInitialHeight = bannerPage.offsetHeight;
|
||||
|
||||
// Stocker la position initiale du footer (calculée une seule fois au chargement)
|
||||
let footerInitialTop = footer.offsetTop;
|
||||
const bannerInitialHeight = panel.offsetHeight;
|
||||
|
||||
function checkScroll() {
|
||||
const screenWidth = window.innerWidth;
|
||||
|
|
@ -24,33 +19,35 @@ export function bannerStickyDesktop(responsiveSmall) {
|
|||
// Vérifier que l'écran est plus grand que responsiveSmall
|
||||
if (screenWidth <= responsiveSmall) {
|
||||
// Réinitialiser le transform si on est en dessous de responsiveSmall
|
||||
bannerPage.style.transform = '';
|
||||
panel.style.transform = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculer la position du bas de la fenêtre
|
||||
const windowBottom = window.scrollY + window.innerHeight;
|
||||
|
||||
// Calculer de combien on dépasse le haut du footer (position initiale)
|
||||
const overlap = windowBottom - footerInitialTop;
|
||||
// Calculer dynamiquement la position du footer à chaque scroll
|
||||
// Utiliser getBoundingClientRect() + scrollY pour une valeur toujours à jour
|
||||
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
|
||||
|
||||
// Calculer de combien on dépasse le haut du footer
|
||||
const overlap = windowBottom - footerTop;
|
||||
|
||||
if (overlap > 0) {
|
||||
// Le bas de la fenêtre a atteint le haut du footer
|
||||
// Déplacer le banner vers le haut du nombre de pixels de dépassement
|
||||
const translateValue = Math.min(overlap, bannerInitialHeight);
|
||||
bannerPage.style.transform = `translateY(-${translateValue}px)`;
|
||||
panel.style.transform = `translateY(-${translateValue}px)`;
|
||||
} else {
|
||||
// Réinitialiser la position si on n'a pas encore atteint le footer
|
||||
bannerPage.style.transform = 'translateY(0)';
|
||||
panel.style.transform = 'translateY(0)';
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', checkScroll);
|
||||
window.addEventListener('resize', () => {
|
||||
// Recalculer la position du footer lors du resize
|
||||
if (window.innerWidth > responsiveSmall) {
|
||||
bannerPage.style.transform = '';
|
||||
footerInitialTop = footer.offsetTop;
|
||||
panel.style.transform = '';
|
||||
}
|
||||
checkScroll();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
let isInitialized = false;
|
||||
|
||||
export function bannerStickyMobile(responsiveSmall) {
|
||||
if (isInitialized) return;
|
||||
|
||||
let body = document.body;
|
||||
if (!body || body.dataset.template !== 'investigation-summary') return;
|
||||
|
||||
let bannerPage = body.querySelector("#banner--page");
|
||||
let sectionDl = document.querySelector("#section__dl");
|
||||
let footer = document.querySelector("#site-footer");
|
||||
|
||||
if (!bannerPage || !sectionDl || !footer) return;
|
||||
|
||||
function checkScroll() {
|
||||
const screenWidth = window.innerWidth;
|
||||
|
||||
// Vérifier que l'écran est plus petit que responsiveSmall
|
||||
if (screenWidth >= responsiveSmall) {
|
||||
bannerPage.classList.remove('is-visible');
|
||||
bannerPage.style.transform = 'translateY(0)';
|
||||
return;
|
||||
}
|
||||
|
||||
const sectionTop = sectionDl.getBoundingClientRect().top;
|
||||
const footerTop = footer.getBoundingClientRect().top;
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
// Activer le banner quand #section__dl arrive en bas de l'écran
|
||||
if (sectionTop <= windowHeight) {
|
||||
bannerPage.classList.add('is-visible');
|
||||
|
||||
// Pousser le banner vers le haut si le footer arrive en bas de l'écran
|
||||
if (footerTop < windowHeight) {
|
||||
const pushUp = windowHeight - footerTop;
|
||||
bannerPage.style.transform = `translateY(-${pushUp}px)`;
|
||||
} else {
|
||||
bannerPage.style.transform = 'translateY(0)';
|
||||
}
|
||||
} else {
|
||||
bannerPage.classList.remove('is-visible');
|
||||
bannerPage.style.transform = 'translateY(0)';
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', checkScroll);
|
||||
checkScroll();
|
||||
|
||||
isInitialized = true;
|
||||
}
|
||||
35
assets/js/btn-group-mobile.js
Normal file
35
assets/js/btn-group-mobile.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
let isInitialized = false;
|
||||
|
||||
export function btnGroupMobile() {
|
||||
if (isInitialized) return;
|
||||
const btnGroup = document.querySelector(".btn--group__mobile");
|
||||
let footer = document.querySelector("#site-footer");
|
||||
|
||||
if (!btnGroup) return;
|
||||
|
||||
function checkScroll() {
|
||||
|
||||
const windowHeight = window.innerHeight;
|
||||
const scrollY = window.scrollY;
|
||||
const footerTop = footer.getBoundingClientRect().top;
|
||||
|
||||
if (scrollY > windowHeight * 0.6) {
|
||||
btnGroup.classList.add('is-visible');
|
||||
|
||||
if (footerTop < windowHeight) {
|
||||
btnGroup.classList.remove('is-visible');
|
||||
}
|
||||
} else {
|
||||
btnGroup.classList.remove('is-visible');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', checkScroll);
|
||||
checkScroll();
|
||||
|
||||
isInitialized = true;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
87
assets/js/dropdown.js
Normal file
87
assets/js/dropdown.js
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
export function initDropdowns(responsiveSmall) {
|
||||
const dropdowns = document.querySelectorAll('.dropdown');
|
||||
|
||||
function updateBodyOverflow(isOpen, dropdownElement = null) {
|
||||
const isInMobileGroup = dropdownElement?.closest('.btn--group__mobile');
|
||||
if (isOpen && window.innerWidth < responsiveSmall && isInMobileGroup) {
|
||||
document.body.classList.add('is-hidden');
|
||||
} else {
|
||||
document.body.classList.remove('is-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
dropdowns.forEach(dropdown => {
|
||||
const trigger = dropdown.querySelector('.dropdown__trigger');
|
||||
const content = dropdown.querySelector('.dropdown__content');
|
||||
|
||||
if (!trigger) return;
|
||||
|
||||
|
||||
|
||||
// Empêche la fermeture au clic dans le contenu des dropdowns contenant .modal--share
|
||||
if (dropdown.querySelector('.modal--share') && content) {
|
||||
content.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
trigger.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
// Ferme les autres dropdowns ouverts
|
||||
dropdowns.forEach(other => {
|
||||
if (other !== dropdown) {
|
||||
other.classList.remove('is-open', 'dropdown--align-right');
|
||||
other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
||||
}
|
||||
});
|
||||
|
||||
const isOpening = !dropdown.classList.contains('is-open');
|
||||
|
||||
if (isOpening) {
|
||||
// Vérifie s'il y a la place à droite
|
||||
const content = dropdown.querySelector('.dropdown__content');
|
||||
const triggerRect = trigger.getBoundingClientRect();
|
||||
const contentWidth = content.offsetWidth || 300;
|
||||
const spaceRight = window.innerWidth - triggerRect.left;
|
||||
|
||||
if (spaceRight < contentWidth) {
|
||||
dropdown.classList.add('dropdown--align-right');
|
||||
} else {
|
||||
dropdown.classList.remove('dropdown--align-right');
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle le dropdown actuel
|
||||
dropdown.classList.toggle('is-open');
|
||||
trigger.classList.toggle('is-selected');
|
||||
|
||||
// Gère l'overflow du body sur mobile
|
||||
updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
|
||||
});
|
||||
});
|
||||
|
||||
// Ferme tous les dropdowns au clic extérieur
|
||||
document.addEventListener('click', (e) => {
|
||||
dropdowns.forEach(dropdown => {
|
||||
// Ne ferme pas si le clic est dans un dropdown contenant .modal--share
|
||||
if (dropdown.querySelector('.modal--share') && dropdown.contains(e.target)) {
|
||||
return;
|
||||
}
|
||||
dropdown.classList.remove('is-open', 'dropdown--align-right');
|
||||
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
||||
});
|
||||
updateBodyOverflow(false);
|
||||
});
|
||||
|
||||
// Ferme au press Escape
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
dropdowns.forEach(dropdown => {
|
||||
dropdown.classList.remove('is-open', 'dropdown--align-right');
|
||||
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
||||
});
|
||||
updateBodyOverflow(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1,26 +1,22 @@
|
|||
export function headerToggle() {
|
||||
const header = document.getElementById("site-header");
|
||||
const buttonToggle = document.querySelector("#menu-toggle");
|
||||
console.log(header);
|
||||
console.log(buttonToggle);
|
||||
|
||||
if (!header || !buttonToggle) return;
|
||||
buttonToggle.addEventListener("click", () => {
|
||||
document.body.classList.toggle("menu-open");
|
||||
const isOpen = document.body.classList.toggle("menu-open");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// DELETE ?
|
||||
export function headerScrollVisibility() {
|
||||
const header = document.getElementById("site-header");
|
||||
const hero = document.getElementById("hero");
|
||||
|
||||
if (!header || !hero) return;
|
||||
if (!header) return;
|
||||
|
||||
function checkScroll() {
|
||||
const headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 0;
|
||||
const heroBottom = hero.getBoundingClientRect().bottom;
|
||||
|
||||
if (heroBottom <= headerHeight) {
|
||||
if (window.scrollY >= 300) {
|
||||
header.classList.add("is-visible");
|
||||
} else {
|
||||
header.classList.remove("is-visible");
|
||||
|
|
@ -28,6 +24,6 @@ export function headerScrollVisibility() {
|
|||
}
|
||||
|
||||
window.addEventListener("scroll", checkScroll);
|
||||
checkScroll(); // Vérifier au chargement
|
||||
checkScroll();
|
||||
}
|
||||
|
||||
|
|
|
|||
50
assets/js/hero-slider.js
Normal file
50
assets/js/hero-slider.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
|
||||
|
||||
export function initHeroSlider() {
|
||||
const heroSlider = document.querySelector('.hero-slider');
|
||||
|
||||
if (!heroSlider) {
|
||||
return;
|
||||
}
|
||||
|
||||
const swiper = new Swiper('.hero-slider', {
|
||||
// Optional parameters
|
||||
loop: true,
|
||||
speed: 600,
|
||||
effect: 'fade',
|
||||
fadeEffect: {
|
||||
crossFade: true
|
||||
},
|
||||
|
||||
// Touch/Swipe settings (activé par défaut, mais configuré ici pour optimisation)
|
||||
touchRatio: 1,
|
||||
touchAngle: 45,
|
||||
grabCursor: true,
|
||||
simulateTouch: true,
|
||||
allowTouchMove: true,
|
||||
|
||||
// Navigation arrows
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
|
||||
// Pagination
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
|
||||
// Keyboard control
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
|
||||
// Accessibility
|
||||
a11y: {
|
||||
prevSlideMessage: 'Diapositive précédente',
|
||||
nextSlideMessage: 'Diapositive suivante',
|
||||
paginationBulletMessage: 'Aller à la diapositive {{index}}',
|
||||
},
|
||||
});
|
||||
}
|
||||
39
assets/js/hero-video.js
Normal file
39
assets/js/hero-video.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
export function playVideo() {
|
||||
const playButton = document.querySelector('#hero-play-video');
|
||||
|
||||
if (!playButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
playButton.addEventListener('click', function() {
|
||||
const extract = document.querySelector('.extract');
|
||||
const videoFull = document.querySelector('.video-full');
|
||||
const titleSmall = document.querySelector('.page-title-small');
|
||||
|
||||
|
||||
if (extract) {
|
||||
extract.style.display = 'none';
|
||||
}
|
||||
|
||||
if(titleSmall){
|
||||
titleSmall.style.display = 'none';
|
||||
}
|
||||
|
||||
if (videoFull) {
|
||||
videoFull.style.display = 'block';
|
||||
|
||||
const iframe = videoFull.querySelector('iframe');
|
||||
if (iframe) {
|
||||
const src = iframe.src;
|
||||
|
||||
// Ajouter les paramètres autoplay et mute pour YouTube
|
||||
if (src) {
|
||||
const separator = src.includes('?') ? '&' : '?';
|
||||
iframe.src = src + separator + 'autoplay=1&mute=1';
|
||||
iframe.setAttribute('allow', 'autoplay; encrypted-media');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
60
assets/js/panel.js
Normal file
60
assets/js/panel.js
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
export function panelToggle(responsiveSmall) {
|
||||
const toggleBtn = document.querySelector('#toggle-panel');
|
||||
const toggleBtnMobile = document.querySelector('#toggle-panel__mobile');
|
||||
const main = document.querySelector('main');
|
||||
const closeBtn = document.querySelector('.panel-left .panel__header');
|
||||
|
||||
function openPanel() {
|
||||
main.classList.add('panel-open');
|
||||
const screenWidth = window.innerWidth;
|
||||
if (screenWidth <= responsiveSmall) {
|
||||
console.log("small screen");
|
||||
document.body.style.overflowY = 'hidden';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function closePanel() {
|
||||
main.classList.remove('panel-open');
|
||||
main.classList.add('panel-close');
|
||||
document.body.style.overflowY = '';
|
||||
}
|
||||
|
||||
if (toggleBtn) {
|
||||
toggleBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
openPanel();
|
||||
});
|
||||
}
|
||||
|
||||
if (toggleBtnMobile) {
|
||||
toggleBtnMobile.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
openPanel();
|
||||
});
|
||||
}
|
||||
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', closePanel);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function tocMobile(responsiveSmall) {
|
||||
const toc = document.querySelector('#toc');
|
||||
const main = document.querySelector('main');
|
||||
|
||||
if (!toc) return;
|
||||
|
||||
const tocLinks = toc.querySelectorAll('a');
|
||||
|
||||
tocLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
if (window.innerWidth <= responsiveSmall) {
|
||||
main.classList.remove('panel-open');
|
||||
main.classList.add('panel-close');
|
||||
document.body.style.overflowY = '';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
220
assets/js/report.js
Normal file
220
assets/js/report.js
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
|
||||
import { initSwipers } from './swipers.js';
|
||||
|
||||
export function report(responsiveSmall) {
|
||||
if (document.body.dataset.template === 'report') {
|
||||
|
||||
// Initialiser tous les sliders de type before-after
|
||||
initSliderBeforeAfter();
|
||||
|
||||
// Ne fonctionne que pour les écrans plus grands que responsiveSmall
|
||||
if (window.matchMedia(responsiveSmall).matches) {
|
||||
// Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif
|
||||
initSwipers();
|
||||
return;
|
||||
}
|
||||
|
||||
// Sur desktop : initMediaDisplay va gérer les media dynamiquement
|
||||
// Les swipers seront initialisés au moment de l'insertion dans #report__medias
|
||||
initMediaDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function initSliderBeforeAfter(container = document){
|
||||
const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
|
||||
slidersBeforeAfter.forEach(function (sliderContainer, index) {
|
||||
const sliderInput = sliderContainer.querySelector('.slider');
|
||||
if (sliderInput) {
|
||||
sliderInput.addEventListener('input', (e) => {
|
||||
console.log('slider value:', e.target.value);
|
||||
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initMediaDisplay() {
|
||||
const reportMedias = document.querySelector('#report__medias');
|
||||
if (!reportMedias) return;
|
||||
|
||||
// Calculer la hauteur depuis les variables CSS: calc(var(--header-h) + var(--padding-body))
|
||||
const rootStyles = getComputedStyle(document.documentElement);
|
||||
const headerH = rootStyles.getPropertyValue('--header-h').trim();
|
||||
const paddingBody = rootStyles.getPropertyValue('--padding-body').trim();
|
||||
const spacingH = rootStyles.getPropertyValue('--spacing').trim();
|
||||
|
||||
|
||||
// Convertir en pixels si nécessaire
|
||||
const headerHPx = parseFloat(headerH);
|
||||
const paddingBodyPx = parseFloat(paddingBody);
|
||||
const spacingHPx = parseFloat(paddingBody);
|
||||
const totalOffset = headerHPx + paddingBodyPx + spacingHPx*5;
|
||||
|
||||
const sections = document.querySelectorAll('.section-content');
|
||||
const mediaElements = [];
|
||||
let mediaCounter = 0;
|
||||
|
||||
// 1. Pour chaque section, traiter les .media
|
||||
sections.forEach((section) => {
|
||||
const medias = section.querySelectorAll('.media');
|
||||
|
||||
medias.forEach((media) => {
|
||||
// Générer un ID unique si nécessaire
|
||||
if (!media.id) {
|
||||
media.id = `media-${mediaCounter++}`;
|
||||
}
|
||||
|
||||
// Créer une ancre
|
||||
const anchor = document.createElement('div');
|
||||
anchor.className = 'media-anchor';
|
||||
anchor.dataset.mediaId = media.id;
|
||||
anchor.innerHTML = '<span class="arrow-report">▶</span>'
|
||||
|
||||
// Vérifier si le media est précédé d'un titre
|
||||
let previousElement = media.previousElementSibling;
|
||||
let insertBeforeElement = media;
|
||||
|
||||
// Si l'élément précédent est un titre (h1-h6), insérer l'ancre avant le titre
|
||||
if (previousElement && /^H[1-6]$/.test(previousElement.tagName)) {
|
||||
insertBeforeElement = previousElement;
|
||||
}
|
||||
|
||||
// Insérer l'ancre
|
||||
insertBeforeElement.parentNode.insertBefore(anchor, insertBeforeElement);
|
||||
|
||||
// Stocker la référence pour l'observer
|
||||
mediaElements.push({
|
||||
anchor: anchor,
|
||||
media: media.cloneNode(true), // Cloner le media
|
||||
originalMedia: media,
|
||||
section: section
|
||||
});
|
||||
|
||||
// Masquer le media original
|
||||
media.style.display = 'none';
|
||||
});
|
||||
});
|
||||
|
||||
// 2. Fonction pour trouver et afficher le media le plus proche de la ligne de déclenchement
|
||||
let currentMediaId = null;
|
||||
let isUpdating = false; // Flag pour éviter les mises à jour simultanées
|
||||
|
||||
function updateActiveMedia() {
|
||||
// Éviter les mises à jour simultanées
|
||||
if (isUpdating) return;
|
||||
|
||||
// Trouver l'ancre qui est la plus proche de la ligne de déclenchement (totalOffset du haut)
|
||||
let closestAnchor = null;
|
||||
let closestDistance = Infinity;
|
||||
|
||||
mediaElements.forEach(({ anchor }) => {
|
||||
const rect = anchor.getBoundingClientRect();
|
||||
|
||||
// Si l'ancre est au-dessus ou à la ligne de déclenchement
|
||||
if (rect.top <= totalOffset) {
|
||||
const distance = totalOffset - rect.top;
|
||||
|
||||
// Prendre celle qui vient juste de passer (la plus proche en dessous de la ligne)
|
||||
if (distance < closestDistance) {
|
||||
closestDistance = distance;
|
||||
closestAnchor = anchor;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Si on a trouvé une ancre
|
||||
if (closestAnchor) {
|
||||
const mediaId = closestAnchor.dataset.mediaId;
|
||||
|
||||
// Si c'est déjà le media affiché, ne rien faire
|
||||
if (currentMediaId === mediaId) return;
|
||||
|
||||
// Trouver le media correspondant
|
||||
const mediaData = mediaElements.find(m => m.anchor === closestAnchor);
|
||||
|
||||
if (mediaData) {
|
||||
isUpdating = true;
|
||||
|
||||
// Utiliser requestAnimationFrame pour éviter les conflits de reflow
|
||||
requestAnimationFrame(() => {
|
||||
// Vider le conteneur
|
||||
reportMedias.innerHTML = '';
|
||||
|
||||
// Ajouter le nouveau media
|
||||
const newMediaElement = mediaData.media.cloneNode(true);
|
||||
reportMedias.appendChild(newMediaElement);
|
||||
currentMediaId = mediaId;
|
||||
|
||||
// Attendre le prochain frame pour initialiser les sliders/swipers
|
||||
requestAnimationFrame(() => {
|
||||
initSliderBeforeAfter(reportMedias);
|
||||
initSwipers(reportMedias);
|
||||
|
||||
// Débloquer les mises à jour après un court délai
|
||||
setTimeout(() => {
|
||||
isUpdating = false;
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Aucune ancre n'a encore franchi la ligne, vider le conteneur
|
||||
if (currentMediaId !== null) {
|
||||
reportMedias.innerHTML = '';
|
||||
currentMediaId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Écouter le scroll
|
||||
let scrollTimeout;
|
||||
window.addEventListener('scroll', () => {
|
||||
// Throttle pour optimiser les performances
|
||||
if (scrollTimeout) return;
|
||||
|
||||
scrollTimeout = setTimeout(() => {
|
||||
updateActiveMedia();
|
||||
scrollTimeout = null;
|
||||
}, 10);
|
||||
});
|
||||
|
||||
// Appeler une première fois au chargement
|
||||
updateActiveMedia();
|
||||
|
||||
// 4. Gérer les sections sans media immédiat
|
||||
// Observer aussi les sections elles-mêmes
|
||||
const sectionObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const section = entry.target;
|
||||
|
||||
// Vérifier si cette section a un media juste après son premier titre
|
||||
const firstTitle = section.querySelector('h1, h2, h3, h4, h5, h6');
|
||||
if (firstTitle) {
|
||||
let nextElement = firstTitle.nextElementSibling;
|
||||
|
||||
// Chercher le prochain élément qui n'est pas une ancre
|
||||
while (nextElement && nextElement.classList.contains('media-anchor')) {
|
||||
nextElement = nextElement.nextElementSibling;
|
||||
}
|
||||
|
||||
// Si le prochain élément n'est pas un .media, vider #report__medias
|
||||
if (!nextElement || !nextElement.classList.contains('media')) {
|
||||
reportMedias.innerHTML = '';
|
||||
currentMediaId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}, {
|
||||
root: null,
|
||||
rootMargin: `-${totalOffset}px 0px 0px 0px`,
|
||||
threshold: 0
|
||||
});
|
||||
|
||||
// Observer toutes les sections
|
||||
sections.forEach(section => {
|
||||
sectionObserver.observe(section);
|
||||
});
|
||||
}
|
||||
|
|
@ -1,18 +1,34 @@
|
|||
import { headerToggle, headerScrollVisibility } from './header.js';
|
||||
import { copyLink } from './share.js';
|
||||
import { bannerStickyMobile } from './banner-sticky-mobile.js';
|
||||
import { panelToggle, tocMobile } from './panel.js';
|
||||
import { btnGroupMobile } from './btn-group-mobile.js';
|
||||
import { bannerStickyDesktop } from './banner-sticky-desktop.js';
|
||||
import { themeToggle } from './themeToggle.js';
|
||||
import { initHeroSlider } from './hero-slider.js';
|
||||
import { playVideo } from './hero-video.js';
|
||||
import { initDropdowns } from './dropdown.js';
|
||||
import { initSwipers } from './swipers.js';
|
||||
import { report } from './report.js';
|
||||
|
||||
|
||||
const responsiveMedium = 1080;
|
||||
const responsiveSmall = 768;
|
||||
|
||||
window.onload = async function () {
|
||||
window.onload = async function () {
|
||||
console.log("SCRIPT LOADED");
|
||||
headerToggle();
|
||||
headerScrollVisibility();
|
||||
copyLink();
|
||||
panelToggle(responsiveSmall);
|
||||
themeToggle();
|
||||
bannerStickyMobile(responsiveSmall);
|
||||
|
||||
|
||||
report(responsiveSmall);
|
||||
|
||||
tocMobile(responsiveSmall);
|
||||
copyLink();
|
||||
btnGroupMobile(responsiveSmall)
|
||||
bannerStickyDesktop(responsiveSmall);
|
||||
initHeroSlider();
|
||||
playVideo();
|
||||
initDropdowns(responsiveSmall);
|
||||
initSwipers();
|
||||
}
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
export function copyLink() {
|
||||
let buttons = document.querySelectorAll('.copy-link button');
|
||||
buttons.forEach(function (button, index) {
|
||||
let link = button.parentNode.querySelector("input").value;
|
||||
let input = button.parentNode.querySelector("input");
|
||||
let link = input.value;
|
||||
|
||||
button.addEventListener('click', function() {
|
||||
navigator.clipboard.writeText(link).then(() => {
|
||||
const originalText = button.textContent;
|
||||
button.textContent = 'Lien copié';
|
||||
input.value = 'Lien copié !';
|
||||
input.classList.add('is-copied');
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText;
|
||||
input.value = link;
|
||||
input.classList.remove('is-copied');
|
||||
}, 1000);
|
||||
}).catch(err => {
|
||||
console.error('Erreur lors de la copie:', err);
|
||||
|
|
|
|||
54
assets/js/swipers.js
Normal file
54
assets/js/swipers.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
|
||||
|
||||
export function initSwipers(container = document) {
|
||||
const sliders = container.querySelectorAll('.swiper');
|
||||
|
||||
if (sliders.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
sliders.forEach((sliderElement) => {
|
||||
// Éviter de réinitialiser un swiper déjà initialisé
|
||||
if (sliderElement.swiper) {
|
||||
return;
|
||||
}
|
||||
|
||||
const swiper = new Swiper(sliderElement, {
|
||||
// Optional parameters
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20,
|
||||
speed: 600,
|
||||
|
||||
// Touch/Swipe settings
|
||||
touchRatio: 1,
|
||||
touchAngle: 45,
|
||||
grabCursor: true,
|
||||
simulateTouch: true,
|
||||
allowTouchMove: true,
|
||||
|
||||
// Navigation arrows
|
||||
navigation: {
|
||||
nextEl: sliderElement.querySelector('.swiper-button-next'),
|
||||
prevEl: sliderElement.querySelector('.swiper-button-prev'),
|
||||
},
|
||||
|
||||
// Pagination
|
||||
pagination: {
|
||||
el: sliderElement.querySelector('.swiper-pagination'),
|
||||
clickable: true,
|
||||
},
|
||||
|
||||
// Keyboard control
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
|
||||
// Accessibility
|
||||
a11y: {
|
||||
prevSlideMessage: 'Investigation précédente',
|
||||
nextSlideMessage: 'Investigation suivante',
|
||||
paginationBulletMessage: 'Aller à l\'investigation {{index}}',
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
title: Image de couverture
|
||||
|
||||
fields:
|
||||
alt:
|
||||
label: Texte alternatif
|
||||
type: text
|
||||
help: Description de l'image pour l'accessibilité
|
||||
caption:
|
||||
label: Légende
|
||||
type: textarea
|
||||
size: small
|
||||
help: Légende affichée sous l'image
|
||||
21
site/blueprints/pages/folder.yml
Normal file
21
site/blueprints/pages/folder.yml
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
title: Dossier
|
||||
|
||||
tabs:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
icon: page
|
||||
fields:
|
||||
description:
|
||||
label: Description
|
||||
type: textarea
|
||||
size: medium
|
||||
buttons: false
|
||||
cover:
|
||||
label: Visuel de couverture
|
||||
type: files
|
||||
multiple: false
|
||||
layout: cards
|
||||
image:
|
||||
ratio: 12/7
|
||||
cover: true
|
||||
help: Image utilisée dans la liste des dossiers
|
||||
17
site/blueprints/pages/folders.yml
Normal file
17
site/blueprints/pages/folders.yml
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
title: Dossiers
|
||||
|
||||
tabs:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
sections:
|
||||
folders:
|
||||
type: pages
|
||||
text: "{{ page.title }}"
|
||||
info: "{{ page.description }}"
|
||||
layout: cards
|
||||
size: huge
|
||||
search: true
|
||||
image:
|
||||
cover: true
|
||||
ratio: 12/7
|
||||
template: folder
|
||||
|
|
@ -1,7 +1,4 @@
|
|||
title: Investigation
|
||||
create:
|
||||
fields:
|
||||
- subtitle
|
||||
title: Investigation Summary
|
||||
|
||||
tabs:
|
||||
contentTab:
|
||||
|
|
@ -9,18 +6,22 @@ tabs:
|
|||
icon: page
|
||||
columns:
|
||||
- width: 2/6
|
||||
fields:
|
||||
publicationDate:
|
||||
label: Date de publication
|
||||
type: date
|
||||
display: DD / MM / YYYY
|
||||
default: today
|
||||
width: 1/4
|
||||
sections:
|
||||
createdSection:
|
||||
type: fields
|
||||
fields:
|
||||
created:
|
||||
label: Première publication
|
||||
type: date
|
||||
display: DD / MM / YYYY
|
||||
default: today
|
||||
width: 1/2
|
||||
reportSection:
|
||||
label: Rapport
|
||||
type: pages
|
||||
template: report
|
||||
- width: 4/6
|
||||
fields:
|
||||
subtitle:
|
||||
label: Sous-titre
|
||||
type: text
|
||||
chapo:
|
||||
label: Chapo
|
||||
type: writer
|
||||
|
|
@ -30,29 +31,59 @@ tabs:
|
|||
label: Visuel de couverture
|
||||
type: files
|
||||
multiple: false
|
||||
min: 1
|
||||
layout: cards
|
||||
size: full
|
||||
uploads:
|
||||
template: cover
|
||||
image:
|
||||
ratio: 12/7
|
||||
cover: true
|
||||
body:
|
||||
label: Corps
|
||||
type: layout
|
||||
layouts:
|
||||
- "1/1"
|
||||
- "1/2, 1/2"
|
||||
- "1/3, 1/3, 1/3"
|
||||
fieldsets:
|
||||
- heading
|
||||
- text
|
||||
- image
|
||||
help: Image utilisée dans les listes d'enquêtes
|
||||
heroType:
|
||||
label: Type de hero
|
||||
type: select
|
||||
options:
|
||||
image: Image simple
|
||||
slider: Slider d'images
|
||||
video: Vidéo
|
||||
default: image
|
||||
width: 1/3
|
||||
heroImages:
|
||||
label: Images hero
|
||||
type: files
|
||||
multiple: true
|
||||
layout: cards
|
||||
when:
|
||||
heroType: image
|
||||
heroType: slider
|
||||
videoExtractUrl:
|
||||
label: URL vidéo d'extrait (autoplay)
|
||||
type: url
|
||||
when:
|
||||
heroType: video
|
||||
width: 1/2
|
||||
videoFullUrl:
|
||||
label: URL vidéo complète (YouTube embed)
|
||||
type: url
|
||||
when:
|
||||
heroType: video
|
||||
width: 1/2
|
||||
synthesis:
|
||||
label: Synthèse
|
||||
type: textarea
|
||||
size: large
|
||||
buttons: false
|
||||
metadataTab:
|
||||
label: Métadonnées
|
||||
icon: table
|
||||
fields:
|
||||
folder:
|
||||
label: Dossier
|
||||
type: select
|
||||
options: query
|
||||
query:
|
||||
fetch: site.find('dossiers').children
|
||||
text: "{{ page.title }}"
|
||||
value: "{{ page.slug }}"
|
||||
empty: Aucun dossier
|
||||
width: 1/3
|
||||
incidentDate:
|
||||
label: Date de l'incident
|
||||
type: date
|
||||
|
|
@ -70,8 +101,12 @@ tabs:
|
|||
label: Mots-clés
|
||||
type: tags
|
||||
width: 1/2
|
||||
methodology:
|
||||
label: Méthodologie
|
||||
type: tags
|
||||
width: 1/2
|
||||
partners:
|
||||
label: Partenaire(s)
|
||||
label: Partenaires
|
||||
type: structure
|
||||
width: 1/2
|
||||
fields:
|
||||
|
|
@ -80,32 +115,13 @@ tabs:
|
|||
type: text
|
||||
link:
|
||||
label: Lien
|
||||
type: link
|
||||
options:
|
||||
- url
|
||||
methodologies:
|
||||
label: Méthodologie
|
||||
type: entries
|
||||
field:
|
||||
type: text
|
||||
line:
|
||||
type: line
|
||||
type: url
|
||||
team:
|
||||
label: Équipe
|
||||
type: structure
|
||||
columns:
|
||||
responsability:
|
||||
width: 1/2
|
||||
names:
|
||||
width: 1/2
|
||||
fields:
|
||||
responsability:
|
||||
label: Responsabilité
|
||||
type: text
|
||||
width: 1/2
|
||||
names:
|
||||
label: Nom
|
||||
type: entries
|
||||
width: 1/2
|
||||
field:
|
||||
type: text
|
||||
label: Équipe Index
|
||||
type: tags
|
||||
width: 1/2
|
||||
relatedInvestigations:
|
||||
label: Enquêtes en lien
|
||||
type: pages
|
||||
multiple: true
|
||||
query: site.find('enquetes').children
|
||||
|
|
|
|||
|
|
@ -14,3 +14,4 @@ tabs:
|
|||
image:
|
||||
cover: true
|
||||
ratio: 12/7
|
||||
template: investigation-summary
|
||||
|
|
|
|||
|
|
@ -81,24 +81,3 @@ tabs:
|
|||
type: link
|
||||
options:
|
||||
- url
|
||||
line:
|
||||
type: line
|
||||
indexTeam:
|
||||
label: Équipe Index
|
||||
type: structure
|
||||
columns:
|
||||
responsability:
|
||||
width: 1/2
|
||||
names:
|
||||
width: 1/2
|
||||
fields:
|
||||
responsability:
|
||||
label: Responsabilité
|
||||
type: text
|
||||
width: 1/2
|
||||
names:
|
||||
label: Nom
|
||||
type: entries
|
||||
width: 1/2
|
||||
field:
|
||||
type: text
|
||||
0
site/cache/index.html
vendored
Normal file
0
site/cache/index.html
vendored
Normal file
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
return [
|
||||
'debug' => true,
|
||||
'locale' => 'fr_FR.UTF-8',
|
||||
'date.handler' => 'intl',
|
||||
'thumbs' => [
|
||||
'quality' => 80,
|
||||
'presets' => [
|
||||
|
|
@ -30,53 +32,5 @@ return [
|
|||
'campaign_slug' => 'soutenir-index-en-2024',
|
||||
'campaign_url' => 'https://donorbox.org/soutenir-index-en-2024',
|
||||
'api_base_url' => 'https://donorbox.org/api/v1'
|
||||
],
|
||||
|
||||
'routes' => [
|
||||
// Route pour /enquetes/:slug/resume - Page virtuelle résumé
|
||||
[
|
||||
'pattern' => 'enquetes/(:any)/resume',
|
||||
'action' => function($slug) {
|
||||
$parent = page('enquetes/' . $slug);
|
||||
if (!$parent) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($parent->intendedTemplate()->name() !== 'investigation') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Créer une page virtuelle avec le template investigation-summary
|
||||
return Page::factory([
|
||||
'slug' => 'resume',
|
||||
'template' => 'investigation-summary',
|
||||
'parent' => $parent,
|
||||
'content' => $parent->content()->toArray()
|
||||
]);
|
||||
}
|
||||
],
|
||||
|
||||
// Route pour /enquetes/:slug/detail - Page virtuelle détail
|
||||
[
|
||||
'pattern' => 'enquetes/(:any)/detail',
|
||||
'action' => function($slug) {
|
||||
$parent = page('enquetes/' . $slug);
|
||||
if (!$parent) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($parent->intendedTemplate()->name() !== 'investigation') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Créer une page virtuelle avec le template investigation
|
||||
return Page::factory([
|
||||
'slug' => 'detail',
|
||||
'template' => 'investigation',
|
||||
'parent' => $parent,
|
||||
'content' => $parent->content()->toArray()
|
||||
]);
|
||||
}
|
||||
]
|
||||
]
|
||||
];
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Routes pour les enquêtes (investigations)
|
||||
*
|
||||
* Structure des URLs :
|
||||
* - /enquetes/:slug → redirige vers /enquetes/:slug/resume (géré par le controller)
|
||||
* - /enquetes/:slug/resume → affiche le résumé (template investigation-summary)
|
||||
* - /enquetes/:slug/detail → affiche l'enquête complète (template investigation)
|
||||
*
|
||||
* Note : La redirection de /enquetes/:slug vers /resume est gérée par le controller
|
||||
* investigation.php, pas par une route, car les routes ne peuvent pas intercepter
|
||||
* les pages existantes.
|
||||
*/
|
||||
|
||||
return [
|
||||
// Route pour /enquetes/:slug/resume - Page virtuelle résumé
|
||||
[
|
||||
'pattern' => 'enquetes/(:any)/resume',
|
||||
'action' => function($slug) {
|
||||
$parent = page('enquetes/' . $slug);
|
||||
if (!$parent) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($parent->intendedTemplate()->name() !== 'investigation') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Créer une page virtuelle avec le template investigation-summary
|
||||
return Page::factory([
|
||||
'slug' => 'resume',
|
||||
'template' => 'investigation-summary',
|
||||
'parent' => $parent,
|
||||
'content' => $parent->content()->toArray()
|
||||
]);
|
||||
}
|
||||
],
|
||||
|
||||
// Route pour /enquetes/:slug/detail - Page virtuelle détail
|
||||
[
|
||||
'pattern' => 'enquetes/(:any)/detail',
|
||||
'action' => function($slug) {
|
||||
$parent = page('enquetes/' . $slug);
|
||||
if (!$parent) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($parent->intendedTemplate()->name() !== 'investigation') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Créer une page virtuelle avec le template investigation
|
||||
return Page::factory([
|
||||
'slug' => 'detail',
|
||||
'template' => 'investigation',
|
||||
'parent' => $parent,
|
||||
'content' => $parent->content()->toArray()
|
||||
]);
|
||||
}
|
||||
]
|
||||
];
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Controller pour le template investigation
|
||||
* Redirige automatiquement vers la page /resume
|
||||
* SAUF si c'est une page virtuelle (resume/detail)
|
||||
*/
|
||||
|
||||
return function ($page) {
|
||||
// Ne rediriger que si c'est la page "réelle" (pas une page virtuelle)
|
||||
// Les pages virtuelles ont un slug 'resume' ou 'detail'
|
||||
if ($page->slug() !== 'resume' && $page->slug() !== 'detail') {
|
||||
// Redirection 301 vers la page résumé
|
||||
go($page->url() . '/resume', 301);
|
||||
}
|
||||
|
||||
// Si c'est une page virtuelle, laisser le template s'afficher normalement
|
||||
return compact('page');
|
||||
};
|
||||
1
site/snippets/back-to-top.php
Normal file
1
site/snippets/back-to-top.php
Normal file
|
|
@ -0,0 +1 @@
|
|||
<button class="btn--small btn--back-to-top"><a href="#">Revenir en haut <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<?php
|
||||
$level = $block->level()->or('h2');
|
||||
?>
|
||||
<<?= $level ?>><?= $block->text() ?></<?= $level ?>>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<?php if ($image = $block->image()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $image->url() ?>" alt="<?= $block->alt()->or($image->alt()) ?>">
|
||||
<?php if ($block->caption()->isNotEmpty()): ?>
|
||||
<figcaption><?= $block->caption() ?></figcaption>
|
||||
<?php endif; ?>
|
||||
</figure>
|
||||
<?php endif; ?>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<?= $block->text() ?>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
</main>
|
||||
<?php snippet('back-to-top') ?>
|
||||
<footer id="site-footer">
|
||||
<div class="site-footer__container">
|
||||
<div class="footer__newsletter">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="fr ">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -13,6 +13,11 @@
|
|||
<?= $site->title() ?>
|
||||
</title>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"
|
||||
/>
|
||||
|
||||
<script src="<?= url('assets/js/script.js') ?>" type="module"></script>
|
||||
</head>
|
||||
|
||||
|
|
@ -21,7 +26,7 @@
|
|||
<div class="site-header__inner">
|
||||
<h1 id="site-title">
|
||||
<a
|
||||
href="https://www.index.ngo/"
|
||||
href="<?= $site->url() ?>"
|
||||
aria-label="Retour à l’accueil"
|
||||
title="aller au site d'Index"
|
||||
>
|
||||
|
|
@ -29,13 +34,13 @@
|
|||
</a>
|
||||
</h1>
|
||||
|
||||
<!-- Note: toujours mettre .title-page (j’en ai besoin pour la mise en forme) mais le laisser vide sur la plupart des pages sauf les pages enquêtes -->
|
||||
<p class="title-page">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</p>
|
||||
<!-- Note: toujours mettre .header__title-page (j’en ai besoin pour la mise en forme) mais le laisser vide sur la plupart des pages sauf les pages enquêtes -->
|
||||
<p class="header__title-page">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</p>
|
||||
|
||||
<nav id="nav-highlight">
|
||||
<ul>
|
||||
<li><a href="#">Enquêtes</a></li>
|
||||
<li><a href="#">Impact</a></li>
|
||||
<li><a href="/enquetes">Enquêtes</a></li>
|
||||
<li><a href="/impacts">Impact</a></li>
|
||||
<li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -60,4 +65,3 @@
|
|||
</div>
|
||||
</header>
|
||||
<?php snippet('nav') ?>
|
||||
<main>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue