/* ==================================================================== * Fiona Lebre — LE TÉLÉPHONE * ==================================================================== * * UNE COMPOSITION, PAS UN REPLIEMENT. La home desktop est une page fixe * de 8 colonnes sur 7 rangs, validée au pixel. On ne l'adapte pas par * dégradation : on redessine une grille de 6 sur 10 avec ses propres * marges, et on n'y garde du desktop que ce qui a encore un sens. * * CE QUI RESTE, ET C'EST L'ESSENTIEL : le carrousel, sa physique, le * fondu en relais de la légende, la continuité vers la page projet. * Aucun de ces mécanismes n'est retouché ici — ils sont dans theme.css, * carousel.css et js/main.js, et cette feuille ne fait que les reloger. * * CE QUI DISPARAÎT : le SURVOL. Sur un écran tactile il n'existe pas, et * c'est lui qui pilotait les deux vues — l'index de la home, la planche * de contact du projet. Ce n'est pas une perte à compenser, c'est le * geste qui change de nature : on glisse (cf. js/mobile-gestures.js). * * -------------------------------------------------------------------- * UN SEUL MARKUP, ET C'EST NON NÉGOCIABLE. * * template-parts/home-content.php sert les quatre vues et reste intact. * Tout ce que Fiona saisit passe par lui ; deux rendus finiraient par * diverger sans que personne ne le voie, et les transitions reposent * justement sur le fait que la destination est déjà dans le document. * * D'où une conséquence élégante : LA NUMÉROTATION EST L'INDEX. Les * chiffres romains vivent déjà DANS les liens de l'index (cf. * .home-index-num). Il suffit donc de masquer les noms et de coucher les * chiffres en une rangée : on obtient le repère de position sans ajouter * une ligne de PHP, et sans dupliquer une donnée. Mieux, l'état du * projet courant est déjà géré — le chiffre étant dans le lien, il passe * au noir avec lui. * * -------------------------------------------------------------------- * LA HAUTEUR EST EN svh, ET C'EST LE PIÈGE PRINCIPAL DU MOBILE. * * 100vh vaut le GRAND viewport, celui qu'on aurait si l'interface du * navigateur était repliée — donc 874 sur un iPhone 16 Pro. Or la barre * d'adresse ne se replie qu'au défilement, et cette page ne défile * jamais : elle est verrouillée comme les trois autres vues. On est donc * en permanence dans le PETIT viewport, ~680, et une grille en 100vh * enverrait le rang 10 — la numérotation — 78px sous le pli. Invisible, * et sans barre de défilement pour le signaler. * * svh est exactement ce petit viewport. Et comme les rangs sont des * fractions, la composition se resserre ou se détend selon l'appareil * sans qu'aucune valeur ne soit à recalculer. * * Un navigateur trop ancien pour svh ignore simplement la déclaration et * retombe sur le 100vh de theme.css — c'est-à-dire le comportement * d'avant ce fichier. Dégradation, pas panne. * * -------------------------------------------------------------------- * LE SEUIL EST À 900px, ET CE N'EST PAS UN CHOIX D'APPAREIL. * * C'est le plancher de la composition desktop, mesuré : le titre le plus * long de l'index (« Midnight cosmetics », 106,8px) doit tenir dans une * colonne sur huit, ce qui demande 106,8 x 8 + 50 de marges = 905px. En * dessous, il déborde de sa piste et l'alignement sur « Info » se casse. * Le seuil suit donc ce que la mise en page peut contenir, pas le nom * qu'on donne à l'écran — une tablette en portrait reçoit cette feuille, * la même en paysage reçoit le desktop. * * À SAVOIR : ce plancher dépend des titres de Fiona. Un projet nommé plus * long le fait remonter, et l'index desktop se mettrait à serrer à 900. * * -------------------------------------------------------------------- * CHARGÉE EN DERNIER, APRÈS transition-project.css. * * Plusieurs règles d'ici ont exactement la même spécificité que les * siennes (body + deux classes) — notamment sur .fl-home-img, dont ce * fichier-là redéfinit déjà les retraits. À spécificité égale c'est * l'ordre de chargement qui tranche, donc la dépendance déclarée dans * functions.php n'est pas décorative. * ==================================================================== */ @media ( max-width: 900px ) { /* ------------------------------------------------------------------ */ /* 1. Le socle */ /* ------------------------------------------------------------------ */ /* ON REDÉFINIT LES TOKENS DE GRILLE, et le reste suit tout seul. .home-layout construit déjà ses pistes avec repeat(var(--grid-columns)) et repeat(var(--grid-rows)) : les passer à 6 et 10 suffit à changer la grille, sans réécrire une seule déclaration de template. --grid-margin passe à 20 pour les côtés. La marge HAUTE du header reste distincte (20 aussi : le titre se pose dans la bande de 80 que la grille laisse au-dessus d'elle, pas au milieu). Les marges verticales de la grille, elles, ne peuvent pas passer par ces tokens : .home-layout applique --grid-margin en bas et --grid-margin-top en haut, or il nous faut trois valeurs distinctes — 80 en haut, 0 en bas, 20 sur les flancs. D'où les tokens propres ci-dessous, et le padding réécrit plus bas. LE SOCLE COUVRE fl-home ET fl-about, et ce n'est pas de la prudence : c'est une correction de bug. js/about.js ne recharge pas la page quand on touche « Info » — il joue le pli sur place, et POUR FINIR IL ÉCHANGE LA CLASSE DU BODY : fl-home s'en va, fl-about arrive. Tout ce qui n'était accroché qu'à fl-home décrochait donc au milieu du geste. Constaté : « Overview » réapparaissait dans la nav, la grille repassait à 8 colonnes et la bio glissait de 20 à 25px de marge — la composition mobile entière se démontait en une demi-seconde. Les deux classes partagent donc tout ce qui décrit la PAGE, et seul ce qui décrit le CONTENU reste propre à chaque vue. */ body.fl-home, body.fl-about { --grid-columns: 6; --grid-rows: 10; --grid-margin: 20px; --grid-margin-top: 20px; --fl-m-side: 20px; /* 80 EN HAUT, RIEN EN BAS, et ce zéro est le résultat d'un calcul. La maquette portait 80px de marge basse pour contrer la barre de navigation du navigateur — sauf que 100svh l'a déjà retirée (c'est sa définition : la hauteur visible interface DÉPLOYÉE). Les garder revenait à payer deux fois le même espace. Et les retirer fait retomber la maquette au pixel sur l'écran réel : 80 + 10 rangs de 60 = 680, soit exactement le plan de 760 moins sa compensation. Le carton retrouve ses 332 x 390 et la boîte intérieure ses 241 x 299. Le rang 10 fournit lui-même l'air sous les romains — ils occupent 644 -> 656 dans un rang qui va de 620 à 680. Cette réserve est donc PROPORTIONNELLE : elle grandit avec l'écran au lieu d'être figée. */ --fl-m-top: 80px; --fl-m-bottom: 0px; /* LA COLONNE MOBILE, en pixels réels. Elle sert au passe-partout de la photo, qui se mesure en colonnes et non en pourcentage (cf. plus bas). Même procédé que --fl-col dans css/project.css : la grille raisonne en fractions, mais certaines mesures ont besoin de la valeur. */ --fl-col-m: calc( ( 100vw - 2 * var(--fl-m-side) ) / var(--grid-columns) ); /* LE RETRAIT DU CARTON dans le beige. Seul pixel dur de la composition avec les marges, et il est volontairement dur : c'est une épaisseur de carton, pas une proportion de page. */ --fl-mat-inset: 15px; /* svh et non vh — cf. le pavé d'en-tête. C'est la correction la plus importante de ce fichier. */ height: 100svh; /* Pas de rebond élastique. La page ne défile pas ; sans ça, un glissement vertical fait tirer tout le document et le geste de navigation entrerait en concurrence avec le caoutchouc du navigateur. */ overscroll-behavior: none; } /* La barre d'admin fait 46px sous 782px de large (cf. theme.css, qui applique la même correction en vh). Ne concerne que Fiona connectée. */ body.fl-home.admin-bar, body.fl-about.admin-bar { height: calc( 100svh - 46px ); } /* ------------------------------------------------------------------ */ /* 2. Le header redevient une ligne */ /* ------------------------------------------------------------------ */ /* EN FLEX ET NON EN GRILLE, parce que la grille n'a plus que 6 colonnes. theme.css cale le titre sur « 1 / 8 » et la nav sur « 8 / -1 » : avec six pistes ces deux valeurs sortent de la grille et le navigateur fabrique des colonnes implicites pour les loger. Le header partait donc en morceaux. Un space-between dit exactement ce qu'on veut — un bord, l'autre bord — et ne dépend d'aucun nombre de colonnes. */ body.fl-home .site-header, body.fl-about .site-header { display: flex; justify-content: space-between; align-items: baseline; padding: var(--grid-margin-top) var(--fl-m-side) 0; } body.fl-home .site-title, body.fl-home .site-logo, body.fl-home .site-nav, body.fl-about .site-title, body.fl-about .site-logo, body.fl-about .site-nav { grid-column: auto; } /* OVERVIEW DISPARAÎT DU TÉLÉPHONE. La mosaïque est une vue à survoler et à viser ; au doigt, sur 402px, elle donnerait des tirages de 60px. Le site se réduit donc à deux entrées : les projets, et Info. Ciblé par l'ADRESSE et non par la position, parce que « le deuxième item » ne veut rien dire et se casserait si l'ordre changeait. La contrepartie est que ce sélecteur connaît le permalien de l'archive : si le slug /overview/ change un jour, cette règle cesse de mordre en silence. À remplacer par une classe posée côté PHP la prochaine fois qu'on touche à fl_default_nav_fallback(). */ body.fl-home .site-nav li:has( a[href$="/overview/"] ), body.fl-about .site-nav li:has( a[href$="/overview/"] ) { display: none; } /* Le space-between du