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
|
||||
|
||||
# Host-specific config (credentials)
|
||||
# ---------------
|
||||
|
||||
/site/config/config.index.ngo.php
|
||||
/site/config/config.localhost.php
|
||||
|
||||
|
||||
# Content
|
||||
# ---------------
|
||||
|
|
|
|||
|
|
@ -1,74 +1,72 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-o-font-smoothing: antialiased;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-o-font-smoothing: antialiased;
|
||||
|
||||
scroll-behavior: smooth;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
a {
|
||||
color: currentColor;
|
||||
color: currentColor;
|
||||
}
|
||||
button {
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: var(--color-txt);
|
||||
button{
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: var(--color-txt);
|
||||
}
|
||||
iframe {
|
||||
border: none;
|
||||
iframe{
|
||||
border: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
line-height: var(--leading-normal);
|
||||
font-size: var(--fs-normal);
|
||||
body{
|
||||
font-family: var(--font);
|
||||
line-height: var(--leading-normal);
|
||||
font-size: var(--fs-normal);
|
||||
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.link-block {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
// &:hover{
|
||||
// background-color: rgba(255, 0, 0, 0.244);
|
||||
// }
|
||||
.link-block{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
// &:hover{
|
||||
// background-color: rgba(255, 0, 0, 0.244);
|
||||
// }
|
||||
}
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev,
|
||||
body,
|
||||
#site-header,
|
||||
#site-footer {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
.swiper-button-next, .swiper-button-prev,
|
||||
body, #site-header, #site-footer{
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
@mixin grid-content() {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
@mixin grid-content(){
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@mixin hide-scroll() {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
|
||||
@mixin hide-scroll(){
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clamp($lines) {
|
||||
|
|
@ -78,60 +76,56 @@ body,
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin hover-card-line() {
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-top: 1px solid transparent;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
}
|
||||
@mixin hover-card-line(){
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
position: relative;
|
||||
&::before{
|
||||
content: '';
|
||||
width: 100%;
|
||||
border-top: 1px solid transparent;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]) {
|
||||
&:hover {
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
&::before {
|
||||
&:hover{
|
||||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
&::before{
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pin() {
|
||||
.pin {
|
||||
z-index: 90;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: center;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--color-txt);
|
||||
|
||||
@mixin pin(){
|
||||
.pin{
|
||||
z-index: 90;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: center;
|
||||
svg{
|
||||
width: 100%;
|
||||
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.is-hidden {
|
||||
overflow-y: hidden;
|
||||
body.is-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-cards: 940px;
|
||||
--max-w-site: 1600px;
|
||||
--z-header: 2000;
|
||||
--panel-w: 310px;
|
||||
|
||||
|
|
@ -30,7 +29,7 @@
|
|||
--leading-tight: 1.05;
|
||||
--leading-normal: 1.3;
|
||||
|
||||
--leading-title: 1.2;
|
||||
--leading-title: 1.1;
|
||||
// --leading-relaxed: 1.4;
|
||||
// --leading-loose: 1.8;
|
||||
|
||||
|
|
@ -80,18 +79,15 @@
|
|||
--h-block: 30px;
|
||||
|
||||
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
--transition-scroll: .5s ease-in-out;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media #{$small}{
|
||||
:root {
|
||||
--fs-xsmall: 12px;
|
||||
--fs-small: 14px;
|
||||
--fs-normal: 18px;
|
||||
--fs-text: 18px;
|
||||
--fs-xsmall: 13px;
|
||||
--fs-small: 16px;
|
||||
--fs-normal: 20px;
|
||||
--fs-text: 20px;
|
||||
--fs-medium: 24px;
|
||||
--fs-big: 34px;
|
||||
|
||||
|
|
@ -116,8 +112,6 @@
|
|||
--color-txt: #161616;
|
||||
--color-txt-light: var(--grey-400);
|
||||
|
||||
--border-light: 1px solid var(--grey-800);
|
||||
|
||||
--color-accent: #ff00ff;
|
||||
--color-accent-50: #ffe9ff;
|
||||
--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{
|
||||
color: var(--color-accent);
|
||||
&:hover{
|
||||
|
|
@ -93,55 +93,21 @@ button:disabled{
|
|||
svg{ fill: var(--color-bg); }
|
||||
}
|
||||
|
||||
|
||||
.btn--simple{
|
||||
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{
|
||||
.btn--bold,
|
||||
.btn--bold-inline{
|
||||
display: block;
|
||||
height: calc(var(--h-block)*1);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
// font-weight: 500;
|
||||
// text-transform: uppercase;
|
||||
font-size: var(--fs-xsmall);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@include icon(12px);
|
||||
svg{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
|
@ -152,7 +118,7 @@ button:disabled{
|
|||
gap: 1ch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 1.25ch;
|
||||
padding: 0 2ch;
|
||||
padding-top: 4px;
|
||||
}
|
||||
&.no-link{
|
||||
|
|
@ -160,14 +126,12 @@ button:disabled{
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
padding: 0 1.25ch;
|
||||
padding: 0 2ch;
|
||||
padding-top: 4px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -187,98 +151,9 @@ button:disabled{
|
|||
|
||||
}
|
||||
|
||||
.btn--see-more{
|
||||
|
||||
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);
|
||||
.btn--bold-inline{
|
||||
background-color: var(--color-bg);
|
||||
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
svg{ fill: var(--color-txt); }
|
||||
&:hover{
|
||||
background-color: var(--grey-950);
|
||||
color: var(--grey-100);
|
||||
|
|
@ -318,16 +193,16 @@ fill: var(--color-txt-light);
|
|||
}
|
||||
@media #{$small}{
|
||||
svg{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
@media #{$x-small}{
|
||||
right: calc(var(--padding-inner)*0.5);
|
||||
bottom: calc(var(--padding-inner)*0.25);
|
||||
svg{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 11px;
|
||||
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;
|
||||
margin-bottom: var(--spacing);
|
||||
margin-left: auto;
|
||||
margin-right: var(--padding-body);
|
||||
|
||||
|
||||
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.text{
|
||||
font-size: var(--fs-small);
|
||||
padding-top: 2px;
|
||||
margin: var(--spacing) auto;
|
||||
font-size: var(--fs-xsmall);
|
||||
@media #{$small}{
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
}
|
||||
|
||||
.icon{
|
||||
flex-shrink: 0;
|
||||
--size: 26px;
|
||||
border: 1px solid var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
border-radius: 50%;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform-origin: center;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
svg{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
opacity: 0;
|
||||
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;
|
||||
}
|
||||
background-color: var(--grey-950);
|
||||
color: var(--grey-100);
|
||||
border-color: var(--grey-100);
|
||||
a{
|
||||
background-color: var(--grey-950);
|
||||
color: var(--grey-100);
|
||||
}
|
||||
.text{
|
||||
display: none;
|
||||
}
|
||||
&.is-visible{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.btn--support{
|
||||
color: var(--color-accent);
|
||||
&:hover{
|
||||
color: var(--color-accent);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
svg{ fill: var(--grey-100); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,14 +10,33 @@
|
|||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
|
||||
// &.has-link {
|
||||
// @include hover-card-line();
|
||||
// }
|
||||
|
||||
@include figure-16-9();
|
||||
|
||||
figure {
|
||||
@media #{$x-small} {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
}
|
||||
|
|
@ -73,8 +92,9 @@
|
|||
.description {
|
||||
font-size: var(--fs-small);
|
||||
@include clamp(2);
|
||||
// margin-top: calc(var(--spacing)*-0.5);
|
||||
// display: none;
|
||||
// margin-bottom: calc(var(--spacing)*0.75);
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -82,7 +102,9 @@
|
|||
@include btn--go-to();
|
||||
@include hover-card-line();
|
||||
|
||||
|
||||
.keywords {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
.title {
|
||||
|
|
@ -91,70 +113,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
row-gap: 0;
|
||||
display: block;
|
||||
@media #{$x-small} {
|
||||
|
||||
.content{
|
||||
padding: calc(var(--spacing)*0.5) var(--padding-inner);
|
||||
.content {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.type{
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
.title {
|
||||
font-size: var(--fs-small);
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.title{
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
.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
|
||||
// }
|
||||
|
||||
figure {
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,29 +6,20 @@
|
|||
|
||||
padding: var(--padding-inner);
|
||||
|
||||
|
||||
|
||||
@include figure-16-9();
|
||||
@include pin();
|
||||
|
||||
& > figure,
|
||||
.video-extract{
|
||||
& > figure{
|
||||
width: calc(100% + var(--padding-inner)*2);
|
||||
position: relative;
|
||||
left: 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{
|
||||
// padding: var(--padding-inner);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -50,13 +41,13 @@
|
|||
line-height: var(--leading-title);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
// text-wrap: balance;
|
||||
text-wrap: balance;
|
||||
|
||||
a{ text-decoration: none;}
|
||||
}
|
||||
|
||||
.description{
|
||||
margin-top: calc(var(--spacing)*1.25);
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -65,18 +56,14 @@
|
|||
}
|
||||
|
||||
.dl{
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
// font-size: var(--fs-small);
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
font-size: var(--fs-small);
|
||||
flex-grow: 2;
|
||||
.dl__group{
|
||||
@include grid-content();
|
||||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing)*0.5) 0;
|
||||
&:last-of-type{
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
}
|
||||
|
||||
dt{
|
||||
|
|
@ -99,78 +86,12 @@
|
|||
background-color: var(--grey-950);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.keywords-wrapper{
|
||||
padding-top: calc(var(--spacing)*0.75);
|
||||
z-index: 100;
|
||||
.keywords li a{
|
||||
font-size: var(--fs-xsmall);
|
||||
}
|
||||
.link-block{
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
[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-name: impact;
|
||||
|
|
@ -14,61 +14,35 @@
|
|||
|
||||
|
||||
@include hover-card-line();
|
||||
@include figure-16-9();
|
||||
@include figure-3-1();
|
||||
@include pin();
|
||||
|
||||
|
||||
|
||||
.group-top{
|
||||
display: flex;
|
||||
gap: calc(var(--padding-inner)*0.5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.title{
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: var(--leading-title);
|
||||
padding-top: calc(var(--spacing)*0.75);
|
||||
padding-bottom: calc(var(--spacing)*1);
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
margin-right: 2ch;
|
||||
}
|
||||
|
||||
.date{
|
||||
font-size: var(--fs-small);
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
}
|
||||
|
||||
.investigations{
|
||||
text-decoration: none;
|
||||
list-style: none;
|
||||
// border-top: var(--border-light);
|
||||
padding-top: calc(var(--spacing)*0.5);
|
||||
width: 100%;
|
||||
|
||||
z-index: 100;
|
||||
li{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
color: var(--color-txt-light);
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
a::before{
|
||||
content: "↪ "
|
||||
}
|
||||
&:hover{
|
||||
a{
|
||||
text-decoration: underline 1px;
|
||||
text-underline-offset: 2px;
|
||||
color: var(--color-txt);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -95,10 +69,6 @@
|
|||
top: 3px;
|
||||
}
|
||||
|
||||
// .link-block{
|
||||
// background-color: rgba(255, 0, 0, 0.781);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -106,7 +76,7 @@
|
|||
|
||||
|
||||
@media #{$small-up}{
|
||||
.card--block,
|
||||
.card--impact,
|
||||
.grid-sizer{
|
||||
width: calc(50% - 13px);
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
container-type: inline-size;
|
||||
container-name: opengraph;
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
|
||||
.open-graph__inner{
|
||||
@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;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
||||
min-width: 180px;
|
||||
margin-top: var(--padding-inner);
|
||||
background-color: var(--color-bg);
|
||||
border: var(--border);
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
visibility: hidden;
|
||||
transform: translateY(-4px);
|
||||
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: "◀";
|
||||
transform: rotate(90deg);
|
||||
font-size: 14px;
|
||||
|
|
@ -29,16 +29,13 @@
|
|||
top: -13px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: var(--padding-inner);
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
a, button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75em 1ch;
|
||||
|
|
@ -61,15 +58,14 @@
|
|||
&--align-right .dropdown__content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
&::before {
|
||||
&::before{
|
||||
left: auto;
|
||||
right: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
&.is-open {
|
||||
.dropdown__content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
|
@ -77,129 +73,98 @@
|
|||
}
|
||||
}
|
||||
|
||||
&--position-mobile .dropdown__content {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
// 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;
|
||||
// PANEL
|
||||
&--position-mobile .dropdown__content {
|
||||
top: auto;
|
||||
bottom: 4px;
|
||||
left: -11px;
|
||||
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-panel.is-open {
|
||||
.dropdown__content {
|
||||
transform: translateX(0);
|
||||
&--position-mobile.is-open {
|
||||
.dropdown__content {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
&--position-panel .dropdown__content {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: calc(100% + var(--padding-inner));
|
||||
margin-top: 0;
|
||||
margin-left: 4px;
|
||||
|
||||
&::before{
|
||||
font-family: Arial;
|
||||
content: "◀";
|
||||
transform: rotate(0deg);
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 4px;
|
||||
left: -11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&--position-panel.is-open {
|
||||
.dropdown__content {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media #{$x-small} {
|
||||
@media #{$x-small}{
|
||||
|
||||
.dropdown__content {
|
||||
width: calc(100vw - var(--padding-body)*2);
|
||||
.dropdown__content{
|
||||
width: calc(100vw - var(--padding-body)*2);
|
||||
.modal--share{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1280px){
|
||||
|
||||
[data-template="investigations"]{
|
||||
.dropdown .dropdown__content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
&::before{
|
||||
left: auto;
|
||||
right: 16px;
|
||||
|
||||
.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 {
|
||||
aspect-ratio: 16/9;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
img,
|
||||
picture {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||||
|
||||
@mixin figure-16-9{
|
||||
& > picture,
|
||||
& > 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;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
figcaption,
|
||||
.caption {
|
||||
font-size: var(--fs-small) !important;
|
||||
color: var(--color-txt-light);
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
margin: calc(var(--spacing) * 0.5) 0 !important;
|
||||
|
||||
|
||||
@mixin figure-3-1(){
|
||||
& > picture,
|
||||
& > figure{
|
||||
aspect-ratio: 3/1;
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 350px;
|
||||
max-width: 400px;
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li{
|
||||
--size-icon: 20px;
|
||||
}
|
||||
|
||||
li[data-socials="youtube"]{
|
||||
--size-icon: 26px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.icon{
|
||||
width: var(--size-icon);
|
||||
height: var(--size-icon);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
svg{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: var(--size-icon);
|
||||
height: var(--size-icon);
|
||||
fill: var(--color-txt);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
a:hover{
|
||||
svg{
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
.text{ display: none; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// with text
|
||||
// @media #{$small-up}{
|
||||
// .footer__socials .list-socials{
|
||||
@media #{$small-up}{
|
||||
.footer__socials .list-socials{
|
||||
|
||||
// display: block;
|
||||
display: block;
|
||||
|
||||
// li{
|
||||
// margin-bottom: calc(var(--spacing)*0.25);
|
||||
// break-inside: avoid;
|
||||
// font-size: var(--fs-small);
|
||||
li{
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
break-inside: avoid;
|
||||
font-size: var(--fs-small);
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
// a{
|
||||
// gap: 1ch;
|
||||
a{
|
||||
gap: 1ch;
|
||||
|
||||
// height: calc(var(--spacing)*1);
|
||||
// &::after{
|
||||
// content: '↗';
|
||||
// color: var(--grey-300);
|
||||
// }
|
||||
height: calc(var(--spacing)*1);
|
||||
&::after{
|
||||
content: '↗';
|
||||
color: var(--grey-300);
|
||||
}
|
||||
|
||||
// &:hover{
|
||||
// color: var(--color-accent);
|
||||
// &::after{
|
||||
// color: var(--color-accent);
|
||||
// opacity: 0.5;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .text{
|
||||
// display: block;
|
||||
// line-height: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
&:hover{
|
||||
color: var(--color-accent);
|
||||
&::after{
|
||||
color: var(--color-accent);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text{
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
background-color: var(--color-bg);
|
||||
|
||||
.title {
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-xsmall);
|
||||
line-height: 1.2;
|
||||
padding: var(--padding-inner);
|
||||
padding-bottom: 0px;
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
list-style: none;
|
||||
|
||||
li{
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-xsmall);
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
align-items: center;
|
||||
gap: 2ch;
|
||||
text-decoration: none;
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--fs-xsmall);
|
||||
}
|
||||
.icon {
|
||||
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;
|
||||
z-index: 300;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
--position: 50%;
|
||||
.slider-before-after{
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// max-width: 800px;
|
||||
// max-height: 90vh;
|
||||
// aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
.slider-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left;
|
||||
}
|
||||
|
||||
.image-before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: var(--position);
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
/* for Firefox */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slider:focus-visible ~ .slider-button {
|
||||
outline: 5px solid black;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.slider-line {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 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;
|
||||
max-width: 700px;
|
||||
z-index: 300;
|
||||
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%, 0.5);
|
||||
}
|
||||
place-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
--position: 50%;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// max-width: 800px;
|
||||
// max-height: 90vh;
|
||||
// aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.slider-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left;
|
||||
}
|
||||
|
||||
.image-before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: var(--position);
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
/* for Firefox */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slider:focus-visible ~ .slider-button {
|
||||
outline: 5px solid black;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.slider-line {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: .2rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
/* z-index: 10; */
|
||||
left: var(--position);
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slider-button {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
padding: .5rem;
|
||||
border-radius: 100vw;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
top: 50%;
|
||||
left: var(--position);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
/* z-index: 100; */
|
||||
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
|
||||
}
|
||||
|
||||
}
|
||||
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 {
|
||||
|
||||
width: 100%!important;
|
||||
min-width: 0;
|
||||
|
||||
--slide-padding: 30px;
|
||||
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next{
|
||||
.swiper-button-next {
|
||||
--swiper-navigation-size: 32px;
|
||||
color: var(--color-txt);
|
||||
svg {
|
||||
width: 20px;
|
||||
background-color: var(--color-bg);
|
||||
height: 100%;
|
||||
width: var(--slide-padding);
|
||||
top: 0px!important;
|
||||
height: calc(100% - var(--spacing)*1);
|
||||
// background-color: red;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&.swiper-button-disabled {
|
||||
opacity: 1;
|
||||
|
||||
svg {
|
||||
opacity: 0.05;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 0px!important;
|
||||
top: 0px;
|
||||
justify-content: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
padding-left: var(--slide-padding);
|
||||
padding-right: var(--slide-padding);
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
|
|
@ -28,28 +63,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
|
||||
.swiper-wrapper {
|
||||
height: max-content;
|
||||
align-items: center;
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
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;
|
||||
padding: 0 var(--padding-body);
|
||||
padding-top: var(--header-h);
|
||||
padding-bottom: calc(var(--spacing)*6);
|
||||
padding-bottom: calc(var(--spacing)*2);
|
||||
|
||||
// min-height: 100dvh;
|
||||
// min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
|
||||
.page__header,
|
||||
.page__content{
|
||||
max-width: var(--max-w-cards);
|
||||
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 {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
|
||||
|
||||
@media #{$small} {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
|
||||
}
|
||||
|
||||
.page__type{
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
.page__title {
|
||||
max-width: var(--max-w-content);
|
||||
text-transform: uppercase;
|
||||
|
|
@ -21,79 +40,20 @@ margin-bottom: calc(var(--spacing) * 1);
|
|||
font-size: var(--fs-medium);
|
||||
font-weight: 500;
|
||||
line-height: var(--leading-title);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
|
||||
@media #{$small-up} {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page__cover{
|
||||
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 {
|
||||
.description {
|
||||
font-size: var(--fs-text);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
@media #{$small} {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
max-width: var(--max-w-content);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
|
||||
ul.list-nav{
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
// 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)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// .description-medium{
|
||||
// font-size: var(--fs-medium);
|
||||
// max-width: 58ch;
|
||||
// line-height: 1.1;
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,146 +1,116 @@
|
|||
#site-footer {
|
||||
#site-footer{
|
||||
|
||||
background-color: var(--dark);
|
||||
padding: calc(var(--padding-body)*2) var(--padding-body);
|
||||
z-index: 500;
|
||||
|
||||
|
||||
|
||||
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 {
|
||||
.site-footer__container{
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
|
||||
font-size: var(--fs-small);
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.logo {
|
||||
// margin-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
|
||||
svg {
|
||||
.logo {
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
svg{
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.baseline{
|
||||
max-width: 40ch;
|
||||
}
|
||||
|
||||
.list-links {
|
||||
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin-bottom: calc(var(--spacing)*0.25);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li:hover a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
p{
|
||||
margin: calc(var(--spacing)*0.5) 0;
|
||||
font-size: var(--fs-small);
|
||||
a{
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hightlight {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
.p__small{
|
||||
font-size: var(--fs-xsmall);
|
||||
color: var(--grey-600);
|
||||
}
|
||||
|
||||
.footer__mentions{
|
||||
p{
|
||||
font-size: var(--fs-xsmall);
|
||||
color: var(--color-txt)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// @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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.footer__socials > p{
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
@media #{$small}{
|
||||
|
||||
.list-links {
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
// li {
|
||||
// margin-bottom: calc(var(--spacing)*0.25);
|
||||
// }
|
||||
|
||||
.hightlight {
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
}
|
||||
.footer__socials{
|
||||
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);
|
||||
}
|
||||
|
||||
.credits {
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
.footer__mentions{
|
||||
grid-column: span 2;
|
||||
p{
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
.credits {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
#site-header {
|
||||
|
||||
z-index: var(--z-header);
|
||||
--gap: 3ch;
|
||||
|
||||
|
|
@ -11,249 +12,118 @@
|
|||
background-color: var(--color-bg);
|
||||
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%;
|
||||
height: 100%;
|
||||
// border-bottom: 1px solid var(--color-bg);
|
||||
// transition: border-color ease-in .5s;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: calc(var(--gap) * 0.25);
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
&:hover{
|
||||
color: var(--grey-200);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#site-title {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
width: 140px;
|
||||
|
||||
svg {
|
||||
flex-grow: 2;
|
||||
// opacity: 0;
|
||||
svg{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
svg {
|
||||
@media #{$small}{
|
||||
width: 80px;
|
||||
}
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-highlight,
|
||||
#nav-investigation {
|
||||
.header__title-page{
|
||||
display: none;
|
||||
flex-grow: 2;
|
||||
ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--gap);
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-highlight ul {
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
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 {
|
||||
position: absolute;
|
||||
// transition: top var(--transition-scroll);
|
||||
top: 10%;
|
||||
left: 0;
|
||||
ul{
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
// transform: translateY(-10px);
|
||||
transition: top 0.3s ease;
|
||||
pointer-events: none;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
gap: var(--gap);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#theme-toggle {
|
||||
|
||||
#theme-toggle{
|
||||
width: var(--h-block);
|
||||
height: var(--h-block);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg {
|
||||
svg{
|
||||
width: 18px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#lang-toggle {
|
||||
#lang-toggle{
|
||||
display: flex;
|
||||
gap: 0.75ch;
|
||||
padding-right: 1.5ch;
|
||||
a {
|
||||
font-size: var(--fs-small);
|
||||
gap: 1ch;
|
||||
button{
|
||||
font-weight: 500;
|
||||
}
|
||||
button:disabled {
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
button:disabled{ color: var(--color-txt-light); }
|
||||
}
|
||||
|
||||
#menu-toggle {
|
||||
#menu-toggle{
|
||||
cursor: pointer;
|
||||
svg {
|
||||
svg{
|
||||
width: 30px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.close {
|
||||
display: none;
|
||||
.close{ 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 {
|
||||
display: none;
|
||||
}
|
||||
#nav-investigation {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
top: 0px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#site-header.is-visible{
|
||||
// .site-header__inner{
|
||||
// border-color: var(--grey-800);
|
||||
// }
|
||||
}
|
||||
|
||||
@media #{$small-up} {
|
||||
#site-header #nav-investigation .title {
|
||||
|
||||
@media #{$medium}{
|
||||
#nav-highlight{
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
.site-menu__inner{
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
@include hide-scroll();
|
||||
|
||||
}
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
.search-form{
|
||||
|
|
@ -35,62 +28,40 @@
|
|||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
nav{
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
flex-grow: 1;
|
||||
ul{
|
||||
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;
|
||||
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{
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
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{
|
||||
|
||||
#site-menu{
|
||||
right: 0;
|
||||
|
||||
}
|
||||
|
||||
#menu-toggle{
|
||||
|
|
@ -98,10 +69,4 @@ body.menu-open{
|
|||
.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/btn--default';
|
||||
@import "components/buttons";
|
||||
@import "components/category";
|
||||
@import "components/tags";
|
||||
@import "components/keywords";
|
||||
@import "components/details-summary";
|
||||
@import "components/sort";
|
||||
@import "components/btn-group-mobile";
|
||||
|
||||
@import "components/figures";
|
||||
@import "components/investigation-hero";
|
||||
@import "components/summary-hero";
|
||||
@import "components/form-newsletter";
|
||||
@import "components/search-form";
|
||||
@import "components/list-socials";
|
||||
|
|
@ -23,28 +24,22 @@
|
|||
@import "components/text";
|
||||
@import "components/card-article";
|
||||
@import "components/card-article-small";
|
||||
@import "components/card-block";
|
||||
@import "components/card-block-small";
|
||||
@import "components/card-impact";
|
||||
@import "components/card-impact-small";
|
||||
// @import "components/card-package";
|
||||
@import "components/card-open-graph";
|
||||
@import "components/swiper";
|
||||
@import "components/lightbox";
|
||||
@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-menu";
|
||||
@import "partials/site-footer";
|
||||
@import "partials/main-layout";
|
||||
@import "partials/page-header";
|
||||
@import "partials/page-aside";
|
||||
@import "partials/container-cards";
|
||||
|
||||
@import "template/home";
|
||||
@import "template/page-single";
|
||||
@import "template/investigation";
|
||||
@import "template/investigation_content";
|
||||
@import "template/package";
|
||||
@import "template/impacts";
|
||||
|
|
|
|||
|
|
@ -7,14 +7,12 @@
|
|||
@media #{$medium} {
|
||||
padding-bottom: calc(var(--spacing)*4);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
|
||||
&:first-of-type{
|
||||
&:first-of-type{
|
||||
padding-top: calc(var(--spacing)*2);
|
||||
}
|
||||
.col-left{
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.baseline-section {
|
||||
|
|
@ -24,7 +22,19 @@
|
|||
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} {
|
||||
|
|
@ -35,16 +45,16 @@
|
|||
margin-bottom: calc(var(--spacing)*4);
|
||||
padding-top: calc(var(--spacing)*4);
|
||||
display: grid;
|
||||
// grid-template-columns: 1fr 2fr;
|
||||
grid-template-columns: minmax(360px, 1fr) 2fr;
|
||||
grid-gap: calc(var(--padding-body)*3);
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-gap: var(--gap);
|
||||
}
|
||||
|
||||
|
||||
.col-left {
|
||||
align-self: start;
|
||||
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%;
|
||||
}
|
||||
|
||||
&#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} {
|
||||
|
||||
.card--article,
|
||||
.card--block{
|
||||
.card--impact{
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
|
|
@ -90,11 +93,8 @@
|
|||
|
||||
|
||||
|
||||
#home__investigations {
|
||||
|
||||
.section--inner{
|
||||
padding-top: calc(var(--spacing)*1.5);
|
||||
}
|
||||
#home__investigations {
|
||||
|
||||
@media #{$small-up} {
|
||||
.col-right{
|
||||
|
|
@ -102,7 +102,44 @@
|
|||
grid-template-columns: 1fr 1fr;
|
||||
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{
|
||||
grid-column: span 2;
|
||||
|
|
@ -114,8 +151,6 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,15 +2,11 @@
|
|||
position: relative;
|
||||
|
||||
|
||||
|
||||
|
||||
.page__header {
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-content);
|
||||
margin-bottom: 0px;
|
||||
|
||||
|
||||
.page__description{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.page__content{
|
||||
|
|
@ -18,32 +14,118 @@
|
|||
|
||||
}
|
||||
|
||||
#investigation__hero{
|
||||
@media #{$small-up} {
|
||||
padding-top: calc(var(--spacing)*2.5);
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
}
|
||||
@media #{$small} {
|
||||
padding-top: calc(var(--spacing)*1.5);
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
}
|
||||
.investigation__content{
|
||||
font-size: var(--fs-text);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// @media screen and (max-width: 1340px) {
|
||||
// margin-left: auto;
|
||||
// margin-right: calc(var(--padding-body) * 3);
|
||||
// .panel-left {
|
||||
// width: calc(100vw - var(--max-w-cards) - var(--padding-body) * 6);
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media screen and (max-width: 1220px) {
|
||||
// margin-left: auto;
|
||||
// margin-right: 0px;
|
||||
// width: calc(100% - var(--panel-w) * 0.5 - var(--padding-body));
|
||||
// .panel-left {
|
||||
// width: calc(var(--panel-w) * 0.5);
|
||||
// }
|
||||
// }
|
||||
|
||||
// .section__article {
|
||||
// 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 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.investigation__content {
|
||||
|
||||
.section-txt {
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
}
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
|
||||
.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 {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
|
||||
.subsection-w-media {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: var(--padding-body);
|
||||
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);
|
||||
// min-height: calc(100vh - var(--header-h));
|
||||
padding-left: calc(var(--padding-body)*1.5);
|
||||
padding-right: calc(var(--padding-body)*1.5);
|
||||
margin-bottom: calc(var(--spacing)*6);
|
||||
&:target{
|
||||
padding-top: calc(var(--header-h) + var(--spacing)*2);
|
||||
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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 {
|
||||
min-height: calc(100vh - var(--header-h));
|
||||
padding-left: var(--padding-inner);
|
||||
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);
|
||||
min-height: calc(100vh - var(--header-h));
|
||||
max-width: var(--max-w-content);
|
||||
padding-left: var(--padding-inner);
|
||||
padding-right: var(--padding-inner);
|
||||
padding-bottom: calc(var(--spacing)*6);
|
||||
}
|
||||
|
||||
.section-title-only {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.media {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
font-size: 1.35em;
|
||||
|
||||
|
||||
p {
|
||||
margin: calc(var(--spacing)*0.75) 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
font-size: 1em;
|
||||
ul {
|
||||
padding-left: 3ch;
|
||||
|
||||
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 {
|
||||
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 {
|
||||
height: auto;
|
||||
}
|
||||
.media{
|
||||
|
||||
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');
|
||||
|
||||
function updateBodyOverflow(isOpen, dropdownElement = null) {
|
||||
|
|
@ -33,14 +33,12 @@ export function initDropdowns(responsiveSmall, responsiveSmallX) {
|
|||
if (other !== dropdown) {
|
||||
other.classList.remove('is-open', 'dropdown--align-right');
|
||||
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');
|
||||
|
||||
if (isOpening && !dropdown.closest('#bottom-bar')) {
|
||||
if (isOpening) {
|
||||
// Vérifie s'il y a la place à droite
|
||||
const content = dropdown.querySelector('.dropdown__content');
|
||||
const triggerRect = trigger.getBoundingClientRect();
|
||||
|
|
@ -58,19 +56,6 @@ export function initDropdowns(responsiveSmall, responsiveSmallX) {
|
|||
dropdown.classList.toggle('is-open');
|
||||
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
|
||||
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.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
||||
const c = dropdown.querySelector('.dropdown__content');
|
||||
if (c) c.style.transform = '';
|
||||
});
|
||||
updateBodyOverflow(false);
|
||||
});
|
||||
|
|
@ -97,8 +80,6 @@ export function initDropdowns(responsiveSmall, responsiveSmallX) {
|
|||
dropdowns.forEach(dropdown => {
|
||||
dropdown.classList.remove('is-open', 'dropdown--align-right');
|
||||
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
||||
const c = dropdown.querySelector('.dropdown__content');
|
||||
if (c) c.style.transform = '';
|
||||
});
|
||||
updateBodyOverflow(false);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,10 @@
|
|||
export function headerToggle() {
|
||||
const header = document.getElementById("site-header");
|
||||
const buttonToggle = document.querySelector("#menu-toggle");
|
||||
const siteMenu = document.getElementById("site-menu");
|
||||
const overlay = document.getElementById("menu-overlay");
|
||||
|
||||
if (!header || !buttonToggle) return;
|
||||
|
||||
function openMenu() {
|
||||
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();
|
||||
buttonToggle.addEventListener("click", () => {
|
||||
const isOpen = document.body.classList.toggle("menu-open");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
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() {
|
||||
const playButton = document.querySelector('#hero-play-video');
|
||||
if (!playButton) return;
|
||||
|
||||
const playerDiv = document.querySelector('#youtube-player');
|
||||
if (!playerDiv) return;
|
||||
if (!playButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Charger l'API YouTube IFrame Player
|
||||
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 () {
|
||||
playButton.addEventListener('click', function() {
|
||||
const extract = document.querySelector('.extract');
|
||||
const videoFull = document.querySelector('.video-full');
|
||||
const titleSmall = document.querySelector('.page-title-small');
|
||||
|
||||
if (extract) extract.style.display = 'none';
|
||||
if (titleSmall) titleSmall.style.display = 'none';
|
||||
|
||||
if (extract) {
|
||||
extract.style.display = 'none';
|
||||
}
|
||||
|
||||
if(titleSmall){
|
||||
titleSmall.style.display = 'none';
|
||||
}
|
||||
|
||||
if (videoFull) {
|
||||
videoFull.style.display = 'block';
|
||||
|
||||
function createPlayer() {
|
||||
new YT.Player('youtube-player', {
|
||||
videoId: playerDiv.dataset.videoId,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
playerVars: {
|
||||
autoplay: 1,
|
||||
rel: 0,
|
||||
},
|
||||
events: {
|
||||
onReady: (e) => e.target.playVideo(),
|
||||
},
|
||||
});
|
||||
}
|
||||
const iframe = videoFull.querySelector('iframe');
|
||||
if (iframe) {
|
||||
const src = iframe.src;
|
||||
|
||||
if (ytReady) {
|
||||
createPlayer();
|
||||
} else {
|
||||
window.onYouTubeIframeAPIReady = createPlayer;
|
||||
// Ajouter les paramètres autoplay et mute pour YouTube
|
||||
if (src) {
|
||||
const separator = src.includes('?') ? '&' : '?';
|
||||
iframe.src = src + separator + 'autoplay=1&mute=1';
|
||||
iframe.setAttribute('allow', 'autoplay; encrypted-media');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,32 +1,11 @@
|
|||
export function navInvestigation(){
|
||||
const nav = document.getElementById('nav-investigation');
|
||||
if (!nav) return;
|
||||
|
||||
const items = nav.querySelectorAll('li');
|
||||
const headerOffset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--h-header')) || 0;
|
||||
|
||||
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;
|
||||
}
|
||||
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}%`);
|
||||
});
|
||||
}
|
||||
|
||||
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 { 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 { initHeroSlider } from './hero-slider.js';
|
||||
import { playVideo } from './hero-video.js';
|
||||
import { initDropdowns } from './dropdown.js';
|
||||
import { initSwipers } from './swipers.js';
|
||||
import { initSliderBeforeAfter} from './sliderBeforeAfter.js';
|
||||
import { navInvestigation } from './investigation.js';
|
||||
import { progressBar, scrollBack} from './bottom-bar.js';
|
||||
import { initSort } from './sort.js';
|
||||
import { initLightbox } from './lightbox.js';
|
||||
import { initSliderBeforeAfter } from './investigation.js';
|
||||
|
||||
const responsiveMedium = 1080;
|
||||
const responsiveSmall = 768;
|
||||
const responsiveSmallX = 560;
|
||||
|
||||
window.onload = async function () {
|
||||
console.log("SCRIPT LOADED");
|
||||
|
||||
headerToggle();
|
||||
panelToggle(responsiveSmall);
|
||||
themeToggle();
|
||||
backToTop();
|
||||
|
||||
initSliderBeforeAfter();
|
||||
|
||||
tocMobile(responsiveSmall);
|
||||
copyLink();
|
||||
btnGroupMobile(responsiveSmall)
|
||||
bannerStickyDesktop(responsiveSmall);
|
||||
initHeroSlider();
|
||||
playVideo();
|
||||
initDropdowns(responsiveSmall, responsiveSmallX);
|
||||
initDropdowns(responsiveSmall);
|
||||
initSwipers();
|
||||
initLightbox();
|
||||
|
||||
progressBar();
|
||||
initSliderBeforeAfter();
|
||||
|
||||
|
||||
scrollBack();
|
||||
navInvestigation();
|
||||
|
||||
var elems = document.querySelectorAll('.grid-masonry');
|
||||
var msnries = [];
|
||||
var elem = document.querySelector('.grid-masonry');
|
||||
var msnry = null;
|
||||
|
||||
function initMasonry() {
|
||||
if (!elems.length) return;
|
||||
if (!elem) return;
|
||||
if (window.innerWidth >= responsiveSmall) {
|
||||
elems.forEach(function(elem, i) {
|
||||
if (!msnries[i]) {
|
||||
msnries[i] = new Masonry(elem, {
|
||||
itemSelector: '.card--block:not(.is-sort-hidden)',
|
||||
columnWidth: '.grid-sizer',
|
||||
percentPosition: true,
|
||||
gutter: 26
|
||||
});
|
||||
}
|
||||
});
|
||||
if (!msnry) {
|
||||
msnry = new Masonry(elem, {
|
||||
itemSelector: '.card--impact',
|
||||
columnWidth: '.grid-sizer',
|
||||
percentPosition: true,
|
||||
gutter: 26
|
||||
});
|
||||
}
|
||||
} else {
|
||||
msnries.forEach(function(msnry, i) {
|
||||
if (msnry) {
|
||||
msnry.destroy();
|
||||
msnries[i] = null;
|
||||
}
|
||||
});
|
||||
if (msnry) {
|
||||
msnry.destroy();
|
||||
msnry = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
spaceBetween: 20,
|
||||
speed: 600,
|
||||
loop: true,
|
||||
|
||||
// Touch/Swipe settings
|
||||
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
|
||||
type: pages
|
||||
parent: page('enquetes')
|
||||
template: investigation
|
||||
layout: cards
|
||||
text: "{{ page.title }}"
|
||||
text: "{{ page.title }}, {{ page.subtitle }}"
|
||||
info: "{{ page.incidentConsequences }} à {{ page.incidentLocation }}"
|
||||
size: huge
|
||||
search: true
|
||||
image:
|
||||
cover: true
|
||||
ratio: 16/9
|
||||
|
|
|
|||
|
|
@ -4,20 +4,4 @@ tabs:
|
|||
contentTab:
|
||||
label: Contenu
|
||||
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
|
||||
|
|
|
|||
|
|
@ -3,17 +3,4 @@ title: Contact
|
|||
tabs:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
icon: page
|
||||
fields:
|
||||
title:
|
||||
label: Titre
|
||||
type: text
|
||||
required: true
|
||||
body:
|
||||
label: Corps
|
||||
type: blocks
|
||||
fieldsets:
|
||||
- heading
|
||||
- text
|
||||
- image
|
||||
seo: seo/page
|
||||
|
|
|
|||
|
|
@ -24,18 +24,6 @@ columns:
|
|||
methodologies:
|
||||
label: Méthodologies
|
||||
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:
|
||||
type: hidden
|
||||
default: noindex, nofollow
|
||||
|
|
|
|||
|
|
@ -5,37 +5,14 @@ tabs:
|
|||
label: Contenu
|
||||
icon: page
|
||||
fields:
|
||||
sections:
|
||||
label: Sections
|
||||
type: structure
|
||||
fields:
|
||||
baseline:
|
||||
label: Baseline (colonne gauche)
|
||||
type: text
|
||||
width: 1/1
|
||||
buttonText:
|
||||
label: Texte du bouton
|
||||
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
|
||||
mainBaseline:
|
||||
label: Baseline
|
||||
type: text
|
||||
help: À gauche des enquêtes.
|
||||
width: 1/2
|
||||
impactsBaseline:
|
||||
label: Phrase d'introduction des impacts
|
||||
type: text
|
||||
help: À gauche des impacts.
|
||||
width: 1/2
|
||||
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:
|
||||
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').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
|
||||
|
||||
linkedInvestigations:
|
||||
type: pages
|
||||
template: investigation
|
||||
linkedMedias:
|
||||
type: url
|
||||
seo: seo/page
|
||||
|
|
|
|||
|
|
@ -3,26 +3,4 @@ title: Impacts
|
|||
tabs:
|
||||
contentTab:
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
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:
|
||||
contentTab:
|
||||
|
|
@ -31,7 +24,7 @@ tabs:
|
|||
image:
|
||||
ratio: 12/7
|
||||
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
|
||||
fields:
|
||||
chapo:
|
||||
|
|
@ -39,24 +32,37 @@ tabs:
|
|||
type: writer
|
||||
nodes: 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:
|
||||
label: Preview vidéo
|
||||
label: Preview
|
||||
type: files
|
||||
multiple: false
|
||||
help: "Extrait joué en autoplay muet. À remplir avec l'URL vidéo — les deux champs vont ensemble."
|
||||
width: 1/2
|
||||
help: Extrait joué en autoplay muet.
|
||||
width: 1/3
|
||||
when:
|
||||
heroType: video
|
||||
videoUrl:
|
||||
label: URL vidéo complète (YouTube embed)
|
||||
type: url
|
||||
width: 1/2
|
||||
help: "À remplir avec la preview — les deux champs vont ensemble."
|
||||
heroCaption:
|
||||
label: Légende du hero
|
||||
type: writer
|
||||
nodes: false
|
||||
marks:
|
||||
- italic
|
||||
help: "Recommandé : 140 caractères max"
|
||||
width: 1/3
|
||||
when:
|
||||
heroType: video
|
||||
body:
|
||||
label: Corps
|
||||
type: layout
|
||||
|
|
@ -71,7 +77,6 @@ tabs:
|
|||
- video
|
||||
# - horizontal-gallery
|
||||
- gallery
|
||||
- insert
|
||||
metadataTab:
|
||||
label: Métadonnées
|
||||
icon: table
|
||||
|
|
@ -122,7 +127,7 @@ tabs:
|
|||
team:
|
||||
label: Équipe Index
|
||||
type: structure
|
||||
help: Le « rôle » s’affiche entre parenthèses
|
||||
width: 2/4
|
||||
columns:
|
||||
name:
|
||||
label: Nom
|
||||
|
|
|
|||
|
|
@ -3,41 +3,6 @@ title: Investigations
|
|||
tabs:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
icon: page
|
||||
columns:
|
||||
- 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 📌.
|
||||
sections:
|
||||
investigations: fields/investigations
|
||||
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:
|
||||
contentTab:
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
type: files
|
||||
multiple: false
|
||||
required: true
|
||||
layout: cards
|
||||
width: 1/3
|
||||
image:
|
||||
ratio: 12/7
|
||||
cover: true
|
||||
help: Image utilisée dans la liste des dossiers. Format 16/9.
|
||||
help: Image utilisée dans la liste des dossiers
|
||||
description:
|
||||
label: Description
|
||||
type: writer
|
||||
width: 2/3
|
||||
linkedContent:
|
||||
label: Enquêtes
|
||||
label: Contenu
|
||||
type: pages
|
||||
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
|
||||
|
|
|
|||
|
|
@ -3,27 +3,17 @@ title: Dossiers
|
|||
tabs:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
icon: page
|
||||
columns:
|
||||
- width: 1/3
|
||||
fields:
|
||||
chapo:
|
||||
label: Introduction
|
||||
type: writer
|
||||
nodes: false
|
||||
buttons: false
|
||||
- width: 2/3
|
||||
sections:
|
||||
packages:
|
||||
label: Dossiers
|
||||
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
|
||||
sections:
|
||||
packages:
|
||||
label: Dossiers
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
contentTab:
|
||||
label: Contenu
|
||||
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
|
||||
|
|
|
|||
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,
|
||||
'languages' => true,
|
||||
'date.handler' => 'intl',
|
||||
// 'auth' => [
|
||||
// 'methods' => [
|
||||
// 'password' => ['2fa' => true]
|
||||
// ]
|
||||
// ],
|
||||
'thumbs' => [
|
||||
'quality' => 80,
|
||||
'presets' => [
|
||||
|
|
@ -22,52 +17,15 @@ return [
|
|||
'srcsets' => [
|
||||
'default' => [200, 400, 600, 800, 1024, 1440, 2048],
|
||||
'webp' => [
|
||||
'300w' => ['width' => 300, 'format' => 'webp'],
|
||||
'600w' => ['width' => 600, 'format' => 'webp'],
|
||||
'900w' => ['width' => 900, 'format' => 'webp'],
|
||||
'1200w' => ['width' => 1200, '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'],
|
||||
'300w' => ['width' => 300 * 1.2, 'format' => 'webp'],
|
||||
'600w' => ['width' => 600 * 1.2, 'format' => 'webp'],
|
||||
'900w' => ['width' => 900 * 1.2, 'format' => 'webp'],
|
||||
'1200w' => ['width' => 1200 * 1.2, 'format' => 'webp'],
|
||||
],
|
||||
],
|
||||
],
|
||||
'panel' => [
|
||||
'menu' => require_once __DIR__ . '/menu.php',
|
||||
'css' => '/assets/css/panel.css',
|
||||
'home' => 'pages/home',
|
||||
'menu' => require_once __DIR__ . '/menu.php'
|
||||
],
|
||||
'donorbox' => [
|
||||
'api_key' => '', // À remplir avec la clé API Donorbox
|
||||
|
|
@ -77,14 +35,6 @@ return [
|
|||
],
|
||||
'tobimori.seo.canonicalBase' => 'https://www.index.ngo',
|
||||
|
||||
'cache' => [
|
||||
'og' => true,
|
||||
],
|
||||
|
||||
'routes' => [
|
||||
require(__DIR__ . '/routes/newsletter.php'),
|
||||
],
|
||||
|
||||
'hooks' => [
|
||||
'page.update:after' => function ($newPage) {
|
||||
if ($newPage->intendedTemplate()->name() !== 'investigation') {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,25 @@
|
|||
<?php
|
||||
|
||||
return [
|
||||
'dashboard' => [
|
||||
'label' => 'Dashboard',
|
||||
'icon' => 'bolt',
|
||||
'link' => '/',
|
||||
'current' => function (string $current): bool {
|
||||
$path = Kirby\Cms\App::instance()->path();
|
||||
return Str::contains($path, '/site');
|
||||
}
|
||||
],
|
||||
'-',
|
||||
'home' => [
|
||||
'label' => 'Accueil',
|
||||
'icon' => 'home',
|
||||
'link' => 'pages/home',
|
||||
'current' => function (string $current): bool {
|
||||
$path = Kirby\Cms\App::instance()->path();
|
||||
return $path === '' || Str::contains($path, 'pages/home');
|
||||
return Str::contains($path, 'pages/home');
|
||||
}
|
||||
],
|
||||
'-',
|
||||
'enquetes' => [
|
||||
'label' => 'Enquêtes',
|
||||
'icon' => 'pen',
|
||||
|
|
@ -29,15 +38,6 @@ return [
|
|||
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' => [
|
||||
'label' => 'Dossiers',
|
||||
'icon' => 'folder',
|
||||
|
|
@ -77,31 +77,13 @@ return [
|
|||
],
|
||||
'legal-notices' => [
|
||||
'label' => 'Mentions légales',
|
||||
'icon' => 'edit-line',
|
||||
'icon' => 'email',
|
||||
'link' => 'pages/mentions-legales',
|
||||
'current' => function (string $current): bool {
|
||||
$path = Kirby\Cms\App::instance()->path();
|
||||
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' => [
|
||||
'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',
|
||||
'name' => 'English',
|
||||
'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',
|
||||
'name' => 'Français',
|
||||
'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
|
||||
/** @var \Kirby\Cms\Block $block */
|
||||
$imageBefore = $block->imageBefore()->toFile();
|
||||
$imageAfter = $block->imageAfter()->toFile();
|
||||
$caption = $block->caption()->value();
|
||||
$imageAfter = $block->imageAfter()->toFile();
|
||||
$caption = $block->caption()->value();
|
||||
?>
|
||||
|
||||
<?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
|
||||
/**
|
||||
* Card Open Graph snippet
|
||||
* Fetches and displays OG data from an external URL with cache.
|
||||
*
|
||||
* @var string $url The URL to scrape OG data from
|
||||
*/
|
||||
<?php
|
||||
// URL à scraper (remplacez par l'URL souhaitée)
|
||||
$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';
|
||||
|
||||
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');
|
||||
$cacheKey = md5($url);
|
||||
$ogData = $cache->get($cacheKey);
|
||||
// Configuration du contexte pour éviter les erreurs SSL
|
||||
$context = stream_context_create([
|
||||
'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) {
|
||||
$ogData = [
|
||||
'title' => '',
|
||||
'description' => '',
|
||||
'image' => '',
|
||||
'site_name' => '',
|
||||
'url' => $url,
|
||||
];
|
||||
// Récupérer le HTML
|
||||
$html = @file_get_contents($url, false, $context);
|
||||
|
||||
$context = stream_context_create([
|
||||
'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 ($html === false) {
|
||||
return $ogData;
|
||||
}
|
||||
|
||||
$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) {
|
||||
// Parse OG meta tags (both property...content and content...property orders)
|
||||
preg_match_all('/<meta\s+(?:property=["\']og:([^"\']+)["\']\s+content=["\']([^"\']*)["\']|content=["\']([^"\']*?)["\']\s+property=["\']og:([^"\']+)["\'])/i', $html, $matches);
|
||||
if (!empty($matches[1])) {
|
||||
foreach ($matches[1] as $index => $property) {
|
||||
$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])) {
|
||||
foreach ($matches[1] as $index => $property) {
|
||||
$prop = $property ?: $matches[4][$index];
|
||||
$content = $matches[2][$index] ?: $matches[3][$index];
|
||||
$content = html_entity_decode(trim($content), ENT_QUOTES | ENT_HTML5, 'UTF-8');
|
||||
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: si pas de og:title, utiliser <title>
|
||||
if (empty($ogData['title'])) {
|
||||
preg_match('/<title>([^<]+)<\/title>/i', $html, $titleMatch);
|
||||
if (!empty($titleMatch[1])) {
|
||||
$ogData['title'] = htmlspecialchars($titleMatch[1]);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: use <title> if no og:title
|
||||
if (empty($ogData['title'])) {
|
||||
preg_match('/<title>([^<]+)<\/title>/i', $html, $titleMatch);
|
||||
if (!empty($titleMatch[1])) {
|
||||
$ogData['title'] = html_entity_decode($titleMatch[1], ENT_QUOTES, 'UTF-8');
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fallback: si pas de site_name, utiliser le domaine
|
||||
if (empty($ogData['site_name'])) {
|
||||
$parsed = parse_url($url);
|
||||
$ogData['site_name'] = $parsed['host'] ?? '';
|
||||
}
|
||||
|
||||
// Always use domain as site_name
|
||||
$parsed = parse_url($url);
|
||||
$ogData['site_name'] = $parsed['host'] ?? '';
|
||||
return $ogData;
|
||||
}
|
||||
|
||||
$cache->set($cacheKey, $ogData, 360); // 6 hours
|
||||
}
|
||||
?>
|
||||
$ogData = getOpenGraphData($url);
|
||||
|
||||
<div class="card--open-graph">
|
||||
<div class="open-graph__inner">
|
||||
// Toujours utiliser le domaine de l'URL pour site_name
|
||||
$parsed = parse_url($url);
|
||||
$ogData['site_name'] = $parsed['host'] ?? '';
|
||||
?>
|
||||
|
||||
<?php if (!empty($ogData['image'])): ?>
|
||||
<figure>
|
||||
<img src="<?= htmlspecialchars($ogData['image']) ?>" alt="">
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
<div class="card--open-graph">
|
||||
<div class="open-graph__inner">
|
||||
|
||||
<div class="content">
|
||||
<?php if (!empty($ogData['site_name'])): ?>
|
||||
<span class="site-name"><?= htmlspecialchars($ogData['site_name']) ?></span>
|
||||
<?php endif ?>
|
||||
<?php if (!empty($ogData['image'])): ?>
|
||||
<figure>
|
||||
<img src="<?= $ogData['image'] ?>" alt="<?= $ogData['title'] ?>">
|
||||
</figure>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($ogData['title'])): ?>
|
||||
<h3 class="title">
|
||||
<a href="<?= htmlspecialchars($ogData['url']) ?>" target="_blank">
|
||||
<?= htmlspecialchars($ogData['title']) ?>
|
||||
</a>
|
||||
</h3>
|
||||
<?php endif ?>
|
||||
<div class="content">
|
||||
<?php if (!empty($ogData['site_name'])): ?>
|
||||
<span class="site-name"><?= $ogData['site_name'] ?></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($ogData['description'])): ?>
|
||||
<p class="description"><?= htmlspecialchars($ogData['description']) ?></p>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<a class="link-block" href="<?= htmlspecialchars($ogData['url']) ?>" target="_blank"></a>
|
||||
</div>
|
||||
</div>
|
||||
<?php if (!empty($ogData['title'])): ?>
|
||||
|
||||
<h3 class="title">
|
||||
<a href="<?= $ogData['url'] ?>" target="_blank">
|
||||
<?= $ogData['title'] ?>
|
||||
</a>
|
||||
</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') ?>
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<div class="site-footer__container">
|
||||
|
||||
<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="logo"><?= svg('assets/images/index-logo.svg') ?></div>
|
||||
|
||||
<div class="list-links">
|
||||
<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>
|
||||
<div class="footer__newsletter">
|
||||
|
||||
<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 class="footer__socials">
|
||||
<p>Suivez Index sur les réseaux sociaux</p>
|
||||
<?php snippet('socials') ?>
|
||||
</div>
|
||||
|
||||
<p class="credits">
|
||||
© 2025 Index Investigation | Site développé par <a href="https://studio-variable.com/" target="_blank">Studio Variable</a>
|
||||
</p>
|
||||
|
||||
|
||||
<div class="footer__mentions">
|
||||
<p>
|
||||
© 2025 Index Investigation |
|
||||
<a target="_blank" href="https://www.index.ngo/mentions-legales/">Mentions légales</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<?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