En-tête et pied
L’en-tête clair avec sa barre de lecture, le pied sur sa cellule pâle.
L’en-tête
Sur papier blanc, un trait pointillé dessous : le logo, le menu, le bouton, et une barre de lecture qui avance. Il est collant, donc il n’est pas posé dans un spécimen : c’est celui qui tient le haut de cette page.
- Emploi
- Le haut de toute page de la trame : posé par le gabarit Trame, dans le slot entete du gabarit de base.
- Moment
- Toujours, une fois. Le menu et le bouton viennent de V3, pour que tout le site dise la même chose que l’accueil.
- Jamais
- Dans une page ou un spécimen, ni avec un numéro de téléphone tant qu’il n’existe pas.
Appelsrc/layouts/Trame.astro
<Page titre={titre} description={description} enteteClair noindex={noindex}>
<EnTete slot="entete" />
<div class:list={['tr', classe]}><slot /></div>
<Pied slot="pied" />
</Page>| Classe | Zone | Valeur |
|---|---|---|
| .hdr | la barre | fixée en haut, z-index 60 ; fond surface, et sur la trame un trait pointillé en bas à la place du filet (.tr-hdr : border-bottom 0, --th sur toute la largeur) |
| .hdr__in | l’intérieur | en ligne, 32 px d’écart, 1240 px au plus (--wrap), padding 20 px 28 px (--gut) |
| .hdr__logo | le logo | grinn-logo.svg, 140 × 30, lien vers l’accueil nommé « Grinn, accueil » ; 30 px de haut, 25 px sous 860 px |
| .tr-hdr nav | le menu | les quatre entrées de V3.menu, 26 px d’écart, 14,5 px, ink-2 ; un trait vert profond se trace dessous au survol (380 ms) |
| nav a[aria-current="page"] | la page courante | posé quand le chemin commence par le lien ; encre, souligné 1,5 px vert profond à .35em |
| .btn.btn--sm | le bouton | V3.cta vers /contact/ ; Inter 600 11,5 px, .11em, capitales, flèche ↗ décorative |
| .hdr__progres | la barre de lecture | 2 px vert profond, à 1 px sous la barre ; scaleX de 0 à 1 au fil du défilement (animation-timeline: scroll(root), quand le navigateur le prend en charge) ; masquée en mouvement réduit |
| .is-stuck | collé | posé par la fonction header de grinn.js dès 40 px de défilement, au rythme des images (requestAnimationFrame) ; fond blanc à 94 %, intérieur resserré à 13 px haut et bas |
| [id] | les ancres | scroll-margin-top 88 px sur la trame ; la première section réserve 76 px en haut |
| Rang | Entrée | Lien |
|---|---|---|
| 1 | Offres | /offres/ |
| 2 | Réalisations | /realisations/ |
| 3 | Le suivi | /suivi/ |
| 4 | L’équipe | /a-propos/ |
Le pied
Une cellule pâle entre les rails, trois cellules allumées dans le coin, cinq colonnes, la ligne légale. Le groupe s’y nomme, et nulle part ailleurs sur la page.
Appelsrc/components/trame/Pied.astro
<Pied />| Classe | Zone | Valeur |
|---|---|---|
| .tr-pied | le pied | un trait pointillé en haut, pas de filet ; padding 0 en haut, 34 px en bas |
| .tr-pied .wrap | la cellule pâle | largeur min(100 % moins deux gouttières, 1184 px), fond --color-grinn-pale (#F5FAF5), un rail pointillé de chaque côté, padding 64 px clamp(20px, 3vw, 48px) 0 |
| .tr-pied__cellules i | les trois cellules allumées | 47 × 47 px : le coin haut droit en vert profond, 48 px plus bas et à gauche en vert, le coin bas droit en vert ; elles respirent en 3,6 s ; la deuxième disparaît sous 480 px |
| .tr-pied__cols | les colonnes | deux colonnes, 36 px d’écart ; dès 900 px : 1.4fr puis quatre fois 1fr |
| .tr-pied .logo | le logo | 34 px de haut, 18 px dessous (grinn-logo.svg, 160 × 34) |
| .tr-pied h3 | les titres de colonne | Outfit 700 clamp(18px, 1.45vw, 22px) / 1.25, -.035em, 18 px dessous : Offres, Grinn, Où nous sommes, Le groupe |
| .ft ul | les listes | 14,5 px, 9 px d’écart ; liens ink-3, encre au survol |
| .ft__legal | la ligne légale | 56 px au-dessus, 25 px de padding sous un trait pointillé, 12,5 px ink-3, 22 px entre les entrées : l’année, Mentions légales, Politique de confidentialité |
| Colonne | Contenu | Source |
|---|---|---|
| Le logo et la phrase | Agence web, mobile et IA à Nantes et Paris, pour les startups, les TPE et les PME. | V3.pied.texte |
| Offres | Site internet, E-commerce, Application mobile, Logiciel métier, IA et automatisation, Marketing digital | V3.offres.cartes, chaque nom vers /offres/<id>/ |
| Grinn | L’équipe, Réalisations, Le suivi, Crédit Impôt Innovation, Carrières, Contact | V3.pied.grinn |
| Où nous sommes | Nantes, Paris | MARQUE.villes |
| Le groupe | Grinn est une marque du groupe Hepix, avec Triptik et Panko. Puis le lien hepixgroup.com, avec sa flèche. | MARQUE.groupe.phrase et MARQUE.groupe.url |
Les points de rupture de l’en-tête
Le menu se resserre, puis se replie derrière un bouton ; le bouton d’en-tête perd sa flèche, puis passe dans le menu replié.
| Largeur | Ce qui change | Règle |
|---|---|---|
| 941 px et plus | le menu complet, 26 px entre les entrées, 32 px entre les blocs | .tr-hdr nav |
| 720 à 940 px | le menu reste affiché, resserré à 18 px ; le logo perd sa marge droite ; 16 px entre les blocs | .tr-hdr nav, .tr-hdr .hdr__logo, et la règle de base de .hdr__in sous 940 px |
| sous 720 px | le menu passe derrière un bouton « Menu » (details, sans script) : un panneau sous l’en-tête, les quatre entrées en Outfit 700 de 20 à 24 px séparées d’un trait pointillé, puis le bouton de contact en pleine largeur ; le bouton d’en-tête reste à côté | .tr-menu, .tr-menu nav, .tr-menu__trait |
| sous 480 px | le bouton d’en-tête disparaît : il est dans le menu replié | .tr-hdr .hdr__cta |
| 860 px et moins | le logo passe de 30 à 25 px | .hdr__logo |
| 379 px et moins | le bouton réduit : padding-inline 12 px, 11 px, .08em, flèche masquée | .tr-hdr .btn--sm |
| 339 px et moins | padding-inline 8 px, .06em | .tr-hdr .btn--sm |
Ce qui n’y est pas
Deux absences voulues, lues dans marque.ts et dans les composants.
| Quoi | Pourquoi | Où c’est écrit |
|---|---|---|
| Le numéro de téléphone | MARQUE.telephone vaut null : le vrai numéro n’a pas été communiqué, et on ne l’invente pas. EnTete.astro n’a pas de .hdr__tel, et le placeholder ne sert qu’aux pages du site précédent. | src/data/marque.ts, src/components/trame/EnTete.astro |
| Le logo signé du groupe | Le site pose le logo Grinn seul, en tête comme en pied (grinn-logo.svg). Le groupe se nomme en toutes lettres dans la cinquième colonne du pied, avec un lien ; sa signature, avec son tiret, ne s’écrit pas dans la copie visible. | src/data/marque.ts (groupe.signature), src/components/trame/Pied.astro |
| Le groupe dans l’en-tête | Le pied le nomme, jamais l’en-tête. | la décision « Le pied » de src/data/design.ts |
RègleL’en-tête dit quatre pages et une conversation, le pied nomme le groupe : rien d’autre n’y entre tant que ça n’existe pas.