/* ═══════════════════════════════════════════════════════════════════════════ * EL MARC — la portada com una app, no com un document * * Aquesta fulla NO restil·la res: canvia el MODEL. Fins avui la portada era una * pila de seccions i la composició era una SUMA: cada bloc hi posava la seva * alçada i el total era el que sortís, amb els errors acumulant-se cap avall. * Per això es podia mesurar bé i veure's malament. * * Aquí l'alçada total està DONADA —la de la finestra— i cada peça n'ocupa una * fracció. La proporció deixa de ser una cosa que s'intenta clavar i passa a * ser com està construït: s'ancora a dalt i a baix alhora. * * ┌───────────────────────────────────────────┐ * │ cintell d'avisos │ ESTÀTIC (auto) * │ capçalera amb el menú │ * ├─────────────────────────┬─────────────────┤ * │ zona obertura │ zona agenda │ ES MOU PER DINS (1fr) * │ │ │ * ├─────────────────────────┴─────────────────┤ * │ dock · Què t'hi trobaràs │ REPLEGAT / DESPLEGAT (auto) * ├───────────────────────────────────────────┤ * │ banda verda amb l'eslògan │ ESTÀTIC (auto) * └───────────────────────────────────────────┘ * * LES MIDES DE DINS NO ES TOQUEN. Tot el que hi ha a la secció «LA RÈPLICA 1:1 * DEL DIARI» de `components.css` surt de llegir els estils en línia de la * referència, i segueix manant. El que aquesta fulla aporta és el contenidor. * ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── * 1. L'APARELL * ─────────────────────────────────────────────────────────────────────────── */ .afa-te-marc { --marc-marge: 20px; --marc-radi: 18px; /* * ── EL CANALÓ: LA DISTÀNCIA ENTRE LA VORA DEL MARC I EL CONTINGUT ─────── * * Tot el que toca la vora del marc —el cintell, la capçalera, les dues * zones, el dock i el peu— comença aquí. Era un 24 escrit SIS vegades, i el * resultat és el que sempre passa amb un número repetit: no és que un dia * se'n canviï un i no els altres, és que ja havien divergit i no ho deia * res. Mesurat abans de tocar-ho, el marc tenia TRES canalons alhora —a * 520px, 24 al cintell, 0 a la capçalera i 18 a les zones— i cap número es * queixava, perquè cada peça complia la seva pròpia regla. * * La capçalera era el cas lleig i la causa era meva: `.afa-capcalera__fila` * porta també `.afa-ample`, així que el `padding-inline: 0` amb què el marc * desfà la columna centrada li esborrava el coixí. `.afa-te-marc .afa-ample` * pesa dues classes i `.afa-capcalera__fila` una: guanyava sense discussió i * el logotip quedava enganxat a la vora amb tota la resta a 24. * * El que s'ha de desfer de `.afa-ample` dins del marc és el `max-width` i el * centrat —el marc JA fa 940—, mai el coixí. Ara el posa, i surt d'aquí. */ --marc-canal: 24px; /* * ── EL CINTELL, MÉS PRIM ───────────────────────────────────────────────── * * Petició de David amb la maqueta al davant: «la barra superior la quiero un * poco más estrecha, porque me parece muy gruesa». Passa de ~36px a ~30. * * Va com a token i no com un número escampat: si torna a semblar gruixuda —o * massa prima— es canvia aquí i prou. `align-items: center` perquè en * encongir-la, l'etiqueta i el text deixen de quadrar per si sols. * * Viu aquí i no en un segon bloc `.afa-te-marc` mil línies més avall, que és * on era: dos blocs amb el mateix nom fan que llegir-ne un no digui com es * pinta, i és el defecte que aquest projecte té anotat com «la cara B». */ --marc-cintell-coixi: 5px; /* * ── EL RITME VERTICAL D'UNA SECCIÓ, DINS DEL MARC ──────────────────────── * * `--afa-seccio` val `clamp(40px, 6vw, 72px)` a `tokens-base.css`, i està bé * per a una pàgina que es recorre: allà l'aire entre seccions és el que * separa un tema del següent i el total de la pàgina és el que surti. * * Dins del marc l'alçada està DONADA. A 1280 la zona d'una pàgina interior * en té unes 470, així que 72 a dalt i 72 a baix de la primera secció són * 144 —un terç llarg de tot el que es veu— gastats en blanc abans del * titular. Es redueix a la meitat justa. * * Va com a token i AQUÍ, dins de l'únic bloc `.afa-te-marc` del full: un * segon bloc amb el mateix nom mil línies més avall és el defecte que aquest * projecte té anotat com «la cara B», i aquesta fulla ja el va pagar una * vegada amb el coixí del cintell. */ --afa-seccio: clamp(20px, 3vw, 34px); /* * LA FINESTRA NO ES DESPLAÇA. És tota la idea: el que es mou és el contingut * DINS dels seus límits, no la pàgina sota una capçalera enganxada. * * `overflow: hidden` i no `position: fixed` al marc: amb `fixed`, el teclat * d'un mòbil redimensiona el viewport i la banda de baix acaba tapant el camp * que s'està omplint. Amb l'alçada dinàmica i `hidden`, el marc s'encongeix * amb el viewport i el camp continua sent visible. */ overflow: hidden; background: var(--afa-taula); } /* * `.wp-site-blocks` és l'embolcall que posa WordPress a tot el que hi ha a la * plantilla, i per això és l'aparell: no cal cap `
` de més ni cap peça del * tema que l'envolti. Ja portava vora i cantonades des de la rèplica 1:1 —això * és el que jo havia descartat com «el fons de la taula» i era el marc. * * L'alçada descompta la barra d'administració de WordPress quan hi és: sense * això, en veure el lloc amb la sessió oberta la banda verda queda 32px fora. */ .afa-te-marc .wp-site-blocks { display: grid; /* * LA COLUMNA S'HA DE DECLARAR, i oblidar-ho va costar una portada de 1500px. * * Una retícula amb files i sense columnes es queda amb UNA columna implícita * de mida `auto`, o sigui que s'estira fins al contingut més ample que * porti a dins. La marquesina d'avisos duplica la llista a propòsit, així que * mesurava 1500px i se'n va emportar les tres bandes: el marc feia 940 i el * que hi havia a dins, 1500, retallat per `overflow: hidden` sense que res * es queixés. `minmax(0, 1fr)` obliga la columna a ser la de la retícula. */ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; width: min(var(--afa-ample), calc(100vw - var(--marc-marge) * 2)); height: calc(100dvh - var(--marc-marge) * 2 - var(--wp-admin--admin-bar--height, 0px)); margin: var(--marc-marge) auto; border: 1px solid var(--vora); border-radius: var(--marc-radi); overflow: hidden; background: var(--fons); } /* ─────────────────────────────────────────────────────────────────────────── * 2. LES DUES BANDES ESTÀTIQUES * ─────────────────────────────────────────────────────────────────────────── */ .afa-marc__dalt, .afa-marc__baix { flex: none; } /* * El cintell d'avisos i la capçalera formen UNA sola peça estàtica. * * David les va nomenar «el contenedor estático de navegación absoluta y * limitada», i la capçalera hi entra per força: és el menú que canvia les * zones. Un menú que es desplaça amb el contingut que ell mateix governa no és * un menú d'app. */ /* * `z-index: 3` i no 2, i el motiu és el desplegable del menú. * * `position: relative` crea una pila pròpia, així que el desplegable del bloc * de navegació —que és `fixed` i hauria de tapar-ho tot— queda ATRAPAT en * aquesta pila i no pot passar per damunt de la banda verda, que és germana * seva i va al 2. Es veia obrint el menú: els sis enllaços a sobre i el peu * intacte a baix, com si el desplegable s'hagués quedat curt. * * L'escala del marc queda: cos 0 · dock 1 · banda de baix 2 · banda de dalt 3. */ .afa-marc__dalt { position: relative; z-index: 3; } /* * La banda de baix. A la referència porta l'eslògan DIBUIXAT a l'esquerra i el * contacte a la dreta, i prou: els quatre grups d'enllaços del peu llarg són * d'una pàgina que es recorre, i aquí el seu lloc és el dock. */ .afa-marc__baix { position: relative; z-index: 2; background: var(--banda); } .afa-marc__baix .afa-peu-marca { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--marc-canal); } .afa-marc__baix .afa-peu-marca__eslogan { height: 36px; width: auto; display: block; } /* * Els enllaços del peu dins de la banda. * * Van a la MATEIXA columna que el contacte, no a una tercera: la banda té tres * peces i `space-between` amb tres les separa als extrems i deixa un forat al * mig. Amb l'embolcall, la marca es queda a l'esquerra i el bloc de text a la * dreta, que és com estava dibuixada. */ /* * Els enllaços van a la DRETA, al mateix nivell que el dibuix de la marca. * * La banda tenia tres peces apilades al mòbil —marca, correu i enllaços— i * feia 105px d'alt: «el peu verd queda ENORME així». Ara en són dues i es * queden en fila a qualsevol amplada, que és el que demanava David: «col·loca * el logo a l'esquerra i, al seu mateix nivell a la dreta, avís legal i * privacitat». */ .afa-marc__baix .afa-peu-marca__enllacos { font-size: 11.5px; color: var(--banda-tinta); justify-content: flex-end; } .afa-marc__baix .afa-peu-marca__enllacos a { color: var(--banda-tinta); } /* ─────────────────────────────────────────────────────────────────────────── * 3. EL COS: el taulell i el dock * ─────────────────────────────────────────────────────────────────────────── */ /* * `minmax(0, 1fr)` a la fila del taulell, i no `1fr` a seques. * * Una pista `1fr` té mida mínima automàtica, o sigui que no baixa del contingut * que porta a dins. Amb quatre dates i un formulari, això vol dir que la fila * creix fins que el conjunt sobreïx del marc i la banda verda se'n va per sota * de la finestra — el defecte clàssic i el que fa que «no es desplaça res» es * converteixi en «no s'arriba al peu». Amb `minmax(0, …)` la pista sí que pot * ser més curta que el seu contingut, que és el que permet que la zona * desbordi per dins. */ .afa-marc__cos { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: 0; background: var(--fons); } .afa-marc__taulell { display: grid; /* * 1,92 : 1. Surt de la referència: la línia divisòria hi cau al 65,7 % de * l'amplada. No és una fracció «rodona» i per això està escrita amb decimals * en comptes d'aproximar-la a 2:1, que desplaçaria la divisòria 12px. */ grid-template-columns: minmax(0, 1.92fr) minmax(0, 1fr); min-height: 0; } /* * ── LA ZONA ────────────────────────────────────────────────────────────── * * Cada zona és una àrea de navegació autònoma: es mou per dins i no arrossega * les altres. És el que permet que prémer «Calendari» canviï la columna dreta * sense tocar el bloc d'obertura. * * `overscroll-behavior: contain` perquè arribar al final d'una zona no continuï * desplaçant res de fora: dins d'un marc que no es desplaça, aquest rebot és * exactament el gest que fa saltar el navegador a la pàgina anterior en un * mòbil. */ .afa-zona { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px var(--marc-canal) 24px; scrollbar-width: thin; } .afa-zona--agenda { border-left: 1px solid var(--vora); } /* Mentre arriba el tros nou, la zona s'apaga una mica. No es buida: buidar-la ensenyaria un forat i faria saltar l'alçada. */ .afa-zona[data-carregant] { opacity: .45; transition: opacity .12s linear; } /* Dins de la zona, el hero i el lateral ja no posen coixí: el posa la zona. */ .afa-te-marc .fmt-diari .afa-hero, .afa-te-marc .fmt-diari .afa-diari__aside { padding: 0; } /* ─────────────────────────────────────────────────────────────────────────── * 4. EL DOCK * * La caixa blanca dels sis serveis, a sobre de la banda verda. * * ── REPLEGAT PER DEFECTE, I ÉS EL QUE ES GUANYA ──────────────────────────── * * Desplegat ocupa uns 144px del taulell. Replegat en deixa 55, o sigui que el * taulell guanya ~90px d'àrea útil — que en un marc de 818px és un 11 % més de * superfície de treball sempre que no s'estigui fent servir l'índex. És la idea * que va proposar David: «que se comporte como el dock de macOS». * * ── DESPLEGAT ÉS EXACTAMENT LA REFERÈNCIA ────────────────────────────────── * * La captura que la junta ha aprovat té el dock OBERT. Així que la fidelitat * 1:1 es mesura amb el dock obert: mides, columnes, regles i separacions són * les de la imatge. Replegat no és una versió diferent del disseny; és el * mateix disseny amb l'índex tancat. * * ── ENCONGEIX, NO TAPA ───────────────────────────────────────────────────── * * En obrir-se, el taulell es fa més curt i les zones ensenyen menys. NO és el * mateix que recompondre: el hero no torna a partir les seves dues columnes ni * les dates es reorganitzen, perquè el que canvia és la finestreta, no el * contingut. Si el dock se superposés, les tres xifres del peu de l'agenda * quedarien amagades sota seu de manera permanent. * ─────────────────────────────────────────────────────────────────────────── */ .afa-dock { background: var(--superficie); border-top: 2px solid var(--tinta); position: relative; z-index: 1; /* * El temps del desplegament viu aquí i el llegeix `marc.js` * (`--dock-temps`): així no hi ha dos números que s'hagin de tocar alhora. * Recollir va més ràpid que desplegar a propòsit — el que s'ha de treure * del mig no s'ha de mirar. La variant de tancar és a la secció 4bis. */ --dock-temps: 260ms; /* * ── I UNA CORBA PRÒPIA, QUE VA SORTIR DE MESURAR-HO ────────────────────── * * `--afa-corba` —`cubic-bezier(.16, .8, .24, 1)`, la del lloc— està feta per * al revelat, que dura 0,8 s. Posada aquí NO serveix, i es veu amb el * fotograma a fotograma del desplegament: a 20 ms ja havia fet el **68 %** * del camí i els 200 ms restants són un pòsit que gairebé no es veu. O * sigui, el salt d'abans amb cua — exactament el que veníem a treure. * * Mesurat el mateix dia, amb el mateix marc i els mateixos 260 ms, quant * s'ha recorregut a cada quart del temps: * * 20ms 65ms 130ms 195ms 260ms * --afa-corba 68 % 84 % 96 % 100 % 100 % ← un salt i una cua * .4, 0, .2, 1 13 % 42 % 86 % 98 % 100 % ← la meitat al mig * * La segona reparteix el moviment: arrenca amb calma, es mou i s'atura. És * la corba estàndard de qualsevol superfície que creix, i és la que hi ha. * No es toca `--afa-corba`: canviar-la mouria el revelat de tot el lloc. * * EL NÚMERO JA NO VIU AQUÍ. Des que les bandes es pleguen (§6bis) el * necessiten dos, així que és `--afa-corba-superficie` a `tokens-base.css` i * aquí només se li posa el nom local. La mesura de dalt és la que el va * decidir i per això es queda escrita on es va fer. */ --dock-corba: var(--afa-corba-superficie); } .afa-dock__nansa { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 25px var(--marc-canal) 16px; cursor: pointer; list-style: none; /* Firefox */ user-select: none; } /* El triangle del navegador. Es treu perquè la peça ja diu que s'obre amb la seva pista de la dreta, i perquè un marcador nadiu no es pot alinear amb una etiqueta de 10,5px sense que sembli una errata. */ .afa-dock__nansa::-webkit-details-marker { display: none; } .afa-dock__nansa::marker { content: ''; } .afa-dock__etiqueta { font-size: 10.5px; letter-spacing: .16em; } /* La pista de la dreta canvia amb l'estat: tancat convida, obert acomiada. */ .afa-dock__pista { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--enllac); } .afa-dock[open] .afa-dock__pista { color: var(--afa-tinta-3); } .afa-dock__cos { padding: 0 var(--marc-canal) 26px; } /* * Columnes de debò i no una retícula de dues columnes. * * `columns: 2` reparteix per COLUMNES —01·02·03 a l'esquerra i 04·05·06 a la * dreta—, que és l'ordre de la referència. Una retícula de dues columnes * repartiria per FILES (01·04 / 02·05 / 03·06) i canviaria l'ordre de lectura * sense que es noti fins que algú busca el sisè. */ .afa-dock__llista { columns: 2; column-gap: 30px; margin: 0; padding: 0; list-style: none; } /* * UNA SOLA DECLARACIÓ, i abans n'hi havia TRES. * * Estaven escampades pel full: aquesta, un `position: relative` cent línies * més avall —posat per poder estirar l'enllaç per tota la fila— i un * `line-height: 1.35` a la secció de les correccions del format. Cap estava * «malament» i el resultat sortia bé per la cascada, que és el pitjor: llegir * aquest bloc no deia com es pinta una fila del dock. * * És la cara B de «res s'escriu dues vegades», la mateixa que va deixar cada * pestanya de Gestió dins d'una caixa crema. Ara tot el que defineix una fila * és aquí, amb el motiu de cada declaració al costat. */ .afa-dock__servei { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--vora); /* Que una fila no es parteixi entre les dues columnes. */ break-inside: avoid; /* L'àncora de l'enllaç estirat de més avall (`.afa-dock__enllac::after`). */ position: relative; /* La fila fa 38px a la referència. Amb la interlínia del cos (1,6) en feia 46, i sis files són 48px de dock que no hi ha a la imatge. */ line-height: 1.35; } /* La regla de dalt de cada columna: la porta la primera fila de cada una. */ .afa-dock__servei:nth-child(1), .afa-dock__servei:nth-child(4) { border-top: 1px solid var(--vora); } .afa-dock__num { font-size: 11px; font-weight: 800; color: var(--enllac); flex: none; width: 20px; } .afa-dock__dada { font-size: 12px; color: var(--tinta-2); margin-left: auto; text-align: right; } .afa-dock__enllac { font-size: 14px; font-weight: 700; color: var(--tinta); text-decoration: none; /* * L'enllaç cobreix la fila sencera. `::after` estirat i no un `` que * embolcalli tot el contingut: així el número i la dada segueixen sent text * al costat i no part del nom de l'enllaç que llegeix un lector de pantalla * —«01 Extraescolars 11 activitats» no és el nom de cap pàgina. */ } .afa-dock__enllac::after { content: ''; position: absolute; inset: 0; } .afa-dock__servei:hover { background: var(--fons); } .afa-dock__servei:hover .afa-dock__enllac { color: var(--enllac); } /* * ── EL DESPLEGAMENT I LA RECOLLIDA ───────────────────────────────────────── * * Aquí hi deia que l'alçada del dock SALTA i que s'acceptava, amb el dock de * macOS com a excusa. Ja no s'accepta: David ho va mirar amb el ratolí i el * canvi d'estat li va semblar «instantáneo y muy drástico». Tenia raó, i els * números ho diuen — el contingut entrava en 0,22 s i el dock passava de 60,8 * px a 258,5 d'un fotograma al següent. I en tancar-se no hi havia RES: un * `
` treu el seu contingut del flux al mateix fotograma, així que la * meitat del gest no existia. * * ── L'ALÇADA ES MESURA, NO S'INTERPOLA ───────────────────────────────────── * * Hi ha quatre maneres d'animar l'alçada d'un `
` i tres no serveixen * AVUI, que és l'únic que compta: * * · `interpolate-size: allow-keywords` amb `height: auto` — Chrome 129+ i * prou. Ni Safari ni Firefox. On no hi és, no hi ha animació. * · `::details-content` amb `content-visibility` i `transition-behavior: * allow-discrete` — Chrome 131+. El mateix cas, i més nou encara. * · `grid-template-rows: 0fr → 1fr` sobre un embolcall — suport de sobres, * però dins d'un `
` el contingut viu a `::details-content` als * Chrome nous i a un slot als vells: l'arbre de caixes canvia segons la * versió del navegador, i aleshores la retícula no cau on es creu. És * exactament la fragilitat que no volem. * · **L'alçada mesurada amb JavaScript i una transició de CSS** — funciona a * tot arreu perquè no depèn de cap novetat. És la que hi ha. * * `marc.js` mesura el cos, escriu `height` i `padding-bottom` en línia i deixa * que aquesta transició els porti. El full només hi posa la corba i el temps. * * ── I EL COIXÍ DE SOTA VA AMB L'ALÇADA ───────────────────────────────────── * * `.afa-dock__cos` té 26px de coixí inferior i `box-sizing: border-box`, o * sigui que `height: 0` NO és zero: el coixí no s'encongeix i el dock es * quedaria 26px més alt del que toca, amb un salt just al principi i just al * final del moviment — el defecte que venim a treure, en petit. * * Que això es compleixi depèn de l'ORDRE amb què `marc.js` escriu la partida i * el destí, no d'aquestes tres línies de transició. La primera versió tenia * l'ordre canviat i el coixí no es movia gens: el motiu, mesurat, és al costat * de les sis línies que ho fan. * * ── SENSE JAVASCRIPT, EL DOCK SEGUEIX SENT UN `
` ────────────────── * * `[data-anima]` el posa `marc.js` en arrencar. Sense ell no hi ha ni alçada * en línia ni transició: es prem i s'obre, com sempre, amb l'entrada del * contingut d'abans. L'animació és la millora que hi va a sobre i mai el * mecanisme — la mateixa regla que la navegació per zones. */ @keyframes afa-dock-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .afa-dock:not([data-anima])[open] .afa-dock__cos { animation: afa-dock-entra .22s var(--afa-corba) both; } /* Recollir va més ràpid que desplegar. El valor de desplegar és al bloc `.afa-dock` de més amunt: dos blocs amb el mateix nom són el defecte que aquest projecte té anotat com «la cara B», i hi ha prova que els compta. */ .afa-dock[data-mou="tanca"] { --dock-temps: 200ms; } .afa-dock[data-mou] .afa-dock__cos { overflow: hidden; transition: height var(--dock-temps) var(--dock-corba), padding-bottom var(--dock-temps) var(--dock-corba), opacity calc(var(--dock-temps) * .8) var(--dock-corba); } /* * Res es mou, i el que queda és l'estat FINAL i visible. * * Els selectors repeteixen els de dalt perquè han de pesar el mateix i guanyar * per ordre: amb `.afa-dock .afa-dock__cos` (dues classes) perdrien contra * `.afa-dock[data-mou] .afa-dock__cos` (tres) i això no apagaria res. * * `marc.js` ja se salta l'animació quan la preferència hi és, així que aquestes * dues línies són la xarxa de sota: si el guió arribés a escriure una alçada, * hi salta de cop i el rellotge de seguretat la treu. */ @media (prefers-reduced-motion: reduce) { .afa-dock:not([data-anima])[open] .afa-dock__cos { animation: none; } .afa-dock[data-mou] .afa-dock__cos { transition: none; } } /* ─────────────────────────────────────────────────────────────────────────── * 5. LES VISTES QUE NO SÓN LA D'INICI * ─────────────────────────────────────────────────────────────────────────── */ .afa-vista__titol { font-size: 28px; font-weight: 800; line-height: 1.08; letter-spacing: -.028em; margin: 8px 0 0; color: var(--tinta); } .afa-vista__lede { font-size: 13.5px; line-height: 1.7; color: var(--tinta-2); margin: 10px 0 18px; } /* * El formulari, dins d'una zona que ja és estreta: una columna i prou. * * `:not([type="checkbox"])` no és una floritura. Aquesta regla té dues classes * i guanya per especificitat a `.afa-camp--check input { width: auto }`, així * que li donava el 100 % TAMBÉ a la casella d'acceptació: sortia estirada a * mitja fila i deixava la frase del consentiment a l'altra meitat, com si * fossin dues columnes. Ho va veure David a la pantalla. * * I ja no hi ha `margin-bottom`: el buit entre camps el posa el `gap` de la * graella, i tenir-ne dos els sumava —30px— que és el que feia que els quatre * camps no es llegissin com un bloc. */ .afa-vista--soci .afa-camp input:not([type="checkbox"]), .afa-vista--soci .afa-camp textarea, .afa-vista--soci .afa-camp select { width: 100%; } /* * El calendari dins de la columna de l'agenda: sense fotos. * * A ~290px d'amplada una foto de 920 no aporta res i sí que allarga l'eix uns * 200px per fita. La pàgina `/calendari/` sencera —la que es veu quan el marc * no governa— les segueix ensenyant: el que canvia és el contenidor, no el * contingut. */ .afa-vista--calendari .afa-hito__foto { display: none; } .afa-vista--calendari .afa-hito__titol { font-size: 14px; } .afa-vista--calendari .afa-hito__text { font-size: 12px; } /* ─────────────────────────────────────────────────────────────────────────── * 6. QUAN EL MARC NO HI CAP * * Per sota d'aquest punt no hi ha dues zones de costat: no és una decisió * estètica, és que el model de partida —apaïsat— deixa de ser cert. David ho va * resoldre amb l'analogia bona: aleshores es comporta com el Carnet, que ja fa * anys que és exactament això. Barra a dalt, cos que es mou, barra a baix. * * El llindar mira l'AMPLADA i també l'ALÇADA: un portàtil de 1366×620 és ample * i no té prou alçada per a un marc amb quatre bandes, i allà el que s'ha de * fer és el mateix. * ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 860px), (max-height: 560px) { .afa-te-marc { --marc-marge: 0px; --marc-radi: 0px; } .afa-te-marc .wp-site-blocks { border: 0; } /* * ARA QUI ES MOU ÉS EL TAULELL, no cada zona. * * Amb una sola columna, dues caixes que es desplacen per separat una sota * l'altra són una trampa: el dit arriba al final de la primera i la pàgina es * planta. Es passa el desbordament al taulell i les zones tornen a ser * contingut corrent, que és el model del Carnet. */ .afa-marc__taulell { grid-template-columns: minmax(0, 1fr); /* * ── I LES FILES HAN DE SER DE CONTINGUT ──────────────────────────── * * Sense això, les dues zones es REPARTIEN l'alçada disponible en comptes * d'apilar-se: la retícula donava 170px a cada una i, com que aquí la zona * ja no retalla res, l'agenda es dibuixava A SOBRE del text del hero. Es * veia a la pantalla i no en cap número d'alçada: les dues sumaven * exactament el que hi havia. * * `max-content` obliga cada fila a mesurar el que el seu contingut demana, * i qui es desplaça és el taulell, que és el que havíem decidit. */ grid-auto-rows: max-content; overflow-y: auto; overscroll-behavior: contain; } /* `min-height: auto` desfà el `0` de l'altre model: allà servia perquè la zona pogués ser més curta que el seu contingut i desplaçar-se per dins; aquí el que ha de passar és justament el contrari. */ .afa-zona { overflow: visible; min-height: auto; } /* * El text d'obertura torna a una columna. * * Ja hi havia una regla que ho feia per sota de 860px, i la rèplica 1:1 la va * anul·lar sense voler: `.fmt-diari .afa-hero__columnes { column-count: 2 }` * s'escriu després i pesa igual. En un telèfon això són dues columnes de * 158px, o sigui unes 22 lletres per línia. */ .fmt-diari .afa-hero__columnes { column-count: 1; column-rule: 0; } .afa-zona--agenda { border-left: 0; border-top: 2px solid var(--tinta); } } /* * ── EL DOCK NO ES POT MENJAR EL TAULELL ────────────────────────────────── * * En una columna els sis serveis van l'un sota l'altre, o sigui sis files en * comptes de tres: el dock obert passa de 208px a uns 330. En un telèfon de * 622px d'alçada això deixa el taulell en 117 — el titular tallat per la * meitat i l'agenda invisible. * * Vist a la finestra, no calculant-ho: el llindar que hi havia (620px d'alçada) * no arribava a saltar justament en el cas real, que fa 622. * * El sostre va en `vh` i no en píxels perquè el que s'ha de protegir és una * PROPORCIÓ: que el taulell conservi un terç llarg de la pantalla passi el que * passi. I el dock es desplaça per dins, que és el que ha de fer un índex quan * no hi cap sencer. */ @media (max-width: 860px), (max-height: 760px) { .afa-dock__cos { max-height: 34vh; overflow-y: auto; overscroll-behavior: contain; } } /* * ── EL CANALÓ S'ENCONGEIX D'UNA PEÇA ───────────────────────────────────── * * Aquí hi havia quatre `18px` escrits un per un, i el cintell i la capçalera * no hi eren: entre 481 i 560 el marc ensenyava 24 a dalt i 18 a baix. Ara * només baixa el token i les sis peces el segueixen alhora. * * `padding-block` i no el `padding` sencer: el que canvia en un telèfon és * l'aire de dalt i de baix de cada peça, que no és el mateix número per a * totes. El costat és el canaló i ja el posa la regla de dalt. */ @media (max-width: 560px) { .afa-te-marc { --marc-canal: 18px; } .afa-dock__llista { columns: 1; } .afa-dock__servei:nth-child(4) { border-top: 0; } .afa-zona { padding-block: 16px 20px; } .afa-dock__nansa { padding-block: 18px 14px; } .afa-dock__cos { padding-block: 0 18px; } /* * ── AQUÍ L'ESLÒGAN JA NO ÉS EL MATEIX DIBUIX ───────────────────────── * * `afa_portada_peu_marca()` serveix la peça d'UNA LÍNIA per sota d'aquesta * mateixa amplada, i les dues cadenes han de dir el mateix: la de dues * línies fa 3,68:1 i la d'una 11,01:1, o sigui que amb l'alçada de l'altra * el dibuix surt al triple d'ample i se'n va per damunt dels enllaços. Hi ha * porta que les compara. * * 18px d'alt són 198 d'ample dels 347 que hi ha a 375, i deixen els dos * enllaços a la dreta sense apilar-se. Amb això la banda passa de 54px a 40 * **sempre**, no només mentre baixes: és la proposta de David, i estalvia * tot el mecanisme del cross-fade que havíem apuntat. */ .afa-marc__baix .afa-peu-marca { padding-block: 11px; /* * I NO POT EMBOLICAR-SE, que és el que va passar mesurant-ho a 320: amb * `wrap`, una peça que no hi cap se'n va a una segona fila ABANS * d'encongir-se —és l'ordre de l'algorisme— i la banda tornava a 69px, * pitjor que els 54 que venia a estalviar. El defecte només existia per * sota de 360 i a 375 no es veia. */ flex-wrap: nowrap; } /* * ── DEMANA 198 I CEDEIX ────────────────────────────────────────────── * * 190px són els 18 d'alt de la peça d'una línia (10,59:1), que és el que * llueix a 375. Però l'alçada fixa no es pot encongir: l'amplada li surt de * la proporció, així que a 320 demanava els mateixos 190 i no n'hi ha. * Manant l'AMPLADA, el dibuix cedeix i l'alçada el segueix —14px a 320— i * els dos enllaços legals no es mouen mai de la seva fila. * * És el mateix tracte que `.afa-marca` a la capçalera, i pel mateix motiu. */ .afa-marc__baix .afa-peu-marca__eslogan { height: auto; flex: 0 1 190px; min-width: 0; } .afa-marc__baix .afa-peu-marca__eslogan img { width: 100%; height: auto; } .afa-marc__baix .afa-peu-marca__enllacos { flex: none; } } /* * A partir d'aquí el peu compacte podria quedar-se sense contacte visible. No * s'amaga l'eslògan —és la marca— sinó que es reparteixen en dues línies. */ @media (max-width: 420px) { /* Ja no s'apila: dues peces curtes caben en fila fins i tot a 320. El que es redueix és la separació i el dibuix, no la disposició. */ .afa-marc__baix .afa-peu-marca { gap: 10px; } } /* ─────────────────────────────────────────────────────────────────────────── * 6bis. EN BAIXAR, LES BANDES ES PLEGUEN * * Encàrrec de David, amb les seves paraules: «al hacer el scroll, el cintillo * se va; la cabecera se comprime, pierde contenido —dejamos logo algo más * pequeño y el resto se va, como mucho dejaría la hamburguesa—; la zona * (cuerpo) se mantiene; "què t'hi trobaràs" oculto totalmente; y cuando * subimos, se revierte todo al normal». * * El nom del mecanisme és *condensing header*, i el revertir en pujar és el que * Material anomena *quick return*. * * ── DOS ESTATS, NO UN ENCONGIMENT CONTINU ───────────────────────────────── * * L'alçada de les bandes és el que dona l'alçada de la zona, i la zona ÉS el * contenidor que es desplaça. Si les bandes encongissin píxel a píxel mentre * baixes, el contenidor canviaria d'alçada mentre el dit el desplaça: salts i * estrebades. És exactament el que fa que aquestes capçaleres se sentin * malament quan se senten malament. Així que hi ha un estat normal i un de * plegat, amb una transició entremig i histèresi al llindar. * * ── EL LLINDAR VIU NOMÉS AQUÍ ───────────────────────────────────────────── * * `--marc-plega` no pinta res: és el senyal que `marc.js` llegeix per saber si * en aquesta mida s'hi plega alguna cosa. Escrivint el llindar també al guió * hi hauria dos números que s'han de tocar alhora, i un dia se'n toca un. És * el mateix tracte que `--dock-temps`. * * ── I LES MIDES DE PARTIDA LES ESCRIU EL GUIÓ ───────────────────────────── * * `auto` no s'interpola, així que una alçada que ve del contingut no es pot * transicionar des d'enlloc. El guió mesura les tres peces que han de * desaparèixer —el cintell, el botó i el dock— mentre estan desplegades i * n'escriu la mida com a variable. Sense guió no hi ha `data-marc-plegable`, * no hi ha cap alçada escrita i el marc es comporta com sempre: el plegat és * una millora a sobre, mai el mecanisme. * ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 860px), (max-height: 560px) { .afa-te-marc { --marc-plega: 1; --marc-plega-temps: 220ms; } /* * ── I LA VORA TAMBÉ SE'N VA ────────────────────────────────────────── * * Amb `border-box`, una alçada de 0 NO pot ser més petita que la suma de * les vores: mesurat, el cintell es quedava en 1px i el dock en 2, o sigui * una ratlla fosca surant sobre el contingut i una altra damunt del peu. * És l'aritmètica de `border-box` que aquest tema ja ha pagat als botons * del hero, en vertical i en petit. */ .afa-te-marc[data-marc-plegable] .afa-cintell { overflow: hidden; height: var(--marc-cintell-alt); transition: height var(--marc-plega-temps) var(--afa-corba-superficie), border-bottom-width var(--marc-plega-temps) var(--afa-corba-superficie), opacity calc(var(--marc-plega-temps) * .55) linear; } /* * La fila de la capçalera no necessita cap mida escrita: el seu alt surt del * coixí i de les peces de dins, i les dues coses són números que * s'interpolen. El que es transiciona és la CAUSA, no el resultat. */ .afa-te-marc[data-marc-plegable] .afa-capcalera__fila { transition: padding-block var(--marc-plega-temps) var(--afa-corba-superficie); } .afa-te-marc[data-marc-plegable] .afa-marca { transition: flex-basis var(--marc-plega-temps) var(--afa-corba-superficie), min-height var(--marc-plega-temps) var(--afa-corba-superficie); } .afa-te-marc[data-marc-plegable] .afa-nav .wp-block-navigation__responsive-container-open { transition: width var(--marc-plega-temps) var(--afa-corba-superficie), height var(--marc-plega-temps) var(--afa-corba-superficie); } .afa-te-marc[data-marc-plegable] .afa-capcalera .afa-boto--petit { max-width: var(--marc-cta-ample); overflow: hidden; white-space: nowrap; transition: max-width var(--marc-plega-temps) var(--afa-corba-superficie), padding-inline var(--marc-plega-temps) var(--afa-corba-superficie), opacity calc(var(--marc-plega-temps) * .55) linear; } /* * ── `:not([open])`, I NO ÉS UN DETALL ──────────────────────────────── * * L'alçada escrita és la del dock TANCAT. Posada sense condició, el dia que * algú obrís l'índex el trobaria retallat a 52px amb les quinze seccions a * dins: una peça pinçada a una mida que ja no és la seva. El guió, per la * seva banda, no plega res mentre el dock està obert — mirant l'índex no * s'està llegint el cos. */ .afa-te-marc[data-marc-plegable] .afa-dock:not([open]) { overflow: hidden; height: var(--marc-dock-alt); transition: height var(--marc-plega-temps) var(--afa-corba-superficie), border-top-width var(--marc-plega-temps) var(--afa-corba-superficie); } /* ── L'ESTAT PLEGAT ──────────────────────────────────────────────────── */ .afa-te-marc[data-marc-compacte] .afa-cintell { height: 0; border-bottom-width: 0; opacity: 0; } /* * ── EL TERRA TOCABLE, PLEGAT: 36px ─────────────────────────────────── * * Aquí es prem amb el dit i el marc hi posa 44px, que és WCAG 2.5.5 (AAA) i * la guia d'Apple. Plegat baixa a 36, i el número no és nou: és el mateix * que el marc ja fa servir a la capçalera d'escriptori, i segueix sent una * vegada i mitja el mínim EXIGIBLE, que és 2.5.8 amb 24px (AA). * * Es paga perquè, si no, no es guanya res: mesurat a 375, la fila fa 66px * dels quals 44 són el botó de la hamburguesa. Amb els 44 intactes, plegar * la capçalera sencera només en retallaria 10 —el coixí— i l'efecte no * valdria el que costa. Amb 36, la fila queda en 48. * * I dura el que dura el gest: en pujar torna a 44. */ .afa-te-marc[data-marc-compacte] .afa-capcalera__fila { padding-block: 5px; } .afa-te-marc[data-marc-compacte] .afa-marca { flex-basis: 132px; min-height: 0; } /* * ÉS `height` I NO `min-height`, i mesurar-ho va ser la diferència entre * una capçalera de 48px i una de 56: `components.css` li dona 44 d'alt i 44 * d'ample EXACTES, així que un mínim de 36 no li treu ni un píxel. El botó * es queda quadrat —36×36— perquè un rectangle de 36×44 no és el mateix * objectiu tocable ni el mateix dibuix. */ .afa-te-marc[data-marc-compacte] .afa-nav .wp-block-navigation__responsive-container-open { width: 36px; height: 36px; } /* * El botó se'n va de debò —amplada zero i `visibility` endarrerida— i no * només transparent: un botó invisible que encara es pot tabular és una * trampa per a qui navega amb teclat, i a més es quedaria ocupant l'amplada * que el logotip acaba de deixar. */ .afa-te-marc[data-marc-compacte] .afa-capcalera .afa-boto--petit { max-width: 0; padding-inline: 0; border-width: 0; opacity: 0; visibility: hidden; transition: max-width var(--marc-plega-temps) var(--afa-corba-superficie), padding-inline var(--marc-plega-temps) var(--afa-corba-superficie), opacity calc(var(--marc-plega-temps) * .55) linear, visibility 0s linear var(--marc-plega-temps); } .afa-te-marc[data-marc-compacte] .afa-dock:not([open]) { height: 0; border-top-width: 0; } /* * Res es mou, i el que queda és l'estat FINAL. El guió segueix canviant * d'estat: plegar-se no és una animació decorativa, és guanyar pantalla per * al contingut, i això val igual per a qui ha demanat menys moviment. */ @media (prefers-reduced-motion: reduce) { .afa-te-marc[data-marc-plegable] .afa-cintell, .afa-te-marc[data-marc-plegable] .afa-capcalera__fila, .afa-te-marc[data-marc-plegable] .afa-marca, .afa-te-marc[data-marc-plegable] .afa-nav .wp-block-navigation__responsive-container-open, .afa-te-marc[data-marc-plegable] .afa-capcalera .afa-boto--petit, .afa-te-marc[data-marc-plegable] .afa-dock:not([open]), .afa-te-marc[data-marc-compacte] .afa-capcalera .afa-boto--petit { transition: none; } } } /* ─────────────────────────────────────────────────────────────────────────── * 7. IMPRESSIÓ * * Un marc que no es desplaça, imprès, dona UNA pàgina amb la resta retallada. * En paper es desfà: torna a ser un document. * ─────────────────────────────────────────────────────────────────────────── */ @media print { .afa-te-marc { overflow: visible; } .afa-te-marc .wp-site-blocks { height: auto; border: 0; } .afa-marc__taulell { grid-template-columns: minmax(0, 1fr); } .afa-zona { overflow: visible; } .afa-dock__cos { padding-bottom: 12px; } } /* ─────────────────────────────────────────────────────────────────────────── * 8. EL QUE EL MARC HA DE DESFER DE LA PÀGINA * * Dins del marc no hi ha «amplada de contingut centrada» ni ritme vertical * entre seccions: aquestes dues coses són del model de document i aquí el * contenidor ja mana. Es desfan en un sol lloc en comptes d'anar posant * excepcions component a component. * ─────────────────────────────────────────────────────────────────────────── */ /* * WordPress emet, per a tot bloc de disposició «flow», * `> * + * { margin-block-start: … }`. Dins d'una retícula de tres files * aquest marge apareix ENTRE les bandes i el cos i desquadra el marc uns 24px * sense que res ho digui a la nostra fulla. */ .afa-te-marc .wp-site-blocks > *, .afa-te-marc .afa-marc__cos > *, .afa-te-marc .afa-marc__taulell > * { margin-block: 0; } /* * La columna centrada de 940px no té sentit quan el marc JA fa 940: només * afegiria un coixí lateral doble. * * El que es desfà és el `max-width` i el centrat. EL COIXÍ NO: aquesta regla * el posava a zero i, com que `.afa-capcalera__fila` porta també `.afa-ample`, * li esborrava el seu —logotip i botó enganxats a la vora del marc amb tota la * resta a 24—. Ara el coixí que dona aquí és el canaló del marc, que és el * mateix que posen les altres cinc peces. */ .afa-te-marc .afa-ample { max-width: none; margin-inline: 0; padding-inline: var(--marc-canal); } /* * L'alçada surt de TRES coixins sumats, i per això la primera versió va sortir * a 59px volent-ne 30: `.afa-ticker` en posava 8, `.afa-ticker__pista` 9 i * cada avís 4 més. Tocar només el de fora no fa res de visible. * * El terra són els 24px d'àrea tocable que demana WCAG 2.5.8 per a l'enllaç de * l'avís: 12px de text amb la seva interlínia són uns 18, més 3+3 de coixí, * fan 24 justos. Amb 5px per banda de la banda, la franja queda a 34px. Menys * seria fer l'avís més difícil de prémer, i això no és un canvi d'estètica. */ .afa-cintell { background: var(--banda); border-bottom: var(--afa-regla); } .afa-cintell__fila { display: flex; align-items: center; gap: 12px; margin: 0; padding: var(--marc-cintell-coixi) var(--marc-canal); line-height: 1.5; } .afa-cintell__etiqueta { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--banda-accent); flex: none; } .afa-cintell__titol { font-size: 12px; color: var(--banda-tinta); text-decoration: none; padding-block: 3px; /* 24px d'àrea tocable, WCAG 2.5.8 */ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .afa-cintell__titol:hover { text-decoration: underline; text-underline-offset: 3px; } .afa-cintell__mes { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--banda-accent); text-decoration: none; flex: none; margin-left: auto; padding-block: 3px; } .afa-cintell__mes:hover { text-decoration: underline; text-underline-offset: 3px; } /* * La capçalera dins del marc no porta la seva pròpia vora inferior a més de la * de la fila: serien dues línies a 1px de distància. */ /* * ── LA RATLLA DE LA CAPÇALERA ÉS DEL MARC, NO DEL FORMAT ──────────────── * * La ratlla negra de 2px sota la capçalera la posava la pell del Diari * (`components.css`, acotada amb `:has(.fmt-diari)`), i aquell abast només * arriba on hi ha la plantilla del Diari en joc: la portada i les dues vistes * de zona. A `/extraescolars/`, `/entrevistes/` i la resta d'interiors no hi * era, i la capçalera quedava surant sobre el contingut sense tancar-se. * * Ho va veure David comparant dues pantalles: «si premo Inici o Calendari * apareix una línia inferior a la capçalera; en canvi a seccions com * Extraescolars NO apareix. Crec que queda bé perquè encaixa amb la línia * superior del quadre flotant». * * I té raó en el diagnòstic: la capçalera és una de les tres bandes del marc i * es veu igual a totes les pàgines, així que la seva ratlla depèn del MARC i * no del format. La nota de `components.css` explica per què aquelles regles * es van acotar —sense abast s'aplicaven a tot el lloc i als cinc formats— i * això segueix valent per a la resta de la pell: aquí només torna LA RATLLA, * no el coixí ni el botó petit. * * Va sobre `__fila` i no sobre `.afa-capcalera` perquè la fila porta el canaló * del marc: així la ratlla comença i acaba exactament on ho fan el taulell i la * banda de baix, que és el que la fa encaixar. */ .afa-te-marc .afa-capcalera { border-bottom: 0; } /* La declaració viu amb la resta de la fila, més avall: «la separació de la fila baixa de 24 a 16». Dos blocs amb el mateix selector són la regla ancorada trencada — i la porta dels selectors duplicats l'ha atrapada. */ /* * ── I EL BOTÓ DE LA CAPÇALERA, IGUAL A TOT ARREU ──────────────────────── * * Mateixa causa que la ratlla i mateix arranjament. La pell del Diari li dona * 9/16 de coixí i li treu el terra de 44px, i com que està acotada, a les * interiors el botó queia a la base: mesurat, 34px d'alt a la portada i 44 a * `/extraescolars/`. David: «els botons de Fes-te soci d'Inici i Calendari * tenen la mida correcta. La resta és més gran. Iguala-ho». * * NOMÉS EL COIXÍ I EL TERRA. El cos de lletra ja coincidia —13px als dos * costats— així que no s'hi toca: escriure'l aquí seria una tercera còpia d'un * valor que ja surt d'on toca. * * EL PREU, DIT: el botó passa de 44 a 34px d'alt també a les interiors. 34 * compleix el criteri **AA** de WCAG 2.2 (2.5.8, mínim 24×24) i NO el **AAA** * (2.5.5, 44×44) ni la guia d'Apple. Era ja la situació de la portada per * decisió de disseny anotada a `docs/handoff/G-INFORME.md`; això l'estén a tot * el lloc perquè el marc es vegi igual a tot arreu. La resta de botons —el * d'enviar el formulari, els del hero— conserven el seu. */ .afa-te-marc .afa-boto--petit { padding: 9px 16px; min-height: 0; } /* ─────────────────────────────────────────────────────────────────────────── * 9. TRES COSES QUE EL FORMAT DONAVA PER FETES I EL MARC CANVIA * ─────────────────────────────────────────────────────────────────────────── */ /* * L'ETIQUETA DEL DOCK NO PORTA EL FILET DE SECCIÓ. * * `.fmt-diari .afa-etiqueta` li posa a tota etiqueta del format un coixí * inferior i una regla de 2px, que és el que separa «PROPERES DATES» de la * seva llista. A la nansa del dock això sobrava dues vegades: hi afegia 10px * d'alçada a una peça que ha de ser prima, i dibuixava una segona línia negra * a dos píxels de la vora superior del propi dock. */ /* * `.fmt-diari` al davant: sense ell la regla perdia. `.fmt-diari .afa-etiqueta` * pesa dues classes i `.afa-dock__etiqueta` només una, així que el filet seguia * dibuixat i la nansa seguia fent 69px en comptes de 56 — una correcció escrita * que no s'aplicava, que és pitjor que no haver-la escrit. */ .fmt-diari .afa-dock__etiqueta { padding-bottom: 0; border-bottom: 0; } /* * ── EL SÒL TOCABLE A LA CAPÇALERA DEL MARC: 36px, NO 44 ────────────────── * * Aquest projecte fa servir 44px com a terra per a qualsevol cosa que es * prem, i està bé: és el criteri d'Apple i el de WCAG 2.5.5, que és AAA. Però * 2.5.5 és una recomendació de nivell AAA i la que s'ha de complir és 2.5.8, * que demana **24px**. * * Aquí la diferència es paga en una moneda concreta: amb 44, la fila de la * capçalera fa 74px en comptes dels 66 que li tocarien, i com que l'alçada del * marc està donada, aquests 8px surten del taulell. 36px segueixen sent una * vegada i mitja el mínim exigible. * * I NOMÉS on hi ha ratolí: per sota del llindar el marc es comporta com el * Carnet, allà es prem amb el dit i els 44 tornen sense excepció. */ @media (min-width: 861px) and (hover: hover) and (pointer: fine) { .afa-te-marc .afa-marca, .afa-te-marc .afa-nav .wp-block-navigation-item__content { min-height: 36px; } .afa-te-marc .afa-capcalera__fila { padding-block: 13px; } } /* * El hero i la columna de l'agenda ja no posen el seu propi coixí: el posa la * zona, que és qui té el desbordament. Amb els dos, el text quedava a 48px de * la vora i la columna perdia 24px d'amplada útil. */ .afa-te-marc .fmt-diari .afa-hero, .afa-te-marc .fmt-diari .afa-diari__aside { padding: 0; } /* * ── LA CAPÇALERA EN UN TELÈFON ESTRET ──────────────────────────────────── * * A 360px la fila demanava 376 i el botó «Fes-te soci» se sortia 16px. Ja hi * havia dues regles per a això —la separació de la barra a 480 i el coixí del * botó a 420— i la rèplica 1:1 les va anul·lar sense voler: `.afa-boto--petit` * amb `padding: 9px 16px` s'escriu després i pesa igual. * * I dins del marc el defecte a més s'AMAGA: l'aparell retalla amb * `overflow: hidden`, així que no hi ha barra de desplaçament horitzontal ni * cap número que es queixi. Es veu mirant la pantalla, i prou. * * Els 44px del terra tocable no es toquen: aquí es prem amb el dit. El que * s'encongeix és el coixí i la peça de marca, que no és el que es prem. */ /* * El segon graó del canaló. Abans el baixaven a 14 DUES regles —la de la * capçalera i la del cintell— i les altres quatre peces es quedaven a 18: el * marc arribava al telèfon amb dos canalons, i el que el defensava era que * ningú no els havia posat un al costat de l'altre. Ara baixa el token. */ @media (max-width: 480px) { .afa-te-marc { --marc-canal: 14px; } .afa-te-marc .afa-capcalera__fila { gap: 10px; } .afa-te-marc .afa-boto--petit { padding: 8px 12px; font-size: 12px; } } /* ═══════════════════════════════════════════════════════════════════════════ * LA CAPÇALERA DINS DEL MARC — el límit és el MARC, no la finestra * * Trobat mesurant el 20 de setembre, i eren tres coses barrejades: * * · A 700px la fila demanava **822 i en tenia 700**. Sortien la hamburguesa I * el menú sencer alhora, i el menú se sortia per la dreta. `overflow: * hidden` de l'aparell ho retallava en silenci, que és el pitjor: no hi * havia barra de desplaçament ni cap número que es queixés. * · El botó «Fes-te soci» **no hi era de 600 a 1080**, per una regla heretada * del v3 (`.afa-capcalera .afa-boto--primari { display: none }`). * · I a 1180 el botó sobresortia 6px del canaló. * * ── LA CAUSA DE FONS, QUE ÉS UNA SOLA ──────────────────────────────────── * * Totes tres regles miren l'amplada de la FINESTRA, i dins del marc això ja no * vol dir res: l'espai de la capçalera és el del marc —890px útils a partir de * 980 de finestra— i no creix encara que la pantalla faci 2000. Per això el * botó desapareixia a 1000 i tornava a 1100 sense que res canviés al seu * voltant. * * Aquí es tornen a lligar al que de debò les limita. * ═══════════════════════════════════════════════════════════════════════════ */ /* * El menú sencer necessita uns 864px amb els sis enllaços d'avui. Per sota de * 920 de finestra el marc no els hi dona, així que es fa servir el desplegable * —que és el que el bloc del nucli ja fa per sota de 600— i per sobre, el menú * en línia. * * I ES DIU AMB NÚMEROS D'AVUI: el dia que la junta afegeixi una setena entrada * al menú, aquest llindar es queda curt. No hi ha manera de calcular-ho des del * CSS; el que sí que hi ha és que el símptoma torna a ser un retall silenciós, * així que queda escrit aquí per si algú el busca. */ @media (max-width: 919px) { .afa-te-marc .afa-nav .wp-block-navigation__responsive-container-open { display: flex; } .afa-te-marc .afa-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; } } @media (min-width: 920px) { .afa-te-marc .afa-nav .wp-block-navigation__responsive-container-open { display: none; } } /* * EL BOTÓ TORNA. La regla del v3 el retirava de 600 a 1080 perquè allà la * capçalera ocupava tota la finestra i en aquella franja no hi cabia. Dins del * marc hi cap sempre —890 fixos— i el que es perdia era una funció: el camí * per fer-se soci des de qualsevol pàgina. */ @media (min-width: 600px) and (max-width: 1080px) { .afa-te-marc .afa-capcalera .afa-boto--primari { display: inline-flex; } } /* * I la separació de la fila baixa de 24 a 16. * * Amb sis entrades al menú, el conjunt demanava 896 dels 890 que hi ha: el botó * es ficava 6px dins del canaló i es veia desalineat per la dreta mentre el * logotip quedava clavat per l'esquerra. Els 16 donen 888. */ /* * I LA RATLLA DE SOTA, que és cromo del marc i no del format. * * La posava la pell del Diari (`components.css`, acotada amb `:has(.fmt-diari)`) * i aquell abast només arriba a la portada i a les dues vistes de zona: a * `/extraescolars/`, `/entrevistes/` i la resta d'interiors la capçalera * quedava surant sobre el contingut. Ho va veure David comparant dues * pantalles, i té raó en el diagnòstic: la capçalera és una de les tres bandes * del marc i es veu igual a totes les pàgines. * * Va sobre `__fila` i no sobre `.afa-capcalera` perquè la fila porta el canaló * del marc: així la ratlla comença i acaba exactament on ho fan el taulell i la * banda de baix. Mesurat a set menes de pàgina: x=77, amplada 1126, les * mateixes que el taulell. */ .afa-te-marc .afa-capcalera__fila { gap: 16px; border-bottom: 2px solid var(--tinta); } /* ═══════════════════════════════════════════════════════════════════════════ * 10. LES PÀGINES INTERIORS — una sola zona a amplada sencera * * ── PER QUÈ UNA I NO DUES ────────────────────────────────────────────────── * * El taulell de la portada reparteix el cos en dues zones perquè la portada té * dues àrees de navegació autònomes: l'obertura i l'agenda. Una fitxa * d'extraescolar, un arxiu de documents o una pàgina de text **no en tenen * dues**. Posar-n'hi una segona obligaria a inventar què hi va —un carril de * «relacionats», un índex lateral— i seria contingut que ningú ha demanat * ocupant un terç de la pantalla a totes les pàgines del lloc. * * El que fa valuós el marc no és el nombre de zones: és que s'ancora a dalt i * a baix alhora. Amb una sola zona això es conserva sencer. * * ── I PER QUÈ AQUESTA ZONA NO POSA CANALÓ ────────────────────────────────── * * La zona del taulell sí que el posa, perquè el que hi va a dins és marcatge * de portada sense coixí propi. Aquí, en canvi, hi entren les disset * plantilles tal com estan escrites, i totes porten `.afa-ample`, a qui el * marc ja dona el canaló. Amb els dos, el text quedaria a 48px de la vora — el * mateix defecte que ja es va corregir al hero i a la columna de l'agenda. * * I hi ha un segon motiu, que és el que decideix: sense coixí lateral, una * secció de banda (`.afa-seccio--alt`, `.afa-seccio--banda`) arriba de vora a * vora del marc. Amb coixí quedaria una franja de color surant amb 24px de * fons a cada costat, que és mitja cosa. * ═══════════════════════════════════════════════════════════════════════════ */ /* * El coixí de dalt el posa la primera secció (`--afa-seccio`), així que el de * la zona s'hi sumaria. El de baix es queda petit: és el que impedeix que * l'última línia quedi enganxada al dock. */ .afa-zona--ple { padding: 0 0 4px; } /* ─────────────────────────────────────────────────────────────────────────── * 10bis. EL DOCK: LES ALTRES SECCIONS * * Els sis serveis són els de la referència i no es toquen. Sota seu, una fila * discreta amb els arxius que no són cap d'ells ni cap pàgina —Notícies, * Entrevistes, Actes i comptes, Avisos—, que fins avui només s'arribaven des * del peu llarg. Dins del marc el peu llarg no hi és, així que sense aquesta * fila es quedaven sense cap camí. El motiu llarg és a `inc/marc.php`. * * Van com a text separat per punts volats i no com una setena i vuitena fila * numerada: la numeració 01-06 és la peça de disseny, i estirar-la a deu * convertiria l'índex en un mapa del lloc. * ─────────────────────────────────────────────────────────────────────────── */ .afa-dock__extres { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vora); } .afa-dock__extra { font-size: 12px; color: var(--tinta-2); text-decoration: none; /* 24px d'àrea tocable (WCAG 2.5.8): 12px de text amb la seva interlínia en fan uns 18, més 3+3 de coixí. El mateix càlcul que el cintell. */ line-height: 1.5; padding-block: 3px; } .afa-dock__extra:hover { color: var(--enllac); text-decoration: underline; text-underline-offset: 3px; } /* * El punt volat entre enllaços. * * Va en `--tinta-2` i no en `--vora`, que era la primera tria i estava * mesurada malament: `--vora` sobre `--superficie` dona **1,24:1 a la paleta * 5B**, o sigui un separador que no es veu. Un separador invisible no separa * res; si hagués de ser decoratiu de debò, el que tocaria seria no dibuixar-lo. * Amb `--tinta-2` és el mateix color que els enllaços que separa —de 5,87 a * 7,24:1 segons la paleta— i és una parella que `bin/contrast.php` ja mesura. * * Qui fa servir un lector de pantalla no el sent: és un `::before`, i a més el * `