/* Theme Name: hallegro Theme URI: Author: Description: Tema de bloques para hallegro. Comunidad sobre música, arte, historia y arquitectura, y sobre cómo las personas, los lugares y el contexto se combinaron. Requires at least: 6.5 Requires PHP: 7.4 Version: 0.1.5 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: hallegro Tags: block-theme, one-column, editor-style, custom-colors, full-site-editing */ /* ========================================================================== Casi todo el diseño vive en theme.json, no aquí. Este archivo es solo para lo que theme.json todavía no sabe expresar. Antes de añadir una regla, comprueba si puedes hacerlo en theme.json: así queda disponible también en el editor y para futuros bloques. El número de Version de la cabecera es lo que rompe la caché del navegador: functions.php lo pasa como parámetro al encolar. Si cambias este archivo y no subes la versión, quien ya visitó el sitio seguirá viendo la copia antigua. ========================================================================== */ /* Las citas largas son una parte importante del contenido de hallegro, y merecen respirar de otra manera que el texto corrido. */ .wp-block-quote { border-left: 2px solid var(--wp--preset--color--arcilla); padding-left: var(--wp--preset--spacing--30); font-style: italic; } .wp-block-quote cite { display: block; margin-top: var(--wp--preset--spacing--20); font-style: normal; font-size: var(--wp--preset--font-size--pequeno); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--tinta-suave); } /* Los pies de imagen: en una web con arquitectura y pintura, la atribución se lee mucho. Que sea legible sin competir con el texto principal. */ .wp-element-caption, figcaption { font-family: var(--wp--preset--font-family--spectral); font-size: var(--wp--preset--font-size--pequeno); line-height: 1.5; color: var(--wp--preset--color--tinta-suave); text-align: left; } /* Versalitas para etiquetas y metadatos. Se usa desde los patrones con la clase .hal-versalita */ .hal-versalita { font-size: var(--wp--preset--font-size--pequeno); letter-spacing: 0.14em; text-transform: uppercase; } /* Una regla fina para separar secciones sin gritar. WordPress limita los separadores a 100px centrados salvo que se marquen como "anchos". En hallegro el separador siempre cruza la columna: es una pausa de lectura, no un adorno centrado. */ .wp-block-separator:not(.is-style-dots) { border: 0; border-top: 1px solid var(--wp--preset--color--papel-hondo); opacity: 1; width: 100%; max-width: none; } /* ========================================================================== Cierre de página: el anillo de la marca abriendo una regla. El anillo va ANTES de la línea, no después: así funciona como el punto donde arranca la regla, igual que una inicial, en vez de como un sello que la cierra. Acompaña la lectura de izquierda a derecha. ========================================================================== */ .hal-cierre { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--60); margin-bottom: var(--wp--preset--spacing--30); } /* Las dimensiones van tambien como atributos en el propio SVG: el bloque HTML de WordPress puede envolver el contenido y romper el contexto flex, y sin tamaño explicito el SVG se expande a todo el ancho disponible. */ .hal-sello { flex: 0 0 22px; width: 22px; height: 22px; max-width: 22px; display: block; } .hal-regla { flex: 1 1 auto; height: 1px; background: var(--wp--preset--color--papel-hondo); } /* Accesibilidad: foco visible y con contraste suficiente. Los estilos por defecto del navegador se pierden sobre fondo papel. */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--arcilla); outline-offset: 2px; } /* Enlace de salto al contenido: invisible hasta que se tabula. */ .skip-link:focus { position: fixed; top: 1rem; left: 1rem; z-index: 999; padding: 0.75rem 1.25rem; background: var(--wp--preset--color--tinta); color: var(--wp--preset--color--papel); } /* ========================================================================== FORMULARIOS DE CUENTA Ni theme.json ni los estilos de bloque alcanzan aquí: son formularios HTML, no bloques, así que sus campos y botones no heredan nada. Son de dos orígenes distintos aunque se parezcan: - /iniciar-sesion/ es wp_login_form() NATIVO de WordPress, que el bloque «ERS - Login Form» solo envuelve. Sus clases (button, button-primary) pertenecen a la hoja del escritorio, que no se carga en el front: de ahí que el botón saliera en gris del navegador. - /registro/ sí es marcado propio de EasyRestrict, con prefijo .ers-. Lo único de EasyRestrict en la página de acceso es .ers-lost-password. ========================================================================== */ /* --- Campos, comunes a los dos formularios ------------------------------- El borde va en tinta suave, no en papel hondo. Papel hondo sobre papel da 1,12 de contraste: sirve para separar superficies, no para delimitar algo que el visitante tiene que encontrar y pulsar. Los campos quedaban practicamente invisibles. -------------------------------------------------------------------------- */ #loginform .input, .ers-input-form input[type="text"], .ers-input-form input[type="email"], .ers-input-form input[type="password"] { width: 100%; max-width: 24rem; padding: 0.6rem 0.75rem; font-family: inherit; font-size: 1rem; color: var(--wp--preset--color--tinta); background: var(--wp--preset--color--papel); border: 1px solid var(--wp--preset--color--tinta-suave); border-radius: 0; } #loginform .input:focus, .ers-input-form input[type="text"]:focus, .ers-input-form input[type="email"]:focus, .ers-input-form input[type="password"]:focus { border-color: var(--wp--preset--color--arcilla); outline: 2px solid var(--wp--preset--color--arcilla); outline-offset: 1px; } /* --- Botones de envío, comunes a los dos --------------------------------- */ /* El contenedor va en block a proposito: si el plugin lo deja en flex, el boton se estira a todo el ancho y width:auto no basta para impedirlo, porque en un contenedor flex manda align-self, no width. */ .ers-register-form-submit { display: block; } #loginform #wp-submit, .ers-register-form-submit input[type="submit"] { display: inline-block; width: auto; padding: 0.75rem 1.5rem; font-family: inherit; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--papel); background: var(--wp--preset--color--tinta); border: 0; border-radius: 0; cursor: pointer; } #loginform #wp-submit:hover, .ers-register-form-submit input[type="submit"]:hover { background: var(--wp--preset--color--arcilla); } /* --- Acceso -------------------------------------------------------------- */ #loginform p { margin: 0 0 var(--wp--preset--spacing--20); } #loginform label { display: block; margin-bottom: var(--wp--preset--spacing--10); } /* La casilla de recordar sesión va en línea con su texto, no encima. */ #loginform .login-remember label { display: inline; margin: 0; } .ers-lost-password { display: inline-block; margin-top: var(--wp--preset--spacing--20); font-size: 0.875rem; } /* --- Registro ------------------------------------------------------------ */ .ers-form-section { margin-bottom: var(--wp--preset--spacing--40); } .ers-form-section-title { margin-bottom: var(--wp--preset--spacing--20); } .ers-input-form { margin-bottom: var(--wp--preset--spacing--20); } .ers-input-form label { display: block; margin-bottom: var(--wp--preset--spacing--10); } /* Casilla de privacidad. El plugin la sirve con el