Alterações globais no tamanho da fonte
A maneira mais simples de alterar o tamanho da fonte de toda a sua comunidade seria substituir o valor padrão no elemento HTML do CSS do seu tema, assim:
html {
font-size: 17px; /* o padrão é 16px */
}
Como todos os nossos valores de font-size dentro de <html> são definidos com unidades em, aumentar o font-size em <html> aumentará proporcionalmente o tamanho da fonte de todos os outros elementos (ems são unidades relativas).
O Discourse também vem com opções de tamanho de texto selecionáveis pelo usuário que podem ser alteradas nas preferências de cada usuário (/my/preferences/interface), por padrão, elas são:
Menor: 13px
Menor: 14px
Normal: 16px (padrão)
Maior: 18px
Maior: 20px
Quando você altera o font-size de <html> como demonstrado acima, você está apenas alterando o valor Normal. Portanto, se você quiser que as configurações de tamanho de texto do usuário continuem funcionando no seu tema, você também deve aumentar o font-size para as outras opções. Se você quisesse aumentar o tamanho da fonte de todas as opções em 1px, ficaria assim:
: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;
}
Alterando o tamanho da fonte de componentes individuais
Você pode não querer aumentar o tamanho da fonte global da sua comunidade e apenas alterar o font-size de um componente específico, como o cabeçalho ou as postagens. Se você estiver familiarizado com CSS, pode segmentar elementos individuais como esperado.
Por exemplo, para aumentar o tamanho da fonte de todo o conteúdo dentro de uma postagem, você pode fazer isso:
.topic-post {
font-size: 1.2em;
}
Se você quisesse alterar o tamanho do texto do conteúdo da postagem, mas não os nomes de usuário e outras metainformações, você precisaria ser um pouco mais específico (clique com o botão direito em um elemento e use o inspetor do seu navegador se precisar descobrir qual elemento segmentar)…
.topic-post .contents {
font-size: 1.2em;
}
Note que nos exemplos acima estou usando unidades em. Você pode usar valores px aqui, mas a vantagem dos ems é que eles são relacionais.
Se você usasse unidades de pixel nos exemplos acima, esses tamanhos de fonte permaneceriam os mesmos, mesmo que um usuário alterasse a configuração de tamanho de texto em suas preferências. Um valor estático como 16px é sempre 16px. Mas quando você usa um valor como 1.2em, ele atua como um multiplicador… então, se alguém escolher um tamanho de texto maior nas configurações, o font-size sempre aumentará para ser 1,2x maior que a configuração base.
Utilizando as variáveis de dimensionamento de fonte do Discourse
Nos estilos padrão do Discourse, contamos com um conjunto de variáveis de dimensionamento de fonte. Você também pode usar essas variáveis em seus temas:
: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;
}
Este sistema garante que estamos usando um conjunto limitado de tamanhos de fonte que são dimensionados com base no tamanho global definido em html (e economiza o trabalho de fazer cálculos ao aninhar unidades em). Se um elemento for definido como font-size: var(--font-up-3), sabemos que ele será 1,5x maior que --font-0, independentemente do valor px específico.
Se você se sentir um pouco perdido, pode ser útil visualizar essas variáveis como uma escada. Se você tem um elemento com font-size: var(--font-up-3) e precisava que um filho desse elemento fosse o equivalente a --font-0, você precisaria descer 3 degraus na escada para chegar lá (então você usaria --font-down-3).
Aqui está em ação:
.topic-post {
font-size: var(--font-up-3); // 3 degraus para cima
.topic-meta-data {
font-size: var(
--font-down-3
); // 3 degraus de volta; equivalente a --font-0 (1em)
}
}
Este documento é controlado por versão - sugira alterações no github.