second-brain

Ronda de acabado · tema Rebeca Pal

Se lee en 7 min

Ronda de acabado · tema Rebeca Pal

Proyecto: Rebeca Pal · 02-tema/rebeca-pal (v0.2.2) · rama tema-0.2.2-arreglos · PR #2 Fecha: 2026-08-13 Referencia de diseño: figma/ (los cuatro exports) y 01-html/RECETARIO.md §7 Ronda anterior: [CREDENCIAL].md (arreglos 1–5)

Objetivo de esta ronda: pasar de “coincide con el diseño” a “está bien hecho”. El diseño ya está replicado; lo que falta es acabado, estados y los datos reales.

Ya aplicado (verificado sirviéndose en local, no en render)

Puntos del hero sobre la imagen. Eran un widget hermano después del hero, de ahí la franja blanca con los puntos flotando debajo. Ahora .rp-hero es el bloque contenedor y los puntos van absolutos sobre la foto: 19px del borde en móvil, 47px en escritorio. Se fuerzan a la variante clara porque el markup traía --tinta, que sobre una foto en blanco y negro no se distingue.

Hamburguesa a ancho completo. El panel se anclaba al widget del menú, arrastrado a la derecha: de ahí la cajita blanca en la esquina. El header pasa a ser el bloque contenedor y el widget a position:static, así el panel abre left:0; right:0 bajo la barra dorada, con fondo oro, filete superior, ítems centrados de 18px de alto y separadores tenues. Sin 100vw ni transforms, que es lo que se rompe con la barra de scroll. La animación la sigue haciendo slideToggle de Elementor.

Falta confirmarlo a ojo: el navegador del entorno no alcanza rebecapal.local.

1 · Defectos abiertos

rp-cabeza se dibuja gigante sobre “Libros”

Mismo patrón que ya corregimos en las tarjetas: la clase está sobre el div del widget de Elementor, no sobre el <img>. .rp-cabeza{width:308px} dimensiona el contenedor, pero la imagen de dentro sale a su tamaño natural — 1000×498 — y se come el encabezado de la sección. Lo mismo con .rp-yosoy-foto, donde aspect-ratio y object-fit van sobre el div y no hacen nada.

.rp-cabeza img{ width:100%; height:auto; display:block; }
.rp-yosoy-grid .rp-yosoy-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.rp-yosoy-grid .rp-yosoy-foto{ aspect-ratio:375/423; }          /* móvil */
@media (min-width:1280px){
  .rp-yosoy-grid .rp-yosoy-foto{ aspect-ratio:457/494; }
}

En Figma la cabeza mide 308px de ancho, arranca en x=728 y va de y=1480 a 1619: solapa el borde entre “Yo soy” y “Libros” sin tocar el titular.

Tarjetas de libro desalineadas entre sí

Los títulos de una y tres líneas empujan género·año y el botón, así que los tres “Comprar” quedan a alturas distintas. Reserva altura para el título o alinea el botón al final de la tarjeta. Con dos filas (cuarto libro) esto se nota el doble.

A ~480px las tarjetas se cortan

Dos tarjetas lado a lado con el título truncado (“LOS SIETE SUICIDIOS C”). Entre el carrusel de una tarjeta y la retícula de tres falta definir qué pasa. Propuesta: el carrusel de uno en uno se mantiene hasta 767px y la retícula de tres entra desde 768.

El blog no está diseñado

/blog/ sale con “Archivos / Hello world!” y estilos sueltos. Decidir: o entra en el sistema (plantilla de archivo y de entrada, con la retícula y la tipografía del tema), o se quita del sitio antes de publicar. Hoy es una puerta trasera a un WordPress sin diseñar.

2 · Pasada de acabado

Esto es lo que separa un tema correcto de uno bien hecho. Ninguno es visible en el Figma; todos se notan al usarlo.

Estados. Hover y :focus-visible en enlaces, botones, tarjetas y puntos del carrusel. Hoy sólo hay filter:brightness() en los botones. El foco debe verse con teclado: un anillo en borgoña con offset, no el outline del navegador.

Ritmo vertical. Las secciones tienen paddings medidos del Figma a 375 y 1280, pero entre medias interpolan sin criterio. Revisar a 480, 768 y 1024 que la respiración no se colapse ni se dispare.

Imágenes. width/height explícitos en las portadas y en la foto de “Yo soy” para que no haya salto de layout al cargar; loading="lazy" sólo por debajo del pliegue — el hero debe ir con fetchpriority="high" y sin lazy.

Transiciones. Unificar duración y curva en un par de tokens (--rp-t-rapida: .2s ease, --rp-t-suave: .35s ease) y usarlos en todo. Hoy conviven .2s y .25s sueltos.

