Font-family errato negli elenchi (con soluzione)

[rcoopcsc]

Prerequisiti

• Ho già cercato tra le issue la presenza di un problema simile
• Ho letto le linee guida di contribuzione

Descrivi il problema

Il contenuto inserito negli articoli e nelle pagine è reso nel frontend con il font-family "Lora", ma il css compilato fa erroneamente in "Titillium" le voci degli elenchi.

Abbiamo risolto il problema aggiungendo (nel nostro caso dal tema child) la seguente regola CSS:

.article-wrapper ul li:not(.card ul li) {
font-family: Lora,Georgia,serif!important;
}

Ciò permette di forzare la applicazione del font-family "Lora" solo e solamente per gli elementi indicati.

La mettiamo a disposizione della community per valutare la opportunità di includerla nella prossima release.

Includi link o screenshot

No response

Su quale sisitema operativo stai riscontrando il problema?

Windows

Su quale browser stai riscontrando il problema?

Qualsiasi

Che versione del tema stai utilizzando?

2.17.1

[astagi]

@zetareticoli lascio a te capire se la soluzione è corretta! @rcoopcsc per favore puoi aprire una PR risolutiva?

[rcoopcsc]

Ok riepilogo. Ora si vede così:

Aggiungendo la seguente regola nel CSS

/* fix elementi delle liste non ordinate */
.article-wrapper ul li:not(.card ul li) {
font-family: Lora,Georgia,serif!important;
margin: 0 0 22px 0;
}

Si vedrà così (meglio):

Se va bene, basta inserire il codice di cui sopra in fondo al CSS principale del tema, o anche nell'overrides.css che tanto avrebbe lo stesso effetto essendo caricato dopo nello stack - e così rimane più pulito il tutto.
@zetareticoli e @astagi diteci voi dove è meglio metterlo e procediamo (o fate voi come preferite).

[zetareticoli]

@rcoopcsc direi va bene nel file principale.

In merito alla soluzione, lo stile corretto dovrebbe prevedere più spazio tra titolo e paragrafo piuttosto che tra paragrafi o elenchi. Invece dallo screen vedo il contrario.

[rcoopcsc]

Personalmente sono d'accordo con @zetareticoli sul punto "lo stile corretto dovrebbe prevedere più spazio tra titolo e paragrafo" ma il fix in oggetto non incide direttamente sulla spaziatura tra titoli e paragrafi, quindi eventualmente quella parte va trattata in una PR separata. O sbaglio?

Per quanto riguarda invece a) i margini sopra e sotto gli elenchi e b) i margini tra gli elementi all'interno degli elenchi stessi, io avevo utilizzato per le <ul> lo stesso valore che c'è ora nelle <ol> (22px tra gli elementi <li> e "solo" 5px sotto la lista) per non andre a toccare altro... Però in effetti, già che ci mettiamo mano, sarebbe meglio diminuire lo spazio tra gli elementi all'interno delle liste ed aumentare quello sopra e sotto la lista (cosa che, incidentalmente, andrebbe anche ad aumentare lo spazio tra il titolo h2 e la eventuale lista (sempre che la lista sia il primo elemento dopo il titolo).

Cercando una soluzione equilibrata, propongo questa:

Che nel codice vorrebbe dire:

/* fix elementi delle liste non ordinate (solo negli articoli/eventi) */
.article-wrapper ul li:not(.card ul li) {
font-family: Lora,Georgia,serif!important;
margin: 0 0 5px 0;
}

/* fix elementi delle liste ordinate (solo negli articoli/eventi) */
.article-wrapper ol li:not(.card ol li) {
font-family: Lora,Georgia,serif!important;
margin: 0 0 5px 0;
}

/* fix margine inferiore e superiore delle liste (solo negli articoli) */
.article-wrapper ul, .article-wrapper ol {
margin: 22px 0 22px 0;
}

Ho lasciato i commenti nel CSS per favorire la discussione, magari poi li togliamo alla fine. Potete testare la cosa e dirci se va bene così o serve altro?

PS: @zetareticoli quando dici "nel file principale" intendi scuole.css? Ma quello non va modificato a partire dal suo corrispondente dei template statici o ricordo male? Perfavore chiariscimi la procedura - o fa tu così siamo sicuri :-)