Temos um pouco de um mockup do Photoshop para trabalhar a partir daqui, à medida que continuamos a construir o modelo para a página individual da galeria.
Primeiro, estilizamos os links Próximo e Anterior. Eles estão em uma caixa posicionada absolutamente na barra da galeria, para que possamos centralizá-los na página, apesar dos outros botões e outras coisas já na barra. Eles têm a mesma classe do botão Enviar um, portanto, há constância lá.
Em seguida, temos essa coluna esquerda muito estreita para obter o texto. Começamos com uma grade de 1/8 7/8, mas 1/8 é um pouco fino demais. Mudamos para 1/4 3/4, mas isso é demais. Assim, como o lendário bebê urso, 1/6 5/6 estava certo.
Fazemos alguns trabalhos de tipografia nessa coluna estreita, adicionando no título (em um
claro, já que é o título mais importante da página), a descrição e outras seções. A maior parte da tipografia se ajusta com base em nossa configuração de tipografia simples e robusta.
A grade 5/6 é toda para a imagem. Legal e grande, o que é ótimo. Ele tem um fundo cinza claro, assim como as imagens em postagens de blog (por exemplo
Pensamos em criar um pouco mais de estilo com o estilo das tags. Damos uma olhada no CodePen (aqui está um link para a tag “tags”, META ALERT). Acabamos pensando que é um exagero e os deixamos como links normais.
Fazemos com que o botão “tamanho real” funcione de uma das maneiras mais simples possíveis, abrindo uma nova janela com as dimensões da imagem em tamanho real e mostrando a imagem nela. É como uma caixa modal do início dos anos 2000! Mas eu gosto. É simples, não precisa de um monte de código (como uma mesa de luz faria) e é óbvio para interagir. É ainda melhor, se você me perguntar.