53 lines
1.9 KiB
Plaintext
53 lines
1.9 KiB
Plaintext
---
|
|
// 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>
|