Tenemos un poco de una maqueta de Photoshop para trabajar desde aquí mientras continuamos construyendo la plantilla para la página de la galería individual.
Primero, diseñamos los enlaces Siguiente y Anterior. Están en un cuadro absolutamente posicionado en la barra de la galería, para que podamos centrarlos en la página a pesar de los otros botones y cosas que ya están en la barra. Toman la misma clase que el botón Enviar uno, por lo que hay constancia allí.
A continuación, tenemos esta columna izquierda muy delgada en la que obtener texto. Comenzamos con una cuadrícula de 1/8 7/8, pero 1/8 es un poco demasiado delgado. Lo cambiamos a 1/4 3/4 pero eso es demasiado. Entonces, como el legendario bebé oso, 1/6 5/6 era perfecto.
Hacemos un trabajo de tipografía en esa columna estrecha, agregando el título (en un
por supuesto, ya que es el título más importante de la página), la descripción y otras secciones. La mayor parte de la tipografía simplemente encaja en su lugar según nuestra configuración de tipografía simple y resistente.
La cuadrícula de 5/6 es toda para la imagen. Bonito y grande, lo cual es genial. Tiene un fondo gris claro, al igual que las imágenes en las publicaciones de blog (p. Ej.
Pensamos en ponernos un poco elegantes con el estilo de las etiquetas. Miramos a nuestro alrededor en CodePen (aquí hay un enlace a la etiqueta "etiquetas", META ALERT). Terminamos pensando que es exagerado y los dejamos como enlaces normales.
Hacemos que el botón "tamaño completo" funcione de una de las formas más sencillas posibles, abrimos una nueva ventana que tiene las dimensiones de la imagen a tamaño completo y muestra la imagen en ella. ¡Es como una caja modal de principios de los 2000! Pero me gusta. Es simple, no necesita un montón de código (como lo haría una caja de luz), y es obvio interactuar con él. Es incluso mejor, si me preguntas.
