Estética: outline de foco feo al hacer click + rediseño del menú (editorial serif) #104

New Issue

2026-06-28T19:14:43Z

rafa commented

2026-06-28 19:14:43 +00:00

Labels: area:aesthetic, improvement

Dos mejoras estéticas en el front del WP nuevo.

1. Marco gris/negro feo al hacer click en un enlace

Síntoma: al pulsar un link aparece un recuadro gris/oscuro alrededor del área clicable, demasiado grande y con forma extraña.

Causa: es el outline de foco por defecto del navegador, que no está personalizado en ningún mu-plugin (no hay reglas propias de outline/tap-highlight). Además, el CSS del core de WordPress lo agranda:

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content { outline-offset: 4px }

Ese outline-offset separado del borde da la "forma extraña y grande", sobre todo en enlaces multilínea o que envuelven imágenes. En móvil se suma el -webkit-tap-highlight-color gris de Android.

Solución propuesta (mu-plugin de estilos globales o bloque CSS existente):

/* Quitar el flash gris al tocar en móvil */
a, button { -webkit-tap-highlight-color: transparent; }

/* Foco visible SOLO con teclado (accesibilidad), discreto y de marca */
a:focus:not(:focus-visible) { outline: none; }
a:focus-visible {
  outline: 2px solid #8b1a2e;   /* carmesí de marca */
  outline-offset: 2px;
  border-radius: 3px;
}

Mantiene accesibilidad por teclado (no elimina el foco del todo).
Elimina el recuadro al hacer click con ratón/dedo.
Coherente con la paleta (#8b1a2e).

2. Rediseño del menú — dirección editorial serif (Fraunces)

Problema: el menú no usa la tipografía de marca. El sitio usa Fraunces (serif) en todos los títulos con texto #2a2320 y acento carmesí #8b1a2e, pero el menú hereda la sans genérica del tema y marca el hover con un subrayado poco elegante (text-decoration: underline).

Dirección elegida por Rafa (2026-06-19): Editorial serif — menú en la misma serif que los títulos, look de revista, máxima coherencia con las cabeceras.

Especificación:

font-family: 'Fraunces', Georgia, serif; en los ítems del menú.
Peso 600, color #2a2320, espaciado generoso entre ítems.
Sin subrayado en hover. En su lugar: línea carmesí #8b1a2e inferior en hover y en el ítem activo (aria-current="page").
Aplica a .wp-block-navigation .wp-block-navigation-item__content y al submenú (tamaño algo menor).
Revisar el menú responsive (overlay móvil) para que herede la misma tipografía.

Notas técnicas:

El menú es wp_navigation ID=1 (block theme Twenty Twenty-Five FSE).
Inyectar el CSS vía mu-plugin en wp_head (no depender del editor FSE).
Verificar en local (/fea/) y desplegar a prod (/web/wp-nuevo, vía ssh 'cat >'; scp no va en el jail).

Criterios de aceptación

Al hacer click en un enlace ya no aparece el recuadro gris/negro.
El foco por teclado sigue siendo visible (carmesí, discreto).
El menú usa Fraunces, con línea carmesí en hover/activo y sin subrayado.
Coherente en desktop y en el menú responsive móvil.
Aplicado en local y prod.

**Labels:** area:aesthetic, improvement Dos mejoras estéticas en el front del WP nuevo. --- ## 1. Marco gris/negro feo al hacer click en un enlace **Síntoma:** al pulsar un link aparece un recuadro gris/oscuro alrededor del área clicable, demasiado grande y con forma extraña. **Causa:** es el `outline` de **foco por defecto del navegador**, que no está personalizado en ningún mu-plugin (no hay reglas propias de `outline`/`tap-highlight`). Además, el CSS del core de WordPress lo agranda: ```css .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content { outline-offset: 4px } ``` Ese `outline-offset` separado del borde da la "forma extraña y grande", sobre todo en enlaces multilínea o que envuelven imágenes. En móvil se suma el `-webkit-tap-highlight-color` gris de Android. **Solución propuesta** (mu-plugin de estilos globales o bloque CSS existente): ```css /* Quitar el flash gris al tocar en móvil */ a, button { -webkit-tap-highlight-color: transparent; } /* Foco visible SOLO con teclado (accesibilidad), discreto y de marca */ a:focus:not(:focus-visible) { outline: none; } a:focus-visible { outline: 2px solid #8b1a2e; /* carmesí de marca */ outline-offset: 2px; border-radius: 3px; } ``` - Mantiene accesibilidad por teclado (no elimina el foco del todo). - Elimina el recuadro al hacer click con ratón/dedo. - Coherente con la paleta (#8b1a2e). --- ## 2. Rediseño del menú — dirección **editorial serif (Fraunces)** **Problema:** el menú no usa la tipografía de marca. El sitio usa **Fraunces** (serif) en todos los títulos con texto `#2a2320` y acento carmesí `#8b1a2e`, pero el menú hereda la **sans genérica** del tema y marca el hover con un **subrayado** poco elegante (`text-decoration: underline`). **Dirección elegida por Rafa (2026-06-19):** *Editorial serif* — menú en la misma serif que los títulos, look de revista, máxima coherencia con las cabeceras. **Especificación:** - `font-family: 'Fraunces', Georgia, serif;` en los ítems del menú. - Peso 600, color `#2a2320`, espaciado generoso entre ítems. - **Sin subrayado** en hover. En su lugar: **línea carmesí `#8b1a2e` inferior** en hover y en el ítem activo (`aria-current="page"`). - Aplica a `.wp-block-navigation .wp-block-navigation-item__content` y al submenú (tamaño algo menor). - Revisar el menú responsive (overlay móvil) para que herede la misma tipografía. **Notas técnicas:** - El menú es `wp_navigation` ID=1 (block theme Twenty Twenty-Five FSE). - Inyectar el CSS vía mu-plugin en `wp_head` (no depender del editor FSE). - Verificar en local (`/fea/`) y desplegar a prod (`/web/wp-nuevo`, vía `ssh 'cat >'`; scp no va en el jail). ## Criterios de aceptación - [ ] Al hacer click en un enlace ya no aparece el recuadro gris/negro. - [ ] El foco por teclado sigue siendo visible (carmesí, discreto). - [ ] El menú usa Fraunces, con línea carmesí en hover/activo y sin subrayado. - [ ] Coherente en desktop y en el menú responsive móvil. - [ ] Aplicado en local y prod.

rafa closed this issue

2026-06-28 19:14:43 +00:00

rafa referenced this issue

2026-06-28 19:15:11 +00:00

[Auditoría] Vitalidad de los 23 enlaces del pie — índice #128

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: rafa/feadulta#104