Personalizar o Simple.css

O Simple.css nos dá uma base para um site limpo e bonito. Mas ele também oferece um jeito de personalizar sem um monte de trabalho extra da nossa parte. Ele usa um recurso do CSS chamado propriedades personalizadas (muitas vezes chamadas de variáveis). Essas variáveis permitem mudar cores e fontes num lugar só, com pouquíssimo código.

Uma espiada no Simple.css

Vamos abrir o arquivo simple.css que adicionamos ao site antes, para ver quais variáveis podemos acessar. Não se assuste com a quantidade de código no arquivo. A gente só precisa de um pedacinho. No topo do arquivo, você vai ver um código parecido com o seguinte.

/* Global variables. */
:root,
::backdrop {
  /* Set sans-serif & mono fonts */
  --sans-font: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir,
    'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica,
    'Helvetica Neue', sans-serif;
  --mono-font: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  --standard-border-radius: 5px;

  /* Default (light) theme */
  --bg: #fff;
  --accent-bg: #f5f7ff;
  --text: #212121;
  --text-light: #585858;
  --border: #898ea4;
  --accent: #0d47a1;
  --accent-hover: #1266e2;
  --accent-text: var(--bg);
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
}

Aqui já estamos entrando um pouco na sintaxe do CSS, mas talvez não seja tão assustador quanto parece. Vamos por partes.

No CSS, o navegador ignora o texto entre /* e */. É um jeito de escrever notas para você — ou para outras pessoas que lerem o código-fonte — chamadas de comentários. Neste caso, os comentários ajudam a separar o código em grupos relacionados.

O trecho que diz :root significa que o bloco de código a seguir — a parte entre as chaves, {} — vale para a página inteira. Ignore o ::backdrop por enquanto.

Dentro das chaves, encontramos uma lista de propriedades. Já vimos propriedades CSS num capítulo anterior. Por exemplo, usamos columns: 2 na página do currículo para organizar uma lista com marcadores em duas colunas. Nesse caso, columns é uma propriedade e 2 é um valor.

Qualquer propriedade que começa com -- é uma propriedade personalizada, ou variável. É um jeito de reutilizar um valor em vários lugares. Por exemplo, se tivéssemos uma variável --accent: blue, poderíamos usar a cor --accent em vários elementos ao mesmo tempo. E se um dia decidíssemos mudar o destaque para outra cor, digamos red, poderíamos atualizar num lugar só — escrevendo --accent: red — e todo elemento que usa a variável --accent seria atualizado sozinho.

Olhando de novo o código do Simple.css acima, vemos que temos dois grupos de variáveis. Há propriedades ligadas às fontes usadas, seguidas de uma lista de variáveis de cor que representam o que o Simple chama de “tema padrão (claro)”.

Vamos falar de fontes depois. Primeiro, as cores.

Neste caso, a maior parte das variáveis de cor aparece como códigos hexadecimais. Tudo o que você precisa saber sobre códigos hexadecimais é que eles são uma das várias formas de indicar uma cor no CSS. Abra quase qualquer mecanismo de busca e procure por “color picker”. Você vai encontrar um widget para escolher uma cor e pegar o código hexadecimal, junto com outros formatos.

Beleza, então como definimos as nossas próprias cores? A gente muda aqui dentro do simple.css? Você poderia fazer isso; funcionaria. Mas existe um jeito melhor.

Criar uma folha de estilo personalizada

CSS significa Cascading Style Sheets (folhas de estilo em cascata). Essa parte da cascata é especialmente útil. De forma simples, isso significa que a ordem das regras CSS importa — regras que vêm depois sobrescrevem as que vieram antes. Para o nosso caso, isso significa que podemos criar o nosso próprio arquivo CSS. E, desde que o navegador o processe depois do simple.css, as regras que escrevermos ali vão prevalecer. Então não estamos mudando o simple.css. Estamos sobrescrevendo ele.

Crie um arquivo na pasta assets/css chamado custom.css.

Agora vamos ligá-lo ao site. Você vai precisar fazer isso em todas as páginas, mas vamos começar pela página inicial, o arquivo index.html do nível mais alto. Na seção <head>, já estamos referenciando o simple.css com uma tag <link>. Vamos fazer o mesmo para o nosso novo arquivo custom.css, logo embaixo. A ordem importa aqui. Queremos que a nossa folha de estilo venha depois da do Simple, para podermos sobrescrever as variáveis dele.

