Nós avançamos um pouquinho aqui. Esta é uma série de screencast bastante abrangente, mas tem apenas 40 horas ou mais e, claro, este projeto real é na verdade mais como algumas centenas. Nesse caso, o salto adiante foi estilizar um pouco o spread de duas páginas. Passamos por essas mudanças no início.
As páginas esquerda e direita têm um nome de classe compartilhado e um diferente. Isso é super comum que encontro em muitos cenários diferentes em web design. Nesse caso, as páginas compartilham o mesmo gradiente e o mesmo tamanho. Mas eles diferem quando aplicamos uma skew()transformação CSS3 . Isso nos dá um efeito de “livro aberto” bem legal. Como todos esses efeitos são criados com CSS, eles se adaptam bem (de uma forma que uma imagem quase certamente não faria).
Tínhamos uma solução inteligente de alturas iguais implementada, mas, infelizmente, por causa de nosso livro aberto e inteligente, isso quebrava. Em vez disso, usamos apenas um toque de JavaScript.
Primeiro, enquanto olhamos para o JavaScript, escrevemos uma linha que irá esconder qualquer uma das “letras” que não têm filhos. Por exemplo, não há seletores que começam com “Z”, mas temos uma página publicada chamada isso apenas para ser abrangente. Nós os descobrimos (e depois os ocultamos) com o :has()seletor jQuery ultra-útil .
Para alturas iguais, medimos ambas as colunas, decidimos qual é a mais alta e, em seguida, definimos ambas para a mais alta. Temos que usar um setTimeout ligeiramente hackeado para que funcione corretamente por causa do carregamento de @ font-face demorando um pouco e afetando as alturas. No final das contas, poderíamos usar algum tipo de retorno de chamada do carregador de fonte. (Ou, isso pode ser um exagero).
Em seguida, passamos para páginas de almanaque individuais. Caminhando rápido agora! Já fizemos esse tipo de coisa tantas vezes agora que não é surpresa que estamos nos movendo mais rápido. Essencialmente, moldamos esse modelo da mesma forma que estilizamos uma única postagem de blog ou uma página genérica ou qualquer coisa assim.
Usamos uma “barra preta” para as migalhas de pão, consolidando esse padrão de design como algo que usaremos continuamente para navegação de seção do site.