/* ================================================================================================= * JURA Club — adattamento a WordPress * ================================================================================================= * IT: REGOLA DI AMMISSIONE, severa e non negoziabile: qui entra SOLO ciò che riguarda WordPress e * che nel sito Node non esiste. Nessuna regola di disegno. Nessun colore. Nessuna spaziatura * decisa qui. * * Il disegno vive in `tokens.css`, `base.css`, `componenti.css`, `sito.css`, `utilita.css`, * che sono gli stessi file del sito Node. Se una regola di questo foglio comincia a somigliare * a una decisione estetica, è nel posto sbagliato: va portata là, dove serve a entrambi. * * Motivo per cui la regola è severa: la prima versione del tema aveva un foglio «di * adattamento» che nel giro di poche ore era diventato una seconda definizione del sistema * visivo, con una griglia sua e distanze sue. È il modo in cui una copia diventa un secondo * originale, e poi divergono. * * SOMMARIO * 1. Contenitori dei blocchi — renderli trasparenti al disegno * 2. Blocchi che portano stili propri da neutralizzare * 3. L'editor * ============================================================================================= */ /* ------------------------------------------------------------------------------------------------- * 1. CONTENITORI DEI BLOCCHI * * Ogni blocco «Gruppo» produce un `div.wp-block-group` in più rispetto al markup delle viste * originali. Quel div non deve esistere agli occhi del disegno: non deve aggiungere margini, non * deve limitare larghezze, non deve creare contesti di impilamento. * ---------------------------------------------------------------------------------------------- */ /* IT: QUI NON C'È UN AZZERAMENTO DI `.wp-block-group`, ED È UNA CORREZIONE. * * La prima stesura di questo foglio apriva con `.wp-block-group { margin:0; padding:0 }` per * «rendere trasparente» il contenitore in più, e poi cercava di restituire le proprietà ai * gruppi che portano una classe del progetto con `revert-layer`. Non funziona: `revert-layer` * torna al livello di cascata precedente, e senza `@layer` quel livello è il foglio del * browser — non le regole di `componenti.css`. Risultato: `.sezione` perdeva i suoi 64px di * respiro verticale e l'intera pagina si leggeva compressa. * * La verità semplice è che `.wp-block-group` non porta margini né padding propri: il * contenitore in più è già trasparente da solo, e l'unico modo di romperlo era dichiarare * qualcosa su di lui. Quindi non si dichiara nulla. * * Il contenuto della pagina non è un contenitore: è il flusso. Le sezioni al suo interno vanno * da bordo a bordo, ed è ciò che rende possibili le fasce di colore a tutta larghezza. */ .wp-block-post-content, .wp-block-post-content > * { max-width: none; } /* ------------------------------------------------------------------------------------------------- * 2. BLOCCHI CON STILI PROPRI * ---------------------------------------------------------------------------------------------- */ /* Il blocco Elenco aggiunge la propria classe accanto a quella del progetto. Quando l'elenco è * una navigazione — la barra, il piè — il rientro dei pallini non c'entra nulla. */ .wp-block-list.barra-sito__voci, .wp-block-list.piede-sito__voci, .wp-block-list.colonna-catena__elenco { list-style: none; margin: 0; padding: 0; } /* Il blocco Immagine avvolge tutto in una `
`: dentro le figure del progetto, che hanno * già la loro misura, la figura di WordPress deve sparire. */ .eroe__figura .wp-block-image, .figura .wp-block-image { margin: 0; } /* Il blocco HTML non deve introdurre un contenitore visibile: serve solo a portare markup che i * blocchi non sanno produrre (i tag `