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

btn back to top
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-23 18:12:04 +01:00
parent bdb60646d0
commit c59f4d93dd
11 changed files with 160 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -88,10 +88,10 @@
@media #{$small}{ @media #{$small}{
:root { :root {
--fs-xsmall: 13px; --fs-xsmall: 12px;
--fs-small: 16px; --fs-small: 14px;
--fs-normal: 20px; --fs-normal: 18px;
--fs-text: 20px; --fs-text: 18px;
--fs-medium: 24px; --fs-medium: 24px;
--fs-big: 34px; --fs-big: 34px;

77
assets/css/components/_buttons.scss
View file

@ -264,23 +264,40 @@ button:disabled{
.btn--back-to-top{ #btn--back-to-top{
display: flex;
border-color: var(--color-txt);
width: fit-content; width: fit-content;
margin: var(--spacing) auto; margin-bottom: var(--spacing);
font-size: var(--fs-xsmall); margin-left: auto;
@media #{$small}{ margin-right: var(--padding-body);
margin-bottom: calc(var(--spacing)*2);
a{
display: flex;
align-items: center;
gap: 1ch;
}
.text{
font-size: var(--fs-small);
padding-top: 2px;
} }
.icon{ .icon{
width: 12px; flex-shrink: 0;
height: 12px; --size: 26px;
border: 1px solid var(--color-txt);
background-color: var(--color-bg);
border-radius: 50%;
width: var(--size);
height: var(--size);
transform: rotate(-90deg); transform: rotate(-90deg);
transform-origin: center;
position: relative; display: flex;
top: -1px; align-items: center;
justify-content: center;
svg{ svg{
width: 12px; width: 12px;
height: 12px; height: 12px;
@ -288,15 +305,37 @@ button:disabled{
} }
&:hover{ &:hover{
background-color: var(--grey-950); opacity: 0.8;
color: var(--grey-100);
border-color: var(--grey-100);
a{
background-color: var(--grey-950);
color: var(--grey-100);
} }
svg{ fill: var(--grey-100); }
@media #{$x-small}{
opacity: 0;
transition: opacity .5s ease;
position: fixed;
bottom: calc(var(--padding-body)*1.5);
right: var(--padding-body);
z-index: var(--z-header);
margin-right: 0;
margin-bottom: 0;
.icon{
--size: 32px;
border-width: 2px;
svg{
width: 19px;
height: 19px;
} }
}
.text{
display: none;
}
&.is-visible{
opacity: 1;
}
}
} }

8
assets/css/partials/_page-header.scss
View file

@ -64,6 +64,14 @@ main .page__header {
.description { .description {
font-size: var(--fs-text); font-size: var(--fs-text);
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
// @media #{$small} {
// font-size: var(--fs-small);
// font-weight: 500;
// border-top: var(--border-light);
// }
} }

86
assets/css/style.css
View file

@ -62,10 +62,10 @@
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
:root { :root {
--fs-xsmall: 13px; --fs-xsmall: 12px;
--fs-small: 16px; --fs-small: 14px;
--fs-normal: 20px; --fs-normal: 18px;
--fs-text: 20px; --fs-text: 18px;
--fs-medium: 24px; --fs-medium: 24px;
--fs-big: 34px; --fs-big: 34px;
--header-h: 60px; --header-h: 60px;
@ -579,42 +579,67 @@ button:disabled {
transform: translateX(0); transform: translateX(0);
} }
} }
.btn--back-to-top { #btn--back-to-top {
display: flex;
border-color: var(--color-txt);
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
margin: var(--spacing) auto; margin-bottom: var(--spacing);
font-size: var(--fs-xsmall); margin-left: auto;
margin-right: var(--padding-body);
} }
@media screen and (max-width: 768px) { #btn--back-to-top a {
.btn--back-to-top { display: flex;
margin-bottom: calc(var(--spacing) * 2); align-items: center;
} gap: 1ch;
} }
.btn--back-to-top .icon { #btn--back-to-top .text {
width: 12px; font-size: var(--fs-small);
height: 12px; padding-top: 2px;
}
#btn--back-to-top .icon {
flex-shrink: 0;
--size: 26px;
border: 1px solid var(--color-txt);
background-color: var(--color-bg);
border-radius: 50%;
width: var(--size);
height: var(--size);
transform: rotate(-90deg); transform: rotate(-90deg);
transform-origin: center; display: flex;
position: relative; align-items: center;
top: -1px; justify-content: center;
} }
.btn--back-to-top .icon svg { #btn--back-to-top .icon svg {
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
.btn--back-to-top:hover { #btn--back-to-top:hover {
background-color: var(--grey-950); opacity: 0.8;
color: var(--grey-100);
border-color: var(--grey-100);
} }
.btn--back-to-top:hover a { @media screen and (max-width: 560px) {
background-color: var(--grey-950); #btn--back-to-top {
color: var(--grey-100); opacity: 0;
} transition: opacity 0.5s ease;
.btn--back-to-top:hover svg { position: fixed;
fill: var(--grey-100); bottom: calc(var(--padding-body) * 1.5);
right: var(--padding-body);
z-index: var(--z-header);
margin-right: 0;
margin-bottom: 0;
}
#btn--back-to-top .icon {
--size: 32px;
border-width: 2px;
}
#btn--back-to-top .icon svg {
width: 19px;
height: 19px;
}
#btn--back-to-top .text {
display: none;
}
#btn--back-to-top.is-visible {
opacity: 1;
}
} }
.btn--support { .btn--support {
@ -2959,6 +2984,7 @@ main .page__header .description {
#investigation__content .subsection-w-media .media { #investigation__content .subsection-w-media .media {
margin-inline: auto; margin-inline: auto;
max-width: var(--max-w-content); max-width: var(--max-w-content);
min-width: 0;
position: sticky; position: sticky;
top: calc(var(--header-h) + var(--spacing)); top: calc(var(--header-h) + var(--spacing));
align-self: start; align-self: start;

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

File diff suppressed because one or more lines are too long

62
assets/css/template/_investigation.scss
View file

@ -37,48 +37,6 @@
// @media screen and (max-width: 1340px) {
// margin-left: auto;
// margin-right: calc(var(--padding-body) * 3);
// .panel-left {
// width: calc(100vw - var(--max-w-cards) - var(--padding-body) * 6);
// }
// }
// @media screen and (max-width: 1220px) {
// margin-left: auto;
// margin-right: 0px;
// width: calc(100% - var(--panel-w) * 0.5 - var(--padding-body));
// .panel-left {
// width: calc(var(--panel-w) * 0.5);
// }
// }
// .section__article {
// background-color: red;
// margin-top: calc(var(--spacing) * 3);
// margin-bottom: calc(var(--spacing) * 3);
// max-width: var(--max-w-content);
// margin-inline: auto;
// &:target {
// padding-top: calc(var(--header-h) + var(--spacing) * 1);
// }
// a:hover {
// color: var(--grey-200);
// }
// .section__title {
// font-weight: 500;
// text-transform: uppercase;
// margin-bottom: calc(var(--spacing) * 1);
// padding-right: 2ch;
// text-wrap: balance;
// }
// }
#investigation__dl { #investigation__dl {
margin-top: calc(var(--spacing) * 1.5); margin-top: calc(var(--spacing) * 1.5);
@ -129,25 +87,7 @@
// SMALL ----------------------------------------------------------
// ----------------------------------------------------------------
// @media #{$small} {
// [data-template="investigation"] main {
// width: 100%;
// header {
// margin-bottom: calc(var(--spacing) * 1);
// }
// .section__article {
// margin-top: calc(var(--spacing) * 2);
// margin-bottom: calc(var(--spacing) * 2);
// }
// .panel-left {
// display: none;
// }
// }
} }

1
assets/css/template/_investigation_content.scss
View file

@ -92,6 +92,7 @@
.media{ .media{
margin-inline: auto; margin-inline: auto;
max-width: var(--max-w-content); max-width: var(--max-w-content);
min-width: 0;
position: sticky; position: sticky;
top: calc(var(--header-h) + var(--spacing)); top: calc(var(--header-h) + var(--spacing));

24
assets/js/back-to-top.js Normal file
View file

@ -0,0 +1,24 @@
export function backToTop(){
const btn = document.getElementById('btn--back-to-top');
if (!btn) return;
let lastY = window.scrollY;
let peakY = window.scrollY;
window.addEventListener('scroll', () => {
const currentY = window.scrollY;
if (currentY > lastY) {
peakY = currentY;
btn.classList.remove('is-visible');
} else {
if (currentY <= 800) {
btn.classList.remove('is-visible');
} else if (peakY - currentY >= 200 && peakY > 600) {
btn.classList.add('is-visible');
}
}
lastY = currentY;
}, { passive: true });
}

2
assets/js/script.js
View file

@ -1,5 +1,6 @@
import { headerToggle, headerScrollVisibility } from './header.js'; import { headerToggle, headerScrollVisibility } from './header.js';
import { copyLink } from './share.js'; import { copyLink } from './share.js';
import { backToTop } from './back-to-top.js';
import { themeToggle } from './themeToggle.js'; import { themeToggle } from './themeToggle.js';
import { playVideo } from './hero-video.js'; import { playVideo } from './hero-video.js';
import { initDropdowns } from './dropdown.js'; import { initDropdowns } from './dropdown.js';
@ -14,6 +15,7 @@ window.onload = async function () {
headerToggle(); headerToggle();
themeToggle(); themeToggle();
backToTop();
copyLink(); copyLink();
playVideo(); playVideo();

2
site/snippets/back-to-top.php
View file

@ -1 +1 @@
<button class="btn--small btn--back-to-top"><a href="#">Revenir en haut <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button> <button id="btn--back-to-top"><a href="#"><span class="text">Revenir en haut </span><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>

2
site/snippets/footer.php
View file

@ -1,4 +1,4 @@
<!-- <?php snippet('back-to-top') ?> --> <?php snippet('back-to-top') ?>
<div id="support-bar"> <div id="support-bar">
<div class="support-bar__container"> <div class="support-bar__container">