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

script header visible
All checks were successful
Deploy / Deploy to pre-production (push) Successful in 6s
Details

Browse source
This commit is contained in:
Julie Blanc 2025-12-23 17:29:27 +01:00
parent 430fd243fe
commit 08ebf7fc9e
11 changed files with 112 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
$desktop: "screen and (min-width: 1200px)";
$medium: "screen and (max-width: 1080px)";
$medium-up: "screen and (min-width: 1080px)";
$small-up: "screen and (min-width: 720px)";
$small: "screen and (max-width: 720px)";
$x-small: "screen and (max-width: 560px)";

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

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

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

@ -8,21 +8,26 @@
}
#site-header {
position: fixed;
left: var(--padding-body);
top: 0px;
z-index: 900;
--gap: 3ch;
width: calc(100vw - var(--padding-body)*2);
width: 100vw;
height: var(--header-h);
background-color: var(--color-bg);
// border-bottom: var(--border-light);
padding: 0 var(--padding-body);
.site-header__inner{
width: 100%;
height: 100%;
border-bottom: var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap);
}
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap);
a{
text-decoration: none;
@ -71,3 +76,13 @@
}
}
#site-header.is-visible{
position: fixed;
top: 0;
& ~ main{
margin-top: var(--header-h);
}
}

47
assets/css/style.css
View file

@ -100,14 +100,17 @@ body {
}
}
#site-header {
position: fixed;
left: var(--padding-body);
top: 0px;
z-index: 900;
--gap: 3ch;
width: calc(100vw - var(--padding-body) * 2);
width: 100vw;
height: var(--header-h);
background-color: var(--color-bg);
padding: 0 var(--padding-body);
}
#site-header .site-header__inner {
width: 100%;
height: 100%;
border-bottom: var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
@ -152,6 +155,14 @@ body {
fill: var(--grey-200) !important;
}
#site-header.is-visible {
position: fixed;
top: 0;
}
#site-header.is-visible ~ main {
margin-top: var(--header-h);
}
button {
cursor: pointer;
font-family: var(--font);
@ -540,14 +551,17 @@ button:disabled {
}
}
#site-header {
position: fixed;
left: var(--padding-body);
top: 0px;
z-index: 900;
--gap: 3ch;
width: calc(100vw - var(--padding-body) * 2);
width: 100vw;
height: var(--header-h);
background-color: var(--color-bg);
padding: 0 var(--padding-body);
}
#site-header .site-header__inner {
width: 100%;
height: 100%;
border-bottom: var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
@ -592,6 +606,14 @@ button:disabled {
fill: var(--grey-200) !important;
}
#site-header.is-visible {
position: fixed;
top: 0;
}
#site-header.is-visible ~ main {
margin-top: var(--header-h);
}
#site-menu {
position: fixed;
width: var(--menu-w);
@ -774,7 +796,6 @@ body {
}
body main {
flex-grow: 1;
margin-top: var(--header-h);
padding: 0 var(--padding-body);
}
@ -803,23 +824,23 @@ body main {
font-size: var(--fs-medium);
margin-bottom: calc(var(--spacing) * 1);
}
.page-enquete .hero {
.page-enquete #hero {
width: 100vw;
position: relative;
left: calc(var(--padding-body) * -1);
margin: calc(var(--spacing) * 3) 0;
}
.page-enquete .hero figcaption {
.page-enquete #hero figcaption {
color: var(--color-txt-light);
font-size: var(--fs-small);
max-width: var(--max-w-content);
margin: 0 auto;
padding-top: calc(var(--spacing) * 0.5);
}
.page-enquete .hero.hero-video figure {
.page-enquete #hero.hero-video figure {
width: 100%;
}
.page-enquete .hero.hero-video figure img {
.page-enquete #hero.hero-video figure img {
width: 100%;
aspect-ratio: 16/9;
-o-object-fit: cover;

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

File diff suppressed because one or more lines are too long

2
assets/css/template/_page-enquete.scss
View file

@ -33,7 +33,7 @@
// HER0 ----------------------------------------------------
.hero{
#hero{
width: 100vw;
position: relative;
left: calc(var(--padding-body)*-1);

36
assets/js/header.js Normal file
View file

@ -0,0 +1,36 @@
// ===============================
// HEADER
// ===============================
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");
});
}
export function headerScrollVisibility() {
const header = document.getElementById("site-header");
const hero = document.getElementById("hero");
if (!header || !hero) return;
function checkScroll() {
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");
}
}
window.addEventListener("scroll", checkScroll);
checkScroll(); // Vérifier au chargement
}

33
assets/js/onload.js
View file

@ -1,8 +1,10 @@
// TEMP, with includeHTML() --------------------------------------
import { headerToggle, headerScrollVisibility } from './header.js';
// TEMP, with includeHTML() --------------------------------------
window.onload = async function () {
await runIncludeHTML();
initAfterLoad();
await runIncludeHTML();
initAfterLoad();
};
function runIncludeHTML() {
@ -18,7 +20,7 @@ function runIncludeHTML() {
}
/// INIT --------------------------------------------------------
/// INIT --------------------------------------------------------
// Note: une fois que IncludeHTML() est supprimé, on peut supprimer tout le temp au dessus
// remplacer `function initAfterLoad()` par ↓
@ -26,26 +28,5 @@ function runIncludeHTML() {
function initAfterLoad() {
headerToggle();
headerScrollVisibility();
}
// ===============================
// HEADER
// ===============================
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");
});
}

6
components/site-header.html
View file

@ -1,4 +1,6 @@
<div class="site-header__inner">
<h1 id="site-title">
<a
href="https://www.index.ngo/"
@ -36,4 +38,6 @@
<button id="menu-toggle">
<span class="open" w3-include-html="/assets/icons/menu.svg"></span>
<span class="close" w3-include-html="/assets/icons/menu-close.svg"></span>
</button>
</button>
</div>

2
index.html
View file

@ -6,7 +6,7 @@
<title>INDEX</title>
<link rel="icon" type="image/png" href="/assets/favicon.png" />
<script src="/assets/js/temp/includeHtml.js"></script>
<script src="/assets/js/onload.js"></script>
<script src="assets/js/onload.js" type="module"></script>
<link rel="stylesheet" type="text/css" href="/assets/fonts/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/css/style.css">
</head>

4
page-enquete/index.html
View file

@ -6,7 +6,7 @@
<title>INDEX</title>
<link rel="icon" type="image/png" href="/assets/favicon.png" />
<script src="/assets/js/temp/includeHtml.js"></script>
<script src="/assets/js/onload.js"></script>
<script src="assets/js/onload.js" type="module"></script>
<link rel="stylesheet" type="text/css" href="/assets/fonts/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/css/style.css">
</head>
@ -23,7 +23,7 @@
<p class="date-publish"></p>
</header>
<div class="hero hero-video">
<div id="hero" class="hero-video">
<figure>
<img src="/assets/images/Nidal-Khaled-Amirah.png">
</figure>