header
This commit is contained in:
ordinarthur
parent
12297eb74f
commit
5d25de9166
@ -2,7 +2,7 @@
|
||||
const currentPath = Astro.url.pathname;
|
||||
const isHome = false; // hero is now white bg, no dark variant needed
|
||||
const nav = [
|
||||
{ label: 'projets', href: '/creations-evenement' },
|
||||
{ label: 'événement', href: '/creations-evenement' },
|
||||
{ label: 'pérenne', href: '/realisations-perennes' },
|
||||
{ label: 'processus', href: '/processus' },
|
||||
{ label: 'contact', href: 'mailto:contact@aureliebarre.fr' },
|
||||
@ -24,44 +24,11 @@ const nav = [
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<button class="hd__burger" id="burger" aria-label="Menu" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile fullscreen -->
|
||||
<div class="hd__mobile" id="mobile-nav" aria-hidden="true">
|
||||
<nav class="hd__mobile-nav">
|
||||
{nav.map((item, i) => (
|
||||
<a href={item.href} class="hd__mobile-link" style={`--i:${i}`}>{item.label}</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const burger = document.getElementById('burger');
|
||||
const mobile = document.getElementById('mobile-nav');
|
||||
const hd = document.getElementById('hd');
|
||||
|
||||
burger?.addEventListener('click', () => {
|
||||
const open = burger.getAttribute('aria-expanded') === 'true';
|
||||
burger.setAttribute('aria-expanded', String(!open));
|
||||
mobile?.setAttribute('aria-hidden', String(open));
|
||||
hd?.classList.toggle('is-open');
|
||||
document.body.style.overflow = open ? '' : 'hidden';
|
||||
});
|
||||
|
||||
document.querySelectorAll('.hd__mobile-link').forEach(l => {
|
||||
l.addEventListener('click', () => {
|
||||
burger?.setAttribute('aria-expanded', 'false');
|
||||
mobile?.setAttribute('aria-hidden', 'true');
|
||||
hd?.classList.remove('is-open');
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
});
|
||||
|
||||
let ticking = false;
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!ticking) {
|
||||
@ -86,16 +53,16 @@ const nav = [
|
||||
/* ---- Default: dark text (inner pages) ---- */
|
||||
.hd__logo { color: var(--text); }
|
||||
.hd__link { color: var(--text-2); }
|
||||
.hd__link:hover, .hd__link.is-active { color: var(--text); }
|
||||
.hd__burger span { background: var(--text); }
|
||||
.hd__link:hover { color: var(--text); }
|
||||
.hd__link.is-active { color: var(--accent); }
|
||||
|
||||
|
||||
/* ---- Hero variant: white text on homepage ---- */
|
||||
.hd--hero .hd__logo { color: #fff; }
|
||||
.hd--hero .hd__link { color: rgba(255,255,255,0.6); }
|
||||
.hd--hero .hd__link:hover,
|
||||
.hd--hero .hd__link.is-active { color: #fff; }
|
||||
.hd--hero .hd__link::after { background: #fff; }
|
||||
.hd--hero .hd__burger span { background: #fff; }
|
||||
.hd--hero .hd__link:hover { color: #fff; }
|
||||
.hd--hero .hd__link.is-active { color: var(--accent); }
|
||||
.hd--hero .hd__link::after { background: var(--accent); }
|
||||
|
||||
/* ---- Scrolled: always white bg + dark text ---- */
|
||||
.hd.is-scrolled {
|
||||
@ -106,10 +73,9 @@ const nav = [
|
||||
|
||||
.hd.is-scrolled .hd__logo { color: var(--text); }
|
||||
.hd.is-scrolled .hd__link { color: var(--text-2); }
|
||||
.hd.is-scrolled .hd__link:hover,
|
||||
.hd.is-scrolled .hd__link.is-active { color: var(--text); }
|
||||
.hd.is-scrolled .hd__link::after { background: var(--text); }
|
||||
.hd.is-scrolled .hd__burger span { background: var(--text); }
|
||||
.hd.is-scrolled .hd__link:hover { color: var(--text); }
|
||||
.hd.is-scrolled .hd__link.is-active { color: var(--accent); }
|
||||
.hd.is-scrolled .hd__link::after { background: var(--accent); }
|
||||
|
||||
.hd__in {
|
||||
display: flex;
|
||||
@ -133,8 +99,13 @@ const nav = [
|
||||
|
||||
.hd__nav {
|
||||
display: flex;
|
||||
gap: 2.5rem;
|
||||
gap: clamp(1rem, 3vw, 2.5rem);
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
padding-bottom: 2px; /* For the stroke hover */
|
||||
}
|
||||
.hd__nav::-webkit-scrollbar { display: none; }
|
||||
|
||||
.hd__link {
|
||||
font-size: 0.7rem;
|
||||
@ -148,86 +119,14 @@ const nav = [
|
||||
.hd__link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px; left: 0;
|
||||
bottom: -4px; left: 0;
|
||||
width: 0; height: 1px;
|
||||
background: var(--text);
|
||||
background: var(--accent);
|
||||
transition: width 0.4s var(--ease);
|
||||
}
|
||||
|
||||
.hd__link:hover::after,
|
||||
.hd__link.is-active::after { width: 100%; }
|
||||
|
||||
/* Burger */
|
||||
.hd__burger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.hd__burger span {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 1px;
|
||||
transition: transform 0.4s var(--ease), opacity 0.2s, background 0.3s;
|
||||
}
|
||||
|
||||
.is-open .hd__burger span:first-child { transform: translateY(3px) rotate(45deg); }
|
||||
.is-open .hd__burger span:last-child { transform: translateY(-3px) rotate(-45deg); }
|
||||
|
||||
/* When menu is open, force dark burger (white bg behind) */
|
||||
.is-open .hd__burger span { background: var(--text) !important; }
|
||||
|
||||
/* Mobile overlay */
|
||||
.hd__mobile {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.5s var(--ease), visibility 0.5s;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.is-open .hd__mobile {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.hd__mobile-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hd__mobile-link {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(2rem, 6vw, 3rem);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.2s;
|
||||
}
|
||||
|
||||
.is-open .hd__mobile-link {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: calc(var(--i) * 80ms + 100ms);
|
||||
}
|
||||
|
||||
.hd__mobile-link:hover { color: var(--text-2); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hd__nav { display: none; }
|
||||
.hd__burger { display: flex; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -229,7 +229,7 @@ const allPerennes = getMockProjects('perenne');
|
||||
font-weight: 800;
|
||||
color: transparent;
|
||||
/* On utilise em pour que l'épaisseur s'adapte à la taille de l'écran */
|
||||
-webkit-text-stroke: 0.02em #d45d3c; /* Un terracotta moderne et chaleureux */
|
||||
-webkit-text-stroke: 0.02em var(--accent); /* Un terracotta moderne et chaleureux */
|
||||
}
|
||||
|
||||
.hero__info {
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
--text: #111;
|
||||
--text-2: #555;
|
||||
--text-3: #999;
|
||||
--accent: #d45d3c;
|
||||
--border: #e0e0e0;
|
||||
--border-light: #f0f0f0;
|
||||
--serif: 'DM Serif Display', Georgia, serif;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user