Move header and footer outside the container.

Header and footer can be wrapped in a separate div.container if your header and footer patter need to be inside a container class.

public/index.html

@@ -38,6 +38,8 @@
           <li><a href="./?p=status">Status</a></li>
         </ul>
       </nav>
+    </div>
+    <div class="container">
       <p class="info-switches"><span></span><span id="deprecated" role="switch"></span>
         <label for="deprecated">Show deprecated patterns</label><span></span><span id="breakpoints" role="switch"></span>
         <label for="breakpoints">Show breakpoint information</label>

src/pg/core/_master-index.pug

@@ -1,93 +1,87 @@
-//-		
+//-		
-	DS2 core (c) 2024 Alexander McIlwraith 
+	DS2 core (c) 2024 Alexander McIlwraith 
-	Core licensed under CC BY-SA 4.0 
+	Core licensed under CC BY-SA 4.0 
-
+
-- const getDate = function(){
+- const getDate = function(){
--	var d = new Date();
+-	var d = new Date();
--	return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
+-	return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
-- }
+- }
-- String.prototype.toTitleCase = function() {
+- String.prototype.toTitleCase = function() {
--	return this.replace(/\w\S*/g, function(txt) {
+-	return this.replace(/\w\S*/g, function(txt) {
--      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+-      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
--    });
+-    });
-- }
+- }
-- String.prototype.toSentenceCase = function() {
+- String.prototype.toSentenceCase = function() {
--	return this.charAt(0).toUpperCase() + this.substr(1).toLowerCase();
+-	return this.charAt(0).toUpperCase() + this.substr(1).toLowerCase();
-- }
+- }
-- String.prototype.toContent = function() {
+- String.prototype.toContent = function() {
--	return this.replace(/-/g, " ");
+-	return this.replace(/-/g, " ");
-- }
+- }
-- String.prototype.toPath = function() {
+- String.prototype.toPath = function() {
--	return this.trim().replace(/ /g, "_").replace(/-/g, "_").replace(/[\/\W]/g, "").replace(/_/g, "-");
+-	return this.trim().replace(/ /g, "_").replace(/-/g, "_").replace(/[\/\W]/g, "").replace(/_/g, "-");
-- }
+- }
-
+
-include ../_config
+include ../_config
-block config
+block config
-
+
-
+
-mixin show-content(items, path)
+mixin show-content(items, path)
-
+
-	- path = (path == "" ? "" : path +  "/") + items.name.toPath()
+	- path = (path == "" ? "" : path +  "/") + items.name.toPath()
-
+
-	if items.core == true
+	if items.core == true
-		- items.status = "complete"
+		- items.status = "complete"
-
+
-	article(id=path.replace(/\//g, "-").toPath()
+	article(id=path.replace(/\//g, "-").toPath()
-		data-name=items.name
+		data-name=items.name
-		data-status=items.status
+		data-status=items.status
-		data-display=items.display
+		data-display=items.display
-		data-template=(items.template == undefined ? "pug" : items.template) 
+		data-template=(items.template == undefined ? "pug" : items.template) 
-		data-core= (items.core ? "true" : "false")
+		data-core= (items.core ? "true" : "false")
-		data-path=path
+		data-path=path
-		style="height: 100vh"
+		style="height: 100vh"
-		)
+		)
-		if items.display
+		if items.display
-			h1(class="status-" + items.status )
+			h1(class="status-" + items.status )
-				span= items.display
+				span= items.display
-					tool-tip(role="tooltip" inert tip-position="right")= items.status.toSentenceCase().toContent()
+					tool-tip(role="tooltip" inert tip-position="right")= items.status.toSentenceCase().toContent()
-		else 
+		else 
-			h1(class="status-" + items.status )
+			h1(class="status-" + items.status )
-				span= items.name.toSentenceCase().toContent()
+				span= items.name.toSentenceCase().toContent()
-					tool-tip(role="tooltip" inert tip-position="right")= items.status.toSentenceCase().toContent()
+					tool-tip(role="tooltip" inert tip-position="right")= items.status.toSentenceCase().toContent()
-	if items.files
+	if items.files
-		each item in items.files
+		each item in items.files
-			+show-content(item, path)
+			+show-content(item, path)
-
+
-
+
-doctype html
+doctype html
-html(lang= lang )
+html(lang= lang )
-	head 
+	head 
-		meta(charset="utf-8")
+		meta(charset="utf-8")
-		meta(http-equiv="X-UA-Compatible" content="IE=edge")
+		meta(http-equiv="X-UA-Compatible" content="IE=edge")
-		meta(name="viewport" content="width=device-width, initial-scale=1")
+		meta(name="viewport" content="width=device-width, initial-scale=1")
-		
+		
-		title(data-site= site )= site
+		title(data-site= site )= site
-
+
-		block head
+		block head
-		link( href="assets/scaffolding.css" rel="stylesheet" )
+		link( href="assets/scaffolding.css" rel="stylesheet" )
-
+
-	body
+	body
-		//		
+		//		
-			DS2 core (c) 2024 Alexander McIlwraith 
+			DS2 core (c) 2024 Alexander McIlwraith 
-			Core licensed under CC BY-SA 4.0 
+			Core licensed under CC BY-SA 4.0 
-
+
-
+
-		a.skip(href="#main") Skip to main content
+		a.skip(href="#main") Skip to main content
-
+
-		block top
+		block header
-
+		div.container
-		div.container
+			block body-top
-
+			main#main
-			block header				
+				h1= site
-
+				each category in content
-			main#main
+					+show-content(category, "")
-				
+			block body-bottom
-				h1= site
+		block footer
-				each category in content
+
-					+show-content(category, "")
+		script(src="assets/scaffolding-min.js")
-
-			block footer
-
-		block bottom
-
-		script(src="assets/scaffolding-min.js")

src/pg/index.pug

@@ -8,14 +8,17 @@ block head
 	link(rel="icon" href="https://assets.gamv.ca/favicon-dark.svg" media="(prefers-color-scheme:dark)")
 
 block header
-	include patterns/core/header/_header.pug
+	div.container
-	
+		include patterns/core/header/_header.pug
-	nav
+		
-		ul
+		nav
-			each first in content
+			ul
-				li(class= navClass)
+				each first in content
-					a(href="./?p=" + first.name.toPath() )= first.name.toContent().toSentenceCase()
+					li(class= navClass)
+						a(href="./?p=" + first.name.toPath() )= first.name.toContent().toSentenceCase()
 
+
+block body-top
 	p.info-switches
 		span
 		span#deprecated(role="switch")