diff --git a/src/base/component/branding.rs b/src/base/component/branding.rs index e97b9217..3d99c61a 100644 --- a/src/base/component/branding.rs +++ b/src/base/component/branding.rs @@ -33,18 +33,19 @@ impl ComponentTrait for Branding { fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { let logo = self.logo().render(cx); - let title = L10n::l("site_home").using(cx.langid()); + let home = self.frontpage()(cx); + let title = &L10n::l("site_home").using(cx.langid()); PrepareMarkup::With(html! { div id=[self.id()] class="branding__container" { - div class="branding__inner" { + div class="branding__content" { @if !logo.is_empty() { - div class="branding__logo" { (logo) } + a class="branding__logo" href=(home) title=[title] rel="home" { + (logo) + } } div class="branding__text" { - div class="branding__name" { - a href=(self.frontpage()(cx)) title=[title] rel="home" { - (self.app_name()) - } + a class="branding__name" href=(home) title=[title] rel="home" { + (self.app_name()) } @if let Some(slogan) = self.slogan().using(cx.langid()) { div class="branding__slogan" { diff --git a/src/base/component/flex/item.rs b/src/base/component/flex/item.rs index ff877b91..07074f28 100644 --- a/src/base/component/flex/item.rs +++ b/src/base/component/flex/item.rs @@ -54,7 +54,7 @@ impl ComponentTrait for Item { }; PrepareMarkup::With(html! { div id=[self.id()] class=[self.classes().get()] style=[order] { - div class="flex-item__inner" { + div class="flex-item__content" { (self.components().render(cx)) } } diff --git a/src/base/component/menu/menu_main.rs b/src/base/component/menu/menu_main.rs index 03883595..c56b8eb5 100644 --- a/src/base/component/menu/menu_main.rs +++ b/src/base/component/menu/menu_main.rs @@ -34,7 +34,7 @@ impl ComponentTrait for Menu { PrepareMarkup::With(html! { div id=[self.id()] class="menu__container" { - div class="menu__inner" { + div class="menu__content" { div class="menu__main" { div class="menu__overlay" {} nav class="menu__nav" { diff --git a/src/base/component/wrapper.rs b/src/base/component/wrapper.rs index c26df2b9..066fe83c 100644 --- a/src/base/component/wrapper.rs +++ b/src/base/component/wrapper.rs @@ -42,35 +42,35 @@ impl ComponentTrait for Wrapper { match self.wrapper_type() { WrapperType::Container => PrepareMarkup::With(html! { div id=[self.id()] class=[self.classes().get()] { - div class="wrapper__inner" { + div class="wrapper__content" { (self.components().render(cx)) } } }), WrapperType::Main => PrepareMarkup::With(html! { main id=[self.id()] class=[self.classes().get()] { - div class="wrapper__inner" { + div class="wrapper__content" { (self.components().render(cx)) } } }), WrapperType::Section => PrepareMarkup::With(html! { section id=[self.id()] class=[self.classes().get()] { - div class="wrapper__inner" { + div class="wrapper__content" { (self.components().render(cx)) } } }), WrapperType::Header => PrepareMarkup::With(html! { header id=[self.id()] class=[self.classes().get()] { - div class="wrapper__inner" { + div class="wrapper__content" { (self.components().render(cx)) } } }), WrapperType::Footer => PrepareMarkup::With(html! { footer id=[self.id()] class=[self.classes().get()] { - div class="wrapper__inner" { + div class="wrapper__content" { (self.components().render(cx)) } } diff --git a/src/core/theme/definition.rs b/src/core/theme/definition.rs index 5c71c138..ca5a9c47 100644 --- a/src/core/theme/definition.rs +++ b/src/core/theme/definition.rs @@ -19,32 +19,41 @@ pub type ThemeRef = &'static dyn ThemeTrait; /// alternative class name or space-separated class names for each variant, without altering the /// default page rendering process. pub enum ThemeBuiltInClasses { - /// Main body container. Default is `body__container`. - BodyContainer, - /// Body inner container. Default is `body__inner`. - BodyInner, - /// A region container. Default is `region__container`. - RegionContainer, - /// A region inner container. Default is `region__inner`. - RegionInner, - /// Main content container. Default is `content__container`. - ContentContainer, - /// Content inner container. Default is `content__inner`. - ContentInner, /// Skip to content link. Default is `skip__to_content`. SkipToContent, + /// Main body wrapper. Default is `body__wrapper`. + BodyWrapper, + /// Main content wrapper. Default is `content__wrapper`. + ContentWrapper, + /// A region container. Default is `region__container`. + RegionContainer, + /// The region inner content. Default is `region__content`. + RegionContent, } +#[rustfmt::skip] +impl ToString for ThemeBuiltInClasses { + fn to_string(&self) -> String { + match self { + ThemeBuiltInClasses::SkipToContent => String::from("skip__to_content"), + ThemeBuiltInClasses::BodyWrapper => String::from("body__wrapper"), + ThemeBuiltInClasses::ContentWrapper => String::from("content__wrapper"), + ThemeBuiltInClasses::RegionContainer => String::from("region__container"), + ThemeBuiltInClasses::RegionContent => String::from("region__content"), + } + } +} /// Los temas deben implementar este "trait". pub trait ThemeTrait: PackageTrait + Send + Sync { #[rustfmt::skip] fn regions(&self) -> Vec<(&'static str, L10n)> { vec![ - ("header", L10n::l("header")), - ("pagetop", L10n::l("pagetop")), - ("content", L10n::l("content")), - ("sidebar", L10n::l("sidebar")), - ("footer", L10n::l("footer")), + ("header", L10n::l("header")), + ("pagetop", L10n::l("pagetop")), + ("sidebar_left", L10n::l("sidebar_left")), + ("content", L10n::l("content")), + ("sidebar_right", L10n::l("sidebar_right")), + ("footer", L10n::l("footer")), ] } @@ -55,31 +64,22 @@ pub trait ThemeTrait: PackageTrait + Send + Sync { /// Theme developers can customize the default implementation of this method to return /// alternative class name or space-separated class names for each variant, without altering the /// default page rendering process. - fn builtin_classes(&self, builtin: ThemeBuiltInClasses) -> Option<&str> { - match builtin { - ThemeBuiltInClasses::BodyContainer => Some("body__container"), - ThemeBuiltInClasses::BodyInner => Some("body__inner"), - ThemeBuiltInClasses::RegionContainer => Some("region__container"), - ThemeBuiltInClasses::RegionInner => Some("region__inner"), - ThemeBuiltInClasses::ContentContainer => Some("content__container"), - ThemeBuiltInClasses::ContentInner => Some("content__inner"), - ThemeBuiltInClasses::SkipToContent => Some("skip__to_content"), - } + fn builtin_classes(&self, builtin: ThemeBuiltInClasses) -> Option { + Some(builtin.to_string()) } fn prepare_region(&self, page: &mut Page, region_name: &str) -> Markup { let render_region = page.components_in(region_name).render(page.context()); if render_region.is_empty() { - html! {} - } else { - html! { - div - id=[OptionId::new(region_name).get()] - class=[self.builtin_classes(ThemeBuiltInClasses::RegionContainer)] - { - div class=[self.builtin_classes(ThemeBuiltInClasses::RegionInner)] { - (render_region) - } + return html! {}; + } + html! { + div + id=[OptionId::new(region_name).get()] + class=[self.builtin_classes(ThemeBuiltInClasses::RegionContainer)] + { + div class=[self.builtin_classes(ThemeBuiltInClasses::RegionContent)] { + (render_region) } } } @@ -98,18 +98,15 @@ pub trait ThemeTrait: PackageTrait + Send + Sync { a href=(skip_to) { (skip) } } } - div class=[self.builtin_classes(ThemeBuiltInClasses::BodyContainer)] { - div class=[self.builtin_classes(ThemeBuiltInClasses::BodyInner)] { - (self.prepare_region(page, "header")) - (self.prepare_region(page, "pagetop")) - div class=[self.builtin_classes(ThemeBuiltInClasses::ContentContainer)] { - div class=[self.builtin_classes(ThemeBuiltInClasses::ContentInner)] { - (self.prepare_region(page, "content")) - (self.prepare_region(page, "sidebar")) - } - } - (self.prepare_region(page, "footer")) + div class=[self.builtin_classes(ThemeBuiltInClasses::BodyWrapper)] { + (self.prepare_region(page, "header")) + (self.prepare_region(page, "pagetop")) + div class=[self.builtin_classes(ThemeBuiltInClasses::ContentWrapper)] { + (self.prepare_region(page, "sidebar_left")) + (self.prepare_region(page, "content")) + (self.prepare_region(page, "sidebar_right")) } + (self.prepare_region(page, "footer")) } } } diff --git a/static/base/css/looks.css b/static/base/css/looks.css index 55db7205..41d027e7 100644 --- a/static/base/css/looks.css +++ b/static/base/css/looks.css @@ -257,7 +257,7 @@ /* Branding component */ -.branding__inner { +.branding__content { display: flex; align-items: flex-end; column-gap: var(--val-gap-0-75); @@ -265,6 +265,8 @@ .branding__name { letter-spacing: 0.02em; font-size: var(--val-fs--l); + font-weight: 700; + text-decoration: none; } .branding__slogan { font-size: var(--val-fs--m); diff --git a/static/base/css/menu.css b/static/base/css/menu.css index 164278f6..df12d1c4 100644 --- a/static/base/css/menu.css +++ b/static/base/css/menu.css @@ -9,11 +9,11 @@ background: var(--val-menu--color-bg); } -.menu__inner { +.menu__content { padding-right: var(--val-gap); } -.menu__inner a, -.menu__inner button { +.menu__content a, +.menu__content button { cursor: pointer; border: none; background: none; @@ -119,10 +119,10 @@ .menu__container { border-radius: var(--val-border-radius); } - .menu__inner { + .menu__content { padding-right: var(--val-gap-0-5); } - .menu__inner button { + .menu__content button { margin: var(--val-gap-0-5) 0 var(--val-gap-0-5) var(--val-gap-0-5); } .menu__trigger { diff --git a/static/base/css/welcome.css b/static/base/css/welcome.css index 59bb905d..75e14f05 100644 --- a/static/base/css/welcome.css +++ b/static/base/css/welcome.css @@ -16,11 +16,11 @@ padding-top: 0; } -#welcome [class$="-col-text"] > .flex-item__inner { +#welcome [class$="-col-text"] > .flex-item__content { margin: 5% 5% 0; text-align: center; } -#welcome [class$="-col-image"] > .flex-item__inner { +#welcome [class$="-col-image"] > .flex-item__content { margin: 1rem 5%; } @@ -28,7 +28,7 @@ text-align: center; margin: 0 5%; } -#welcome .welcome > .wrapper__inner { +#welcome .welcome > .wrapper__content { padding: 2rem 1rem; border-radius: 28px; background: url("/base/images/welcome.jpg") center center no-repeat; @@ -36,18 +36,18 @@ background-size: cover; color: #fff; } -#welcome .welcome > .wrapper__inner > h2 { +#welcome .welcome > .wrapper__content > h2 { color: #fff; } -#welcome .welcome > .wrapper__inner > h3 { +#welcome .welcome > .wrapper__content > h3 { color: #ccc; } -#welcome .promo-col-image > .flex-item__inner { +#welcome .promo-col-image > .flex-item__content { padding: 0 5%; } -#welcome .issues-col-image > .flex-item__inner img { +#welcome .issues-col-image > .flex-item__content img { border-radius: 40px; } @@ -55,20 +55,20 @@ /* MD - Applies >= 768px */ @media screen and (min-width: 48rem) { - #welcome .promo-col-image > .flex-item__inner { + #welcome .promo-col-image > .flex-item__content { padding: 0; } #welcome .issues { padding-top: 1.6rem; } - #welcome .issues-col-text > .flex-item__inner { + #welcome .issues-col-text > .flex-item__content { text-align: left; } } /* LG - Applies >= 992px */ @media screen and (min-width: 62rem) { - #welcome .hello-col-text > .flex-item__inner { + #welcome .hello-col-text > .flex-item__content { margin-top: 2rem; text-align: left; } @@ -77,19 +77,19 @@ padding: 0 15% 2rem; } - #welcome .promo-col-text > .flex-item__inner { + #welcome .promo-col-text > .flex-item__content { margin-right: 0; text-align: right; } } /* XL - Applies >= 1280px */ @media screen and (min-width: 80rem) { - #welcome .hello-col-text > .flex-item__inner { + #welcome .hello-col-text > .flex-item__content { margin-top: 4rem; margin-left: 20%; } - #welcome .pagetop-col-text > .flex-item__inner { + #welcome .pagetop-col-text > .flex-item__content { text-align: left; } }