Compare commits
No commits in common. "main" and "merge-investigation" have entirely different histories.
main
...
merge-inve
126 changed files with 3760 additions and 7728 deletions
6
.gitignore
vendored
6
.gitignore
vendored
|
|
@ -49,12 +49,6 @@ Icon
|
||||||
|
|
||||||
/site/config/.license
|
/site/config/.license
|
||||||
|
|
||||||
# Host-specific config (credentials)
|
|
||||||
# ---------------
|
|
||||||
|
|
||||||
/site/config/config.index.ngo.php
|
|
||||||
/site/config/config.localhost.php
|
|
||||||
|
|
||||||
|
|
||||||
# Content
|
# Content
|
||||||
# ---------------
|
# ---------------
|
||||||
|
|
|
||||||
|
|
@ -1,74 +1,72 @@
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-font-smoothing: antialiased;
|
-moz-font-smoothing: antialiased;
|
||||||
-o-font-smoothing: antialiased;
|
-o-font-smoothing: antialiased;
|
||||||
|
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
}
|
}
|
||||||
button {
|
button{
|
||||||
background: none;
|
background: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: var(--color-txt);
|
color: var(--color-txt);
|
||||||
}
|
}
|
||||||
iframe {
|
iframe{
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body{
|
||||||
font-family: var(--font);
|
font-family: var(--font);
|
||||||
line-height: var(--leading-normal);
|
line-height: var(--leading-normal);
|
||||||
font-size: var(--fs-normal);
|
font-size: var(--fs-normal);
|
||||||
|
|
||||||
color: var(--color-txt);
|
color: var(--color-txt);
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img{
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-block {
|
.link-block{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
// &:hover{
|
// &:hover{
|
||||||
// background-color: rgba(255, 0, 0, 0.244);
|
// background-color: rgba(255, 0, 0, 0.244);
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-button-next,
|
.swiper-button-next, .swiper-button-prev,
|
||||||
.swiper-button-prev,
|
body, #site-header, #site-footer{
|
||||||
body,
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
#site-header,
|
|
||||||
#site-footer {
|
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin grid-content() {
|
@mixin grid-content(){
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: var(--padding-inner);
|
grid-gap: var(--padding-inner);
|
||||||
grid-template-columns: 2fr 3fr;
|
grid-template-columns: 2fr 3fr;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin hide-scroll() {
|
|
||||||
scrollbar-width: none;
|
@mixin hide-scroll(){
|
||||||
-ms-overflow-style: none;
|
scrollbar-width: none;
|
||||||
&::-webkit-scrollbar {
|
-ms-overflow-style: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin clamp($lines) {
|
@mixin clamp($lines) {
|
||||||
|
|
@ -78,60 +76,56 @@ body,
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin hover-card-line() {
|
@mixin hover-card-line(){
|
||||||
border-bottom: var(--border-light);
|
border-bottom: var(--border-light);
|
||||||
&:first-of-type {
|
&:first-of-type{
|
||||||
border-top: var(--border-light);
|
border-top: var(--border-light);
|
||||||
}
|
}
|
||||||
position: relative;
|
position: relative;
|
||||||
&::before {
|
&::before{
|
||||||
content: "";
|
content: '';
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-top: 1px solid transparent;
|
border-top: 1px solid transparent;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([data-impact-type="media"]) {
|
&:hover{
|
||||||
&:hover {
|
background-color: var(--grey-950);
|
||||||
background-color: var(--grey-950);
|
|
||||||
border-color: var(--color-txt);
|
|
||||||
&::before {
|
|
||||||
border-color: var(--color-txt);
|
border-color: var(--color-txt);
|
||||||
}
|
&::before{
|
||||||
|
border-color: var(--color-txt);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin pin() {
|
|
||||||
.pin {
|
@mixin pin(){
|
||||||
z-index: 90;
|
.pin{
|
||||||
width: 18px;
|
z-index: 90;
|
||||||
height: 18px;
|
width: 18px;
|
||||||
transform: rotate(45deg);
|
height: 18px;
|
||||||
transform-origin: center;
|
transform: rotate(45deg);
|
||||||
svg {
|
transform-origin: center;
|
||||||
width: 100%;
|
svg{
|
||||||
height: 100%;
|
width: 100%;
|
||||||
fill: var(--color-txt);
|
height: 100%;
|
||||||
|
fill: var(--color-txt);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin icon($size) {
|
|
||||||
.icon {
|
|
||||||
display: flex;
|
|
||||||
width: $size;
|
|
||||||
height: $size;
|
|
||||||
svg {
|
|
||||||
width: $size;
|
|
||||||
height: $size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.menu-open,
|
body.menu-open,
|
||||||
body.is-hidden {
|
body.is-hidden{
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
main, footer, #nav-highlight, .btn--back-to-top{
|
||||||
|
transition: opacity .3s ease-in;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,6 @@
|
||||||
|
|
||||||
--max-w-content: 700px;
|
--max-w-content: 700px;
|
||||||
--max-w-cards: 940px;
|
--max-w-cards: 940px;
|
||||||
--max-w-site: 1600px;
|
|
||||||
--z-header: 2000;
|
--z-header: 2000;
|
||||||
--panel-w: 310px;
|
--panel-w: 310px;
|
||||||
|
|
||||||
|
|
@ -30,7 +29,7 @@
|
||||||
--leading-tight: 1.05;
|
--leading-tight: 1.05;
|
||||||
--leading-normal: 1.3;
|
--leading-normal: 1.3;
|
||||||
|
|
||||||
--leading-title: 1.2;
|
--leading-title: 1.1;
|
||||||
// --leading-relaxed: 1.4;
|
// --leading-relaxed: 1.4;
|
||||||
// --leading-loose: 1.8;
|
// --leading-loose: 1.8;
|
||||||
|
|
||||||
|
|
@ -80,18 +79,15 @@
|
||||||
--h-block: 30px;
|
--h-block: 30px;
|
||||||
|
|
||||||
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
--transition-scroll: .5s ease-in-out;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media #{$small}{
|
@media #{$small}{
|
||||||
:root {
|
:root {
|
||||||
--fs-xsmall: 12px;
|
--fs-xsmall: 13px;
|
||||||
--fs-small: 14px;
|
--fs-small: 16px;
|
||||||
--fs-normal: 18px;
|
--fs-normal: 20px;
|
||||||
--fs-text: 18px;
|
--fs-text: 20px;
|
||||||
--fs-medium: 24px;
|
--fs-medium: 24px;
|
||||||
--fs-big: 34px;
|
--fs-big: 34px;
|
||||||
|
|
||||||
|
|
@ -116,8 +112,6 @@
|
||||||
--color-txt: #161616;
|
--color-txt: #161616;
|
||||||
--color-txt-light: var(--grey-400);
|
--color-txt-light: var(--grey-400);
|
||||||
|
|
||||||
--border-light: 1px solid var(--grey-800);
|
|
||||||
|
|
||||||
--color-accent: #ff00ff;
|
--color-accent: #ff00ff;
|
||||||
--color-accent-50: #ffe9ff;
|
--color-accent-50: #ffe9ff;
|
||||||
--color-accent-100: #fdd8fd;
|
--color-accent-100: #fdd8fd;
|
||||||
|
|
|
||||||
|
|
@ -1,112 +0,0 @@
|
||||||
#bottom-bar {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: calc(var(--header-h) * -0.75);
|
|
||||||
&.is-visible {
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
z-index: calc(var(--z-header) - 10);
|
|
||||||
height: calc(var(--header-h) * 0.75);
|
|
||||||
width: 100vw;
|
|
||||||
background-color: var(--color-bg);
|
|
||||||
|
|
||||||
padding-left: var(--padding-body);
|
|
||||||
padding-right: var(--padding-body);
|
|
||||||
|
|
||||||
transition: bottom var(--transition-scroll);
|
|
||||||
|
|
||||||
.progress-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 2px;
|
|
||||||
width: 100vw;
|
|
||||||
background-color: var(--grey-800);
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
height: 2px;
|
|
||||||
background-color: var(--color-txt);
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-bar__inner {
|
|
||||||
height: calc(var(--header-h) * 0.75);
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--padding-inner);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn--back-to-top {
|
|
||||||
@include icon(20px);
|
|
||||||
position: relative;
|
|
||||||
top: -3px;
|
|
||||||
width: 100px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
transform-origin: center;
|
|
||||||
svg {
|
|
||||||
fill: var(--color-txt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-group {
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
display: flex;
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
flex-grow: 1;
|
|
||||||
width: 100%;
|
|
||||||
padding-top: 5px;
|
|
||||||
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
.title-type {
|
|
||||||
text-transform: uppercase;
|
|
||||||
&::after {
|
|
||||||
content: "/";
|
|
||||||
padding-left: 1ch;
|
|
||||||
padding-right: 1ch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
min-width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
// display: flex;
|
|
||||||
// align-items: center;
|
|
||||||
// justify-content: center;
|
|
||||||
.bottom-bar__inner {
|
|
||||||
height: calc(var(--header-h) * 0.75);
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn--download,
|
|
||||||
.btn--back-to-top {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$x-small} {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.title-group {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -23,7 +23,7 @@ button:disabled{
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.support{
|
.soutenir{
|
||||||
a{
|
a{
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
&:hover{
|
&:hover{
|
||||||
|
|
@ -93,55 +93,21 @@ button:disabled{
|
||||||
svg{ fill: var(--color-bg); }
|
svg{ fill: var(--color-bg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn--bold,
|
||||||
.btn--simple{
|
.btn--bold-inline{
|
||||||
height: calc(var(--h-block)*1);
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
|
||||||
line-height: 1;
|
|
||||||
white-space: nowrap;
|
|
||||||
@include icon(20px);
|
|
||||||
.icon{
|
|
||||||
position: relative;
|
|
||||||
top: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1ch;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 2ch;
|
|
||||||
padding-top: 4px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
&.no-link{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1ch;
|
|
||||||
padding: 0 2ch;
|
|
||||||
padding-top: 4px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn--bold{
|
|
||||||
display: block;
|
display: block;
|
||||||
height: calc(var(--h-block)*1);
|
height: calc(var(--h-block)*1);
|
||||||
border: var(--border);
|
border: var(--border);
|
||||||
border-radius: var(--radius-btn);
|
border-radius: var(--radius-btn);
|
||||||
font-size: var(--fs-small);
|
font-size: var(--fs-xsmall);
|
||||||
// font-weight: 500;
|
font-weight: 500;
|
||||||
// text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@include icon(12px);
|
|
||||||
svg{
|
svg{
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
}
|
}
|
||||||
|
|
@ -152,7 +118,7 @@ button:disabled{
|
||||||
gap: 1ch;
|
gap: 1ch;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 1.25ch;
|
padding: 0 2ch;
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
}
|
}
|
||||||
&.no-link{
|
&.no-link{
|
||||||
|
|
@ -160,14 +126,12 @@ button:disabled{
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 1ch;
|
gap: 1ch;
|
||||||
padding: 0 1.25ch;
|
padding: 0 2ch;
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -187,98 +151,9 @@ button:disabled{
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn--see-more{
|
.btn--bold-inline{
|
||||||
|
|
||||||
margin-top: calc(var(--spacing)*1);
|
|
||||||
margin-inline: auto;
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
height: calc(var(--h-block)*1);
|
|
||||||
border: 1px solid var(--color-txt-light);
|
|
||||||
border-radius: var(--radius-btn);
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
|
|
||||||
line-height: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
|
svg{ fill: var(--color-txt); }
|
||||||
|
|
||||||
@include icon(12px);
|
|
||||||
.icon{
|
|
||||||
position: relative;
|
|
||||||
top: -2px;
|
|
||||||
|
|
||||||
}
|
|
||||||
svg{
|
|
||||||
fill: var(--color-txt-light);
|
|
||||||
}
|
|
||||||
a{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1ch;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 1.25ch;
|
|
||||||
padding-top: 4px;
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
&: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--home{
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
height: calc(var(--h-block)*1);
|
|
||||||
border: var(--border);
|
|
||||||
border-radius: var(--radius-btn);
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
|
|
||||||
line-height: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
background-color: var(--color-bg);
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
|
|
||||||
@include icon(12px);
|
|
||||||
.icon{
|
|
||||||
position: relative;
|
|
||||||
top: -2px;
|
|
||||||
}
|
|
||||||
a{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1ch;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 1.25ch;
|
|
||||||
padding-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
background-color: var(--grey-950);
|
background-color: var(--grey-950);
|
||||||
color: var(--grey-100);
|
color: var(--grey-100);
|
||||||
|
|
@ -318,16 +193,16 @@ fill: var(--color-txt-light);
|
||||||
}
|
}
|
||||||
@media #{$small}{
|
@media #{$small}{
|
||||||
svg{
|
svg{
|
||||||
width: 12px;
|
width: 11px;
|
||||||
height: 12px;
|
height: 11px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media #{$x-small}{
|
@media #{$x-small}{
|
||||||
right: calc(var(--padding-inner)*0.5);
|
right: calc(var(--padding-inner)*0.5);
|
||||||
bottom: calc(var(--padding-inner)*0.25);
|
bottom: calc(var(--padding-inner)*0.25);
|
||||||
svg{
|
svg{
|
||||||
width: 12px;
|
width: 11px;
|
||||||
height: 12px;
|
height: 11px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -353,88 +228,41 @@ fill: var(--color-txt-light);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#btn--back-to-top{
|
.btn--back-to-top{
|
||||||
|
display: flex;
|
||||||
|
border-color: var(--color-txt);
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin-bottom: var(--spacing);
|
margin: var(--spacing) auto;
|
||||||
margin-left: auto;
|
font-size: var(--fs-xsmall);
|
||||||
margin-right: var(--padding-body);
|
@media #{$small}{
|
||||||
|
margin-bottom: calc(var(--spacing)*2);
|
||||||
|
|
||||||
|
|
||||||
a{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1ch;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text{
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
padding-top: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon{
|
.icon{
|
||||||
flex-shrink: 0;
|
width: 12px;
|
||||||
--size: 26px;
|
height: 12px;
|
||||||
border: 1px solid var(--color-txt);
|
|
||||||
background-color: var(--color-bg);
|
|
||||||
border-radius: 50%;
|
|
||||||
width: var(--size);
|
|
||||||
height: var(--size);
|
|
||||||
|
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
|
transform-origin: center;
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
top: -1px;
|
||||||
justify-content: center;
|
|
||||||
svg{
|
svg{
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
fill: var(--color-txt);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
opacity: 0.8;
|
background-color: var(--grey-950);
|
||||||
}
|
color: var(--grey-100);
|
||||||
|
border-color: var(--grey-100);
|
||||||
|
a{
|
||||||
@media #{$x-small}{
|
background-color: var(--grey-950);
|
||||||
opacity: 0;
|
color: var(--grey-100);
|
||||||
transition: opacity .5s ease;
|
|
||||||
position: fixed;
|
|
||||||
bottom: calc(var(--padding-body)*1.5);
|
|
||||||
right: var(--padding-body);
|
|
||||||
z-index: var(--z-header);
|
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
.icon{
|
|
||||||
--size: 32px;
|
|
||||||
border-width: 2px;
|
|
||||||
svg{
|
|
||||||
width: 19px;
|
|
||||||
height: 19px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.text{
|
svg{ fill: var(--grey-100); }
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&.is-visible{
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn--support{
|
|
||||||
color: var(--color-accent);
|
|
||||||
&:hover{
|
|
||||||
color: var(--color-accent);
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 2px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,33 @@
|
||||||
border-top: var(--border-light);
|
border-top: var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// &.has-link {
|
||||||
|
// @include hover-card-line();
|
||||||
|
// }
|
||||||
|
|
||||||
@include figure-16-9();
|
@include figure-16-9();
|
||||||
|
|
||||||
|
figure {
|
||||||
|
@media #{$x-small} {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.type {
|
.type {
|
||||||
|
|
||||||
|
display: inline-flex;
|
||||||
|
flex-grow: 0;
|
||||||
|
height: calc(var(--h-block)*0.75);
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
border: var(--border-medium);
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 1ch 0 1ch;
|
||||||
|
|
||||||
|
|
||||||
|
font-size: var(--fs-xsmall);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-txt-light);
|
||||||
margin-bottom: calc(var(--spacing)*0.75);
|
margin-bottom: calc(var(--spacing)*0.75);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -73,8 +92,9 @@
|
||||||
.description {
|
.description {
|
||||||
font-size: var(--fs-small);
|
font-size: var(--fs-small);
|
||||||
@include clamp(2);
|
@include clamp(2);
|
||||||
// margin-top: calc(var(--spacing)*-0.5);
|
// margin-bottom: calc(var(--spacing)*0.75);
|
||||||
// display: none;
|
margin-top: calc(var(--spacing)*0.25);
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -82,7 +102,9 @@
|
||||||
@include btn--go-to();
|
@include btn--go-to();
|
||||||
@include hover-card-line();
|
@include hover-card-line();
|
||||||
|
|
||||||
|
.keywords {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media #{$medium} {
|
@media #{$medium} {
|
||||||
.title {
|
.title {
|
||||||
|
|
@ -91,70 +113,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media #{$small} {
|
@media #{$x-small} {
|
||||||
row-gap: 0;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
.content{
|
.content {
|
||||||
padding: calc(var(--spacing)*0.5) var(--padding-inner);
|
display: contents;
|
||||||
}
|
}
|
||||||
|
|
||||||
.type{
|
.title {
|
||||||
margin-bottom: calc(var(--spacing)*0.75);
|
font-size: var(--fs-small);
|
||||||
|
padding-top: calc(var(--spacing)*0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title{
|
figure {
|
||||||
margin-bottom: calc(var(--spacing)*0.25);
|
grid-row: 1/3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.details,
|
|
||||||
.date{
|
|
||||||
margin-top: calc(var(--spacing)*0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn--go-to{
|
|
||||||
bottom: calc(var(--padding-inner) * 0.75);
|
|
||||||
|
|
||||||
right: calc(var(--padding-inner)*0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// .content {
|
|
||||||
// align-self: auto;
|
|
||||||
// height: 100%;
|
|
||||||
|
|
||||||
// padding: 0;
|
|
||||||
// padding-bottom: calc(var(--padding-inner)*0.5);
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
|
|
||||||
// align-content: center;
|
|
||||||
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .type{
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .title {
|
|
||||||
// font-size: var(--fs-xsmall);
|
|
||||||
// padding-top: calc(var(--spacing)*0.5);
|
|
||||||
// padding-right: 2ch;
|
|
||||||
// text-wrap: wrap;
|
|
||||||
// flex-grow: 1;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .date{
|
|
||||||
// font-size: var(--fs-xsmall);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// figure {
|
|
||||||
// grid-row: 1
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
|
.description {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,29 +6,20 @@
|
||||||
|
|
||||||
padding: var(--padding-inner);
|
padding: var(--padding-inner);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@include figure-16-9();
|
@include figure-16-9();
|
||||||
@include pin();
|
@include pin();
|
||||||
|
|
||||||
& > figure,
|
& > figure{
|
||||||
.video-extract{
|
|
||||||
width: calc(100% + var(--padding-inner)*2);
|
width: calc(100% + var(--padding-inner)*2);
|
||||||
position: relative;
|
position: relative;
|
||||||
left: calc(var(--padding-inner)*-1);
|
left: calc(var(--padding-inner)*-1);
|
||||||
top: calc(var(--padding-inner)*-1);
|
top: calc(var(--padding-inner)*-1);
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-extract video{
|
|
||||||
width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 16/9;
|
|
||||||
object-fit: cover;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content{
|
.content{
|
||||||
|
// padding: var(--padding-inner);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
@ -50,13 +41,13 @@
|
||||||
line-height: var(--leading-title);
|
line-height: var(--leading-title);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
// text-wrap: balance;
|
text-wrap: balance;
|
||||||
|
|
||||||
a{ text-decoration: none;}
|
a{ text-decoration: none;}
|
||||||
}
|
}
|
||||||
|
|
||||||
.description{
|
.description{
|
||||||
margin-top: calc(var(--spacing)*1.25);
|
margin-top: calc(var(--spacing)*0.5);
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 3;
|
-webkit-line-clamp: 3;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
|
|
@ -65,18 +56,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dl{
|
.dl{
|
||||||
margin-top: calc(var(--spacing)*0.75);
|
margin-top: calc(var(--spacing)*0.5);
|
||||||
// font-size: var(--fs-small);
|
// font-size: var(--fs-small);
|
||||||
|
border-bottom: var(--border-light);
|
||||||
font-size: var(--fs-small);
|
font-size: var(--fs-small);
|
||||||
flex-grow: 2;
|
|
||||||
.dl__group{
|
.dl__group{
|
||||||
@include grid-content();
|
@include grid-content();
|
||||||
border-top: var(--border-light);
|
border-top: var(--border-light);
|
||||||
padding: calc(var(--spacing)*0.5) 0;
|
padding: calc(var(--spacing)*0.5) 0;
|
||||||
&:last-of-type{
|
|
||||||
border-bottom: var(--border-light);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
dt{
|
dt{
|
||||||
|
|
@ -99,78 +86,12 @@
|
||||||
background-color: var(--grey-950);
|
background-color: var(--grey-950);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.link-block{
|
||||||
|
z-index: 2000;
|
||||||
.keywords-wrapper{
|
|
||||||
padding-top: calc(var(--spacing)*0.75);
|
|
||||||
z-index: 100;
|
|
||||||
.keywords li a{
|
|
||||||
font-size: var(--fs-xsmall);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
[data-template="home"] .pinned-home{
|
|
||||||
grid-column: span 2;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
padding: calc(var(--padding-inner)*2);
|
|
||||||
|
|
||||||
|
|
||||||
figure,
|
|
||||||
picture,
|
|
||||||
.video-extract{
|
|
||||||
grid-column: span 2;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
width: calc(100% + var(--padding-inner)*4);
|
|
||||||
position: relative;
|
|
||||||
left: calc(var(--padding-inner)*-2);
|
|
||||||
top: calc(var(--padding-inner)*-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.title{
|
|
||||||
grid-column: span 2;
|
|
||||||
font-size: var(--fs-text);
|
|
||||||
padding-right: 3ch;
|
|
||||||
margin-bottom: calc(var(--spacing)*1);
|
|
||||||
margin-top: calc(var(--spacing)*0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.description{
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 3;
|
|
||||||
padding-right: 3ch;
|
|
||||||
display: block;
|
|
||||||
-webkit-line-clamp: unset;
|
|
||||||
-webkit-box-orient: unset;
|
|
||||||
overflow: visible;
|
|
||||||
font-size: var(--fs-normal);
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
dl{
|
|
||||||
margin-top: 0px;
|
|
||||||
grid-column: 2;
|
|
||||||
grid-row: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keywords-wrapper{
|
|
||||||
grid-column: span 2;
|
|
||||||
grid-row: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,141 +0,0 @@
|
||||||
.card--block-small {
|
|
||||||
border-bottom: var(--border-light);
|
|
||||||
padding: var(--padding-inner) 0;
|
|
||||||
padding-bottom: calc(var(--spacing) * 0.75);
|
|
||||||
|
|
||||||
&:first-of-type {
|
|
||||||
border-top: var(--border-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include grid-content();
|
|
||||||
@include hover-card-line();
|
|
||||||
|
|
||||||
.group-top {
|
|
||||||
position: relative;
|
|
||||||
// top: -5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include btn--go-to();
|
|
||||||
|
|
||||||
.btn--go-to {
|
|
||||||
top: calc(var(--padding-inner) * 1);
|
|
||||||
bottom: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
grid-column: 2;
|
|
||||||
grid-row: 2;
|
|
||||||
font-size: var(--fs-normal);
|
|
||||||
line-height: var(--leading-title);
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-right: 4ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date {
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
grid-column: 2;
|
|
||||||
grid-row: 1;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
display: block;
|
|
||||||
padding-bottom: calc(var(--spacing) * 0.5);
|
|
||||||
|
|
||||||
.btn--go-to {
|
|
||||||
top: auto;
|
|
||||||
bottom: calc(var(--padding-inner) * 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-top {
|
|
||||||
top: 0px;
|
|
||||||
margin-bottom: calc(var(--spacing) * 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-bottom: calc(var(--spacing) * 0.75);
|
|
||||||
margin-right: 1ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date {
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card--block-small {
|
|
||||||
.card--open-graph {
|
|
||||||
grid-column: 2;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card--open-graph:not(:last-child) {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-graph__details {
|
|
||||||
grid-column: 2;
|
|
||||||
|
|
||||||
summary,
|
|
||||||
.summary-inner {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
gap: 0.5ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow-details {
|
|
||||||
line-height: 0;
|
|
||||||
--size: 11px;
|
|
||||||
height: var(--size);
|
|
||||||
width: var(--size);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
top: -2px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
transition: transform 0.2s ease-in;
|
|
||||||
width: 100%;
|
|
||||||
fill: var(--color-txt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
summary:hover {
|
|
||||||
color: var(--color-txt);
|
|
||||||
|
|
||||||
.arrow-details svg {
|
|
||||||
fill: var(--color-txt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[open] {
|
|
||||||
.arrow-details svg {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
104
assets/css/components/_card-impact-small.scss
Normal file
104
assets/css/components/_card-impact-small.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
grid-column: 2;
|
||||||
|
font-size: var(--fs-normal);
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-right: 4ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date{
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--open-graph {
|
||||||
|
grid-column: 2;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keywords {
|
||||||
|
grid-column: 2;
|
||||||
|
z-index: 10;
|
||||||
|
@media #{$x-small} { display: none; }
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([data-impact-type="media"]) .content,
|
||||||
|
.keywords {
|
||||||
|
@media #{$x-small} {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.category {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
.card--block {
|
.card--impact {
|
||||||
|
|
||||||
container-type: inline-size;
|
container-type: inline-size;
|
||||||
container-name: impact;
|
container-name: impact;
|
||||||
|
|
@ -14,61 +14,35 @@
|
||||||
|
|
||||||
|
|
||||||
@include hover-card-line();
|
@include hover-card-line();
|
||||||
@include figure-16-9();
|
@include figure-3-1();
|
||||||
@include pin();
|
@include pin();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.group-top{
|
|
||||||
display: flex;
|
|
||||||
gap: calc(var(--padding-inner)*0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.title{
|
.title{
|
||||||
font-size: var(--fs-normal);
|
font-size: var(--fs-normal);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
line-height: var(--leading-title);
|
line-height: var(--leading-title);
|
||||||
padding-top: calc(var(--spacing)*0.75);
|
padding-top: calc(var(--spacing)*0.5);
|
||||||
padding-bottom: calc(var(--spacing)*1);
|
|
||||||
margin-right: 2ch;
|
margin-right: 2ch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date{
|
.date{
|
||||||
font-size: var(--fs-small);
|
font-size: var(--fs-small);
|
||||||
|
margin-top: calc(var(--spacing)*1.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.investigations{
|
.investigations{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
// border-top: var(--border-light);
|
|
||||||
padding-top: calc(var(--spacing)*0.5);
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
z-index: 100;
|
|
||||||
li{
|
li{
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
font-size: var(--fs-small);
|
font-size: var(--fs-small);
|
||||||
|
color: var(--color-txt-light);
|
||||||
a{
|
a{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--color-txt-light);
|
|
||||||
}
|
}
|
||||||
a::before{
|
a::before{
|
||||||
content: "↪ "
|
content: "↪ "
|
||||||
}
|
}
|
||||||
&:hover{
|
|
||||||
a{
|
|
||||||
text-decoration: underline 1px;
|
|
||||||
text-underline-offset: 2px;
|
|
||||||
color: var(--color-txt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -95,10 +69,6 @@
|
||||||
top: 3px;
|
top: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .link-block{
|
|
||||||
// background-color: rgba(255, 0, 0, 0.781);
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -106,7 +76,7 @@
|
||||||
|
|
||||||
|
|
||||||
@media #{$small-up}{
|
@media #{$small-up}{
|
||||||
.card--block,
|
.card--impact,
|
||||||
.grid-sizer{
|
.grid-sizer{
|
||||||
width: calc(50% - 13px);
|
width: calc(50% - 13px);
|
||||||
}
|
}
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
|
|
||||||
container-type: inline-size;
|
container-type: inline-size;
|
||||||
container-name: opengraph;
|
container-name: opengraph;
|
||||||
z-index: calc(var(--z-header) - 100);
|
|
||||||
|
|
||||||
.open-graph__inner{
|
.open-graph__inner{
|
||||||
@include grid-content();
|
@include grid-content();
|
||||||
|
|
|
||||||
94
assets/css/components/_card-package.scss
Normal file
94
assets/css/components/_card-package.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
// .card--package {
|
||||||
|
// position: relative;
|
||||||
|
// max-width: var(--max-w-cards);
|
||||||
|
// border: var(--border-light);
|
||||||
|
|
||||||
|
// @include grid-content();
|
||||||
|
// @include figure-16-9();
|
||||||
|
|
||||||
|
// container-type: inline-size;
|
||||||
|
// container-name: cardpackage;
|
||||||
|
|
||||||
|
// figure {
|
||||||
|
// border-radius: var(--radius-small);
|
||||||
|
// background-color: var(--color-accent);
|
||||||
|
|
||||||
|
// img {
|
||||||
|
// opacity: 0.8;
|
||||||
|
// filter: grayscale(1);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .content {
|
||||||
|
// display: flex;
|
||||||
|
// flex-direction: column;
|
||||||
|
// font-size: var(--fs-small);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .title {
|
||||||
|
// font-weight: 500;
|
||||||
|
// font-size: var(--fs-normal);
|
||||||
|
// line-height: var(--leading-title);
|
||||||
|
|
||||||
|
// margin-bottom: 0.75em;
|
||||||
|
// 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;
|
||||||
|
// position: relative;
|
||||||
|
// top: 1px;
|
||||||
|
// svg {
|
||||||
|
// height: 15px;
|
||||||
|
// width: 15px;
|
||||||
|
// fill: var(--color-txt);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .short {
|
||||||
|
// @include clamp(3);
|
||||||
|
// flex-grow: 1;
|
||||||
|
// padding-right: calc(var(--padding-inner) * 2);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
@ -1,102 +0,0 @@
|
||||||
.type {
|
|
||||||
height: calc(var(--h-block) * 0.75);
|
|
||||||
// border-radius: calc(var(--h-block)*0.75/2);
|
|
||||||
border-radius: var(--radius-small);
|
|
||||||
width: max-content;
|
|
||||||
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 1ch;
|
|
||||||
padding-top: 3px;
|
|
||||||
|
|
||||||
font-size: var(--fs-xsmall);
|
|
||||||
line-height: 1;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
background-color: var(--color-txt);
|
|
||||||
color: var(--color-bg);
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category {
|
|
||||||
height: calc(var(--h-block) * 0.75);
|
|
||||||
border-radius: var(--radius-small);
|
|
||||||
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 1ch;
|
|
||||||
padding-top: 3px;
|
|
||||||
|
|
||||||
font-size: var(--fs-xsmall);
|
|
||||||
line-height: 1;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
border: var(--border-medium);
|
|
||||||
background-color: var(--color-bg);
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page__category {
|
|
||||||
height: calc(var(--h-block) * 1);
|
|
||||||
border-radius: var(--radius-small);
|
|
||||||
border: var(--border-medium);
|
|
||||||
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 1.5ch;
|
|
||||||
padding-top: 5px;
|
|
||||||
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
|
|
||||||
background-color: var(--color-bg);
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
height: calc(var(--h-block) * 0.75);
|
|
||||||
font-size: var(--fs-xsmall);
|
|
||||||
padding: 0 1ch;
|
|
||||||
padding-top: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page__type {
|
|
||||||
height: calc(var(--h-block) * 1);
|
|
||||||
border-radius: var(--radius-small);
|
|
||||||
margin-left: calc(var(--padding-inner) * 0.25);
|
|
||||||
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 1.5ch;
|
|
||||||
padding-top: 5px;
|
|
||||||
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
|
|
||||||
background-color: var(--color-txt);
|
|
||||||
color: var(--color-bg);
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
height: calc(var(--h-block) * 0.75);
|
|
||||||
font-size: var(--fs-xsmall);
|
|
||||||
padding: 0 1ch;
|
|
||||||
padding-top: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
46
assets/css/components/_details-summary.scss
Normal file
46
assets/css/components/_details-summary.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@mixin details-summary(){
|
||||||
|
|
||||||
|
|
||||||
|
summary,
|
||||||
|
.summary-inner{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
gap: 0.5ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-details{
|
||||||
|
line-height: 0;
|
||||||
|
--size: 11px;
|
||||||
|
height: var(--size);
|
||||||
|
width: var(--size);
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
top: -2px;
|
||||||
|
|
||||||
|
svg{
|
||||||
|
transition: transform 0.2s ease-in;
|
||||||
|
width: 100%;
|
||||||
|
fill: var(--color-txt);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
summary:hover{
|
||||||
|
color: var(--color-txt);
|
||||||
|
.arrow-details svg{
|
||||||
|
fill: var(--color-txt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[open]{
|
||||||
|
.arrow-details svg{
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
|
|
||||||
.dl-table {
|
|
||||||
margin-top: calc(var(--spacing) * 1.5);
|
|
||||||
border-bottom: var(--border-light);
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
max-width: var(--max-w-cards);
|
|
||||||
margin-inline: auto;
|
|
||||||
font-size: var(--fs-normal);
|
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl__group {
|
|
||||||
@include grid-content();
|
|
||||||
column-gap: 1ch;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover{
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
min-width: 180px;
|
||||||
margin-top: var(--padding-inner);
|
margin-top: var(--padding-inner);
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
border: var(--border);
|
border: var(--border);
|
||||||
|
|
@ -19,9 +19,9 @@
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||||||
z-index: calc(var(--z-header) - 100);
|
z-index: 100;
|
||||||
|
|
||||||
&::before {
|
&::before{
|
||||||
content: "◀";
|
content: "◀";
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -29,16 +29,13 @@
|
||||||
top: -13px;
|
top: -13px;
|
||||||
left: 16px;
|
left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: var(--padding-inner);
|
padding: var(--padding-inner);
|
||||||
min-width: 180px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
a, button {
|
||||||
button {
|
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.75em 1ch;
|
padding: 0.75em 1ch;
|
||||||
|
|
@ -61,15 +58,14 @@
|
||||||
&--align-right .dropdown__content {
|
&--align-right .dropdown__content {
|
||||||
left: auto;
|
left: auto;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
&::before{
|
||||||
&::before {
|
|
||||||
left: auto;
|
left: auto;
|
||||||
right: 16px;
|
right: 16px;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-open {
|
&.is-open {
|
||||||
.dropdown__content {
|
.dropdown__content {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
|
@ -77,129 +73,98 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--position-mobile .dropdown__content {
|
// PANEL
|
||||||
background-color: red;
|
&--position-mobile .dropdown__content {
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
top: auto;
|
||||||
bottom: 4px;
|
bottom: calc(var(--h-block) + var(--padding-inner)*2);
|
||||||
left: -11px;
|
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-panel.is-open {
|
&--position-mobile.is-open {
|
||||||
.dropdown__content {
|
.dropdown__content {
|
||||||
transform: translateX(0);
|
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} {
|
@media #{$x-small}{
|
||||||
|
|
||||||
.dropdown__content {
|
.dropdown__content{
|
||||||
width: calc(100vw - var(--padding-body)*2);
|
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;
|
left: auto;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
&::before{
|
||||||
|
left: auto;
|
||||||
|
right: 16px;
|
||||||
|
|
||||||
.modal--share {
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#bottom-bar {
|
|
||||||
|
|
||||||
|
|
||||||
.dropdown .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%;
|
|
||||||
@media #{$x-small} {
|
|
||||||
left: 20%;
|
|
||||||
right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.dropdown.is-open {
|
|
||||||
.dropdown__content {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,64 @@
|
||||||
@mixin figure-16-9 {
|
|
||||||
& > figure {
|
@mixin figure-16-9{
|
||||||
aspect-ratio: 16/9;
|
& > picture,
|
||||||
display: flex;
|
& > figure{
|
||||||
overflow: hidden;
|
aspect-ratio: 16/9;
|
||||||
img,
|
display: flex;
|
||||||
picture {
|
overflow: hidden;
|
||||||
width: 100%;
|
img{
|
||||||
height: 100%;
|
width: 100%;
|
||||||
object-fit: cover;
|
height: 100%;
|
||||||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
object-fit: cover;
|
||||||
|
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
figcaption,
|
|
||||||
.caption {
|
|
||||||
font-size: var(--fs-small) !important;
|
@mixin figure-3-1(){
|
||||||
color: var(--color-txt-light);
|
& > picture,
|
||||||
font-weight: 500;
|
& > figure{
|
||||||
line-height: 1.1;
|
aspect-ratio: 3/1;
|
||||||
margin: calc(var(--spacing) * 0.5) 0 !important;
|
overflow: hidden;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// @mixin figure-2-1(){
|
||||||
|
// & > picture,
|
||||||
|
// & > figure{
|
||||||
|
// aspect-ratio: 2/1;
|
||||||
|
// overflow: hidden;
|
||||||
|
// img{
|
||||||
|
// width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
// object-fit: cover;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// @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); }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
#investigation__hero {
|
|
||||||
width: 100%;
|
|
||||||
max-width: var(--max-w-cards);
|
|
||||||
margin-inline: auto;
|
|
||||||
|
|
||||||
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;
|
|
||||||
text-align: center;
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
margin-inline: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
aspect-ratio: 2/1;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1;
|
|
||||||
padding-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
fill: black;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
#lightbox {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: calc(var(--z-header) + 10);
|
|
||||||
background-color: rgba(0, 0, 0, 0.92);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
||||||
|
|
||||||
body.lightbox-open & {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#lightbox-close {
|
|
||||||
position: absolute;
|
|
||||||
top: var(--padding-body);
|
|
||||||
right: var(--padding-body);
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-txt);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 8px;
|
|
||||||
z-index: 1;
|
|
||||||
line-height: 0;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 30px;
|
|
||||||
fill: var(--color-txt);
|
|
||||||
transition: fill 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover svg {
|
|
||||||
fill: var(--grey-400);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#lightbox-swiper {
|
|
||||||
width: 90vw;
|
|
||||||
|
|
||||||
.swiper-slide {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
figure {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
cursor: default;
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 90vw;
|
|
||||||
max-height: calc(90dvh - 100px);
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
figcaption {
|
|
||||||
margin-top: calc(var(--spacing) * 0.5);
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cursor zoom-in sur les figures éligibles — desktop uniquement
|
|
||||||
@media (min-width: 1080px) {
|
|
||||||
figure[data-lightbox] {
|
|
||||||
cursor: zoom-in;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -3,82 +3,65 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
max-width: 350px;
|
max-width: 400px;
|
||||||
a{
|
a{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
li{
|
|
||||||
--size-icon: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li[data-socials="youtube"]{
|
|
||||||
--size-icon: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.icon{
|
.icon{
|
||||||
width: var(--size-icon);
|
width: 20px;
|
||||||
height: var(--size-icon);
|
height: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
}
|
}
|
||||||
svg{
|
svg{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: var(--size-icon);
|
width: 20px;
|
||||||
height: var(--size-icon);
|
height: 20px;
|
||||||
fill: var(--color-txt);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text{ display: none; }
|
||||||
|
|
||||||
a:hover{
|
|
||||||
svg{
|
|
||||||
fill: var(--color-txt-light);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// with text
|
// with text
|
||||||
// @media #{$small-up}{
|
@media #{$small-up}{
|
||||||
// .footer__socials .list-socials{
|
.footer__socials .list-socials{
|
||||||
|
|
||||||
// display: block;
|
display: block;
|
||||||
|
|
||||||
// li{
|
li{
|
||||||
// margin-bottom: calc(var(--spacing)*0.25);
|
margin-bottom: calc(var(--spacing)*0.25);
|
||||||
// break-inside: avoid;
|
break-inside: avoid;
|
||||||
// font-size: var(--fs-small);
|
font-size: var(--fs-small);
|
||||||
|
|
||||||
// }
|
}
|
||||||
|
|
||||||
// a{
|
a{
|
||||||
// gap: 1ch;
|
gap: 1ch;
|
||||||
|
|
||||||
// height: calc(var(--spacing)*1);
|
height: calc(var(--spacing)*1);
|
||||||
// &::after{
|
&::after{
|
||||||
// content: '↗';
|
content: '↗';
|
||||||
// color: var(--grey-300);
|
color: var(--grey-300);
|
||||||
// }
|
}
|
||||||
|
|
||||||
// &:hover{
|
&:hover{
|
||||||
// color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
// &::after{
|
&::after{
|
||||||
// color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
// opacity: 0.5;
|
opacity: 0.5;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// .text{
|
.text{
|
||||||
// display: block;
|
display: block;
|
||||||
// line-height: 1;
|
line-height: 1;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: var(--fs-small);
|
font-size: var(--fs-xsmall);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
padding: var(--padding-inner);
|
padding: var(--padding-inner);
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
li{
|
li{
|
||||||
font-size: var(--fs-small);
|
font-size: var(--fs-xsmall);
|
||||||
border-bottom: var(--border-light);
|
border-bottom: var(--border-light);
|
||||||
&:first-of-type{
|
&:first-of-type{
|
||||||
border-top: var(--border-light);
|
border-top: var(--border-light);
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 2ch;
|
gap: 2ch;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: var(--fs-small);
|
font-size: var(--fs-xsmall);
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
|
|
||||||
|
|
@ -1,112 +0,0 @@
|
||||||
.form__newsletter {
|
|
||||||
margin-top: calc(var(--spacing)*2);
|
|
||||||
--size: 24px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
margin-inline: auto;
|
|
||||||
}
|
|
||||||
.form__newsletter input[type=email] {
|
|
||||||
height: calc(var(--h-block) * 1.5);
|
|
||||||
width: 100%;
|
|
||||||
border-radius: calc(var(--h-block) * 0.75);
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
padding: 0 2ch;
|
|
||||||
font-family: var(--font);
|
|
||||||
font-size: var(--fs-normal);
|
|
||||||
z-index: 40;
|
|
||||||
padding-top: 4px;
|
|
||||||
border: 1px solid var(--color-txt);
|
|
||||||
background-color: white;
|
|
||||||
|
|
||||||
font-family: var(--font);
|
|
||||||
font-size: var(--fs-normal);
|
|
||||||
font-weight: 500;
|
|
||||||
color: black;
|
|
||||||
|
|
||||||
&::-moz-placeholder,
|
|
||||||
&::placeholder {
|
|
||||||
font-family: var(--font);
|
|
||||||
font-size: var(--fs-normal);
|
|
||||||
font-weight: 500;
|
|
||||||
color: black!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.form__newsletter input[type=email]:focus {
|
|
||||||
outline: 3px solid var(--grey-400);
|
|
||||||
}
|
|
||||||
.form__newsletter button[type=submit] {
|
|
||||||
position: absolute;
|
|
||||||
right: 2px;
|
|
||||||
z-index: 100;
|
|
||||||
--size: calc(var(--h-block)*1.5 - 4px);
|
|
||||||
font-family: var(--font);
|
|
||||||
font-size: var(--fs-button-bold);
|
|
||||||
height: var(--size);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75ch;
|
|
||||||
color: var(--color-accent);
|
|
||||||
font-weight: var(--fw-medium);
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.form__newsletter button[type=submit] .icon,
|
|
||||||
.form__newsletter button[type=submit] .txt {
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.form__newsletter button[type=submit] .icon {
|
|
||||||
width: var(--size);
|
|
||||||
height: var(--size);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: var(--color-bg);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.form__newsletter button[type=submit] .icon svg {
|
|
||||||
fill: var(--color-bg);
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
.form__newsletter button[type=submit] .txt {
|
|
||||||
position: relative;
|
|
||||||
top: 2px;
|
|
||||||
font-size: var(--fs-normal);
|
|
||||||
display: none;
|
|
||||||
padding-left: 1ch;
|
|
||||||
}
|
|
||||||
.form__newsletter button[type=submit]::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
background-color: var(--color-accent);
|
|
||||||
border-radius: calc(var(--size) / 2);
|
|
||||||
width: var(--size);
|
|
||||||
height: var(--size);
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
z-index: 0;
|
|
||||||
transition: width 0.2s;
|
|
||||||
}
|
|
||||||
.form__newsletter button[type=submit]:hover .txt {
|
|
||||||
color: var(--color-bg);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.form__newsletter button[type=submit]:hover::after {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
[data-template="newsletter"]{
|
|
||||||
|
|
||||||
.details p{
|
|
||||||
font-size: var(--fs-xsmall);
|
|
||||||
margin-top: calc(var(--spacing)*1);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,80 +1,86 @@
|
||||||
.slider-before-after {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
max-width: 700px;
|
.slider-before-after{
|
||||||
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%;
|
width: 100%;
|
||||||
// max-width: 800px;
|
|
||||||
// max-height: 90vh;
|
|
||||||
// aspect-ratio: 1/1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-image {
|
max-width: 700px;
|
||||||
width: 100%;
|
z-index: 300;
|
||||||
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: 0.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: 0.5rem;
|
|
||||||
border-radius: 100vw;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-content: center;
|
||||||
top: 50%;
|
position: relative;
|
||||||
left: var(--position);
|
overflow: hidden;
|
||||||
transform: translate(-50%, -50%);
|
--position: 50%;
|
||||||
pointer-events: none;
|
|
||||||
/* z-index: 100; */
|
img {
|
||||||
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, 0.5);
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
136
assets/css/components/_summary-hero.scss
Normal file
136
assets/css/components/_summary-hero.scss
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
#summary__hero{
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
#support-bar {
|
|
||||||
height: var(--header-h);
|
|
||||||
background-color: var(--color-accent);
|
|
||||||
color: var(--color-bg);
|
|
||||||
padding: 0 var(--padding-body);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.support-bar__container {
|
|
||||||
max-width: var(--max-w-cards);
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
@media #{$small-up} {
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 2ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
flex-direction: column;
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
line-height: 1.1;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.baseline {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--color-bg);
|
|
||||||
font-weight: 500;
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 2px;
|
|
||||||
word-wrap: nowrap;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
height: auto;
|
|
||||||
padding: calc(var(--spacing)*0.75) var(--padding-body);
|
|
||||||
.btn{
|
|
||||||
margin-top: calc(var(--spacing)*0.75);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +1,49 @@
|
||||||
.swiper {
|
.swiper {
|
||||||
|
|
||||||
width: 100%!important;
|
|
||||||
min-width: 0;
|
--slide-padding: 30px;
|
||||||
|
|
||||||
|
|
||||||
.swiper-button-prev,
|
.swiper-button-prev,
|
||||||
.swiper-button-next{
|
.swiper-button-next {
|
||||||
|
--swiper-navigation-size: 32px;
|
||||||
color: var(--color-txt);
|
color: var(--color-txt);
|
||||||
svg {
|
background-color: var(--color-bg);
|
||||||
width: 20px;
|
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 {
|
.swiper-pagination {
|
||||||
|
|
@ -28,28 +63,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media #{$x-small} {
|
||||||
|
|
||||||
.swiper-wrapper {
|
.swiper-button-prev,
|
||||||
height: max-content;
|
.swiper-button-next {
|
||||||
align-items: center;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-slide {
|
|
||||||
height: auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
// @media #{$x-small} {
|
|
||||||
|
|
||||||
// .swiper-button-prev,
|
|
||||||
// .swiper-button-next {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .swiper-slide {
|
|
||||||
// padding: 0px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
25
assets/css/components/_tags.scss
Normal file
25
assets/css/components/_tags.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
.category{
|
||||||
|
height: calc(var(--h-block)*0.75);
|
||||||
|
// border-radius: calc(var(--h-block)*0.75/2);
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 1ch;
|
||||||
|
padding-top: 3px;
|
||||||
|
|
||||||
|
font-size: var(--fs-xsmall);
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
background-color: var(--color-txt);
|
||||||
|
color: var(--color-bg);
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,98 +0,0 @@
|
||||||
[data-template="package"] .page__content,
|
|
||||||
.main__single .page__content,
|
|
||||||
#investigation__content {
|
|
||||||
font-size: var(--fs-text);
|
|
||||||
|
|
||||||
p,
|
|
||||||
li,
|
|
||||||
ul {
|
|
||||||
font-size: var(--fs-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5 {
|
|
||||||
font-weight: 500;
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
margin-inline: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin-top: calc(var(--spacing) * 4);
|
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
|
||||||
font-size: 1.45em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: calc(var(--spacing) * 3);
|
|
||||||
margin-bottom: calc(var(--spacing) * 1.5);
|
|
||||||
font-size: 1.2em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
margin-top: calc(var(--spacing) * 1.5);
|
|
||||||
margin-bottom: calc(var(--spacing) * 1);
|
|
||||||
font-size: 1.2em;
|
|
||||||
text-decoration: 1px underline var(--grey-600);
|
|
||||||
text-underline-offset: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: calc(var(--spacing) * 0.75) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding-left: 3ch;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: calc(var(--spacing) * 0.5) 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
video,
|
|
||||||
figure,
|
|
||||||
img:not(.slider-before-after img),
|
|
||||||
picture {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.insert {
|
|
||||||
max-width: var(--max-w-cards);
|
|
||||||
margin-inline: auto;
|
|
||||||
border: 1px solid var(--grey-600);
|
|
||||||
padding: calc(var(--padding-inner) * 3);
|
|
||||||
@media #{$small} {
|
|
||||||
padding: calc(var(--padding-inner) * 1);
|
|
||||||
}
|
|
||||||
background-color: var(--grey-800);
|
|
||||||
|
|
||||||
.insert--inner {
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
margin-inline: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5 {
|
|
||||||
margin-top: 0;
|
|
||||||
@media #{$small} {
|
|
||||||
margin-top: calc(var(--spacing) * 0.5);
|
|
||||||
margin-bottom: calc(var(--spacing) * 0.75);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .insert,
|
|
||||||
& > .swiper,
|
|
||||||
& > .slider-before-after,
|
|
||||||
& > figure {
|
|
||||||
margin-top: calc(var(--spacing) * 2);
|
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
|
||||||
& + .caption {
|
|
||||||
margin-top: calc(var(--spacing) * -1.5) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
/* Executive - Regular */
|
|
||||||
@font-face {
|
|
||||||
font-family: "Executive";
|
|
||||||
src: url("../fonts/Executive-55Regular.woff") format("woff");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Executive";
|
|
||||||
src: url("../fonts/Executive-56Italic.woff") format("woff");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Executive";
|
|
||||||
src: url("../fonts/Executive-65Medium.woff") format("woff");
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Executive";
|
|
||||||
src: url("../fonts/Executive-66MediumIt.woff") format("woff");
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--font: "Executive", Arial, Helvetica, sans-serif;
|
|
||||||
--color-green: #00ff00;
|
|
||||||
}
|
|
||||||
|
|
||||||
body * {
|
|
||||||
font-family: var(--font);
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-login-dialog::before {
|
|
||||||
content: "";
|
|
||||||
text-align: center;
|
|
||||||
height: 7rem;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22200px%22%20viewBox%3D%220%200%20162%2029%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill%3A%20%23fff%22%3E%3Ctitle%3EIndex.ngo%3C%2Ftitle%3E%3Cg%20transform%3D%22matrix(1.04516%2C0%2C0%2C0.659091%2C57.4839%2C-6.59091)%22%3E%3Crect%20x%3D%22-55%22%20y%3D%2210%22%20width%3D%22155%22%20height%3D%2244%22%20style%3D%22fill%3Anone%3B%22%3E%3C%2Frect%3E%3CclipPath%20id%3D%22_clip1%22%3E%3Crect%20x%3D%22-55%22%20y%3D%2210%22%20width%3D%22155%22%20height%3D%2244%22%3E%3C%2Frect%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23_clip1)%22%3E%3Cg%20transform%3D%22matrix(0.95679%2C0%2C0%2C1.51724%2C-55%2C10)%22%3E%3Cpath%20d%3D%22M162%2C29L148.198%2C29L141.174%2C20.767L134.15%2C29L91.184%2C29L91.184%2C0.004L120.653%2C0.004L120.653%2C7.351L102.637%2C7.351L102.637%2C10.867L120.137%2C10.867L120.137%2C18.13L102.637%2C18.13L102.637%2C21.606L120.926%2C21.606L120.926%2C28.951L134.273%2C14.414L120.807%2C0L134.56%2C0L141.388%2C7.767L147.76%2C0L161.201%2C0L148.236%2C13.79L161.996%2C28.997L162%2C29ZM68.58%2C29L54.224%2C29L54.224%2C0.004L68.637%2C0.004C74.672%2C0.004%2078.31%2C0.004%2082.046%2C2.045C86.259%2C4.379%2088.674%2C8.889%2088.674%2C14.417C88.674%2C19.406%2086.862%2C23.405%2083.427%2C25.975C79.463%2C29%2075.345%2C29%2068.58%2C29ZM49.819%2C29L38.775%2C29L31.499%2C19.815C29.746%2C17.735%2028.088%2C15.545%2027.307%2C14.495C27.387%2C15.813%2027.524%2C17.238%2027.524%2C20.499L27.524%2C29L15.965%2C29L15.965%2C0.004L27.009%2C0.004L33.798%2C8.349C36.223%2C11.121%2037.709%2C12.993%2038.393%2C13.881C38.347%2C12.615%2038.26%2C9.911%2038.26%2C6.84L38.26%2C0.004L49.819%2C0.004L49.819%2C29ZM11.559%2C29L0%2C29L0%2C0.004L11.559%2C0.004L11.559%2C29ZM65.784%2C21.818L67.904%2C21.818C70.918%2C21.818%2073.067%2C21.818%2074.728%2C20.531C76.074%2C19.491%2076.845%2C17.308%2076.845%2C14.541C76.845%2C11.526%2076.084%2C9.541%2074.525%2C8.476C72.895%2C7.411%2071.461%2C7.224%2067.578%2C7.224L65.784%2C7.224L65.784%2C21.818Z%22%20style%3D%22fill-rule%3Anonzero%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: 50% 50%;
|
|
||||||
background-size: 100%;
|
|
||||||
display: grid;
|
|
||||||
place-items: flex-end;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0 var(--dialog-padding);
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-login-dialog .k-dialog-body {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-button[data-theme^="green"]:not(.k-page-status-icon-option),
|
|
||||||
.k-button[data-theme^="positive"]:not(.k-page-status-icon-option) {
|
|
||||||
background-color: var(--color-green);
|
|
||||||
}
|
|
||||||
.k-button[data-theme^="green"] .k-icon:not([data-type="status-listed"]),
|
|
||||||
.k-button[data-theme^="positive"] .k-icon:not([data-type="status-listed"]) {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-icon[data-type="status-listed"] {
|
|
||||||
color: var(--color-green);
|
|
||||||
}
|
|
||||||
|
|
@ -12,22 +12,21 @@ body{
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding: 0 var(--padding-body);
|
padding: 0 var(--padding-body);
|
||||||
padding-top: var(--header-h);
|
padding-top: var(--header-h);
|
||||||
padding-bottom: calc(var(--spacing)*6);
|
padding-bottom: calc(var(--spacing)*2);
|
||||||
|
|
||||||
// min-height: 100dvh;
|
min-height: 100dvh;
|
||||||
// min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
|
.page__header,
|
||||||
.page__content{
|
.page__content{
|
||||||
max-width: var(--max-w-cards);
|
max-width: var(--max-w-cards);
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__header{
|
|
||||||
max-width: var(--max-w-cards);
|
|
||||||
margin-inline: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
.package__section,
|
|
||||||
.page__aside{
|
|
||||||
max-width: var(--max-w-cards);
|
|
||||||
margin-inline: auto;
|
|
||||||
padding-top: calc(var(--spacing)*4);
|
|
||||||
@media #{$small} {
|
|
||||||
padding-top: calc(var(--spacing)*3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section__title,
|
|
||||||
.aside__title{
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: calc(var(--spacing)*1);
|
|
||||||
font-size: 1.2em;
|
|
||||||
@media #{$small} {
|
|
||||||
font-size: var(--fs-normal);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +1,38 @@
|
||||||
|
.page__type{
|
||||||
|
|
||||||
|
height: calc(var(--h-block)*1);
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
border: var(--border-medium);
|
||||||
|
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 1.5ch;
|
||||||
|
padding-top: 5px;
|
||||||
|
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
main .page__header {
|
main .page__header {
|
||||||
margin-top: calc(var(--spacing) * 3);
|
margin-top: calc(var(--spacing) * 3);
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
margin-bottom: calc(var(--spacing) * 2);
|
||||||
|
|
||||||
|
|
||||||
@media #{$small} {
|
@media #{$small} {
|
||||||
margin-top: calc(var(--spacing) * 1);
|
margin-top: calc(var(--spacing) * 2);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__type{
|
|
||||||
margin-bottom: calc(var(--spacing) * 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page__title {
|
.page__title {
|
||||||
max-width: var(--max-w-content);
|
max-width: var(--max-w-content);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
@ -21,79 +40,20 @@ margin-bottom: calc(var(--spacing) * 1);
|
||||||
font-size: var(--fs-medium);
|
font-size: var(--fs-medium);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: var(--leading-title);
|
line-height: var(--leading-title);
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
margin-top: calc(var(--spacing) * 1);
|
||||||
|
margin-bottom: calc(var(--spacing) * 1.5);
|
||||||
@media #{$small-up} {
|
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
margin-bottom: calc(var(--spacing) * 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__cover{
|
.description {
|
||||||
margin-top: calc(var(--spacing) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.date{
|
|
||||||
display: block;
|
|
||||||
margin-top: calc(var(--spacing) * -1.5);
|
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
@media #{$small} {
|
|
||||||
margin-bottom: calc(var(--spacing) * 1);
|
|
||||||
margin-top: calc(var(--spacing) * -0.75);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page__description {
|
|
||||||
font-size: var(--fs-text);
|
font-size: var(--fs-text);
|
||||||
margin-bottom: calc(var(--spacing) * 3);
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
@media #{$small} {
|
|
||||||
margin-bottom: calc(var(--spacing) * 1.5);
|
|
||||||
}
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.list-nav{
|
// .description-medium{
|
||||||
display: flex;
|
// font-size: var(--fs-medium);
|
||||||
// justify-content: space-between;
|
// max-width: 58ch;
|
||||||
flex-wrap: wrap;
|
// line-height: 1.1;
|
||||||
// gap: 3ch;
|
// }
|
||||||
list-style: none;
|
|
||||||
margin-top: calc(var(--spacing) * -1.5);
|
|
||||||
@media #{$small} {
|
|
||||||
margin-top: calc(var(--spacing) * -0.5);
|
|
||||||
}
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
|
|
||||||
li{
|
|
||||||
white-space: nowrap;
|
|
||||||
margin-right: 2ch;
|
|
||||||
&:last-of-type{
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
@media #{$small} {
|
|
||||||
width: 12ch;
|
|
||||||
}
|
|
||||||
margin-bottom: calc(var(--spacing) * 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
a{
|
|
||||||
text-decoration: none;
|
|
||||||
text-transform: lowercase;
|
|
||||||
&::after{
|
|
||||||
content: " ↓";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
li:hover{
|
|
||||||
color: var(--color-txt)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,146 +1,116 @@
|
||||||
#site-footer {
|
#site-footer{
|
||||||
|
|
||||||
|
background-color: var(--dark);
|
||||||
|
padding: calc(var(--padding-body)*2) var(--padding-body);
|
||||||
|
z-index: 500;
|
||||||
|
|
||||||
|
.site-footer__container{
|
||||||
|
|
||||||
background-color: var(--dark);
|
|
||||||
padding: calc(var(--spacing)*2) var(--padding-body) calc(var(--spacing)*1) var(--padding-body);
|
|
||||||
z-index: 500;
|
|
||||||
|
|
||||||
.site-footer__container {
|
|
||||||
max-width: var(--max-w-cards);
|
max-width: var(--max-w-cards);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--padding-body);
|
||||||
font-size: var(--fs-small);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-top: calc(var(--spacing)*0.25);
|
||||||
.logo {
|
margin-bottom: calc(var(--spacing)*1);
|
||||||
// margin-top: calc(var(--spacing)*0.25);
|
svg{
|
||||||
margin-bottom: calc(var(--spacing)*0.5);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.baseline{
|
p{
|
||||||
max-width: 40ch;
|
margin: calc(var(--spacing)*0.5) 0;
|
||||||
}
|
font-size: var(--fs-small);
|
||||||
|
a{
|
||||||
.list-links {
|
text-decoration: none;
|
||||||
|
&:hover{
|
||||||
|
text-decoration: underline;
|
||||||
ul {
|
color: currentColor;
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: calc(var(--spacing)*0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li:hover a {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.hightlight {
|
.p__small{
|
||||||
text-transform: uppercase;
|
font-size: var(--fs-xsmall);
|
||||||
font-weight: 500;
|
color: var(--grey-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__mentions{
|
||||||
|
p{
|
||||||
|
font-size: var(--fs-xsmall);
|
||||||
|
color: var(--color-txt)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.footer__socials > p{
|
||||||
|
font-weight: 500;
|
||||||
// @media #{$medium} {
|
|
||||||
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
@media #{$small-up} {
|
|
||||||
.site-footer__container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 350px;
|
|
||||||
column-gap: calc(var(--padding-inner)*2);
|
|
||||||
|
|
||||||
.logo{ grid-column: span 2;}
|
|
||||||
.baseline{
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 2;
|
|
||||||
}
|
|
||||||
.list-links{
|
|
||||||
grid-column: 2;
|
|
||||||
grid-row: 2;
|
|
||||||
max-width: 350px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: var(--padding-inner);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
li {
|
|
||||||
// margin-bottom: calc(var(--spacing)*1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.socials{
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.credits {
|
|
||||||
font-size: var(--fs-xsmall);
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 4;
|
|
||||||
margin-top: calc(var(--spacing)*2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media #{$small} {
|
@media #{$small}{
|
||||||
|
|
||||||
.list-links {
|
|
||||||
margin-top: calc(var(--spacing)*1);
|
|
||||||
// li {
|
|
||||||
// margin-bottom: calc(var(--spacing)*0.25);
|
|
||||||
// }
|
|
||||||
|
|
||||||
.hightlight {
|
.footer__socials{
|
||||||
margin-top: calc(var(--spacing)*0.5);
|
margin-top: calc(var(--spacing)*0.75);
|
||||||
}
|
padding-top: calc(var(--spacing)*0.25);
|
||||||
|
border-top: var(--border-light);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.list-socials{
|
||||||
|
margin-top: calc(var(--spacing)*0.5);
|
||||||
|
margin-bottom: calc(var(--spacing)*0.75);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.footer__mentions{
|
||||||
|
|
||||||
|
border-top: var(--border-light);
|
||||||
|
padding-top: calc(var(--spacing)*0.25);
|
||||||
|
p{
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p__small{
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media #{$small-up}{
|
||||||
|
|
||||||
.socials {
|
.site-footer__container{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 3fr 2fr;
|
||||||
|
column-gap: calc(var(--spacing)*2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__newsletter{
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__socials{
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__socials .socials{
|
||||||
|
columns: 2;
|
||||||
margin-top: calc(var(--spacing)*1);
|
margin-top: calc(var(--spacing)*1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.credits {
|
.footer__mentions{
|
||||||
margin-top: calc(var(--spacing)*2);
|
grid-column: span 2;
|
||||||
|
p{
|
||||||
|
margin-top: calc(var(--spacing)*1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media #{$x-small} {
|
}
|
||||||
.credits {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
#site-header {
|
#site-header {
|
||||||
|
|
||||||
z-index: var(--z-header);
|
z-index: var(--z-header);
|
||||||
--gap: 3ch;
|
--gap: 3ch;
|
||||||
|
|
||||||
|
|
@ -11,249 +12,118 @@
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
padding: 0 var(--padding-body);
|
padding: 0 var(--padding-body);
|
||||||
|
|
||||||
box-shadow: -1px 4px 10px 0px var(--color-bg);
|
box-shadow: -1px 4px 10px 0px var(--color-bg);
|
||||||
|
|
||||||
.site-header__inner {
|
.site-header__inner{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
// border-bottom: 1px solid var(--color-bg);
|
||||||
|
// transition: border-color ease-in .5s;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: calc(var(--gap) * 0.25);
|
gap: var(--gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
|
a{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
&:hover {
|
&:hover{
|
||||||
color: var(--grey-200);
|
color: var(--grey-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#site-title {
|
#site-title {
|
||||||
position: relative;
|
flex-grow: 2;
|
||||||
top: -3px;
|
// opacity: 0;
|
||||||
width: 140px;
|
svg{
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
@media #{$small}{
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
svg {
|
|
||||||
width: 80px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
top: -4px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav-highlight,
|
.header__title-page{
|
||||||
#nav-investigation {
|
display: none;
|
||||||
flex-grow: 2;
|
flex-grow: 2;
|
||||||
ul {
|
text-align: left;
|
||||||
width: 100%;
|
white-space: nowrap;
|
||||||
display: flex;
|
overflow: hidden;
|
||||||
align-items: center;
|
text-overflow: ellipsis;
|
||||||
justify-content: center;
|
|
||||||
gap: var(--gap);
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-highlight ul {
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
line-height: 2;
|
||||||
|
|
||||||
@media #{$medium} {
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 890px) {
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding-right: 2ch;
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
li.support {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav-investigation {
|
ul{
|
||||||
position: absolute;
|
list-style-type: none;
|
||||||
// transition: top var(--transition-scroll);
|
|
||||||
top: 10%;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
opacity: 0;
|
align-items: center;
|
||||||
// transform: translateY(-10px);
|
gap: var(--gap);
|
||||||
transition: top 0.3s ease;
|
text-transform: uppercase;
|
||||||
pointer-events: none;
|
font-weight: 500;
|
||||||
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
max-width: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding-left: 2ch;
|
|
||||||
padding-right: 2ch;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$medium} {
|
|
||||||
ul {
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
padding-left: 6ch;
|
|
||||||
padding-right: 6ch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.is-selected {
|
|
||||||
color: var(--color-txt);
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-txt);
|
|
||||||
pointer-events: none;
|
|
||||||
a:hover {
|
|
||||||
color: var(--color-txt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-toggle {
|
|
||||||
|
#theme-toggle{
|
||||||
width: var(--h-block);
|
width: var(--h-block);
|
||||||
height: var(--h-block);
|
height: var(--h-block);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
svg {
|
svg{
|
||||||
width: 18px;
|
width: 18px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#lang-toggle {
|
#lang-toggle{
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.75ch;
|
gap: 1ch;
|
||||||
padding-right: 1.5ch;
|
button{
|
||||||
a {
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
button:disabled {
|
button:disabled{ color: var(--color-txt-light); }
|
||||||
color: var(--color-txt-light);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu-toggle {
|
#menu-toggle{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
svg {
|
svg{
|
||||||
width: 30px;
|
width: 30px;
|
||||||
fill: var(--color-txt);
|
fill: var(--color-txt);
|
||||||
}
|
}
|
||||||
.close {
|
.close{ display: none; }
|
||||||
display: none;
|
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
svg{ fill: var(--grey-200)!important; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
|
||||||
&:hover {
|
|
||||||
svg {
|
|
||||||
fill: var(--grey-200) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Animation, change header
|
|
||||||
|
|
||||||
#site-header.has-nav-investigation {
|
|
||||||
#nav-highlight {
|
#site-header.is-visible{
|
||||||
display: none;
|
// .site-header__inner{
|
||||||
}
|
// border-color: var(--grey-800);
|
||||||
#nav-investigation {
|
// }
|
||||||
position: relative;
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
top: 0px;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media #{$small-up} {
|
|
||||||
#site-header #nav-investigation .title {
|
@media #{$medium}{
|
||||||
|
#nav-highlight{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
#site-header #nav-highlight ul {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#site-header #nav-investigation .title {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#site-header.has-nav-investigation {
|
|
||||||
#nav-investigation {
|
|
||||||
ul {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// @media #{$x-small}{
|
|
||||||
// #site-header.has-nav-investigation{
|
|
||||||
// #nav-investigation{
|
|
||||||
// .title{ display: none; }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
// @media #{$x-small}{
|
|
||||||
// [data-template="investigation"] #site-header{
|
|
||||||
|
|
||||||
// #lang-toggle{ display: none; }
|
|
||||||
// #theme-toggle{ padding-right: 1ch; }
|
|
||||||
// #nav-investigation .title{
|
|
||||||
// font-size: var(--fs-xsmall);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// Quand le menu est ouvert : on dimme tout sauf le logo
|
|
||||||
body.menu-open #site-header {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
#nav-highlight,
|
|
||||||
#nav-investigation {
|
|
||||||
opacity: 0.15;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity 0.3s ease-in;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -19,15 +19,8 @@
|
||||||
right: -100vw;
|
right: -100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
.site-menu__inner{
|
flex-direction: column;
|
||||||
height: 100%;
|
|
||||||
overflow: scroll;
|
|
||||||
@include hide-scroll();
|
|
||||||
|
|
||||||
}
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
|
|
||||||
|
|
||||||
.search-form{
|
.search-form{
|
||||||
|
|
@ -35,62 +28,40 @@
|
||||||
margin-bottom: calc(var(--spacing)*1);
|
margin-bottom: calc(var(--spacing)*1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
nav{
|
nav{
|
||||||
margin-top: calc(var(--spacing)*1.5);
|
flex-grow: 1;
|
||||||
ul{
|
ul{
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
li{
|
|
||||||
margin-bottom: calc(var(--spacing)*0.5);
|
|
||||||
}
|
|
||||||
a{
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-pages{
|
|
||||||
li{
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
li{
|
||||||
|
font-size: var(--fs-normal);
|
||||||
|
a{
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
&:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight{
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.support{
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-aside{
|
|
||||||
margin-top: calc(var(--spacing)*1);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.socials{
|
.socials{
|
||||||
margin-top: calc(var(--spacing)*2);
|
|
||||||
padding-bottom: calc(var(--spacing)*0.75);
|
padding-bottom: calc(var(--spacing)*0.75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu-overlay{
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: calc(var(--z-header) - 2);
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity .3s ease-in, visibility .3s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.menu-open{
|
body.menu-open{
|
||||||
|
|
||||||
#site-menu{
|
#site-menu{
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu-toggle{
|
#menu-toggle{
|
||||||
|
|
@ -98,10 +69,4 @@ body.menu-open{
|
||||||
.close{ display: block!important; }
|
.close{ display: block!important; }
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu-overlay{
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
2543
assets/css/style.css
2543
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
|
|
@ -8,13 +8,14 @@
|
||||||
// @import 'components/nav-tabs';
|
// @import 'components/nav-tabs';
|
||||||
// @import 'components/btn--default';
|
// @import 'components/btn--default';
|
||||||
@import "components/buttons";
|
@import "components/buttons";
|
||||||
@import "components/category";
|
@import "components/tags";
|
||||||
@import "components/keywords";
|
@import "components/keywords";
|
||||||
|
@import "components/details-summary";
|
||||||
@import "components/sort";
|
@import "components/sort";
|
||||||
@import "components/btn-group-mobile";
|
@import "components/btn-group-mobile";
|
||||||
|
|
||||||
@import "components/figures";
|
@import "components/figures";
|
||||||
@import "components/investigation-hero";
|
@import "components/summary-hero";
|
||||||
@import "components/form-newsletter";
|
@import "components/form-newsletter";
|
||||||
@import "components/search-form";
|
@import "components/search-form";
|
||||||
@import "components/list-socials";
|
@import "components/list-socials";
|
||||||
|
|
@ -23,28 +24,22 @@
|
||||||
@import "components/text";
|
@import "components/text";
|
||||||
@import "components/card-article";
|
@import "components/card-article";
|
||||||
@import "components/card-article-small";
|
@import "components/card-article-small";
|
||||||
@import "components/card-block";
|
@import "components/card-impact";
|
||||||
@import "components/card-block-small";
|
@import "components/card-impact-small";
|
||||||
|
// @import "components/card-package";
|
||||||
@import "components/card-open-graph";
|
@import "components/card-open-graph";
|
||||||
@import "components/swiper";
|
@import "components/swiper";
|
||||||
@import "components/lightbox";
|
|
||||||
@import "components/slider-before-after";
|
@import "components/slider-before-after";
|
||||||
@import "components/dl-table";
|
|
||||||
@import "components/bottom-bar";
|
|
||||||
@import "components/newsletter-form";
|
|
||||||
@import "components/support-bar";
|
|
||||||
|
|
||||||
|
|
||||||
@import "partials/site-header";
|
@import "partials/site-header";
|
||||||
@import "partials/site-menu";
|
@import "partials/site-menu";
|
||||||
@import "partials/site-footer";
|
@import "partials/site-footer";
|
||||||
@import "partials/main-layout";
|
@import "partials/main-layout";
|
||||||
@import "partials/page-header";
|
@import "partials/page-header";
|
||||||
@import "partials/page-aside";
|
|
||||||
@import "partials/container-cards";
|
@import "partials/container-cards";
|
||||||
|
|
||||||
@import "template/home";
|
@import "template/home";
|
||||||
@import "template/page-single";
|
|
||||||
@import "template/investigation";
|
@import "template/investigation";
|
||||||
@import "template/investigation_content";
|
@import "template/investigation_content";
|
||||||
|
@import "template/package";
|
||||||
@import "template/impacts";
|
@import "template/impacts";
|
||||||
|
|
|
||||||
|
|
@ -7,14 +7,12 @@
|
||||||
@media #{$medium} {
|
@media #{$medium} {
|
||||||
padding-bottom: calc(var(--spacing)*4);
|
padding-bottom: calc(var(--spacing)*4);
|
||||||
margin-bottom: calc(var(--spacing)*4);
|
margin-bottom: calc(var(--spacing)*4);
|
||||||
|
&:first-of-type{
|
||||||
&:first-of-type{
|
|
||||||
padding-top: calc(var(--spacing)*2);
|
padding-top: calc(var(--spacing)*2);
|
||||||
}
|
}
|
||||||
.col-left{
|
.col-left{
|
||||||
margin-bottom: calc(var(--spacing)*3);
|
margin-bottom: calc(var(--spacing)*3);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.baseline-section {
|
.baseline-section {
|
||||||
|
|
@ -24,7 +22,19 @@
|
||||||
margin-bottom: calc(var(--spacing)*1);
|
margin-bottom: calc(var(--spacing)*1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn--bold-inline{
|
||||||
|
text-transform: none;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
.icon{
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
svg{
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@media #{$medium-up} {
|
@media #{$medium-up} {
|
||||||
|
|
@ -35,16 +45,16 @@
|
||||||
margin-bottom: calc(var(--spacing)*4);
|
margin-bottom: calc(var(--spacing)*4);
|
||||||
padding-top: calc(var(--spacing)*4);
|
padding-top: calc(var(--spacing)*4);
|
||||||
display: grid;
|
display: grid;
|
||||||
// grid-template-columns: 1fr 2fr;
|
--gap: calc(var(--padding-body)*2);
|
||||||
grid-template-columns: minmax(360px, 1fr) 2fr;
|
grid-template-columns: 1fr 2fr;
|
||||||
grid-gap: calc(var(--padding-body)*3);
|
grid-gap: var(--gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.col-left {
|
.col-left {
|
||||||
align-self: start;
|
align-self: start;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: calc(var(--header-h) + var(--spacing)*1.5);
|
top: calc(var(--header-h) + var(--spacing)*4);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -53,13 +63,6 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&#home__investigations .section--inner{
|
|
||||||
.section--inner{ padding-top: calc(var(--spacing)*1); }
|
|
||||||
.col-left{ top: calc(var(--header-h) + var(--spacing)*1.5); }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -67,7 +70,7 @@
|
||||||
@media #{$small} {
|
@media #{$small} {
|
||||||
|
|
||||||
.card--article,
|
.card--article,
|
||||||
.card--block{
|
.card--impact{
|
||||||
margin-bottom: calc(var(--spacing)*1);
|
margin-bottom: calc(var(--spacing)*1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -90,11 +93,8 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#home__investigations {
|
|
||||||
|
|
||||||
.section--inner{
|
#home__investigations {
|
||||||
padding-top: calc(var(--spacing)*1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$small-up} {
|
@media #{$small-up} {
|
||||||
.col-right{
|
.col-right{
|
||||||
|
|
@ -102,7 +102,44 @@
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: var(--padding-body);
|
gap: var(--padding-body);
|
||||||
|
|
||||||
|
.card--article:first-of-type{
|
||||||
|
grid-column: span 2;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
|
||||||
|
figure,
|
||||||
|
picture{
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title{
|
||||||
|
grid-column: span 2;
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
padding-right: 3ch;
|
||||||
|
margin-bottom: calc(var(--spacing)*1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description{
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 3;
|
||||||
|
padding-right: 3ch;
|
||||||
|
display: block;
|
||||||
|
-webkit-line-clamp: unset;
|
||||||
|
-webkit-box-orient: unset;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
dl{
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keywords-wrapper{
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.see-more{
|
.see-more{
|
||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
|
|
@ -114,8 +151,6 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,15 +2,11 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.page__header {
|
.page__header {
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
max-width: var(--max-w-content);
|
max-width: var(--max-w-content);
|
||||||
margin-bottom: 0px;
|
|
||||||
|
|
||||||
|
|
||||||
.page__description{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__content{
|
.page__content{
|
||||||
|
|
@ -18,32 +14,118 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#investigation__hero{
|
.investigation__content{
|
||||||
@media #{$small-up} {
|
font-size: var(--fs-text);
|
||||||
padding-top: calc(var(--spacing)*2.5);
|
}
|
||||||
margin-bottom: calc(var(--spacing)*3);
|
|
||||||
}
|
|
||||||
@media #{$small} {
|
|
||||||
padding-top: calc(var(--spacing)*1.5);
|
// @media screen and (max-width: 1340px) {
|
||||||
margin-bottom: calc(var(--spacing)*2);
|
// 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 {
|
||||||
|
// background-color: red;
|
||||||
|
// margin-top: calc(var(--spacing) * 3);
|
||||||
|
// margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
// max-width: var(--max-w-content);
|
||||||
|
// margin-inline: auto;
|
||||||
|
|
||||||
|
// &:target {
|
||||||
|
// padding-top: calc(var(--header-h) + var(--spacing) * 1);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// a:hover {
|
||||||
|
// color: var(--grey-200);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .section__title {
|
||||||
|
// font-weight: 500;
|
||||||
|
// text-transform: uppercase;
|
||||||
|
// margin-bottom: calc(var(--spacing) * 1);
|
||||||
|
// padding-right: 2ch;
|
||||||
|
// text-wrap: balance;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#investigation__dl {
|
||||||
|
margin-top: calc(var(--spacing) * 1.5);
|
||||||
|
border-bottom: var(--border-light);
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin-inline: auto;
|
||||||
|
font-size: var(--fs-normal);
|
||||||
|
|
||||||
|
.dl__group {
|
||||||
|
@include grid-content();
|
||||||
|
column-gap: 1ch;
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.investigation__aside{
|
||||||
|
max-width: var(--max-w-cards);
|
||||||
|
margin: calc(var(--spacing)*4) auto;
|
||||||
|
|
||||||
|
.aside__title{
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: calc(var(--spacing)*1)
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// SMALL ----------------------------------------------------------
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
// @media #{$small} {
|
||||||
|
// [data-template="investigation"] main {
|
||||||
|
// width: 100%;
|
||||||
|
|
||||||
|
// header {
|
||||||
|
// margin-bottom: calc(var(--spacing) * 1);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .section__article {
|
||||||
|
// margin-top: calc(var(--spacing) * 2);
|
||||||
|
// margin-bottom: calc(var(--spacing) * 2);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .panel-left {
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,162 +1,153 @@
|
||||||
#investigation__content {
|
|
||||||
padding-top: calc(var(--spacing) * 4);
|
|
||||||
|
|
||||||
.section-title-only {
|
.investigation__content {
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-txt {
|
margin-top: calc(var(--spacing) * 4);
|
||||||
max-width: var(--max-w-content);
|
|
||||||
margin-inline: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subsection-txt .insert {
|
|
||||||
margin-top: calc(var(--spacing) * 2);
|
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
|
||||||
padding: calc(var(--padding-inner) * 2) calc(var(--padding-inner) * 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.subsection-txt {
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-height: 75vh;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$small-up} {
|
|
||||||
.section-content {
|
.section-content {
|
||||||
margin-bottom: calc(var(--spacing) * 4);
|
// min-height: calc(100vh - var(--header-h));
|
||||||
}
|
padding-left: calc(var(--padding-body)*1.5);
|
||||||
|
padding-right: calc(var(--padding-body)*1.5);
|
||||||
.subsection-w-media {
|
margin-bottom: calc(var(--spacing)*6);
|
||||||
display: grid;
|
&:target{
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
padding-top: calc(var(--header-h) + var(--spacing)*2);
|
||||||
gap: var(--padding-body);
|
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.media {
|
|
||||||
margin-inline: auto;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
position: sticky;
|
|
||||||
top: calc(var(--header-h) + var(--spacing));
|
|
||||||
align-self: start;
|
|
||||||
|
|
||||||
@media #{$medium-up} {
|
|
||||||
padding-left: var(--padding-inner);
|
|
||||||
padding-right: var(--padding-inner);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin-inline: auto;
|
||||||
|
margin-bottom: calc(var(--spacing)*2);
|
||||||
|
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
// text-transform: uppercase;
|
||||||
|
text-wrap: balance;
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-txt{
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin-inline: auto;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.subsection-w-media{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: var(--padding-body);
|
||||||
|
margin-bottom: calc(var(--spacing)*4);
|
||||||
|
margin-top: calc(var(--spacing)*2);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
|
.media{
|
||||||
|
margin-inline: auto;
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
padding-left: var(--padding-inner);
|
||||||
|
padding-right: var(--padding-inner);
|
||||||
|
position: sticky;
|
||||||
|
top: calc(var(--header-h) + var(--spacing));
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.subsection-txt {
|
.subsection-txt {
|
||||||
min-height: calc(100vh - var(--header-h));
|
min-height: calc(100vh - var(--header-h));
|
||||||
padding-left: var(--padding-inner);
|
max-width: var(--max-w-content);
|
||||||
padding-right: var(--padding-inner);
|
padding-left: var(--padding-inner);
|
||||||
padding-bottom: calc(var(--spacing) * 6);
|
padding-right: var(--padding-inner);
|
||||||
}
|
padding-bottom: calc(var(--spacing)*6);
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
.section-content:not(.section-title-only) {
|
|
||||||
padding-bottom: calc(var(--spacing) * 1);
|
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
|
||||||
border-bottom: var(--border-light);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title-only {
|
.subsection-w-hscroll{
|
||||||
margin-bottom: calc(var(--spacing) * 1.5);
|
position: relative;
|
||||||
}
|
margin-bottom: calc(var(--spacing)*4);
|
||||||
.media {
|
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
.horizontal-scroll{
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-scroll-wrapper{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-scroll-slide{
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 90vw;
|
||||||
|
max-width: 700px;
|
||||||
|
padding: 0 calc(var(--spacing) * 1);
|
||||||
|
|
||||||
|
figure, img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-scroll-pagination{
|
||||||
|
position: fixed;
|
||||||
|
bottom: calc(var(--spacing) * 2);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin-top: calc(var(--spacing) * 3);
|
|
||||||
margin-bottom: calc(var(--spacing) * 1.5);
|
p {
|
||||||
font-size: 1.35em;
|
margin: calc(var(--spacing)*0.75) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
ul {
|
||||||
margin-top: calc(var(--spacing) * 3);
|
padding-left: 3ch;
|
||||||
margin-bottom: calc(var(--spacing) * 1);
|
|
||||||
font-size: 1em;
|
li{
|
||||||
|
margin: calc(var(--spacing)*0.5) 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h4,
|
|
||||||
h5 {
|
|
||||||
margin-top: calc(var(--spacing) * 3);
|
|
||||||
margin-bottom: calc(var(--spacing) * 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.subsection-txt .insert {
|
|
||||||
margin-top: calc(var(--spacing) * 1.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.subsection-w-hscroll {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: calc(var(--spacing) * 4);
|
|
||||||
|
|
||||||
.horizontal-scroll {
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.horizontal-scroll-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
will-change: transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
.horizontal-scroll-slide {
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 90vw;
|
|
||||||
max-width: 700px;
|
|
||||||
padding: 0 calc(var(--spacing) * 1);
|
|
||||||
|
|
||||||
figure,
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.horizontal-scroll-pagination {
|
|
||||||
position: fixed;
|
|
||||||
bottom: calc(var(--spacing) * 2);
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.insert--inner > :last-child {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
.insert--inner > :first-child,
|
|
||||||
.subsection-txt > :first-child,
|
|
||||||
.section-content > :first-child {
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.investigation__content:target {
|
.investigation__content:target {
|
||||||
padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important;
|
padding-top: calc(var(--header-h)*2 + var(--spacing)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media {
|
|
||||||
video {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
.media{
|
||||||
height: auto;
|
|
||||||
}
|
video{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure{
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption{
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper{
|
||||||
|
width: calc(100% - 60px);
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
88
assets/css/template/_package.scss
Normal file
88
assets/css/template/_package.scss
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
.content-package {
|
||||||
|
// 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-small);
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
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-package {
|
||||||
|
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-package {
|
||||||
|
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-package {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
.main__single {
|
|
||||||
|
|
||||||
.page__header{
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
border-bottom: var(--border-light);
|
|
||||||
padding-bottom: calc(var(--spacing)*1);
|
|
||||||
|
|
||||||
.page__description{
|
|
||||||
margin-bottom: calc(var(--spacing)*1);
|
|
||||||
|
|
||||||
}
|
|
||||||
@include figure-16-9();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.page__content{
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
margin-top: calc(var(--spacing)*3);
|
|
||||||
@media #{$small} {
|
|
||||||
margin-top: calc(var(--spacing)*1.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.page__header + #related-investigations{
|
|
||||||
padding-top: calc(var(--spacing) * 1);
|
|
||||||
@media #{$small} {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
[data-template="newsletter"],
|
|
||||||
[data-template="about"],
|
|
||||||
[data-template="privacy-policy"],
|
|
||||||
[data-template="legal-notices"]{
|
|
||||||
.page__header{
|
|
||||||
border-bottom: none;
|
|
||||||
padding-bottom: 0px;
|
|
||||||
|
|
||||||
.page__title{
|
|
||||||
text-align: center;
|
|
||||||
border-bottom: var(--border-medium);
|
|
||||||
padding-bottom: calc(var(--spacing) * 0.5);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 375 375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="-0" y="0" width="375" height="375" style="fill:none;"/><path d="M213.542,291.667c0,7.194 -5.827,13.021 -13.021,13.021l-78.125,0c-7.194,0 -13.021,-5.827 -13.021,-13.021c0,-7.194 5.827,-13.021 13.021,-13.021l78.125,0c7.194,0 13.021,5.827 13.021,13.021Zm39.062,-65.104l-130.208,0c-7.194,0 -13.021,5.827 -13.021,13.021c0,7.194 5.827,13.021 13.021,13.021l130.208,0c7.194,0 13.021,-5.827 13.021,-13.021c0,-7.194 -5.827,-13.021 -13.021,-13.021Zm78.125,-117.187l0,221.354c0,21.533 -17.529,39.062 -39.062,39.062l-208.333,0c-21.533,0 -39.062,-17.529 -39.062,-39.062l0,-286.458c0,-21.533 17.529,-39.062 39.062,-39.062l143.229,0c3.45,0 6.771,1.367 9.212,3.809l91.146,91.146c2.441,2.441 3.809,5.762 3.809,9.212l0,0Zm-104.167,-13.021c0,7.178 5.843,13.021 13.021,13.021l59.717,0l-72.737,-72.737l0,59.717Zm78.125,39.062l-65.104,0c-21.533,0 -39.062,-17.529 -39.062,-39.062l0,-65.104l-117.187,0c-7.178,0 -13.021,5.843 -13.021,13.021l0,286.458c0,7.178 5.843,13.021 13.021,13.021l208.333,0c7.178,0 13.021,-5.843 13.021,-13.021l0,-195.312Zm-195.312,52.083c-0,7.194 5.827,13.021 13.021,13.021l130.208,0c7.194,0 13.021,-5.827 13.021,-13.021c0,-7.194 -5.827,-13.021 -13.021,-13.021l-130.208,0c-7.194,0 -13.021,5.827 -13.021,13.021Z" style="fill-rule:nonzero;"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB |
|
|
@ -1 +1 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 338 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="337.5" height="350" style="fill:none;"/><g><path d="M206.452,92.421l-82.875,46.517c-11.725,-17.346 -31.575,-28.758 -54.067,-28.758c-35.987,0 -65.204,29.217 -65.204,65.204c0,35.987 29.217,65.204 65.204,65.204c21.5,0 40.583,-10.429 52.467,-26.5l83.408,46.817c-1.692,5.804 -2.6,11.933 -2.6,18.275c0,35.987 29.217,65.204 65.204,65.204c35.988,0 65.204,-29.217 65.204,-65.204c0,-35.988 -29.217,-65.204 -65.204,-65.204c-20.317,0 -38.479,9.312 -50.438,23.896l-84.575,-47.471c1.138,-4.821 1.738,-9.85 1.738,-15.017c0,-4.167 -0.392,-8.246 -1.138,-12.196l86.262,-48.417c11.925,13.058 29.088,21.258 48.15,21.258c35.988,0 65.204,-29.221 65.204,-65.208c0,-35.988 -29.217,-65.204 -65.204,-65.204c-35.988,-0 -65.204,29.217 -65.204,65.204c0,7.571 1.292,14.838 3.667,21.6Zm61.538,147.596c21.617,0 39.163,17.546 39.163,39.163c0,21.612 -17.546,39.162 -39.163,39.162c-21.613,0 -39.163,-17.55 -39.163,-39.162c0,-21.617 17.55,-39.163 39.163,-39.163Zm-198.479,-103.796c21.617,0 39.163,17.546 39.163,39.162c0,21.612 -17.546,39.162 -39.163,39.162c-21.612,0 -39.162,-17.55 -39.162,-39.162c0,-21.617 17.55,-39.162 39.162,-39.162Zm198.479,-104.562c21.617,-0 39.163,17.55 39.163,39.162c0,21.617 -17.546,39.167 -39.163,39.167c-21.613,0 -39.163,-17.55 -39.163,-39.167c0,-21.613 17.55,-39.162 39.163,-39.162Z"/></g></svg>
|
<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>
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 679 B |
|
|
@ -1,24 +0,0 @@
|
||||||
export function backToTop(){
|
|
||||||
const btn = document.getElementById('btn--back-to-top');
|
|
||||||
if (!btn) return;
|
|
||||||
|
|
||||||
let lastY = window.scrollY;
|
|
||||||
let peakY = window.scrollY;
|
|
||||||
|
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
const currentY = window.scrollY;
|
|
||||||
|
|
||||||
if (currentY > lastY) {
|
|
||||||
peakY = currentY;
|
|
||||||
btn.classList.remove('is-visible');
|
|
||||||
} else {
|
|
||||||
if (currentY <= 800) {
|
|
||||||
btn.classList.remove('is-visible');
|
|
||||||
} else if (peakY - currentY >= 200 && peakY > 600) {
|
|
||||||
btn.classList.add('is-visible');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
lastY = currentY;
|
|
||||||
}, { passive: true });
|
|
||||||
}
|
|
||||||
58
assets/js/banner-sticky-desktop.js
Normal file
58
assets/js/banner-sticky-desktop.js
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
let isInitialized = false;
|
||||||
|
|
||||||
|
export function bannerStickyDesktop(responsiveSmall) {
|
||||||
|
if (isInitialized) return;
|
||||||
|
|
||||||
|
let body = document.body;
|
||||||
|
let panel = body.querySelector(".panel-left");
|
||||||
|
|
||||||
|
if (!panel) return;
|
||||||
|
|
||||||
|
let footer = document.querySelector("#site-footer");
|
||||||
|
|
||||||
|
// Stocker la hauteur initiale du banner
|
||||||
|
const bannerInitialHeight = panel.offsetHeight;
|
||||||
|
|
||||||
|
function checkScroll() {
|
||||||
|
const screenWidth = window.innerWidth;
|
||||||
|
|
||||||
|
// Vérifier que l'écran est plus grand que responsiveSmall
|
||||||
|
if (screenWidth <= responsiveSmall) {
|
||||||
|
// Réinitialiser le transform si on est en dessous de responsiveSmall
|
||||||
|
panel.style.transform = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculer la position du bas de la fenêtre
|
||||||
|
const windowBottom = window.scrollY + window.innerHeight;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
panel.style.transform = `translateY(-${translateValue}px)`;
|
||||||
|
} else {
|
||||||
|
// Réinitialiser la position si on n'a pas encore atteint le footer
|
||||||
|
panel.style.transform = 'translateY(0)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', checkScroll);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
if (window.innerWidth > responsiveSmall) {
|
||||||
|
panel.style.transform = '';
|
||||||
|
}
|
||||||
|
checkScroll();
|
||||||
|
});
|
||||||
|
|
||||||
|
checkScroll();
|
||||||
|
|
||||||
|
isInitialized = true;
|
||||||
|
}
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
export function progressBar(){
|
|
||||||
const bar = document.getElementById('progressBar');
|
|
||||||
if (!bar) return;
|
|
||||||
|
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
const scrollTop = window.scrollY;
|
|
||||||
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
||||||
const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
|
|
||||||
bar.style.width = `${progress}vw`;
|
|
||||||
}, { passive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export function scrollBack(){
|
|
||||||
const bottomBar = document.getElementById('bottom-bar');
|
|
||||||
const navInvestigation = document.getElementById('nav-investigation');
|
|
||||||
const header = document.getElementById('site-header');
|
|
||||||
const footerEl = document.getElementById('support-bar') || document.getElementById('site-footer');
|
|
||||||
|
|
||||||
let lastY = window.scrollY;
|
|
||||||
let peakY = window.scrollY;
|
|
||||||
let visible = false;
|
|
||||||
|
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
const currentY = window.scrollY;
|
|
||||||
|
|
||||||
// header : basé uniquement sur la position absolue
|
|
||||||
if (navInvestigation && header) {
|
|
||||||
header.classList.toggle('has-nav-investigation', currentY >= 160);
|
|
||||||
}
|
|
||||||
|
|
||||||
// zone footer : bottom-bar masquée et verrouillée
|
|
||||||
const inFooterZone = footerEl && (currentY + window.innerHeight >= footerEl.offsetTop);
|
|
||||||
|
|
||||||
if (inFooterZone) {
|
|
||||||
if (visible) {
|
|
||||||
visible = false;
|
|
||||||
if (bottomBar) bottomBar.classList.remove('is-visible');
|
|
||||||
}
|
|
||||||
} else if (currentY > lastY) {
|
|
||||||
// scroll bas
|
|
||||||
peakY = currentY;
|
|
||||||
if (!visible && currentY > 280) {
|
|
||||||
visible = true;
|
|
||||||
if (bottomBar) bottomBar.classList.add('is-visible');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// scroll haut : hide après 200px remontés
|
|
||||||
if (visible && peakY - currentY >= 200) {
|
|
||||||
visible = false;
|
|
||||||
if (bottomBar) bottomBar.classList.remove('is-visible');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
lastY = currentY;
|
|
||||||
}, { passive: 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;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export function initDropdowns(responsiveSmall, responsiveSmallX) {
|
export function initDropdowns(responsiveSmall) {
|
||||||
const dropdowns = document.querySelectorAll('.dropdown');
|
const dropdowns = document.querySelectorAll('.dropdown');
|
||||||
|
|
||||||
function updateBodyOverflow(isOpen, dropdownElement = null) {
|
function updateBodyOverflow(isOpen, dropdownElement = null) {
|
||||||
|
|
@ -33,14 +33,12 @@ export function initDropdowns(responsiveSmall, responsiveSmallX) {
|
||||||
if (other !== dropdown) {
|
if (other !== dropdown) {
|
||||||
other.classList.remove('is-open', 'dropdown--align-right');
|
other.classList.remove('is-open', 'dropdown--align-right');
|
||||||
other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
||||||
const otherContent = other.querySelector('.dropdown__content');
|
|
||||||
if (otherContent) otherContent.style.transform = '';
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const isOpening = !dropdown.classList.contains('is-open');
|
const isOpening = !dropdown.classList.contains('is-open');
|
||||||
|
|
||||||
if (isOpening && !dropdown.closest('#bottom-bar')) {
|
if (isOpening) {
|
||||||
// Vérifie s'il y a la place à droite
|
// Vérifie s'il y a la place à droite
|
||||||
const content = dropdown.querySelector('.dropdown__content');
|
const content = dropdown.querySelector('.dropdown__content');
|
||||||
const triggerRect = trigger.getBoundingClientRect();
|
const triggerRect = trigger.getBoundingClientRect();
|
||||||
|
|
@ -58,19 +56,6 @@ export function initDropdowns(responsiveSmall, responsiveSmallX) {
|
||||||
dropdown.classList.toggle('is-open');
|
dropdown.classList.toggle('is-open');
|
||||||
trigger.classList.toggle('is-selected');
|
trigger.classList.toggle('is-selected');
|
||||||
|
|
||||||
// Décalage horizontal pour #bottom-bar sur petit écran
|
|
||||||
if (dropdown.closest('#bottom-bar') && window.innerWidth < responsiveSmallX) {
|
|
||||||
if (dropdown.classList.contains('is-open')) {
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
const rect = content.getBoundingClientRect();
|
|
||||||
const paddingBody = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--padding-body')) || 0;
|
|
||||||
content.style.transform = `translateX(${-rect.left + paddingBody}px)`;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
content.style.transform = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Gère l'overflow du body sur mobile
|
// Gère l'overflow du body sur mobile
|
||||||
updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
|
updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
|
||||||
});
|
});
|
||||||
|
|
@ -85,8 +70,6 @@ export function initDropdowns(responsiveSmall, responsiveSmallX) {
|
||||||
}
|
}
|
||||||
dropdown.classList.remove('is-open', 'dropdown--align-right');
|
dropdown.classList.remove('is-open', 'dropdown--align-right');
|
||||||
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
||||||
const c = dropdown.querySelector('.dropdown__content');
|
|
||||||
if (c) c.style.transform = '';
|
|
||||||
});
|
});
|
||||||
updateBodyOverflow(false);
|
updateBodyOverflow(false);
|
||||||
});
|
});
|
||||||
|
|
@ -97,8 +80,6 @@ export function initDropdowns(responsiveSmall, responsiveSmallX) {
|
||||||
dropdowns.forEach(dropdown => {
|
dropdowns.forEach(dropdown => {
|
||||||
dropdown.classList.remove('is-open', 'dropdown--align-right');
|
dropdown.classList.remove('is-open', 'dropdown--align-right');
|
||||||
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
||||||
const c = dropdown.querySelector('.dropdown__content');
|
|
||||||
if (c) c.style.transform = '';
|
|
||||||
});
|
});
|
||||||
updateBodyOverflow(false);
|
updateBodyOverflow(false);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,10 @@
|
||||||
export function headerToggle() {
|
export function headerToggle() {
|
||||||
const header = document.getElementById("site-header");
|
const header = document.getElementById("site-header");
|
||||||
const buttonToggle = document.querySelector("#menu-toggle");
|
const buttonToggle = document.querySelector("#menu-toggle");
|
||||||
const siteMenu = document.getElementById("site-menu");
|
|
||||||
const overlay = document.getElementById("menu-overlay");
|
|
||||||
|
|
||||||
if (!header || !buttonToggle) return;
|
if (!header || !buttonToggle) return;
|
||||||
|
buttonToggle.addEventListener("click", () => {
|
||||||
function openMenu() {
|
const isOpen = document.body.classList.toggle("menu-open");
|
||||||
document.body.classList.add("menu-open");
|
|
||||||
buttonToggle.setAttribute("aria-expanded", "true");
|
|
||||||
buttonToggle.setAttribute("aria-label", "Fermer le menu");
|
|
||||||
siteMenu?.removeAttribute("inert");
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeMenu() {
|
|
||||||
document.body.classList.remove("menu-open");
|
|
||||||
buttonToggle.setAttribute("aria-expanded", "false");
|
|
||||||
buttonToggle.setAttribute("aria-label", "Ouvrir le menu");
|
|
||||||
siteMenu?.setAttribute("inert", "");
|
|
||||||
}
|
|
||||||
|
|
||||||
buttonToggle.addEventListener("click", (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
document.body.classList.contains("menu-open") ? closeMenu() : openMenu();
|
|
||||||
});
|
|
||||||
|
|
||||||
header.addEventListener("click", () => {
|
|
||||||
if (document.body.classList.contains("menu-open")) closeMenu();
|
|
||||||
});
|
|
||||||
|
|
||||||
overlay?.addEventListener("click", closeMenu);
|
|
||||||
|
|
||||||
document.addEventListener("keydown", (e) => {
|
|
||||||
if (e.key === "Escape" && document.body.classList.contains("menu-open")) closeMenu();
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
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}}',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -1,49 +1,38 @@
|
||||||
|
|
||||||
export function playVideo() {
|
export function playVideo() {
|
||||||
const playButton = document.querySelector('#hero-play-video');
|
const playButton = document.querySelector('#hero-play-video');
|
||||||
if (!playButton) return;
|
|
||||||
|
|
||||||
const playerDiv = document.querySelector('#youtube-player');
|
if (!playButton) {
|
||||||
if (!playerDiv) return;
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Charger l'API YouTube IFrame Player
|
playButton.addEventListener('click', function() {
|
||||||
const tag = document.createElement('script');
|
|
||||||
tag.src = 'https://www.youtube.com/iframe_api';
|
|
||||||
document.head.appendChild(tag);
|
|
||||||
|
|
||||||
let ytReady = false;
|
|
||||||
window.onYouTubeIframeAPIReady = () => { ytReady = true; };
|
|
||||||
|
|
||||||
playButton.addEventListener('click', function () {
|
|
||||||
const extract = document.querySelector('.extract');
|
const extract = document.querySelector('.extract');
|
||||||
const videoFull = document.querySelector('.video-full');
|
const videoFull = document.querySelector('.video-full');
|
||||||
const titleSmall = document.querySelector('.page-title-small');
|
const titleSmall = document.querySelector('.page-title-small');
|
||||||
|
|
||||||
if (extract) extract.style.display = 'none';
|
|
||||||
if (titleSmall) titleSmall.style.display = 'none';
|
if (extract) {
|
||||||
|
extract.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
if(titleSmall){
|
||||||
|
titleSmall.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
if (videoFull) {
|
if (videoFull) {
|
||||||
videoFull.style.display = 'block';
|
videoFull.style.display = 'block';
|
||||||
|
|
||||||
function createPlayer() {
|
const iframe = videoFull.querySelector('iframe');
|
||||||
new YT.Player('youtube-player', {
|
if (iframe) {
|
||||||
videoId: playerDiv.dataset.videoId,
|
const src = iframe.src;
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
playerVars: {
|
|
||||||
autoplay: 1,
|
|
||||||
rel: 0,
|
|
||||||
},
|
|
||||||
events: {
|
|
||||||
onReady: (e) => e.target.playVideo(),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (ytReady) {
|
// Ajouter les paramètres autoplay et mute pour YouTube
|
||||||
createPlayer();
|
if (src) {
|
||||||
} else {
|
const separator = src.includes('?') ? '&' : '?';
|
||||||
window.onYouTubeIframeAPIReady = createPlayer;
|
iframe.src = src + separator + 'autoplay=1&mute=1';
|
||||||
|
iframe.setAttribute('allow', 'autoplay; encrypted-media');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,11 @@
|
||||||
export function navInvestigation(){
|
export function initSliderBeforeAfter(container = document){
|
||||||
const nav = document.getElementById('nav-investigation');
|
const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
|
||||||
if (!nav) return;
|
slidersBeforeAfter.forEach(function (sliderContainer, index) {
|
||||||
|
const sliderInput = sliderContainer.querySelector('.slider');
|
||||||
const items = nav.querySelectorAll('li');
|
if (sliderInput) {
|
||||||
const headerOffset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--h-header')) || 0;
|
sliderInput.addEventListener('input', (e) => {
|
||||||
|
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
|
||||||
const sections = Array.from(items).map(li => {
|
});
|
||||||
const href = li.querySelector('a')?.getAttribute('href');
|
|
||||||
const target = href ? document.querySelector(href) : null;
|
|
||||||
return { li, target };
|
|
||||||
}).filter(s => s.target);
|
|
||||||
|
|
||||||
const update = () => {
|
|
||||||
const scrollY = window.scrollY + headerOffset;
|
|
||||||
let current = sections[0];
|
|
||||||
|
|
||||||
for (const section of sections) {
|
|
||||||
if (section.target.offsetTop <= scrollY) {
|
|
||||||
current = section;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
items.forEach(li => li.classList.remove('is-selected'));
|
|
||||||
if (current) current.li.classList.add('is-selected');
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('scroll', update, { passive: true });
|
|
||||||
update();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,162 +0,0 @@
|
||||||
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
|
|
||||||
|
|
||||||
const DESKTOP = window.matchMedia('(min-width: 1080px)');
|
|
||||||
|
|
||||||
// Inline du close.svg (assets/icons/close.svg)
|
|
||||||
const CLOSE_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>`;
|
|
||||||
|
|
||||||
let lightboxEl = null;
|
|
||||||
let lightboxSwiper = null;
|
|
||||||
|
|
||||||
function createLightboxDOM() {
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.id = 'lightbox';
|
|
||||||
el.setAttribute('aria-modal', 'true');
|
|
||||||
el.setAttribute('role', 'dialog');
|
|
||||||
el.setAttribute('aria-label', 'Image agrandie');
|
|
||||||
el.setAttribute('inert', '');
|
|
||||||
|
|
||||||
el.innerHTML = `
|
|
||||||
<button id="lightbox-close" aria-label="Fermer">${CLOSE_SVG}</button>
|
|
||||||
<div id="lightbox-swiper" class="swiper">
|
|
||||||
<div class="swiper-wrapper"></div>
|
|
||||||
<div class="swiper-button-prev"></div>
|
|
||||||
<div class="swiper-button-next"></div>
|
|
||||||
<div class="swiper-pagination"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
document.body.appendChild(el);
|
|
||||||
|
|
||||||
el.querySelector('#lightbox-close').addEventListener('click', closeLightbox);
|
|
||||||
|
|
||||||
// Fermeture au clic sur le fond (pas sur le swiper)
|
|
||||||
el.addEventListener('click', (e) => {
|
|
||||||
if (e.target === el) closeLightbox();
|
|
||||||
});
|
|
||||||
|
|
||||||
return el;
|
|
||||||
}
|
|
||||||
|
|
||||||
function ensureLightboxDOM() {
|
|
||||||
if (!lightboxEl) {
|
|
||||||
lightboxEl = createLightboxDOM();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getImageData(figure) {
|
|
||||||
const img = figure.querySelector('img');
|
|
||||||
|
|
||||||
// 1. figcaption dans la figure
|
|
||||||
// 2. p.caption dans la figure (horizontal-gallery)
|
|
||||||
// 3. p.caption sibling de la figure (covers : resource, news-item, impact…)
|
|
||||||
const captionEl =
|
|
||||||
figure.querySelector('figcaption') ||
|
|
||||||
figure.querySelector('p.caption') ||
|
|
||||||
(figure.nextElementSibling?.matches('p.caption') ? figure.nextElementSibling : null);
|
|
||||||
|
|
||||||
return {
|
|
||||||
src: img?.src || '',
|
|
||||||
alt: img?.alt || '',
|
|
||||||
caption: captionEl?.innerHTML || '',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildSlides(images) {
|
|
||||||
const wrapper = lightboxEl.querySelector('.swiper-wrapper');
|
|
||||||
wrapper.innerHTML = '';
|
|
||||||
|
|
||||||
images.forEach(({ src, alt, caption }) => {
|
|
||||||
const slide = document.createElement('div');
|
|
||||||
slide.className = 'swiper-slide';
|
|
||||||
slide.innerHTML = `
|
|
||||||
<figure>
|
|
||||||
<img src="${src}" alt="${alt}">
|
|
||||||
${caption ? `<figcaption>${caption}</figcaption>` : ''}
|
|
||||||
</figure>
|
|
||||||
`;
|
|
||||||
wrapper.appendChild(slide);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function openLightbox(images, startIndex = 0) {
|
|
||||||
ensureLightboxDOM();
|
|
||||||
buildSlides(images);
|
|
||||||
|
|
||||||
const swiperEl = lightboxEl.querySelector('#lightbox-swiper');
|
|
||||||
|
|
||||||
// Détruire l'instance précédente si elle existe
|
|
||||||
if (swiperEl.swiper) {
|
|
||||||
swiperEl.swiper.destroy(true, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
lightboxSwiper = new Swiper(swiperEl, {
|
|
||||||
slidesPerView: 1,
|
|
||||||
initialSlide: startIndex,
|
|
||||||
speed: 400,
|
|
||||||
watchOverflow: true,
|
|
||||||
keyboard: { enabled: true },
|
|
||||||
navigation: {
|
|
||||||
nextEl: swiperEl.querySelector('.swiper-button-next'),
|
|
||||||
prevEl: swiperEl.querySelector('.swiper-button-prev'),
|
|
||||||
},
|
|
||||||
pagination: {
|
|
||||||
el: swiperEl.querySelector('.swiper-pagination'),
|
|
||||||
clickable: true,
|
|
||||||
},
|
|
||||||
a11y: {
|
|
||||||
prevSlideMessage: 'Image précédente',
|
|
||||||
nextSlideMessage: 'Image suivante',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
lightboxEl.removeAttribute('inert');
|
|
||||||
document.body.classList.add('lightbox-open');
|
|
||||||
lightboxEl.querySelector('#lightbox-close').focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeLightbox() {
|
|
||||||
document.body.classList.remove('lightbox-open');
|
|
||||||
lightboxEl.setAttribute('inert', '');
|
|
||||||
}
|
|
||||||
|
|
||||||
function isEligible(figure) {
|
|
||||||
// Exclure les figures dans un <a>
|
|
||||||
if (figure.closest('a')) return false;
|
|
||||||
// Exclure si le parent direct contient un .link-block (card navigable)
|
|
||||||
if (figure.parentElement.querySelector(':scope > .link-block')) return false;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function initLightbox() {
|
|
||||||
// Fermeture à la touche Echap
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Escape' && document.body.classList.contains('lightbox-open')) {
|
|
||||||
closeLightbox();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('figure').forEach((figure) => {
|
|
||||||
if (!isEligible(figure)) return;
|
|
||||||
|
|
||||||
// Marquer les figures éligibles (pour le cursor CSS)
|
|
||||||
figure.setAttribute('data-lightbox', '');
|
|
||||||
|
|
||||||
figure.addEventListener('click', () => {
|
|
||||||
if (!DESKTOP.matches) return;
|
|
||||||
|
|
||||||
const slide = figure.closest('.swiper-slide');
|
|
||||||
|
|
||||||
if (slide) {
|
|
||||||
// Galerie : ouvrir toutes les images du swiper parent
|
|
||||||
const swiperEl = slide.closest('.swiper');
|
|
||||||
const allFigures = [...swiperEl.querySelectorAll('.swiper-slide > figure')];
|
|
||||||
const startIndex = allFigures.indexOf(figure);
|
|
||||||
openLightbox(allFigures.map(getImageData), startIndex);
|
|
||||||
} else {
|
|
||||||
// Image standalone
|
|
||||||
openLightbox([getImageData(figure)], 0);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
const PROXY_URL = '/newsletter/subscribe';
|
|
||||||
|
|
||||||
async function subscribeToNewsletter(email, attributes = {}) {
|
|
||||||
const response = await fetch(PROXY_URL, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ email, attributes }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const error = new Error(
|
|
||||||
data.user_message || data.message || 'Subscription error'
|
|
||||||
);
|
|
||||||
error.code = data.error;
|
|
||||||
error.data = data;
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showMessage(form, text, isError = false) {
|
|
||||||
const oldMessages = form.parentNode.querySelectorAll('.newsletter-message');
|
|
||||||
oldMessages.forEach((msg) => msg.remove());
|
|
||||||
|
|
||||||
const message = document.createElement('p');
|
|
||||||
message.className = 'newsletter-message';
|
|
||||||
message.textContent = text;
|
|
||||||
message.style.marginTop = '0.5rem';
|
|
||||||
message.style.fontSize = '0.9rem';
|
|
||||||
message.style.color = isError
|
|
||||||
? 'var(--color-error, #ef4444)'
|
|
||||||
: 'var(--color-success, #22c55e)';
|
|
||||||
|
|
||||||
form.parentNode.insertBefore(message, form.nextSibling);
|
|
||||||
|
|
||||||
if (!isError) {
|
|
||||||
setTimeout(() => message.remove(), 5000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleFormSubmit(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
const form = event.target;
|
|
||||||
const emailInput = form.querySelector('input[type="email"]');
|
|
||||||
const submitButton = form.querySelector('button[type="submit"]');
|
|
||||||
|
|
||||||
if (!emailInput || !emailInput.value) {
|
|
||||||
const message = document.documentElement.lang.startsWith('en')
|
|
||||||
? 'Please enter a valid email address.'
|
|
||||||
: 'Veuillez entrer une adresse email valide.';
|
|
||||||
showMessage(form, message, true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const email = emailInput.value.trim();
|
|
||||||
submitButton.disabled = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await subscribeToNewsletter(email);
|
|
||||||
const message = document.documentElement.lang.startsWith('en')
|
|
||||||
? 'Thank you! Your subscription has been confirmed.'
|
|
||||||
: 'Merci, votre inscription est confirmée !';
|
|
||||||
showMessage(form, message, false);
|
|
||||||
form.reset();
|
|
||||||
} catch (error) {
|
|
||||||
const isAlreadySubscribed = error.code === 'email_already_exists';
|
|
||||||
showMessage(form, error.message, !isAlreadySubscribed);
|
|
||||||
} finally {
|
|
||||||
submitButton.disabled = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function initNewsletterForms() {
|
|
||||||
const forms = document.querySelectorAll('.form__newsletter');
|
|
||||||
forms.forEach((form) => form.addEventListener('submit', handleFormSubmit));
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', initNewsletterForms);
|
|
||||||
})();
|
|
||||||
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 = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -1,79 +1,61 @@
|
||||||
import { headerToggle, headerScrollVisibility } from './header.js';
|
import { headerToggle, headerScrollVisibility } from './header.js';
|
||||||
import { copyLink } from './share.js';
|
import { copyLink } from './share.js';
|
||||||
import { backToTop } from './back-to-top.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 { themeToggle } from './themeToggle.js';
|
||||||
|
import { initHeroSlider } from './hero-slider.js';
|
||||||
import { playVideo } from './hero-video.js';
|
import { playVideo } from './hero-video.js';
|
||||||
import { initDropdowns } from './dropdown.js';
|
import { initDropdowns } from './dropdown.js';
|
||||||
import { initSwipers } from './swipers.js';
|
import { initSwipers } from './swipers.js';
|
||||||
import { initSliderBeforeAfter} from './sliderBeforeAfter.js';
|
import { initSliderBeforeAfter } from './investigation.js';
|
||||||
import { navInvestigation } from './investigation.js';
|
|
||||||
import { progressBar, scrollBack} from './bottom-bar.js';
|
|
||||||
import { initSort } from './sort.js';
|
|
||||||
import { initLightbox } from './lightbox.js';
|
|
||||||
|
|
||||||
const responsiveMedium = 1080;
|
const responsiveMedium = 1080;
|
||||||
const responsiveSmall = 768;
|
const responsiveSmall = 768;
|
||||||
const responsiveSmallX = 560;
|
|
||||||
|
|
||||||
window.onload = async function () {
|
window.onload = async function () {
|
||||||
console.log("SCRIPT LOADED");
|
console.log("SCRIPT LOADED");
|
||||||
|
|
||||||
headerToggle();
|
headerToggle();
|
||||||
|
panelToggle(responsiveSmall);
|
||||||
themeToggle();
|
themeToggle();
|
||||||
backToTop();
|
|
||||||
|
|
||||||
initSliderBeforeAfter();
|
|
||||||
|
|
||||||
|
tocMobile(responsiveSmall);
|
||||||
copyLink();
|
copyLink();
|
||||||
|
btnGroupMobile(responsiveSmall)
|
||||||
|
bannerStickyDesktop(responsiveSmall);
|
||||||
|
initHeroSlider();
|
||||||
playVideo();
|
playVideo();
|
||||||
initDropdowns(responsiveSmall, responsiveSmallX);
|
initDropdowns(responsiveSmall);
|
||||||
initSwipers();
|
initSwipers();
|
||||||
initLightbox();
|
|
||||||
|
|
||||||
progressBar();
|
initSliderBeforeAfter();
|
||||||
|
|
||||||
|
var elem = document.querySelector('.grid-masonry');
|
||||||
scrollBack();
|
var msnry = null;
|
||||||
navInvestigation();
|
|
||||||
|
|
||||||
var elems = document.querySelectorAll('.grid-masonry');
|
|
||||||
var msnries = [];
|
|
||||||
|
|
||||||
function initMasonry() {
|
function initMasonry() {
|
||||||
if (!elems.length) return;
|
if (!elem) return;
|
||||||
if (window.innerWidth >= responsiveSmall) {
|
if (window.innerWidth >= responsiveSmall) {
|
||||||
elems.forEach(function(elem, i) {
|
if (!msnry) {
|
||||||
if (!msnries[i]) {
|
msnry = new Masonry(elem, {
|
||||||
msnries[i] = new Masonry(elem, {
|
itemSelector: '.card--impact',
|
||||||
itemSelector: '.card--block:not(.is-sort-hidden)',
|
columnWidth: '.grid-sizer',
|
||||||
columnWidth: '.grid-sizer',
|
percentPosition: true,
|
||||||
percentPosition: true,
|
gutter: 26
|
||||||
gutter: 26
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
msnries.forEach(function(msnry, i) {
|
if (msnry) {
|
||||||
if (msnry) {
|
msnry.destroy();
|
||||||
msnry.destroy();
|
msnry = null;
|
||||||
msnries[i] = null;
|
}
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
initMasonry();
|
initMasonry();
|
||||||
window.addEventListener('resize', initMasonry);
|
window.addEventListener('resize', initMasonry);
|
||||||
|
|
||||||
initSort(() => {
|
|
||||||
msnries.forEach(function(msnry) {
|
|
||||||
if (msnry) {
|
|
||||||
msnry.reloadItems();
|
|
||||||
msnry.layout();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
export 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) => {
|
|
||||||
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
const HIDDEN_CLASS = 'is-sort-hidden';
|
|
||||||
|
|
||||||
// Injecte la règle CSS pour masquer les cards filtrées
|
|
||||||
const style = document.createElement('style');
|
|
||||||
style.textContent = `.${HIDDEN_CLASS} { display: none !important; }`;
|
|
||||||
document.head.appendChild(style);
|
|
||||||
|
|
||||||
export function initSort(onLayoutChange) {
|
|
||||||
const pageSort = document.querySelector('.page__sort');
|
|
||||||
if (!pageSort) return;
|
|
||||||
|
|
||||||
const container = document.querySelector('[data-sort-container]');
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
const getCards = () => Array.from(container.querySelectorAll('[data-date]'));
|
|
||||||
|
|
||||||
// — Sort by date —
|
|
||||||
const sortBtn = pageSort.querySelector('[data-sort-type]');
|
|
||||||
if (sortBtn) {
|
|
||||||
sortBtn.addEventListener('click', () => {
|
|
||||||
const dir = sortBtn.getAttribute('data-sort-type') === 'down' ? 'up' : 'down';
|
|
||||||
sortBtn.setAttribute('data-sort-type', dir);
|
|
||||||
|
|
||||||
const cards = getCards();
|
|
||||||
cards.sort((a, b) => {
|
|
||||||
const da = new Date(a.dataset.date || 0);
|
|
||||||
const db = new Date(b.dataset.date || 0);
|
|
||||||
return dir === 'up' ? da - db : db - da;
|
|
||||||
});
|
|
||||||
cards.forEach(c => container.appendChild(c));
|
|
||||||
|
|
||||||
onLayoutChange?.();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// — Filter by category / location —
|
|
||||||
const filterBtns = Array.from(pageSort.querySelectorAll('[data-filter]'));
|
|
||||||
filterBtns.forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
const wasSelected = btn.classList.contains('is-selected');
|
|
||||||
|
|
||||||
// Ferme le dropdown parent
|
|
||||||
btn.closest('.dropdown')?.classList.remove('is-open');
|
|
||||||
|
|
||||||
// Bascule la sélection
|
|
||||||
filterBtns.forEach(b => b.classList.remove('is-selected'));
|
|
||||||
const value = wasSelected ? null : btn.getAttribute('data-filter');
|
|
||||||
if (!wasSelected) btn.classList.add('is-selected');
|
|
||||||
|
|
||||||
// Affiche / cache les cards
|
|
||||||
getCards().forEach(card => {
|
|
||||||
if (!value) {
|
|
||||||
card.classList.remove(HIDDEN_CLASS);
|
|
||||||
} else {
|
|
||||||
const cardFilters = (card.dataset.filter || '').split(' ').filter(Boolean);
|
|
||||||
card.classList.toggle(HIDDEN_CLASS, !cardFilters.includes(value));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
onLayoutChange?.();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -18,7 +18,6 @@ export function initSwipers(container = document) {
|
||||||
slidesPerView: 1,
|
slidesPerView: 1,
|
||||||
spaceBetween: 20,
|
spaceBetween: 20,
|
||||||
speed: 600,
|
speed: 600,
|
||||||
loop: true,
|
|
||||||
|
|
||||||
// Touch/Swipe settings
|
// Touch/Swipe settings
|
||||||
touchRatio: 1,
|
touchRatio: 1,
|
||||||
|
|
|
||||||
13
assets/vendor/swiper/swiper-bundle.min.css
vendored
13
assets/vendor/swiper/swiper-bundle.min.css
vendored
File diff suppressed because one or more lines are too long
14
assets/vendor/swiper/swiper-bundle.min.mjs
vendored
14
assets/vendor/swiper/swiper-bundle.min.mjs
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
/**
|
|
||||||
* Swiper 12.1.2
|
|
||||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
|
||||||
* https://swiperjs.com
|
|
||||||
*
|
|
||||||
* Copyright 2014-2026 Vladimir Kharlampidi
|
|
||||||
*
|
|
||||||
* Released under the MIT License
|
|
||||||
*
|
|
||||||
* Released on: February 18, 2026
|
|
||||||
*/
|
|
||||||
|
|
||||||
import{S as Swiper}from"./shared/swiper-core.min.mjs";import Virtual from"./modules/virtual.min.mjs";import Keyboard from"./modules/keyboard.min.mjs";import Mousewheel from"./modules/mousewheel.min.mjs";import Navigation from"./modules/navigation.min.mjs";import Pagination from"./modules/pagination.min.mjs";import Scrollbar from"./modules/scrollbar.min.mjs";import Parallax from"./modules/parallax.min.mjs";import Zoom from"./modules/zoom.min.mjs";import Controller from"./modules/controller.min.mjs";import A11y from"./modules/a11y.min.mjs";import History from"./modules/history.min.mjs";import HashNavigation from"./modules/hash-navigation.min.mjs";import Autoplay from"./modules/autoplay.min.mjs";import Thumb from"./modules/thumbs.min.mjs";import freeMode from"./modules/free-mode.min.mjs";import Grid from"./modules/grid.min.mjs";import Manipulation from"./modules/manipulation.min.mjs";import EffectFade from"./modules/effect-fade.min.mjs";import EffectCube from"./modules/effect-cube.min.mjs";import EffectFlip from"./modules/effect-flip.min.mjs";import EffectCoverflow from"./modules/effect-coverflow.min.mjs";import EffectCreative from"./modules/effect-creative.min.mjs";import EffectCards from"./modules/effect-cards.min.mjs";const modules=[Virtual,Keyboard,Mousewheel,Navigation,Pagination,Scrollbar,Parallax,Zoom,Controller,A11y,History,HashNavigation,Autoplay,Thumb,freeMode,Grid,Manipulation,EffectFade,EffectCube,EffectFlip,EffectCoverflow,EffectCreative,EffectCards];Swiper.use(modules);export{Swiper,Swiper as default};
|
|
||||||
//# sourceMappingURL=swiper-bundle.min.mjs.map
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
name: Titre
|
|
||||||
icon: title
|
|
||||||
wysiwyg: true
|
|
||||||
preview: heading
|
|
||||||
fields:
|
|
||||||
level:
|
|
||||||
label: Niveau
|
|
||||||
type: toggles
|
|
||||||
empty: false
|
|
||||||
default: "h4"
|
|
||||||
labels: false
|
|
||||||
options:
|
|
||||||
- value: h4
|
|
||||||
icon: h4
|
|
||||||
text: H4
|
|
||||||
- value: h5
|
|
||||||
icon: h5
|
|
||||||
text: H5
|
|
||||||
text:
|
|
||||||
label: Texte
|
|
||||||
type: writer
|
|
||||||
inline: true
|
|
||||||
placeholder: Titre…
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
name: Insert (conclusion, hightlight, notes)
|
|
||||||
icon: text
|
|
||||||
preview: fields
|
|
||||||
fields:
|
|
||||||
title:
|
|
||||||
label: Titre
|
|
||||||
type: text
|
|
||||||
width: 2/3
|
|
||||||
level:
|
|
||||||
label: Niveau
|
|
||||||
type: select
|
|
||||||
default: h3
|
|
||||||
width: 1/3
|
|
||||||
options:
|
|
||||||
h3: H3
|
|
||||||
h4: H4
|
|
||||||
h5: H5
|
|
||||||
text:
|
|
||||||
type: writer
|
|
||||||
size: huge
|
|
||||||
marks:
|
|
||||||
- bold
|
|
||||||
- italic
|
|
||||||
- underline
|
|
||||||
- link
|
|
||||||
- strike
|
|
||||||
nodes:
|
|
||||||
- bulletList
|
|
||||||
placeholder: Texte d'insert...
|
|
||||||
|
|
@ -1,12 +1,9 @@
|
||||||
label: Enquêtes
|
label: Enquêtes
|
||||||
type: pages
|
type: pages
|
||||||
parent: page('enquetes')
|
parent: page('enquetes')
|
||||||
template: investigation
|
|
||||||
layout: cards
|
layout: cards
|
||||||
text: "{{ page.title }}"
|
text: "{{ page.title }}, {{ page.subtitle }}"
|
||||||
info: "{{ page.incidentConsequences }} à {{ page.incidentLocation }}"
|
info: "{{ page.incidentConsequences }} à {{ page.incidentLocation }}"
|
||||||
size: huge
|
|
||||||
search: true
|
|
||||||
image:
|
image:
|
||||||
cover: true
|
cover: true
|
||||||
ratio: 16/9
|
ratio: 16/9
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,4 @@ tabs:
|
||||||
contentTab:
|
contentTab:
|
||||||
label: Contenu
|
label: Contenu
|
||||||
icon: page
|
icon: page
|
||||||
fields:
|
|
||||||
title:
|
|
||||||
label: Titre
|
|
||||||
type: text
|
|
||||||
required: true
|
|
||||||
body:
|
|
||||||
label: Corps
|
|
||||||
type: blocks
|
|
||||||
fieldsets:
|
|
||||||
- heading-sub
|
|
||||||
- text
|
|
||||||
- image
|
|
||||||
- beforeafter
|
|
||||||
- video
|
|
||||||
- gallery
|
|
||||||
- insert
|
|
||||||
seo: seo/page
|
seo: seo/page
|
||||||
|
|
|
||||||
|
|
@ -3,17 +3,4 @@ title: Contact
|
||||||
tabs:
|
tabs:
|
||||||
contentTab:
|
contentTab:
|
||||||
label: Contenu
|
label: Contenu
|
||||||
icon: page
|
|
||||||
fields:
|
|
||||||
title:
|
|
||||||
label: Titre
|
|
||||||
type: text
|
|
||||||
required: true
|
|
||||||
body:
|
|
||||||
label: Corps
|
|
||||||
type: blocks
|
|
||||||
fieldsets:
|
|
||||||
- heading
|
|
||||||
- text
|
|
||||||
- image
|
|
||||||
seo: seo/page
|
seo: seo/page
|
||||||
|
|
|
||||||
|
|
@ -24,18 +24,6 @@ columns:
|
||||||
methodologies:
|
methodologies:
|
||||||
label: Méthodologies
|
label: Méthodologies
|
||||||
type: tags
|
type: tags
|
||||||
impactCategories:
|
|
||||||
label: Catégories des impacts
|
|
||||||
type: tags
|
|
||||||
newsCategories:
|
|
||||||
label: Catégories des brèves
|
|
||||||
type: tags
|
|
||||||
projectCategories:
|
|
||||||
label: Catégories des projets
|
|
||||||
type: tags
|
|
||||||
resourceCategories:
|
|
||||||
label: Catégories des ressources
|
|
||||||
type: tags
|
|
||||||
robots:
|
robots:
|
||||||
type: hidden
|
type: hidden
|
||||||
default: noindex, nofollow
|
default: noindex, nofollow
|
||||||
|
|
|
||||||
|
|
@ -5,37 +5,14 @@ tabs:
|
||||||
label: Contenu
|
label: Contenu
|
||||||
icon: page
|
icon: page
|
||||||
fields:
|
fields:
|
||||||
sections:
|
mainBaseline:
|
||||||
label: Sections
|
label: Baseline
|
||||||
type: structure
|
type: text
|
||||||
fields:
|
help: À gauche des enquêtes.
|
||||||
baseline:
|
width: 1/2
|
||||||
label: Baseline (colonne gauche)
|
impactsBaseline:
|
||||||
type: text
|
label: Phrase d'introduction des impacts
|
||||||
width: 1/1
|
type: text
|
||||||
buttonText:
|
help: À gauche des impacts.
|
||||||
label: Texte du bouton
|
width: 1/2
|
||||||
type: text
|
|
||||||
width: 1/2
|
|
||||||
buttonLink:
|
|
||||||
label: Lien du bouton
|
|
||||||
type: url
|
|
||||||
width: 1/2
|
|
||||||
contentType:
|
|
||||||
label: Type de contenu
|
|
||||||
type: select
|
|
||||||
required: true
|
|
||||||
options:
|
|
||||||
investigations: "Enquêtes"
|
|
||||||
impacts: Impacts
|
|
||||||
packages: Dossiers
|
|
||||||
projects: "Projets (Lab)"
|
|
||||||
news: "Brèves"
|
|
||||||
width: 1/2
|
|
||||||
count:
|
|
||||||
label: "Nombre d'éléments (min. 4)"
|
|
||||||
type: number
|
|
||||||
min: 4
|
|
||||||
default: 6
|
|
||||||
width: 1/2
|
|
||||||
seo: seo/page
|
seo: seo/page
|
||||||
|
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
title: Impact médiatique
|
|
||||||
|
|
||||||
fields:
|
|
||||||
linkedInvestigation:
|
|
||||||
label: Enquête liée
|
|
||||||
type: pages
|
|
||||||
query: page('enquetes').children.listed
|
|
||||||
multiple: false
|
|
||||||
layout: list
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.created }}"
|
|
||||||
width: 1/2
|
|
||||||
entries:
|
|
||||||
label: Articles et reprises
|
|
||||||
type: entries
|
|
||||||
width: 1/2
|
|
||||||
field:
|
|
||||||
type: url
|
|
||||||
|
|
@ -2,63 +2,9 @@ title: Impact
|
||||||
|
|
||||||
tabs:
|
tabs:
|
||||||
contentTab:
|
contentTab:
|
||||||
label: Contenu
|
linkedInvestigations:
|
||||||
icon: page
|
type: pages
|
||||||
columns:
|
template: investigation
|
||||||
- width: 2/6
|
linkedMedias:
|
||||||
sections:
|
type: url
|
||||||
createdSection:
|
|
||||||
type: fields
|
|
||||||
fields:
|
|
||||||
created:
|
|
||||||
label: Date de publication
|
|
||||||
type: date
|
|
||||||
display: DD / MM / YYYY
|
|
||||||
default: today
|
|
||||||
width: 1/2
|
|
||||||
category:
|
|
||||||
label: Catégorie
|
|
||||||
type: tags
|
|
||||||
max: 1
|
|
||||||
options: query
|
|
||||||
query: page('database').impactCategories.split
|
|
||||||
cover:
|
|
||||||
label: Image de couverture
|
|
||||||
type: files
|
|
||||||
multiple: false
|
|
||||||
layout: cards
|
|
||||||
image:
|
|
||||||
ratio: 12/7
|
|
||||||
cover: true
|
|
||||||
help: Optionnelle — utilisée dans la liste des impacts. Format 16/9.
|
|
||||||
|
|
||||||
- width: 4/6
|
|
||||||
fields:
|
|
||||||
chapo:
|
|
||||||
label: Chapeau
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
marks:
|
|
||||||
- bold
|
|
||||||
- italic
|
|
||||||
linkedInvestigations:
|
|
||||||
label: Enquêtes liées
|
|
||||||
type: pages
|
|
||||||
query: page('enquetes').children.listed
|
|
||||||
multiple: true
|
|
||||||
layout: list
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.created }}"
|
|
||||||
body:
|
|
||||||
label: Corps
|
|
||||||
type: blocks
|
|
||||||
fieldsets:
|
|
||||||
- heading
|
|
||||||
- text
|
|
||||||
- image
|
|
||||||
- beforeafter
|
|
||||||
- video
|
|
||||||
- gallery
|
|
||||||
- insert
|
|
||||||
|
|
||||||
seo: seo/page
|
seo: seo/page
|
||||||
|
|
|
||||||
|
|
@ -3,26 +3,4 @@ title: Impacts
|
||||||
tabs:
|
tabs:
|
||||||
contentTab:
|
contentTab:
|
||||||
label: Contenu
|
label: Contenu
|
||||||
icon: page
|
|
||||||
columns:
|
|
||||||
- width: 1/3
|
|
||||||
fields:
|
|
||||||
chapo:
|
|
||||||
label: Introduction
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
buttons: false
|
|
||||||
- width: 2/3
|
|
||||||
sections:
|
|
||||||
impactsSection:
|
|
||||||
type: pages
|
|
||||||
label: Liste des impacts
|
|
||||||
templates:
|
|
||||||
- impact
|
|
||||||
- impact-media
|
|
||||||
layout: list
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.category }} — {{ page.created.toDate('d/m/Y') }}"
|
|
||||||
sortBy: created desc
|
|
||||||
|
|
||||||
seo: seo/page
|
seo: seo/page
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,4 @@
|
||||||
title: Investigation
|
title: Investigation
|
||||||
status:
|
|
||||||
draft:
|
|
||||||
label: Brouillon
|
|
||||||
text: La page est accessible uniquement pour les éditeurs connectés ou via un lien secret
|
|
||||||
listed:
|
|
||||||
label: Public
|
|
||||||
text: La page est accessible par tout le monde
|
|
||||||
|
|
||||||
tabs:
|
tabs:
|
||||||
contentTab:
|
contentTab:
|
||||||
|
|
@ -31,7 +24,7 @@ tabs:
|
||||||
image:
|
image:
|
||||||
ratio: 12/7
|
ratio: 12/7
|
||||||
cover: true
|
cover: true
|
||||||
help: Image utilisée dans les listes d'enquêtes. Format 16/9.
|
help: Image utilisée dans les listes d'enquêtes
|
||||||
- width: 4/6
|
- width: 4/6
|
||||||
fields:
|
fields:
|
||||||
chapo:
|
chapo:
|
||||||
|
|
@ -39,24 +32,37 @@ tabs:
|
||||||
type: writer
|
type: writer
|
||||||
nodes: false
|
nodes: false
|
||||||
buttons: false
|
buttons: false
|
||||||
|
heroType:
|
||||||
|
label: Type de hero
|
||||||
|
type: select
|
||||||
|
default: image
|
||||||
|
options:
|
||||||
|
image: Image simple
|
||||||
|
video: Vidéo
|
||||||
|
default: image
|
||||||
|
width: 1/3
|
||||||
|
heroImages:
|
||||||
|
label: Images hero
|
||||||
|
type: files
|
||||||
|
multiple: true
|
||||||
|
layout: cards
|
||||||
|
width: 1/3
|
||||||
|
when:
|
||||||
|
heroType: image
|
||||||
videoPreview:
|
videoPreview:
|
||||||
label: Preview vidéo
|
label: Preview
|
||||||
type: files
|
type: files
|
||||||
multiple: false
|
multiple: false
|
||||||
help: "Extrait joué en autoplay muet. À remplir avec l'URL vidéo — les deux champs vont ensemble."
|
help: Extrait joué en autoplay muet.
|
||||||
width: 1/2
|
width: 1/3
|
||||||
|
when:
|
||||||
|
heroType: video
|
||||||
videoUrl:
|
videoUrl:
|
||||||
label: URL vidéo complète (YouTube embed)
|
label: URL vidéo complète (YouTube embed)
|
||||||
type: url
|
type: url
|
||||||
width: 1/2
|
width: 1/3
|
||||||
help: "À remplir avec la preview — les deux champs vont ensemble."
|
when:
|
||||||
heroCaption:
|
heroType: video
|
||||||
label: Légende du hero
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
marks:
|
|
||||||
- italic
|
|
||||||
help: "Recommandé : 140 caractères max"
|
|
||||||
body:
|
body:
|
||||||
label: Corps
|
label: Corps
|
||||||
type: layout
|
type: layout
|
||||||
|
|
@ -71,7 +77,6 @@ tabs:
|
||||||
- video
|
- video
|
||||||
# - horizontal-gallery
|
# - horizontal-gallery
|
||||||
- gallery
|
- gallery
|
||||||
- insert
|
|
||||||
metadataTab:
|
metadataTab:
|
||||||
label: Métadonnées
|
label: Métadonnées
|
||||||
icon: table
|
icon: table
|
||||||
|
|
@ -122,7 +127,7 @@ tabs:
|
||||||
team:
|
team:
|
||||||
label: Équipe Index
|
label: Équipe Index
|
||||||
type: structure
|
type: structure
|
||||||
help: Le « rôle » s’affiche entre parenthèses
|
width: 2/4
|
||||||
columns:
|
columns:
|
||||||
name:
|
name:
|
||||||
label: Nom
|
label: Nom
|
||||||
|
|
|
||||||
|
|
@ -3,41 +3,6 @@ title: Investigations
|
||||||
tabs:
|
tabs:
|
||||||
contentTab:
|
contentTab:
|
||||||
label: Contenu
|
label: Contenu
|
||||||
icon: page
|
sections:
|
||||||
columns:
|
investigations: fields/investigations
|
||||||
- width: 1/3
|
|
||||||
fields:
|
|
||||||
chapo:
|
|
||||||
label: Introduction
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
buttons: false
|
|
||||||
- width: 2/3
|
|
||||||
sections:
|
|
||||||
investigations: fields/investigations
|
|
||||||
starredTab:
|
|
||||||
label: En avant
|
|
||||||
icon: star
|
|
||||||
fields:
|
|
||||||
featuredInvestigation:
|
|
||||||
label: À la une
|
|
||||||
type: pages
|
|
||||||
query: page('enquetes').children.listed
|
|
||||||
multiple: false
|
|
||||||
max: 1
|
|
||||||
layout: list
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.incidentDate }}"
|
|
||||||
width: 1/3
|
|
||||||
help: Affichée en tête et en plus grand, avec son média de couverture (vidéo ou image).
|
|
||||||
pinnedInvestigations:
|
|
||||||
label: Enquêtes épinglées
|
|
||||||
type: pages
|
|
||||||
query: page('enquetes').children.listed
|
|
||||||
multiple: true
|
|
||||||
layout: list
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.incidentDate }}"
|
|
||||||
width: 2/3
|
|
||||||
help: Affichées après l'enquête "à la une", avant les autres mais dans le même format, simplement marquées par une 📌.
|
|
||||||
seo: seo/page
|
seo: seo/page
|
||||||
|
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
title: Laboratoire
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
label: Contenu
|
|
||||||
icon: page
|
|
||||||
columns:
|
|
||||||
- width: 1/3
|
|
||||||
fields:
|
|
||||||
chapo:
|
|
||||||
label: Introduction
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
buttons: false
|
|
||||||
- width: 2/3
|
|
||||||
sections:
|
|
||||||
projectsSection:
|
|
||||||
type: pages
|
|
||||||
label: Liste des projets
|
|
||||||
template: project
|
|
||||||
create: project
|
|
||||||
layout: list
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.category }} — {{ page.created.toDate('d/m/Y') }}"
|
|
||||||
sortBy: created desc
|
|
||||||
|
|
||||||
seo: seo/page
|
|
||||||
6
site/blueprints/pages/laboratory.yml
Normal file
6
site/blueprints/pages/laboratory.yml
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
title: Laboratoire
|
||||||
|
|
||||||
|
tabs:
|
||||||
|
contentTab:
|
||||||
|
label: Contenu
|
||||||
|
seo: seo/page
|
||||||
|
|
@ -3,37 +3,4 @@ title: Mentions légales
|
||||||
tabs:
|
tabs:
|
||||||
contentTab:
|
contentTab:
|
||||||
label: Contenu
|
label: Contenu
|
||||||
icon: page
|
|
||||||
fields:
|
|
||||||
title:
|
|
||||||
label: Titre
|
|
||||||
type: text
|
|
||||||
required: true
|
|
||||||
definitions:
|
|
||||||
label: Tableau de définitions
|
|
||||||
help: Affiché sous forme de liste en deux colonnes (terme — définition)
|
|
||||||
type: structure
|
|
||||||
fields:
|
|
||||||
term:
|
|
||||||
label: Terme
|
|
||||||
type: text
|
|
||||||
width: 1/3
|
|
||||||
definition:
|
|
||||||
label: Définition
|
|
||||||
type: writer
|
|
||||||
width: 2/3
|
|
||||||
marks:
|
|
||||||
- bold
|
|
||||||
- italic
|
|
||||||
- highlight
|
|
||||||
- link
|
|
||||||
nodes:
|
|
||||||
- bulletList
|
|
||||||
- orderedList
|
|
||||||
body:
|
|
||||||
label: Corps
|
|
||||||
type: blocks
|
|
||||||
fieldsets:
|
|
||||||
- heading-sub
|
|
||||||
- text
|
|
||||||
seo: seo/page
|
seo: seo/page
|
||||||
|
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
title: Brève
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
label: Contenu
|
|
||||||
icon: page
|
|
||||||
columns:
|
|
||||||
- width: 2/6
|
|
||||||
sections:
|
|
||||||
createdSection:
|
|
||||||
type: fields
|
|
||||||
fields:
|
|
||||||
created:
|
|
||||||
label: Date de publication
|
|
||||||
type: date
|
|
||||||
display: DD / MM / YYYY
|
|
||||||
default: today
|
|
||||||
width: 1/2
|
|
||||||
category:
|
|
||||||
label: Catégorie
|
|
||||||
type: tags
|
|
||||||
max: 1
|
|
||||||
options: query
|
|
||||||
query: page('database').newsCategories.split
|
|
||||||
cover:
|
|
||||||
label: Image de couverture
|
|
||||||
type: files
|
|
||||||
multiple: false
|
|
||||||
layout: cards
|
|
||||||
image:
|
|
||||||
ratio: 12/7
|
|
||||||
cover: true
|
|
||||||
help: Optionnelle — utilisée dans la liste des brèves. Format 16/9.
|
|
||||||
|
|
||||||
- width: 4/6
|
|
||||||
fields:
|
|
||||||
chapo:
|
|
||||||
label: Chapeau
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
marks:
|
|
||||||
- bold
|
|
||||||
- italic
|
|
||||||
linkedInvestigations:
|
|
||||||
label: Enquêtes liées
|
|
||||||
type: pages
|
|
||||||
query: page('enquetes').children.listed
|
|
||||||
multiple: true
|
|
||||||
layout: list
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.created }}"
|
|
||||||
body:
|
|
||||||
label: Corps
|
|
||||||
type: blocks
|
|
||||||
fieldsets:
|
|
||||||
- heading
|
|
||||||
- text
|
|
||||||
- image
|
|
||||||
- beforeafter
|
|
||||||
- video
|
|
||||||
- gallery
|
|
||||||
- insert
|
|
||||||
|
|
||||||
seo: seo/page
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
title: Brèves
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
label: Contenu
|
|
||||||
icon: page
|
|
||||||
columns:
|
|
||||||
- width: 1/3
|
|
||||||
fields:
|
|
||||||
chapo:
|
|
||||||
label: Introduction
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
buttons: false
|
|
||||||
- width: 2/3
|
|
||||||
sections:
|
|
||||||
newsSection:
|
|
||||||
type: pages
|
|
||||||
label: Liste des brèves
|
|
||||||
template: news-item
|
|
||||||
create: news-item
|
|
||||||
layout: list
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.category }} — {{ page.created.toDate('d/m/Y') }}"
|
|
||||||
sortBy: created desc
|
|
||||||
|
|
||||||
seo: seo/page
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
title: Newsletter
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
label: Contenu
|
|
||||||
icon: email
|
|
||||||
fields:
|
|
||||||
title:
|
|
||||||
label: Titre
|
|
||||||
type: text
|
|
||||||
required: true
|
|
||||||
chapo:
|
|
||||||
label: Chapeau
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
marks:
|
|
||||||
- bold
|
|
||||||
- italic
|
|
||||||
- underline
|
|
||||||
- link
|
|
||||||
details:
|
|
||||||
label: Détails
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
marks:
|
|
||||||
- bold
|
|
||||||
- italic
|
|
||||||
- underline
|
|
||||||
- link
|
|
||||||
seo: seo/page
|
|
||||||
|
|
@ -9,35 +9,18 @@ tabs:
|
||||||
label: Visuel de couverture
|
label: Visuel de couverture
|
||||||
type: files
|
type: files
|
||||||
multiple: false
|
multiple: false
|
||||||
required: true
|
|
||||||
layout: cards
|
layout: cards
|
||||||
width: 1/3
|
width: 1/3
|
||||||
image:
|
image:
|
||||||
ratio: 12/7
|
ratio: 12/7
|
||||||
cover: true
|
cover: true
|
||||||
help: Image utilisée dans la liste des dossiers. Format 16/9.
|
help: Image utilisée dans la liste des dossiers
|
||||||
description:
|
description:
|
||||||
label: Description
|
label: Description
|
||||||
type: writer
|
type: writer
|
||||||
width: 2/3
|
width: 2/3
|
||||||
linkedContent:
|
linkedContent:
|
||||||
label: Enquêtes
|
label: Contenu
|
||||||
type: pages
|
type: pages
|
||||||
query: site.find('enquetes').children
|
query: site.find('enquetes').children
|
||||||
linkedImpacts:
|
|
||||||
label: Impacts
|
|
||||||
type: pages
|
|
||||||
query: site.find('impacts').children
|
|
||||||
linkedResources:
|
|
||||||
label: Ressources
|
|
||||||
type: pages
|
|
||||||
query: site.find('ressources').children
|
|
||||||
linkedNews:
|
|
||||||
label: Brèves
|
|
||||||
type: pages
|
|
||||||
query: site.find('news').children
|
|
||||||
linkedProjects:
|
|
||||||
label: Projets (Lab)
|
|
||||||
type: pages
|
|
||||||
query: site.find('laboratoire').children
|
|
||||||
seo: seo/page
|
seo: seo/page
|
||||||
|
|
|
||||||
|
|
@ -3,27 +3,17 @@ title: Dossiers
|
||||||
tabs:
|
tabs:
|
||||||
contentTab:
|
contentTab:
|
||||||
label: Contenu
|
label: Contenu
|
||||||
icon: page
|
sections:
|
||||||
columns:
|
packages:
|
||||||
- width: 1/3
|
label: Dossiers
|
||||||
fields:
|
type: pages
|
||||||
chapo:
|
text: "{{ page.title }}"
|
||||||
label: Introduction
|
info: "{{ page.linkedContent.toPages.count }} contenus"
|
||||||
type: writer
|
layout: cards
|
||||||
nodes: false
|
size: huge
|
||||||
buttons: false
|
search: true
|
||||||
- width: 2/3
|
image:
|
||||||
sections:
|
cover: true
|
||||||
packages:
|
ratio: 12/7
|
||||||
label: Dossiers
|
template: package
|
||||||
type: pages
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.linkedContent.toPages.count }} contenus"
|
|
||||||
layout: cards
|
|
||||||
size: huge
|
|
||||||
search: true
|
|
||||||
image:
|
|
||||||
cover: true
|
|
||||||
ratio: 12/7
|
|
||||||
template: package
|
|
||||||
seo: seo/page
|
seo: seo/page
|
||||||
|
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
title: Politique de confidentialité
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
label: Contenu
|
|
||||||
icon: page
|
|
||||||
fields:
|
|
||||||
title:
|
|
||||||
label: Titre
|
|
||||||
type: text
|
|
||||||
required: true
|
|
||||||
body:
|
|
||||||
label: Corps
|
|
||||||
type: blocks
|
|
||||||
fieldsets:
|
|
||||||
- heading-sub
|
|
||||||
- text
|
|
||||||
seo: seo/page
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
title: Projet
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
label: Contenu
|
|
||||||
icon: page
|
|
||||||
columns:
|
|
||||||
- width: 2/6
|
|
||||||
sections:
|
|
||||||
createdSection:
|
|
||||||
type: fields
|
|
||||||
fields:
|
|
||||||
created:
|
|
||||||
label: Date de publication
|
|
||||||
type: date
|
|
||||||
display: DD / MM / YYYY
|
|
||||||
default: today
|
|
||||||
width: 1/2
|
|
||||||
category:
|
|
||||||
label: Catégorie
|
|
||||||
type: tags
|
|
||||||
max: 1
|
|
||||||
options: query
|
|
||||||
query: page('database').projectCategories.split
|
|
||||||
cover:
|
|
||||||
label: Image de couverture
|
|
||||||
type: files
|
|
||||||
multiple: false
|
|
||||||
layout: cards
|
|
||||||
image:
|
|
||||||
ratio: 12/7
|
|
||||||
cover: true
|
|
||||||
help: Optionnelle — utilisée dans la liste des projets. Format 16/9.
|
|
||||||
|
|
||||||
- width: 4/6
|
|
||||||
fields:
|
|
||||||
chapo:
|
|
||||||
label: Chapeau
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
marks:
|
|
||||||
- bold
|
|
||||||
- italic
|
|
||||||
linkedInvestigations:
|
|
||||||
label: Enquêtes liées
|
|
||||||
type: pages
|
|
||||||
query: page('enquetes').children.listed
|
|
||||||
multiple: true
|
|
||||||
layout: list
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.created }}"
|
|
||||||
body:
|
|
||||||
label: Corps
|
|
||||||
type: blocks
|
|
||||||
fieldsets:
|
|
||||||
- heading
|
|
||||||
- text
|
|
||||||
- image
|
|
||||||
- beforeafter
|
|
||||||
- video
|
|
||||||
- gallery
|
|
||||||
- insert
|
|
||||||
|
|
||||||
seo: seo/page
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
title: Ressource
|
|
||||||
|
|
||||||
tabs:
|
|
||||||
contentTab:
|
|
||||||
label: Contenu
|
|
||||||
icon: page
|
|
||||||
columns:
|
|
||||||
- width: 2/6
|
|
||||||
sections:
|
|
||||||
createdSection:
|
|
||||||
type: fields
|
|
||||||
fields:
|
|
||||||
created:
|
|
||||||
label: Date de publication
|
|
||||||
type: date
|
|
||||||
display: DD / MM / YYYY
|
|
||||||
default: today
|
|
||||||
width: 1/2
|
|
||||||
category:
|
|
||||||
label: Catégorie
|
|
||||||
type: tags
|
|
||||||
max: 1
|
|
||||||
options: query
|
|
||||||
query: page('database').resourceCategories.split
|
|
||||||
cover:
|
|
||||||
label: Image de couverture
|
|
||||||
type: files
|
|
||||||
multiple: false
|
|
||||||
layout: cards
|
|
||||||
image:
|
|
||||||
ratio: 12/7
|
|
||||||
cover: true
|
|
||||||
help: Optionnelle — utilisée dans la liste des ressources. Format 16/9.
|
|
||||||
|
|
||||||
- width: 4/6
|
|
||||||
fields:
|
|
||||||
chapo:
|
|
||||||
label: Chapeau
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
marks:
|
|
||||||
- bold
|
|
||||||
- italic
|
|
||||||
linkedInvestigations:
|
|
||||||
label: Enquêtes liées
|
|
||||||
type: pages
|
|
||||||
query: page('enquetes').children.listed
|
|
||||||
multiple: true
|
|
||||||
layout: list
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.created }}"
|
|
||||||
body:
|
|
||||||
label: Corps
|
|
||||||
type: blocks
|
|
||||||
fieldsets:
|
|
||||||
- heading
|
|
||||||
- text
|
|
||||||
- image
|
|
||||||
- beforeafter
|
|
||||||
- video
|
|
||||||
- gallery
|
|
||||||
- insert
|
|
||||||
|
|
||||||
seo: seo/page
|
|
||||||
|
|
@ -1,27 +1,7 @@
|
||||||
title: Ressources
|
title: Resources
|
||||||
|
|
||||||
tabs:
|
tabs:
|
||||||
contentTab:
|
contentTab:
|
||||||
label: Contenu
|
label: Contenu
|
||||||
icon: page
|
icon: page
|
||||||
columns:
|
|
||||||
- width: 1/3
|
|
||||||
fields:
|
|
||||||
chapo:
|
|
||||||
label: Introduction
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
buttons: false
|
|
||||||
- width: 2/3
|
|
||||||
sections:
|
|
||||||
resourcesSection:
|
|
||||||
type: pages
|
|
||||||
label: Liste des ressources
|
|
||||||
template: resource
|
|
||||||
create: resource
|
|
||||||
layout: list
|
|
||||||
text: "{{ page.title }}"
|
|
||||||
info: "{{ page.category }} — {{ page.created.toDate('d/m/Y') }}"
|
|
||||||
sortBy: created desc
|
|
||||||
|
|
||||||
seo: seo/page
|
seo: seo/page
|
||||||
|
|
|
||||||
46
site/blueprints/pages/support.yml
Normal file
46
site/blueprints/pages/support.yml
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
title: Nous soutenir
|
||||||
|
|
||||||
|
tabs:
|
||||||
|
contentTab:
|
||||||
|
sections:
|
||||||
|
supportFields:
|
||||||
|
type: fields
|
||||||
|
fields:
|
||||||
|
heroHeadline:
|
||||||
|
type: headline
|
||||||
|
label: Hero
|
||||||
|
heroMedia:
|
||||||
|
label: Media de couverture
|
||||||
|
type: files
|
||||||
|
multiple: false
|
||||||
|
layout: cards
|
||||||
|
help: image ou vidéo affichée dans le héro, sous la phrase d'accroche
|
||||||
|
heroCatchPhrase:
|
||||||
|
label: Phrase d'accroche
|
||||||
|
type: text
|
||||||
|
heroBaseline:
|
||||||
|
label: Baseline
|
||||||
|
type: text
|
||||||
|
donorLine:
|
||||||
|
type: line
|
||||||
|
donorHeadline:
|
||||||
|
label: Dons
|
||||||
|
type: headline
|
||||||
|
donorCatchPhrase:
|
||||||
|
label: Phrase d'accroche
|
||||||
|
type: text
|
||||||
|
FAQLine:
|
||||||
|
type: line
|
||||||
|
FAQHeadline:
|
||||||
|
label: Questions fréquentes
|
||||||
|
type: headline
|
||||||
|
FAQQuestions:
|
||||||
|
label: Questions / réponses
|
||||||
|
type: structure
|
||||||
|
fields:
|
||||||
|
question:
|
||||||
|
type: text
|
||||||
|
answer:
|
||||||
|
label: Réponse
|
||||||
|
type: text
|
||||||
|
seo: seo/page
|
||||||
|
|
@ -4,11 +4,6 @@ return [
|
||||||
'debug' => true,
|
'debug' => true,
|
||||||
'languages' => true,
|
'languages' => true,
|
||||||
'date.handler' => 'intl',
|
'date.handler' => 'intl',
|
||||||
// 'auth' => [
|
|
||||||
// 'methods' => [
|
|
||||||
// 'password' => ['2fa' => true]
|
|
||||||
// ]
|
|
||||||
// ],
|
|
||||||
'thumbs' => [
|
'thumbs' => [
|
||||||
'quality' => 80,
|
'quality' => 80,
|
||||||
'presets' => [
|
'presets' => [
|
||||||
|
|
@ -22,52 +17,15 @@ return [
|
||||||
'srcsets' => [
|
'srcsets' => [
|
||||||
'default' => [200, 400, 600, 800, 1024, 1440, 2048],
|
'default' => [200, 400, 600, 800, 1024, 1440, 2048],
|
||||||
'webp' => [
|
'webp' => [
|
||||||
'300w' => ['width' => 300, 'format' => 'webp'],
|
'300w' => ['width' => 300 * 1.2, 'format' => 'webp'],
|
||||||
'600w' => ['width' => 600, 'format' => 'webp'],
|
'600w' => ['width' => 600 * 1.2, 'format' => 'webp'],
|
||||||
'900w' => ['width' => 900, 'format' => 'webp'],
|
'900w' => ['width' => 900 * 1.2, 'format' => 'webp'],
|
||||||
'1200w' => ['width' => 1200, 'format' => 'webp'],
|
'1200w' => ['width' => 1200 * 1.2, 'format' => 'webp'],
|
||||||
],
|
|
||||||
// Cover cards investigations : 465px fixe ≥1000px, 50vw 728–1000px, 100vw <728px
|
|
||||||
// Widths couvrent 1x et 2x (retina) pour chaque breakpoint
|
|
||||||
'cover-card' => [465, 728, 930, 1000, 1456],
|
|
||||||
'cover-card-webp' => [
|
|
||||||
'465w' => ['width' => 465, 'format' => 'webp'],
|
|
||||||
'728w' => ['width' => 728, 'format' => 'webp'],
|
|
||||||
'930w' => ['width' => 930, 'format' => 'webp'],
|
|
||||||
'1000w' => ['width' => 1000, 'format' => 'webp'],
|
|
||||||
'1456w' => ['width' => 1456, 'format' => 'webp'],
|
|
||||||
],
|
|
||||||
// Hero cover investigation : 940px fixe ≥1000px, 90vw en dessous
|
|
||||||
'cover-hero' => [680, 940, 1200, 1880],
|
|
||||||
'cover-hero-webp' => [
|
|
||||||
'680w' => ['width' => 680, 'format' => 'webp'],
|
|
||||||
'940w' => ['width' => 940, 'format' => 'webp'],
|
|
||||||
'1200w' => ['width' => 1200, 'format' => 'webp'],
|
|
||||||
'1880w' => ['width' => 1880, 'format' => 'webp'],
|
|
||||||
],
|
|
||||||
// Body 1 colonne : 100vw
|
|
||||||
'body-full' => [750, 1000, 1440, 1880],
|
|
||||||
'body-full-webp' => [
|
|
||||||
'750w' => ['width' => 750, 'format' => 'webp'],
|
|
||||||
'1000w' => ['width' => 1000, 'format' => 'webp'],
|
|
||||||
'1440w' => ['width' => 1440, 'format' => 'webp'],
|
|
||||||
'1880w' => ['width' => 1880, 'format' => 'webp'],
|
|
||||||
],
|
|
||||||
// Body 2 colonnes : 50vw ≥768px, 90vw en dessous
|
|
||||||
'body-half' => [680, 720, 1000, 1380, 1440],
|
|
||||||
'body-half-webp' => [
|
|
||||||
'680w' => ['width' => 680, 'format' => 'webp'],
|
|
||||||
'720w' => ['width' => 720, 'format' => 'webp'],
|
|
||||||
'1000w' => ['width' => 1000, 'format' => 'webp'],
|
|
||||||
'1380w' => ['width' => 1380, 'format' => 'webp'],
|
|
||||||
'1440w' => ['width' => 1440, 'format' => 'webp'],
|
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
'panel' => [
|
'panel' => [
|
||||||
'menu' => require_once __DIR__ . '/menu.php',
|
'menu' => require_once __DIR__ . '/menu.php'
|
||||||
'css' => '/assets/css/panel.css',
|
|
||||||
'home' => 'pages/home',
|
|
||||||
],
|
],
|
||||||
'donorbox' => [
|
'donorbox' => [
|
||||||
'api_key' => '', // À remplir avec la clé API Donorbox
|
'api_key' => '', // À remplir avec la clé API Donorbox
|
||||||
|
|
@ -77,14 +35,6 @@ return [
|
||||||
],
|
],
|
||||||
'tobimori.seo.canonicalBase' => 'https://www.index.ngo',
|
'tobimori.seo.canonicalBase' => 'https://www.index.ngo',
|
||||||
|
|
||||||
'cache' => [
|
|
||||||
'og' => true,
|
|
||||||
],
|
|
||||||
|
|
||||||
'routes' => [
|
|
||||||
require(__DIR__ . '/routes/newsletter.php'),
|
|
||||||
],
|
|
||||||
|
|
||||||
'hooks' => [
|
'hooks' => [
|
||||||
'page.update:after' => function ($newPage) {
|
'page.update:after' => function ($newPage) {
|
||||||
if ($newPage->intendedTemplate()->name() !== 'investigation') {
|
if ($newPage->intendedTemplate()->name() !== 'investigation') {
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,25 @@
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
return [
|
return [
|
||||||
|
'dashboard' => [
|
||||||
|
'label' => 'Dashboard',
|
||||||
|
'icon' => 'bolt',
|
||||||
|
'link' => '/',
|
||||||
|
'current' => function (string $current): bool {
|
||||||
|
$path = Kirby\Cms\App::instance()->path();
|
||||||
|
return Str::contains($path, '/site');
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'-',
|
||||||
'home' => [
|
'home' => [
|
||||||
'label' => 'Accueil',
|
'label' => 'Accueil',
|
||||||
'icon' => 'home',
|
'icon' => 'home',
|
||||||
'link' => 'pages/home',
|
'link' => 'pages/home',
|
||||||
'current' => function (string $current): bool {
|
'current' => function (string $current): bool {
|
||||||
$path = Kirby\Cms\App::instance()->path();
|
$path = Kirby\Cms\App::instance()->path();
|
||||||
return $path === '' || Str::contains($path, 'pages/home');
|
return Str::contains($path, 'pages/home');
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'-',
|
|
||||||
'enquetes' => [
|
'enquetes' => [
|
||||||
'label' => 'Enquêtes',
|
'label' => 'Enquêtes',
|
||||||
'icon' => 'pen',
|
'icon' => 'pen',
|
||||||
|
|
@ -29,15 +38,6 @@ return [
|
||||||
return Str::contains($path, 'pages/impacts');
|
return Str::contains($path, 'pages/impacts');
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'news' => [
|
|
||||||
'label' => 'Brèves',
|
|
||||||
'icon' => 'bell',
|
|
||||||
'link' => 'pages/news',
|
|
||||||
'current' => function (string $current): bool {
|
|
||||||
$path = Kirby\Cms\App::instance()->path();
|
|
||||||
return Str::contains($path, 'pages/news');
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'dossiers' => [
|
'dossiers' => [
|
||||||
'label' => 'Dossiers',
|
'label' => 'Dossiers',
|
||||||
'icon' => 'folder',
|
'icon' => 'folder',
|
||||||
|
|
@ -77,31 +77,13 @@ return [
|
||||||
],
|
],
|
||||||
'legal-notices' => [
|
'legal-notices' => [
|
||||||
'label' => 'Mentions légales',
|
'label' => 'Mentions légales',
|
||||||
'icon' => 'edit-line',
|
'icon' => 'email',
|
||||||
'link' => 'pages/mentions-legales',
|
'link' => 'pages/mentions-legales',
|
||||||
'current' => function (string $current): bool {
|
'current' => function (string $current): bool {
|
||||||
$path = Kirby\Cms\App::instance()->path();
|
$path = Kirby\Cms\App::instance()->path();
|
||||||
return Str::contains($path, 'pages/mentions-legales');
|
return Str::contains($path, 'pages/mentions-legales');
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'newsletter' => [
|
|
||||||
'label' => 'Newsletter',
|
|
||||||
'icon' => 'email',
|
|
||||||
'link' => 'pages/newsletter',
|
|
||||||
'current' => function (string $current): bool {
|
|
||||||
$path = Kirby\Cms\App::instance()->path();
|
|
||||||
return Str::contains($path, 'pages/newsletter');
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'privacy-policy' => [
|
|
||||||
'label' => 'Politique de confidentialité',
|
|
||||||
'icon' => 'lock',
|
|
||||||
'link' => 'pages/politique-de-confidentialite',
|
|
||||||
'current' => function (string $current): bool {
|
|
||||||
$path = Kirby\Cms\App::instance()->path();
|
|
||||||
return Str::contains($path, 'pages/politique-de-confidentialite');
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'-',
|
'-',
|
||||||
'database' => [
|
'database' => [
|
||||||
'label' => 'Bases de données',
|
'label' => 'Bases de données',
|
||||||
|
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
return [
|
|
||||||
'pattern' => 'newsletter/subscribe',
|
|
||||||
'method' => 'POST|OPTIONS',
|
|
||||||
'action' => function () {
|
|
||||||
header('Content-Type: application/json');
|
|
||||||
|
|
||||||
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
|
|
||||||
http_response_code(200);
|
|
||||||
die();
|
|
||||||
}
|
|
||||||
|
|
||||||
$config = kirby()->option('brevo');
|
|
||||||
$apiKey = $config['api_key'] ?? '';
|
|
||||||
$listId = (int)($config['list_id'] ?? 2);
|
|
||||||
$apiUrl = $config['api_url'] ?? 'https://api.brevo.com/v3/contacts';
|
|
||||||
|
|
||||||
if (empty($apiKey)) {
|
|
||||||
http_response_code(500);
|
|
||||||
die(json_encode(['error' => 'Server configuration error', 'message' => 'Brevo API key not configured']));
|
|
||||||
}
|
|
||||||
|
|
||||||
$input = file_get_contents('php://input');
|
|
||||||
$data = json_decode($input, true);
|
|
||||||
|
|
||||||
if (!isset($data['email']) || empty($data['email'])) {
|
|
||||||
http_response_code(400);
|
|
||||||
die(json_encode(['error' => 'Email required']));
|
|
||||||
}
|
|
||||||
|
|
||||||
$email = filter_var($data['email'], FILTER_VALIDATE_EMAIL);
|
|
||||||
if ($email === false) {
|
|
||||||
http_response_code(400);
|
|
||||||
die(json_encode(['error' => 'Invalid email']));
|
|
||||||
}
|
|
||||||
|
|
||||||
$brevoData = [
|
|
||||||
'email' => $email,
|
|
||||||
'listIds' => [$listId],
|
|
||||||
'updateEnabled' => true,
|
|
||||||
];
|
|
||||||
|
|
||||||
if (isset($data['attributes']) && is_array($data['attributes']) && !empty($data['attributes'])) {
|
|
||||||
$brevoData['attributes'] = $data['attributes'];
|
|
||||||
}
|
|
||||||
|
|
||||||
$ch = curl_init();
|
|
||||||
curl_setopt_array($ch, [
|
|
||||||
CURLOPT_URL => $apiUrl,
|
|
||||||
CURLOPT_RETURNTRANSFER => true,
|
|
||||||
CURLOPT_POST => true,
|
|
||||||
CURLOPT_POSTFIELDS => json_encode($brevoData),
|
|
||||||
CURLOPT_HTTPHEADER => [
|
|
||||||
'Content-Type: application/json',
|
|
||||||
'api-key: ' . $apiKey,
|
|
||||||
'User-Agent: Index-NGO-Newsletter',
|
|
||||||
],
|
|
||||||
CURLOPT_TIMEOUT => 10,
|
|
||||||
CURLOPT_SSL_VERIFYPEER => true,
|
|
||||||
]);
|
|
||||||
|
|
||||||
$response = curl_exec($ch);
|
|
||||||
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
|
||||||
$curlError = curl_error($ch);
|
|
||||||
curl_close($ch);
|
|
||||||
|
|
||||||
if ($response === false) {
|
|
||||||
http_response_code(500);
|
|
||||||
die(json_encode(['error' => 'Connection error', 'details' => $curlError]));
|
|
||||||
}
|
|
||||||
|
|
||||||
$responseData = json_decode($response, true);
|
|
||||||
|
|
||||||
switch ($httpCode) {
|
|
||||||
case 201:
|
|
||||||
case 204:
|
|
||||||
http_response_code(200);
|
|
||||||
die(json_encode(['success' => true, 'message' => 'Successfully subscribed', 'email' => $email]));
|
|
||||||
|
|
||||||
case 400:
|
|
||||||
$isDuplicate = isset($responseData['code']) && $responseData['code'] === 'duplicate_parameter';
|
|
||||||
http_response_code(400);
|
|
||||||
die(json_encode([
|
|
||||||
'error' => $isDuplicate ? 'email_already_exists' : 'invalid_data',
|
|
||||||
'message' => $isDuplicate ? 'You are already subscribed!' : 'Invalid email address.',
|
|
||||||
'user_message' => $isDuplicate ? 'Vous êtes déjà inscrit·e !' : 'Veuillez vérifier votre adresse email.',
|
|
||||||
]));
|
|
||||||
|
|
||||||
case 401:
|
|
||||||
http_response_code(500);
|
|
||||||
die(json_encode([
|
|
||||||
'error' => 'invalid_api_key',
|
|
||||||
'message' => 'Invalid API key',
|
|
||||||
'user_message' => 'Une erreur technique est survenue. Veuillez réessayer plus tard.',
|
|
||||||
]));
|
|
||||||
|
|
||||||
case 404:
|
|
||||||
http_response_code(500);
|
|
||||||
die(json_encode([
|
|
||||||
'error' => 'list_not_found',
|
|
||||||
'message' => 'Contact list not found',
|
|
||||||
'user_message' => 'Une erreur technique est survenue. Veuillez réessayer plus tard.',
|
|
||||||
]));
|
|
||||||
|
|
||||||
default:
|
|
||||||
http_response_code($httpCode);
|
|
||||||
die(json_encode([
|
|
||||||
'error' => 'api_error',
|
|
||||||
'message' => 'Error communicating with subscription service',
|
|
||||||
'user_message' => 'Une erreur est survenue. Veuillez réessayer.',
|
|
||||||
'http_code' => $httpCode,
|
|
||||||
]));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
@ -6,29 +6,4 @@ return [
|
||||||
'locale' => 'en_US.UTF-8',
|
'locale' => 'en_US.UTF-8',
|
||||||
'name' => 'English',
|
'name' => 'English',
|
||||||
'url' => '/en',
|
'url' => '/en',
|
||||||
'translations' => [
|
|
||||||
'impact.type' => 'Impact',
|
|
||||||
'impact.type.plural' => 'Impacts',
|
|
||||||
'impacts.title' => 'Impacts',
|
|
||||||
'news.type' => 'News',
|
|
||||||
'news.type.plural' => 'News',
|
|
||||||
'news.title' => 'News',
|
|
||||||
'investigation.type' => 'Investigation',
|
|
||||||
'investigation.type.plural' => 'Investigations',
|
|
||||||
'investigations.title' => 'Investigations',
|
|
||||||
'investigations.related' => 'Related investigations',
|
|
||||||
'investigations.see_all' => 'See all investigations',
|
|
||||||
'filter.all' => 'All',
|
|
||||||
'filter.all.m' => 'All',
|
|
||||||
'package.type' => 'Folder',
|
|
||||||
'packages.title' => 'Folders',
|
|
||||||
'project.type' => 'Project',
|
|
||||||
'project.type.plural' => 'Projects',
|
|
||||||
'projects.title' => 'Projects',
|
|
||||||
'lab.title' => 'Laboratory',
|
|
||||||
'resource.type' => 'Resource',
|
|
||||||
'resource.type.plural' => 'Resources',
|
|
||||||
'resources.title' => 'Resources',
|
|
||||||
'resources.methodologies' => 'Methodologies',
|
|
||||||
],
|
|
||||||
];
|
];
|
||||||
|
|
@ -7,29 +7,4 @@ return [
|
||||||
'locale' => 'fr_FR.UTF-8',
|
'locale' => 'fr_FR.UTF-8',
|
||||||
'name' => 'Français',
|
'name' => 'Français',
|
||||||
'url' => '/',
|
'url' => '/',
|
||||||
'translations' => [
|
|
||||||
'impact.type' => 'Impact',
|
|
||||||
'impact.type.plural' => 'Impacts',
|
|
||||||
'impacts.title' => 'Impacts',
|
|
||||||
'news.type' => 'Brève',
|
|
||||||
'news.type.plural' => 'Brèves',
|
|
||||||
'news.title' => 'Brèves',
|
|
||||||
'investigation.type' => 'Enquête',
|
|
||||||
'investigation.type.plural' => 'Enquêtes',
|
|
||||||
'investigations.title' => 'Enquêtes',
|
|
||||||
'investigations.related' => 'Enquêtes liées',
|
|
||||||
'investigations.see_all' => 'Voir toutes les enquêtes',
|
|
||||||
'filter.all' => 'Toutes',
|
|
||||||
'filter.all.m' => 'Tous',
|
|
||||||
'package.type' => 'Dossier',
|
|
||||||
'packages.title' => 'Dossiers',
|
|
||||||
'project.type' => 'Projet',
|
|
||||||
'project.type.plural' => 'Projets',
|
|
||||||
'projects.title' => 'Projets',
|
|
||||||
'lab.title' => 'Laboratoire',
|
|
||||||
'resource.type' => 'Ressource',
|
|
||||||
'resource.type.plural' => 'Ressources',
|
|
||||||
'resources.title' => 'Ressources',
|
|
||||||
'resources.methodologies' => 'Méthodologies',
|
|
||||||
],
|
|
||||||
];
|
];
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<?php
|
<?php
|
||||||
/** @var \Kirby\Cms\Block $block */
|
/** @var \Kirby\Cms\Block $block */
|
||||||
$imageBefore = $block->imageBefore()->toFile();
|
$imageBefore = $block->imageBefore()->toFile();
|
||||||
$imageAfter = $block->imageAfter()->toFile();
|
$imageAfter = $block->imageAfter()->toFile();
|
||||||
$caption = $block->caption()->value();
|
$caption = $block->caption()->value();
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<?php if ($imageBefore || $imageAfter): ?>
|
<?php if ($imageBefore || $imageAfter): ?>
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
<button id="btn--back-to-top"><a href="#"><span class="text">Revenir en haut </span><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
|
<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,30 +0,0 @@
|
||||||
<?php
|
|
||||||
/** @var \Kirby\Cms\Block $block */
|
|
||||||
$images = $block->images()->toFiles();
|
|
||||||
$imgSizes = $imgSizes ?? '(min-width: 768px) 50vw, 90vw';
|
|
||||||
$imgSrcset = $imgSrcset ?? 'body-half';
|
|
||||||
?>
|
|
||||||
|
|
||||||
<div class="swiper">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<?php foreach ($images as $image): ?>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<figure>
|
|
||||||
<?php snippet('picture', [
|
|
||||||
'file' => $image,
|
|
||||||
'alt' => $image->alt()->value(),
|
|
||||||
'sizes' => $imgSizes,
|
|
||||||
'srcsetName' => $imgSrcset,
|
|
||||||
'lazy' => true,
|
|
||||||
]) ?>
|
|
||||||
<?php if ($image->caption()->isNotEmpty()): ?>
|
|
||||||
<figcaption><?= $image->caption()->html() ?></figcaption>
|
|
||||||
<?php endif ?>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
<?php endforeach ?>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-button-prev"></div>
|
|
||||||
<div class="swiper-button-next"></div>
|
|
||||||
<div class="swiper-pagination"></div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
<?php
|
|
||||||
/** @var \Kirby\Cms\Block $block */
|
|
||||||
?>
|
|
||||||
<div class="insert">
|
|
||||||
<div class="insert--inner">
|
|
||||||
<?php if ($block->title()->isNotEmpty()): ?>
|
|
||||||
<<?= $block->level()->or('h3') ?>><?= $block->title()->esc() ?></<?= $block->level()->or('h3') ?>>
|
|
||||||
<?php endif ?>
|
|
||||||
<?= $block->text() ?>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<div id="bottom-bar">
|
|
||||||
|
|
||||||
<div class="bottom-bar__inner">
|
|
||||||
|
|
||||||
<div class="progress-container">
|
|
||||||
<div class="progress-bar" id="progressBar"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php if ($page->intendedTemplate()->name() === 'investigation'): ?>
|
|
||||||
<div class="title-group">
|
|
||||||
<p class="title-type">Enquête</p>
|
|
||||||
<p class="title"><?= $page->title()->esc() ?></p>
|
|
||||||
</div>
|
|
||||||
<?php endif ?>
|
|
||||||
|
|
||||||
<div class="dropdown">
|
|
||||||
<button class="dropdown__trigger btn--simple no-link">
|
|
||||||
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
|
|
||||||
<span class="text">Partager</span>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown__content">
|
|
||||||
<?php snippet('modal-share') ?>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<?php if ($page->intendedTemplate()->name() === 'investigation'): ?>
|
|
||||||
<button class="btn--simple btn--download">
|
|
||||||
<a href="#" download>
|
|
||||||
<span class="icon"><?= svg('assets/icons/download.svg') ?></span>
|
|
||||||
<span class="text">Télécharger</span>
|
|
||||||
</a>
|
|
||||||
</button>
|
|
||||||
<?php endif ?>
|
|
||||||
|
|
||||||
<button class="btn--simple btn--support"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></button>
|
|
||||||
|
|
||||||
<button class="btn--simple btn--back-to-top">
|
|
||||||
<a href="#"><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></a>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,109 +1,111 @@
|
||||||
<?php
|
<?php
|
||||||
/**
|
// URL à scraper (remplacez par l'URL souhaitée)
|
||||||
* Card Open Graph snippet
|
$url = 'https://www.lemonde.fr/societe/article/2025/07/16/au-c-ur-des-emeutes-de-nouvelle-caledonie-quand-la-mort-de-banane-abattu-par-le-gign-lance-le-siege-de-saint-louis_6621496_3224.html';
|
||||||
* Fetches and displays OG data from an external URL with cache.
|
|
||||||
*
|
|
||||||
* @var string $url The URL to scrape OG data from
|
|
||||||
*/
|
|
||||||
|
|
||||||
if (empty($url)) return;
|
// Fonction pour récupérer les données Open Graph
|
||||||
|
function getOpenGraphData($url) {
|
||||||
|
$ogData = [
|
||||||
|
'title' => '',
|
||||||
|
'description' => '',
|
||||||
|
'image' => '',
|
||||||
|
'site_name' => '',
|
||||||
|
'url' => $url
|
||||||
|
];
|
||||||
|
|
||||||
$cache = kirby()->cache('og');
|
// Configuration du contexte pour éviter les erreurs SSL
|
||||||
$cacheKey = md5($url);
|
$context = stream_context_create([
|
||||||
$ogData = $cache->get($cacheKey);
|
'http' => [
|
||||||
|
'method' => 'GET',
|
||||||
|
'header' => 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
|
||||||
|
'timeout' => 10
|
||||||
|
],
|
||||||
|
'ssl' => [
|
||||||
|
'verify_peer' => false,
|
||||||
|
'verify_peer_name' => false
|
||||||
|
]
|
||||||
|
]);
|
||||||
|
|
||||||
if ($ogData === null) {
|
// Récupérer le HTML
|
||||||
$ogData = [
|
$html = @file_get_contents($url, false, $context);
|
||||||
'title' => '',
|
|
||||||
'description' => '',
|
|
||||||
'image' => '',
|
|
||||||
'site_name' => '',
|
|
||||||
'url' => $url,
|
|
||||||
];
|
|
||||||
|
|
||||||
$context = stream_context_create([
|
if ($html === false) {
|
||||||
'http' => [
|
return $ogData;
|
||||||
'method' => 'GET',
|
}
|
||||||
'header' => 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
|
|
||||||
'timeout' => 10,
|
|
||||||
],
|
|
||||||
'ssl' => [
|
|
||||||
'verify_peer' => false,
|
|
||||||
'verify_peer_name' => false,
|
|
||||||
],
|
|
||||||
]);
|
|
||||||
|
|
||||||
$html = @file_get_contents($url, false, $context);
|
// Parser les meta tags Open Graph
|
||||||
|
preg_match_all('/<meta\s+property=["\']og:([^"\']+)["\']\s+content=["\']([^"\']+)["\']/i', $html, $matches);
|
||||||
|
|
||||||
if ($html !== false) {
|
if (!empty($matches[1])) {
|
||||||
// Parse OG meta tags (both property...content and content...property orders)
|
foreach ($matches[1] as $index => $property) {
|
||||||
preg_match_all('/<meta\s+(?:property=["\']og:([^"\']+)["\']\s+content=["\']([^"\']*)["\']|content=["\']([^"\']*?)["\']\s+property=["\']og:([^"\']+)["\'])/i', $html, $matches);
|
$content = $matches[2][$index];
|
||||||
|
switch ($property) {
|
||||||
|
case 'title':
|
||||||
|
$ogData['title'] = htmlspecialchars($content);
|
||||||
|
break;
|
||||||
|
case 'description':
|
||||||
|
$ogData['description'] = htmlspecialchars($content);
|
||||||
|
break;
|
||||||
|
case 'image':
|
||||||
|
$ogData['image'] = $content;
|
||||||
|
break;
|
||||||
|
case 'site_name':
|
||||||
|
$ogData['site_name'] = htmlspecialchars($content);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (!empty($matches[1])) {
|
// Fallback: si pas de og:title, utiliser <title>
|
||||||
foreach ($matches[1] as $index => $property) {
|
if (empty($ogData['title'])) {
|
||||||
$prop = $property ?: $matches[4][$index];
|
preg_match('/<title>([^<]+)<\/title>/i', $html, $titleMatch);
|
||||||
$content = $matches[2][$index] ?: $matches[3][$index];
|
if (!empty($titleMatch[1])) {
|
||||||
$content = html_entity_decode(trim($content), ENT_QUOTES | ENT_HTML5, 'UTF-8');
|
$ogData['title'] = htmlspecialchars($titleMatch[1]);
|
||||||
switch ($prop) {
|
}
|
||||||
case 'title':
|
}
|
||||||
$ogData['title'] = $content;
|
|
||||||
break;
|
|
||||||
case 'description':
|
|
||||||
$ogData['description'] = $content;
|
|
||||||
break;
|
|
||||||
case 'image':
|
|
||||||
$ogData['image'] = $content;
|
|
||||||
break;
|
|
||||||
case 'site_name':
|
|
||||||
$ogData['site_name'] = $content;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback: use <title> if no og:title
|
// Fallback: si pas de site_name, utiliser le domaine
|
||||||
if (empty($ogData['title'])) {
|
if (empty($ogData['site_name'])) {
|
||||||
preg_match('/<title>([^<]+)<\/title>/i', $html, $titleMatch);
|
$parsed = parse_url($url);
|
||||||
if (!empty($titleMatch[1])) {
|
$ogData['site_name'] = $parsed['host'] ?? '';
|
||||||
$ogData['title'] = html_entity_decode($titleMatch[1], ENT_QUOTES, 'UTF-8');
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Always use domain as site_name
|
return $ogData;
|
||||||
$parsed = parse_url($url);
|
}
|
||||||
$ogData['site_name'] = $parsed['host'] ?? '';
|
|
||||||
|
|
||||||
$cache->set($cacheKey, $ogData, 360); // 6 hours
|
$ogData = getOpenGraphData($url);
|
||||||
}
|
|
||||||
?>
|
|
||||||
|
|
||||||
<div class="card--open-graph">
|
// Toujours utiliser le domaine de l'URL pour site_name
|
||||||
<div class="open-graph__inner">
|
$parsed = parse_url($url);
|
||||||
|
$ogData['site_name'] = $parsed['host'] ?? '';
|
||||||
|
?>
|
||||||
|
|
||||||
<?php if (!empty($ogData['image'])): ?>
|
<div class="card--open-graph">
|
||||||
<figure>
|
<div class="open-graph__inner">
|
||||||
<img src="<?= htmlspecialchars($ogData['image']) ?>" alt="">
|
|
||||||
</figure>
|
|
||||||
<?php endif ?>
|
|
||||||
|
|
||||||
<div class="content">
|
<?php if (!empty($ogData['image'])): ?>
|
||||||
<?php if (!empty($ogData['site_name'])): ?>
|
<figure>
|
||||||
<span class="site-name"><?= htmlspecialchars($ogData['site_name']) ?></span>
|
<img src="<?= $ogData['image'] ?>" alt="<?= $ogData['title'] ?>">
|
||||||
<?php endif ?>
|
</figure>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<?php if (!empty($ogData['title'])): ?>
|
<div class="content">
|
||||||
<h3 class="title">
|
<?php if (!empty($ogData['site_name'])): ?>
|
||||||
<a href="<?= htmlspecialchars($ogData['url']) ?>" target="_blank">
|
<span class="site-name"><?= $ogData['site_name'] ?></span>
|
||||||
<?= htmlspecialchars($ogData['title']) ?>
|
<?php endif; ?>
|
||||||
</a>
|
|
||||||
</h3>
|
|
||||||
<?php endif ?>
|
|
||||||
|
|
||||||
<?php if (!empty($ogData['description'])): ?>
|
<?php if (!empty($ogData['title'])): ?>
|
||||||
<p class="description"><?= htmlspecialchars($ogData['description']) ?></p>
|
|
||||||
<?php endif ?>
|
<h3 class="title">
|
||||||
</div>
|
<a href="<?= $ogData['url'] ?>" target="_blank">
|
||||||
<a class="link-block" href="<?= htmlspecialchars($ogData['url']) ?>" target="_blank"></a>
|
<?= $ogData['title'] ?>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</h3>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if (!empty($ogData['description'])): ?>
|
||||||
|
<p class="description"><?= $ogData['description'] ?></p>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<a class="link-block" href="<?= $ogData['url'] ?>" target="_blank"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,41 +1,65 @@
|
||||||
<?php snippet('back-to-top') ?>
|
<?php snippet('back-to-top') ?>
|
||||||
|
|
||||||
<div id="support-bar">
|
|
||||||
<div class="support-bar__container">
|
|
||||||
<p class="baseline">Pour continuer à enquêter, nous avons besoin de vous</p>
|
|
||||||
<button class="btn"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<footer id="site-footer">
|
<footer id="site-footer">
|
||||||
|
|
||||||
|
|
||||||
<div class="site-footer__container">
|
<div class="site-footer__container">
|
||||||
|
|
||||||
<div class="logo"><?= svg('assets/images/index-logo.svg') ?></div>
|
<div class="logo"><?= svg('assets/images/index-logo.svg') ?></div>
|
||||||
<p class="baseline">Index est une ONG d’investigation numérique, au service du public, de la vérité et de la justice.</p>
|
|
||||||
|
|
||||||
<div class="list-links">
|
<div class="footer__newsletter">
|
||||||
<ul>
|
|
||||||
<li><a target="_blank" href="<?= page('mentions-legales')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Legal notices' : 'Mentions légales' ?></a></li>
|
|
||||||
<li><a target="_blank" href="<?= page('politique-de-confidentialite')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Privacy policy' : 'Politique de confidentialité' ?></a></li>
|
|
||||||
</ul>
|
|
||||||
<ul class="hightlight">
|
|
||||||
<li><a target="_blank" href="#">Contact</a></li>
|
|
||||||
<li><a target="_blank" href="#">Newsletter</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Recevez les dernières enquêtes et actualités d’Index directement
|
||||||
|
dans votre boîte mail.
|
||||||
|
</p>
|
||||||
|
<p>Inscrivez-vous à la newsletter</p>
|
||||||
|
|
||||||
|
<form class="form__newsletter">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="Votre adresse e-mail"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<button class="btn--newletter" type="submit" aria-label="s’inscrire">
|
||||||
|
<span class="txt">S’inscrire</span>
|
||||||
|
<span class="icon">
|
||||||
|
<svg
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-miterlimit="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z"
|
||||||
|
fill-rule="nonzero"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p class="p__small">
|
||||||
|
En vous inscrivant, vous acceptez les
|
||||||
|
<a target="_blank" href="https://www.index.ngo/mentions-legales/"
|
||||||
|
>conditions d’utilisation</a
|
||||||
|
>
|
||||||
|
d’Index qui vous informent notamment des droits dont vous disposez
|
||||||
|
sur vos données personnelles.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="footer__socials">
|
||||||
|
<p>Suivez Index sur les réseaux sociaux</p>
|
||||||
<?php snippet('socials') ?>
|
<?php snippet('socials') ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p class="credits">
|
<div class="footer__mentions">
|
||||||
© 2025 Index Investigation | Site développé par <a href="https://studio-variable.com/" target="_blank">Studio Variable</a>
|
<p>
|
||||||
</p>
|
© 2025 Index Investigation |
|
||||||
|
<a target="_blank" href="https://www.index.ngo/mentions-legales/">Mentions légales</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<?php snippet('seo/schemas'); ?>
|
<?php snippet('seo/schemas'); ?>
|
||||||
|
|
|
||||||
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