È possibile sovrascrivere le variabili di Discourse?

Supporto
1

Ciao,

Sto cercando di modificare la tipografia, come font-family, font-weight e dimensioni del font, utilizzando le variabili di Discourse.

$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

Quindi, come posso cambiare la variabile heading-font-family, ad esempio con $heading-font-family: Arial;? Ho provato diversi metodi, ma le modifiche non sono visibili.

$heading-font-family: Arial;

:root {
  --heading-font-family: Arial;
}

Qualche idea?

1 Mi Piace
2

Forse dai un’occhiata a https://meta.discourse.org/t/selectable-font-family-component/117493?

4 Mi Piace
3

Grazie per la risposta.

In realtà esiste una funzionalità predefinita di Discourse per questo. Ma vorrei realizzare una personalizzazione tipografica più dettagliata.

image
image1480×436 20.6 KB

Quindi sto cercando un modo per modificare i valori delle variabili. Ho pensato che potrei facilmente cambiare l’intera tipografia.

dal file variables.scss

// Fonts
// --------------------------------------------------

$base-font-size-smallest: 0.815em !default; // eq. to 13px
$base-font-size-smaller: 0.875em !default; // eq. to 14px
$base-font-size: 0.938em !default; // eq. to 15px
$base-font-size-larger: 1.063em !default; // eq. to 17px
$base-font-size-largest: 1.118em !default; // eq. to 19px
$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

// Font-size defintions, multiplier ^ (step / interval)
$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; // 2^(1/5)
$font-0: 1em;
$font-down-1: 0.8706em; // 2^(-1/5)
$font-down-2: 0.7579em; // Smallest size we use based on the 1em base
$font-down-3: 0.6599em;
$font-down-4: 0.5745em;
$font-down-5: 0.5em;
$font-down-6: 0.4355em;

Pensi sia possibile modificare queste variabili?

2 Mi Piace
4

Oh. Pensavo che sembrasse vecchio e che ora ci fosse un modo migliore. Scusa per questo.

2 Mi Piace
5

Grazie per la risposta @pfaffman. Spero esista un modo per sovrascrivere queste variabili. Altrimenti, dovrò modificare le classi CSS.

1 Mi Piace
6

Riesegui la procedura guidata di configurazione: dalla versione beta 2.6, la selezione del font è diventata una fase della procedura guidata di configurazione.

4 Mi Piace
7

Grazie per la risposta @codinghorror. In questo modo possiamo scegliere solo alcuni font, giusto? E ho imparato che queste variabili non possono essere sovrascritte. È corretto?

8

@bekircem Ho appena testato la procedura guidata su 2.7.0.beta1 e i font disponibili sono gli stessi delle impostazioni del sito che hai pubblicato sopra (potrei star tralasciando qualcosa).

Probabilmente l’hai già scoperto, ma per sicurezza, puoi utilizzare Google Fonts oppure puoi sostituire le variabili CSS proprio come hai fatto nel tuo post originale, il che avrebbe dovuto funzionare.

Nella mia istanza sto usando questo CSS e funziona (caricando il font tramite <link/> o @include).

:root {
  --heading-font-family: 'Inter', sans-serif;
  --font-family: 'Inter', sans-serif;
}
2 Mi Piace