studio-variable/index-main
4
0
Fork 0
Code Issues 14 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}{
:root {
--fs-xsmall: 13px;
--fs-small: 16px;
--fs-normal: 20px;
--fs-text: 20px;
--fs-xsmall: 12px;
--fs-small: 14px;
--fs-normal: 18px;
--fs-text: 18px;
--fs-medium: 24px;
--fs-big: 34px;

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

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

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

@ -64,6 +64,14 @@ main .page__header {
.description {
font-size: var(--fs-text);
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) {
:root {
--fs-xsmall: 13px;
--fs-small: 16px;
--fs-normal: 20px;
--fs-text: 20px;
--fs-xsmall: 12px;
--fs-small: 14px;
--fs-normal: 18px;
--fs-text: 18px;
--fs-medium: 24px;
--fs-big: 34px;
--header-h: 60px;
@ -579,42 +579,67 @@ button:disabled {
transform: translateX(0);
}
}
.btn--back-to-top {
display: flex;
border-color: var(--color-txt);
#btn--back-to-top {
width: -moz-fit-content;
width: fit-content;
margin: var(--spacing) auto;
font-size: var(--fs-xsmall);
margin-bottom: var(--spacing);
margin-left: auto;
margin-right: var(--padding-body);
}
@media screen and (max-width: 768px) {
.btn--back-to-top {
margin-bottom: calc(var(--spacing) * 2);
}
#btn--back-to-top a {
display: flex;
align-items: center;
gap: 1ch;
}
.btn--back-to-top .icon {
width: 12px;
height: 12px;
#btn--back-to-top .text {
font-size: var(--fs-small);
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-origin: center;
position: relative;
top: -1px;
display: flex;
align-items: center;
justify-content: center;
}
.btn--back-to-top .icon svg {
#btn--back-to-top .icon svg {
width: 12px;
height: 12px;
}
.btn--back-to-top:hover {
background-color: var(--grey-950);
color: var(--grey-100);
border-color: var(--grey-100);
#btn--back-to-top:hover {
opacity: 0.8;
}
.btn--back-to-top:hover a {
background-color: var(--grey-950);
color: var(--grey-100);
}
.btn--back-to-top:hover svg {
fill: var(--grey-100);
@media screen and (max-width: 560px) {
#btn--back-to-top {
opacity: 0;
transition: opacity 0.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;
}
#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 {
@ -2959,6 +2984,7 @@ main .page__header .description {
#investigation__content .subsection-w-media .media {
margin-inline: auto;
max-width: var(--max-w-content);
min-width: 0;
position: sticky;
top: calc(var(--header-h) + var(--spacing));
align-self: start;

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

File diff suppressed because one or more lines are too long

66
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 {
margin-top: calc(var(--spacing) * 1.5);
@ -126,28 +84,10 @@
}
}
// 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{
margin-inline: auto;
max-width: var(--max-w-content);
min-width: 0;
position: sticky;
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 { copyLink } from './share.js';
import { backToTop } from './back-to-top.js';
import { themeToggle } from './themeToggle.js';
import { playVideo } from './hero-video.js';
import { initDropdowns } from './dropdown.js';
@ -14,6 +15,7 @@ window.onload = async function () {
headerToggle();
themeToggle();
backToTop();
copyLink();
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 class="support-bar__container">