/** * TextBoxed — aspetto. BLOCCO NUOVO, non un porting. * * A differenza di Accordion e TextImage qui non c'è nessuna sorgente da cui copiare: non * esiste un widget elewidget corrispondente. È un riquadro con lo sfondo colorato e gli * angoli stondati, e dentro del testo libero. * * LO SCOPE. Come gli altri fogli dei componenti: tutto prefissato `.se-gjs-page`, che * esiste sia sul frontend (il div del filtro the_content) sia nel canvas (classe * sull' dell'iframe). Un foglio solo, caricato nei due posti. * * I DUE NODI. `.textBoxed` è il contenitore — sfondo, angoli, spaziatura, ed è flex come * ogni contenitore di SE Builder (08-regole-dei-blocchi.md, regola zero). * `.textBoxed-content` è il testo, e resta `block`: è prosa, non impaginazione, e da flex * ogni paragrafo diventerebbe un elemento flex con i margini che smettono di fondersi. */ .se-gjs-page .textBoxed { /* I due valori che si ritoccano: colore e stondatura. Stanno in variabili perché cambiarli è il tipo di richiesta che arriva, e così è una riga sola — non una caccia alle occorrenze dentro il foglio. */ --se-textboxed-bg: #eceff3; --se-textboxed-radius: 16px; display: flex; flex-direction: column; gap: 0; width: 100%; background: var(--se-textboxed-bg); border-radius: var(--se-textboxed-radius); padding: 2rem 2.5rem; } /* Il testo. `block` di proposito: vedi la testata. */ .se-gjs-page .textBoxed .textBoxed-content { width: 100%; } /* I paragrafi: stessa misura del testo del TextImage, così due blocchi vicini non sembrano scritti da due mani diverse. L'ultimo senza margine sotto, o il riquadro risulterebbe più spaziato in basso che in alto. */ .se-gjs-page .textBoxed p { font-size: 18px; font-weight: 400; line-height: 1.5; margin: 0 0 1rem; } .se-gjs-page .textBoxed p:last-child { margin-bottom: 0; } /* Sul telefono il riquadro si stringe: 2.5rem di respiro laterale su uno schermo da 390px sono un sesto della larghezza. */ @media screen and (max-width: 767px) { .se-gjs-page .textBoxed { padding: 1.5rem; } }