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

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

Browse source
This commit is contained in:
Julie Blanc 2026-01-22 14:46:05 +01:00
parent d5e458afd8
commit 84f67c88cc
5 changed files with 27 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@ body{
main{
flex-grow: 1;
padding: 0 var(--padding-body);
padding: var(--header-h);
}
}

45
assets/css/partials/_site-header.scss
View file

@ -1,17 +1,12 @@
@keyframes add-border {
from {
border-bottom-color: transparent;
}
to {
border-bottom: var(--grey-800);
}
}
#site-header {
z-index: 900;
--gap: 3ch;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: var(--header-h);
background-color: var(--color-bg);
@ -20,6 +15,8 @@
.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;
@ -107,36 +104,10 @@
}
#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);
border-color: var(--grey-800);
}
}

89
assets/css/style.css
View file

@ -134,17 +134,12 @@ 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);
}
}
#site-header {
z-index: 900;
--gap: 3ch;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: var(--header-h);
background-color: var(--color-bg);
@ -153,6 +148,8 @@ body, #site-header, #site-footer {
#site-header .site-header__inner {
width: 100%;
height: 100%;
border-bottom: 1px solid var(--color-bg);
transition: border-color ease-in 0.5s;
display: flex;
align-items: center;
justify-content: space-between;
@ -225,37 +222,8 @@ 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);
border-color: var(--grey-800);
}
@media screen and (max-width: 1080px) {
@ -1403,17 +1371,12 @@ button.sort[data-sort-type=up] .arrow {
text-decoration: underline;
}
@keyframes add-border {
from {
border-bottom-color: transparent;
}
to {
border-bottom: var(--grey-800);
}
}
#site-header {
z-index: 900;
--gap: 3ch;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: var(--header-h);
background-color: var(--color-bg);
@ -1422,6 +1385,8 @@ button.sort[data-sort-type=up] .arrow {
#site-header .site-header__inner {
width: 100%;
height: 100%;
border-bottom: 1px solid var(--color-bg);
transition: border-color ease-in 0.5s;
display: flex;
align-items: center;
justify-content: space-between;
@ -1494,37 +1459,8 @@ button.sort[data-sort-type=up] .arrow {
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);
border-color: var(--grey-800);
}
@media screen and (max-width: 1080px) {
@ -1680,6 +1616,7 @@ body {
body main {
flex-grow: 1;
padding: 0 var(--padding-body);
padding: var(--header-h);
}
.section--home {

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

File diff suppressed because one or more lines are too long

24
assets/js/header.js
View file

@ -1,8 +1,6 @@
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", () => {
@ -12,32 +10,18 @@ export function headerToggle() {
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();
}