♻️ Refactor for latest code improvements

pagetop/src/core/theme/definition.rs

@@ -24,11 +24,20 @@ pub trait ThemeTrait: ModuleTrait + Send + Sync {
     fn before_prepare_body(&self, page: &mut Page) {}
 
     fn prepare_body(&self, page: &mut Page) -> Markup {
+        let header = page.prepare_region("header");
+        let pagetop = page.prepare_region("pagetop");
+        let content = page.prepare_region("content");
+        let sidebar = page.prepare_region("sidebar");
+        let footer = page.prepare_region("footer");
         html! {
             body class=[page.body_classes().get()] {
-                @for (region, _) in self.regions().iter() {
-                    @if let Some(content) = page.prepare_region(region) {
-                        #(region) class="region" { (content) }
+                div class="pt-body__wrapper" {
+                    div class="pt-body__regions" {
+                        (header.unwrap_or_default())
+                        (pagetop.unwrap_or_default())
+                        (content.unwrap_or_default())
+                        (sidebar.unwrap_or_default())
+                        (footer.unwrap_or_default())
                     }
                 }
             }

pagetop/src/locale/en-US/base.ftl

@@ -1,4 +1,4 @@
-# SiteBranding component.
+# Branding component.
 site_home = Home
 
 # PoweredBy component.

pagetop/src/locale/es-ES/base.ftl

@@ -1,4 +1,4 @@
-# SiteBranding component.
+# Branding component.
 site_home = Inicio
 
 # PoweredBy component.

pagetop/src/response/page.rs

@@ -3,7 +3,7 @@ use crate::base::component::L10n;
 use crate::core::component::{ArcComponent, ComponentTrait, TypedComponent};
 use crate::core::component::{Context, ContextOp};
 use crate::core::theme::ComponentsRegions;
-use crate::html::{html, ClassesOp, Favicon, Markup, OptionClasses, DOCTYPE};
+use crate::html::{html, ClassesOp, Favicon, Markup, OptionClasses, OptionId, DOCTYPE};
 use crate::response::fatal_error::FatalError;
 use crate::{fn_builder, service};
 
@@ -177,7 +177,11 @@ impl Page {
         if render.is_empty() {
             None
         } else {
-            Some(render)
+            Some(html! {
+                div id=[OptionId::with(region).get()] class="region" {
+                    (render)
+                }
+            })
         }
     }
 }

pagetop/static/base/css/components.css

@@ -0,0 +1,46 @@
+/* Image component */
+
+.pt-img__fluid {
+	max-width: 100%;
+	height: auto;
+}
+
+/* Branding component */
+
+.pt-branding__wrapper {
+	display: flex;
+	align-items: flex-end;
+	column-gap: var(--pt-gap-0-75);
+}
+.pt-branding__name {
+	letter-spacing: 0.02em;
+    font-size: var(--pt-font-size-xl);
+}
+.pt-branding__slogan {
+    font-size: var(--pt-font-size-l);
+}
+
+/* SM - Applies <= 568px */
+@media (max-width: 35.5em) {
+	.pt-branding__logo {
+		display: none;
+	}
+}
+/* LG - Applies <= 992px */
+@media (max-width: 62em) {
+	.pt-branding__slogan {
+		font-size: var(--pt-font-size-l);
+	}
+}
+
+/* PoweredBy component */
+
+#pt-powered-by {
+	text-align: center;
+}
+#pt-powered-by .pt-pagetop__logo img,
+#pt-powered-by .pt-pagetop__logo svg {
+	margin-left: .275em;
+	height: 1.275em;
+	vertical-align: middle;
+}

pagetop/static/base/css/looks.css

@@ -5,7 +5,7 @@
 	height: auto;
 }
 
-/* SiteBranding component */
+/* Branding component */
 
 .pt-branding__wrapper {
 	display: flex;

pagetop/static/base/css/root.css

@@ -14,6 +14,7 @@
 	--pt-line-height-base: 1.5;
 	--pt-color-bg: #fff;
 	--pt-color: #212529;
+	--pt-max-width: 80rem;
 /*
 	--pt-color-rgb: 33,37,41;
 	--pt-main--bg-rgb: 255,255,255;
@@ -21,7 +22,6 @@
 
 	--line-height-base: 1.6875rem;
 	--line-height-s: 1.125rem;
-	--max-width: 84.375rem;
 	--max-bg-color: 98.125rem;
 */
 	--pt-gap: 1.125rem;

pagetop/static/base/css/styles.css

@@ -9,3 +9,8 @@ body {
 	-webkit-text-size-adjust: 100%;
 	-webkit-tap-highlight-color: transparent;
 }
+
+.pt-body__wrapper {
+	max-width: var(--pt-max-width);
+	margin: 0 auto;
+}