Modifiche globali alla dimensione dei caratteri
Il modo più semplice per modificare la dimensione dei caratteri dell’intera community sarebbe sovrascrivere il valore predefinito sull’elemento HTML nel CSS del tuo tema, in questo modo:
html {
font-size: 17px; /* il predefinito è 16px */
}
Poiché tutti i nostri valori font-size all’interno di <html> sono definiti con unità em, l’aumento di font-size su <html> aumenterà proporzionalmente la dimensione del carattere di tutti gli altri elementi (le em sono unità relative).
Discourse include anche opzioni di dimensione del testo selezionabili dall’utente che possono essere modificate nelle preferenze di ciascun utente (/my/preferences/interface), per impostazione predefinita sono:
Più piccolo: 13px
Più piccolo: 14px
Normale: 16px (predefinito)
Più grande: 18px
Più grande: 20px
Quando modifichi la dimensione del carattere di <html> come dimostrato sopra, stai modificando solo il valore Normale. Quindi, se vuoi che le impostazioni di dimensione del testo dell’utente continuino a funzionare nel tuo tema, dovresti anche aumentare la font-size per le altre opzioni. Se volessi aumentare la dimensione del carattere di tutte le opzioni di 1px, apparirebbe così:
:root {
--base-font-size-smallest: 14px;
--base-font-size-smaller: 15px;
--base-font-size: 17px;
--base-font-size-larger: 19px;
--base-font-size-largest: 21px;
}
Modifica della dimensione dei caratteri dei singoli componenti
Potresti non voler aumentare la dimensione globale dei caratteri della tua community e voler modificare solo la font-size di un componente specifico, come l’intestazione o i post. Se hai familiarità con il CSS, puoi indirizzare elementi individuali come previsto.
Ad esempio, per aumentare la dimensione del carattere di tutto il contenuto all’interno di un post puoi fare così:
.topic-post {
font-size: 1.2em;
}
Se volessi modificare la dimensione del testo del contenuto del post, ma non i nomi utente e altri metadati, devi essere un po’ più specifico (fai clic destro su un elemento e usa l’ispettore del tuo browser se hai bisogno di capire quale elemento indirizzare)…
.topic-post .contents {
font-size: 1.2em;
}
Nota che negli esempi precedenti sto usando unità em. Puoi usare valori px qui, ma il vantaggio delle em è che sono relazionali.
Se usassi unità pixel negli esempi precedenti, tali dimensioni dei caratteri rimarrebbero le stesse anche se un utente modificasse l’impostazione della dimensione del testo nelle proprie preferenze. Un valore statico come 16px è sempre 16px. Ma quando usi un valore come 1.2em, agisce come un moltiplicatore… quindi se qualcuno sceglie una dimensione del testo più grande nelle sue impostazioni, la font-size aumenterà sempre fino a essere 1,2 volte più grande dell’impostazione di base.
Utilizzo delle variabili di ridimensionamento dei caratteri di Discourse
Negli stili predefiniti di Discourse ci affidiamo a una serie di variabili di ridimensionamento dei caratteri. Puoi usare anche queste variabili nei tuoi temi:
:root {
--font-up-6: 2.296em;
--font-up-5: 2em;
--font-up-4: 1.7511em;
--font-up-3: 1.5157em;
--font-up-2: 1.3195em;
--font-up-1: 1.1487em;
--font-0: 1em;
--font-down-1: 0.8706em;
--font-down-2: 0.7579em;
--font-down-3: 0.6599em;
--font-down-4: 0.5745em;
--font-down-5: 0.5em;
--font-down-6: 0.4355em;
}
Questo sistema assicura che stiamo utilizzando un insieme limitato di dimensioni dei caratteri che si ridimensionano in base alla dimensione globale impostata su html (e ti evita di fare calcoli quando annidi unità em). Se un elemento è impostato su font-size: var(--font-up-3), sappiamo che sarà 1,5 volte più grande di --font-0, indipendentemente dal valore px specifico.
Se ti senti un po’ perso, potrebbe essere utile visualizzare queste variabili come una scala. Se hai un elemento con font-size: var(--font-up-3) e hai bisogno che un figlio di quell’elemento sia equivalente a --font-0, dovrai scendere di 3 gradini sulla scala (quindi useresti --font-down-3).
Ecco in azione:
.topic-post {
font-size: var(--font-up-3); // 3 gradini in su
.topic-meta-data {
font-size: var(
--font-down-3
); // 3 gradini indietro; equivalente a --font-0 (1em)
}
}
Questo documento è controllato in versione - suggerisci modifiche su github.