|
|
|
|
@@ -1,52 +1,80 @@
|
|
|
|
|
---
|
|
|
|
|
// 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"
|
|
|
|
|
// SiteHeader.astro - V1.3-C : header 1 ligne fine, liens cliquables, phrase intention Roboto Condensed
|
|
|
|
|
// Palette V1.3 figee : papier #FAFAF7, encre #0F172A, encre douce #475569, border #E5E7EB
|
|
|
|
|
// Composition :
|
|
|
|
|
// Desktop (>= md) : 1 ligne ~44px - Trans-Former | Jules Neny | architecture d'ecologie politique [phrase intention right-aligned, Roboto Condensed]
|
|
|
|
|
// Mobile (< md) : 2 lignes compactes - ligne 1 Trans-Former / ligne 2 Jules Neny . AEP (cliquables) - phrase intention masquee
|
|
|
|
|
// Liens :
|
|
|
|
|
// Trans-Former -> /
|
|
|
|
|
// Jules Neny -> /a-propos
|
|
|
|
|
// architecture d'ecologie politique -> https://aep.trans-former.fr (same-tab, site frere coherent)
|
|
|
|
|
// Typo phrase intention : Roboto Condensed Variable @fontsource (weight 400, font-stretch 75%)
|
|
|
|
|
import '@fontsource-variable/roboto-condensed/wght.css';
|
|
|
|
|
---
|
|
|
|
|
<header
|
|
|
|
|
class="site-header w-full border-b border-[#E5E7EB] bg-[#FAFAF7] text-[#0F172A] px-4 md:px-6 flex items-center"
|
|
|
|
|
role="banner"
|
|
|
|
|
>
|
|
|
|
|
<!-- Bloc identite (gauche) -->
|
|
|
|
|
<nav
|
|
|
|
|
class="flex flex-col md:flex-row md:items-baseline gap-x-2 gap-y-0.5 flex-shrink-0"
|
|
|
|
|
aria-label="identite site"
|
|
|
|
|
>
|
|
|
|
|
<!-- Ligne 1 desktop = wordmark inline ; mobile = ligne dediee -->
|
|
|
|
|
<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"
|
|
|
|
|
class="font-semibold tracking-tight text-[#0F172A] hover:text-[#0F172A] text-[15px] md:text-[16px] leading-none no-underline hover:underline underline-offset-2 decoration-1"
|
|
|
|
|
aria-label="trans-former.fr - accueil"
|
|
|
|
|
>
|
|
|
|
|
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>
|
|
|
|
|
|
|
|
|
|
<!-- Bloc secondaire : Jules Neny . AEP (mobile : ligne 2 ; desktop : inline) -->
|
|
|
|
|
<span class="flex items-baseline gap-1.5 text-[#475569] leading-none">
|
|
|
|
|
<span class="text-[#94A3B8] hidden md:inline" aria-hidden="true">·</span>
|
|
|
|
|
<a
|
|
|
|
|
href="/a-propos"
|
|
|
|
|
class="text-[12px] md:text-[13px] text-[#475569] hover:text-[#0F172A] no-underline hover:underline underline-offset-2 decoration-1"
|
|
|
|
|
>
|
|
|
|
|
Jules Neny
|
|
|
|
|
</a>
|
|
|
|
|
<span class="text-[#94A3B8]" aria-hidden="true">·</span>
|
|
|
|
|
<a
|
|
|
|
|
href="https://aep.trans-former.fr"
|
|
|
|
|
class="text-[12px] md:text-[13px] text-[#475569] hover:text-[#0F172A] no-underline hover:underline underline-offset-2 decoration-1"
|
|
|
|
|
>
|
|
|
|
|
architecture d'écologie politique
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<!-- Phrase intention (droite, desktop only) - Roboto Condensed allongee -->
|
|
|
|
|
<p
|
|
|
|
|
class="intention hidden md:block ml-auto pl-6 text-right text-[#475569] text-[11px] leading-tight max-w-[55%]"
|
|
|
|
|
>
|
|
|
|
|
Comment créer une pratique systémique, créative et collective de transformation sociale pour répondre à l'effondrement et restaurer notre capacité à habiter la Terre dans l'Anthropocène ?
|
|
|
|
|
</p>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.site-header {
|
|
|
|
|
height: 48px;
|
|
|
|
|
height: 44px;
|
|
|
|
|
}
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.site-header {
|
|
|
|
|
height: 64px;
|
|
|
|
|
height: auto;
|
|
|
|
|
min-height: 48px;
|
|
|
|
|
padding-top: 6px;
|
|
|
|
|
padding-bottom: 6px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/* Phrase intention : Roboto Condensed Variable, font-stretch 75% (allongement vertical condense)
|
|
|
|
|
Cantonnee a .intention pour eviter contagion stack Inter */
|
|
|
|
|
.intention {
|
|
|
|
|
font-family: 'Roboto Condensed Variable', 'Roboto Condensed', sans-serif;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-stretch: 75%;
|
|
|
|
|
font-style: italic;
|
|
|
|
|
letter-spacing: 0.01em;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
