jules/astro-site-cerveau
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(v12-m): header bandeau Trans-Former / Jules Neny / baseline palette terre

Browse Source
This commit is contained in:
Jules Neny
2026-05-11 18:41:51 +02:00
parent 78dde6a2a3
commit 3ba4628818
4 changed files with 66 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/astro/MobileTabBar.astro
View File

@@ -6,7 +6,7 @@
<nav
id="mobile-tab-bar"
aria-label="Navigation colonnes"
class="fixed top-0 left-0 right-0 z-30 h-11 bg-white border-b border-neutral-200 flex items-stretch justify-around md:hidden"
class="fixed top-12 left-0 right-0 z-30 h-11 bg-white border-b border-neutral-200 flex items-stretch justify-around md:hidden"
>
<button
type="button"

52
src/components/astro/SiteHeader.astro Normal file
View File

@@ -0,0 +1,52 @@
---
// SiteHeader.astro - V1.2-M : bandeau header pleine largeur identite site
// Palette terre figee : papier #FAFAF7, encre #0F172A, encre douce #475569
// Composition retenue : 2 lignes hierarchique
// ligne 1 : "Trans-Former" wordmark dominant (semibold tracking serre)
// ligne 2 : "Jules Neny" + baseline italique cote a cote (separateur point median)
// Rationale : le wordmark domine sans ecraser ; la baseline reste lisible ;
// composition adaptee a un manifeste (hierarchie typographique forte).
// Hauteur : ~64px desktop / ~48px mobile (compacte)
// Baseline raccourcie mobile : "architecture politique du vivant"
---
<header
class="site-header w-full border-b border-[#E5E7EB] bg-[#FAFAF7] text-[#0F172A] px-4 md:px-6 flex items-center"
role="banner"
>
<a
href="/"
class="flex flex-col md:flex-row md:items-baseline gap-x-3 gap-y-0 no-underline text-[#0F172A] hover:text-[#0F172A]"
aria-label="trans-former.fr - retour accueil"
>
<!-- Ligne 1 : wordmark dominant -->
<span
class="font-semibold tracking-tight text-[#0F172A] text-[17px] md:text-[20px] leading-none"
>
Trans-Former
</span>
<!-- Ligne 2 (desktop : inline ; mobile : sous wordmark) : Jules Neny + baseline -->
<span class="flex items-baseline gap-2 text-[#475569] leading-none">
<span class="text-[11px] md:text-[13px]">Jules Neny</span>
<span class="text-[#94A3B8]" aria-hidden="true">·</span>
<!-- Baseline longue : desktop / Baseline courte : mobile -->
<span class="italic text-[11px] md:text-[13px] hidden sm:inline">
architecture d'ecologie politique
</span>
<span class="italic text-[11px] inline sm:hidden">
architecture politique du vivant
</span>
</span>
</a>
</header>
<style>
.site-header {
height: 48px;
}
@media (min-width: 768px) {
.site-header {
height: 64px;
}
}
</style>