🚧 Working on theme subsystem

packages/pagetop-bootsier/src/lib.rs

@@ -32,11 +32,10 @@ impl ThemeTrait for Bootsier {
         ]
     }
 
-    #[rustfmt::skip]
-    fn builtin_classes(&self, builtin: ThemeBuiltInClasses) -> Option<&str> {
+    fn builtin_classes(&self, builtin: ThemeBuiltInClasses) -> Option<String> {
         match builtin {
-            ThemeBuiltInClasses::RegionContainer => Some("container"),
-            _ => None,
+            ThemeBuiltInClasses::RegionContainer => Some(String::from("container")),
+            _ => Some(builtin.to_string()),
         }
     }
 

packages/pagetop-bulmix/src/lib.rs

@@ -16,13 +16,12 @@ impl PackageTrait for Bulmix {
 
 impl ThemeTrait for Bulmix {
     #[rustfmt::skip]
-    fn builtin_classes(&self, builtin: ThemeBuiltInClasses) -> Option<&str> {
+    fn builtin_classes(&self, builtin: ThemeBuiltInClasses) -> Option<String> {
         match builtin {
-            ThemeBuiltInClasses::BodyContainer    => Some("container"),
-            ThemeBuiltInClasses::RegionContainer  => Some("container"),
-            ThemeBuiltInClasses::ContentContainer => Some("container"),
-            ThemeBuiltInClasses::SkipToContent    => Some("skip__to_content"),
-            _ => None,
+            ThemeBuiltInClasses::BodyWrapper     => Some(String::from("container")),
+            ThemeBuiltInClasses::ContentWrapper  => Some(String::from("container")),
+            ThemeBuiltInClasses::RegionContainer => Some(String::from("container")),
+            _ => Some(builtin.to_string()),
         }
     }
 

src/locale/en-US/theme.ftl

@@ -1,7 +1,8 @@
 header = Header
 pagetop = Page Top
 content = Content
-sidebar = Sidebar
+sidebar_left = Sidebar Left
+sidebar_right = Sidebar Right
 footer = Footer
 
 skip_to_content = Skip to main content (Press Enter)

src/locale/es-ES/theme.ftl

@@ -1,7 +1,8 @@
 header = Cabecera
 pagetop = Superior
 content = Contenido
-sidebar = Barra lateral
+sidebar_left = Barra lateral izquierda
+sidebar_right = Barra lateral derecha
 footer = Pie
 
 skip_to_content = Ir al contenido principal (Pulsar Intro)

static/base/css/inception.css

@@ -73,28 +73,36 @@ a:active {
 
 /* LAYOUT */
 
-#header > .region__inner,
-.content__inner,
-#footer > .region__inner {
+.body__wrapper {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+#header,
+#pagetop,
+.content__wrapper,
+#footer {
+	width: 100%;
+	max-width: var(--val-max-width);
+	background: var(--val-color--white);
+}
+#header > .region__content /*,
+#pagetop > .region__content */ {
+	margin: var(--val-gap);
+}
+#footer {
+	max-width: 100%;
+	background: linear-gradient(180deg, var(--val-color--gray-5) 0%, var(--val-color--gray-10) 100%);
+}
+#footer > .region__content {
 	width: 100%;
 	max-width: var(--val-max-width);
 	margin: 0 auto;
-}
-
-#header {
-	background: var(--val-color--white);
-}
-.content__inner {
-	background: var(--val-color--white);
-}
-#footer {
-	background: linear-gradient(180deg, var(--val-color--gray-5) 0%, var(--val-color--gray-10) 100%);
-}
-#footer > .region__inner {
 	color: var(--val-color--gray-65);
 	background: var(--val-color--gray-20);
 	padding: calc(3 * var(--val-gap)) 0 calc(12 * var(--val-gap));
 }
-#footer > .region__inner a {
+#footer > .region__content a {
 	color: var(--val-color--white);
 }

static/base/css/root.css

@@ -200,7 +200,7 @@
 	--val-menu--color-border: rgba(0, 0, 0, 0.1);
 	--val-menu--color-shadow: rgba(0, 0, 0, 0.06);
 	--val-menu--line-padding: 0.625rem;
-	--val-menu--line-height: 1.875rem;
+	--val-menu--line-height: calc(1.875rem + 1px);
 	--val-menu--item-height: calc(var(--val-menu--line-padding) + var(--val-menu--line-height));
 	--val-menu--item-width-min: 14rem;
 	--val-menu--item-width-max: 20rem;