/** * Marchi in vetrina — GR Fashion Consulting * * NESSUN COLORE QUI DENTRO. Le classi sono nomi; a vestirle e' il tema con le * proprie variabili. Ogni valore cromatico passa da una `var()` con un ripiego * neutro, cosi' la fascia funziona anche su un tema che quelle variabili non le * ha — che e' la differenza fra un modulo riusabile e un modulo che gira su un * sito solo. * * * PERCHE' QUESTO FOGLIO ESISTE, DATO CHE IL MODULO PER SCELTA NON NE AVEVA * * `grcontentblocks.php` diceva, e con ragione, che l'aspetto dei blocchi e' del * tema e che un foglio del modulo arriverebbe dopo e vincerebbe. Quel * ragionamento vale per un foglio non incapsulato. Tutto quello che c'e' qui * sta dentro `@layer gr-modules`, che nella scala dichiarata da `theme.css` * * vendors … ps-modules, gr-base, gr-components, gr-pages, gr-layouts, * gr-modules, utilities * * e' il penultimo strato: il tema conserva l'ultima parola scrivendo in * `utilities` o fuori dai livelli — che e' esattamente cio' che ha fatto per la * riga del mega menu. Il rapporto resta quello giusto. * * Serve un foglio perche' la geometria di questa fascia non e' una preferenza * estetica del tema: e' cio' che rende leggibile o illeggibile il materiale che * il negozio ha caricato. E il materiale, qui, e' molto migliore di come lo si * stava mostrando. * * * COS'E' DAVVERO `img/m/.jpg` — E NON E' DETTO CHE SIA UN LOGO * * Su un negozio d'arredamento vero ci si trova riquadri VERTICALI 600x900: * ognuno una fotografia d'ambiente con il logo del marchio composto sopra in * bianco. Sono PNG opachi, non JPEG con il fondo bianco. Qualcuno li ha * preparati — di solito li porta il sito precedente — e sono precisamente la * «tessera marchio» che serve: fotografia piu' logo, gia' fatta, per la maggior * parte dei produttori. * * Il tema li vestiva come miniature: cella alta 108px, immagine a * `max-height: 64px`, colonne da 150px che scorrono di lato. Con una sorgente * 452x584 il vincolo d'altezza porta la fotografia intera a 49x64 pixel: il * logo dentro finisce largo una trentina di pixel, e una fotografia d'interni * ridotta a un francobollo diventa una macchia grigia. Non era un problema di * materiale mancante, era un problema di misura. * * Quindi qui la cella diventa grande e la fotografia la riempie. Niente * `max-height`, niente scorrimento laterale: una griglia che va a capo, con * riquadri nel formato della sorgente. * * * PERCHE' `cover` E NON `contain`, CHE ALTROVE E' LA SCELTA GIUSTA * * `contain` non ritaglia, e su un logo e' l'unica scelta possibile — un logo * tagliato non e' piu' quel marchio. Qui la sorgente non e' un logo: e' una * fotografia 600x900 che PrestaShop ha messo dentro una tela 452x584, * lasciandole 31 pixel trasparenti per lato. Con `contain` quei 31 pixel * diventano due bande di fondo ai lati di ogni tessera, dieci volte. * * Con `aspect-ratio: 2 / 3` — il formato della fotografia, non della tela — e * `cover`, il ritaglio cade quasi esattamente sulle bande trasparenti: sono il * 6,9% della larghezza per lato, e il ritaglio ne toglie il 6,9%. La fotografia * si vede intera, e nessun logo viene toccato perche' il logo sta al centro. * Il fondo della cella copre l'eventuale scheggia di mezzo pixel. */ @layer gr-modules { /* ------------------------------------------------------------ PONTE — DA TOGLIERE QUANDO IL TEMA E' AGGIORNATO ------------------------------------------------------------ `gr-sezioni.css` toglie il respiro laterale a questa sezione (`.gr-blocco--manufacturer_carousel { padding-inline: 0 }`, e restituisce il margine a un `.gr-dentro` che `blocchi.tpl` non emette). Era la scelta giusta finche' la fascia scorreva di lato: senza quella riga la prima e l'ultima cella restavano incollate al bordo mentre si scorre. La fascia non scorre piu'. Adesso quella riga fa un danno diverso: la griglia arriva a filo finestra mentre tutte le altre sezioni della home hanno il loro margine, e la sezione dei marchi sembra allineata male. La correzione vera e' cancellare quelle due regole dal foglio del tema — quel foglio lo applica il coordinatore, non questo modulo. Nel frattempo qui si rimette il margine, e il giorno che il tema smette di toglierlo questa regola dichiara lo stesso valore che dichiara lui: diventa ridondante, non contraddittoria, e si cancella senza guardare cos'altro fa. Vince per ordine di caricamento (questo foglio sta a 90, `gr-sezioni` a 70) a pari livello e pari specificita'. E' un equilibrio fragile, ed e' un'altra ragione per togliere la riga di la' invece di tenerla qui. */ .gr-blocco--manufacturer_carousel { padding-inline: var(--gutter, 1.5rem); } /* ------------------------------------------------------------ LA GRIGLIA ------------------------------------------------------------ Va a capo, e prima non lo faceva. Il tema aveva scelto una colonna sola che scorre, con una motivazione buona: «a capo diventerebbero tre file di loghi alte trecento pixel in mezzo alla home». Vale per i loghi. Dieci riquadri fotografici sono la vetrina dei marchi — la ragione per cui un cliente si fida di un negozio di arredamento — e nascondere sette marchi su dieci dietro uno scorrimento laterale che sul desktop nessuno nota e' peggio di due file alte. `auto-fit` e non `auto-fill`: con `auto-fill` le tracce vuote restano e una fila incompleta lascia un buco a destra; con `auto-fit` le celle si distribuiscono su tutta la riga. Con i dieci marchi di adesso e il contenuto a 1240px vengono cinque colonne e due file piene. Il minimo e' un `clamp` e non un valore fisso perche' e' il telefono a decidere: 220px fissi su uno schermo da 375 darebbero una colonna sola e dieci schermate da scorrere. Cosi' sul telefono sono due colonne, sul desktop cinque. */ .gr-marchi { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 30vw, 220px), 1fr)); /* `grid-auto-flow: row` NON e' ridondante, e' la correzione che tiene in piedi tutto il resto: il tema dichiara `grid-auto-flow: column`, e con un flusso a colonne le tracce esplicite qui sopra vengono riempite in verticale e poi la griglia se ne inventa altre a destra. Dichiarare `grid-template-columns` senza questa riga non produce una griglia che va a capo, produce la stessa fila di prima. */ grid-auto-flow: row; grid-auto-columns: auto; gap: clamp(0.5rem, 1.2vw, 1rem); /* `margin-block` e NON `margin: 0`, ed e' un difetto misurato, non una finezza. Serve azzerare il margine che il browser mette a un `ul`, che e' verticale. La forma breve azzera anche quello orizzontale, e quello orizzontale il tema lo tiene ad `auto` per centrare la griglia dentro la colonna di contenuto (`.gr-blocco > .gr-marchi`, in `gr-layouts`, che questo livello scavalca). Con `margin: 0` la fascia dei marchi restava incollata a sinistra mentre il titolo della sezione sopra era centrato con lei: 58 pixel contro 93 su una finestra da 1440. */ margin-block: 0; margin-inline: auto; padding: 0; list-style: none; /* La fascia non e' piu' un contenitore che scorre. Con `overflow-x: auto` ereditato, la griglia che va a capo resterebbe un'area scorrevole senza niente da scorrere: sul Mac compare comunque la traccia della barra, e la cella a fuoco da tastiera fa sobbalzare la sezione. */ overflow: visible; /* Il tema disegnava la fascia come una tabella: fondo a filetto piu' bordo, con `gap: 1px`, cosi' che il fondo passasse fra le celle e sembrasse una griglia di righe. Con celle grandi e distanziate quel reticolo diventa una cornice intorno al nulla. `background: none` e' la forma breve, e azzera anche il colore di fondo: nessun valore cromatico scritto a mano. */ background: none; border: 0; /* La larghezza massima NON sta qui di proposito: quanto e' larga la colonna di contenuto della pagina lo decide il tema (`.gr-blocco > .gr-marchi`), e un modulo che se la sceglie da solo la sbaglia sul tema successivo. */ } /* Con pochi marchi le tracce `1fr` si allargano fino a occupare la riga: due marchi diventerebbero due riquadri da 620px, che non e' una vetrina, e' un banner sbagliato. Sopra i quattro il problema non c'e' piu' e la riga si riempie da sola. */ .gr-marchi[data-gr-marchi="1"], .gr-marchi[data-gr-marchi="2"], .gr-marchi[data-gr-marchi="3"], .gr-marchi[data-gr-marchi="4"] { grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 30vw, 220px), 300px)); justify-content: center; } /* ------------------------------------------------------------ LA TESSERA ------------------------------------------------------------ Da qui in giu' ogni selettore e' agganciato a `:where(.gr-marchi)`, e non e' pedanteria: `gr-marchio` NON e' un nome libero su questo negozio. `grthemekit` stampa nel `` un foglio che se lo prende per il marchio del NEGOZIO — `.gr-marchio__su-chiaro`, `.gr-marchio__su-scuro`, `.gr-marchio--fondo-fisso`, il logo a due file di testata e piede. Oggi quella marcatura in home non c'e', e un `.gr-marchio { display: block; height: auto }` non fa danni. Il giorno che c'e', questo foglio darebbe al logo del negozio la forma di una tessera 2:3. E' lo stesso incidente che il tema ha gia' pagato una volta con `.gr-logo`, che era insieme il marchio in testata e la cella del carosello: due componenti diversi con lo stesso nome non convivono, convivono finche' nessuno guarda la testata. `:where()` e non un discendente normale perche' non aggiunge specificita': le regole restano a 0,1,0 e il tema continua a poterle scavalcare con un selettore di classe da uno strato successivo. Lo scopo e' delimitare, non vincere. */ :where(.gr-marchi) .gr-marchio { /* Era `display: grid` con `height: 108px`. L'altezza adesso la decide il formato della fotografia, sul collegamento: qui un'altezza fissa la tratterrebbe comunque. */ display: block; height: auto; /* Il fondo passa al collegamento, che e' l'elemento che ha la forma della tessera. Lasciarlo anche qui vorrebbe dire due rettangoli sovrapposti e uno dei due sempre invisibile. */ background: none; } :where(.gr-marchi) .gr-marchio__collegamento { /* `grid` con `place-items: center` lo dichiara anche il tema, e si ridichiara qui per una ragione precisa: e' cio' che centra il nome del marchio quando la fotografia non c'e'. Dipendere per questo da una regola in un altro foglio significa che il giorno che quella riga si sposta il ripiego si scentra, e il ripiego e' il caso che nessuno guarda. */ display: grid; place-items: center; /* Il formato della fotografia sorgente, non quello della tela in cui PrestaShop l'ha messa: vedi la nota in testa al file. */ aspect-ratio: 2 / 3; height: auto; /* Il tema metteva 0.9rem di respiro intorno alla miniatura. Una fotografia d'ambiente dentro un riquadro vuole arrivare al bordo: il margine la trasforma in un quadretto appeso. */ padding: 0; /* Serve all'ingrandimento al passaggio del mouse: senza, la fotografia che cresce esce dalla tessera e copre le vicine. */ overflow: hidden; background: var(--fondo-alt, #eee); border: 1px solid var(--filetto, rgba(0, 0, 0, 0.12)); text-decoration: none; } /* Il tema stringe il contorno del fuoco a `outline-offset: -4px` perche' le celle erano attaccate fra loro e un contorno che sporge finiva sotto la cella accanto. Adesso fra le tessere c'e' spazio, e un contorno dentro l'immagine su una fotografia scura non si vede: torna fuori, dove chi naviga da tastiera lo trova. */ :where(.gr-marchi) .gr-marchio__collegamento:focus-visible { outline-offset: 2px; } :where(.gr-marchi) .gr-marchio__immagine { display: block; width: 100%; height: 100%; /* Vedi la nota in testa al file: qui `cover` non taglia il logo, taglia le bande trasparenti che la tela si porta dietro. */ object-fit: cover; object-position: center; /* Niente `width`/`height` come attributi nel template e niente misure fisse qui: l'immagine puo' essere quella del produttore (452x584) oppure una caricata sul blocco, di cui il template non conosce le dimensioni. Lo spostamento del contenuto lo previene l'`aspect-ratio` del collegamento, che vale prima che l'immagine arrivi. */ /* Mezzo secondo e non i 180ms del tema: su una fotografia grande un movimento rapido sembra uno scatto, su un pulsante no. */ transition: transform 0.5s ease; } :where(.gr-marchi) .gr-marchio__collegamento:hover .gr-marchio__immagine { /* Appena accennato, e nella stessa direzione delle tessere categoria: e' il segnale che la tessera e' cliccabile. Piu' di cosi' e la fotografia perde il bordo su cui e' stata inquadrata. */ transform: scale(1.03); } /* ------------------------------------------------------------ IL RIPIEGO: IL MARCHIO SENZA FOTOGRAFIA ------------------------------------------------------------ Quattordici produttori su sessantotto non hanno nessun file in `img/m` — quasi tutti duplicati spenti, quattro soli attivi — e per quelli il template stampa il nome. In una cella da 108px era una riga di testo; in un riquadro verticale grande diventerebbe un buco con una scritta piccola in mezzo. Quindi il nome prende la misura del riquadro: nel carattere dei titoli, grande, centrato, su fondo di carta. Non e' la fotografia che manca, ma e' una tessera che sta in fila con le altre senza sembrare un errore — e resta uniforme, perche' un riquadro piu' basso degli altri rompe la riga peggio di un riquadro senza immagine. */ :where(.gr-marchi) .gr-marchio__nome { padding: 1rem; /* Il ripiego era `Georgia, 'Times New Roman', serif`: la coda giusta quando il carattere dei titoli era un Bodoni, quella sbagliata adesso. Se `--display` non arrivasse, il nome del marchio si vestirebbe proprio del serif che il committente ha bocciato. Catena di sistema senza grazie, la stessa che il token dichiara al suo interno. Vale per qualunque negozio: un ripiego deve somigliare al carattere che sostituisce, e `--display` di serie oggi e' un senza grazie. */ font-family: var(--display, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif); font-size: clamp(1.05rem, 1.6vw, 1.5rem); line-height: 1.15; letter-spacing: 0.06em; /* `--testo` e non il colore ereditato dal collegamento, che il tema tiene a `--testo-tenue`: il nome del marchio E' il contenuto della tessera, non una didascalia. */ color: var(--testo, inherit); text-align: center; text-wrap: balance; } /* ------------------------------------------------------------ RIDUCI IL MOVIMENTO ------------------------------------------------------------ `gr-sezioni.css` spegne le transizioni con un blocco fuori dai livelli — collocazione giusta per una preferenza di accessibilita', perche' non deve vincere quasi sempre, deve vincere. Quel blocco pero' nomina `.gr-marchio__collegamento`, che era l'elemento che si animava. Adesso si muove `.gr-marchio__immagine`, che li' non c'e': senza queste righe chi ha «riduci il movimento» acceso vede la fotografia ingrandirsi comunque. Il selettore ripete `:hover` e non si limita a `.gr-marchio__immagine`. Nello stesso livello decide la specificita', e `.gr-marchio__collegamento:hover .gr-marchio__immagine` vale 0,3,0 contro 0,1,0: il solo `transform: none` sull'immagine perderebbe proprio nel momento in cui serve. */ @media (prefers-reduced-motion: reduce) { :where(.gr-marchi) .gr-marchio__immagine, :where(.gr-marchi) .gr-marchio__collegamento:hover .gr-marchio__immagine { transition: none; transform: none; } } }