/* ============================================================================= La mise en page d'une section en liste : l'en-tete, la barre de recherche qui colle, le panneau de filtres, la ligne de compte et la zone de la grille. Ces regles etaient ecrites dans css/ressources.css, pour la seule page Ressources. Le Bazar prend la meme composition — meme fil, meme titre, meme barre, memes filtres, meme grille — et deux copies auraient cesse de dire la meme chose au premier reglage. Elles vivent donc ici, une fois. Une page qui s'en sert la charge APRES la charte (tools/assets/css/style.css) et AVANT sa propre feuille : ce qui lui est particulier passe apres et l'emporte, exactement comme avant le demenagement. Les classes, posees a cote de celles de la page : .liste-bandeau le fond de l'en-tete, d'un bord a l'autre .liste-entete le .hub qu'il contient .liste-alertes les bandeaux d'alerte, au-dessus de la barre .liste-controls le conteneur collant de la barre de recherche .liste-souslabarre le panneau de filtres et la ligne de compte .liste-zone la colonne de la grille, pour une page neuve Les commentaires qui suivent ont ete ecrits sur Ressources, ou chaque valeur a ete mesuree ; ils valent pour toute page qui reprend la composition. ============================================================================= */ /* ---------- ce que la charte suppose, et qui ne vaut pas ici --------------- .archiverse-search porte min-height: 60vh et un fond. C'est juste pour un conteneur qui tient toute une page. Ici la charte habille des morceaux, et chacun heritait de six dixiemes de la hauteur de l'ecran et d'un aplat : un en-tete trainait cinq cents pixels de vide. */ .liste-entete, .liste-controls, .liste-alertes { min-height: 0; background: transparent; } /* L'en-tete porte a la fois le conteneur de la charte et .hub, qui se donne 100 % de largeur et une gouttiere. Or la charte ne met en « border-box » que les DESCENDANTS de .archiverse-search : l'element lui-meme restait en « content-box », et sa gouttiere s'ajoutait a sa largeur — quatre-vingts pixels de debord a droite, coupes sans bruit par overflow-x: clip. Mesure sur le Bazar : un fil d'Ariane de 1264,7 pixels dans une colonne de 1184,7. Ressources y echappait par une feuille plus ancienne qu'elle charge seule. */ .liste-entete { box-sizing: border-box; } /* La barre du site ne suit pas le defilement, comme dans Outils et Logiciels. Une seule barre accompagne la lecture dans cette section : celle du mode. La barre de navigation, elle, s'en va avec le haut de page — sinon trois bandeaux s'empilent et mangent cent quatre-vingts pixels d'ecran des qu'on descend. Consequence directe : la barre de mode se cale a zero et non a soixante, et la barre de recherche juste en dessous. C'est ce que dit --barre-mode-top, que tools/assets/css/outils.css pose deja de la meme facon pour les pages Outils et Logiciels. */ body:has(.liste-bandeau) nav.main-menu.is-sticky { position: relative; } body:has(.liste-bandeau) { --barre-mode-top: 0px; } /* Et il faut rendre le defilement au document, sans quoi rien ne colle ici. L'en-tete pose overflow-x: hidden sur html et body. Ce reglage fait d'eux des boites de defilement, ce qui annule position:sticky pour tous leurs descendants — la barre de recherche ci-dessous comprise. « clip » coupe le debordement horizontal de la meme facon sans creer cette boite. Outils et Logiciels s'en tirent parce que leur feuille pose deja la meme ligne ; Ressources ne la charge pas. Restait celle de css/barre-mode.css, mais elle est conditionnee a la presence de la barre de mode — laquelle n'est ecrite que pour le compte fondateur. La barre de recherche collait donc pour lui seul, et defilait avec la page pour tout le monde. Les deux declarations sont volontaires : un navigateur qui ignore « clip » garde « hidden » et son ancien comportement plutot qu'aucun des deux. */ body:has(.liste-bandeau) { overflow-x: hidden; overflow-x: clip; } /* ---------- le bandeau du haut -------------------------------------------- Le fond court d'un bord a l'autre de la fenetre, le contenu s'arrete a la colonne. C'est la seule facon d'eviter les deux bandes grises qui bordaient l'aplat clair : un fond limite a 1320 pixels laisse forcement voir la page derriere lui des que l'ecran est plus large. Le de cette page est par ailleurs un conteneur flex, ou un enfant prend par defaut la largeur de son contenu. D'ou le width: 100% : sans lui, le bandeau se reglait sur son texte. */ .liste-bandeau { width: 100%; flex: 0 0 auto; /* Le meme fond que la grille en dessous : dans Outils et Logiciels, l'en-tete et les cartes partagent le fond de page, seul le filet les separe. Un bandeau plus clair aurait fait un troisieme ton. */ background: var(--bg); border-bottom: 1px solid var(--line); } /* Le conteneur porte .hub : la charte lui donne sa largeur, sa gouttiere et son rembourrage — clamp(1.8rem, 4vw, 3rem) en haut, soit quarante-huit pixels sur un grand ecran. J'y avais mis 1.6rem, vingt-cinq pixels : la page commencait vingt-deux pixels plus haut que Outils et Logiciels, un decalage qu'on voit en passant d'un onglet a l'autre sans savoir le nommer. Ce n'etait pas la barre de mode, identique sur les trois pages — elle finit a cent vingt pixels partout. Le fil, le titre et l'accroche viennent eux aussi de la charte. Les redefinir ici revenait a fabriquer une seconde nomenclature pour le meme objet, et les trois sous-sections cessaient de se ressembler. */ .liste-entete .hub__lead { margin-bottom: 0; } /* ---------- barre de recherche -------------------------------------------- */ /* Le conteneur de la barre court d'un bord a l'autre — un bandeau colle qui s'arreterait a la colonne laisserait passer le contenu sur ses cotes. C'est .controls__inner qui tient la colonne, avec les memes variables que l'en-tete : celles de la charte, et non celles de la barre de navigation. Elles valent la meme chose aujourd'hui, mais deux blocs qui doivent s'aligner ne peuvent pas dependre de deux sources. */ .liste-controls { width: 100%; flex: 0 0 auto; } /* Les bandeaux d'alerte, au-dessus de la barre et non dedans : sans ce bloc ils héritaient du position:sticky du conteneur de la barre. */ .liste-alertes { width: 100%; flex: 0 0 auto; } /* Le panneau de filtres et le compteur, sous la barre et non dedans. */ .liste-souslabarre { width: 100%; flex: 0 0 auto; min-height: 0; background: transparent; } /* Le compteur tient la colonne : c'est du texte, pas un bandeau. width: 100% est indispensable ici. Son parent est en flex-column, ou un enfant sans largeur se dimensionne sur son contenu ; « margin-inline: auto » centrait donc une boite de cent quatre-vingt-douze pixels au milieu de l ecran, et le texte commencait a sept cents pixels du bord au lieu de soixante-dix-sept. Avec une largeur explicite, la marge automatique centre la colonne de mille trois cent vingt et le texte se cale a son bord gauche, sur la meme verticale que le titre, la barre et les cartes. */ .liste-souslabarre .resultcount { width: 100%; max-width: var(--maxw, 1320px); margin-inline: auto; padding-inline: var(--gut, clamp(1rem, 3.2vw, 2.5rem)); } /* La barre suit le defilement, comme celle de la bibliotheque Logiciels, avec son filet au-dessus et son filet en dessous. Je lui avais retire les deux et l'avais figee en position statique, la croyant a sa place dans le bandeau d'en-tete. Elle n'y avait de toute facon aucune course : un element colle ne depasse jamais la boite de son parent, et ce parent ne faisait que sa propre hauteur. Elle est donc sortie du bandeau, qui ne porte plus que le titre, et c'est son conteneur qui colle — le panneau de filtres et le compteur ont suivi dans un bloc a part, sans quoi ils seraient restes epingles avec elle. Le fond translucide et le flou d'arriere-plan viennent de la charte : le contenu qui passe dessous se devine sans se lire, ce qui dit que la page defile encore. */ .liste-controls { position: sticky; z-index: 40; background: color-mix(in srgb, var(--bg) 93%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid var(--line); } /* Ou elle s'arrete en montant : sous la barre de mode quand il y en a une, tout en haut sinon. La barre du site etant repassee en flux juste au-dessus, elle ne compte plus. */ .liste-controls { top: 0; } body:has(.barre-mode) .liste-controls { top: var(--hauteur-barre-2, 52px); } /* Le bandeau ne porte plus que le titre : son filet du bas ferait double emploi avec celui du haut de la barre, a deux pixels l'un de l'autre. */ .liste-bandeau { border-bottom: 0; } .liste-controls .controls { position: static; background: transparent; border: 0; min-height: var(--hauteur-barre-2, 52px); } .liste-controls .controls__inner { padding-inline: var(--gut); } /* Sur telephone, il passe a DROITE du champ, contre le bouton des filtres. La ligne compte trois elements et l'ecran ne les loge pas de front : a 375 pixels, les deux boutons reduits a leur icone en prennent quatre-vingt-huit et le champ tombait a deux cent trente-neuf, ou son texte d'invite se coupait — « Chercher une ecole, u… ». Le champ prend la ligne, les deux boutons se rangent apres lui : ils font le meme carre et se lisent alors comme une paire, la ou le « + » isole a gauche avait l'air d'un troisieme objet sans rapport. Un simple « order » sur le champ : les deux boutons gardent leur ordre de source, donc le « + » avant les filtres. Rien ne bouge dans le HTML, ou l'ordre de lecture — contribuer, chercher, filtrer — reste celui du grand ecran, et c'est aussi celui que suit la tabulation. Meme seuil que le passage en icones seules (720 px, dans la charte) : les deux etats sont le meme, il ne faut pas qu'ils se separent. */ @media (max-width: 720px) { .liste-controls .searchrow > .search { order: -1; } /* Le bandeau devient opaque et perd son flou. Le flou ne rendait rien : le fond du bandeau est celui de la page a sept pour cent pres, et sur iOS Safari « backdrop-filter » laisse un lisere gris sous l element — l ombre qu on voyait sous la barre de recherche au telephone, et nulle part ailleurs. Un fond plein donne exactement la meme couleur au repos, et cache franchement les cartes qui passent dessous au defilement plutot que de les laisser transparaitre. */ .liste-controls { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Le panneau de filtres reprend le blanc de la charte — .panelfilters pose --surface et un filet en bas, comme dans Logiciels. Je l'avais rendu transparent et sans bordure, ce qui le laissait flotter sur le fond de page : rien ne disait ou il commencait ni ou il finissait. Il court d'un bord a l'autre, son interieur tenant la colonne : un aplat arrete a mille trois cent vingt pixels laisse voir la page sur ses cotes, et l'ouverture des filtres ressemble alors a une carte posee de travers. */ .liste-souslabarre .panelfilters { margin-top: 0; } /* Le compteur ne redefinit plus rien : la charte lui donne .84rem, --text-2 et une marge basse de .9rem, exactement comme dans Logiciels. Je lui avais mis .82rem, --text-3 et une marge haute — trois valeurs differentes pour le meme objet a deux onglets d'ecart. L'ecart qui le separe de la barre vient du bloc qui le porte, comme la section .results de Logiciels porte le sien. */ .liste-souslabarre .resultcount { margin-top: 1.2rem; } /* ---------- la zone de la liste --------------------------------------------- Pour une page qui part de zero. Ressources garde son #entityZone, herite d'un ancien volet ; une liste neuve pose .liste-zone autour de sa grille : la colonne de la charte et sa gouttiere, sans rien de ce qu'un conteneur de page impose — ni fond, ni hauteur minimale. La grille garde sous elle la place du pied de liste, comme #search-results dans Ressources ; un etat vide occupe toute sa largeur. */ .liste-zone { box-sizing: border-box; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); min-height: 0; background: transparent; } .liste-zone > .grid { padding-bottom: 4rem; } .liste-zone > .grid > .empty { grid-column: 1 / -1; }