From 20b7851aca47525955f151fb39ab485abe5bb140 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Tue, 22 Aug 2023 09:06:27 +0100
Subject: Relativises stuff to relative rem

---
 public/css/variables/spacing.css | 43 ++++++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 13 deletions(-)

(limited to 'public/css/variables/spacing.css')

diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css
index f57c86c..c9dc726 100644
--- a/public/css/variables/spacing.css
+++ b/public/css/variables/spacing.css
@@ -1,18 +1,35 @@
 :root {
-  --margin-inline-md: 1.5rem;
-  --margin-block-lg: 3rem;
-  --margin-block-md: 2rem;
-  --margin-block-sm: 1rem;
+  --margin-inline-md: calc(8 * var(--spacing-relative-eighth-rem));
+  --margin-block-lg: calc(16 * var(--spacing-relative-eighth-rem));
+  --margin-block-md: calc(10 * var(--spacing-relative-eighth-rem));
+  --margin-block-sm: calc(5 * var(--spacing-relative-eighth-rem));
 
-  --padding-inline-lg: 4.25rem;
-  --padding-inline-md: 2.25rem;
-  --padding-inline-sm: 0.5rem;
-  --padding-block-lg: 2.5rem;
-  --padding-block-md: 1.5rem;
-  --padding-block-sm: 0.5rem;
+  --padding-inline-lg: calc(22 * var(--spacing-relative-eighth-rem));
+  --padding-inline-md: calc(12 * var(--spacing-relative-eighth-rem));
+  --padding-inline-sm: calc(3 * var(--spacing-relative-eighth-rem));
+  --padding-block-lg: calc(12 * var(--spacing-relative-eighth-rem));
+  --padding-block-md: calc(8 * var(--spacing-relative-eighth-rem));
+  --padding-block-sm: calc(5 * var(--spacing-relative-eighth-rem));
 
-  --grid-padding-start: 2.25rem;
-  --grid-column-width: 6rem;
-  --grid-gutter-width: 0.5rem;
+  --grid-padding-start: calc(var(--grid-padding-start-relative-eighth-rem) * var(--spacing-relative-eighth-rem));
+  --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--spacing-relative-eighth-rem));
+  --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--spacing-relative-eighth-rem));
+  
+  --grid-total-relative-eighth-rem-width: calc(
+    var(--grid-padding-start-relative-eighth-rem) * 2 +
+    var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) + 
+    var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1)
+  );
+  --spacing-relative-eighth-rem: calc(
+    var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width)
+  );
+
+  --grid-column-width-relative-eighth-rem: 32;
+  --grid-gutter-width-relative-eighth-rem: 4;
+
+  /* small screens */
+
+  --grid-total-width: 30rem;
+  --grid-padding-start-relative-eighth-rem: 12;
   --grid-column-count: 4;
 }
-- 
cgit v1.2.3