From deb1bb57ae0d5c0766632d7255de4e478cbd4bb0 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Fri, 26 Mar 2021 20:56:54 +0100
Subject: navbar component + layout variables

---
 styles/layout.css | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

(limited to 'styles')

diff --git a/styles/layout.css b/styles/layout.css
index e223b11..c739d13 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -1,12 +1,18 @@
+:root {
+	--nav-width: 200px;
+	--page-width: 700px;
+	--page-margins: 24px;
+}
+
 .centeredPage {
-	max-width: calc(700px + 24px + 200px);
+	max-width: calc(var(--nav-width) + var(--page-width) + var(--page-margins));
 	margin: 0 auto;
 	margin-top: 96px;
-	padding: 0 24px;
+	padding: 0 var(--page-margins);
 
 	display: grid;
-	gap: 24px;
-	grid-template-columns: 200px 1fr;
+	gap: var(--page-margins);
+	grid-template-columns: var(--nav-width) 1fr;
 	grid-auto-rows: auto;
 }
 
@@ -22,7 +28,7 @@
 }
 .navAreaWrapper > .sticky {
 	position: sticky;
-	top: 24px;
+	top: var(--page-margins);
 }
 
 .contentWrapper {
@@ -31,7 +37,7 @@
 }
 .contentWrapper > * {
 	margin: 0;
-	margin-bottom: 24px;
+	margin-bottom: var(--page-margins);
 }
 
 .contentWrapper p {
-- 
cgit v1.2.3