15  Temas e estilos

Todos os livros da casa têm a mesma aparência: papel off-white, títulos em serifa, texto em sans-serif, um único tom de destaque. A aparência vive em dois arquivos que não mudam de livro para livro: theme-editorial.scss e styles.css.

15.1 Como o Quarto monta o tema

O HTML do Quarto é construído sobre o Bootstrap. A opção theme de _quarto.yml recebe uma lista: primeiro um tema pronto, depois o arquivo SCSS da casa, que o sobrescreve.

format:
  html:
    theme:
      - cosmo
      - theme-editorial.scss
    css: styles.css

Um arquivo SCSS de tema tem camadas marcadas por comentários especiais. Na camada defaults ficam as variáveis (cores, fontes, raios de borda) lidas pelo Bootstrap antes de compilar; na camada rules, as regras CSS que se aplicam depois.

/*-- scss:defaults --*/
$brand: #b45309;

/*-- scss:rules --*/
h2 { color: $brand; }

15.2 A paleta

Paleta do tema editorial
Variável Valor Uso
$paper #F9F9F7 fundo da página, navbar, blocos de código
$sidebar-bg #f2f2ee barra lateral
$border-color #e5e5e0 linhas e bordas
$text-primary #1a1a1a títulos, negrito
$text-body #333333 corpo do texto
$text-muted #888888 rodapé, sumário local, cabeçalhos de tabela
$brand #b45309 links, marcadores, títulos de seção, destaque
$brand-dark #92400e links ao passar o mouse

O mesmo conjunto é exposto como variáveis CSS (--paper, --brand…) em styles.css, para uso em HTML inline e na capa.

15.3 A tipografia

Três famílias, todas hospedadas no próprio site em fonts/ (formato WOFF2), declaradas por regras font-face em styles.css:

  • Playfair Display (serifa): título da página, subtítulo em itálico, nome do livro na barra superior, epígrafes da contracapa.
  • Inter (sans-serif): corpo do texto, navegação, títulos de seção.
  • JetBrains Mono (monoespaçada): código e números das listas.

Hospedar as fontes evita depender de um serviço externo e garante que o livro fique igual em qualquer rede. A hierarquia de títulos é deliberada: o H1 é grande e leve em serifa; o H2 é uma etiqueta pequena em caixa alta na cor de destaque; o H3 volta ao tamanho do texto, em peso semibold.

15.4 O que fica em styles.css

O SCSS cuida do tema; o CSS cuida do que precisa sobrescrever o Quarto depois do processamento:

  1. as declarações de fonte (font-face);
  2. as variáveis CSS expostas;
  3. a largura editorial (720 px em telas grandes) e as notas de rodapé compactas;
  4. a capa na primeira página e a miniatura na página de créditos;
  5. a animação de entrada ao trocar de página;
  6. a contracapa de epígrafes.

15.5 Rodapé

O rodapé é a identificação profissional exigida pelo Conselho Federal de Medicina (nome, especialidade, CRM e RQE) com o link para o site, centralizada sobre o fundo de papel. O texto vem de page-footer em _quarto.yml; o SCSS alarga a coluna central para que o registro não quebre no meio.

15.6 Regra de sincronização

Os arquivos de tema não se editam por projeto. Uma melhoria feita num livro é copiada para o modelo (Capítulo 21) e dali para os outros livros, para que todos continuem idênticos. Os três arquivos a sincronizar são theme-editorial.scss, styles.css e _language-pt.yml.

NotaPontos-chave
  • O tema é um SCSS em duas camadas (variáveis e regras) sobre o tema Cosmo do Bootstrap.
  • Paleta de papel, cinzas e um laranja queimado de destaque; três famílias tipográficas hospedadas em fonts/.
  • styles.css faz o que precisa vir depois do Quarto: fontes, largura, capa, contracapa.
  • Tema e CSS são iguais em todos os livros e se sincronizam pelo modelo.