<head>
  <title>Blake's Homepage</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="css/simple.css">
  <link rel="stylesheet" href="css/custom.css">
</head>

Agora vamos adicionar algumas sobrescritas. No arquivo custom.css, primeiro vamos montar um bloco :root parecido com o do simple.css. Depois pegamos uma das variáveis, digamos --bg (a cor de fundo), e definimos como red.

:root {
  --bg: red;
}

Se você recarregar a página, deve ver um fundo vermelho, admitidamente horroroso. Vamos escolher uma cor melhor. Você pode buscar uma ferramenta de escolha de cores na web, usar uma das muitas cores nomeadas do CSS ou, se estiver usando o Visual Studio Code, usar o seletor de cores embutido passando o mouse sobre um valor de cor.

Mas, antes de escolher cores, vamos falar do modo escuro.

Modo escuro

O Simple já tem suporte automático aos modos claro e escuro, com base na configuração do sistema de quem visita. Você pode ter notado isso se ligou o modo escuro nas configurações do sistema. Se olharmos o arquivo simple.css, vemos a versão de modo escuro de todas as variáveis logo abaixo das outras que vimos antes.

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    color-scheme: dark;
    --bg: #212121;
    --accent-bg: #2b2b2b;
    --text: #dcdcdc;
    --text-light: #ababab;
    --accent: #ffb300;
    --accent-hover: #ffe099;
    --accent-text: var(--bg);
    --code: #f06292;
    --preformatted: #ccc;
    --disabled: #111;
  }
  /* Add a bit of transparency so light media isn't so glaring in dark mode */
  img,
  video {
    opacity: 0.8;
  }
}

Este bloco usa um recurso do CSS chamado media queries. Neste caso, a regra @media diz que os estilos de dentro do bloco devem valer se a pessoa tiver indicado preferência pelo modo escuro.

A primeira regra define o esquema de cores padrão como escuro e depois redefine as variáveis de cor que valem para o documento raiz (ou seja, a página inteira). A segunda regra deixa imagens e vídeo um pouco transparentes, para não ficarem “tão ofuscantes no modo escuro”.

Não sabemos se quem visita o nosso site prefere o modo claro ou o escuro. Por isso, devemos definir cores adequadas para os dois modos. Se quiser, você pode copiar esses dois blocos de código (o bloco “Global variables” e o bloco “Dark theme”) do simple.css para o seu custom.css e então mudar os valores de cor como preferir. Ou pode especificar só as que quiser mudar. De qualquer forma, garanta que as cores certas estejam na seção certa.

Um exemplo de personalização

Para o tema claro padrão, eu decidi ficar só com cores nomeadas do CSS, como um exercício divertido. Você pode pensar nas cores nomeadas como uma caixa de giz de cera — tem muitas, mas elas não representam todas as cores possíveis. Ainda assim, são um jeito fácil de se referir a cores de forma humana.

Por outro lado, as cores do modo escuro pediram um toque mais fino. Eu usei o seletor de cores embutido do Visual Studio Code para escolher algumas cores específicas. Elas aparecem no formato rgb aqui porque foi o que o editor fez por padrão quando eu selecionei as cores.

Este é o código que eu coloquei no meu custom.css.

:root {
  --bg: mintcream;
  --border: darkslategray;
  --accent-bg: honeydew;
  --text: darkslategray;
  --accent: mediumvioletred;
  --accent-hover: mediumvioletred;
  --marked: mediumspringgreen;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    color-scheme: dark;
    --bg: rgb(17, 18, 18);
    --border: rgb(80, 90, 90);
    --accent-bg: rgb(35, 35, 36);
    --text: ghostwhite;
    --accent: lightskyblue;
    --accent-hover: lightblue;
    --marked: gold;
  }
}

Aqui vai uma prévia lado a lado da aparência da página de índice do blog nos modos claro e escuro.

Escolher cores acessíveis

Algumas combinações de cor podem deixar o texto difícil de ler por causa do pouco contraste. Você quer garantir bastante contraste entre a cor do texto e a cor do fundo.

