From 2f1647546e05d96120c2dc284879ab15f87a70e4 Mon Sep 17 00:00:00 2001
From: Fred Snyder <fredsnyder@fastmail.com>
Date: Tue, 14 Dec 2021 19:17:47 +0100
Subject: [PATCH] Add global :root css vars for  page width

---
 src/components/kaboom/footer.ts | 2 +-
 src/components/kaboom/navBar.ts | 2 +-
 src/components/profiles.ts      | 2 +-
 src/style.css                   | 7 ++++++-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/kaboom/footer.ts b/src/components/kaboom/footer.ts
index 6546621..755f035 100644
--- a/src/components/kaboom/footer.ts
+++ b/src/components/kaboom/footer.ts
@@ -5,7 +5,7 @@ const footerCss = `
 }
 
 .footer-container {
-    max-width: 1200px;
+    max-width: var(--max-width, 1200px);
     margin: 0 auto;
 }
 
diff --git a/src/components/kaboom/navBar.ts b/src/components/kaboom/navBar.ts
index 563c14e..9b6ce87 100644
--- a/src/components/kaboom/navBar.ts
+++ b/src/components/kaboom/navBar.ts
@@ -4,7 +4,7 @@ const navTemplate = document.createElement('template');
 navTemplate.innerHTML = `
 <style>
 	nav {
-		max-width: 1200px;
+		max-width: var(--max-width, 800px);
 		margin: 0 auto;
 		padding: 1rem 0 0 0;
 	}
diff --git a/src/components/profiles.ts b/src/components/profiles.ts
index 33e385b..5ffbd74 100644
--- a/src/components/profiles.ts
+++ b/src/components/profiles.ts
@@ -3,7 +3,7 @@ const template = document.createElement('template');
 template.innerHTML = `
 <style>
 	.profilesWrapper {
-		max-width: 800px;
+		max-width: -var(--max-width, 800px);
 		margin: 0 auto;
 		text-align: center;
 	}
diff --git a/src/style.css b/src/style.css
index 1e1d781..7fe23f7 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,5 +1,10 @@
 /* some basic kbsb styles */
 
+/* global variables */
+:root {
+    --max-width: 800px;
+}
+
 html {
     font-size: 14px;
 }
@@ -13,7 +18,7 @@ body {
 }
 
 .container {
-    max-width: 1200px;
+    max-width: var(--max-width);
     margin: 0 auto;
 }