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

bottomBar responsive
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-23 15:55:20 +01:00
parent 99ccc15ba9
commit f24b296ff7
15 changed files with 445 additions and 303 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/css/base/_var.scss
View file

@ -18,6 +18,7 @@
--max-w-content: 700px; --max-w-content: 700px;
--max-w-cards: 940px; --max-w-cards: 940px;
--max-w-site: 1600px;
--z-header: 2000; --z-header: 2000;
--panel-w: 310px; --panel-w: 310px;

21
assets/css/components/_bottom-bar.scss
View file

@ -16,10 +16,6 @@
transition: bottom var(--transition-scroll); transition: bottom var(--transition-scroll);
// border-top: 2px solid var(--grey-800);
.progress-container{ .progress-container{
position: absolute; position: absolute;
top: 0; top: 0;
@ -90,4 +86,21 @@
} }
@media #{$small} {
display: flex;
align-items: center;
justify-content: center;
.bottom-bar__inner{
height: calc(var(--header-h)*0.5);
justify-content: center;
align-items: center;
}
.title-group, .btn--download, .btn--back-to-top{ display: none; }
}
} }

87
assets/css/components/_list-socials.scss
View file

@ -3,65 +3,82 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 400px; max-width: 350px;
a{ a{
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
} }
li{
--size-icon: 20px;
}
li[data-socials="youtube"]{
--size-icon: 26px;
}
.icon{ .icon{
width: 20px; width: var(--size-icon);
height: 20px; height: var(--size-icon);
position: relative; position: relative;
top: -2px; top: -2px;
} }
svg{ svg{
display: flex; display: flex;
align-items: center; align-items: center;
width: 20px; width: var(--size-icon);
height: 20px; height: var(--size-icon);
fill: var(--color-txt);
} }
.text{ display: none; }
a:hover{
svg{
fill: var(--color-txt-light);
}
}
} }
// with text // with text
@media #{$small-up}{ // @media #{$small-up}{
.footer__socials .list-socials{ // .footer__socials .list-socials{
display: block; // display: block;
li{ // li{
margin-bottom: calc(var(--spacing)*0.25); // margin-bottom: calc(var(--spacing)*0.25);
break-inside: avoid; // break-inside: avoid;
font-size: var(--fs-small); // font-size: var(--fs-small);
} // }
a{ // a{
gap: 1ch; // gap: 1ch;
height: calc(var(--spacing)*1); // height: calc(var(--spacing)*1);
&::after{ // &::after{
content: '↗'; // content: '↗';
color: var(--grey-300); // color: var(--grey-300);
} // }
&:hover{ // &:hover{
color: var(--color-accent); // color: var(--color-accent);
&::after{ // &::after{
color: var(--color-accent); // color: var(--color-accent);
opacity: 0.5; // opacity: 0.5;
} // }
} // }
} // }
.text{ // .text{
display: block; // display: block;
line-height: 1; // line-height: 1;
} // }
} // }
} // }

63
assets/css/components/_support-bar.scss Normal file
View file

@ -0,0 +1,63 @@
#support-bar {
height: var(--header-h);
background-color: var(--color-accent);
color: var(--color-bg);
padding: 0 var(--padding-body);
.support-bar__container {
max-width: var(--max-w-cards);
margin: 0 auto;
height: 100%;
display: flex;
@media #{$small-up} {
align-items: center;
justify-content: space-between;
gap: 2ch;
}
@media #{$small} {
flex-direction: column;
font-size: var(--fs-small);
line-height: 1.1;
align-items: flex-start;
justify-content: center;
}
}
.baseline {
text-transform: uppercase;
font-weight: 500;
}
.btn {
text-transform: uppercase;
color: var(--color-bg);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 2px;
word-wrap: nowrap;
white-space: nowrap;
&:hover {
opacity: 0.7;
}
}
@media #{$small} {
height: auto;
padding: calc(var(--spacing)*0.75) var(--padding-body);
.btn{
margin-top: calc(var(--spacing)*0.75);
}
}
}

