Style Tester

30 Sep, 2026

Este post existe só para testar paletas e estilos. Ele usa todos os elementos que o CSS do blog estiliza, então basta rolar a página para julgar uma paleta. Selecione este texto para ver a cor de seleção, e clique no link interno, na nota de rodapé e no coração para ver os estados de hover e de destino.

1. Estilos de texto

Texto normal, depois texto em negrito, texto em itálico, negrito e itálico (o estilo chamativo), texto riscado, texto destacado e código inline. Também H₂O, o 6^o andar, palavras sublinhadas, um comentário pequeno e apagado, o atalho Ctrl + Z e um spoiler escondido (passe o mouse para revelar).

Combinações: negrito dentro de destaque, itálico riscado, código em negrito e itálico com uma parte em negrito no meio.

Links: um link interno para a seção de listas, um link externo com seta e uma nota de rodapé¹ que leva até o fim da página.

Um parágrafo mais longo para testar o conforto de leitura: o grupo desceu até a cisterna embaixo da antiga alfândega, onde a água era preta e perfeitamente parada. Em algum lugar lá embaixo um sino tocou uma vez, lento e rachado, e todas as tochas se inclinaram para o mesmo lado ao mesmo tempo. Ninguém falou. Mara conferiu a corda, Ilan conferiu a faca, e a cartógrafa escreveu três palavras no caderno e depois riscou de novo.

2. Listas

• Primeiro item
• Segundo item com negrito e código
  • Item aninhado
  • Outro item aninhado
    • Terceiro nível
• Terceiro item

1. Primeiro passo
2. Segundo passo
   1. Subpasso um
   2. Subpasso dois
3. Terceiro passo, com uma lista dentro
   • Aninhamento misto

3. Citações e caixas

Citação simples:

O rift não se abre. Ele lembra que nunca foi fechado. Uma citação pode ocupar algumas linhas, para mostrar a borda lateral e a cor do texto.

Caixa de leitura em voz alta (citação com título de nível 2):

Leia em voz alta

A porta gira para dentro sozinha. Do outro lado, um longo corredor de vidro negro, e no vidro os seus reflexos já estão caminhando na frente de vocês.

Caixas de aviso (citação com título de nível 4, 5 ou 6):

Informação

Contexto útil para quem lê. Usa a cor de informação, que é a mesma em todas as paletas.

Atenção

Algo em que se deve ter cuidado. Negrito e código funcionam aqui dentro.

Um segundo parágrafo, para testar o espaço entre parágrafos.

Perigo

Algo que pode dar muito errado. Usa a cor de perigo.

4. Tabela

5. Código

Código inline: chame rolar(d20) e compare com CD 15.

Bloco com destaque de sintaxe (com linguagem):

#include <stdio.h>

/* resolve uma jogada de ataque */
int ataque(int bonus) {
    int rolagem = 17; // finge que é um d20
    if (rolagem + bonus >= 15) {
        printf("Acertou, dano %d\n", 3.5 * 2);
        return 1;
    }
    return 0;
}

Bloco simples (sem linguagem):

Diário da descida, andar 6
  tochas:  3
  corda:   12 m
  moral:   abalada

6. Imagem com legenda

7. Seções recolhíveis

9. Lista de índice

• 01 Visão geral
• 02 Classes (atual)
• 03 Equipamento
• 04 Bestiário (em breve)

10. Lista de posts

• 04 Oct, 2026 eleicao2026
• 03 Oct, 2026 Stop worrying, this is not your job
• 03 Oct, 2026 workaholics
• 01 Oct, 2026 Gimme vacation pretty please

11. Linha e espaçamento

Uma linha horizontal vem depois desta frase.

Texto depois da linha, depois um espaçador (2em) e mais texto.

Texto depois do espaçador.