Você pode confiar nos olhos até certo ponto, mas cada pessoa é diferente. Felizmente, existem padrões sobre quanto contraste o texto deve ter. Você pode usar um verificador de contraste como este. Dê duas cores a ele, e ele diz se o contraste entre elas é suficiente.

Mudar a fonte

Eu passei rápido por isso antes, mas você pode ter notado algumas variáveis ligadas a fontes acima das variáveis de cor definidas no simple.css. Uma delas, --sans-font, é responsável pela maior parte do texto da página (a outra, --mono-font, é usada para coisas como mostrar código, como eu estou fazendo neste parágrafo).

Se você não conhece, fontes sans-serif são aquelas que não têm serifa, aqueles pezinhos que você encontra em outras fontes, como Times New Roman. O Simple usa a variável --sans-font para a maior parte do texto da página por padrão, mas podemos sobrescrever com o que quisermos.

Primeiro, vamos falar de fontes na web.

Fontes na web

Quem visita o seu site só consegue ver fontes instaladas no sistema dessa pessoa. Isso significa que, se você, quem escreve a página, especificar no CSS alguma fonte aleatória baixada de um site, você vai ver essa fonte na página. Mas quem visita vai ver uma alternativa (fallback), a menos que essa pessoa também tenha a fonte instalada.

É por isso que, em geral, várias fontes são especificadas no CSS. Se a primeira fonte não estiver disponível no computador ou no aparelho de quem visita, o navegador tenta a próxima, e assim por diante.

body {
  /* the first font needs quotes because the name includes spaces */
  font-family: "Some Rando Font", Georgia, serif;
}

A regra de estilo acima define a fonte do <body>. O navegador primeiro tenta usar “Some Rando Font”. Se ela não estiver disponível no aparelho de quem visita, ele tenta usar Georgia. Se essa também não estiver, dissemos ao navegador para usar a fonte serif padrão que ele tiver.

Aqui vai uma boa referência para encontrar fontes comuns nos aparelhos das pessoas e ver as suas opções. Você sempre vai querer oferecer algumas alternativas decentes também.

Às vezes, você tem uma fonte que realmente quer que as pessoas vejam, mesmo sabendo que elas não vão tê-la instalada. Felizmente, existe um jeito de lidar com isso. Chamam-se fontes da web (web fonts). Elas são complexas demais para cobrir aqui, mas eu falo delas de forma breve no próximo capítulo, Básico de CSS. Em resumo, é um método de fornecer a fonte automaticamente a quem visita.

Sobrescrever a variável da fonte

Vamos usar uma fonte serifada. Mesmo o Simple chamando a variável de --sans-font, não há nada de mágico no nome. Podemos definir o que quisermos. Vamos usar Georgia, que é sempre um prazer de ler.

Podemos sobrescrever a variável --sans-font do Simple dentro do bloco :root, para que valha para a página inteira.

:root {
  --sans-font: Georgia, "Times New Roman", serif;
  --bg: mintcream;
  --border: darkslategray;
  --accent-bg: honeydew;
  --text: darkslategray;
  --accent: mediumvioletred;
  --accent-hover: mediumvioletred;
  --marked: mediumspringgreen;
}

Nós especificamos a fonte Georgia, mas também oferecemos duas alternativas. Colocamos Times New Roman como segunda opção. Observe que esta precisa ir entre aspas porque o nome tem espaços.

Usamos uma palavra-chave do CSS, serif, para a terceira opção. Isso diz ao navegador para usar a fonte serifada padrão dele, seja qual for. Muitas vezes, vai ser Times New Roman. Outras palavras-chave que você tem aqui são sans-serif, monospace e cursive, entre outras

Aqui vai um dos posts do blog composto em Georgia.

Deixe com a sua cara

Eu escolhi o Simple.css para este livro porque ele deixa o HTML bonito sem trabalho extra. Mas também escolhi porque ele pode ser personalizado com algumas variáveis CSS. Mesmo sendo só cores e fontes, as possibilidades de deixar o seu site único são infinitas.

Eu te animo a explorar o mundo da cor e experimentar combinações diferentes. No próximo capítulo bônus, eu cubro ainda mais CSS, para você ir além do Simple e escrever os seus próprios estilos.

A seguir