# Caixas e imagens

Blocos de conteúdo para explicar, comparar e mostrar uma solução.

Página: https://resumos.rgo.pt/exemplo/formatacao/

## Notas e avisos

Usa uma caixa quando a informação precisa de se distinguir do texto. Um aviso não precisa de ser um parágrafo inteiro em negrito.

Antes de começar

Este exemplo usa Markdown dentro de uma página MDX. A mesma sintaxe funciona nos ficheiros `.md`.

Um atalho útil

Agrupa os termos simétricos antes de calcular uma soma. Isso ajuda a ver o padrão.

Atenção aos limites

Confirma se a soma começa em zero ou em um. O primeiro termo pode mudar o resultado.

Divisão por zero

Antes de dividir por uma expressão, confirma que ela não é zero.

```
:::tip[Um atalho útil]
Texto com **negrito**, ligações e $fórmulas$.
:::
```

## Uma ideia à margem

Um parêntese reto na margem destaca uma explicação curta sem a pôr dentro de uma caixa.

Ideia-chave

Destaca a condição que muda o resultado. Se tudo estiver destacado, deixa de ser claro onde olhar primeiro.

```
import Bracket from '../../../components/Bracket.astro';

<Bracket label="Ideia-chave">A explicação que queres destacar.</Bracket>
```

## Soluções que podes abrir

Ver a resolução de um exercício

Para $n = 4$, a fórmula dá $4(4+1)/2 = 10$.

O cálculo direto chega ao mesmo resultado: $1 + 2 + 3 + 4 = 10$.

```
:::details[Ver a resolução]
A solução fica aqui. Experimenta primeiro sem a abrir.
:::
```

## Comparar exemplos

Os separadores deixam comparar duas versões sem repetir a explicação. Também funcionam com as teclas de seta.

```
n = 4
print(n * (n + 1) // 2)
```

```
int n = 4;
std::cout << n * (n + 1) / 2;
```

## Imagens nos dois temas

As fotografias e os logótipos devem manter as cores. Para uma imagem muito clara, podes reduzir o brilho em modo escuro. Para um esquema com fundo branco, podes inverter as cores. Escolhe o filtro ao escrever a página e verifica o resultado nos dois temas.

### Cores originais

![Quatro filas de pontos, com um, dois, três e quatro pontos.](https://resumos.rgo.pt/examples/pontos.svg)

A mesma imagem usada no exemplo de somas. [Abrir imagem](https://resumos.rgo.pt/examples/pontos.svg)

### Menos brilho em modo escuro

![As mesmas quatro filas de pontos, com brilho reduzido em modo escuro.](https://resumos.rgo.pt/examples/pontos.svg)

O filtro só se aplica no tema escuro. [Abrir imagem](https://resumos.rgo.pt/examples/pontos.svg)

### Esquemas em modo escuro

![Quatro filas de pontos, com as cores invertidas em modo escuro.](https://resumos.rgo.pt/examples/pontos.svg)

Confirma sempre se as cores continuam a fazer sentido. [Abrir imagem](https://resumos.rgo.pt/examples/pontos.svg)

```
import Figure from '../../../components/Figure.astro';

<Figure
  src="/examples/pontos.svg"
  alt="Descrição do que a imagem mostra."
  caption="Legenda e crédito da imagem."
  dark="dim"
/>
```

Em Markdown simples, também podes escolher o filtro:

```
::image{src="/examples/pontos.svg" alt="Quatro filas de pontos." dark="dim"}
```

## Preparar uma página

Cria um ficheiro na pasta da cadeira, escolhe a secção e indica a ordem. A navegação aparece automaticamente. O [guia de contribuição](https://github.com/rodrgds/resumos/blob/main/CONTRIBUTING.md) mostra a estrutura e os campos.