81 lines
3.2 KiB
Plaintext
81 lines
3.2 KiB
Plaintext
---
|
|
// 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="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
|
|
</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: 44px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.site-header {
|
|
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>
|