2
assets/css/partials/_main-layout.scss
View file

@ -12,7 +12,7 @@ body{
flex-grow: 1; flex-grow: 1;
padding: 0 var(--padding-body); padding: 0 var(--padding-body);
padding-top: var(--header-h); padding-top: var(--header-h);
padding-bottom: calc(var(--spacing)*2); padding-bottom: calc(var(--spacing)*6);
min-height: 100dvh; min-height: 100dvh;
min-height: 100vh; min-height: 100vh;

200
assets/css/partials/_site-footer.scss
View file

@ -1,116 +1,144 @@
#site-footer{ #site-footer {
background-color: var(--dark); background-color: var(--dark);
padding: calc(var(--padding-body)*2) var(--padding-body); padding: calc(var(--spacing)*2) var(--padding-body);
z-index: 500; z-index: 500;
.site-footer__container{ .site-footer__container {
max-width: var(--max-w-cards); max-width: var(--max-w-cards);
margin: 0 auto; margin: 0 auto;
padding: 0 var(--padding-body);
font-size: var(--fs-small);
} }
.logo {
margin-top: calc(var(--spacing)*0.25);
margin-bottom: calc(var(--spacing)*1); .logo {
svg{ // margin-top: calc(var(--spacing)*0.25);
margin-bottom: calc(var(--spacing)*0.5);
svg {
width: 100px; width: 100px;
} }
}
p{
margin: calc(var(--spacing)*0.5) 0;
font-size: var(--fs-small);
a{
text-decoration: none;
&:hover{
text-decoration: underline;
color: currentColor;
}
} }
}
.p__small{ .baseline{
font-size: var(--fs-xsmall); max-width: 40ch;
color: var(--grey-600); }
}
.footer__mentions{ .list-links {
p{
font-size: var(--fs-xsmall);
color: var(--color-txt) ul {
list-style: none;
li {
margin-bottom: calc(var(--spacing)*0.5);
}
a {
text-decoration: none;
}
li:hover a {
text-decoration: underline;
}
}
.hightlight {
text-transform: uppercase;
font-weight: 500;
} }
} }
.footer__socials > p{
font-weight: 500;
}
@media #{$small}{
.footer__socials{
margin-top: calc(var(--spacing)*0.75);
padding-top: calc(var(--spacing)*0.25);
border-top: var(--border-light);
.list-socials{ // @media #{$medium} {
margin-top: calc(var(--spacing)*0.5);
margin-bottom: calc(var(--spacing)*0.75);
// }
@media #{$small-up} {
.site-footer__container {
display: grid;
grid-template-columns: 1fr 350px;
column-gap: calc(var(--padding-inner)*2);
.logo{ grid-column: span 2;}
.baseline{
grid-column: 1;
grid-row: 2;
}
.list-links{
grid-column: 2;
grid-row: 2;
max-width: 350px;
margin-bottom: calc(var(--spacing)*1);
display: flex;
justify-content: space-between;
gap: var(--padding-inner);
li {
// margin-bottom: calc(var(--spacing)*1);
}
}
.socials{
grid-column: 2;
grid-row: 3;
}
.credits {
font-size: var(--fs-xsmall);
grid-column: 1;
grid-row: 3;
}
} }
} }
.footer__mentions{
@media #{$small} {
border-top: var(--border-light);
padding-top: calc(var(--spacing)*0.25); .list-links {
p{ margin-top: calc(var(--spacing)*1);
font-size: 12px; li {
text-align: center; margin-bottom: calc(var(--spacing)*0.5);
}
.hightlight {
margin-top: calc(var(--spacing)*1.5);
}
} }
.socials {
margin-top: calc(var(--spacing)*2);
} }
.p__small{ .credits {
font-size: 12px;
}
}
@media #{$small-up}{
.site-footer__container{
display: grid;
grid-template-columns: 3fr 2fr;
column-gap: calc(var(--spacing)*2);
}
.footer__newsletter{
grid-column: 1;
grid-row: 2;
}
.footer__socials{
grid-column: 2;
grid-row: 2;
}
.footer__socials .socials{
columns: 2;
margin-top: calc(var(--spacing)*1);
}
.footer__mentions{
grid-column: span 2;
p{
margin-top: calc(var(--spacing)*1); margin-top: calc(var(--spacing)*1);
} }
} }
} @media #{$x-small} {
.credits {
text-align: center;
}
}
} }

