🚚 Review global class names for regions

This commit is contained in:
Manuel Cillero 2024-02-29 23:36:40 +01:00
parent 5840dc215e
commit ee3956cb2c
2 changed files with 11 additions and 14 deletions

View file

@ -20,16 +20,14 @@ pub trait ThemeTrait: PackageTrait + Send + Sync {
] ]
} }
fn prepare_region(&self, page: &mut Page, region: &str) -> Markup { fn prepare_region(&self, page: &mut Page, region_name: &str) -> Markup {
let render_region = page.components_in(region).render(page.context()); let render_region = page.components_in(region_name).render(page.context());
if render_region.is_empty() { if render_region.is_empty() {
html! {} html! {}
} else { } else {
let id = OptionId::new(region).get().unwrap();
let id_inner = concat_string!(id, "__inner");
html! { html! {
div id=(id) class="pt-region" { div id=[OptionId::new(region_name).get()] class="pt-region" {
div id=(id_inner) class="pt-region__inner" { div class="pt-region__inner" {
(render_region) (render_region)
} }
} }
@ -55,7 +53,7 @@ pub trait ThemeTrait: PackageTrait + Send + Sync {
(self.prepare_region(page, "header")) (self.prepare_region(page, "header"))
(self.prepare_region(page, "pagetop")) (self.prepare_region(page, "pagetop"))
div class="pt-content" { div class="pt-content" {
div class="pt-content__wrapper" { div class="pt-content__inner" {
(self.prepare_region(page, "content")) (self.prepare_region(page, "content"))
(self.prepare_region(page, "sidebar")) (self.prepare_region(page, "sidebar"))
} }

View file

@ -74,9 +74,9 @@ a:active {
/* LAYOUT */ /* LAYOUT */
#header__inner, #header > .pt-region__inner,
.pt-content__wrapper, .pt-content__inner,
#footer__inner { #footer > .pt-region__inner {
width: 100%; width: 100%;
max-width: var(--pt-max-width); max-width: var(--pt-max-width);
margin: 0 auto; margin: 0 auto;
@ -85,18 +85,17 @@ a:active {
#header { #header {
background: var(--pt-color--white); background: var(--pt-color--white);
} }
.pt-content__wrapper { .pt-content__inner {
background: var(--pt-color--white); background: var(--pt-color--white);
} }
#footer { #footer {
background: linear-gradient(180deg, var(--pt-color--gray-5) 0%, var(--pt-color--gray-10) 100%); background: linear-gradient(180deg, var(--pt-color--gray-5) 0%, var(--pt-color--gray-10) 100%);
} }
#footer__inner { #footer > .pt-region__inner {
color: var(--pt-color--gray-65); color: var(--pt-color--gray-65);
background: var(--pt-color--gray-20); background: var(--pt-color--gray-20);
padding: calc(3 * var(--pt-gap)) 0 calc(12 * var(--pt-gap)); padding: calc(3 * var(--pt-gap)) 0 calc(12 * var(--pt-gap));
} }
#footer__inner a { #footer > .pt-region__inner a {
color: var(--pt-color--white); color: var(--pt-color--white);
} }