Movimiento reducido. Ya hay un bloque prefers-reduced-motion; ampliarlo al autoavance del hero y al scroll-behavior:smooth de los carruseles.

Tipografía. Evitar viudas en los titulares de dos palabras. Revisar que los títulos largos de libro no rompan la retícula en ningún ancho.

Accesibilidad. El carrusel necesita aria-label en la región y los puntos deben anunciar la posición (“Obra 2 de 4”). El toggle del menú, aria-expanded. Contraste del texto oro #7D6C3E sobre #F8F8F6: verificar que pasa AA en los tamaños chicos (género·año va a 15px).

Rendimiento. Las tres fuentes se precargan sólo en los pesos que se usan arriba del pliegue; verificar que no se esté precargando de más.

3 · Datos que faltan (no los desbloquea el código)

DatoEstado
Enlaces de compralos tres botones a #, el literal está guardado en rp_compra_url
Redes sociales<ul class="rp-social-list"></ul> vacío: faltan las URLs en la página de opciones
Aviso de privacidadsin página y sin enlace; [rp-legal] sólo emite el copyright
Sinopsis de dos librostexto de relleno que escribí yo, hay que sustituirlo
Portada de Siete suicidios300×473; la ficha la pide a 386×600

4 · Verificación de la ronda

A 375, 480, 768, 1024, 1280 y 1920:

  • Los puntos del hero van sobre la foto, sin franja blanca debajo
  • La hamburguesa abre a ancho completo, con fondo oro, y cierra suave
  • La cabeza solapa el borde Yo soy/Libros sin tocar el titular “LIBROS”
  • La foto de “Yo soy” respeta 375/423 en móvil y 457/494 en escritorio
  • Los botones “Comprar” quedan a la misma altura dentro de cada fila
  • Ningún título de libro se corta
  • Todo lo interactivo tiene foco visible con teclado
  • Contrastar contra 01-html/RECETARIO.md §7, que sigue siendo la tabla de posiciones

5 · Ancho del header en pantallas anchas

Aplicado ya: el alto. La barra no tenía altura declarada y la marcaba el padding por defecto de la sección de Elementor. Ahora min-height 108px en móvil y 110px en escritorio, con el padding de sección, widget-wrap y widgets a cero, y el logo a 45px y 53px — las medidas del Figma. Se añade flex-wrap:nowrap para que logo y menú no salten de línea antes de que entre la hamburguesa.

Pendiente: el ancho. Hoy el header usa padding-left:83px y padding-right:171px, valores absolutos sacados de medir el Figma a 1280. A 1920 el logo se pega al borde izquierdo mientras el menú termina lejos del derecho.

La decisión

En el Figma a 1280 el contenedor del sitio va de x=90 a x=1190, pero el header no lo respeta: el logo arranca en x=83 (7px antes) y el menú termina en x=1109 (81px antes del borde derecho del contenedor). Replicar eso literalmente sólo funciona a 1280 exactos y se rompe en cualquier otro ancho.

Recomiendo alinear el header al contenedor de 1100, y asumir esos 81px de diferencia con el mockup. Es la desviación más defendible del proyecto: el desajuste del Figma parece imprecisión del frame, no intención, y a 1920 la versión literal se ve rota.

Prompt (pegar tal cual)

En 02-tema/rebeca-pal/style.css, alinea el header al contenedor del sitio en vez de usar paddings absolutos.

  • Quita padding-left:83px y padding-right:171px de .rp-header.
  • Que .rp-header > .elementor-container use el mismo ancho que el resto de las secciones: width:100%; max-width:1100px; margin-inline:auto, con el gutter de --rp-gutter por debajo de 1280 (25px en móvil, 40px en tablet, 90px en escritorio) para que nunca toque el borde.
  • Logo pegado al inicio del contenedor, menú pegado al final (justify-content:space-between, que ya está).
  • Conserva el alto: 108px móvil, 110px escritorio; logo 45px y 53px.

Consecuencia asumida: a 1280 el menú termina en x=1190 y no en x=1109 como el mockup. Es intencional — el header del Figma no respeta su propio contenedor y la versión literal sólo cuadra a ese ancho exacto.

Verifica a 375, 768, 1024, 1280, 1440 y 1920: el logo arranca siempre a la misma distancia del borde que el contenido de “Yo soy” y “Libros” justo debajo, y el menú termina alineado con el borde derecho de ese mismo contenido. Comprueba que la hamburguesa sigue abriendo a ancho completo, que eso depende de que .rp-header siga siendo position:relative.

Vista Gráfica

Retroenlaces

Notas Recientes