diff --git a/.claude/settings.local.json b/.claude/settings.local.json index a48b55d..eb39442 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -3,7 +3,9 @@ "allow": [ "Bash(git add:*)", "Bash(git commit:*)", - "Bash(cat:*)" + "Bash(cat:*)", + "WebFetch(domain:unicode-org.github.io)", + "Bash(git mv:*)" ], "deny": [], "ask": [] diff --git a/.forgejo/workflows/deploy.yml b/.forgejo/workflows/deploy.yml index 67cc286..6203168 100644 --- a/.forgejo/workflows/deploy.yml +++ b/.forgejo/workflows/deploy.yml @@ -32,7 +32,7 @@ jobs: set ftp:ssl-allow no open -u $USERNAME,$PASSWORD $PREPRODUCTION_HOST mirror --reverse --verbose --ignore-time --parallel=10 -x local/ assets assets - mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ -x header.php site site + mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ site site mirror --reverse --verbose --ignore-time --parallel=10 kirby kirby mirror --reverse --verbose --ignore-time --parallel=10 vendor vendor quit diff --git a/.gitignore b/.gitignore index 42cbd09..22dd854 100644 --- a/.gitignore +++ b/.gitignore @@ -61,4 +61,4 @@ Icon # Local local/ -/local/* \ No newline at end of file +.claude diff --git a/assets/css/base/_body.scss b/assets/css/base/_body.scss index b15509b..95b56aa 100644 --- a/assets/css/base/_body.scss +++ b/assets/css/base/_body.scss @@ -29,9 +29,6 @@ body{ color: var(--color-txt); background-color: var(--color-bg); - width: 100vw; - overflow-x: hidden; - } img{ @@ -51,7 +48,7 @@ img{ // } } - +.swiper-button-next, .swiper-button-prev, body, #site-header, #site-footer{ transition: background-color 0.3s ease, color 0.3s ease; } @@ -61,4 +58,57 @@ body, #site-header, #site-footer{ grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; -} \ No newline at end of file +} + + +@mixin hide-scroll(){ + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } +} + +@mixin clamp($lines) { + display: -webkit-box; + -webkit-line-clamp: $lines; + -webkit-box-orient: vertical; + overflow: hidden; +} + +@mixin hover-card-line(){ + border-bottom: var(--border-light); + &:first-of-type{ + border-top: var(--border-light); + } + position: relative; + &::before{ + content: ''; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; + } + + &:hover{ + background-color: var(--grey-950); + border-color: var(--color-txt); + &::before{ + border-color: var(--color-txt); + } + + } +} + + +body.menu-open, +body.is-hidden{ + overflow-y: hidden; + main, footer, #nav-highlight, .btn--back-to-top{ + transition: opacity .3s ease-in; + opacity: 0.1; + } +} + + diff --git a/assets/css/base/_responsive.scss b/assets/css/base/_responsive.scss index 0017258..81a0ffc 100644 --- a/assets/css/base/_responsive.scss +++ b/assets/css/base/_responsive.scss @@ -11,3 +11,8 @@ $paysage: "screen and (max-height: 670px) and (min-width: 1080px)"; @media #{$medium}{ } + + +@media #{$x-small}{ + +} diff --git a/assets/css/base/_var.scss b/assets/css/base/_var.scss index def7c48..29cbfe9 100644 --- a/assets/css/base/_var.scss +++ b/assets/css/base/_var.scss @@ -9,16 +9,18 @@ // --fs-big: 38px; --fs-xsmall: 10px; - --fs-small: 12px; - --fs-normal: 16px; - --fs-medium: 20px; + --fs-small: 16px; + --fs-normal: 20px; + --fs-medium: 24px; --fs-big: 30px; --fs-xbig: 38px; --fs-button-bold: 22px; - --max-w-content: 700px; - --max-w-container: 1280px; + --max-w-content: 640px; + --max-w-cards: 940px; + --z-header: 2000; + --panel-w: 310px; @media #{$small} { --fs-medium: 20px; @@ -41,6 +43,7 @@ --grey-400: #969696; --grey-600: #6d6d6d; --grey-800: #383838; + --grey-950: #222222; --color-bg: #161616; --color-txt: #ffffff; @@ -96,15 +99,16 @@ :root[data-theme="light"] { - --grey-100: #1f1f1f; + --grey-100: #2f2f2f; --grey-200: #2f2f2f; --grey-300: #4a4a4a; --grey-400: #6a6a6a; --grey-600: #9a9a9a; --grey-800: #cfcfcf; + --grey-950: #eaeaea; --color-bg: #efefef; - --color-txt: #000000; + --color-txt: #161616; --color-txt-light: var(--grey-400); --color-accent: #ff00ff; diff --git a/assets/css/components/_btn--don.scss b/assets/css/components/_btn--don.scss deleted file mode 100644 index 3c4e2d0..0000000 --- a/assets/css/components/_btn--don.scss +++ /dev/null @@ -1,60 +0,0 @@ -#btn--don__mobile { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - - padding-top: calc(var(--spacing) * 0.5); - padding-bottom: calc(var(--spacing) * 1.5); - position: fixed; - bottom: 0px; - left: 0; - z-index: 100; - opacity: 0; - transition: opacity ease-in 0.2s; - - pointer-events: none; - &.is-visible { - pointer-events: all; - opacity: 1; - } - - &.is-sticky { - position: relative; - } - - @media #{$small-up} { - display: none !important; - } -} - -.btn--don { - --vertical-padding: 0.5ch; - height: calc(var(--h-block) + var(--vertical-padding)); - border-radius: calc(var(--h-block) / 1); - padding: var(--vertical-padding) 2ch; - background-color: var(--color-accent); - color: var(--color-bg); - font-family: var(--font); - font-size: var(--fs-medium); - font-weight: var(--fw-bold); - - a { - text-decoration: none; - display: flex; - align-items: center; - gap: 0.5ch; - } - - .icon { - height: 28px; - position: relative; - top: 1px; - } - - svg { - fill: var(--color-bg); - width: 24px; - height: 24px; - } -} diff --git a/assets/css/components/_btn-group-mobile.scss b/assets/css/components/_btn-group-mobile.scss new file mode 100644 index 0000000..b2b9ff7 --- /dev/null +++ b/assets/css/components/_btn-group-mobile.scss @@ -0,0 +1,48 @@ +.btn--group__mobile{ + z-index: calc(var(--z-header) - 10); + opacity: 0; + transition: opacity .3s ease-in; + + &.is-visible{ + opacity: 1; + + } + + position: fixed; + bottom: 0; + left: 0; + width: 100vw; + height: calc(var(--h-block) * 3); + padding: calc(var(--spacing) * 0.75) var(--padding-body); + // padding-top: var(--spacing); + background-color: var(--color-bg); + background: linear-gradient(0deg, + var(--color-bg) 0%, + var(--color-bg) 75%, + transparent 100%); + + // background-color: yellow; + + display: flex; + align-items: flex-end; + gap: var(--padding-inner); + button, .dropdown{ + flex-grow: 1; + width: 100%; + } + + + + + +} + + +@media #{$small-up}{ + .btn--group__mobile{ + display: none; + opacity: 0!important; + + } +} + diff --git a/assets/css/components/_buttons.scss b/assets/css/components/_buttons.scss index ece7d5d..d3877b5 100644 --- a/assets/css/components/_buttons.scss +++ b/assets/css/components/_buttons.scss @@ -3,6 +3,9 @@ button{ font-family: var(--font); font-size: var(--fons-normal); color: var(--color-txt); + svg{ + fill: var(--color-txt); + } &:hover{ color: var(--grey-100); svg{ fill: var(--grey-100); } @@ -32,31 +35,62 @@ button:disabled{ .btn--small{ - display: block; - height: calc(var(--h-block)*0.75); - border: var(--border); + height: calc(var(--h-block)*1); + border: var(--border-light); border-radius: var(--radius-btn); font-size: var(--fs-small); + font-weight: 500; line-height: 1; overflow: hidden; white-space: nowrap; + + a{ display: flex; align-items: center; justify-content: center; + gap: 1ch; width: 100%; height: 100%; padding: 0 1ch; padding-top: 2px; } + + .icon{ + --size: 10px; + height: var(--size); + width: var(--size); + position: relative; + top: -8px; + svg{ + width: 100%; + fill: var(--color-txt); + } + } + &.no-link{ display: flex; align-items: center; justify-content: center; + gap: 1ch; padding: 0 1ch; padding-top: 2px; } + &:hover{ + color: currentColor; + border-color: currentColor; + background-color: var(--grey-950); + + } +} + +.btn--small.is-selected{ + background-color: var(--color-txt); + border-color: var(--color-txt); + color: var(--color-bg); + a{ color: var(--color-bg); } + svg{ fill: var(--color-bg); } } .btn--bold, @@ -66,6 +100,7 @@ button:disabled{ border: var(--border); border-radius: var(--radius-btn); font-size: var(--fs-small); + font-weight: 500; text-transform: uppercase; line-height: 1; overflow: hidden; @@ -120,103 +155,109 @@ button:disabled{ background-color: var(--color-bg); svg{ fill: var(--color-txt); } &:hover{ - background-color: var(--grey-800); - color: var(--color-txt); + background-color: var(--grey-950); + color: var(--grey-100); + border-color: var(--grey-100); a{ - background-color: var(--grey-800); - color: var(--color-txt); + background-color: var(--grey-950); + color: var(--grey-100); } + svg{ fill: var(--grey-100); } } } +.btn--toc{ + svg{ + width: 15px; + height: 15px; + top: 0px; + } +} -.btn--light{ - border: var(--border-light); + +@mixin btn--go-to(){ + position: relative; + .btn--go-to{ + position: absolute; + right: var(--padding-inner); + bottom: calc(var(--padding-inner) - 3px); + svg{ + width: 15px; + height: 15px; + fill: var(--color-txt); + } + @media #{$small}{ + svg{ + width: 11px; + height: 11px; + } + } + @media #{$x-small}{ + right: calc(var(--padding-inner)*0.5); + bottom: calc(var(--padding-inner)*0.25); + svg{ + width: 11px; + height: 11px; + } + } + } + &:hover{ + .btn--go-to{ + animation: wiggle-left 0.8s ease-in-out; + } + } + + + } +@keyframes wiggle-left { + 0% { transform: translateX(0); } + 40% { transform: translateX(-10px); } + 80% { transform: translateX(0); } + 100% { transform: translateX(0); } +} + -// DELETE ? - -.btn__default{ - - - --size: calc(var(--h-block) - 8px); - font-size: var(--fs-normal); - font-weight: var(--fw-normal); - height: var(--size); - padding-right: 1.5ch; - - position: relative; - - +.btn--back-to-top{ display: flex; - align-items: center; - gap: 0ch; - // padding-right: 0.5ch; - color: var(--color-accent); - font-weight: var(--fw-medium); - text-decoration: none; - - cursor: pointer; - - .icon, .txt{ z-index: 10; } + border-color: var(--color-txt); + width: fit-content; + margin: var(--spacing) auto; + @media #{$small}{ + margin-bottom: calc(var(--spacing)*2); + } .icon{ - width: var(--size); - height: var(--size); - display: flex; - align-items: center; - justify-content: center; - color: var(--color-bg); - text-align: center; - + width: 12px; + height: 12px; + transform: rotate(-90deg); + transform-origin: center; + position: relative; + top: -1px; svg{ - fill: var(--color-bg); - width: 80%; + width: 12px; + height: 12px; } } - .txt{ - font-family: var(--font-title); - color: var(--color-accent); - font-size: var(--fs-normal); - font-weight: var(--fw-bold); - padding-left: 1ch; - } - - &::after{ - content: ''; - display: block; - background-color: var(--color-accent); - border-radius: calc(var(--size)/2); - width: var(--size); - height: var(--size); - position: absolute; - left: 0; - z-index: 0; - transition: width .2s - } - &:hover{ - // - .txt{ - color: var(--color-bg); - display: block; - } - &::after{ - width: 100%; + background-color: var(--grey-950); + color: var(--grey-100); + border-color: var(--grey-100); + a{ + background-color: var(--grey-950); + color: var(--grey-100); } + svg{ fill: var(--grey-100); } } - - - - - - } + + + diff --git a/assets/css/components/_card-article-small.scss b/assets/css/components/_card-article-small.scss index ee37d96..1c659d0 100644 --- a/assets/css/components/_card-article-small.scss +++ b/assets/css/components/_card-article-small.scss @@ -3,22 +3,46 @@ .card--article-small{ @include grid-content(); - margin-bottom: var(--spacing); - + + padding-top: calc(var(--spacing)*0.5); + padding-bottom: calc(var(--spacing)*0.5); + + border-bottom: var(--border-light); + &:first-of-type{ + border-top: var(--border-light); + } + &.has-link { + @include hover-card-line(); + } + + + // &:first-of-type{ + // padding-top: calc(var(--spacing)*0.5); + // border-top: var(--border-light); + // } @include figure-16-9(); - + + figure{ + @media #{$x-small}{ margin-left: 0px; } + } + + .content{ display: flex; flex-direction: column; padding-top: calc(var(--spacing)*0.25); - + padding-right: calc(var(--padding-inner)*3); } .title{ - font-weight: normal; - font-size: var(--fs-medium); + font-weight: 400; + font-size: var(--fs-small); margin-bottom: 0.25em; + text-wrap: balance; + max-width: 42ch; + text-transform: uppercase; + line-height: 1.1; a{ text-decoration: none;} } @@ -27,15 +51,19 @@ flex-grow: 1; color: var(--color-txt-light); } - .keywords{ - margin-top: 1.5em; - padding-bottom: calc(var(--spacing)*0.25); - color: var(--color-txt-light); + + .description{ + @include clamp(2); + margin-bottom: calc(var(--spacing)*0.75); + margin-top: calc(var(--spacing)*0.25); } - &:hover{ - .title{ text-decoration: underline;} - } + + + @include btn--go-to(); + @include hover-card-line(); + + .keywords{ display: none; } @media #{$medium}{ .title{ @@ -45,6 +73,17 @@ } @media #{$x-small}{ + + // figure{ + // aspect-ratio: inherit; + // width: 100%; + // height: 100%; + // } + + .icon-article{ display: none; } + .description{ + display: none; + } .content{ padding: 0; } @@ -55,12 +94,24 @@ font-size: var(--fs-small); margin-top: 0.25em; } - .keywords{ - margin-top: 0.5em; - padding-bottom: 0; + + .keywords { + display: block; + line-height: 1.1; + margin-top: calc(var(--spacing)*0.5); + padding-right: calc(var(--padding-inner)*1); + li, a{ + display: inline; + border: none; + padding: 0px; + color: var(--color-txt-light); + } + } + } + } \ No newline at end of file diff --git a/assets/css/components/_card-article.scss b/assets/css/components/_card-article.scss index 7caf5bd..b0a46d1 100644 --- a/assets/css/components/_card-article.scss +++ b/assets/css/components/_card-article.scss @@ -4,14 +4,37 @@ display: flex; flex-direction: column; + padding: var(--padding-inner); @include figure-16-9(); .content{ - padding: var(--padding-inner); + // padding: var(--padding-inner); display: flex; flex-direction: column; - flex-grow: 2; + } + .pin{ + position: absolute; + top: calc(var(--padding-inner)*1.5); + left: calc(var(--padding-inner)*1.5); + z-index: 10; + width: 24px; + height: 24px; + border-radius: var(--radius-small); + background-color: rgba(255, 255, 255, 0.27); + display: flex; + align-items: center; + justify-content: center; + svg{ + width: 16px; + fill: var(--color-txt); + } + } + + .time-alone{ + display: none; + margin-top: calc(var(--spacing)*0.25); + margin-bottom: calc(var(--spacing)*0.75); } .title{ @@ -19,14 +42,14 @@ font-size: var(--fs-medium); font-weight: normal; text-transform: uppercase; + text-wrap: balance; // flex-grow: 2; a{ text-decoration: none;} } .description{ - margin-top: calc(var(--spacing)*1); - font-size: var(--fs-small); + margin-top: calc(var(--spacing)*0.5); display: -webkit-box; -webkit-line-clamp: 3; @@ -36,7 +59,8 @@ .dl{ margin-top: calc(var(--spacing)*0.5); - font-size: var(--fs-small); + // font-size: var(--fs-small); + border-bottom: var(--border-light); .dl__group{ @include grid-content(); border-top: var(--border-light); @@ -48,24 +72,37 @@ padding-right: 1ch; } - ul:not(.keywords){ + ul{ list-style: none; - li{ - padding-bottom: 0.2em; - } - + li{ padding-bottom: 0.2em; } } - .dl__group__keywords{ - padding-bottom: 0; - } + } + + + .keywords-wrapper{ + z-index: 3000; + margin-top: calc(var(--spacing)*0.5); + // margin-bottom: calc(var(--spacing)*0.5); + } + + .keywords{ + + grid-column: 2; } &:hover{ border-color: var(--color-txt); + background-color: var(--grey-950); } + .link-block{ + z-index: 2000; + } + + + } \ No newline at end of file diff --git a/assets/css/components/_card-folder.scss b/assets/css/components/_card-folder.scss new file mode 100644 index 0000000..6f1a0f4 --- /dev/null +++ b/assets/css/components/_card-folder.scss @@ -0,0 +1,138 @@ +.card--folder{ + position: relative; + max-width: var(--max-w-cards); + border: var(--border-light); + padding: var(--padding-inner); + @include grid-content(); + @include figure-16-9(); + + + container-type: inline-size; + container-name: cardfolder; + + .content{ + display: flex; + flex-direction: column; + } + + + .title{ + flex-grow: 1; + font-weight: 500; + font-size: var(--fs-small); + + margin-bottom: 0.25em; + text-wrap: balance; + max-width: 42ch; + text-transform: uppercase; + padding-top: calc(var(--spacing)*0.25); + a{ text-decoration: none;} + + @media #{$small}{ + font-size: var(--fs-normal); + } + + .icon{ + padding-right: 1ch; + position: relative; + top: 1px; + svg{ + height: 15px; + width: 15px; + fill: var(--color-txt); + } + } + + } + + .short{ + @include clamp(3); + } + + ul{ + display: flex; + list-style: none; + gap: 1ch; + color: var(--color-txt-light); + padding-top: calc(var(--spacing)*0.5); + + li + li{ + &::before{ + content: "|"; + padding-right: 1ch; + } + } + @media #{$small}{ + font-size: var(--fs-small); + } + } + + .btn--go-to{ + position: absolute; + right: calc(var(--padding-inner)*1); + bottom: var(--padding-inner); + } + + @include btn--go-to(); + + &:hover{ + background-color: var(--grey-950); + border-color: var(--color-txt); + } + + + +} + + + +[data-template="investigation-summary"] .card--folder{ + + border: none; + padding-left: 0; + padding-right: 0; + border-bottom: var(--border-light); + &:first-of-type{ + border-top: var(--border-light); + } + &.has-link { + @include hover-card-line(); + } + + figure{ + @media #{$x-small}{ margin-left: 0px; } + + } + + + +} + + + + + + +@container cardfolder (width < 680px) { + figure{ + aspect-ratio: inherit; + width: 100%; + height: 100%; + } + .short{ + margin-top: calc(var(--spacing)*0.5); + } +} + +@container cardfolder (width < 520px) { + figure{ + aspect-ratio: inherit; + width: 100%; + height: 100%; + } + .short, ul{ + font-size: var(--fs-small); + + } + +} \ No newline at end of file diff --git a/assets/css/components/_card-impact-small.scss b/assets/css/components/_card-impact-small.scss new file mode 100644 index 0000000..848351b --- /dev/null +++ b/assets/css/components/_card-impact-small.scss @@ -0,0 +1,111 @@ +.card--impact-small { + + border-bottom: var(--border-light); + &:first-of-type{ + border-top: var(--border-light); + } + + + @include grid-content(); + padding: var(--padding-inner) 0; + + &.has-link { + @include hover-card-line(); + } + + @include btn--go-to(); + + .btn--go-to { + top: calc(var(--padding-inner)*1); + bottom: auto; + } + + .content { + grid-column: 2; + } + + .card--open-graph { + grid-column: 2; + z-index: 10; + } + + .keywords { + grid-column: 2; + z-index: 10; + + @media #{$x-small} { + display: block; + line-height: 1.1; + li, a{ + display: inline; + border: none; + padding: 0px; + color: var(--color-txt-light); + } + } + + } + + &:not([data-impact-type="media"]) .content, + .keywords { + @media #{$x-small} { + grid-column: span 2; + } + } + + .tag { + width: auto; + justify-self: start; + position: relative; + top: -5px; + } + + &:not([data-impact-type="media"]) { + .content { + padding-right: calc(var(--padding-inner)*2.5); + @media #{$x-small} { + padding-right: 0; + } + } + + } + + + .open-graph__details { + grid-column: 2; + @include details-summary(); + + summary { + color: var(--color-txt-light); + + .arrow-details svg { + fill: var(--color-txt-light); + } + } + + @media #{$x-small} { + summary { + @include grid-content(); + grid-row-gap: 0; + + .summary-inner { + grid-column: 2; + } + } + + grid-column: 1/3; + } + } + + + .open-graph__inner { + margin-top: calc(var(--spacing)*0.5); + .card--open-graph { + margin-bottom: calc(var(--spacing)*0.5); + } + + } + +} + + diff --git a/assets/css/components/_card-impact.scss b/assets/css/components/_card-impact.scss index 90ba5d1..e4a94c4 100644 --- a/assets/css/components/_card-impact.scss +++ b/assets/css/components/_card-impact.scss @@ -1,77 +1,264 @@ -.card--impact{ - @include grid-content(); - padding: calc(var(--spacing)*0.5) 0; - border-bottom: var(--border-light); - &:first-of-type{ - border-top: var(--border-light); - } +.card--impact { - .content{ - grid-column: 2; - } - &:not([data-impact-type="media"]) .content{ - @media #{$x-small}{ grid-column: span 2; } - } + container-type: inline-size; + container-name: impact; + border: var(--border-light); + margin-bottom: calc(var(--spacing)*1); - .tag{ - - width: auto; - justify-self: start; - position: relative; - top: -5px; - - } - - .content{ - .see-more{ - color: var(--color-txt-light); - text-decoration: none; - white-space: nowrap; - &::after{ - content: ' +' - } - } + &.has-link { + @include hover-card-line(); } - .open-graph__details{ - grid-column: span 2; - @include details-summary(); - summary{ - color: var(--color-txt-light); - .arrow-details svg{ fill: var(--color-txt-light);} - } - } + .card--impact__inner { + @include grid-content(); + padding: calc(var(--padding-inner)*1.5) var(--padding-inner); - // @media #{$x-small-up}{ - - .open-graph__details{ - summary{ - @include grid-content(); - .summary-inner{ - grid-column: 2; - - } - } - - } - .open-graph__inner{ - margin-top: calc(var(--spacing)*0.5); - margin-bottom: calc(var(--spacing)*1); - @media #{$small-up}{ - margin-bottom: calc(var(--spacing)*2); - } - .card--open-graph{ - margin-bottom: calc(var(--spacing)*0.5); - } - - } - + // border-bottom: var(--border-light); + // padding: calc(var(--spacing)*0.5) 0; + // &:first-of-type{ + // border-top: var(--border-light); // } - -} \ No newline at end of file + + + + + @include btn--go-to(); + + .btn--go-to { + top: calc(var(--padding-inner)*1); + bottom: auto; + } + + + + .content { + grid-column: 2; + } + + .card--open-graph { + grid-row: 1/3; + grid-column: 2; + z-index: 10; + } + + .keywords-wrapper { + grid-column: 1; + grid-row: 2/4; + align-self: end; + z-index: 10; + } + + &:not([data-impact-type="media"]) .content { + @media #{$x-small} { + grid-column: span 2; + } + } + + .tag { + + width: auto; + justify-self: start; + position: relative; + top: -5px; + + } + + &:not([data-impact-type="media"]) { + .content { + padding-right: calc(var(--padding-inner)*2.5); + } + + } + + + + + .investigations { + z-index: 10; + grid-column: 2; + list-style: none; + font-size: var(--fs-small); + + + a { + text-decoration: none; + color: var(--color-txt-light); + + } + + .icon { + position: relative; + top: 2px; + + svg { + width: 14px; + height: 14px; + fill: var(--color-txt-light); + } + } + + li:hover { + a { + color: var(--color-txt); + } + + .icon svg { + fill: var(--color-txt); + } + } + + } + + + + + + + + + .open-graph__details { + grid-column: 2; + @include details-summary(); + + summary { + color: var(--color-txt-light); + + .arrow-details svg { + fill: var(--color-txt-light); + } + } + + @media #{$x-small} { + summary { + @include grid-content(); + grid-row-gap: 0; + + .summary-inner { + grid-column: 2; + } + } + + grid-column: 1/3; + } + } + + + + + .open-graph__inner { + margin-top: calc(var(--spacing)*0.5); + // margin-bottom: calc(var(--spacing)*1); + + .card--open-graph { + margin-bottom: calc(var(--spacing)*0.5); + } + + } + } +} + + + +@container impact (width < 460px) { + .card--impact__inner{ + display: block!important; + padding-top: var(--padding-inner)!important; + padding-bottom: calc(var(--padding-inner)*0.75)!important; + + + .tag, .date{ + display: inline-flex; + margin-right: 2ch; + top: 0px!important; + } + + .content{ + margin-top: calc(var(--spacing)*0.75); + margin-bottom: calc(var(--spacing)*0.25); + padding-right: 0!important; + } + + .card--open-graph{ + margin-top: calc(var(--spacing)*0.75); + margin-bottom: calc(var(--spacing)*0.25); + } + + .investigations{ + margin-top: calc(var(--spacing)*0.25); + margin-bottom: calc(var(--spacing)*0.25); + } + + .keywords-wrapper { + margin-top: calc(var(--spacing)*1); + + } + .date, + .content, + details { + font-size: 14px !important; + } + + .btn--go-to { + top: calc(var(--padding-inner)*1.25)!important; + bottom: auto; + right: calc(var(--padding-inner)*1.25)!important; + } +} +} + + +@media #{$x-small}{ + .card--impact__inner{ + display: block!important; + padding-top: var(--padding-inner)!important; + padding-bottom: calc(var(--padding-inner)*0.75)!important; + + + .tag, .date{ + display: inline-flex; + margin-right: 2ch; + top: 0px!important; + } + + .content{ + margin-top: calc(var(--spacing)*0.75); + margin-bottom: calc(var(--spacing)*0.25); + padding-right: 0!important; + } + + .card--open-graph{ + margin-top: calc(var(--spacing)*0.75); + margin-bottom: calc(var(--spacing)*0.25); + } + + .investigations{ + margin-top: calc(var(--spacing)*0.25); + margin-bottom: calc(var(--spacing)*0.25); + } + + .keywords-wrapper { + margin-top: calc(var(--spacing)*1); + + } + .date, + .content, + details { + font-size: 14px !important; + } + + .btn--go-to { + top: calc(var(--padding-inner)*1.25)!important; + bottom: auto; + right: calc(var(--padding-inner)*1.25)!important; + } +} +} + + + diff --git a/assets/css/components/_card-open-graph.scss b/assets/css/components/_card-open-graph.scss index 2b028b3..1dca834 100644 --- a/assets/css/components/_card-open-graph.scss +++ b/assets/css/components/_card-open-graph.scss @@ -1,19 +1,26 @@ .card--open-graph{ @include grid-content(); - - border: var(--border-light); + + // border: var(--border-light); + border: 1px solid var(--grey-600); border-radius: var(--radius-small); position: relative; figure{ grid-column: 1; grid-row: 1; - + width: 100%; + height: 100%; + img{ + width: 100%; + height: 100%; + object-fit: cover; + } } - @include figure-16-9(); + // @include figure-16-9(); @media #{$x-small}{ @@ -33,11 +40,14 @@ .site-name{ color: var(--color-txt-light); font-size: var(--fs-small); + margin-bottom: 3px; } .title{ font-size: var(--fs-normal); font-weight: normal; + line-height: 1.1; + padding-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @@ -57,7 +67,26 @@ } &:hover{ - .title{ text-decoration: underline;} + border-color: var(--color-txt); + background-color: var(--grey-950); + } +} + +.open-graph__inner{ + + container-type: inline-size; + container-name: opengraph; +} +@container opengraph (width < 500px) { + .card--open-graph{ + + .content{ + padding: calc(var(--padding-inner)*0.5); + } + + figure{ + aspect-ratio: inherit; + } } } \ No newline at end of file diff --git a/assets/css/components/_details-summary.scss b/assets/css/components/_details-summary.scss index f556811..e73d365 100644 --- a/assets/css/components/_details-summary.scss +++ b/assets/css/components/_details-summary.scss @@ -31,6 +31,13 @@ } + summary:hover{ + color: var(--color-txt); + .arrow-details svg{ + fill: var(--color-txt); + } + } + &[open]{ .arrow-details svg{ transform: rotate(90deg); diff --git a/assets/css/components/_dropdown.scss b/assets/css/components/_dropdown.scss new file mode 100644 index 0000000..0c813c8 --- /dev/null +++ b/assets/css/components/_dropdown.scss @@ -0,0 +1,170 @@ +.dropdown { + position: relative; + display: inline-block; + + &__trigger { + cursor: pointer; + } + + &__content { + position: absolute; + top: 100%; + left: 0; + min-width: 180px; + margin-top: var(--padding-inner); + background-color: var(--color-bg); + border: var(--border); + border-radius: var(--radius-btn); + opacity: 0; + visibility: hidden; + transform: translateY(-4px); + transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; + z-index: 100; + + &::before{ + content: "◀"; + transform: rotate(90deg); + font-size: 14px; + position: absolute; + top: -13px; + left: 16px; + } + ul { + list-style: none; + margin: 0; + padding: var(--padding-inner); + } + + a, button { + display: block; + width: 100%; + padding: 0.75em 1ch; + font-size: var(--fs-small); + text-align: left; + text-decoration: none; + color: var(--color-txt); + background: none; + border: none; + cursor: pointer; + + &:hover { + background-color: var(--grey-800); + } + } + } + + // Positionnement par défaut : sous le bouton, aligné à gauche + // Variante : aligné à droite + &--align-right .dropdown__content { + left: auto; + right: 0; + &::before{ + left: auto; + right: 16px; + + } + } + + &.is-open { + .dropdown__content { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + } + + // PANEL  + &--position-mobile .dropdown__content { + top: auto; + bottom: calc(var(--h-block) + var(--padding-inner)*2); + left: auto; + right: 0; + margin-top: 0; + margin-left: 4px; + + &::before{ + font-family: Arial; + content: "◀"; + transform: rotate(-90deg); + font-size: 14px; + position: absolute; + top: auto; + bottom: -13px; + left: auto; + right: 10%; + } + } + + + + &--position-mobile.is-open { + .dropdown__content { + transform: translateX(0); + } + } + + + + + @media #{$small-up}{ + &--position-panel .dropdown__content { + top: auto; + bottom: 0; + left: calc(100% + var(--padding-inner)); + margin-top: 0; + margin-left: 4px; + + &::before{ + font-family: Arial; + content: "◀"; + transform: rotate(0deg); + font-size: 14px; + position: absolute; + top: auto; + bottom: 4px; + left: -11px; + } + } + + + + &--position-panel.is-open { + .dropdown__content { + transform: translateX(0); + } + } + + } + + + @media #{$x-small}{ + + .dropdown__content{ + width: calc(100vw - var(--padding-body)*2); + .modal--share{ + width: 100%; + } + } + + + } + +} + + + +@media screen and (max-width: 1280px){ + + [data-template="investigations"]{ + .dropdown .dropdown__content { + left: auto; + right: 0; + &::before{ + left: auto; + right: 16px; + + } + } + } + +} diff --git a/assets/css/components/_figures.scss b/assets/css/components/_figures.scss index 8be72a8..6548038 100644 --- a/assets/css/components/_figures.scss +++ b/assets/css/components/_figures.scss @@ -12,6 +12,23 @@ } } +} + + + +@mixin figure-16-9-hover{ + figure{ + aspect-ratio: 16/9; + display: flex; + overflow: hidden; + img{ + width: 100%; + height: 100%; + object-fit: cover; + transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; + + } + } &:hover{ figure img{ transform: scale(1.05); } } diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss index d0bfd24..22269ce 100644 --- a/assets/css/components/_hero.scss +++ b/assets/css/components/_hero.scss @@ -1,18 +1,14 @@ #hero{ - width: calc(100vw - var(--padding-body)*4); + width: 100%; position: relative; - left: calc(var(--padding-body)*1); + left: 0; - @media #{$medium}{ - width: calc(100vw - var(--padding-body)*2); - position: relative; - left: 0; - } - @media #{$small}{ - width: 100vw; - left: calc(var(--padding-body)*-1); - } + + // @media #{$small}{ + // width: 100vw; + // left: calc(var(--padding-body)*-1); + // } figcaption{ color: var(--color-txt-light); diff --git a/assets/css/components/_keywords.scss b/assets/css/components/_keywords.scss index d7dbe5d..8eeeead 100644 --- a/assets/css/components/_keywords.scss +++ b/assets/css/components/_keywords.scss @@ -1,14 +1,50 @@ .keywords{ list-style: none; - li{ - display: inline-block; - padding-right: 0.75ch; - a{ - text-decoration: none; - &::before{ - content: "#"; - padding-right: 0.25ch; - } + display: flex; + flex-wrap: wrap; + gap: 0.75ch; + + a{ + display: inline-flex; + align-items: center; + justify-content: center; + height: calc(var(--h-block)*0.75); + padding: 0 1ch; + padding-top: 2px; + border: var(--border-light); + border-radius: var(--radius-btn); + font-size: var(--fs-small); + line-height: 1; + white-space: nowrap; + text-decoration: none; + &::before{ + content: "#"; + padding-right: 0.25ch; } + &:hover{ + border-color: currentColor; + background-color: var(--grey-800); + } + + } +} + + +.keywords--small{ + list-style: none; + + li{ + display: inline; + } + + a{ + text-decoration: none; + &::before{ + content: "#"; + padding-right: 0.25ch; + } + &::after{ + content: "\00a0"; + } } } \ No newline at end of file diff --git a/assets/css/components/_modal-share.scss b/assets/css/components/_modal-share.scss index 95d0760..686a588 100644 --- a/assets/css/components/_modal-share.scss +++ b/assets/css/components/_modal-share.scss @@ -1,29 +1,22 @@ .modal--share{ - border: var(--border); - border-radius: var(--radius-btn); + width: 240px; + padding-bottom: var(--padding-inner); background-color: var(--color-bg); - padding: var(--padding-inner); - padding-top: calc( var(--padding-inner)*0.5); - padding-bottom: calc( var(--padding-inner)*1.5); - - .modal-title{ - display: none; - } - .socials{ display: block; list-style: none; li{ - font-size: var(--fs-normal); - padding-bottom: 6px; - border-bottom: var(--border-light); - padding-top: 6px; - - a{ + font-size: var(--fs-normal); + border-bottom: var(--border-light); + &:first-of-type{ + border-top: var(--border-light); + } + + a{ display: flex; align-items: center; - gap: 1ch; + gap: 2ch; text-decoration: none; } .icon { @@ -38,27 +31,20 @@ position: relative; top: 2px; } - &:hover{ - color: var(--color-accent); - - .icon svg, - .icon svg path, - .icon svg rect{ - fill: var(--color-accent)!important; - } - } } + + - - } .copy-link{ display: flex; gap: 0.5ch; - margin-top: calc(var(--spacing)*0.75); + padding: 0 var(--padding-inner); + height: var(--h-block); + width: 100%; .copy-link__field{ flex-grow: 1; @@ -99,24 +85,63 @@ &:focus{ border-color: var(--color-txt); outline: none; - + } + &.is-copied{ + color: var(--color-accent)!important; } } - button{ + .copy-link__btn{ background-color: var(--color-txt); color: var(--color-bg); border-radius: var(--radius-btn); padding: 0 1ch; font-size: var(--fs-small); padding-top: 2px; + white-space: nowrap; + text-align: center; + + width: 8ch!important; + + &::after{ + content: "\00a0"; + } + &:hover{ background-color: var(--color-accent); - } + } + + } } + + +// SHARE ACTIONS -------------------------------------------------- +// ---------------------------------------------------------------- + +#share-banner__content, +#share-banner__aside, +#share-banner__desktop{ + display: none; +} +#share-banner__content ~ .modal--share, +#share-banner__aside ~ .modal--share, +#share-banner__desktop ~ .modal--share{ + opacity: 0; + pointer-events: none; + transition: opacity .2s ease-in; +} + +#share-banner__content:checked ~ .modal--share, +#share-banner__aside:checked ~ .modal--share, +#share-banner__desktop:checked ~ .modal--share{ + opacity: 1; + pointer-events: auto; +} + + diff --git a/assets/css/components/_slider-before-after.scss b/assets/css/components/_slider-before-after.scss new file mode 100644 index 0000000..149bb34 --- /dev/null +++ b/assets/css/components/_slider-before-after.scss @@ -0,0 +1,86 @@ + +.slider-before-after{ + + width: 100%; + + max-width: 700px; + z-index: 300; + display: grid; + place-content: center; + position: relative; + overflow: hidden; + --position: 50%; + + img { + display: block; + max-width: 100%; + } + + + .image-container { + position: relative; + width: 100%; + // max-width: 800px; + // max-height: 90vh; + // aspect-ratio: 1/1; + } + + + + .slider-image { + width: 100%; + height: 100%; + object-fit: cover; + object-position: left; + } + + .image-before { + position: absolute; + inset: 0; + width: var(--position); + } + + .slider { + position: absolute; + inset: 0; + cursor: pointer; + opacity: 0; + /* for Firefox */ + width: 100%; + height: 100%; + } + + .slider:focus-visible ~ .slider-button { + outline: 5px solid black; + outline-offset: 3px; + } + + .slider-line { + position: absolute; + inset: 0; + width: .2rem; + height: 100%; + background-color: #fff; + /* z-index: 10; */ + left: var(--position); + transform: translateX(-50%); + pointer-events: none; + } + + .slider-button { + position: absolute; + background-color: #fff; + color: black; + padding: .5rem; + border-radius: 100vw; + display: grid; + place-items: center; + top: 50%; + left: var(--position); + transform: translate(-50%, -50%); + pointer-events: none; + /* z-index: 100; */ + box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5); + } + +} \ No newline at end of file diff --git a/assets/css/components/_sort.scss b/assets/css/components/_sort.scss index 15c7360..8d75927 100644 --- a/assets/css/components/_sort.scss +++ b/assets/css/components/_sort.scss @@ -1,9 +1,4 @@ -.sort{ - - display: flex; - align-items: center; - gap: 1ch; - +button.sort{ .arrow{ line-height: 0; --size: 12px; @@ -23,17 +18,6 @@ } - .icon{ - --size: 10px; - height: var(--size); - width: var(--size); - position: relative; - top: -8px; - svg{ - width: 100%; - fill: var(--color-txt); - } - } &[data-sort-type="up"]{ @@ -42,20 +26,17 @@ } } +} - - - &:hover{ - color: var(--grey-100); - svg{ - fill: var(--grey-100); - } - } - - - - - +.page__sort { + margin-bottom: calc(var(--spacing) * 1); + display: flex; + justify-content: right; + grid-gap: var(--padding-inner); + width: 100%; + max-width: var(--max-w-cards); + margin-inline: auto; + // z-index: calc(var(--z-header) - 100); } \ No newline at end of file diff --git a/assets/css/components/_swiper.scss b/assets/css/components/_swiper.scss new file mode 100644 index 0000000..d5e709d --- /dev/null +++ b/assets/css/components/_swiper.scss @@ -0,0 +1,77 @@ +.swiper { + + + --slide-padding: 30px; + + + .swiper-button-prev, + .swiper-button-next { + --swiper-navigation-size: 32px; + color: var(--color-txt); + background-color: var(--color-bg); + height: 100%; + width: var(--slide-padding); + top: 0px!important; + height: calc(100% - var(--spacing)*1); + // background-color: red; + + svg { + width: 14px; + } + + &.swiper-button-disabled { + opacity: 1; + + svg { + opacity: 0.05; + } + } + } + + .swiper-button-prev { + left: 0px!important; + top: 0px; + justify-content: flex-start; + } + + .swiper-button-next { + right: 0px!important; + top: 0px; + justify-content: flex-end; + + } + + .swiper-slide { + padding-left: var(--slide-padding); + padding-right: var(--slide-padding); + } + + .swiper-pagination { + position: relative; + margin-top: 0px!important; + margin-top: calc(var(--spacing)*0.5)!important; + + .swiper-pagination-bullet { + width: 15px; + height: 4px; + border-radius: 2px; + background: var(--color-txt-light); + } + + .swiper-pagination-bullet-active { + background: var(--color-txt); + } + } + + @media #{$x-small} { + + .swiper-button-prev, + .swiper-button-next { + display: none; + } + + .swiper-slide { + padding: 0px; + } + } +} \ No newline at end of file diff --git a/assets/css/components/_tags.scss b/assets/css/components/_tags.scss index ab17009..eb870db 100644 --- a/assets/css/components/_tags.scss +++ b/assets/css/components/_tags.scss @@ -21,27 +21,4 @@ } -.tag-inline{ - - height: calc(var(--h-block)*0.75); - // border-radius: calc(var(--h-block)*0.75/2); - border-radius: var(--radius-small); - border: var(--border-medium); - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 1.5ch; - padding-top: 3px; - - font-size: var(--fs-small); - line-height: 1; - - background-color: var(--color-bg); - color: var(--color-txt-light); - - overflow: hidden; - white-space: nowrap; - text-transform: uppercase; - -} \ No newline at end of file diff --git a/assets/css/components/_text.scss b/assets/css/components/_text.scss index 16d325d..e69de29 100644 --- a/assets/css/components/_text.scss +++ b/assets/css/components/_text.scss @@ -1,19 +0,0 @@ -.page__title{ - font-size: var(--fs-big); - font-weight: normal; - text-transform: uppercase; - margin: calc(var(--spacing)*1.5) auto; - text-align: center; - max-width: var(--max-w-container); - -} - -.page__description{ - display: none; - max-width: var(--max-w-content); - margin: calc(var(--spacing)*2) auto; - p{ - font-size: var(--fs-normal); - - } -} \ No newline at end of file diff --git a/assets/css/partials/_container-cards.scss b/assets/css/partials/_container-cards.scss new file mode 100644 index 0000000..c2f8ab4 --- /dev/null +++ b/assets/css/partials/_container-cards.scss @@ -0,0 +1,23 @@ +.container-cards{ + max-width: var(--max-w-cards); + margin: 0 auto; + display: grid; + grid-gap: calc(var(--spacing)*1); +} + +.container-cards__investigations { + + @media #{$x-small-up} { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + grid-auto-rows: minmax(100px, auto); + grid-gap: var(--padding-body); + margin-bottom: 10vh; + } + @media #{$x-small} { + margin-bottom: 10vh; + .card--article { + // margin-bottom: calc(var(--spacing) * 1.5); + } + } + } \ No newline at end of file diff --git a/assets/css/partials/_main-layout.scss b/assets/css/partials/_main-layout.scss index a92ae2b..865d6be 100644 --- a/assets/css/partials/_main-layout.scss +++ b/assets/css/partials/_main-layout.scss @@ -1,6 +1,8 @@ body{ min-height: 100dvh; min-height: 100vh; + width: 100vw; + // overflow-x: hidden; display: flex; flex-direction: column; @@ -9,6 +11,22 @@ body{ main{ flex-grow: 1; padding: 0 var(--padding-body); + padding-top: var(--header-h); + padding-bottom: calc(var(--spacing)*2); + + min-height: 100dvh; + min-height: 100vh; + + .page__header, + .page__content{ + max-width: var(--max-w-cards); + margin-inline: auto; + } } + + + + + } \ No newline at end of file diff --git a/assets/css/partials/_page-header.scss b/assets/css/partials/_page-header.scss new file mode 100644 index 0000000..c8f477d --- /dev/null +++ b/assets/css/partials/_page-header.scss @@ -0,0 +1,60 @@ +.page__type{ + + height: calc(var(--h-block)*0.75); + border-radius: var(--radius-small); + border: var(--border-medium); + + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 1.5ch; + padding-top: 3px; + + font-size: var(--fs-small); + line-height: 1; + + background-color: var(--color-bg); + color: var(--color-txt-light); + + overflow: hidden; + white-space: nowrap; + text-transform: uppercase; + +} + + + +main .page__header { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 2); + + @media #{$small} { + margin-top: calc(var(--spacing) * 2); + + } + + .page__title { + max-width: var(--max-w-content); + text-transform: uppercase; + font-weight: normal; + font-size: var(--fs-big); + line-height: var(--leading-tight); + margin-top: calc(var(--spacing) * 1); + margin-bottom: calc(var(--spacing) * 0.5); + text-wrap: balance; + } + + .description { + // max-width: 68ch; + + // font-size: var(--fs-medium); + max-width: 58ch; + line-height: 1.1; + } + + .description-medium{ + // font-size: var(--fs-medium); + max-width: 58ch; + line-height: 1.1; + } +} diff --git a/assets/css/partials/_site-footer.scss b/assets/css/partials/_site-footer.scss index bb0a774..56f49e6 100644 --- a/assets/css/partials/_site-footer.scss +++ b/assets/css/partials/_site-footer.scss @@ -4,6 +4,11 @@ padding: calc(var(--padding-body)*2) var(--padding-body); z-index: 500; + .site-footer__container{ + max-width: var(--max-w-cards); + margin: 0 auto; + padding: 0 var(--padding-body); + } .logo { margin-top: calc(var(--spacing)*0.25); @@ -39,7 +44,6 @@ @media #{$small}{ - margin-top: calc(var(--spacing)*2); .footer__socials{ @@ -68,15 +72,11 @@ .site-footer__container{ display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 3fr 2fr; column-gap: calc(var(--spacing)*2); - - max-width: 1200px; - margin: 0 auto; } .footer__socials .socials{ - max-width: 400px; columns: 2; margin-top: calc(var(--spacing)*1); } diff --git a/assets/css/partials/_site-header.scss b/assets/css/partials/_site-header.scss index 0c7c009..e9c4c11 100644 --- a/assets/css/partials/_site-header.scss +++ b/assets/css/partials/_site-header.scss @@ -1,25 +1,24 @@ -@keyframes add-border { - from { - border-bottom-color: transparent; - } - to { - border-bottom: var(--grey-800); - } -} - #site-header { - z-index: 900; + z-index: var(--z-header); --gap: 3ch; + position: fixed; + top: 0; + left: 0; + width: 100vw; height: var(--header-h); background-color: var(--color-bg); padding: 0 var(--padding-body); + box-shadow: -1px 4px 10px 0px var(--color-bg); + .site-header__inner{ width: 100%; height: 100%; + // border-bottom: 1px solid var(--color-bg); + // transition: border-color ease-in .5s; display: flex; align-items: center; @@ -38,6 +37,7 @@ #site-title { flex-grow: 2; + // opacity: 0; svg{ width: 100px; @media #{$small}{ @@ -65,6 +65,7 @@ align-items: center; gap: var(--gap); text-transform: uppercase; + font-weight: 500; } @@ -85,6 +86,9 @@ #lang-toggle{ display: flex; gap: 1ch; + button{ + font-weight: 500; + } button:disabled{ color: var(--color-txt-light); } } @@ -92,6 +96,7 @@ cursor: pointer; svg{ width: 30px; + fill: var(--color-txt); } .close{ display: none; } @@ -107,37 +112,11 @@ } + #site-header.is-visible{ - position: fixed; - top: 0; - - .site-header__inner{ - border-bottom: var(--border-light); - - #nav-highlight li:not(.soutenir){ - display: none; - } - #site-title { - @media #{$small-up}{ - flex-grow: 0; - width: calc((100vw - var(--max-w-content))/2 - var(--padding-body)*2); - } - @media #{$medium}{ - width: calc(var(--banner-medium) - var(--padding-body)); - } - } - - .header__title-page{ - @media #{$small-up}{ - display: block; - } - flex-grow: 2; - } - } - - & ~ main{ - margin-top: var(--header-h); - } + // .site-header__inner{ + // border-color: var(--grey-800); + // } } diff --git a/assets/css/partials/_site-menu.scss b/assets/css/partials/_site-menu.scss index ca72b01..228419b 100644 --- a/assets/css/partials/_site-menu.scss +++ b/assets/css/partials/_site-menu.scss @@ -6,10 +6,13 @@ top: var(--header-h); right: calc(var(--menu-w)*-1); transition: right .3s ease-in; + @media #{$small}{ + transition: right .4s ease-in; + } background-color: var(--color-bg); border-left: var(--border-light); padding: var(--padding-body); - z-index: 1000; + z-index: calc(var(--z-header) - 1); @media #{$x-small}{ width: 100vw; @@ -30,6 +33,7 @@ ul{ list-style-type: none; text-transform: uppercase; + font-weight: 500; li{ font-size: var(--fs-normal); a{ @@ -50,11 +54,11 @@ } body.menu-open{ - overflow: hidden; - main, footer, #nav-highlight{ - transition: opacity .3s ease-in; - opacity: 0.1; - } + // overflow: hidden; + // main, footer, #nav-highlight{ + // transition: opacity .3s ease-in; + // opacity: 0.1; + // } #site-menu{ right: 0; diff --git a/assets/css/style.css b/assets/css/style.css index ee01e21..a0496b9 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -3,14 +3,16 @@ --font: "Executive", Arial, sans-serif; --title: "System", Arial, sans-serif; --fs-xsmall: 10px; - --fs-small: 12px; - --fs-normal: 16px; - --fs-medium: 20px; + --fs-small: 16px; + --fs-normal: 20px; + --fs-medium: 24px; --fs-big: 30px; --fs-xbig: 38px; --fs-button-bold: 22px; - --max-w-content: 700px; - --max-w-container: 1280px; + --max-w-content: 640px; + --max-w-cards: 940px; + --z-header: 2000; + --panel-w: 310px; --leading-tight: 1.05; --leading-normal: 1.3; --fw-normal: 400; @@ -22,6 +24,7 @@ --grey-400: #969696; --grey-600: #6d6d6d; --grey-800: #383838; + --grey-950: #222222; --color-bg: #161616; --color-txt: #ffffff; --color-txt-light: var(--grey-400); @@ -65,14 +68,15 @@ } } :root[data-theme=light] { - --grey-100: #1f1f1f; + --grey-100: #2f2f2f; --grey-200: #2f2f2f; --grey-300: #4a4a4a; --grey-400: #6a6a6a; --grey-600: #9a9a9a; --grey-800: #cfcfcf; + --grey-950: #eaeaea; --color-bg: #efefef; - --color-txt: #000000; + --color-txt: #161616; --color-txt-light: var(--grey-400); --color-accent: #ff00ff; --color-accent-50: #ffe9ff; @@ -112,8 +116,6 @@ body { font-size: var(--fs-normal); color: var(--color-txt); background-color: var(--color-bg); - width: 100vw; - overflow-x: hidden; } img { @@ -130,25 +132,35 @@ img { cursor: pointer; } +.swiper-button-next, .swiper-button-prev, body, #site-header, #site-footer { transition: background-color 0.3s ease, color 0.3s ease; } -@keyframes add-border { - from { - border-bottom-color: transparent; - } - to { - border-bottom: var(--grey-800); - } +body.menu-open, +body.is-hidden { + overflow-y: hidden; } +body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight, body.menu-open .btn--back-to-top, +body.is-hidden main, +body.is-hidden footer, +body.is-hidden #nav-highlight, +body.is-hidden .btn--back-to-top { + transition: opacity 0.3s ease-in; + opacity: 0.1; +} + #site-header { - z-index: 900; + z-index: var(--z-header); --gap: 3ch; + position: fixed; + top: 0; + left: 0; width: 100vw; height: var(--header-h); background-color: var(--color-bg); padding: 0 var(--padding-body); + box-shadow: -1px 4px 10px 0px var(--color-bg); } #site-header .site-header__inner { width: 100%; @@ -192,6 +204,7 @@ body, #site-header, #site-footer { align-items: center; gap: var(--gap); text-transform: uppercase; + font-weight: 500; } #site-header #theme-toggle { width: var(--h-block); @@ -209,6 +222,9 @@ body, #site-header, #site-footer { display: flex; gap: 1ch; } +#site-header #lang-toggle button { + font-weight: 500; +} #site-header #lang-toggle button:disabled { color: var(--color-txt-light); } @@ -217,6 +233,7 @@ body, #site-header, #site-footer { } #site-header #menu-toggle svg { width: 30px; + fill: var(--color-txt); } #site-header #menu-toggle .close { display: none; @@ -225,39 +242,6 @@ body, #site-header, #site-footer { fill: var(--grey-200) !important; } -#site-header.is-visible { - position: fixed; - top: 0; -} -#site-header.is-visible .site-header__inner { - border-bottom: var(--border-light); -} -#site-header.is-visible .site-header__inner #nav-highlight li:not(.soutenir) { - display: none; -} -@media screen and (min-width: 768px) { - #site-header.is-visible .site-header__inner #site-title { - flex-grow: 0; - width: calc((100vw - var(--max-w-content)) / 2 - var(--padding-body) * 2); - } -} -@media screen and (max-width: 1080px) { - #site-header.is-visible .site-header__inner #site-title { - width: calc(var(--banner-medium) - var(--padding-body)); - } -} -#site-header.is-visible .site-header__inner .header__title-page { - flex-grow: 2; -} -@media screen and (min-width: 768px) { - #site-header.is-visible .site-header__inner .header__title-page { - display: block; - } -} -#site-header.is-visible ~ main { - margin-top: var(--header-h); -} - @media screen and (max-width: 1080px) { #nav-highlight { display: none; @@ -269,6 +253,9 @@ button { font-size: var(--fons-normal); color: var(--color-txt); } +button svg { + fill: var(--color-txt); +} button:hover { color: var(--grey-100); } @@ -294,11 +281,11 @@ button:disabled { } .btn--small { - display: block; - height: calc(var(--h-block) * 0.75); - border: var(--border); + height: calc(var(--h-block) * 1); + border: var(--border-light); border-radius: var(--radius-btn); font-size: var(--fs-small); + font-weight: 500; line-height: 1; overflow: hidden; white-space: nowrap; @@ -307,18 +294,48 @@ button:disabled { display: flex; align-items: center; justify-content: center; + gap: 1ch; width: 100%; height: 100%; padding: 0 1ch; padding-top: 2px; } +.btn--small .icon { + --size: 10px; + height: var(--size); + width: var(--size); + position: relative; + top: -8px; +} +.btn--small .icon svg { + width: 100%; + fill: var(--color-txt); +} .btn--small.no-link { display: flex; align-items: center; justify-content: center; + gap: 1ch; padding: 0 1ch; padding-top: 2px; } +.btn--small:hover { + color: currentColor; + border-color: currentColor; + background-color: var(--grey-950); +} + +.btn--small.is-selected { + background-color: var(--color-txt); + border-color: var(--color-txt); + color: var(--color-bg); +} +.btn--small.is-selected a { + color: var(--color-bg); +} +.btn--small.is-selected svg { + fill: var(--color-bg); +} .btn--bold, .btn--bold-inline { @@ -327,6 +344,7 @@ button:disabled { border: var(--border); border-radius: var(--radius-btn); font-size: var(--fs-small); + font-weight: 500; text-transform: uppercase; line-height: 1; overflow: hidden; @@ -385,74 +403,73 @@ button:disabled { fill: var(--color-txt); } .btn--bold-inline:hover { - background-color: var(--grey-800); - color: var(--color-txt); + background-color: var(--grey-950); + color: var(--grey-100); + border-color: var(--grey-100); } .btn--bold-inline:hover a { - background-color: var(--grey-800); - color: var(--color-txt); + background-color: var(--grey-950); + color: var(--grey-100); +} +.btn--bold-inline:hover svg { + fill: var(--grey-100); } -.btn--light { - border: var(--border-light); +.btn--toc svg { + width: 15px; + height: 15px; + top: 0px; } -.btn__default { - --size: calc(var(--h-block) - 8px); - font-size: var(--fs-normal); - font-weight: var(--fw-normal); - height: var(--size); - padding-right: 1.5ch; +@keyframes wiggle-left { + 0% { + transform: translateX(0); + } + 40% { + transform: translateX(-10px); + } + 80% { + transform: translateX(0); + } + 100% { + transform: translateX(0); + } +} +.btn--back-to-top { + display: flex; + border-color: var(--color-txt); + width: -moz-fit-content; + width: fit-content; + margin: var(--spacing) auto; +} +@media screen and (max-width: 768px) { + .btn--back-to-top { + margin-bottom: calc(var(--spacing) * 2); + } +} +.btn--back-to-top .icon { + width: 12px; + height: 12px; + transform: rotate(-90deg); + transform-origin: center; position: relative; - display: flex; - align-items: center; - gap: 0ch; - color: var(--color-accent); - font-weight: var(--fw-medium); - text-decoration: none; - cursor: pointer; + top: -1px; } -.btn__default .icon, .btn__default .txt { - z-index: 10; +.btn--back-to-top .icon svg { + width: 12px; + height: 12px; } -.btn__default .icon { - width: var(--size); - height: var(--size); - display: flex; - align-items: center; - justify-content: center; - color: var(--color-bg); - text-align: center; +.btn--back-to-top:hover { + background-color: var(--grey-950); + color: var(--grey-100); + border-color: var(--grey-100); } -.btn__default .icon svg { - fill: var(--color-bg); - width: 80%; +.btn--back-to-top:hover a { + background-color: var(--grey-950); + color: var(--grey-100); } -.btn__default .txt { - font-family: var(--font-title); - color: var(--color-accent); - font-size: var(--fs-normal); - font-weight: var(--fw-bold); - padding-left: 1ch; -} -.btn__default::after { - content: ""; - display: block; - background-color: var(--color-accent); - border-radius: calc(var(--size) / 2); - width: var(--size); - height: var(--size); - position: absolute; - left: 0; - z-index: 0; - transition: width 0.2s; -} -.btn__default:hover .txt { - color: var(--color-bg); - display: block; -} -.btn__default:hover::after { - width: 100%; +.btn--back-to-top:hover svg { + fill: var(--grey-100); } .tag { @@ -471,45 +488,53 @@ button:disabled { white-space: nowrap; } -.tag-inline { - height: calc(var(--h-block) * 0.75); - border-radius: var(--radius-small); - border: var(--border-medium); +.keywords { + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 0.75ch; +} +.keywords a { display: inline-flex; align-items: center; justify-content: center; - padding: 0 1.5ch; - padding-top: 3px; + height: calc(var(--h-block) * 0.75); + padding: 0 1ch; + padding-top: 2px; + border: var(--border-light); + border-radius: var(--radius-btn); font-size: var(--fs-small); line-height: 1; - background-color: var(--color-bg); - color: var(--color-txt-light); - overflow: hidden; white-space: nowrap; - text-transform: uppercase; -} - -.keywords { - list-style: none; -} -.keywords li { - display: inline-block; - padding-right: 0.75ch; -} -.keywords li a { text-decoration: none; } -.keywords li a::before { +.keywords a::before { content: "#"; padding-right: 0.25ch; } - -.sort { - display: flex; - align-items: center; - gap: 1ch; +.keywords a:hover { + border-color: currentColor; + background-color: var(--grey-800); } -.sort .arrow { + +.keywords--small { + list-style: none; +} +.keywords--small li { + display: inline; +} +.keywords--small a { + text-decoration: none; +} +.keywords--small a::before { + content: "#"; + padding-right: 0.25ch; +} +.keywords--small a::after { + content: " "; +} + +button.sort .arrow { line-height: 0; --size: 12px; height: var(--size); @@ -522,48 +547,58 @@ button:disabled { transform: rotate(90deg); transition: transform 0.2s ease-in; } -.sort .arrow svg { +button.sort .arrow svg { width: 100%; fill: var(--color-txt); } -.sort .icon { - --size: 10px; - height: var(--size); - width: var(--size); - position: relative; - top: -8px; -} -.sort .icon svg { - width: 100%; - fill: var(--color-txt); -} -.sort[data-sort-type=up] .arrow { +button.sort[data-sort-type=up] .arrow { transform: rotate(-90deg); } -.sort:hover { - color: var(--grey-100); -} -.sort:hover svg { - fill: var(--grey-100); + +.page__sort { + margin-bottom: calc(var(--spacing) * 1); + display: flex; + justify-content: right; + grid-gap: var(--padding-inner); + width: 100%; + max-width: var(--max-w-cards); + margin-inline: auto; } +.btn--group__mobile { + z-index: calc(var(--z-header) - 10); + opacity: 0; + transition: opacity 0.3s ease-in; + position: fixed; + bottom: 0; + left: 0; + width: 100vw; + height: calc(var(--h-block) * 3); + padding: calc(var(--spacing) * 0.75) var(--padding-body); + background-color: var(--color-bg); + background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 75%, transparent 100%); + display: flex; + align-items: flex-end; + gap: var(--padding-inner); +} +.btn--group__mobile.is-visible { + opacity: 1; +} +.btn--group__mobile button, .btn--group__mobile .dropdown { + flex-grow: 1; + width: 100%; +} + +@media screen and (min-width: 768px) { + .btn--group__mobile { + display: none; + opacity: 0 !important; + } +} #hero { - width: calc(100vw - var(--padding-body) * 4); + width: 100%; position: relative; - left: calc(var(--padding-body) * 1); -} -@media screen and (max-width: 1080px) { - #hero { - width: calc(100vw - var(--padding-body) * 2); - position: relative; - left: 0; - } -} -@media screen and (max-width: 768px) { - #hero { - width: 100vw; - left: calc(var(--padding-body) * -1); - } + left: 0; } #hero figcaption { color: var(--color-txt-light); @@ -867,15 +902,9 @@ button:disabled { } } .modal--share { - border: var(--border); - border-radius: var(--radius-btn); + width: 240px; + padding-bottom: var(--padding-inner); background-color: var(--color-bg); - padding: var(--padding-inner); - padding-top: calc(var(--padding-inner) * 0.5); - padding-bottom: calc(var(--padding-inner) * 1.5); -} -.modal--share .modal-title { - display: none; } .modal--share .socials { display: block; @@ -883,14 +912,15 @@ button:disabled { } .modal--share .socials li { font-size: var(--fs-normal); - padding-bottom: 6px; border-bottom: var(--border-light); - padding-top: 6px; +} +.modal--share .socials li:first-of-type { + border-top: var(--border-light); } .modal--share .socials li a { display: flex; align-items: center; - gap: 1ch; + gap: 2ch; text-decoration: none; } .modal--share .socials li .icon { @@ -905,18 +935,12 @@ button:disabled { position: relative; top: 2px; } -.modal--share .socials li:hover { - color: var(--color-accent); -} -.modal--share .socials li:hover .icon svg, -.modal--share .socials li:hover .icon svg path, -.modal--share .socials li:hover .icon svg rect { - fill: var(--color-accent) !important; -} .modal--share .copy-link { display: flex; gap: 0.5ch; - margin-top: calc(var(--spacing) * 0.75); + padding: 0 var(--padding-inner); + height: var(--h-block); + width: 100%; } .modal--share .copy-link .copy-link__field { flex-grow: 1; @@ -955,41 +979,180 @@ button:disabled { border-color: var(--color-txt); outline: none; } -.modal--share .copy-link button { +.modal--share .copy-link input.is-copied { + color: var(--color-accent) !important; +} +.modal--share .copy-link .copy-link__btn { background-color: var(--color-txt); color: var(--color-bg); border-radius: var(--radius-btn); padding: 0 1ch; font-size: var(--fs-small); padding-top: 2px; + white-space: nowrap; + text-align: center; + width: 8ch !important; } -.modal--share .copy-link button:hover { +.modal--share .copy-link .copy-link__btn::after { + content: " "; +} +.modal--share .copy-link .copy-link__btn:hover { background-color: var(--color-accent); } -.page__title { - font-size: var(--fs-big); - font-weight: normal; - text-transform: uppercase; - margin: calc(var(--spacing) * 1.5) auto; - text-align: center; - max-width: var(--max-w-container); -} - -.page__description { +#share-banner__content, +#share-banner__aside, +#share-banner__desktop { display: none; - max-width: var(--max-w-content); - margin: calc(var(--spacing) * 2) auto; -} -.page__description p { - font-size: var(--fs-normal); } +#share-banner__content ~ .modal--share, +#share-banner__aside ~ .modal--share, +#share-banner__desktop ~ .modal--share { + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease-in; +} + +#share-banner__content:checked ~ .modal--share, +#share-banner__aside:checked ~ .modal--share, +#share-banner__desktop:checked ~ .modal--share { + opacity: 1; + pointer-events: auto; +} + +.dropdown { + position: relative; + display: inline-block; +} +.dropdown__trigger { + cursor: pointer; +} +.dropdown__content { + position: absolute; + top: 100%; + left: 0; + min-width: 180px; + margin-top: var(--padding-inner); + background-color: var(--color-bg); + border: var(--border); + border-radius: var(--radius-btn); + opacity: 0; + visibility: hidden; + transform: translateY(-4px); + transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; + z-index: 100; +} +.dropdown__content::before { + content: "◀"; + transform: rotate(90deg); + font-size: 14px; + position: absolute; + top: -13px; + left: 16px; +} +.dropdown__content ul { + list-style: none; + margin: 0; + padding: var(--padding-inner); +} +.dropdown__content a, .dropdown__content button { + display: block; + width: 100%; + padding: 0.75em 1ch; + font-size: var(--fs-small); + text-align: left; + text-decoration: none; + color: var(--color-txt); + background: none; + border: none; + cursor: pointer; +} +.dropdown__content a:hover, .dropdown__content button:hover { + background-color: var(--grey-800); +} +.dropdown--align-right .dropdown__content { + left: auto; + right: 0; +} +.dropdown--align-right .dropdown__content::before { + left: auto; + right: 16px; +} +.dropdown.is-open .dropdown__content { + opacity: 1; + visibility: visible; + transform: translateY(0); +} +.dropdown--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; +} +.dropdown--position-mobile .dropdown__content::before { + font-family: Arial; + content: "◀"; + transform: rotate(-90deg); + font-size: 14px; + position: absolute; + top: auto; + bottom: -13px; + left: auto; + right: 10%; +} +.dropdown--position-mobile.is-open .dropdown__content { + transform: translateX(0); +} +@media screen and (min-width: 768px) { + .dropdown--position-panel .dropdown__content { + top: auto; + bottom: 0; + left: calc(100% + var(--padding-inner)); + margin-top: 0; + margin-left: 4px; + } + .dropdown--position-panel .dropdown__content::before { + font-family: Arial; + content: "◀"; + transform: rotate(0deg); + font-size: 14px; + position: absolute; + top: auto; + bottom: 4px; + left: -11px; + } + .dropdown--position-panel.is-open .dropdown__content { + transform: translateX(0); + } +} +@media screen and (max-width: 560px) { + .dropdown .dropdown__content { + width: calc(100vw - var(--padding-body) * 2); + } + .dropdown .dropdown__content .modal--share { + width: 100%; + } +} + +@media screen and (max-width: 1280px) { + [data-template=investigations] .dropdown .dropdown__content { + left: auto; + right: 0; + } + [data-template=investigations] .dropdown .dropdown__content::before { + left: auto; + right: 16px; + } +} .card--article { border: var(--border-light); position: relative; display: flex; flex-direction: column; + padding: var(--padding-inner); } .card--article figure { aspect-ratio: 16/9; @@ -1003,27 +1166,44 @@ button:disabled { object-fit: cover; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; } -.card--article:hover figure img { - transform: scale(1.05); -} .card--article .content { - padding: var(--padding-inner); display: flex; flex-direction: column; - flex-grow: 2; +} +.card--article .pin { + position: absolute; + top: calc(var(--padding-inner) * 1.5); + left: calc(var(--padding-inner) * 1.5); + z-index: 10; + width: 24px; + height: 24px; + border-radius: var(--radius-small); + background-color: rgba(255, 255, 255, 0.27); + display: flex; + align-items: center; + justify-content: center; +} +.card--article .pin svg { + width: 16px; + fill: var(--color-txt); +} +.card--article .time-alone { + display: none; + margin-top: calc(var(--spacing) * 0.25); + margin-bottom: calc(var(--spacing) * 0.75); } .card--article .title { margin-top: calc(var(--spacing) * 0.5); font-size: var(--fs-medium); font-weight: normal; text-transform: uppercase; + text-wrap: balance; } .card--article .title a { text-decoration: none; } .card--article .description { - margin-top: calc(var(--spacing) * 1); - font-size: var(--fs-small); + margin-top: calc(var(--spacing) * 0.5); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; @@ -1031,7 +1211,7 @@ button:disabled { } .card--article .dl { margin-top: calc(var(--spacing) * 0.5); - font-size: var(--fs-small); + border-bottom: var(--border-light); } .card--article .dl .dl__group { display: grid; @@ -1045,17 +1225,25 @@ button:disabled { color: var(--color-txt-light); padding-right: 1ch; } -.card--article .dl ul:not(.keywords) { +.card--article .dl ul { list-style: none; } -.card--article .dl ul:not(.keywords) li { +.card--article .dl ul li { padding-bottom: 0.2em; } -.card--article .dl .dl__group__keywords { - padding-bottom: 0; +.card--article .keywords-wrapper { + z-index: 3000; + margin-top: calc(var(--spacing) * 0.5); +} +.card--article .keywords { + grid-column: 2; } .card--article:hover { border-color: var(--color-txt); + background-color: var(--grey-950); +} +.card--article .link-block { + z-index: 2000; } .card--article-small { @@ -1063,7 +1251,37 @@ button:disabled { grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; - margin-bottom: var(--spacing); + padding-top: calc(var(--spacing) * 0.5); + padding-bottom: calc(var(--spacing) * 0.5); + border-bottom: var(--border-light); + position: relative; + border-bottom: var(--border-light); + position: relative; +} +.card--article-small:first-of-type { + border-top: var(--border-light); +} +.card--article-small.has-link { + border-bottom: var(--border-light); + position: relative; +} +.card--article-small.has-link:first-of-type { + border-top: var(--border-light); +} +.card--article-small.has-link::before { + content: ""; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; +} +.card--article-small.has-link:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} +.card--article-small.has-link:hover::before { + border-color: var(--color-txt); } .card--article-small figure { aspect-ratio: 16/9; @@ -1077,18 +1295,25 @@ button:disabled { object-fit: cover; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; } -.card--article-small:hover figure img { - transform: scale(1.05); +@media screen and (max-width: 560px) { + .card--article-small figure { + margin-left: 0px; + } } .card--article-small .content { display: flex; flex-direction: column; padding-top: calc(var(--spacing) * 0.25); + padding-right: calc(var(--padding-inner) * 3); } .card--article-small .title { - font-weight: normal; - font-size: var(--fs-medium); + font-weight: 400; + font-size: var(--fs-small); margin-bottom: 0.25em; + text-wrap: balance; + max-width: 42ch; + text-transform: uppercase; + line-height: 1.1; } .card--article-small .title a { text-decoration: none; @@ -1097,13 +1322,63 @@ button:disabled { flex-grow: 1; color: var(--color-txt-light); } -.card--article-small .keywords { - margin-top: 1.5em; - padding-bottom: calc(var(--spacing) * 0.25); - color: var(--color-txt-light); +.card--article-small .description { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + margin-bottom: calc(var(--spacing) * 0.75); + margin-top: calc(var(--spacing) * 0.25); } -.card--article-small:hover .title { - text-decoration: underline; +.card--article-small .btn--go-to { + position: absolute; + right: var(--padding-inner); + bottom: calc(var(--padding-inner) - 3px); +} +.card--article-small .btn--go-to svg { + width: 15px; + height: 15px; + fill: var(--color-txt); +} +@media screen and (max-width: 768px) { + .card--article-small .btn--go-to svg { + width: 11px; + height: 11px; + } +} +@media screen and (max-width: 560px) { + .card--article-small .btn--go-to { + right: calc(var(--padding-inner) * 0.5); + bottom: calc(var(--padding-inner) * 0.25); + } + .card--article-small .btn--go-to svg { + width: 11px; + height: 11px; + } +} +.card--article-small:hover .btn--go-to { + animation: wiggle-left 0.8s ease-in-out; +} +.card--article-small:first-of-type { + border-top: var(--border-light); +} +.card--article-small::before { + content: ""; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; +} +.card--article-small:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} +.card--article-small:hover::before { + border-color: var(--color-txt); +} +.card--article-small .keywords { + display: none; } @media screen and (max-width: 1080px) { .card--article-small .title { @@ -1112,6 +1387,12 @@ button:disabled { } } @media screen and (max-width: 560px) { + .card--article-small .icon-article { + display: none; + } + .card--article-small .description { + display: none; + } .card--article-small .content { padding: 0; } @@ -1123,55 +1404,152 @@ button:disabled { margin-top: 0.25em; } .card--article-small .keywords { - margin-top: 0.5em; - padding-bottom: 0; + display: block; + line-height: 1.1; + margin-top: calc(var(--spacing) * 0.5); + padding-right: calc(var(--padding-inner) * 1); + } + .card--article-small .keywords li, .card--article-small .keywords a { + display: inline; + border: none; + padding: 0px; + color: var(--color-txt-light); } } .card--impact { + container-type: inline-size; + container-name: impact; + border: var(--border-light); + margin-bottom: calc(var(--spacing) * 1); +} +.card--impact.has-link { + border-bottom: var(--border-light); + position: relative; +} +.card--impact.has-link:first-of-type { + border-top: var(--border-light); +} +.card--impact.has-link::before { + content: ""; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; +} +.card--impact.has-link:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} +.card--impact.has-link:hover::before { + border-color: var(--color-txt); +} +.card--impact .card--impact__inner { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; - padding: calc(var(--spacing) * 0.5) 0; - border-bottom: var(--border-light); + padding: calc(var(--padding-inner) * 1.5) var(--padding-inner); + position: relative; } -.card--impact:first-of-type { - border-top: var(--border-light); +.card--impact .card--impact__inner .btn--go-to { + position: absolute; + right: var(--padding-inner); + bottom: calc(var(--padding-inner) - 3px); } -.card--impact .content { - grid-column: 2; +.card--impact .card--impact__inner .btn--go-to svg { + width: 15px; + height: 15px; + fill: var(--color-txt); +} +@media screen and (max-width: 768px) { + .card--impact .card--impact__inner .btn--go-to svg { + width: 11px; + height: 11px; + } } @media screen and (max-width: 560px) { - .card--impact:not([data-impact-type=media]) .content { + .card--impact .card--impact__inner .btn--go-to { + right: calc(var(--padding-inner) * 0.5); + bottom: calc(var(--padding-inner) * 0.25); + } + .card--impact .card--impact__inner .btn--go-to svg { + width: 11px; + height: 11px; + } +} +.card--impact .card--impact__inner:hover .btn--go-to { + animation: wiggle-left 0.8s ease-in-out; +} +.card--impact .card--impact__inner .btn--go-to { + top: calc(var(--padding-inner) * 1); + bottom: auto; +} +.card--impact .card--impact__inner .content { + grid-column: 2; +} +.card--impact .card--impact__inner .card--open-graph { + grid-row: 1/3; + grid-column: 2; + z-index: 10; +} +.card--impact .card--impact__inner .keywords-wrapper { + grid-column: 1; + grid-row: 2/4; + align-self: end; + z-index: 10; +} +@media screen and (max-width: 560px) { + .card--impact .card--impact__inner:not([data-impact-type=media]) .content { grid-column: span 2; } } -.card--impact .tag { +.card--impact .card--impact__inner .tag { width: auto; justify-self: start; position: relative; top: -5px; } -.card--impact .content .see-more { - color: var(--color-txt-light); +.card--impact .card--impact__inner:not([data-impact-type=media]) .content { + padding-right: calc(var(--padding-inner) * 2.5); +} +.card--impact .card--impact__inner .investigations { + z-index: 10; + grid-column: 2; + list-style: none; + font-size: var(--fs-small); +} +.card--impact .card--impact__inner .investigations a { text-decoration: none; - white-space: nowrap; + color: var(--color-txt-light); } -.card--impact .content .see-more::after { - content: " +"; +.card--impact .card--impact__inner .investigations .icon { + position: relative; + top: 2px; } -.card--impact .open-graph__details { - grid-column: span 2; +.card--impact .card--impact__inner .investigations .icon svg { + width: 14px; + height: 14px; + fill: var(--color-txt-light); } -.card--impact .open-graph__details summary, -.card--impact .open-graph__details .summary-inner { +.card--impact .card--impact__inner .investigations li:hover a { + color: var(--color-txt); +} +.card--impact .card--impact__inner .investigations li:hover .icon svg { + fill: var(--color-txt); +} +.card--impact .card--impact__inner .open-graph__details { + grid-column: 2; +} +.card--impact .card--impact__inner .open-graph__details summary, +.card--impact .card--impact__inner .open-graph__details .summary-inner { display: flex; align-items: center; cursor: pointer; gap: 0.5ch; } -.card--impact .open-graph__details .arrow-details { +.card--impact .card--impact__inner .open-graph__details .arrow-details { line-height: 0; --size: 11px; height: var(--size); @@ -1182,69 +1560,492 @@ button:disabled { position: relative; top: -2px; } -.card--impact .open-graph__details .arrow-details svg { +.card--impact .card--impact__inner .open-graph__details .arrow-details svg { transition: transform 0.2s ease-in; width: 100%; fill: var(--color-txt); } -.card--impact .open-graph__details[open] .arrow-details svg { +.card--impact .card--impact__inner .open-graph__details summary:hover { + color: var(--color-txt); +} +.card--impact .card--impact__inner .open-graph__details summary:hover .arrow-details svg { + fill: var(--color-txt); +} +.card--impact .card--impact__inner .open-graph__details[open] .arrow-details svg { transform: rotate(90deg); } -.card--impact .open-graph__details summary { +.card--impact .card--impact__inner .open-graph__details summary { color: var(--color-txt-light); } -.card--impact .open-graph__details summary .arrow-details svg { +.card--impact .card--impact__inner .open-graph__details summary .arrow-details svg { fill: var(--color-txt-light); } -.card--impact .open-graph__details summary { - display: grid; - grid-gap: var(--padding-inner); - grid-template-columns: 2fr 3fr; - position: relative; -} -.card--impact .open-graph__details summary .summary-inner { - grid-column: 2; -} -.card--impact .open-graph__inner { - margin-top: calc(var(--spacing) * 0.5); - margin-bottom: calc(var(--spacing) * 1); -} -@media screen and (min-width: 768px) { - .card--impact .open-graph__inner { - margin-bottom: calc(var(--spacing) * 2); +@media screen and (max-width: 560px) { + .card--impact .card--impact__inner .open-graph__details { + grid-column: 1/3; + } + .card--impact .card--impact__inner .open-graph__details summary { + display: grid; + grid-gap: var(--padding-inner); + grid-template-columns: 2fr 3fr; + position: relative; + grid-row-gap: 0; + } + .card--impact .card--impact__inner .open-graph__details summary .summary-inner { + grid-column: 2; } } -.card--impact .open-graph__inner .card--open-graph { +.card--impact .card--impact__inner .open-graph__inner { + margin-top: calc(var(--spacing) * 0.5); +} +.card--impact .card--impact__inner .open-graph__inner .card--open-graph { margin-bottom: calc(var(--spacing) * 0.5); } -.card--open-graph { +@container impact (width < 460px) { + .card--impact__inner { + display: block !important; + padding-top: var(--padding-inner) !important; + padding-bottom: calc(var(--padding-inner) * 0.75) !important; + } + .card--impact__inner .tag, .card--impact__inner .date { + display: inline-flex; + margin-right: 2ch; + top: 0px !important; + } + .card--impact__inner .content { + margin-top: calc(var(--spacing) * 0.75); + margin-bottom: calc(var(--spacing) * 0.25); + padding-right: 0 !important; + } + .card--impact__inner .card--open-graph { + margin-top: calc(var(--spacing) * 0.75); + margin-bottom: calc(var(--spacing) * 0.25); + } + .card--impact__inner .investigations { + margin-top: calc(var(--spacing) * 0.25); + margin-bottom: calc(var(--spacing) * 0.25); + } + .card--impact__inner .keywords-wrapper { + margin-top: calc(var(--spacing) * 1); + } + .card--impact__inner .date, + .card--impact__inner .content, + .card--impact__inner details { + font-size: 14px !important; + } + .card--impact__inner .btn--go-to { + top: calc(var(--padding-inner) * 1.25) !important; + bottom: auto; + right: calc(var(--padding-inner) * 1.25) !important; + } +} +@media screen and (max-width: 560px) { + .card--impact__inner { + display: block !important; + padding-top: var(--padding-inner) !important; + padding-bottom: calc(var(--padding-inner) * 0.75) !important; + } + .card--impact__inner .tag, .card--impact__inner .date { + display: inline-flex; + margin-right: 2ch; + top: 0px !important; + } + .card--impact__inner .content { + margin-top: calc(var(--spacing) * 0.75); + margin-bottom: calc(var(--spacing) * 0.25); + padding-right: 0 !important; + } + .card--impact__inner .card--open-graph { + margin-top: calc(var(--spacing) * 0.75); + margin-bottom: calc(var(--spacing) * 0.25); + } + .card--impact__inner .investigations { + margin-top: calc(var(--spacing) * 0.25); + margin-bottom: calc(var(--spacing) * 0.25); + } + .card--impact__inner .keywords-wrapper { + margin-top: calc(var(--spacing) * 1); + } + .card--impact__inner .date, + .card--impact__inner .content, + .card--impact__inner details { + font-size: 14px !important; + } + .card--impact__inner .btn--go-to { + top: calc(var(--padding-inner) * 1.25) !important; + bottom: auto; + right: calc(var(--padding-inner) * 1.25) !important; + } +} +.card--impact-small { + border-bottom: var(--border-light); display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; position: relative; - border: var(--border-light); - border-radius: var(--radius-small); + padding: var(--padding-inner) 0; position: relative; } -.card--open-graph figure { - grid-column: 1; - grid-row: 1; +.card--impact-small:first-of-type { + border-top: var(--border-light); } -.card--open-graph figure { +.card--impact-small.has-link { + border-bottom: var(--border-light); + position: relative; +} +.card--impact-small.has-link:first-of-type { + border-top: var(--border-light); +} +.card--impact-small.has-link::before { + content: ""; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; +} +.card--impact-small.has-link:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} +.card--impact-small.has-link:hover::before { + border-color: var(--color-txt); +} +.card--impact-small .btn--go-to { + position: absolute; + right: var(--padding-inner); + bottom: calc(var(--padding-inner) - 3px); +} +.card--impact-small .btn--go-to svg { + width: 15px; + height: 15px; + fill: var(--color-txt); +} +@media screen and (max-width: 768px) { + .card--impact-small .btn--go-to svg { + width: 11px; + height: 11px; + } +} +@media screen and (max-width: 560px) { + .card--impact-small .btn--go-to { + right: calc(var(--padding-inner) * 0.5); + bottom: calc(var(--padding-inner) * 0.25); + } + .card--impact-small .btn--go-to svg { + width: 11px; + height: 11px; + } +} +.card--impact-small:hover .btn--go-to { + animation: wiggle-left 0.8s ease-in-out; +} +.card--impact-small .btn--go-to { + top: calc(var(--padding-inner) * 1); + bottom: auto; +} +.card--impact-small .content { + grid-column: 2; +} +.card--impact-small .card--open-graph { + grid-column: 2; + z-index: 10; +} +.card--impact-small .keywords { + grid-column: 2; + z-index: 10; +} +@media screen and (max-width: 560px) { + .card--impact-small .keywords { + display: block; + line-height: 1.1; + } + .card--impact-small .keywords li, .card--impact-small .keywords a { + display: inline; + border: none; + padding: 0px; + color: var(--color-txt-light); + } +} +@media screen and (max-width: 560px) { + .card--impact-small:not([data-impact-type=media]) .content, + .card--impact-small .keywords { + grid-column: span 2; + } +} +.card--impact-small .tag { + width: auto; + justify-self: start; + position: relative; + top: -5px; +} +.card--impact-small:not([data-impact-type=media]) .content { + padding-right: calc(var(--padding-inner) * 2.5); +} +@media screen and (max-width: 560px) { + .card--impact-small:not([data-impact-type=media]) .content { + padding-right: 0; + } +} +.card--impact-small .open-graph__details { + grid-column: 2; +} +.card--impact-small .open-graph__details summary, +.card--impact-small .open-graph__details .summary-inner { + display: flex; + align-items: center; + cursor: pointer; + gap: 0.5ch; +} +.card--impact-small .open-graph__details .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; +} +.card--impact-small .open-graph__details .arrow-details svg { + transition: transform 0.2s ease-in; + width: 100%; + fill: var(--color-txt); +} +.card--impact-small .open-graph__details summary:hover { + color: var(--color-txt); +} +.card--impact-small .open-graph__details summary:hover .arrow-details svg { + fill: var(--color-txt); +} +.card--impact-small .open-graph__details[open] .arrow-details svg { + transform: rotate(90deg); +} +.card--impact-small .open-graph__details summary { + color: var(--color-txt-light); +} +.card--impact-small .open-graph__details summary .arrow-details svg { + fill: var(--color-txt-light); +} +@media screen and (max-width: 560px) { + .card--impact-small .open-graph__details { + grid-column: 1/3; + } + .card--impact-small .open-graph__details summary { + display: grid; + grid-gap: var(--padding-inner); + grid-template-columns: 2fr 3fr; + position: relative; + grid-row-gap: 0; + } + .card--impact-small .open-graph__details summary .summary-inner { + grid-column: 2; + } +} +.card--impact-small .open-graph__inner { + margin-top: calc(var(--spacing) * 0.5); +} +.card--impact-small .open-graph__inner .card--open-graph { + margin-bottom: calc(var(--spacing) * 0.5); +} + +.card--folder { + position: relative; + max-width: var(--max-w-cards); + border: var(--border-light); + padding: var(--padding-inner); + display: grid; + grid-gap: var(--padding-inner); + grid-template-columns: 2fr 3fr; + position: relative; + container-type: inline-size; + container-name: cardfolder; + position: relative; +} +.card--folder figure { aspect-ratio: 16/9; display: flex; overflow: hidden; } -.card--open-graph figure img { +.card--folder figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; } -.card--open-graph:hover figure img { - transform: scale(1.05); +.card--folder .content { + display: flex; + flex-direction: column; +} +.card--folder .title { + flex-grow: 1; + font-weight: 500; + font-size: var(--fs-small); + margin-bottom: 0.25em; + text-wrap: balance; + max-width: 42ch; + text-transform: uppercase; + padding-top: calc(var(--spacing) * 0.25); +} +.card--folder .title a { + text-decoration: none; +} +@media screen and (max-width: 768px) { + .card--folder .title { + font-size: var(--fs-normal); + } +} +.card--folder .title .icon { + padding-right: 1ch; + position: relative; + top: 1px; +} +.card--folder .title .icon svg { + height: 15px; + width: 15px; + fill: var(--color-txt); +} +.card--folder .short { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} +.card--folder ul { + display: flex; + list-style: none; + gap: 1ch; + color: var(--color-txt-light); + padding-top: calc(var(--spacing) * 0.5); +} +.card--folder ul li + li::before { + content: "|"; + padding-right: 1ch; +} +@media screen and (max-width: 768px) { + .card--folder ul { + font-size: var(--fs-small); + } +} +.card--folder .btn--go-to { + position: absolute; + right: calc(var(--padding-inner) * 1); + bottom: var(--padding-inner); +} +.card--folder .btn--go-to { + position: absolute; + right: var(--padding-inner); + bottom: calc(var(--padding-inner) - 3px); +} +.card--folder .btn--go-to svg { + width: 15px; + height: 15px; + fill: var(--color-txt); +} +@media screen and (max-width: 768px) { + .card--folder .btn--go-to svg { + width: 11px; + height: 11px; + } +} +@media screen and (max-width: 560px) { + .card--folder .btn--go-to { + right: calc(var(--padding-inner) * 0.5); + bottom: calc(var(--padding-inner) * 0.25); + } + .card--folder .btn--go-to svg { + width: 11px; + height: 11px; + } +} +.card--folder:hover .btn--go-to { + animation: wiggle-left 0.8s ease-in-out; +} +.card--folder:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} + +[data-template=investigation-summary] .card--folder { + border: none; + padding-left: 0; + padding-right: 0; + border-bottom: var(--border-light); +} +[data-template=investigation-summary] .card--folder:first-of-type { + border-top: var(--border-light); +} +[data-template=investigation-summary] .card--folder.has-link { + border-bottom: var(--border-light); + position: relative; +} +[data-template=investigation-summary] .card--folder.has-link:first-of-type { + border-top: var(--border-light); +} +[data-template=investigation-summary] .card--folder.has-link::before { + content: ""; + width: 100%; + border-top: 1px solid transparent; + position: absolute; + top: -1px; + left: 0; +} +[data-template=investigation-summary] .card--folder.has-link:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); +} +[data-template=investigation-summary] .card--folder.has-link:hover::before { + border-color: var(--color-txt); +} +@media screen and (max-width: 560px) { + [data-template=investigation-summary] .card--folder figure { + margin-left: 0px; + } +} + +@container cardfolder (width < 680px) { + figure { + aspect-ratio: inherit; + width: 100%; + height: 100%; + } + .short { + margin-top: calc(var(--spacing) * 0.5); + } +} +@container cardfolder (width < 520px) { + figure { + aspect-ratio: inherit; + width: 100%; + height: 100%; + } + .short, ul { + font-size: var(--fs-small); + } +} +.card--open-graph { + display: grid; + grid-gap: var(--padding-inner); + grid-template-columns: 2fr 3fr; + position: relative; + border: 1px solid var(--grey-600); + border-radius: var(--radius-small); + position: relative; +} +.card--open-graph figure { + grid-column: 1; + grid-row: 1; + width: 100%; + height: 100%; +} +.card--open-graph figure img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; } @media screen and (max-width: 560px) { .card--open-graph figure { @@ -1261,10 +2062,13 @@ button:disabled { .card--open-graph .site-name { color: var(--color-txt-light); font-size: var(--fs-small); + margin-bottom: 3px; } .card--open-graph .title { font-size: var(--fs-normal); font-weight: normal; + line-height: 1.1; + padding-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @@ -1281,25 +2085,169 @@ button:disabled { -webkit-box-orient: vertical; overflow: hidden; } -.card--open-graph:hover .title { - text-decoration: underline; +.card--open-graph:hover { + border-color: var(--color-txt); + background-color: var(--grey-950); } -@keyframes add-border { - from { - border-bottom-color: transparent; +.open-graph__inner { + container-type: inline-size; + container-name: opengraph; +} + +@container opengraph (width < 500px) { + .card--open-graph .content { + padding: calc(var(--padding-inner) * 0.5); } - to { - border-bottom: var(--grey-800); + .card--open-graph figure { + aspect-ratio: inherit; } } +.swiper { + --slide-padding: 30px; +} +.swiper .swiper-button-prev, +.swiper .swiper-button-next { + --swiper-navigation-size: 32px; + color: var(--color-txt); + background-color: var(--color-bg); + height: 100%; + width: var(--slide-padding); + top: 0px !important; + height: calc(100% - var(--spacing) * 1); +} +.swiper .swiper-button-prev svg, +.swiper .swiper-button-next svg { + width: 14px; +} +.swiper .swiper-button-prev.swiper-button-disabled, +.swiper .swiper-button-next.swiper-button-disabled { + opacity: 1; +} +.swiper .swiper-button-prev.swiper-button-disabled svg, +.swiper .swiper-button-next.swiper-button-disabled svg { + opacity: 0.05; +} +.swiper .swiper-button-prev { + left: 0px !important; + top: 0px; + justify-content: flex-start; +} +.swiper .swiper-button-next { + right: 0px !important; + top: 0px; + justify-content: flex-end; +} +.swiper .swiper-slide { + padding-left: var(--slide-padding); + padding-right: var(--slide-padding); +} +.swiper .swiper-pagination { + position: relative; + margin-top: 0px !important; + margin-top: calc(var(--spacing) * 0.5) !important; +} +.swiper .swiper-pagination .swiper-pagination-bullet { + width: 15px; + height: 4px; + border-radius: 2px; + background: var(--color-txt-light); +} +.swiper .swiper-pagination .swiper-pagination-bullet-active { + background: var(--color-txt); +} +@media screen and (max-width: 560px) { + .swiper .swiper-button-prev, + .swiper .swiper-button-next { + display: none; + } + .swiper .swiper-slide { + padding: 0px; + } +} + +.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%; +} +.slider-before-after .image-container { + position: relative; + width: 100%; +} +.slider-before-after .slider-image { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: left; + object-position: left; +} +.slider-before-after .image-before { + position: absolute; + inset: 0; + width: var(--position); +} +.slider-before-after .slider { + position: absolute; + inset: 0; + cursor: pointer; + opacity: 0; + /* for Firefox */ + width: 100%; + height: 100%; +} +.slider-before-after .slider:focus-visible ~ .slider-button { + outline: 5px solid black; + outline-offset: 3px; +} +.slider-before-after .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-before-after .slider-button { + position: absolute; + background-color: #fff; + color: black; + padding: 0.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 hsla(0, 50%, 2%, 0.5); +} + #site-header { - z-index: 900; + z-index: var(--z-header); --gap: 3ch; + position: fixed; + top: 0; + left: 0; width: 100vw; height: var(--header-h); background-color: var(--color-bg); padding: 0 var(--padding-body); + box-shadow: -1px 4px 10px 0px var(--color-bg); } #site-header .site-header__inner { width: 100%; @@ -1343,6 +2291,7 @@ button:disabled { align-items: center; gap: var(--gap); text-transform: uppercase; + font-weight: 500; } #site-header #theme-toggle { width: var(--h-block); @@ -1360,6 +2309,9 @@ button:disabled { display: flex; gap: 1ch; } +#site-header #lang-toggle button { + font-weight: 500; +} #site-header #lang-toggle button:disabled { color: var(--color-txt-light); } @@ -1368,6 +2320,7 @@ button:disabled { } #site-header #menu-toggle svg { width: 30px; + fill: var(--color-txt); } #site-header #menu-toggle .close { display: none; @@ -1376,39 +2329,6 @@ button:disabled { fill: var(--grey-200) !important; } -#site-header.is-visible { - position: fixed; - top: 0; -} -#site-header.is-visible .site-header__inner { - border-bottom: var(--border-light); -} -#site-header.is-visible .site-header__inner #nav-highlight li:not(.soutenir) { - display: none; -} -@media screen and (min-width: 768px) { - #site-header.is-visible .site-header__inner #site-title { - flex-grow: 0; - width: calc((100vw - var(--max-w-content)) / 2 - var(--padding-body) * 2); - } -} -@media screen and (max-width: 1080px) { - #site-header.is-visible .site-header__inner #site-title { - width: calc(var(--banner-medium) - var(--padding-body)); - } -} -#site-header.is-visible .site-header__inner .header__title-page { - flex-grow: 2; -} -@media screen and (min-width: 768px) { - #site-header.is-visible .site-header__inner .header__title-page { - display: block; - } -} -#site-header.is-visible ~ main { - margin-top: var(--header-h); -} - @media screen and (max-width: 1080px) { #nav-highlight { display: none; @@ -1425,10 +2345,15 @@ button:disabled { background-color: var(--color-bg); border-left: var(--border-light); padding: var(--padding-body); - z-index: 1000; + z-index: calc(var(--z-header) - 1); display: flex; flex-direction: column; } +@media screen and (max-width: 768px) { + #site-menu { + transition: right 0.4s ease-in; + } +} @media screen and (max-width: 560px) { #site-menu { width: 100vw; @@ -1445,6 +2370,7 @@ button:disabled { #site-menu nav ul { list-style-type: none; text-transform: uppercase; + font-weight: 500; } #site-menu nav ul li { font-size: var(--fs-normal); @@ -1461,13 +2387,6 @@ button:disabled { text-transform: uppercase; } -body.menu-open { - overflow: hidden; -} -body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight { - transition: opacity 0.3s ease-in; - opacity: 0.1; -} body.menu-open #site-menu { right: 0; } @@ -1483,6 +2402,11 @@ body.menu-open #menu-toggle .close { padding: calc(var(--padding-body) * 2) var(--padding-body); z-index: 500; } +#site-footer .site-footer__container { + max-width: var(--max-w-cards); + margin: 0 auto; + padding: 0 var(--padding-body); +} #site-footer .logo { margin-top: calc(var(--spacing) * 0.25); margin-bottom: calc(var(--spacing) * 1); @@ -1509,9 +2433,6 @@ body.menu-open #menu-toggle .close { color: var(--color-txt); } @media screen and (max-width: 768px) { - #site-footer { - margin-top: calc(var(--spacing) * 2); - } #site-footer .footer__socials { margin-top: calc(var(--spacing) * 0.75); padding-top: calc(var(--spacing) * 0.25); @@ -1533,14 +2454,11 @@ body.menu-open #menu-toggle .close { @media screen and (min-width: 768px) { #site-footer .site-footer__container { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 3fr 2fr; -moz-column-gap: calc(var(--spacing) * 2); column-gap: calc(var(--spacing) * 2); - max-width: 1200px; - margin: 0 auto; } #site-footer .footer__socials .socials { - max-width: 400px; -moz-columns: 2; columns: 2; margin-top: calc(var(--spacing) * 1); @@ -1556,83 +2474,289 @@ body.menu-open #menu-toggle .close { body { min-height: 100dvh; min-height: 100vh; + width: 100vw; display: flex; flex-direction: column; } body main { flex-grow: 1; padding: 0 var(--padding-body); + padding-top: var(--header-h); + padding-bottom: calc(var(--spacing) * 2); + min-height: 100dvh; + min-height: 100vh; +} +body main .page__header, +body main .page__content { + max-width: var(--max-w-cards); + margin-inline: auto; +} + +.page__type { + height: calc(var(--h-block) * 0.75); + border-radius: var(--radius-small); + border: var(--border-medium); + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 1.5ch; + padding-top: 3px; + font-size: var(--fs-small); + line-height: 1; + background-color: var(--color-bg); + color: var(--color-txt-light); + overflow: hidden; + white-space: nowrap; + text-transform: uppercase; +} + +main .page__header { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 2); +} +@media screen and (max-width: 768px) { + main .page__header { + margin-top: calc(var(--spacing) * 2); + } +} +main .page__header .page__title { + max-width: var(--max-w-content); + text-transform: uppercase; + font-weight: normal; + font-size: var(--fs-big); + line-height: var(--leading-tight); + margin-top: calc(var(--spacing) * 1); + margin-bottom: calc(var(--spacing) * 0.5); + text-wrap: balance; +} +main .page__header .description { + max-width: 58ch; + line-height: 1.1; +} +main .page__header .description-medium { + max-width: 58ch; + line-height: 1.1; +} + +.container-cards { + max-width: var(--max-w-cards); + margin: 0 auto; + display: grid; + grid-gap: calc(var(--spacing) * 1); } @media screen and (min-width: 560px) { - [data-template=investigations] main #container-cards { - max-width: var(--max-w-container); - margin: 0 auto; + .container-cards__investigations { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-auto-rows: minmax(100px, auto); - grid-gap: calc(var(--padding-body) * 1.5); + grid-gap: var(--padding-body); margin-bottom: 10vh; } } @media screen and (max-width: 560px) { - [data-template=investigations] main #container-cards { + .container-cards__investigations { margin-bottom: 10vh; } - [data-template=investigations] main #container-cards .card--article { - margin-bottom: calc(var(--spacing) * 1.5); +} + +.section--home .btn--bold-inline { + text-transform: none; + margin-top: calc(var(--spacing) * 1.5); +} +.section--home .btn--bold-inline svg { + width: 12px; + height: 12px; + top: 0px; +} +.section--home .title-section { + font-size: var(--fs-medium); + font-weight: normal; + text-transform: uppercase; + font-size: var(--fs-big); + margin-bottom: calc(var(--spacing) * 1); +} +.section--home .description-section { + max-width: 42ch; + font-size: var(--fs-medium); + line-height: 1.1; +} +@media screen and (min-width: 1080px) { + .section--home { + border-bottom: var(--border-light); + } + .section--home .section--inner { + max-width: 1280px; + margin: calc(var(--spacing) * 3) auto; + display: grid; + --gap: calc(var(--padding-body)*2); + grid-template-columns: 1fr 640px; + grid-gap: var(--gap); + } + .section--home .col-left { + height: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + } + .section--home .col-right { + width: 100%; + height: 100%; } } -[data-template=investigations] main .search-container { - max-width: var(--max-w-content); - margin: 0 auto; - margin-bottom: calc(var(--spacing) * 2); +@media screen and (max-width: 1080px) { + .section--home#home__investigations, .section--home#home__hero { + border-bottom: var(--border-light); + } + .section--home .section--inner { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 4); + } + .section--home .col-left { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + justify-content: space-between; + margin-bottom: calc(var(--spacing) * 2); + } + .section--home .col-left .title-section { + width: 100%; + } } -[data-template=investigations] main .page__sort { - max-width: var(--max-w-container); - display: flex; - justify-content: right; - grid-gap: var(--padding-inner); - margin: 0 auto; +@media screen and (max-width: 560px) { + .section--home .section--inner { + margin-top: calc(var(--spacing) * 2); + margin-bottom: calc(var(--spacing) * 4); + margin-bottom: 0px; + } + .section--home .col-left { + margin-bottom: calc(var(--spacing) * 1.5); + } + .section--home .title-section { + margin-bottom: calc(var(--spacing) * 0.25); + } + .section--home .description-section { + max-width: 42ch; + font-size: var(--fs-normal); + } + .section--home .btn--bold-inline { + color: var(--color-txt-light); + border-color: var(--color-txt-light); + height: calc(var(--h-block) * 0.75); + margin-top: calc(var(--spacing) * 0.75); + } + .section--home .btn--bold-inline a { + padding: 0 1ch; + padding-top: 2px; + } + .section--home .btn--bold-inline svg { + fill: var(--color-txt-light); + } +} + +#home__investigations .home-investigations-slider { + max-width: 500px; + height: auto; +} +#home__investigations .card--article .time-alone { + display: block; +} +#home__investigations .card--article .dl, +#home__investigations .card--article .pin { + display: none; +} + +#home__hero { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 3); +} +@media screen and (max-width: 560px) { + #home__hero { + margin-top: calc(var(--spacing) * 2.5); + padding-bottom: calc(var(--spacing) * 1.5); + margin-bottom: 0px; + } +} +#home__hero .section--inner { + display: block; +} +#home__hero .baseline { + font-size: 45px; + line-height: 1.1; + max-width: 32ch; +} +@media screen and (max-width: 560px) { + #home__hero .baseline { + font-size: 34px; + } +} +#home__hero button { + margin-top: calc(var(--spacing) * 1); +} + +#home__folders .card--folder { margin-bottom: calc(var(--spacing) * 0.5); } [data-template=investigation-summary] main { position: relative; } -[data-template=investigation-summary] main header .page-title { - text-transform: uppercase; - font-weight: normal; - font-size: var(--fs-big); - line-height: var(--leading-tight); - margin-top: calc(var(--spacing) * 1); +[data-template=investigation-summary] main .page__header { + margin-inline: auto; + max-width: var(--max-w-content); +} +[data-template=investigation-summary] main .panel-left { + width: calc((100vw - var(--max-w-cards) - var(--padding-body) * 4) * 0.5); +} +@media screen and (max-width: 1340px) { + [data-template=investigation-summary] main { + margin-left: auto; + margin-right: calc(var(--padding-body) * 3); + } + [data-template=investigation-summary] main .panel-left { + width: calc(100vw - var(--max-w-cards) - var(--padding-body) * 6); + } +} +@media screen and (max-width: 1220px) { + [data-template=investigation-summary] main { + margin-left: auto; + margin-right: 0px; + width: calc(100% - var(--panel-w) * 0.5 - var(--padding-body)); + } + [data-template=investigation-summary] main .panel-left { + width: calc(var(--panel-w) * 0.5); + } +} +[data-template=investigation-summary] main .section__article { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 3); + max-width: var(--max-w-content); + margin-inline: auto; +} +[data-template=investigation-summary] main .section__article:target { + padding-top: calc(var(--header-h) + var(--spacing) * 1); } [data-template=investigation-summary] main .section__article a:hover { color: var(--grey-200); } [data-template=investigation-summary] main .section__article .section__title { - font-weight: normal; + font-weight: 500; text-transform: uppercase; - margin-bottom: calc(var(--spacing) * 0.5); + margin-bottom: calc(var(--spacing) * 1); + padding-right: 2ch; + text-wrap: balance; } -[data-template=investigation-summary] main #nav--page ul { - list-style: none; -} -[data-template=investigation-summary] main #nav--page ul li { - text-align: center; - color: var(--color-txt-light); -} -[data-template=investigation-summary] main #nav--page ul li a { - display: block; - padding: 0.3em 0; - text-decoration: none; -} -[data-template=investigation-summary] main #section__short { - font-size: var(--fs-medium); +[data-template=investigation-summary] main #section__dl, +[data-template=investigation-summary] main #section__impacts, +[data-template=investigation-summary] main #section__folder, +[data-template=investigation-summary] main #section__related-articles { + font-size: var(--fs-small); } [data-template=investigation-summary] main #section__dl { margin-top: calc(var(--spacing) * 1.5); border-bottom: var(--border-light); + max-width: var(--max-w-content); + margin-inline: auto; } [data-template=investigation-summary] main #section__dl .dl__group { display: grid; @@ -1652,8 +2776,12 @@ body main { [data-template=investigation-summary] main #section__dl ul:not(.keywords) li { padding-bottom: 0.2em; } +[data-template=investigation-summary] main #section__synthese { + max-width: var(--max-w-content); + margin-inline: auto; +} [data-template=investigation-summary] main #section__synthese p + p { - margin-top: 0.5em; + margin-top: 1em; } [data-template=investigation-summary] main #section__synthese h4 { margin-top: 2em; @@ -1664,80 +2792,64 @@ body main { text-decoration: 1px underline var(--color-txt-light); text-underline-offset: 3px; } - -#share-banner__desktop { - display: none; +[data-template=investigation-summary] main .panel-left { + height: calc(100vh - var(--header-h)); + position: fixed; + left: var(--padding-body); + padding-bottom: calc(var(--padding-body) * 1); + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + z-index: calc(var(--z-header) - 1); } - -#share-banner__desktop ~ .modal--share { - opacity: 0; - pointer-events: none; - transition: opacity 0.2s ease-in; +[data-template=investigation-summary] main .panel-left #nav--page { + padding-bottom: var(--spacing); + width: calc(var(--panel-w) * 0.5); } - -#share-banner__desktop:checked ~ .modal--share { - opacity: 1; - pointer-events: auto; +[data-template=investigation-summary] main .panel-left #nav--page ul { + list-style: none; +} +[data-template=investigation-summary] main .panel-left #nav--page ul li { + text-align: center; + color: var(--color-txt-light); + margin-bottom: 4px; + font-weight: 500; + font-size: var(--fs-small); +} +[data-template=investigation-summary] main .panel-left #nav--page ul li a { + display: block; + padding: 5px 1ch; + text-decoration: none; +} +[data-template=investigation-summary] main .panel-left .btn--group { + width: calc(var(--panel-w) * 0.5); + display: flex; + flex-direction: column; + gap: calc(var(--spacing) * 0.25); +} +[data-template=investigation-summary] main .panel-left .btn--group button, [data-template=investigation-summary] main .panel-left .btn--group .dropdown { + flex-grow: 1; + width: 100%; } @media screen and (max-width: 768px) { - [data-template=investigation-summary] main header { - padding-top: calc(var(--spacing) * 1.5); + [data-template=investigation-summary] main { + width: 100%; } - [data-template=investigation-summary] main header .page-type { - font-size: var(--fs-small); + [data-template=investigation-summary] main header { + margin-bottom: calc(var(--spacing) * 1); } [data-template=investigation-summary] main .section__article { - margin: calc(var(--spacing) * 1.5) 0; - } - [data-template=investigation-summary] main #section__impacts, [data-template=investigation-summary] main #section__en-lien { - margin-top: 0px; - } - [data-template=investigation-summary] main #hero { - margin: calc(var(--spacing) * 1.5) 0; + margin-top: calc(var(--spacing) * 2); + margin-bottom: calc(var(--spacing) * 2); } [data-template=investigation-summary] main #hero figcaption { margin: 0 var(--padding-body); } - [data-template=investigation-summary] main .modal--share { - position: absolute; - width: calc(100% - var(--padding-body) * 2); - bottom: calc(var(--spacing) * 2); - } - [data-template=investigation-summary] main #banner--page { - padding: calc(var(--spacing) * 0.5) 0; - position: fixed; - bottom: 0; - left: 0; - width: 100vw; - padding: calc(var(--spacing) * 0.75) var(--padding-body); - padding-top: var(--spacing); - background-color: var(--color-bg); - background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%); - z-index: 800; - } - [data-template=investigation-summary] main #banner--page #nav--page { + [data-template=investigation-summary] main .panel-left { display: none; } - [data-template=investigation-summary] main #banner--page .btn--group { - display: flex; - gap: calc(var(--spacing) * 0.25); - position: relative; - } - [data-template=investigation-summary] main #banner--page .btn--group > button, - [data-template=investigation-summary] main #banner--page .btn--group > label { - width: 50%; - cursor: pointer; - } - [data-template=investigation-summary] main #banner--page { - opacity: 0; - pointer-events: none; - transition: opacity 0.2s ease-in; - } - [data-template=investigation-summary] main #banner--page.is-visible { - opacity: 1; - pointer-events: auto; - } } @media screen and (max-width: 560px) { [data-template=investigation-summary] main #section__dl .dl__group { @@ -1747,137 +2859,189 @@ body main { padding: calc(var(--spacing) * 0.25) 0; } } -@media screen and (min-width: 768px) { - [data-template=investigation-summary] main #banner--page { - height: calc(100vh - var(--header-h)); +@media screen and (max-width: 768px) { + [data-template=report] #toggle-panel { + display: none; + } + [data-template=report] #report__aside { + width: 100vw; + position: fixed; + top: 0px; + height: 100vh; + left: -100vw; + z-index: calc(var(--z-header) + 10); + transition: left 0.4s ease-in; + background: var(--color-bg); + } + [data-template=report] #report__aside .panel__header { + margin: 0 var(--padding-body); + border-bottom: var(--border-aside); + height: var(--header-h); + } + [data-template=report] #report__aside .panel__content { height: calc(100dvh - var(--header-h)); - margin-bottom: calc((100vh - var(--header-h)) * -1); - margin-bottom: calc((100dvh - var(--header-h)) * -1); - padding: var(--padding-body); - padding-left: 0px; - padding-bottom: calc(var(--padding-body) * 2); - position: sticky; - top: var(--header-h); - width: var(--banner-medium); - display: flex; - flex-direction: column; - justify-content: space-between; + height: calc(100vh - var(--header-h)); + padding-bottom: 30vh; } - [data-template=investigation-summary] main #banner--page .btn--group { - display: flex; - flex-direction: column; - align-items: center; - gap: calc(var(--spacing) * 0.25); + [data-template=report] #report__aside .btn--group { + display: none; } - [data-template=investigation-summary] main #banner--page .btn--group > button, - [data-template=investigation-summary] main #banner--page .btn--group > label { - width: 100%; - max-width: 160px; - cursor: pointer; - } - [data-template=investigation-summary] main #hero { - margin-top: calc(var(--spacing) * 1); - margin-bottom: calc(var(--spacing) * 3); - } - [data-template=investigation-summary] main .section__article { - margin-left: var(--banner-medium); - margin-top: calc(var(--spacing) * 3); - margin-bottom: calc(var(--spacing) * 3); - } - [data-template=investigation-summary] main #section__short { - margin-top: var(--padding-body); - } - [data-template=investigation-summary] main header { - max-width: var(--max-w-content); - margin: calc(var(--spacing) * 2) auto; - } - [data-template=investigation-summary] main .section__article .section__title { - font-size: var(--fs-medium); - margin-bottom: var(--spacing); - } - [data-template=investigation-summary] main #section__synthese { - font-size: var(--fs-medium); - } - .modal--share { - position: absolute; - bottom: calc(var(--padding-body) * 2 + var(--h-block) + var(--spacing) * 0.25); - width: calc(100% - var(--padding-body)); + [data-template=report] .panel-open #report__aside { + left: 0px; } } -@media screen and (min-width: 1080px) { - [data-template=investigation-summary] main #banner--page { - width: calc((100% - var(--max-w-content)) / 2); - } - [data-template=investigation-summary] main #hero { - margin-top: 0; - margin-bottom: calc(var(--spacing) * 3); - } - [data-template=investigation-summary] main #hero figcaption { - max-width: var(--max-w-content); - margin: 0 auto; - } - [data-template=investigation-summary] main header { - max-width: var(--max-w-content); - margin: calc(var(--spacing) * 2) auto; - } - [data-template=investigation-summary] main .section__article { - max-width: var(--max-w-content); - margin: calc(var(--spacing) * 3) auto; - } -} -:root { - --rapport-w: 280px; +.arrow-report { + font-size: 14px; + color: var(--color-txt-light); + width: 20px; + height: 20px; } -#rapport { - margin-bottom: 20vh; - padding-left: var(--rapport-w); - padding-bottom: 10vh; - margin: 0 auto; - max-width: calc(var(--max-w-content) + var(--rapport-w)); +.media-anchor { + width: 100%; + height: 0px; + display: flex; + justify-content: flex-end; } -#rapport .rapport__header { - margin-top: calc(var(--spacing) * 2); - max-width: var(--max-w-content); - padding-bottom: calc(var(--spacing) * 0.5); +.media-anchor .arrow-report { + position: relative; + left: 50px; + top: 8px; } -#rapport .rapport__header .rapport__title-group { + +@media screen and (min-width: 768px) { + [data-template=report] .report__header { + margin-inline: auto; + max-width: var(--max-w-cards); + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 4); + } + [data-template=report] .report__content { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: calc(var(--padding-body) * 2.5); + z-index: calc(var(--z-header) - 100); + } + [data-template=report] .report__content .report__txt { + grid-row: 1; + grid-column: 1; + max-width: var(--max-w-content); + } + [data-template=report] .report__content #report__medias { + z-index: calc(var(--z-header) - 100); + position: sticky; + top: calc(var(--header-h) + var(--padding-body)); + align-self: start; + grid-row: 1; + grid-column: 2; + min-height: 100px; + } + [data-template=report] .report__content #arrow__medias { + z-index: calc(var(--z-header) - 100); + position: sticky; + top: calc(var(--header-h) + var(--padding-body)); + align-self: start; + grid-row: 1; + grid-column: 2; + transform: rotate(180deg); + transform-origin: center; + } + [data-template=report] .report__content #arrow__medias span { + position: relative; + left: 26px; + top: calc(var(--spacing) * -5); + } + [data-template=report] #toggle-panel { + position: fixed; + top: var(--header-h); + left: var(--padding-body); + z-index: calc(var(--z-header) + 100); + } + [data-template=report] #report__aside { + position: fixed; + top: var(--header-h); + left: var(--padding-body); + width: var(--panel-w); + height: calc(100vh - var(--header-h)); + z-index: calc(var(--z-header) + 200); + background-color: var(--color-bg); + box-shadow: 4px 0px 4px 1px var(--color-bg); + } + [data-template=report] #report__aside .panel__header { + border: var(--border-aside); + height: calc(var(--h-block) * 1.5); + } + [data-template=report] #report__aside .panel__content { + height: calc(100% - var(--h-block) * 4.25); + padding-bottom: 80px; + } + [data-template=report] #report__aside { + left: calc(var(--panel-w) * -1); + transition: left ease-in-out 0.5s; + } + [data-template=report] #report { + padding-left: calc(var(--padding-body) * 2); + transition: padding-left ease-in-out 0.5s; + } + [data-template=report] .panel-open #report__aside { + left: var(--padding-body); + } + [data-template=report] .panel-open #report { + padding-left: calc(var(--panel-w) + var(--padding-body) * 1); + } +} +.report__header { + display: grid; + -moz-column-gap: var(--padding-inner); + column-gap: var(--padding-inner); + row-gap: calc(var(--spacing) * 1); + grid-template-columns: 65% 35%; + grid-template-rows: auto auto 1fr; + position: relative; +} +.report__header .report__title-group { + grid-row: 1; grid-column: span 2; } -#rapport .rapport__header .rapport__title-group .title { +.report__header .report__title-group .title { text-transform: uppercase; font-weight: normal; font-size: var(--fs-big); line-height: var(--leading-tight); font-weight: normal; margin-top: calc(var(--spacing) * 1); + text-wrap: balance; } -#rapport .rapport__header .rapport__title-group .subtitle { +.report__header .report__title-group .subtitle { font-size: var(--fs-big); line-height: var(--leading-tight); - margin-top: calc(var(--spacing) * 0.5); font-weight: normal; + text-wrap: balance; } -#rapport .rapport__header .rapport__figure { - width: 100%; - aspect-ratio: 2/1; - margin-top: calc(var(--spacing) * 2); +.report__header figure { + aspect-ratio: 16/9; + display: flex; + overflow: hidden; } -#rapport .rapport__header .rapport__figure img { +.report__header figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; + transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; } -#rapport .rapport__header .rapport__dl { - align-self: start; - font-size: var(--fs-small); +.report__header figure { + grid-row: 2; + grid-column: 2; +} +.report__header .report__dl { + grid-row: 2; + grid-column: 1; + align-self: end; border-bottom: var(--border-light); - flex-grow: 2; align-items: flex-start; - margin-top: calc(var(--spacing) * 0.5); } -#rapport .rapport__header .rapport__dl .dl__group { +.report__header .report__dl .dl__group { display: grid; grid-gap: var(--padding-inner); grid-template-columns: 2fr 3fr; @@ -1885,189 +3049,234 @@ body main { border-top: var(--border-light); padding: calc(var(--spacing) * 0.5) 0; } -#rapport .rapport__header .rapport__dl dt { +.report__header .report__dl dt { color: var(--color-txt-light); padding-right: 1ch; } -#rapport .rapport__header .thumbnail--group { +.report__header .btn--group { + position: relative; + grid-row: 3; + grid-column: 1/3; display: flex; - gap: calc(var(--spacing) * 0.5); - margin-top: calc(var(--spacing) * 1); + justify-content: start; + flex-wrap: wrap; + align-items: start; + gap: calc(var(--spacing) * 0.25); } -#rapport .rapport__header .btn--group { - display: flex; - gap: calc(var(--spacing) * 0.5); + +.report__content .section-content { + padding-bottom: calc(var(--spacing) * 3); } -#rapport .rapport__header .thumbnail { - max-width: 260px; - display: grid; - display: none; - grid-template-columns: 2fr 3fr; - -moz-column-gap: calc(var(--padding-inner) * 1); - column-gap: calc(var(--padding-inner) * 1); - padding: calc(var(--padding-inner) * 0.5); - border: var(--border-light); +.report__content .section-content:target { + padding-top: calc(var(--header-h) + var(--spacing) * 2); } -#rapport .rapport__header .thumbnail figure { - display: flex; - aspect-ratio: 4/3; - grid-column: 1; - grid-row: 1/3; +@media screen and (max-width: 768px) { + .report__content .section-content:target { + padding-top: calc(var(--header-h) + var(--spacing) * 0.5); + } } -#rapport .rapport__header .thumbnail figure img { - width: 100%; - height: 100%; - -o-object-fit: cover; - object-fit: cover; -} -#rapport .rapport__header .thumbnail .thumbnail__title { - padding-top: calc(var(--padding-inner) * 0.5); -} -#rapport .rapport__header .thumbnail .thumbnail__title a { - text-decoration: none; -} -#rapport .rapport__header .thumbnail button { - align-self: end; - display: flex; - align-items: end; - justify-content: end; - padding-right: calc(var(--padding-inner) * 0.5); - padding-bottom: calc(var(--padding-inner) * 0.5); -} -#rapport .rapport__header .thumbnail button svg { - width: 15px; - height: 15px; - fill: var(--color-txt); -} -#rapport .rapport__content { - max-width: var(--max-w-content); - margin-top: calc(var(--spacing) * 3); -} -#rapport .rapport__content .section-content { - margin-bottom: calc(var(--spacing) * 3); -} -#rapport .rapport__content .section-title { +.report__content .section-title { font-size: var(--fs-medium); margin-bottom: var(--spacing); font-weight: normal; text-transform: uppercase; + text-wrap: balance; + max-width: 42ch; } -#rapport .rapport__content p { +.report__content p { margin: calc(var(--spacing) * 0.5) 0; } -#rapport .rapport__content ul { +.report__content ul { padding-left: 3ch; } -#rapport .rapport__content:target { + +.report__content:target { padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important; } -#rapport__aside { - width: var(--rapport-w); - position: fixed; - top: calc(var(--header-h) + var(--padding-body)); - left: var(--padding-body); - height: calc(100vh - var(--header-h) - var(--padding-body) * 4); +.media video { + width: 100%; } -#rapport__aside .tabs { +.media figure { + height: auto; +} +.media .caption { + font-size: var(--fs-small); + line-height: 1.1; +} +.media .swiper { + width: calc(100% - 60px); + max-width: 600px; +} + +#toggle-panel { + width: calc(var(--h-block) * 1); + padding: 0; +} + +#report__aside { + --border-aside: 1px solid var(--color-txt); +} +#report__aside .panel__header { display: flex; - border: var(--border-light); - height: calc(var(--h-block) * 1.25); -} -#rapport__aside .tabs .tab { display: flex; align-items: center; - font-size: var(--fs-small); - font-weight: bold; - padding-left: 2ch; - padding-top: 3px; + justify-content: flex-start; + gap: 0.5ch; + cursor: pointer; } -#rapport__aside .tabs .tab[for=tab-print] { +#report__aside .panel__header .icon { width: calc(var(--h-block) * 1.5); - border-right: var(--border-light); - padding-left: 0; + display: flex; + align-items: center; justify-content: center; } -#rapport__aside .tabs .tab[for=tab-print] .icon svg { - width: 18px; +#report__aside .panel__header svg { + width: 16px; fill: var(--color-txt); } -#rapport__aside .content-aside { +#report__aside .panel__header .text { + padding-top: 5px; +} +#report__aside .panel__header .close { + position: absolute; + right: 0; +} +#report__aside .panel__header .close svg { + width: 10px; + fill: var(--color-txt); +} +#report__aside .panel__header:hover .close svg { + fill: var(--grey-200); +} +#report__aside .panel__content { padding: var(--padding-body); - height: calc(100% - var(--h-block) * 1.25); overflow: scroll; - border: var(--border-light); + scrollbar-width: none; + -ms-overflow-style: none; + border: var(--border-aside); border-top: none; } -#rapport__aside #toc ul { +#report__aside .panel__content::-webkit-scrollbar { + display: none; +} +#report__aside #toc ul { list-style: none; } -#rapport__aside #toc li { +#report__aside #toc li { font-size: var(--fs-small); + color: var(--color-txt-light); +} +#report__aside #toc li a { + display: block; padding: 5px 1ch; padding-top: 7px; } -#rapport__aside #toc li.selected { +#report__aside #toc li.selected { + background-color: var(--grey-800); + color: var(--color-txt); +} +#report__aside #toc li:hover { background-color: var(--grey-800); } -#rapport__aside #toc li:hover { - background-color: var(--grey-800); -} -#rapport__aside #toc .toc-level-1 { +#report__aside #toc .toc-level-1 { margin-bottom: calc(var(--spacing) * 0.5); font-weight: bold; } -#rapport__aside #toc .toc-level-2 { +#report__aside #toc .toc-level-2 { margin-bottom: calc(var(--spacing) * 0.25); padding-left: 4ch; } -#rapport__aside #toc a { +#report__aside #toc a { text-decoration: none; } -#rapport__aside #download-pdf { - margin: 0 auto; +#report__aside .btn--group { margin-top: calc(var(--spacing) * 0.5); + display: flex; + gap: var(--padding-inner); +} +#report__aside .btn--group button { + flex-grow: 1; } -#tab-print, #tab-toc { - display: none; -} - -#tab-print:checked ~ .content-aside #toc { - display: none; -} - -#tab-print:checked ~ .content-aside #print-features { - display: block; -} - -#tab-toc:checked ~ .content-aside #toc { - display: block; -} - -#tab-toc:checked ~ .content-aside #print-features { - display: none; -} - -#rapport { - --fig-outside: calc(var(--spacing)*2); -} -#rapport .container-figure { - width: calc(100% + var(--fig-outside) * 2); +.content-folder { + max-width: var(--max-w-cards); + margin: 0 auto; + display: grid; + grid-gap: calc(var(--padding-body) * 1.5); position: relative; - left: calc(var(--fig-outside) * -1); } -#rapport .fig-simple { - height: calc(100vh - var(--header-h) - var(--spacing) * 2); +.content-folder .container-cards { + display: block; + align-self: start; } -#rapport .fig-simple figure { - height: 100%; - width: 100%; - overflow: hidden; +.content-folder #section__investigations article { + margin-bottom: calc(var(--spacing) * 1); } -#rapport .fig-simple figure img { - width: 100%; - height: 100%; - -o-object-fit: contain; - object-fit: contain; +.content-folder .container__title { + font-weight: normal; + font-size: var(--fs-normal); + text-transform: uppercase; + margin-bottom: calc(var(--spacing) * 0.75); +} +@media screen and (max-width: 1080px) { + .content-folder #section__investigations { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: calc(var(--padding-inner) * 1.5) !important; + margin-bottom: calc(var(--spacing) * 3); + } + .content-folder #section__investigations article { + margin-bottom: 0px; + } + .content-folder #section__investigations .container__title { + grid-column: span 2; + margin-bottom: 0px; + } + .content-folder section:target { + padding-top: calc(var(--header-h) + var(--spacing)); + } +} +@media screen and (min-width: 1080px) { + .content-folder { + grid-template-columns: 1fr 1fr; + } + .content-folder #nav-folder { + display: none; + } + .content-folder #section__investigations { + display: block; + margin-bottom: 0px; + } + .content-folder #section__investigations article { + margin-bottom: calc(var(--spacing) * 1); + } +} +@media screen and (max-width: 768px) { + .content-folder { + display: block; + } + .content-folder #section__investigations { + display: block; + } + .content-folder .container__title { + margin-bottom: calc(var(--spacing) * 0.5) !important; + } +} + +#nav-folder { + display: flex; + margin-top: calc(var(--spacing) * -1); + margin-bottom: calc(var(--spacing) * 2); +} +#nav-folder svg { + width: 10px; + height: 10px; + transform: rotate(90deg); +} + +@media screen and (min-width: 1080px) { + #nav-folder { + display: none; + } }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/assets/css/style.css.map b/assets/css/style.css.map index 8b2a334..4350768 100644 --- a/assets/css/style.css.map +++ b/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.css","base/_var.scss","base/_body.scss","partials/_site-header.scss","components/_buttons.scss","components/_tags.scss","components/_keywords.scss","components/_sort.scss","components/_hero.scss","components/_form-newsletter.scss","components/_search-form.scss","components/_list-socials.scss","components/_modal-share.scss","components/_text.scss","components/_card-article.scss","components/_figures.scss","components/_card-article-small.scss","components/_card-impact.scss","components/_details-summary.scss","components/_card-open-graph.scss","partials/_site-menu.scss","partials/_site-footer.scss","partials/_main-layout.scss","template/_investigations.scss","template/_investigation-summary.scss","template/_rapport.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.css","base/_var.scss","base/_body.scss","partials/_site-header.scss","components/_buttons.scss","components/_tags.scss","components/_keywords.scss","components/_sort.scss","components/_btn-group-mobile.scss","components/_hero.scss","components/_form-newsletter.scss","components/_search-form.scss","components/_list-socials.scss","components/_modal-share.scss","components/_dropdown.scss","components/_card-article.scss","components/_figures.scss","components/_card-article-small.scss","components/_card-impact.scss","components/_details-summary.scss","components/_card-impact-small.scss","components/_card-folder.scss","components/_card-open-graph.scss","components/_swiper.scss","components/_slider-before-after.scss","partials/_site-menu.scss","partials/_site-footer.scss","partials/_main-layout.scss","partials/_page-header.scss","partials/_container-cards.scss","template/_home.scss","template/_investigation-summary.scss","template/_report.scss","template/_folder.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index 0f8d137..a762e05 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -1,39 +1,49 @@ @charset "UTF-8"; -@import 'base/responsive'; -@import 'base/var'; -@import 'base/body'; +@import "base/responsive"; +@import "base/var"; +@import "base/body"; -@import 'partials/site-header'; +@import "partials/site-header"; // @import 'components/nav-tabs'; // @import 'components/btn--default'; -@import 'components/buttons'; -@import 'components/tags'; -@import 'components/keywords'; -@import 'components/details-summary'; -@import 'components/sort'; - -@import 'components/figures'; -@import 'components/hero'; -@import 'components/form-newsletter'; -@import 'components/search-form'; -@import 'components/list-socials'; -@import 'components/modal-share'; -@import 'components/text'; -@import 'components/card-article'; -@import 'components/card-article-small'; -@import 'components/card-impact'; -@import 'components/card-open-graph'; +@import "components/buttons"; +@import "components/tags"; +@import "components/keywords"; +@import "components/details-summary"; +@import "components/sort"; +@import "components/btn-group-mobile"; -@import 'partials/site-header'; -@import 'partials/site-menu'; -@import 'partials/site-footer'; -@import 'partials/main-layout'; -@import 'template/investigations'; -@import 'template/investigation-summary'; -@import 'template/rapport'; +@import "components/figures"; +@import "components/hero"; +@import "components/form-newsletter"; +@import "components/search-form"; +@import "components/list-socials"; +@import "components/modal-share"; +@import "components/dropdown"; +@import "components/text"; +@import "components/card-article"; +@import "components/card-article-small"; +@import "components/card-impact"; +@import "components/card-impact-small"; +@import "components/card-folder"; +@import "components/card-open-graph"; +@import "components/swiper"; +@import "components/slider-before-after"; +@import "partials/site-header"; +@import "partials/site-menu"; +@import "partials/site-footer"; +@import "partials/main-layout"; +@import "partials/page-header"; +@import "partials/container-cards"; + +@import "template/home"; +@import "template/investigation-summary"; +@import "template/report"; +@import "template/folder"; +@import "template/impacts"; diff --git a/assets/css/template/_folder.scss b/assets/css/template/_folder.scss new file mode 100644 index 0000000..ac8e4f3 --- /dev/null +++ b/assets/css/template/_folder.scss @@ -0,0 +1,90 @@ +.content-folder{ + // max-width: 1300px; + max-width: var(--max-w-cards); + margin: 0 auto; + display: grid; + grid-gap: calc(var(--padding-body)*1.5); + // grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5); + + position: relative; + + .container-cards{ + display: block; + align-self: start; + } + + #section__investigations article{ + margin-bottom: calc(var(--spacing)*1); + } + + + .container__title{ + font-weight: normal; + font-size: var(--fs-normal); + text-transform: uppercase; + margin-bottom: calc(var(--spacing)*0.75); + + } + + + + + @media #{$medium}{ + #section__investigations{ + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: calc(var(--padding-inner)*1.5)!important; + margin-bottom: calc(var(--spacing)*3); + article{ margin-bottom: 0px;} + .container__title{ + grid-column: span 2; + margin-bottom: 0px; + } + } + section:target{ + padding-top: calc(var(--header-h) + var(--spacing)); + + } + + } + + @media #{$medium-up}{ + #nav-folder{ display: none; } + grid-template-columns: 1fr 1fr; + #section__investigations{ + display: block; + margin-bottom: 0px; + article{ + margin-bottom: calc(var(--spacing)*1); + } + } + } + + + @media #{$small}{ + display: block; + #section__investigations{ + display: block; + } + .container__title{ + margin-bottom: calc(var(--spacing)*0.5)!important; + } + } + +} + + +#nav-folder{ + display: flex; + margin-top: calc(var(--spacing)*-1); + margin-bottom: calc(var(--spacing)*2); + + svg{ + width: 10px; + height: 10px; + transform: rotate(90deg); + } +} +@media #{$medium-up}{ + #nav-folder{ display: none;} +} \ No newline at end of file diff --git a/assets/css/template/_home.scss b/assets/css/template/_home.scss new file mode 100644 index 0000000..0b68df4 --- /dev/null +++ b/assets/css/template/_home.scss @@ -0,0 +1,201 @@ +.section--home { + + .btn--bold-inline { + text-transform: none; + margin-top: calc(var(--spacing)*1.5); + + svg { + width: 12px; + height: 12px; + top: 0px; + } + + } + + + + .title-section { + font-size: var(--fs-medium); + font-weight: normal; + text-transform: uppercase; + font-size: var(--fs-big); + margin-bottom: calc(var(--spacing)*1); + } + + .description-section { + max-width: 42ch; + font-size: var(--fs-medium); + line-height: 1.1; + } + + + @media #{$medium-up} { + + border-bottom: var(--border-light); + + .section--inner { + max-width: 1280px; + margin: calc(var(--spacing)*3) auto; + display: grid; + --gap: calc(var(--padding-body)*2); + grid-template-columns: 1fr 640px; + grid-gap: var(--gap); + } + + + .col-left { + height: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + + } + + .col-right { + width: 100%; + height: 100%; + } + + + } + + @media #{$medium} { + + &#home__investigations, + &#home__hero { + border-bottom: var(--border-light); + } + + .section--inner { + margin-top: calc(var(--spacing)*3); + margin-bottom: calc(var(--spacing)*4); + } + + .col-left { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + justify-content: space-between; + margin-bottom: calc(var(--spacing)*2); + + .title-section { + width: 100%; + } + + } + } + + @media #{$x-small} { + .section--inner { + margin-top: calc(var(--spacing)*2); + margin-bottom: calc(var(--spacing)*4); + margin-bottom: 0px; + } + + .col-left{ + margin-bottom: calc(var(--spacing)*1.5); + } + + + .title-section { + margin-bottom: calc(var(--spacing)*0.25); + } + + .description-section { + max-width: 42ch; + font-size: var(--fs-normal); + } + + .btn--bold-inline { + color: var(--color-txt-light); + border-color: var(--color-txt-light); + height: calc(var(--h-block) * 0.75); + // margin: 0 auto; + margin-top: calc(var(--spacing)*0.75); + + a { + padding: 0 1ch; + padding-top: 2px; + } + + svg { + fill: var(--color-txt-light); + } + } + } + + + + + + + + +} + + + + +#home__investigations { + + .home-investigations-slider { + max-width: 500px; + height: auto; + } + + .card--article { + + .time-alone { + display: block; + } + + .dl, + .pin { + display: none; + } + } + + +} + + +#home__hero { + margin-top: calc(var(--spacing)*3); + margin-bottom: calc(var(--spacing)*3); + + @media #{$x-small} { + margin-top: calc(var(--spacing)*2.5); + padding-bottom: calc(var(--spacing)*1.5); + margin-bottom: 0px; + + } + + + .section--inner { + display: block; + } + + .baseline { + font-size: 45px; + line-height: 1.1; + max-width: 32ch; + + @media #{$x-small} { + font-size: 34px; + } + } + + button { + margin-top: calc(var(--spacing)*1); + } + + + +} + + +#home__folders { + .card--folder { + margin-bottom: calc(var(--spacing)*0.5); + } +} \ No newline at end of file diff --git a/assets/css/template/_impacts.scss b/assets/css/template/_impacts.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/css/template/_investigation-summary.scss b/assets/css/template/_investigation-summary.scss index 22f26dd..32c221f 100644 --- a/assets/css/template/_investigation-summary.scss +++ b/assets/css/template/_investigation-summary.scss @@ -1,336 +1,217 @@ -[data-template="investigation-summary"] main{ - - position: relative; - +[data-template="investigation-summary"] main { + position: relative; - header{ - - .page-title{ - text-transform: uppercase; - font-weight: normal; - font-size: var(--fs-big); - line-height: var(--leading-tight); - margin-top: calc(var(--spacing)*1); - } + .page__header{ + margin-inline: auto; + max-width: var(--max-w-content); + } + + + + + .panel-left{ + width: calc((100vw - var(--max-w-cards) - var(--padding-body)*4)*0.5); + } + + @media screen and (max-width: 1340px){ + margin-left: auto; + margin-right: calc(var(--padding-body)*3); + .panel-left{ + width: calc(100vw - var(--max-w-cards) - var(--padding-body)*6); + } + } + + + @media screen and (max-width: 1220px){ + margin-left: auto; + margin-right: 0px; + width: calc(100% - var(--panel-w)*0.5 - var(--padding-body)); + .panel-left{ + width: calc(var(--panel-w)*0.5); + } + } + + + .section__article { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 3); + 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__article{ - a:hover{ - color: var(--grey-200); - } - .section__title{ - font-weight: normal; - text-transform: uppercase; - margin-bottom: calc(var(--spacing)*0.5) - } + .section__title { + font-weight: 500; + text-transform: uppercase; + margin-bottom: calc(var(--spacing) * 1); + padding-right: 2ch; + text-wrap: balance; } + } + + + #section__dl, + #section__impacts, + #section__folder, + #section__related-articles{ + font-size: var(--fs-small); + } - #nav--page{ - ul{ - list-style: none; - li{ - text-align: center; - color: var(--color-txt-light); - a{ - display: block; - padding: 0.3em 0; - text-decoration: none; - } - } - } + + + #section__dl { + margin-top: calc(var(--spacing) * 1.5); + border-bottom: var(--border-light); + max-width: var(--max-w-content); + margin-inline: auto; + + .dl__group { + @include grid-content(); + border-top: var(--border-light); + padding: calc(var(--spacing) * 0.5) 0; } - #section__short{ - font-size: var(--fs-medium); + dt { + color: var(--color-txt-light); + padding-right: 1ch; } - #section__dl{ - margin-top: calc(var(--spacing)*1.5); - border-bottom: var(--border-light); + ul:not(.keywords) { + list-style: none; - .dl__group{ - @include grid-content(); - border-top: var(--border-light); - padding: calc(var(--spacing)*0.5) 0; - } + li { + padding-bottom: 0.2em; + } + } + } - dt{ - color: var(--color-txt-light); - padding-right: 1ch; - } + - ul:not(.keywords){ - list-style: none; - li{ - padding-bottom: 0.2em; - } - - } + #section__synthese { + + max-width: var(--max-w-content); + margin-inline: auto; + + p+p { + margin-top: 1em; } - - #section__synthese{ - p + p{ - margin-top: 0.5em; - } - - h4{ - margin-top: 2em; - margin-bottom: 1em; - font-size: var(--fs-normal); - font-weight: normal; - text-decoration: 1px underline var(--color-txt-light); - text-underline-offset: 3px; - - } - + h4 { + margin-top: 2em; + margin-bottom: 1em; + font-size: var(--fs-normal); + font-weight: normal; + text-decoration: 1px underline var(--color-txt-light); + text-underline-offset: 3px; } + } + + + + + .panel-left{ + //background-color: yellow; + + height: calc(100vh - var(--header-h)); + position: fixed; + left: var(--padding-body); + padding-bottom: calc(var(--padding-body)*1); + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + z-index: calc(var(--z-header) - 1); + + #nav--page { + padding-bottom: var(--spacing); + width: calc(var(--panel-w)*0.5); + ul { + list-style: none; + + li { + text-align: center; + color: var(--color-txt-light); + margin-bottom: 4px; + font-weight: 500; + font-size: var(--fs-small); + + a { + display: block; + padding: 5px 1ch; + text-decoration: none; + } + } + } + } + + .btn--group{ + width: calc(var(--panel-w)*0.5); + display: flex; + flex-direction: column; + gap:calc(var(--spacing)*0.25); + + button, .dropdown{ + flex-grow: 1; + width: 100%; + } + } + + + } + + + + + } - - -// SHARE ACTIONS -------------------------------------------------- -// ---------------------------------------------------------------- - -#share-banner__desktop{ display: none; } -#share-banner__desktop ~ .modal--share{ - opacity: 0; - pointer-events: none; - transition: opacity .2s ease-in; -} - -#share-banner__desktop:checked ~ .modal--share{ - opacity: 1; - pointer-events: auto; -} - - - - - - // SMALL ---------------------------------------------------------- // ---------------------------------------------------------------- +@media #{$small} { + [data-template="investigation-summary"] main { + width: 100%; -@media #{$small}{ - - [data-template="investigation-summary"] main{ - - header{ - padding-top: calc(var(--spacing)*1.5); - .page-type{ - font-size: var(--fs-small); - } - } - - .section__article{ - margin: calc(var(--spacing)*1.5) 0; - } - - #section__impacts, #section__en-lien{ - margin-top: 0px; - } - - #hero{ - margin: calc(var(--spacing)*1.5) 0; - figcaption{ - margin: 0 var(--padding-body); - } - } - - .modal--share{ - position: absolute; - width: calc(100% - var(--padding-body)*2); - bottom: calc(var(--spacing) * 2); - } - - - #banner--page { - padding: calc(var(--spacing)*0.5) 0; - - position: fixed; - bottom: 0; - left: 0; - width: 100vw; - padding: calc(var(--spacing)*0.75) var(--padding-body); - padding-top: var(--spacing); - background-color: var(--color-bg); - background: linear-gradient(0deg,var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%); - z-index: 800; - - #nav--page{ - display: none; - } - .btn--group{ - - display: flex; - gap: calc(var(--spacing)*0.25); - position: relative; - - > button, - > label { - width: 50%; - cursor: pointer; - } - - } - - } - - - // action - - #banner--page{ - opacity: 0; - pointer-events: none; - transition: opacity .2s ease-in; - } - - #banner--page.is-visible{ - opacity: 1; - pointer-events: auto; - } - - - + header { + margin-bottom: calc(var(--spacing) * 1); } + .section__article { + margin-top: calc(var(--spacing) * 2); + margin-bottom: calc(var(--spacing) * 2); + } + + + #hero { + figcaption { + margin: 0 var(--padding-body); + } + } + + .panel-left { + display: none; + } + } } - - -@media #{$x-small}{ - [data-template="investigation-summary"] main{ - #section__dl .dl__group{ - - column-gap: 1ch; - font-size: var(--fs-small); - padding: calc(var(--spacing)*0.25) 0; - } - } -} - - - - - -// DESKTOP ---------------------------------------------------------- -// ---------------------------------------------------------------- - - -@media #{$small-up}{ - - [data-template="investigation-summary"] main{ - - #banner--page{ - height: calc(100vh - var(--header-h)); - height: calc(100dvh - var(--header-h)); - margin-bottom: calc((100vh - var(--header-h))*-1); - margin-bottom: calc((100dvh - var(--header-h))*-1); - padding: var(--padding-body); - padding-left: 0px; - padding-bottom: calc(var(--padding-body)*2); - position: sticky; - top: var(--header-h); - width: var(--banner-medium); - display: flex; - flex-direction: column; - justify-content: space-between; - } - - #banner--page .btn--group{ - display: flex; - flex-direction: column; - align-items: center; - gap: calc(var(--spacing)*0.25); - - > button, - > label { - width: 100%; - max-width: 160px; - cursor: pointer; - } - - } - - #hero{ - margin-top: calc(var(--spacing)*1); - margin-bottom: calc(var(--spacing)*3); - } - - .section__article{ - margin-left: var(--banner-medium); - margin-top: calc(var(--spacing)*3); - margin-bottom: calc(var(--spacing)*3); - } - - #section__short{ - margin-top: var(--padding-body); - } - - header{ - max-width: var(--max-w-content); - margin: calc(var(--spacing)*2) auto; - } - - .section__article{ - .section__title{ - font-size: var(--fs-medium); - margin-bottom: var(--spacing); - } - } - - #section__synthese{ - font-size: var(--fs-medium); - } - } - .modal--share{ - position: absolute; - bottom: calc(var(--padding-body)*2 + var(--h-block) + var(--spacing) * 0.25); - width: calc(100% - var(--padding-body)); - } -} - - - - -@media #{$medium-up}{ - - [data-template="investigation-summary"] main{ - - #banner--page{ - width: calc((100% - var(--max-w-content))/2); - } - - #hero{ - margin-top: 0; - margin-bottom: calc(var(--spacing)*3); - figcaption{ - max-width: var(--max-w-content); - margin: 0 auto; - } - } - - - header{ - max-width: var(--max-w-content); - margin: calc(var(--spacing)*2) auto; - } - - .section__article{ - max-width: var(--max-w-content); - margin: calc(var(--spacing)*3) auto; - } - - - - +@media #{$x-small} { + [data-template="investigation-summary"] main { + #section__dl .dl__group { + column-gap: 1ch; + font-size: var(--fs-small); + padding: calc(var(--spacing) * 0.25) 0; } + } } \ No newline at end of file diff --git a/assets/css/template/_investigations.scss b/assets/css/template/_investigations.scss deleted file mode 100644 index 7d51a91..0000000 --- a/assets/css/template/_investigations.scss +++ /dev/null @@ -1,53 +0,0 @@ - -[data-template="investigations"] main{ - - - - #container-cards{ - - @media #{$x-small-up}{ - max-width: var(--max-w-container); - margin: 0 auto; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); - grid-auto-rows: minmax(100px, auto); - grid-gap: calc(var(--padding-body)*1.5); - margin-bottom: 10vh; - - - - - - - } - @media #{$x-small}{ - margin-bottom: 10vh; - .card--article{ - margin-bottom: calc(var(--spacing)*1.5); - } - } - - - - } - - .search-container{ - max-width: var(--max-w-content); - margin: 0 auto; - margin-bottom: calc(var(--spacing)*2); - } - - .page__sort{ - max-width: var(--max-w-container); - display: flex; - justify-content: right; - grid-gap: var(--padding-inner); - margin: 0 auto; - margin-bottom: calc(var(--spacing)*0.5); - - } - - - - -} diff --git a/assets/css/template/_rapport.scss b/assets/css/template/_rapport.scss deleted file mode 100644 index 71f4116..0000000 --- a/assets/css/template/_rapport.scss +++ /dev/null @@ -1,307 +0,0 @@ -:root{ - --rapport-w: 280px; -} - -#rapport{ - margin-bottom: 20vh; - padding-left: var(--rapport-w); - padding-bottom: 10vh; - margin: 0 auto; - max-width: calc(var(--max-w-content) + var(--rapport-w)); - - .rapport__header{ - - // display: grid; - // grid-template-columns: 1fr 140px; - // column-gap: calc(var(--spacing)*1.5); - // row-gap: calc(var(--spacing)*2); - - margin-top: calc(var(--spacing)*2); - max-width: var(--max-w-content); - padding-bottom: calc(var(--spacing)*0.5); - - - .rapport__title-group{ - grid-column: span 2; - - .title{ - text-transform: uppercase; - font-weight: normal; - font-size: var(--fs-big); - line-height: var(--leading-tight); - font-weight: normal; - margin-top: calc(var(--spacing)*1); - } - - .subtitle{ - font-size: var(--fs-big); - line-height: var(--leading-tight); - margin-top: calc(var(--spacing)*0.5); - font-weight: normal; - - } - - } - - - - - .rapport__figure{ - width: 100%; - aspect-ratio: 2/1; - margin-top: calc(var(--spacing)*2); - img{ - width: 100%; - height: 100%; - object-fit: cover; - } - - } - - .rapport__dl{ - align-self: start; - font-size: var(--fs-small); - border-bottom: var(--border-light); - flex-grow: 2; - align-items: flex-start; - margin-top: calc(var(--spacing)*0.5); - .dl__group{ - @include grid-content(); - border-top: var(--border-light); - padding: calc(var(--spacing)*0.5) 0; - } - - dt{ - color: var(--color-txt-light); - padding-right: 1ch; - } - } - - - .thumbnail--group{ - display: flex; - gap: calc(var(--spacing)*0.5); - margin-top: calc(var(--spacing)*1); - } - - - - .btn--group{ - display: flex; - gap: calc(var(--spacing)*0.5); - } - - .thumbnail{ - max-width: 260px; - display: grid; - display: none; - grid-template-columns: 2fr 3fr; - column-gap: calc(var(--padding-inner)*1); - padding: calc(var(--padding-inner)*0.5); - border: var(--border-light); - figure{ - display: flex; - aspect-ratio: 4/3; - grid-column: 1; - grid-row: 1/3; - img{ - width: 100%; - height: 100%; - object-fit: cover; - } - } - - .thumbnail__title{ - padding-top: calc(var(--padding-inner)*0.5); - a{ - text-decoration: none; - } - } - - button{ - align-self: end; - display: flex; - align-items: end; - justify-content: end; - padding-right: calc(var(--padding-inner)*0.5); - padding-bottom: calc(var(--padding-inner)*0.5); - } - - - button svg{ - width: 15px; - height: 15px; - fill: var(--color-txt); - } - - } - - - } - - .rapport__content{ - max-width: var(--max-w-content); - margin-top: calc(var(--spacing)*3); - - - .section-content{ - margin-bottom: calc(var(--spacing)*3); - - - - - } - - .section-title{ - font-size: var(--fs-medium); - margin-bottom: var(--spacing); - font-weight: normal; - text-transform: uppercase; - } - - p { - margin: calc(var(--spacing)*0.5) 0; - } - - ul{ - padding-left: 3ch; - } - } - - .rapport__content:target{ - padding-top: calc(var(--header-h)*2 + var(--spacing))!important; - } - - - - - -} - - - - - - -#rapport__aside{ - width: var(--rapport-w); - position: fixed; - top: calc(var(--header-h) + var(--padding-body)); - left: var(--padding-body); - - // border-radius: var(--radius-small); - height: calc(100vh - var(--header-h) - var(--padding-body)*4); - - .tabs{ - display: flex; - border: var(--border-light); - height: calc(var(--h-block)*1.25); - - .tab{ - display: flex; - align-items: center; - font-size: var(--fs-small); - font-weight: bold; - padding-left: 2ch; - padding-top: 3px; - } - - .tab[for="tab-print"]{ - width: calc(var(--h-block)*1.5); - border-right: var(--border-light); - padding-left: 0; - justify-content: center; - .icon{ - - svg{ - width: 18px; - fill: var(--color-txt); - } - } - } - } - - .content-aside{ - padding: var(--padding-body); - height: calc(100% - var(--h-block)*1.25); - overflow: scroll; - border: var(--border-light); - border-top: none; - } - - - #toc{ - ul{ list-style: none;} - - li{ - font-size: var(--fs-small); - padding: 5px 1ch; - padding-top: 7px; - - - } - - li.selected{ - // color: var(--color-accent); - background-color: var(--grey-800); - } - - li:hover{ - background-color: var(--grey-800); - } - - .toc-level-1{ - margin-bottom: calc(var(--spacing)*0.5); - font-weight: bold; - } - .toc-level-2{ - margin-bottom: calc(var(--spacing)*0.25); - padding-left: 4ch; - } - a{ - text-decoration: none; - } - - } - - #download-pdf{ - margin: 0 auto; - margin-top: calc(var(--spacing)*0.5); - } -} - - - -#tab-print, #tab-toc{ display: none; } -#tab-print:checked ~ .content-aside #toc{ display: none; } -#tab-print:checked ~ .content-aside #print-features{ display: block; } - -#tab-toc:checked ~ .content-aside #toc{ display: block; } -#tab-toc:checked ~ .content-aside #print-features{ display: none; } - - - - -#rapport{ - --fig-outside: calc(var(--spacing)*2); - .container-figure{ - width: calc(100% + var(--fig-outside)*2); - position: relative; - left: calc(var(--fig-outside)*-1); - } - .fig-simple{ - height: calc(100vh - var(--header-h) - var(--spacing)*2); - - figure{ - height: 100%; - width: 100%; - overflow: hidden; - - img{ - width: 100%; - height: 100%; - object-fit: contain; - } - } - } -} \ No newline at end of file diff --git a/assets/css/template/_report.scss b/assets/css/template/_report.scss new file mode 100644 index 0000000..496a1d8 --- /dev/null +++ b/assets/css/template/_report.scss @@ -0,0 +1,478 @@ + + + + +// LAOUT ----------------------------------- + + +@media #{$small}{ + [data-template="report"] { + + #toggle-panel{ + display: none; + } + + #report__aside{ + width: 100vw; + position: fixed; + top: 0px; + height: 100vh; + left: -100vw; + z-index: calc(var(--z-header) + 10); + transition: left .4s ease-in; + background: var(--color-bg); + + + .panel__header{ + margin: 0 var(--padding-body); + border-bottom: var(--border-aside); + height: var(--header-h); + } + + .panel__content{ + height: calc(100dvh - var(--header-h)); + height: calc(100vh - var(--header-h)); + padding-bottom: 30vh; + } + + .btn--group{ + display: none; + } + + } + + .panel-open #report__aside{ + left: 0px; + } + + } +} + + +.arrow-report{ + font-size: 14px; + color: var(--color-txt-light); + + width: 20px; + height: 20px; + +} + +.media-anchor{ + width: 100%; + height: 0px; + display: flex; + justify-content: flex-end; + + .arrow-report{ + position: relative; + left: 50px; + top: 8px; + } +} + + + +@media #{$small-up}{ +[data-template="report"] { + + + .report__header { + margin-inline: auto; + max-width: var(--max-w-cards); + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 4); + } + + .report__content { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: calc(var(--padding-body)*2.5); + z-index: calc(var(--z-header) - 100); + + .report__txt { + grid-row: 1; + grid-column: 1; + max-width: var(--max-w-content); + } + + #report__medias { + z-index: calc(var(--z-header) - 100); + position: sticky; + top: calc(var(--header-h) + var(--padding-body)); + align-self: start; + + // border-left: var(--border-light); + // padding-left: var(--padding-inner); + grid-row: 1; + grid-column: 2; + // border: var(--border-light); + min-height: 100px; + + } + + #arrow__medias{ + z-index: calc(var(--z-header) - 100); + position: sticky; + top: calc(var(--header-h) + var(--padding-body)); + align-self: start; + + grid-row: 1; + grid-column: 2; + transform: rotate(180deg); + transform-origin: center; + + + span{ + position: relative; + left: 26px; + top: calc(var(--spacing)*-5); + } + } + + } + + + + #toggle-panel { + position: fixed; + top: var(--header-h); + left: var(--padding-body); + z-index: calc(var(--z-header) + 100); + } + + #report__aside { + position: fixed; + top: var(--header-h); + left: var(--padding-body); + width: var(--panel-w); + height: calc(100vh - var(--header-h)); + z-index: calc(var(--z-header) + 200); + background-color: var(--color-bg); + box-shadow: 4px 0px 4px 1px var(--color-bg); + + .panel__header{ + border: var(--border-aside); + height: calc(var(--h-block)*1.5); + } + + .panel__content { + height: calc(100% - var(--h-block)*4.25); + padding-bottom: 80px; + + } + + } + + + #report__aside { + left: calc(var(--panel-w)*-1); + transition: left ease-in-out .5s; + } + #report { + padding-left: calc(var(--padding-body)*2); + transition: padding-left ease-in-out .5s; + } + + + .panel-open{ + + #report__aside{ + left: var(--padding-body); + } + #report { + padding-left: calc(var(--panel-w) + var(--padding-body)*1); + } + + } + + + + + +} + +} + +// HEADER ------------------------------------------------------------------------- + +.report__header { + + + display: grid; + column-gap: var(--padding-inner); + row-gap: calc(var(--spacing)*1); + grid-template-columns: 65% 35%; + grid-template-rows: auto auto 1fr; + position: relative; + + .report__title-group { + grid-row: 1; + grid-column: span 2; + + .title { + text-transform: uppercase; + font-weight: normal; + font-size: var(--fs-big); + line-height: var(--leading-tight); + font-weight: normal; + margin-top: calc(var(--spacing)*1); + text-wrap: balance; + } + + .subtitle { + font-size: var(--fs-big); + line-height: var(--leading-tight); + font-weight: normal; + text-wrap: balance; + + } + + } + + @include figure-16-9(); + + figure { + grid-row: 2; + grid-column: 2; + } + + .report__dl { + grid-row: 2; + grid-column: 1; + align-self: end; + // font-size: var(--fs-small); + border-bottom: var(--border-light); + align-items: flex-start; + + .dl__group { + @include grid-content(); + border-top: var(--border-light); + padding: calc(var(--spacing)*0.5) 0; + } + + dt { + color: var(--color-txt-light); + padding-right: 1ch; + } + } + + + .btn--group { + position: relative; + grid-row: 3; + grid-column: 1/3; + + display: flex; + justify-content: start; + flex-wrap: wrap; + align-items: start; + gap: calc(var(--spacing)*0.25); + + } +} + + + + + +// CONTENT ------------------------------------------------------------------------------- + + + +.report__content { + + + + .section-content { + padding-bottom: calc(var(--spacing)*3); + &:target{ + padding-top: calc(var(--header-h) + var(--spacing)*2); + @media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); } + } + + } + + + + .section-title { + font-size: var(--fs-medium); + margin-bottom: var(--spacing); + font-weight: normal; + text-transform: uppercase; + text-wrap: balance; + max-width: 42ch; + } + + p { + margin: calc(var(--spacing)*0.5) 0; + } + + ul { + padding-left: 3ch; + } +} + +.report__content:target { + padding-top: calc(var(--header-h)*2 + var(--spacing)) !important; +} + + +.media{ + + video{ + width: 100%; + } + + figure{ + height: auto; + } + + .caption{ + font-size: var(--fs-small); + line-height: 1.1; + } + + .swiper{ + width: calc(100% - 60px); + max-width: 600px; + } +} + + + +/// PANEL-LEFT  -------------------------------------------- + + + +#toggle-panel { + width: calc(var(--h-block) * 1); + padding: 0; +} + +#report__aside { + --border-aside: 1px solid var(--color-txt); + + .panel__header { + display: flex; + + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.5ch; + + .icon { + width: calc(var(--h-block)*1.5); + display: flex; + align-items: center; + justify-content: center; + } + + svg { + width: 16px; + fill: var(--color-txt); + } + + .text { + padding-top: 5px; + } + + .close { + position: absolute; + right: 0; + + svg { + width: 10px; + fill: var(--color-txt); + } + + + } + + cursor: pointer; + + &:hover { + .close svg { + fill: var(--grey-200); + } + } + + + } + + .panel__content { + padding: var(--padding-body); + overflow: scroll; + @include hide-scroll(); + border: var(--border-aside); + border-top: none; + } + + + #toc { + ul { + list-style: none; + } + + li { + font-size: var(--fs-small); + + color: var(--color-txt-light); + + a { + display: block; + padding: 5px 1ch; + padding-top: 7px; + } + + + } + + li.selected { + background-color: var(--grey-800); + color: var(--color-txt); + } + + li:hover { + background-color: var(--grey-800); + } + + .toc-level-1 { + margin-bottom: calc(var(--spacing)*0.5); + font-weight: bold; + } + + .toc-level-2 { + margin-bottom: calc(var(--spacing)*0.25); + padding-left: 4ch; + } + + a { + text-decoration: none; + } + + } + + .btn--group { + margin-top: calc(var(--spacing)*0.5); + display: flex; + gap: var(--padding-inner); + + button { + flex-grow: 1; + } + } + + + + +} + + + + + + + + + diff --git a/assets/fonts/stylesheet.css b/assets/fonts/stylesheet.css index 95bf8b1..19d6fa5 100644 --- a/assets/fonts/stylesheet.css +++ b/assets/fonts/stylesheet.css @@ -2,22 +2,22 @@ @font-face { font-family: "Executive"; src: url("Executive-55Regular.woff") format("woff"); - font-weight: 300; + font-weight: normal; font-style: normal; } @font-face { font-family: "Executive"; src: url("Executive-56Italic.woff") format("woff"); - font-weight: 300; + font-weight: normal; font-style: italic; } @font-face { font-family: "Executive"; src: url("Executive-65Medium.woff") format("woff"); - font-weight: normal; - font-style: normal; + font-weight: 500; + font-style: 500; } @font-face { diff --git a/assets/icons/article.svg b/assets/icons/article.svg new file mode 100644 index 0000000..3c4d502 --- /dev/null +++ b/assets/icons/article.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/close.svg b/assets/icons/close.svg index d02ecbb..8a44ae2 100644 --- a/assets/icons/close.svg +++ b/assets/icons/close.svg @@ -1,4 +1,4 @@ - + diff --git a/assets/icons/folder.svg b/assets/icons/folder.svg new file mode 100644 index 0000000..562ed7b --- /dev/null +++ b/assets/icons/folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/pin.svg b/assets/icons/pin.svg new file mode 100644 index 0000000..ae58e20 --- /dev/null +++ b/assets/icons/pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/share.svg b/assets/icons/share.svg new file mode 100644 index 0000000..f61e992 --- /dev/null +++ b/assets/icons/share.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/toc.svg b/assets/icons/toc.svg new file mode 100644 index 0000000..ab417a6 --- /dev/null +++ b/assets/icons/toc.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/images/adam-raihane/fig-1-a.png b/assets/images/adam-raihane/fig-1-a.png index d7da6bc..d09aac1 100644 Binary files a/assets/images/adam-raihane/fig-1-a.png and b/assets/images/adam-raihane/fig-1-a.png differ diff --git a/assets/images/adam-raihane/fig-1-b.png b/assets/images/adam-raihane/fig-1-b.png index 5c80dcc..44b2a10 100644 Binary files a/assets/images/adam-raihane/fig-1-b.png and b/assets/images/adam-raihane/fig-1-b.png differ diff --git a/assets/images/adam-raihane/fig-1.png b/assets/images/adam-raihane/fig-1.png new file mode 100644 index 0000000..8c1313f Binary files /dev/null and b/assets/images/adam-raihane/fig-1.png differ diff --git a/assets/images/adam-raihane/fig-2.png b/assets/images/adam-raihane/fig-2.png index 5ca4aed..2e60668 100644 Binary files a/assets/images/adam-raihane/fig-2.png and b/assets/images/adam-raihane/fig-2.png differ diff --git a/assets/images/adam-raihane/fig-4.png b/assets/images/adam-raihane/fig-4.png new file mode 100644 index 0000000..4777605 Binary files /dev/null and b/assets/images/adam-raihane/fig-4.png differ diff --git a/assets/images/adam-raihane/fig-5.png b/assets/images/adam-raihane/fig-5.png new file mode 100644 index 0000000..618c108 Binary files /dev/null and b/assets/images/adam-raihane/fig-5.png differ diff --git a/assets/images/adam-raihane/fig-6.png b/assets/images/adam-raihane/fig-6.png new file mode 100644 index 0000000..3a6e0cc Binary files /dev/null and b/assets/images/adam-raihane/fig-6.png differ diff --git a/assets/images/adam-raihane/fig-7.png b/assets/images/adam-raihane/fig-7.png new file mode 100644 index 0000000..61e03f4 Binary files /dev/null and b/assets/images/adam-raihane/fig-7.png differ diff --git a/assets/js/banner-sticky-desktop.js b/assets/js/banner-sticky-desktop.js index 6f9e171..3495b43 100644 --- a/assets/js/banner-sticky-desktop.js +++ b/assets/js/banner-sticky-desktop.js @@ -4,19 +4,14 @@ export function bannerStickyDesktop(responsiveSmall) { if (isInitialized) return; let body = document.body; - if (!body || body.dataset.template !== 'investigation-summary') return; + let panel = body.querySelector(".panel-left"); + + if (!panel) return; - let bannerPage = body.querySelector("#banner--page"); - let sectionDl = document.querySelector("#section__dl"); let footer = document.querySelector("#site-footer"); - if (!bannerPage || !sectionDl || !footer) return; - // Stocker la hauteur initiale du banner - const bannerInitialHeight = bannerPage.offsetHeight; - - // Stocker la position initiale du footer (calculée une seule fois au chargement) - let footerInitialTop = footer.offsetTop; + const bannerInitialHeight = panel.offsetHeight; function checkScroll() { const screenWidth = window.innerWidth; @@ -24,33 +19,35 @@ export function bannerStickyDesktop(responsiveSmall) { // Vérifier que l'écran est plus grand que responsiveSmall if (screenWidth <= responsiveSmall) { // Réinitialiser le transform si on est en dessous de responsiveSmall - bannerPage.style.transform = ''; + panel.style.transform = ''; return; } // Calculer la position du bas de la fenêtre const windowBottom = window.scrollY + window.innerHeight; - // Calculer de combien on dépasse le haut du footer (position initiale) - const overlap = windowBottom - footerInitialTop; + // Calculer dynamiquement la position du footer à chaque scroll + // Utiliser getBoundingClientRect() + scrollY pour une valeur toujours à jour + const footerTop = footer.getBoundingClientRect().top + window.scrollY; + + // Calculer de combien on dépasse le haut du footer + const overlap = windowBottom - footerTop; if (overlap > 0) { // Le bas de la fenêtre a atteint le haut du footer // Déplacer le banner vers le haut du nombre de pixels de dépassement const translateValue = Math.min(overlap, bannerInitialHeight); - bannerPage.style.transform = `translateY(-${translateValue}px)`; + panel.style.transform = `translateY(-${translateValue}px)`; } else { // Réinitialiser la position si on n'a pas encore atteint le footer - bannerPage.style.transform = 'translateY(0)'; + panel.style.transform = 'translateY(0)'; } } window.addEventListener('scroll', checkScroll); window.addEventListener('resize', () => { - // Recalculer la position du footer lors du resize if (window.innerWidth > responsiveSmall) { - bannerPage.style.transform = ''; - footerInitialTop = footer.offsetTop; + panel.style.transform = ''; } checkScroll(); }); diff --git a/assets/js/banner-sticky-mobile.js b/assets/js/banner-sticky-mobile.js deleted file mode 100644 index a0f512a..0000000 --- a/assets/js/banner-sticky-mobile.js +++ /dev/null @@ -1,50 +0,0 @@ -let isInitialized = false; - -export function bannerStickyMobile(responsiveSmall) { - if (isInitialized) return; - - let body = document.body; - if (!body || body.dataset.template !== 'investigation-summary') return; - - let bannerPage = body.querySelector("#banner--page"); - let sectionDl = document.querySelector("#section__dl"); - let footer = document.querySelector("#site-footer"); - - if (!bannerPage || !sectionDl || !footer) return; - - function checkScroll() { - const screenWidth = window.innerWidth; - - // Vérifier que l'écran est plus petit que responsiveSmall - if (screenWidth >= responsiveSmall) { - bannerPage.classList.remove('is-visible'); - bannerPage.style.transform = 'translateY(0)'; - return; - } - - const sectionTop = sectionDl.getBoundingClientRect().top; - const footerTop = footer.getBoundingClientRect().top; - const windowHeight = window.innerHeight; - - // Activer le banner quand #section__dl arrive en bas de l'écran - if (sectionTop <= windowHeight) { - bannerPage.classList.add('is-visible'); - - // Pousser le banner vers le haut si le footer arrive en bas de l'écran - if (footerTop < windowHeight) { - const pushUp = windowHeight - footerTop; - bannerPage.style.transform = `translateY(-${pushUp}px)`; - } else { - bannerPage.style.transform = 'translateY(0)'; - } - } else { - bannerPage.classList.remove('is-visible'); - bannerPage.style.transform = 'translateY(0)'; - } - } - - window.addEventListener('scroll', checkScroll); - checkScroll(); - - isInitialized = true; -} \ No newline at end of file diff --git a/assets/js/btn-group-mobile.js b/assets/js/btn-group-mobile.js new file mode 100644 index 0000000..518b6aa --- /dev/null +++ b/assets/js/btn-group-mobile.js @@ -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; + + +} + + diff --git a/assets/js/dropdown.js b/assets/js/dropdown.js new file mode 100644 index 0000000..d254a9d --- /dev/null +++ b/assets/js/dropdown.js @@ -0,0 +1,87 @@ +export function initDropdowns(responsiveSmall) { + const dropdowns = document.querySelectorAll('.dropdown'); + + function updateBodyOverflow(isOpen, dropdownElement = null) { + const isInMobileGroup = dropdownElement?.closest('.btn--group__mobile'); + if (isOpen && window.innerWidth < responsiveSmall && isInMobileGroup) { + document.body.classList.add('is-hidden'); + } else { + document.body.classList.remove('is-hidden'); + } + } + + dropdowns.forEach(dropdown => { + const trigger = dropdown.querySelector('.dropdown__trigger'); + const content = dropdown.querySelector('.dropdown__content'); + + if (!trigger) return; + + + + // Empêche la fermeture au clic dans le contenu des dropdowns contenant .modal--share + if (dropdown.querySelector('.modal--share') && content) { + content.addEventListener('click', (e) => { + e.stopPropagation(); + }); + } + + trigger.addEventListener('click', (e) => { + e.stopPropagation(); + + // Ferme les autres dropdowns ouverts + dropdowns.forEach(other => { + if (other !== dropdown) { + other.classList.remove('is-open', 'dropdown--align-right'); + other.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); + } + }); + + const isOpening = !dropdown.classList.contains('is-open'); + + if (isOpening) { + // Vérifie s'il y a la place à droite + const content = dropdown.querySelector('.dropdown__content'); + const triggerRect = trigger.getBoundingClientRect(); + const contentWidth = content.offsetWidth || 300; + const spaceRight = window.innerWidth - triggerRect.left; + + if (spaceRight < contentWidth) { + dropdown.classList.add('dropdown--align-right'); + } else { + dropdown.classList.remove('dropdown--align-right'); + } + } + + // Toggle le dropdown actuel + dropdown.classList.toggle('is-open'); + trigger.classList.toggle('is-selected'); + + // Gère l'overflow du body sur mobile + updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown); + }); + }); + + // Ferme tous les dropdowns au clic extérieur + document.addEventListener('click', (e) => { + dropdowns.forEach(dropdown => { + // Ne ferme pas si le clic est dans un dropdown contenant .modal--share + if (dropdown.querySelector('.modal--share') && dropdown.contains(e.target)) { + return; + } + dropdown.classList.remove('is-open', 'dropdown--align-right'); + dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); + }); + updateBodyOverflow(false); + }); + + // Ferme au press Escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + dropdowns.forEach(dropdown => { + dropdown.classList.remove('is-open', 'dropdown--align-right'); + dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); + }); + updateBodyOverflow(false); + } + }); +} diff --git a/assets/js/header.js b/assets/js/header.js index c01a1d9..0549ae3 100644 --- a/assets/js/header.js +++ b/assets/js/header.js @@ -1,43 +1,29 @@ export function headerToggle() { const header = document.getElementById("site-header"); const buttonToggle = document.querySelector("#menu-toggle"); - console.log(header); - console.log(buttonToggle); if (!header || !buttonToggle) return; buttonToggle.addEventListener("click", () => { - document.body.classList.toggle("menu-open"); + const isOpen = document.body.classList.toggle("menu-open"); }); } + +// DELETE ? export function headerScrollVisibility() { const header = document.getElementById("site-header"); - const hero = document.getElementById("hero"); if (!header) return; function checkScroll() { - if (hero) { - // Comportement avec hero - const headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 0; - const heroBottom = hero.getBoundingClientRect().bottom; - - if (heroBottom <= headerHeight) { - header.classList.add("is-visible"); - } else { - header.classList.remove("is-visible"); - } + if (window.scrollY >= 300) { + header.classList.add("is-visible"); } else { - // Comportement sans hero \ - if (window.scrollY >= 300) { - header.classList.add("is-visible"); - } else { - header.classList.remove("is-visible"); - } + header.classList.remove("is-visible"); } } window.addEventListener("scroll", checkScroll); - checkScroll(); // Vérifier au chargement + checkScroll(); } diff --git a/assets/js/hero-video.js b/assets/js/hero-video.js index 2e0fb93..707c316 100644 --- a/assets/js/hero-video.js +++ b/assets/js/hero-video.js @@ -9,11 +9,17 @@ export function playVideo() { playButton.addEventListener('click', function() { const extract = document.querySelector('.extract'); const videoFull = document.querySelector('.video-full'); + const titleSmall = document.querySelector('.page-title-small'); + if (extract) { extract.style.display = 'none'; } + if(titleSmall){ + titleSmall.style.display = 'none'; + } + if (videoFull) { videoFull.style.display = 'block'; diff --git a/assets/js/panel.js b/assets/js/panel.js new file mode 100644 index 0000000..7575010 --- /dev/null +++ b/assets/js/panel.js @@ -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 = ''; + } + }); + }); +} \ No newline at end of file diff --git a/assets/js/report.js b/assets/js/report.js new file mode 100644 index 0000000..9fe3f9f --- /dev/null +++ b/assets/js/report.js @@ -0,0 +1,220 @@ + +import { initSwipers } from './swipers.js'; + +export function report(responsiveSmall) { + if (document.body.dataset.template === 'report') { + + // Initialiser tous les sliders de type before-after + initSliderBeforeAfter(); + + // Ne fonctionne que pour les écrans plus grands que responsiveSmall + if (window.matchMedia(responsiveSmall).matches) { + // Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif + initSwipers(); + return; + } + + // Sur desktop : initMediaDisplay va gérer les media dynamiquement + // Les swipers seront initialisés au moment de l'insertion dans #report__medias + initMediaDisplay(); + } +} + + +function initSliderBeforeAfter(container = document){ + const slidersBeforeAfter = container.querySelectorAll('.slider-before-after'); + slidersBeforeAfter.forEach(function (sliderContainer, index) { + const sliderInput = sliderContainer.querySelector('.slider'); + if (sliderInput) { + sliderInput.addEventListener('input', (e) => { + console.log('slider value:', e.target.value); + sliderContainer.style.setProperty('--position', `${e.target.value}%`); + }); + } + }); +} + +function initMediaDisplay() { + const reportMedias = document.querySelector('#report__medias'); + if (!reportMedias) return; + + // Calculer la hauteur depuis les variables CSS: calc(var(--header-h) + var(--padding-body)) + const rootStyles = getComputedStyle(document.documentElement); + const headerH = rootStyles.getPropertyValue('--header-h').trim(); + const paddingBody = rootStyles.getPropertyValue('--padding-body').trim(); + const spacingH = rootStyles.getPropertyValue('--spacing').trim(); + + + // Convertir en pixels si nécessaire + const headerHPx = parseFloat(headerH); + const paddingBodyPx = parseFloat(paddingBody); + const spacingHPx = parseFloat(paddingBody); + const totalOffset = headerHPx + paddingBodyPx + spacingHPx*5; + + const sections = document.querySelectorAll('.section-content'); + const mediaElements = []; + let mediaCounter = 0; + + // 1. Pour chaque section, traiter les .media + sections.forEach((section) => { + const medias = section.querySelectorAll('.media'); + + medias.forEach((media) => { + // Générer un ID unique si nécessaire + if (!media.id) { + media.id = `media-${mediaCounter++}`; + } + + // Créer une ancre + const anchor = document.createElement('div'); + anchor.className = 'media-anchor'; + anchor.dataset.mediaId = media.id; + anchor.innerHTML = '▶' + + // Vérifier si le media est précédé d'un titre + let previousElement = media.previousElementSibling; + let insertBeforeElement = media; + + // Si l'élément précédent est un titre (h1-h6), insérer l'ancre avant le titre + if (previousElement && /^H[1-6]$/.test(previousElement.tagName)) { + insertBeforeElement = previousElement; + } + + // Insérer l'ancre + insertBeforeElement.parentNode.insertBefore(anchor, insertBeforeElement); + + // Stocker la référence pour l'observer + mediaElements.push({ + anchor: anchor, + media: media.cloneNode(true), // Cloner le media + originalMedia: media, + section: section + }); + + // Masquer le media original + media.style.display = 'none'; + }); + }); + + // 2. Fonction pour trouver et afficher le media le plus proche de la ligne de déclenchement + let currentMediaId = null; + let isUpdating = false; // Flag pour éviter les mises à jour simultanées + + function updateActiveMedia() { + // Éviter les mises à jour simultanées + if (isUpdating) return; + + // Trouver l'ancre qui est la plus proche de la ligne de déclenchement (totalOffset du haut) + let closestAnchor = null; + let closestDistance = Infinity; + + mediaElements.forEach(({ anchor }) => { + const rect = anchor.getBoundingClientRect(); + + // Si l'ancre est au-dessus ou à la ligne de déclenchement + if (rect.top <= totalOffset) { + const distance = totalOffset - rect.top; + + // Prendre celle qui vient juste de passer (la plus proche en dessous de la ligne) + if (distance < closestDistance) { + closestDistance = distance; + closestAnchor = anchor; + } + } + }); + + // Si on a trouvé une ancre + if (closestAnchor) { + const mediaId = closestAnchor.dataset.mediaId; + + // Si c'est déjà le media affiché, ne rien faire + if (currentMediaId === mediaId) return; + + // Trouver le media correspondant + const mediaData = mediaElements.find(m => m.anchor === closestAnchor); + + if (mediaData) { + isUpdating = true; + + // Utiliser requestAnimationFrame pour éviter les conflits de reflow + requestAnimationFrame(() => { + // Vider le conteneur + reportMedias.innerHTML = ''; + + // Ajouter le nouveau media + const newMediaElement = mediaData.media.cloneNode(true); + reportMedias.appendChild(newMediaElement); + currentMediaId = mediaId; + + // Attendre le prochain frame pour initialiser les sliders/swipers + requestAnimationFrame(() => { + initSliderBeforeAfter(reportMedias); + initSwipers(reportMedias); + + // Débloquer les mises à jour après un court délai + setTimeout(() => { + isUpdating = false; + }, 100); + }); + }); + } + } else { + // Aucune ancre n'a encore franchi la ligne, vider le conteneur + if (currentMediaId !== null) { + reportMedias.innerHTML = ''; + currentMediaId = null; + } + } + } + + // 3. Écouter le scroll + let scrollTimeout; + window.addEventListener('scroll', () => { + // Throttle pour optimiser les performances + if (scrollTimeout) return; + + scrollTimeout = setTimeout(() => { + updateActiveMedia(); + scrollTimeout = null; + }, 10); + }); + + // Appeler une première fois au chargement + updateActiveMedia(); + + // 4. Gérer les sections sans media immédiat + // Observer aussi les sections elles-mêmes + const sectionObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const section = entry.target; + + // Vérifier si cette section a un media juste après son premier titre + const firstTitle = section.querySelector('h1, h2, h3, h4, h5, h6'); + if (firstTitle) { + let nextElement = firstTitle.nextElementSibling; + + // Chercher le prochain élément qui n'est pas une ancre + while (nextElement && nextElement.classList.contains('media-anchor')) { + nextElement = nextElement.nextElementSibling; + } + + // Si le prochain élément n'est pas un .media, vider #report__medias + if (!nextElement || !nextElement.classList.contains('media')) { + reportMedias.innerHTML = ''; + currentMediaId = null; + } + } + } + }); + }, { + root: null, + rootMargin: `-${totalOffset}px 0px 0px 0px`, + threshold: 0 + }); + + // Observer toutes les sections + sections.forEach(section => { + sectionObserver.observe(section); + }); +} \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 23f4478..74adb2c 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,10 +1,15 @@ import { headerToggle, headerScrollVisibility } from './header.js'; import { copyLink } from './share.js'; -import { bannerStickyMobile } from './banner-sticky-mobile.js'; +import { panelToggle, tocMobile } from './panel.js'; +import { btnGroupMobile } from './btn-group-mobile.js'; import { bannerStickyDesktop } from './banner-sticky-desktop.js'; import { themeToggle } from './themeToggle.js'; import { initHeroSlider } from './hero-slider.js'; import { playVideo } from './hero-video.js'; +import { initDropdowns } from './dropdown.js'; +import { initSwipers } from './swipers.js'; +import { report } from './report.js'; + const responsiveMedium = 1080; const responsiveSmall = 768; @@ -12,11 +17,18 @@ const responsiveSmall = 768; window.onload = async function () { console.log("SCRIPT LOADED"); headerToggle(); - headerScrollVisibility(); - copyLink(); + panelToggle(responsiveSmall); themeToggle(); - bannerStickyMobile(responsiveSmall); + + + report(responsiveSmall); + + tocMobile(responsiveSmall); + copyLink(); + btnGroupMobile(responsiveSmall) bannerStickyDesktop(responsiveSmall); initHeroSlider(); playVideo(); + initDropdowns(responsiveSmall); + initSwipers(); } \ No newline at end of file diff --git a/assets/js/share.js b/assets/js/share.js index 5c42a65..c26fb8f 100644 --- a/assets/js/share.js +++ b/assets/js/share.js @@ -1,14 +1,16 @@ export function copyLink() { let buttons = document.querySelectorAll('.copy-link button'); buttons.forEach(function (button, index) { - let link = button.parentNode.querySelector("input").value; + let input = button.parentNode.querySelector("input"); + let link = input.value; button.addEventListener('click', function() { navigator.clipboard.writeText(link).then(() => { - const originalText = button.textContent; - button.textContent = 'Lien copié'; + input.value = 'Lien copié !'; + input.classList.add('is-copied'); setTimeout(() => { - button.textContent = originalText; + input.value = link; + input.classList.remove('is-copied'); }, 1000); }).catch(err => { console.error('Erreur lors de la copie:', err); diff --git a/assets/js/swipers.js b/assets/js/swipers.js new file mode 100644 index 0000000..c69ed3d --- /dev/null +++ b/assets/js/swipers.js @@ -0,0 +1,54 @@ +import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs'; + +export function initSwipers(container = document) { + const sliders = container.querySelectorAll('.swiper'); + + if (sliders.length === 0) { + return; + } + + sliders.forEach((sliderElement) => { + // Éviter de réinitialiser un swiper déjà initialisé + if (sliderElement.swiper) { + return; + } + + const swiper = new Swiper(sliderElement, { + // Optional parameters + slidesPerView: 1, + spaceBetween: 20, + speed: 600, + + // Touch/Swipe settings + touchRatio: 1, + touchAngle: 45, + grabCursor: true, + simulateTouch: true, + allowTouchMove: true, + + // Navigation arrows + navigation: { + nextEl: sliderElement.querySelector('.swiper-button-next'), + prevEl: sliderElement.querySelector('.swiper-button-prev'), + }, + + // Pagination + pagination: { + el: sliderElement.querySelector('.swiper-pagination'), + clickable: true, + }, + + // Keyboard control + keyboard: { + enabled: true, + }, + + // Accessibility + a11y: { + prevSlideMessage: 'Investigation précédente', + nextSlideMessage: 'Investigation suivante', + paginationBulletMessage: 'Aller à l\'investigation {{index}}', + }, + }); + }); +} diff --git a/site/blueprints/pages/folder.yml b/site/blueprints/pages/folder.yml new file mode 100644 index 0000000..f47cd72 --- /dev/null +++ b/site/blueprints/pages/folder.yml @@ -0,0 +1,21 @@ +title: Dossier + +tabs: + contentTab: + label: Contenu + icon: page + fields: + description: + label: Description + type: textarea + size: medium + buttons: false + cover: + label: Visuel de couverture + type: files + multiple: false + layout: cards + image: + ratio: 12/7 + cover: true + help: Image utilisée dans la liste des dossiers diff --git a/site/blueprints/pages/folders.yml b/site/blueprints/pages/folders.yml new file mode 100644 index 0000000..6b17e90 --- /dev/null +++ b/site/blueprints/pages/folders.yml @@ -0,0 +1,17 @@ +title: Dossiers + +tabs: + contentTab: + label: Contenu + sections: + folders: + type: pages + text: "{{ page.title }}" + info: "{{ page.description }}" + layout: cards + size: huge + search: true + image: + cover: true + ratio: 12/7 + template: folder diff --git a/site/blueprints/pages/investigation-summary.yml b/site/blueprints/pages/investigation-summary.yml index e69de29..803de70 100644 --- a/site/blueprints/pages/investigation-summary.yml +++ b/site/blueprints/pages/investigation-summary.yml @@ -0,0 +1,127 @@ +title: Investigation Summary + +tabs: + contentTab: + label: Contenu + icon: page + columns: + - width: 2/6 + sections: + createdSection: + type: fields + fields: + created: + label: Première publication + type: date + display: DD / MM / YYYY + default: today + width: 1/2 + reportSection: + label: Rapport + type: pages + template: report + - width: 4/6 + fields: + chapo: + label: Chapo + type: writer + nodes: false + buttons: false + cover: + label: Visuel de couverture + type: files + multiple: false + layout: cards + image: + ratio: 12/7 + cover: true + help: Image utilisée dans les listes d'enquêtes + heroType: + label: Type de hero + type: select + options: + image: Image simple + slider: Slider d'images + video: Vidéo + default: image + width: 1/3 + heroImages: + label: Images hero + type: files + multiple: true + layout: cards + when: + heroType: image + heroType: slider + videoExtractUrl: + label: URL vidéo d'extrait (autoplay) + type: url + when: + heroType: video + width: 1/2 + videoFullUrl: + label: URL vidéo complète (YouTube embed) + type: url + when: + heroType: video + width: 1/2 + synthesis: + label: Synthèse + type: textarea + size: large + buttons: false + metadataTab: + label: Métadonnées + icon: table + fields: + folder: + label: Dossier + type: select + options: query + query: + fetch: site.find('dossiers').children + text: "{{ page.title }}" + value: "{{ page.slug }}" + empty: Aucun dossier + width: 1/3 + incidentDate: + label: Date de l'incident + type: date + display: DD / MM / YYYY + width: 1/3 + incidentLocation: + label: Lieu de l'incident + type: text + width: 1/3 + incidentConsequences: + label: Conséquence(s) + type: text + width: 1/3 + keywords: + label: Mots-clés + type: tags + width: 1/2 + methodology: + label: Méthodologie + type: tags + width: 1/2 + partners: + label: Partenaires + type: structure + width: 1/2 + fields: + name: + label: Nom + type: text + link: + label: Lien + type: url + team: + label: Équipe Index + type: tags + width: 1/2 + relatedInvestigations: + label: Enquêtes en lien + type: pages + multiple: true + query: site.find('enquetes').children diff --git a/site/blueprints/pages/investigations.yml b/site/blueprints/pages/investigations.yml index 85a23c1..82c3cbd 100644 --- a/site/blueprints/pages/investigations.yml +++ b/site/blueprints/pages/investigations.yml @@ -14,3 +14,4 @@ tabs: image: cover: true ratio: 12/7 + template: investigation-summary diff --git a/site/blueprints/pages/investigation.yml b/site/blueprints/pages/report.yml similarity index 79% rename from site/blueprints/pages/investigation.yml rename to site/blueprints/pages/report.yml index ffa08e1..b9c260f 100644 --- a/site/blueprints/pages/investigation.yml +++ b/site/blueprints/pages/report.yml @@ -81,24 +81,3 @@ tabs: type: link options: - url - line: - type: line - indexTeam: - label: Équipe Index - type: structure - columns: - responsability: - width: 1/2 - names: - width: 1/2 - fields: - responsability: - label: Responsabilité - type: text - width: 1/2 - names: - label: Nom - type: entries - width: 1/2 - field: - type: text diff --git a/site/config/config.php b/site/config/config.php index 8e65d31..dfed172 100644 --- a/site/config/config.php +++ b/site/config/config.php @@ -2,6 +2,8 @@ return [ 'debug' => true, + 'locale' => 'fr_FR.UTF-8', + 'date.handler' => 'intl', 'thumbs' => [ 'quality' => 80, 'presets' => [ diff --git a/site/snippets/back-to-top.php b/site/snippets/back-to-top.php new file mode 100644 index 0000000..8868e95 --- /dev/null +++ b/site/snippets/back-to-top.php @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/site/snippets/footer.php b/site/snippets/footer.php index 16332a7..2496ea7 100644 --- a/site/snippets/footer.php +++ b/site/snippets/footer.php @@ -1,4 +1,4 @@ - +