From fef927906caa0056e83e9a6c8431d63fb106e9be Mon Sep 17 00:00:00 2001 From: Manuel Cillero Date: Mon, 6 Oct 2025 04:09:26 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Depura=20la=20estructura=20y=20e?= =?UTF-8?q?stilos=20del=20men=C3=BA=20e=20intro?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/component/menu/item.rs | 8 +- src/base/theme/basic.rs | 55 +++++----- src/core/theme/definition.rs | 83 +++++++++++----- static/css/basic.css | 16 +++ static/css/intro.css | 112 +++++++++------------ static/css/menu.css | 171 +++++++++++++++++++++++--------- static/css/root.css | 19 ++++ static/js/menu.js | 1 - 8 files changed, 302 insertions(+), 163 deletions(-) diff --git a/src/base/component/menu/item.rs b/src/base/component/menu/item.rs index 7a36fbb..c9f7903 100644 --- a/src/base/component/menu/item.rs +++ b/src/base/component/menu/item.rs @@ -49,7 +49,7 @@ impl Component for Item { }), ItemKind::Link(label, path) => PrepareMarkup::With(html! { li class="menu__item menu__item--link" { - a href=(path(cx)) title=[description] { + a class="menu__link" href=(path(cx)) title=[description] { (left_icon) span class="menu__label" { (label.using(cx)) } (right_icon) @@ -58,7 +58,7 @@ impl Component for Item { }), ItemKind::LinkBlank(label, path) => PrepareMarkup::With(html! { li class="menu__item menu__item--link" { - a href=(path(cx)) title=[description] target="_blank" { + a class="menu__link" href=(path(cx)) title=[description] target="_blank" { (left_icon) span class="menu__label" { (label.using(cx)) } (right_icon) @@ -72,7 +72,7 @@ impl Component for Item { }), ItemKind::Submenu(label, submenu) => PrepareMarkup::With(html! { li class="menu__item menu__item--children" { - a href="#" title=[description] { + button type="button" class="menu__link" title=[description] { (left_icon) span class="menu__label" { (label.using(cx)) } (Icon::svg(html! { @@ -86,7 +86,7 @@ impl Component for Item { }), ItemKind::Megamenu(label, megamenu) => PrepareMarkup::With(html! { li class="menu__item menu__item--children" { - a href="#" title=[description] { + button type="button" class="menu__link" title=[description] { (left_icon) span class="menu__label" { (label.using(cx)) } (Icon::svg(html! { diff --git a/src/base/theme/basic.rs b/src/base/theme/basic.rs index 54660a9..97d28b8 100644 --- a/src/base/theme/basic.rs +++ b/src/base/theme/basic.rs @@ -46,12 +46,8 @@ impl Theme for Basic { } fn after_render_page_body(&self, page: &mut Page) { - let styles = match page.layout() { - "Intro" => "/css/intro.css", - "PageTopIntro" => "/css/intro.css", - _ => "/css/basic.css", - }; let pkg_version = env!("CARGO_PKG_VERSION"); + page.alter_assets(ContextOp::AddStyleSheet( StyleSheet::from("/css/normalize.css") .with_version("8.0.1") @@ -62,6 +58,11 @@ impl Theme for Basic { .with_version(pkg_version) .with_weight(-99), )) + .alter_assets(ContextOp::AddStyleSheet( + StyleSheet::from("/css/basic.css") + .with_version(pkg_version) + .with_weight(-99), + )) .alter_assets(ContextOp::AddStyleSheet( StyleSheet::from("/css/components.css") .with_version(pkg_version) @@ -72,11 +73,6 @@ impl Theme for Basic { .with_version(pkg_version) .with_weight(-99), )) - .alter_assets(ContextOp::AddStyleSheet( - StyleSheet::from(styles) - .with_version(pkg_version) - .with_weight(-99), - )) .alter_assets(ContextOp::AddJavaScript( JavaScript::defer("/js/menu.js") .with_version(pkg_version) @@ -86,9 +82,18 @@ impl Theme for Basic { } fn render_intro(page: &mut Page) -> Markup { + page.alter_assets(ContextOp::AddStyleSheet( + StyleSheet::from("/css/intro.css").with_version(env!("CARGO_PKG_VERSION")), + )); + let title = page.title().unwrap_or_default(); let intro = page.description().unwrap_or_default(); + let theme = page.context().theme(); + let h = theme.render_page_region(page, "header"); + let c = theme.render_page_region(page, "content"); + let f = theme.render_page_region(page, "footer"); + let intro_button_txt: L10n = page.param_or_default("intro_button_txt"); let intro_button_lnk: Option<&String> = page.param("intro_button_lnk"); @@ -118,26 +123,27 @@ fn render_intro(page: &mut Page) -> Markup { } } } + (h) } main class="intro-content" { section class="intro-content__body" { - @if intro_button_lnk.is_some() { - div class="intro-button" { - a - class="intro-button__link" - href=[intro_button_lnk] - target="_blank" - rel="noreferrer" - { - span {} span {} span {} - div class="intro-button__text" { - (intro_button_txt.using(page)) + div class="intro-text" { + @if intro_button_lnk.is_some() { + div class="intro-button" { + a + class="intro-button__link" + href=[intro_button_lnk] + target="_blank" + rel="noreferrer" + { + span {} span {} span {} + div class="intro-button__text" { + (intro_button_txt.using(page)) + } } } } - } - div class="intro-text" { - (page.context().render_components_of("content")) + (c) } } } @@ -164,6 +170,7 @@ fn render_intro(page: &mut Page) -> Markup { em { (L10n::l("intro_have_fun").using(page)) } } } + (f) } } } diff --git a/src/core/theme/definition.rs b/src/core/theme/definition.rs index 0322a31..5756fb2 100644 --- a/src/core/theme/definition.rs +++ b/src/core/theme/definition.rs @@ -15,50 +15,70 @@ pub type ThemeRef = &'static dyn Theme; /// Métodos predefinidos de renderizado para las páginas de un tema. /// -/// Contiene las implementaciones base de las **secciones** `` y ``. Se implementa -/// automáticamente para cualquier tipo que implemente [`Theme`], por lo que normalmente no requiere -/// implementación explícita. +/// Contiene las implementaciones base para renderizar las **secciones** `` y ``. Se +/// implementa automáticamente para cualquier tipo que implemente [`Theme`], por lo que normalmente +/// no requiere implementación explícita. /// -/// Si un tema **sobrescribe** [`render_page_head()`](Theme::render_page_head) o -/// [`render_page_body()`](Theme::render_page_body), se puede volver al comportamiento por defecto -/// cuando se necesite usando FQS (*Fully Qualified Syntax*): +/// Si un tema **sobrescribe** uno o más de estos métodos de [`Theme`]: +/// +/// - [`render_page_region()`](Theme::render_page_region), +/// - [`render_page_head()`](Theme::render_page_head), o +/// - [`render_page_body()`](Theme::render_page_body); +/// +/// es posible volver al comportamiento por defecto usando FQS (*Fully Qualified Syntax*): /// /// - `::render_body(self, page, self.page_regions())` /// - `::render_head(self, page)` pub trait ThemePage { + /// Renderiza el **contenedor** de una región concreta del `` de la página. + /// + /// Obtiene los componentes asociados a `region.key()` desde el contexto de la página y, si hay + /// salida, envuelve el contenido en un contenedor `
` predefinido. + /// + /// Si la región **no produce contenido**, devuelve un `Markup` vacío. + #[inline] + fn render_region(&self, page: &mut Page, region: &Region) -> Markup { + html! { + @let output = page.context().render_components_of(region.key()); + @if !output.is_empty() { + @let region_name = region.name(); + div + id=(region_name) + class={ "region region--" (region_name) } + role="region" + aria-label=[region.label().lookup(page)] + { + (output) + } + } + } + } + /// Renderiza el **contenido interior** del `` de la página. /// - /// Esta implementación recorre `regions` en el **orden declarado** y, para cada región con - /// contenido, genera un contenedor con `role="region"` y un `aria-label` localizado. - /// Se asume que cada identificador de región es **único** dentro de la página. + /// Recorre `regions` en el **orden declarado** y, para cada región con contenido, delega en + /// [`render_region()`](Self::render_region) la generación del contenedor. Las regiones sin + /// contenido **no** producen salida. Se asume que cada identificador de región es **único** + /// dentro de la página. /// /// La etiqueta `` no se incluye aquí; únicamente renderiza su contenido. + #[inline] fn render_body(&self, page: &mut Page, regions: &[Region]) -> Markup { html! { @for region in regions { - @let output = page.context().render_components_of(region.key()); - @if !output.is_empty() { - @let region_name = region.name(); - div - id=(region_name) - class={ "region region--" (region_name) } - role="region" - aria-label=[region.label().lookup(page)] - { - (output) - } - } + (self.render_region(page, region)) } } } /// Renderiza el **contenido interior** del `` de la página. /// - /// Recorre y genera por defecto las etiquetas básicas (`charset`, `title`, `description`, - /// `viewport`, `X-UA-Compatible`), los metadatos (`name/content`) y propiedades - /// (`property/content`), además de los recursos CSS/JS de la página. + /// Incluye por defecto las etiquetas básicas (`charset`, `title`, `description`, `viewport`, + /// `X-UA-Compatible`), los metadatos (`name/content`) y propiedades (`property/content`), + /// además de los recursos CSS/JS de la página. /// - /// La etiqueta `` no se incluye aquí; únicamente renderiza su contenido. + /// La etiqueta `` no se incluye aquí; únicamente se renderiza su contenido. + #[inline] fn render_head(&self, page: &mut Page) -> Markup { let viewport = "width=device-width, initial-scale=1, shrink-to-fit=no"; html! { @@ -152,6 +172,19 @@ pub trait Theme: Extension + ThemePage + Send + Sync { &*REGIONS } + /// Renderiza una región de la página **por clave**. + /// + /// Busca en [`page_regions()`](Self::page_regions) la región asociada a una clave y, si existe, + /// delega en [`ThemePage::render_region()`] su renderizado. Si no se encuentra la clave o la + /// región no produce contenido, devuelve un `Markup` vacío. + fn render_page_region(&self, page: &mut Page, key: &str) -> Markup { + html! { + @if let Some(region) = self.page_regions().iter().find(|r| r.key() == key) { + (self.render_region(page, region)) + } + } + } + /// Acciones específicas del tema antes de renderizar el `` de la página. /// /// Útil para preparar clases, inyectar recursos o ajustar metadatos. diff --git a/static/css/basic.css b/static/css/basic.css index 04801dd..058e173 100644 --- a/static/css/basic.css +++ b/static/css/basic.css @@ -1,3 +1,19 @@ +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: var(--val-font-family); + font-size: var(--val-fs--base); + font-weight: var(--val-fw--base); + line-height: var(--val-lh--base); + color: var(--val-color--text); + background-color: var(--val-color--bg); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; +} + /* Page layout */ .region--footer { diff --git a/static/css/intro.css b/static/css/intro.css index 39c9d6a..774bbb2 100644 --- a/static/css/intro.css +++ b/static/css/intro.css @@ -1,37 +1,15 @@ -:root { - --bg-img: url('/img/intro-header.jpg'); - --bg-img-set: image-set(url('/img/intro-header.avif') type('image/avif'), url('/img/intro-header.webp') type('image/webp'), var(--bg-img) type('image/jpeg')); - --bg-img-sm: url('/img/intro-header-sm.jpg'); - --bg-img-sm-set: image-set(url('/img/intro-header-sm.avif') type('image/avif'), url('/img/intro-header-sm.webp') type('image/webp'), var(--bg-img-sm) type('image/jpeg')); - --bg-color: #8c5919; - --color: #1a202c; - --color-gray: #e4e4e7; - --color-link: #1e4eae; - --color-block-1: #b689ff; - --color-block-2: #fecaca; - --color-block-3: #e6a9e2; - --color-block-4: #ffedca; - --color-block-5: #ffffff; - --focus-outline: 2px solid var(--color-link); - --focus-outline-offset: 2px; - --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); -} - html { min-height: 100%; background-color: black; } + body { margin: auto; position: relative; min-height: 100%; min-width: 350px; - background-color: var(--bg-color); - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - font-size: 1.125rem; - font-weight: 300; - color: var(--color); - line-height: 1.6; + color: var(--intro-color); + background-color: var(--intro-bg-color); width: 100%; display: flex; @@ -51,12 +29,12 @@ a { transition: font-size 0.2s, text-decoration-color 0.2s; } a:focus-visible { - outline: var(--focus-outline); - outline-offset: var(--focus-outline-offset); + outline: var(--intro-focus-outline); + outline-offset: var(--intro-focus-outline-offset); } a:hover, a:hover:visited { - text-decoration-color: var(--color-link); + text-decoration-color: var(--intro-color-link); } /* @@ -69,9 +47,9 @@ a:hover:visited { width: 100%; max-width: 80rem; margin: 0 auto; - padding-bottom: 9rem; - background-image: var(--bg-img-sm); - background-image: var(--bg-img-sm-set); + padding-bottom: 4rem; + background-image: var(--intro-bg-img-sm); + background-image: var(--intro-bg-img-sm-set); background-position: top center; background-position-y: -1rem; background-size: contain; @@ -119,8 +97,8 @@ a:hover:visited { } @media (min-width: 64rem) { .intro-header { - background-image: var(--bg-img); - background-image: var(--bg-img-set); + background-image: var(--intro-bg-img); + background-image: var(--intro-bg-img-set); } .intro-header__title { padding: 1.2rem 2rem 2.6rem 2rem; @@ -180,8 +158,7 @@ a:hover:visited { .intro-button { width: 100%; - margin: 0 auto 3rem; - z-index: 10; + margin: 0 auto; } .intro-button__link { background: #7f1d1d; @@ -306,6 +283,9 @@ a:hover:visited { animation-play-state: paused; } @media (max-width: 48rem) { + .intro-header { + padding-bottom: 9rem;; + } .intro-button__link { height: 6.25rem; min-width: auto; @@ -342,17 +322,15 @@ a:hover:visited { font-size: 1.3125rem; font-weight: 400; line-height: 1.5; - margin-top: -6rem; margin-bottom: 0; background: #fff; position: relative; +} +.region--content { padding: 2.5rem 1.063rem 0.75rem; overflow: hidden; } -.intro-button + .intro-text { - padding-top: 6rem; -} -.intro-text p { +.region--content p { width: 100%; line-height: 150%; font-weight: 400; @@ -364,31 +342,39 @@ a:hover:visited { font-size: 1.375rem; line-height: 2rem; } - .intro-button + .intro-text { + .intro-button + .region--content { padding-top: 7rem; } } @media (min-width: 64rem) { - .intro-text { + .intro-header { + padding-bottom: 9rem;; + } + .intro-text, + .region--content { border-radius: 0.75rem; - box-shadow: var(--shadow); + } + .intro-text { + box-shadow: var(--intro-shadow); max-width: 60rem; margin: 0 auto 6rem; + } + .region--content { padding-left: 4.5rem; padding-right: 4.5rem; } } -.intro-text .block { +.region--content .block { position: relative; } -.intro-text .block__title { +.region--content .block__title { margin: 1em 0 .8em; } -.intro-text .block__title span { +.region--content .block__title span { display: inline-block; padding: 10px 30px 14px; - margin: 0 0 0 20px; + margin: 30px 0 0 20px; background: white; border: 5px solid; border-radius: 30px; @@ -396,7 +382,7 @@ a:hover:visited { border-color: orangered; transform: rotate(-3deg) translateY(-25%); } -.intro-text .block__title:before { +.region--content .block__title:before { content: ""; height: 5px; position: absolute; @@ -409,7 +395,7 @@ a:hover:visited { transform: rotate(2deg) translateY(-50%); transform-origin: top left; } -.intro-text .block__title:after { +.region--content .block__title:after { content: ""; height: 70rem; position: absolute; @@ -417,23 +403,23 @@ a:hover:visited { left: -15%; width: 130%; z-index: -10; - background: var(--color-block-1); + background: var(--intro-bg-block-1); transform: rotate(2deg); } -.intro-text .block:nth-of-type(5n+1) .block__title:after { - background: var(--color-block-1); +.region--content .block:nth-of-type(5n+1) .block__title:after { + background: var(--intro-bg-block-1); } -.intro-text .block:nth-of-type(5n+2) .block__title:after { - background: var(--color-block-2); +.region--content .block:nth-of-type(5n+2) .block__title:after { + background: var(--intro-bg-block-2); } -.intro-text .block:nth-of-type(5n+3) .block__title:after { - background: var(--color-block-3); +.region--content .block:nth-of-type(5n+3) .block__title:after { + background: var(--intro-bg-block-3); } -.intro-text .block:nth-of-type(5n+4) .block__title:after { - background: var(--color-block-4); +.region--content .block:nth-of-type(5n+4) .block__title:after { + background: var(--intro-bg-block-4); } -.intro-text .block:nth-of-type(5n+5) .block__title:after { - background: var(--color-block-5); +.region--content .block:nth-of-type(5n+5) .block__title:after { + background: var(--intro-bg-block-5); } /* @@ -443,7 +429,7 @@ a:hover:visited { .intro-footer { width: 100%; background-color: black; - color: var(--color-gray); + color: var(--intro-color-gray); padding-bottom: 2rem; } @@ -459,7 +445,7 @@ a:hover:visited { line-height: 100%; } .intro-footer__body a:visited { - color: var(--color-gray); + color: var(--intro-color-gray); } .intro-footer__logo, .intro-footer__links { @@ -492,5 +478,5 @@ a:hover:visited { /* PoweredBy component */ .poweredby a:visited { - color: var(--color-gray); + color: var(--intro-color-gray); } diff --git a/static/css/menu.css b/static/css/menu.css index 5520e39..6522f4a 100644 --- a/static/css/menu.css +++ b/static/css/menu.css @@ -1,54 +1,92 @@ +/* Aislamiento & normalización */ + .menu { + isolation: isolate; +} +@supports (all: revert) { + .menu { + all: revert; + display: block; } +} +.menu { + box-sizing: border-box; + line-height: var(--val-menu--line-height, 1.5); + color: var(--val-color--text); + text-align: left; + text-transform: none; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; + cursor: default; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + width: 100%; height: auto; margin: 0; padding: 0; z-index: 9999; - border: none; - outline: none; + border: 0; background: var(--val-menu--color-bg); } +.menu *, +.menu *::before, +.menu *::after { + box-sizing: inherit; +} +.menu :where(a, button) { + appearance: none; + background: none; + border: 0; + font: inherit; + color: inherit; + text-decoration: none; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} +.menu :where(a, button):focus-visible { + outline: 2px solid var(--val-menu--color-highlight); + outline-offset: 2px; +} +.menu :where(ul, ol) { + list-style: none; + margin: 0; + padding: 0; +} +.menu svg { + fill: currentColor; +} + +/* Estructura */ .menu__wrapper { padding-right: var(--val-gap); } -.menu__wrapper a, -.menu__wrapper button { - cursor: pointer; - border: none; - background: none; - text-decoration: none; -} -.menu__nav ul { - margin: 0; - padding: 0; -} .menu__nav li { display: inline-block; - margin: 0 0 0 1.5rem; + margin: 0; + margin-inline-start: 1.5rem; padding: 0; line-height: var(--val-menu--item-height); list-style: none; - list-style-type: none; } .menu__item--label, -.menu__nav li > a { +.menu__nav li > .menu__link { position: relative; - font-weight: 500; - color: var(--val-color--text); + font-weight: normal; text-rendering: optimizeLegibility; + font-size: 1.45rem; } -.menu__nav li > a { - border: none; +.menu__nav li > .menu__link { transition: color 0.3s ease-in-out; } -.menu__nav li:hover > a, -.menu__nav li > a:focus { +.menu__nav li:hover > .menu__link, +.menu__nav li > .menu__link:focus { color: var(--val-menu--color-highlight); } -.menu__nav li > a > svg.icon { +.menu__nav li > .menu__link > svg.icon { margin-left: 0.25rem; } @@ -57,19 +95,18 @@ max-width: 100%; height: auto; padding: var(--val-gap-0-5) var(--val-gap-1-5); - border: none; - outline: none; + border: 0; background: var(--val-menu--color-bg); border-top: 3px solid var(--val-menu--color-highlight); z-index: 500; opacity: 0; visibility: hidden; box-shadow: 0 4px 6px -1px var(--val-menu--color-border), 0 2px 4px -1px var(--val-menu--color-shadow); - transition: all 0.5s ease-in-out; + transition: all 0.3s ease-in-out; } .menu__item--children:hover > .menu__children, -.menu__item--children > a:focus + .menu__children, +.menu__item--children > .menu__link:focus + .menu__children, .menu__item--children .menu__children:focus-within { margin-top: 0.4rem; opacity: 1; @@ -81,14 +118,12 @@ max-width: var(--val-menu--item-width-max); } .menu__submenu-title { - font-family: inherit; font-size: 1rem; - font-weight: 500; + font-weight: normal; margin: 0; padding: var(--val-menu--line-padding) 0; line-height: var(--val-menu--line-height); - border: none; - outline: none; + border: 0; color: var(--val-menu--color-highlight); text-transform: uppercase; text-rendering: optimizeLegibility; @@ -113,18 +148,15 @@ display: none; } -/* Applies <= 992px */ -@media only screen and (max-width: 62rem) { +/* Responsive <= 62rem (992px) */ + +@media (max-width: 62rem) { .menu__wrapper { padding-right: var(--val-gap-0-5); } .menu__trigger { - cursor: pointer; width: var(--val-menu--trigger-width); height: var(--val-menu--item-height); - border: none; - outline: none; - background: none; display: flex; flex-direction: column; justify-content: center; @@ -133,6 +165,13 @@ width: 2rem; height: 2rem; } + + .menu__nav, + .menu__children { + overscroll-behavior: contain; + -webkit-overflow-scrolling: touch; + } + .menu__nav { position: fixed; top: 0; @@ -143,10 +182,16 @@ overflow: hidden; background: var(--val-menu--color-bg); transform: translate(-100%); - transition: all 0.5s ease-in-out; + transition: transform .5s ease-in-out, opacity .5s ease-in-out; + will-change: transform; + backface-visibility: hidden; + visibility: hidden; + pointer-events: none; } .menu__nav.active { transform: translate(0%); + visibility: visible; + pointer-events: auto; } .menu__nav li { @@ -156,16 +201,18 @@ } .menu__item--label, - .menu__nav li > a { + .menu__nav li > .menu__link { display: block; + text-align: inherit; + width: 100%; padding: var(--val-menu--line-padding) var(--val-menu--item-height) var(--val-menu--line-padding) var(--val-menu--item-gap); border-bottom: 1px solid var(--val-menu--color-border); } .menu__nav li ul li.menu__item--label, - .menu__nav li ul li > a { + .menu__nav li ul li > .menu__link { border-bottom: 0; } - .menu__nav li > a > svg.icon { + .menu__nav li > .menu__link > svg.icon { position: absolute; top: var(--val-menu--line-padding); right: var(--val-menu--line-padding); @@ -191,6 +238,7 @@ visibility: visible; transform: translateX(0%); box-shadow: none; + transition: opacity .5s ease-in-out, transform .5s ease-in-out, margin-top .5s ease-in-out; } .menu__children.active { display: block; @@ -223,6 +271,16 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + font-size: 1.45rem; + font-weight: normal; + opacity: 0; + transform: translateY(.25rem); + transition: opacity .5s ease-in-out, transform .5s ease-in-out; + will-change: opacity, transform; + } + .menu__header.active .menu__title { + opacity: 1; + transform: translateY(0); } .menu__close, .menu__back { @@ -231,18 +289,20 @@ height: var(--val-menu--item-height); line-height: var(--val-menu--item-height); color: var(--val-color--text); - cursor: pointer; display: flex; align-items: center; justify-content: center; + background: var(--val-menu--color-bg); } .menu__close { font-size: 2.25rem; - border-left: 1px solid var(--val-menu--color-border) !important; + border: 1px solid var(--val-menu--color-border) !important; + border-width: 0 0 1px 1px !important; } .menu__back { font-size: 1.25rem; - border-right: 1px solid var(--val-menu--color-border) !important; + border: 1px solid var(--val-menu--color-border) !important; + border-width: 0 1px 1px 0 !important; display: none; } .menu__header.active .menu__back { @@ -267,15 +327,34 @@ opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.55); - transition: all 0.5s ease-in-out; + transition: opacity .5s ease-in-out, visibility 0s linear .5s; } .menu__overlay.active { opacity: 1; visibility: visible; + transition-delay: 0s, 0s; + } +} + +@media (hover: hover) and (pointer: fine) { + .menu__item--children:hover > .menu__children { + margin-top: 0.4rem; + opacity: 1; + visibility: visible; } } -/* ANIMATIONS */ +@media (prefers-reduced-motion: reduce) { + .menu__nav, + .menu__children, + .menu__title, + .menu__overlay { + transition: none !important; + animation: none !important; + } +} + +/* Animaciones */ @keyframes slideLeft { 0% { diff --git a/static/css/root.css b/static/css/root.css index aeab1c6..270c1b3 100644 --- a/static/css/root.css +++ b/static/css/root.css @@ -1,3 +1,22 @@ +:root { + --intro-bg-img: url('/img/intro-header.jpg'); + --intro-bg-img-set: image-set(url('/img/intro-header.avif') type('image/avif'), url('/img/intro-header.webp') type('image/webp'), var(--intro-bg-img) type('image/jpeg')); + --intro-bg-img-sm: url('/img/intro-header-sm.jpg'); + --intro-bg-img-sm-set: image-set(url('/img/intro-header-sm.avif') type('image/avif'), url('/img/intro-header-sm.webp') type('image/webp'), var(--intro-bg-img-sm) type('image/jpeg')); + --intro-bg-color: #8c5919; + --intro-bg-block-1: #b689ff; + --intro-bg-block-2: #fecaca; + --intro-bg-block-3: #e6a9e2; + --intro-bg-block-4: #ffedca; + --intro-bg-block-5: #ffffff; + --intro-color: #1a202c; + --intro-color-gray: #e4e4e7; + --intro-color-link: #1e4eae; + --intro-focus-outline: 2px solid var(--intro-color-link); + --intro-focus-outline-offset: 2px; + --intro-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); +} + :root { --val-font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --val-font-serif: "Lora","georgia",serif; diff --git a/static/js/menu.js b/static/js/menu.js index 6b5ae1b..1f09bfe 100644 --- a/static/js/menu.js +++ b/static/js/menu.js @@ -48,7 +48,6 @@ function menu__reset(menu, nav, overlay) { } document.querySelectorAll('.menu').forEach(menu => { - let menuChildren = []; const menuNav = menu.querySelector('.menu__nav'); const menuOverlay = menu.querySelector('.menu__overlay');