Add layouts-center

dist/layouts-center.module.css

@@ -0,0 +1,8 @@
+:where(.bluelib) :where(.layout-center) :where(.layout-center-background) {
+  width: 100vw;
+  height: 120vh;
+  position: fixed;
+  z-index: -1;
+  object-fit: cover;
+  object-position: center;
+}

dist/layouts-center.module.less

@@ -0,0 +1,10 @@
+// Mixins
+@import (less) "../src/mixins/fonts.less";
+@import (less) "../src/mixins/hsl.less";
+
+// Selector
+@import (less) "../src/selectorsets/module.less";
+
+// Rule
+@import (less) "../src/rulesets/layouts/layouts-center.less";
+

dist/layouts-center.module.min.css

@@ -0,0 +1 @@
+:where(.bluelib) :where(.layout-center) :where(.layout-center-background){width:100vw;height:120vh;position:fixed;z-index:-1;object-fit:cover;object-position:center}

dist/layouts-center.root.css

@@ -0,0 +1,8 @@
+:where(body) :where(.layout-center) > :where(img) {
+  width: 100vw;
+  height: 120vh;
+  position: fixed;
+  z-index: -1;
+  object-fit: cover;
+  object-position: center;
+}

dist/layouts-center.root.less

@@ -0,0 +1,10 @@
+// Mixins
+@import (less) "../src/mixins/fonts.less";
+@import (less) "../src/mixins/hsl.less";
+
+// Selector
+@import (less) "../src/selectorsets/root.less";
+
+// Rule
+@import (less) "../src/rulesets/layouts/layouts-center.less";
+

dist/layouts-center.root.min.css

@@ -0,0 +1 @@
+:where(body) :where(.layout-center)>:where(img){width:100vw;height:120vh;position:fixed;z-index:-1;object-fit:cover;object-position:center}

examples/index.css

@@ -1,42 +1,3 @@
-#background {
-    width: 100vw;
-    height: 120vh;
-
-    position: fixed;
-    z-index: -1;
-
-    object-fit: cover;
-    object-position: center;
-}
-
-#body {
-    padding: 0 16px;
-}
-
-#background {
-    margin: 0 -16px;
-}
-
-@media screen and (max-width: 800px) {
-    #body {
-        padding: 0 8px;
-    }
-
-    #background {
-        margin: 0 -8px;
-    }
-}
-
-@media screen and (max-width: 400px) {
-    #body {
-        padding: 0 4px;
-    }
-
-    #background {
-        margin: 0 -4px;
-    }
-}
-
 #body :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
     min-width: 360px;
 }
@@ -44,9 +5,3 @@
 #body .panel :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
     min-width: unset;
 }
-
-#body article {
-    margin: 0 auto;
-
-    max-width: 1600px;
-}

examples/index.js

@@ -27,6 +27,7 @@ const enabledByDefault = [
     "less:dist-base:root",
     "less:dist-classic:root",
     "less:dist-glass:root",
+    "less:dist-layouts-center:root",
     "less:dist-colors-royalblue:root",
     "less:dist-fonts-fira-ghpages:root",
 ]
@@ -71,7 +72,7 @@ async function enableChanges() {
     )
     console.debug("Found Less fonts:", lessFonts)
 
-    background = document.querySelector("#background")
+    background = document.querySelector(".layout-center-background")
     console.debug("Found background:", background)
 
     for(const [k, v] of Object.entries(lessStyles)) {

src/rulesets/layouts/layouts-center.less

@@ -0,0 +1,46 @@
+/**
+ * Bluelib Layouts Center
+ * by <me@steffo.eu>
+ */
+
+@{bluelib} {
+
+	&@{layout-center} {
+		padding: 0 16px;
+	}
+
+
+	@media screen and (max-width: 900px) {
+		&@{layout-center} {
+			padding: 0 8px;
+		}
+	}
+
+	@media screen and (max-width: 450px) {
+		&@{layout-center} {
+			padding: 0 4px;
+		}
+	}
+
+	min-height: 100vh;
+	max-width: 1600px;
+	margin: 0 auto;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: stretch;
+
+	> @{layout-center-background} {	
+		position: fixed;
+		z-index: -100;
+
+		top: 0;
+		left: 0;
+		width: 110vw;
+		height: 110vh;
+	
+		object-fit: cover;
+		object-position: center;
+	}
+}

src/selectorsets/module.less

@@ -2,6 +2,12 @@
 
 @all: ~":where(*)";
 
+@layout-center: ~":where(.layout-center)";
+@layout-center-background: ~":where(.layout-center-background)";
+@layout-center-header: ~":where(.layout-center-header)";
+@layout-center-main: ~":where(.layout-center-main)";
+@layout-center-footer: ~":where(.layout-center-footer)";
+
 @page-main: ~":where(.page-main)";
 @page-aside: ~":where(.page-aside)";
 @page-header: ~":where(.page-header)";

src/selectorsets/root.less

@@ -2,6 +2,12 @@
 
 @all: ~":where(*)";
 
+@layout-center: ~":where(.layout-center)";
+@layout-center-background: ~":where(img)";
+@layout-center-header: ~":where(header)";
+@layout-center-main: ~":where(main)";
+@layout-center-footer: ~":where(footer)";
+
 @page-main: ~":where(main)";
 @page-aside: ~":where(aside)";
 @page-header: ~":where(header)";