Add global :root css vars for page width

kaboomshebang · Dec 14, 2021 · 2f16475 · 2f16475
1 parent 7b01414
commit 2f16475
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }