Avanzamos un poquito aquí. Esta es una serie de screencast bastante completa, pero solo dura 40 horas aproximadamente y, por supuesto, este proyecto real es en realidad más como unos pocos cientos. En este caso, el salto hacia adelante fue darle un poco de estilo a la extensión de dos páginas. Atravesamos esos cambios al principio.
Las páginas izquierda y derecha tienen un nombre de clase compartido y otro diferente. Esto es muy común que encuentro en muchos escenarios diferentes en el diseño web. En este caso, las páginas comparten el mismo degradado y el mismo tamaño. Pero difieren cuando aplicamos una skew()transformación CSS3 . Esto nos da un efecto de "libro abierto" un poco ordenado. Debido a que todos estos efectos se crean con CSS, se escalan bien (de una manera que una imagen casi seguramente no lo haría).
Teníamos una solución inteligente de alturas iguales, pero desafortunadamente debido a nuestro inteligente material de libro abierto sesgado, eso se rompe. En su lugar, solo usamos un toque de JavaScript.
Primero, mientras miramos el JavaScript, escribimos una línea que ocultará cualquiera de las "letras" que no tienen hijos. Por ejemplo, no hay selectores que comiencen con "Z", pero tenemos una página publicada llamada así para ser más completa. Los descubrimos (y luego los ocultamos) con el :has()selector jQuery ultra útil .
Para las alturas iguales, medimos las dos columnas, decidimos cuál es la más alta y luego establecemos ambas en la más alta. Tenemos que usar un setTimeout ligeramente hacky para que funcione correctamente debido a que la carga de @ font-face tarda un poco y afecta las alturas. En última instancia, podríamos usar algún tipo de devolución de llamada del cargador de fuentes. (O eso podría ser una exageración).
Luego pasamos a páginas de almanaque individuales. ¡Camine rápido ahora! Hemos hecho este tipo de cosas tantas veces que no es de extrañar que estemos avanzando más rápido. Básicamente, le damos forma a esta plantilla de la misma manera que diseñamos una sola publicación de blog o una página genérica o algo por el estilo.
Usamos una “barra negra” para las migas de pan, consolidando este patrón de diseño como algo que usaremos una y otra vez para la navegación de la sección del sitio.