Guia de Estilos e Teste de Renderização

Esta página serve como um ambiente de teste (Kitchen Sink) para validar todos os estilos visuais, integrações e tipografia do Codex Gigas no modo claro e escuro.

1. Tipografia e Títulos

As fontes devem ser legíveis, com bom contraste.

Heading 1 (H1 é geralmente o título da página)

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Este é um parágrafo normal. A tipografia baseada em Inter garante que a leitura seja agradável mesmo em textos longos. Você pode usar texto em itálico, texto em negrito, texto com negrito e itálico, ou até texto tachado.

2. Links e Integrações

• Link externo clássico: Google
• Wikilink interno (Eleventy): object-detection
• Link para âncora: Pular para o final

3. Listas

Lista Não Ordenada:

• Item de nível 1
  • Subitem de nível 2
    • Subitem de nível 3
• Outro item principal

Lista Ordenada:

1. Primeiro passo
2. Segundo passo
   1. Passo 2.1
   2. Passo 2.2
3. Terceiro passo

4. Citações (Blockquotes)

“A simplicidade é o último grau de sofisticação.” — Leonardo da Vinci

Você pode aninhar blockquotes:

E eles devem recuar e ter bordas condizentes.

5. Código e Sintaxe

Texto contendo código inline como npm install playwright ou nomes de variáveis como const myVar = 10;. O código inline possui fundo claro no modo light e fundo escuro no modo dark.

Bloco de código com sintaxe (JavaScript):

// Exemplo de uma função assíncrona
async function fetchDados() {
  const response = await fetch("/api/data");
  const json = await response.json();
  console.log("Dados recebidos:", json);
  return json;
}

Bloco de código sem sintaxe especificada (Plain Text):

# Exemplo de arquivo de configuração ou saída de log
server=localhost
port=5500
debug=true

6. Matemática e Fórmulas (KaTeX)

Fórmulas no meio do texto, também chamadas de inline math, como a famosa equivalência massa-energia $E = mc^2$, devem se alinhar à altura da linha do parágrafo.

Fórmulas em bloco (display math) devem ser proeminentes e espaçadas:

$$\int*{a}^{b} x^2 \, dx = \left[ \frac{x^3}{3} \right]*{a}^{b} = \frac{b^3 - a^3}{3}$$

Eq. 1: Exemplo de integral definida renderizada com KaTeX.

$$\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}$$

Eq. 2: Uma das Equações de Maxwell.

7. Tabelas

As tabelas devem possuir bordas sutis e contraste no cabeçalho.

8. Linhas Horizontais

Abaixo temos uma quebra temática:

9. Integração e Aninhamento (Stress Test)

Aqui testamos como os estilos se comportam quando combinados (aninhados):

• Lista com Código em Bloco e Fórmulas:
  1. No primeiro passo definimos a variável:

     const limite = 100;

  2. Em seguida, calculamos o vetor $\vec{v} = \begin{bmatrix} x \\ y \end{bmatrix}$ (Matemática inline dentro da lista).
  3. E testamos um wikilink como roi-pooling dentro do texto formatado.

Citação Complexa: Aqui temos uma citação que inclui um codigo inline e uma tabela:

Col 1	Col 2
A	B

Além de uma equação no bloco:

$$\sum\_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$

Eq. 3: Problema de Basileia dentro do blockquote.

Tabela com Integrações

As colunas abaixo misturam links, código e matemática:

Se tudo nesta página estiver com espaçamento harmonioso, margens corretas e cores agradáveis tanto no modo Light quanto no Dark, o sistema de estilos está robusto e pronto para produção!