229
assets/css/style.css
View file

@ -11,6 +11,7 @@
--fs-button-bold: 22px; --fs-button-bold: 22px;
--max-w-content: 700px; --max-w-content: 700px;
--max-w-cards: 940px; --max-w-cards: 940px;
--max-w-site: 1600px;
--z-header: 2000; --z-header: 2000;
--panel-w: 310px; --panel-w: 310px;
} }
@ -932,59 +933,36 @@ button.sort[data-sort-type=up] .arrow {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 400px; max-width: 350px;
} }
.list-socials a { .list-socials a {
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
} }
.list-socials li {
--size-icon: 20px;
}
.list-socials li[data-socials=youtube] {
--size-icon: 26px;
}
.list-socials .icon { .list-socials .icon {
width: 20px; width: var(--size-icon);
height: 20px; height: var(--size-icon);
position: relative; position: relative;
top: -2px; top: -2px;
} }
.list-socials svg { .list-socials svg {
display: flex; display: flex;
align-items: center; align-items: center;
width: 20px; width: var(--size-icon);
height: 20px; height: var(--size-icon);
fill: var(--color-txt);
} }
.list-socials .text { .list-socials a:hover svg {
display: none; fill: var(--color-txt-light);
} }
@media screen and (min-width: 768px) {
.footer__socials .list-socials {
display: block;
}
.footer__socials .list-socials li {
margin-bottom: calc(var(--spacing) * 0.25);
-moz-column-break-inside: avoid;
break-inside: avoid;
font-size: var(--fs-small);
}
.footer__socials .list-socials a {
gap: 1ch;
height: calc(var(--spacing) * 1);
}
.footer__socials .list-socials a::after {
content: "↗";
color: var(--grey-300);
}
.footer__socials .list-socials a:hover {
color: var(--color-accent);
}
.footer__socials .list-socials a:hover::after {
color: var(--color-accent);
opacity: 0.5;
}
.footer__socials .list-socials .text {
display: block;
line-height: 1;
}
}
.modal--share { .modal--share {
width: 240px; width: 240px;
padding-bottom: var(--padding-inner); padding-bottom: var(--padding-inner);
@ -2155,6 +2133,75 @@ button.sort[data-sort-type=up] .arrow {
padding-left: 1ch; padding-left: 1ch;
padding-right: 1ch; padding-right: 1ch;
} }
@media screen and (max-width: 768px) {
#bottom-bar {
display: flex;
align-items: center;
justify-content: center;
}
#bottom-bar .bottom-bar__inner {
height: calc(var(--header-h) * 0.5);
justify-content: center;
align-items: center;
}
#bottom-bar .title-group, #bottom-bar .btn--download, #bottom-bar .btn--back-to-top {
display: none;
}
}
#support-bar {
height: var(--header-h);
background-color: var(--color-accent);
color: var(--color-bg);
padding: 0 var(--padding-body);
}
#support-bar .support-bar__container {
max-width: var(--max-w-cards);
margin: 0 auto;
height: 100%;
display: flex;
}
@media screen and (min-width: 768px) {
#support-bar .support-bar__container {
align-items: center;
justify-content: space-between;
gap: 2ch;
}
}
@media screen and (max-width: 768px) {
#support-bar .support-bar__container {
flex-direction: column;
font-size: var(--fs-small);
line-height: 1.1;
align-items: flex-start;
justify-content: center;
}
}
#support-bar .baseline {
text-transform: uppercase;
font-weight: 500;
}
#support-bar .btn {
text-transform: uppercase;
color: var(--color-bg);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 2px;
word-wrap: nowrap;
white-space: nowrap;
}
#support-bar .btn:hover {
opacity: 0.7;
}
@media screen and (max-width: 768px) {
#support-bar {
height: auto;
padding: calc(var(--spacing) * 0.75) var(--padding-body);
}
#support-bar .btn {
margin-top: calc(var(--spacing) * 0.75);
}
}
#site-header { #site-header {
z-index: var(--z-header); z-index: var(--z-header);
@ -2360,92 +2407,94 @@ body.menu-open #menu-toggle .close {
#site-footer { #site-footer {
background-color: var(--dark); background-color: var(--dark);
padding: calc(var(--padding-body) * 2) var(--padding-body); padding: calc(var(--spacing) * 2) var(--padding-body);
z-index: 500; z-index: 500;
} }
#site-footer .site-footer__container { #site-footer .site-footer__container {
max-width: var(--max-w-cards); max-width: var(--max-w-cards);
margin: 0 auto; margin: 0 auto;
padding: 0 var(--padding-body); font-size: var(--fs-small);
} }
#site-footer .logo { #site-footer .logo {
margin-top: calc(var(--spacing) * 0.25); margin-bottom: calc(var(--spacing) * 0.5);
margin-bottom: calc(var(--spacing) * 1);
} }
#site-footer .logo svg { #site-footer .logo svg {
width: 100px; width: 100px;
} }
#site-footer p { #site-footer .baseline {
margin: calc(var(--spacing) * 0.5) 0; max-width: 40ch;
font-size: var(--fs-small);
} }
#site-footer p a { #site-footer .list-links ul {
list-style: none;
}
#site-footer .list-links ul li {
margin-bottom: calc(var(--spacing) * 0.5);
}
#site-footer .list-links ul a {
text-decoration: none; text-decoration: none;
} }
#site-footer p a:hover { #site-footer .list-links ul li:hover a {
text-decoration: underline; text-decoration: underline;
color: currentColor;
} }
#site-footer .p__small { #site-footer .list-links .hightlight {
font-size: var(--fs-xsmall); text-transform: uppercase;
color: var(--grey-600);
}
#site-footer .footer__mentions p {
font-size: var(--fs-xsmall);
color: var(--color-txt);
}
#site-footer .footer__socials > p {
font-weight: 500; font-weight: 500;
} }
@media screen and (max-width: 768px) {
#site-footer .footer__socials {
margin-top: calc(var(--spacing) * 0.75);
padding-top: calc(var(--spacing) * 0.25);
border-top: var(--border-light);
}
#site-footer .footer__socials .list-socials {
margin-top: calc(var(--spacing) * 0.5);
margin-bottom: calc(var(--spacing) * 0.75);
}
#site-footer .footer__mentions {
border-top: var(--border-light);
padding-top: calc(var(--spacing) * 0.25);
}
#site-footer .footer__mentions p {
font-size: 12px;
text-align: center;
}
#site-footer .p__small {
font-size: 12px;
}
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
#site-footer .site-footer__container { #site-footer .site-footer__container {
display: grid; display: grid;
grid-template-columns: 3fr 2fr; grid-template-columns: 1fr 350px;
-moz-column-gap: calc(var(--spacing) * 2); -moz-column-gap: calc(var(--padding-inner) * 2);
column-gap: calc(var(--spacing) * 2); column-gap: calc(var(--padding-inner) * 2);
} }
#site-footer .footer__newsletter { #site-footer .site-footer__container .logo {
grid-column: span 2;
}
#site-footer .site-footer__container .baseline {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
} }
#site-footer .footer__socials { #site-footer .site-footer__container .list-links {
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
max-width: 350px;
margin-bottom: calc(var(--spacing) * 1);
display: flex;
justify-content: space-between;
gap: var(--padding-inner);
} }
#site-footer .footer__socials .socials { #site-footer .site-footer__container .socials {
-moz-columns: 2; grid-column: 2;
columns: 2; grid-row: 3;
}
#site-footer .site-footer__container .credits {
font-size: var(--fs-xsmall);
grid-column: 1;
grid-row: 3;
}
}
@media screen and (max-width: 768px) {
#site-footer .list-links {
margin-top: calc(var(--spacing) * 1); margin-top: calc(var(--spacing) * 1);
} }
#site-footer .footer__mentions { #site-footer .list-links li {
grid-column: span 2; margin-bottom: calc(var(--spacing) * 0.5);
} }
#site-footer .footer__mentions p { #site-footer .list-links .hightlight {
margin-top: calc(var(--spacing) * 1.5);
}
#site-footer .socials {
margin-top: calc(var(--spacing) * 2);
}
#site-footer .credits {
margin-top: calc(var(--spacing) * 1); margin-top: calc(var(--spacing) * 1);
} }
} }
@media screen and (max-width: 560px) {
#site-footer .credits {
text-align: center;
}
}
body { body {
min-height: 100dvh; min-height: 100dvh;
@ -2459,7 +2508,7 @@ body main {
flex-grow: 1; flex-grow: 1;
padding: 0 var(--padding-body); padding: 0 var(--padding-body);
padding-top: var(--header-h); padding-top: var(--header-h);
padding-bottom: calc(var(--spacing) * 2); padding-bottom: calc(var(--spacing) * 6);
min-height: 100dvh; min-height: 100dvh;
min-height: 100vh; min-height: 100vh;
} }

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

File diff suppressed because one or more lines are too long

1
assets/css/style.scss
View file

@ -30,6 +30,7 @@
@import "components/swiper"; @import "components/swiper";
@import "components/slider-before-after"; @import "components/slider-before-after";
@import "components/bottom-bar"; @import "components/bottom-bar";
@import "components/support-bar";
@import "partials/site-header"; @import "partials/site-header";
@import "partials/site-menu"; @import "partials/site-menu";

1
assets/icons/download.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 375 375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="-0" y="0" width="375" height="375" style="fill:none;"/><path d="M213.542,291.667c0,7.194 -5.827,13.021 -13.021,13.021l-78.125,0c-7.194,0 -13.021,-5.827 -13.021,-13.021c0,-7.194 5.827,-13.021 13.021,-13.021l78.125,0c7.194,0 13.021,5.827 13.021,13.021Zm39.062,-65.104l-130.208,0c-7.194,0 -13.021,5.827 -13.021,13.021c0,7.194 5.827,13.021 13.021,13.021l130.208,0c7.194,0 13.021,-5.827 13.021,-13.021c0,-7.194 -5.827,-13.021 -13.021,-13.021Zm78.125,-117.187l0,221.354c0,21.533 -17.529,39.062 -39.062,39.062l-208.333,0c-21.533,0 -39.062,-17.529 -39.062,-39.062l0,-286.458c0,-21.533 17.529,-39.062 39.062,-39.062l143.229,0c3.45,0 6.771,1.367 9.212,3.809l91.146,91.146c2.441,2.441 3.809,5.762 3.809,9.212l0,0Zm-104.167,-13.021c0,7.178 5.843,13.021 13.021,13.021l59.717,0l-72.737,-72.737l0,59.717Zm78.125,39.062l-65.104,0c-21.533,0 -39.062,-17.529 -39.062,-39.062l0,-65.104l-117.187,0c-7.178,0 -13.021,5.843 -13.021,13.021l0,286.458c0,7.178 5.843,13.021 13.021,13.021l208.333,0c7.178,0 13.021,-5.843 13.021,-13.021l0,-195.312Zm-195.312,52.083c-0,7.194 5.827,13.021 13.021,13.021l130.208,0c7.194,0 13.021,-5.827 13.021,-13.021c0,-7.194 -5.827,-13.021 -13.021,-13.021l-130.208,0c-7.194,0 -13.021,5.827 -13.021,13.021Z" style="fill-rule:nonzero;"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

2
assets/icons/share.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z"/></svg> <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 338 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="337.5" height="350" style="fill:none;"/><g><path d="M206.452,92.421l-82.875,46.517c-11.725,-17.346 -31.575,-28.758 -54.067,-28.758c-35.987,0 -65.204,29.217 -65.204,65.204c0,35.987 29.217,65.204 65.204,65.204c21.5,0 40.583,-10.429 52.467,-26.5l83.408,46.817c-1.692,5.804 -2.6,11.933 -2.6,18.275c0,35.987 29.217,65.204 65.204,65.204c35.988,0 65.204,-29.217 65.204,-65.204c0,-35.988 -29.217,-65.204 -65.204,-65.204c-20.317,0 -38.479,9.312 -50.438,23.896l-84.575,-47.471c1.138,-4.821 1.738,-9.85 1.738,-15.017c0,-4.167 -0.392,-8.246 -1.138,-12.196l86.262,-48.417c11.925,13.058 29.088,21.258 48.15,21.258c35.988,0 65.204,-29.221 65.204,-65.208c0,-35.988 -29.217,-65.204 -65.204,-65.204c-35.988,-0 -65.204,29.217 -65.204,65.204c0,7.571 1.292,14.838 3.667,21.6Zm61.538,147.596c21.617,0 39.163,17.546 39.163,39.163c0,21.612 -17.546,39.162 -39.163,39.162c-21.613,0 -39.163,-17.55 -39.163,-39.162c0,-21.617 17.55,-39.163 39.163,-39.163Zm-198.479,-103.796c21.617,0 39.163,17.546 39.163,39.162c0,21.612 -17.546,39.162 -39.163,39.162c-21.612,0 -39.162,-17.55 -39.162,-39.162c0,-21.617 17.55,-39.162 39.162,-39.162Zm198.479,-104.562c21.617,-0 39.163,17.55 39.163,39.162c0,21.617 -17.546,39.167 -39.163,39.167c-21.613,0 -39.163,-17.55 -39.163,-39.167c0,-21.613 17.55,-39.162 39.163,-39.162Z"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 679 B

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After

26
assets/js/investigation.js
View file

@ -62,23 +62,12 @@ export function scrollBack(){
const bottomBar = document.getElementById('bottom-bar'); const bottomBar = document.getElementById('bottom-bar');
const navInvestigation = document.getElementById('nav-investigation'); const navInvestigation = document.getElementById('nav-investigation');
const header = document.getElementById('site-header'); const header = document.getElementById('site-header');
const footerEl = document.getElementById('support-bar') || document.getElementById('site-footer');
let lastY = window.scrollY; let lastY = window.scrollY;
let peakY = window.scrollY; let peakY = window.scrollY;
let visible = false; let visible = false;
const show = () => {
visible = true;
if (bottomBar) bottomBar.classList.add('is-visible');
if (navInvestigation && header) header.classList.add('has-nav-investigation');
};
const hide = () => {
visible = false;
if (bottomBar) bottomBar.classList.remove('is-visible');
if (navInvestigation && header) header.classList.remove('has-nav-investigation');
};
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
const currentY = window.scrollY; const currentY = window.scrollY;
@ -87,14 +76,23 @@ export function scrollBack(){
header.classList.toggle('has-nav-investigation', currentY >= 160); header.classList.toggle('has-nav-investigation', currentY >= 160);
} }
// bottom-bar : show au scroll bas > 280px, hide après 200px de scroll haut // zone footer : bottom-bar masquée et verrouillée
if (currentY > lastY) { const inFooterZone = footerEl && (currentY + window.innerHeight >= footerEl.offsetTop);
if (inFooterZone) {
if (visible) {
visible = false;
if (bottomBar) bottomBar.classList.remove('is-visible');
}
} else if (currentY > lastY) {
// scroll bas
peakY = currentY; peakY = currentY;
if (!visible && currentY > 280) { if (!visible && currentY > 280) {
visible = true; visible = true;
if (bottomBar) bottomBar.classList.add('is-visible'); if (bottomBar) bottomBar.classList.add('is-visible');
} }
} else { } else {
// scroll haut : hide après 200px remontés
if (visible && peakY - currentY >= 200) { if (visible && peakY - currentY >= 200) {
visible = false; visible = false;
if (bottomBar) bottomBar.classList.remove('is-visible'); if (bottomBar) bottomBar.classList.remove('is-visible');

86
site/snippets/footer.php
View file

@ -1,65 +1,41 @@
<?php snippet('back-to-top') ?> <!-- <?php snippet('back-to-top') ?> -->
<div id="support-bar">
<div class="support-bar__container">
<p class="baseline">Pour continuer à enquêter, nous avons besoin de vous</p>
<button class="btn"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></button>
</div>
</div>
<footer id="site-footer"> <footer id="site-footer">
<div class="site-footer__container"> <div class="site-footer__container">
<div class="logo"><?= svg('assets/images/index-logo.svg') ?></div> <div class="logo"><?= svg('assets/images/index-logo.svg') ?></div>
<p class="baseline">Index est une ONG d’investigation numérique, au&nbsp;service du public, de&nbsp;la&nbsp;vérité et&nbsp;de&nbsp;la&nbsp;justice.</p>
<div class="footer__newsletter">
<div class="list-links">
<p> <ul>
Recevez les dernières enquêtes et actualités d’Index directement <li><a target="_blank" href="#">Mentions légales</a></li>
dans votre boîte mail. <li><a target="_blank" href="#">Politique de confidentialité</a></li>
</p> </ul>
<p>Inscrivez-vous à la newsletter</p> <ul class="hightlight">
<li><a target="_blank" href="#">Contact</a></li>
<form class="form__newsletter"> <li><a target="_blank" href="#">Newsletter</a></li>
<input </ul>
type="email"
name="email"
placeholder="Votre adresse e-mail"
required
/>
<button class="btn--newletter" type="submit" aria-label="s’inscrire">
<span class="txt">S’inscrire</span>
<span class="icon">
<svg
clip-rule="evenodd"
fill-rule="evenodd"
stroke-linejoin="round"
stroke-miterlimit="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z"
fill-rule="nonzero"
/>
</svg>
</span>
</button>
</form>
<p class="p__small">
En vous inscrivant, vous acceptez les
<a target="_blank" href="https://www.index.ngo/mentions-legales/"
>conditions d’utilisation</a
>
d’Index qui vous informent notamment des droits dont vous disposez
sur vos données personnelles.
</p>
</div> </div>
<div class="footer__socials">
<p>Suivez Index sur les réseaux sociaux</p>
<?php snippet('socials') ?> <?php snippet('socials') ?>
</div>
<p class="credits">
© 2025 Index Investigation | Site&nbsp;développé par&nbsp;<a href="https://studio-variable.com/" target="_blank">Studio&nbsp;Variable</a>
</p>
<div class="footer__mentions">
<p>
© 2025 Index Investigation |
<a target="_blank" href="https://www.index.ngo/mentions-legales/">Mentions légales</a>
</p>
</div>
</div> </div>
</footer> </footer>
<?php snippet('seo/schemas'); ?> <?php snippet('seo/schemas'); ?>

21
site/snippets/socials.php
View file

@ -1,45 +1,38 @@
<div class="socials"> <div class="socials">
<ul class="list-socials" aria-label="Liste des réseaux sociaux d’Index"> <ul class="list-socials" aria-label="Liste des réseaux sociaux d’Index">
<li> <li data-socials="x">
<a href="https://x.com/index_ngo" target="_blank" rel="noopener noreferrer"> <a href="https://x.com/index_ngo" target="_blank" rel="noopener noreferrer">
<span class="icon"><?= svg('assets/icons/socials/x-social.svg') ?></span> <span class="icon"><?= svg('assets/icons/socials/x-social.svg') ?></span>
<span class="text">X</span>
</a> </a>
</li> </li>
<li> <li data-socials="instagram">
<a href="https://www.instagram.com/index.ngo/" target="_blank" rel="noopener noreferrer"> <a href="https://www.instagram.com/index.ngo/" target="_blank" rel="noopener noreferrer">
<span class="icon"><?= svg('assets/icons/socials/instagram.svg') ?></span> <span class="icon"><?= svg('assets/icons/socials/instagram.svg') ?></span>
<span class="text">Instagram</span>
</a> </a>
</li> </li>
<li> <li data-socials="facebook">
<a href="https://www.facebook.com/index.ngo/" target="_blank" rel="noopener noreferrer"> <a href="https://www.facebook.com/index.ngo/" target="_blank" rel="noopener noreferrer">
<span class="icon"><?= svg('assets/icons/socials/facebook.svg') ?></span> <span class="icon"><?= svg('assets/icons/socials/facebook.svg') ?></span>
<span class="text">Facebook</span>
</a> </a>
</li> </li>
<li> <li data-socials="youtube">
<a href="https://www.youtube.com/index-ngo" target="_blank" rel="noopener noreferrer"> <a href="https://www.youtube.com/index-ngo" target="_blank" rel="noopener noreferrer">
<span class="icon"><?= svg('assets/icons/socials/youtube.svg') ?></span> <span class="icon"><?= svg('assets/icons/socials/youtube.svg') ?></span>
<span class="text">Youtube</span>
</a> </a>
</li> </li>
<li> <li data-socials="linkdin">
<a href="https://fr.linkedin.com/company/index-ngo" target="_blank" rel="noopener noreferrer"> <a href="https://fr.linkedin.com/company/index-ngo" target="_blank" rel="noopener noreferrer">
<span class="icon"><?= svg('assets/icons/socials/linkedin.svg') ?></span> <span class="icon"><?= svg('assets/icons/socials/linkedin.svg') ?></span>
<span class="text">LinkedIn</span>
</a> </a>
</li> </li>
<li> <li data-socials="bluesky">
<a href="https://bsky.app/profile/index-ngo.bsky.social" target="_blank" rel="noopener noreferrer"> <a href="https://bsky.app/profile/index-ngo.bsky.social" target="_blank" rel="noopener noreferrer">
<span class="icon"><?= svg('assets/icons/socials/bluesky.svg') ?></span> <span class="icon"><?= svg('assets/icons/socials/bluesky.svg') ?></span>
<span class="text">Bluesky</span>
</a> </a>
</li> </li>
<li> <li data-socials="mastodon">
<a href="https://mastodon.design/@index_ngo@mastodon.social" target="_blank" rel="noopener noreferrer"> <a href="https://mastodon.design/@index_ngo@mastodon.social" target="_blank" rel="noopener noreferrer">
<span class="icon"><?= svg('assets/icons/socials/mastodon.svg') ?></span> <span class="icon"><?= svg('assets/icons/socials/mastodon.svg') ?></span>
<span class="text">Mastodon</span>
</a> </a>
</li> </li>
</ul> </ul>

6
site/templates/investigation.php
View file

@ -507,9 +507,9 @@ if ($package):
</div> </div>
<button class="btn--simple"> <button class="btn--simple btn--download">
<a href="#" download> <a href="#" download>
<span class="icon"><?= svg('assets/icons/printer.svg') ?></span> <span class="icon"><?= svg('assets/icons/download.svg') ?></span>
<span class="text">Télécharger</span> <span class="text">Télécharger</span>
</a> </a>
</button> </button>
@ -524,3 +524,5 @@ if ($package):
</div> </div>
<?php snippet('footer') ?> <?php snippet('footer') ?>