/* ============================================================================= PAGE « LIENS » — le Linktree de Fabian, chez lui ============================================================================= Chargée UNIQUEMENT sur cette page (inc/liens.php), par-dessus style.css dont elle garde tout : la police, le noir, le vert, les curseurs dessinés, les masques. Il ne reste donc ici que la mise en page d'une colonne — c'est volontairement court. CE QUI DIFFÉRENCIE CETTE PAGE DU RESTE DU SITE Elle est lue au pouce, dans le navigateur intégré d'Instagram, par quelqu'un qui va cliquer sur une destination et repartir. Tout y est donc plus large, plus espacé et plus haut que sur une page ordinaire : les cibles doivent se toucher du premier coup, sans viser. ORDRE DES SECTIONS 1. La colonne 2. Boutons et titres dessinés 3. Réseaux sociaux 4. Grille de projets 5. Signature ============================================================================= */ /* ----------------------------------------------------------------------------- 1. LA COLONNE -------------------------------------------------------------------------- */ /* LE PIED FIXE N'EXISTE PAS ICI, SA PLACE RÉSERVÉE NON PLUS. `body` garde en bas la hauteur de la bande noire plus une gouttière blanche (style.css, section 2) : c'est ce qui empêche les bulles d'annotation de se poser par-dessus le dernier paragraphe. Ce gabarit n'appelle pas get_footer() — il n'y a ni bande, ni bulles, et cette réserve devient 128 px de vide sous la signature. Ça se voyait : la page mesurait 1516 px pour 1388 px de contenu. Sur une page courte, c'est pire — la réserve suffit à elle seule à faire apparaître une barre de défilement pour ne rien montrer. */ .fb-liens-page { padding-bottom: 0; } .fb-liens { /* UN SEUL FACTEUR POUR TOUTE LA COLONNE. Sur un grand écran, la colonne à sa taille de référence paraissait lourde : Fabian la voulait à 0,8 (24 septembre 2026). Plutôt que de retoucher chaque valeur — colonne, titres, logo —, on multiplie par un facteur unique. Tout rapetissit ensemble, et les proportions de la maquette sont conservées. Il vaut 1 par défaut, donc sur téléphone : là, la colonne est déjà bornée par la largeur de l'écran moins les gouttières, et la réduire une seconde fois laisserait des marges blanches inutiles sur un écran qui n'en a pas à revendre. Voir la bascule en fin de section. */ --fb-liens-echelle: 1; /* 26rem = 416px, la moitié de la largeur des PNG de Fabian (832px). Les boutons s'affichent donc exactement à leur demi-taille : nets sur un écran ordinaire, et encore nets sur un écran à forte densité, où chaque point logique consomme deux pixels du fichier. À 0,8 on tombe à 333px, et cette netteté-là ne se perd pas : on descend SOUS la demi-taille, donc le fichier contient toujours plus de pixels qu'il n'en faut. C'est l'inverse qui aurait posé problème. */ --fb-liens-l: calc(26rem * var(--fb-liens-echelle)); /* Les icônes de réseaux sont réglées à 26px dans :root pour le pied de page, où elles se posent dans les marges. Ici elles sont une rangée à part entière au milieu d'une colonne étroite : à 26px elles auraient l'air de miettes sous le logo. La variable est redéfinie sur le conteneur, donc sans effet ailleurs. Elles suivent le facteur, comme le reste : laissées à leur taille pleine dans une colonne réduite, elles occupaient 56% de sa largeur contre ~47% sur la maquette — la rangée se mettait à peser plus que les boutons. Le facteur ne les met pas en danger côté tactile, et c'est le partage qui tombe juste : il vaut 1 sur téléphone, là où l'on vise au doigt, donc les 30 à 36px y sont intacts. Sur grand écran, où l'on vise à la souris, les 28,8px obtenus restent au-dessus des 24px des WCAG — et c'est exactement la taille qu'elles ont déjà dans le pied de page du reste du site. */ --fb-reseau-l: calc(clamp(30px, 8vw, 36px) * var(--fb-liens-echelle)); --fb-reseau-ecart: calc(clamp(0.5rem, 2vw, 0.85rem) * var(--fb-liens-echelle)); display: flex; flex-direction: column; align-items: center; justify-content: center; /* `svh` et pas `vh` : sur mobile, `vh` se mesure sur la fenêtre SANS la barre d'adresse, qui est justement visible à l'arrivée. La page serait donc plus haute que l'écran au premier regard, et un début de défilement apparaîtrait là où il n'y a rien à faire défiler. */ min-height: 100svh; /* Gouttière de 16px minimum sur les côtés : en dessous, un bouton collé au bord est difficile à viser sur un téléphone tenu d'une main. */ padding: clamp(1.75rem, 6vw, 3rem) max(16px, 4vw); box-sizing: border-box; } .fb-liens__contenu { width: 100%; max-width: var(--fb-liens-l); text-align: center; } /* Le texte libre que Fabian écrirait entre deux boutons. Rien d'imposé : juste de quoi qu'il ne soit pas collé à ses voisins. */ .fb-liens__contenu > p { margin: 0.9rem 0; } /* ----------------------------------------------------------------------------- 2. BOUTONS ET TITRES DESSINÉS -------------------------------------------------------------------------- */ /* Les blocs « Bouton dessiné » ont une marge de 1.5em faite pour un article, où ils apparaissent seuls au milieu d'un texte. Empilés par six, cette marge fait une page qui ne tient plus sur un écran de téléphone. */ .fb-liens .fb-bloc-bouton { margin: clamp(0.4rem, 1.4vw, 0.6rem) 0; } /* LES TITRES SE RECONNAISSENT À CE QU'ILS NE SONT PAS DES LIENS. Un bloc « Bouton dessiné » sans adresse rend un et non un (inc/blocs.php). C'est exactement ce que sont les trois titres dessinés de la maquette — « @FABIANBRANAS.ART », « Me soutenir : », « Projets à découvrir : » — et le logo. On s'en sert pour leur donner le rythme d'un titre : de l'air au-dessus, presque rien en dessous, pour qu'ils appartiennent visiblement à ce qui les suit. Sans ça, un titre flotte à égale distance des deux groupes et ne dit plus lequel il annonce. `:has()` plutôt qu'une classe : Fabian fabrique ses blocs lui-même, il n'a aucune classe à poser et ne doit pas en avoir à connaître. */ .fb-liens .fb-bloc-bouton:has(> span.fb-bloc-bouton__lien) { margin-top: clamp(1.1rem, 4vw, 1.8rem); margin-bottom: clamp(0.3rem, 1vw, 0.5rem); } /* Le premier bloc de la page n'a personne au-dessus de qui s'écarter : la marge du conteneur s'en charge déjà. Écrit sur `> *:first-child` et non sur une classe précise, parce que ce premier bloc est le portrait de Fabian — un bloc « Image » du cœur — et qu'il pourrait redevenir autre chose le jour où il réorganise sa page. */ .fb-liens__contenu > *:first-child { margin-top: 0; } /* LE PORTRAIT DE FABIAN — un bloc « Image » ordinaire. Il n'est pas un bouton : il ne mène nulle part et n'a pas d'état de survol. Le poser en bloc Image lui rend ce que le bloc « Bouton dessiné » ne pouvait pas lui donner — une vraie vignette dans l'éditeur, un texte alternatif, et la poignée de redimensionnement que Fabian connaît. Sa taille est donc CELLE QU'IL CHOISIT dans l'éditeur, et on n'y touche pas : lui appliquer le facteur de réduction du grand écran reprendrait d'une main le réglage qu'on vient de lui donner de l'autre. */ .fb-liens .wp-block-image { margin: 0 0 clamp(0.3rem, 1vw, 0.5rem); } .fb-liens .wp-block-image img { margin-inline: auto; } /* Un bouton occupe toute la colonne. La largeur choisie dans l'éditeur reste le plafond — `max-width: 100%` est déjà dans style.css — mais on ne veut pas d'un bouton à 220px perdu au milieu d'une colonne de 416 parce que la valeur par défaut du bloc n'a pas été changée. */ .fb-liens .fb-bloc-bouton__lien { width: 100%; } /* …sauf les titres et le logo, qui gardent la taille réglée dans l'éditeur. Un titre étiré sur toute la colonne ferait un bandeau, et le logo, carré, deviendrait un carré de 416px de côté. */ .fb-liens .fb-bloc-bouton:has(> span.fb-bloc-bouton__lien) .fb-bloc-bouton__lien { width: calc(var(--fb-bouton-l, 220px) * var(--fb-liens-echelle)); margin-inline: auto; } /* LA RÉDUCTION NE S'APPLIQUE QU'À PARTIR DU MOMENT OÙ ELLE A UN SENS. En dessous de ~460px de fenêtre, la colonne n'atteint plus ses 416px : c'est la largeur de l'écran, moins les gouttières, qui décide. La rétrécir encore de 20% ne rendrait pas la page plus légère, seulement plus étroite au milieu de marges blanches — sur l'appareil qui a le moins de place à perdre. 480px est juste au-dessus de ce point de bascule (416 + deux gouttières de 4vw), arrondi. En dessous : le téléphone commande. Au-dessus : le facteur de Fabian s'applique, colonne, titres et logo ensemble. */ @media (min-width: 480px) { .fb-liens { --fb-liens-echelle: 0.8; } } /* ----------------------------------------------------------------------------- 3. RÉSEAUX SOCIAUX -------------------------------------------------------------------------- */ .fb-liens__reseaux { display: flex; justify-content: center; margin: clamp(0.6rem, 2.5vw, 1rem) 0 clamp(1rem, 4vw, 1.6rem); } /* La rangée est centrée ici, alors qu'elle est alignée à gauche dans le pied. `.fb-reseaux` est un flex : c'est son conteneur qui décide, elle n'a rien à savoir de l'endroit où on la pose. */ .fb-liens__reseaux .fb-reseaux { justify-content: center; } /* ----------------------------------------------------------------------------- 4. GRILLE DE PROJETS -------------------------------------------------------------------------- */ /* Trois colonnes, comme sur la maquette, et trois colonnes À TOUTES LES LARGEURS. C'est l'inverse de la grille du portfolio, qui se remplit toute seule (`auto-fill`) parce qu'elle occupe la pleine largeur de la page. Ici la colonne fait 416px au plus : `auto-fill` avec un minimum de 140px donnerait deux colonnes et demie, donc deux, donc des vignettes énormes et une rangée orpheline. Une grille de trois est une décision de mise en page, pas un calcul. */ .fb-liens__projets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.4rem, 2vw, 0.7rem); margin-top: clamp(0.3rem, 1vw, 0.5rem); } /* ----------------------------------------------------------------------------- 5. SIGNATURE -------------------------------------------------------------------------- */ .fb-liens__pied { margin-top: clamp(2rem, 8vw, 3.5rem); text-align: center; line-height: 1.35; } .fb-liens__signature, .fb-liens__annee { margin: 0; font-size: 0.85rem; letter-spacing: 0.04em; } /* L'année est un repère, pas une information : elle s'efface derrière le nom sans disparaître. 0.55 d'opacité sur du noir plein donne un gris autour de #737373, qui reste au-dessus du rapport de contraste 4.5:1 exigé sur fond blanc. */ .fb-liens__annee { opacity: 0.55; }