From 78f236203c737330938eab22803d4cabfba30686 Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Fri, 20 Jun 2025 14:51:49 +0100
Subject: [PATCH] Extract spacing variables

A scale taken from https://medium.com/codyhouse/create-your-design-system-part-4-spacing-895c9213e2b9
---
 assets/css/app.css | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index e97fd04..1021572 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -12,6 +12,17 @@
   font-style: normal;
 }
 
+:root {
+  --space-unit: 1em;
+  --space-xxs:  calc(0.25 * var(--space-unit));
+  --space-xs:   calc(0.5 * var(--space-unit));
+  --space-sm:   calc(0.75 * var(--space-unit));
+  --space-md:   calc(1.25 * var(--space-unit));
+  --space-lg:   calc(2 * var(--space-unit));
+  --space-xl:   calc(3.25 * var(--space-unit));
+  --space-xxl:  calc(5.25 * var(--space-unit));
+}
+
 p, li, a {
   font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   color: #1e2637;
@@ -23,7 +34,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .header {
   display: flex;
-  padding: 1.4rem;
+  padding: var(--space-md);
   align-items: center;
   justify-content: space-between;
 }
@@ -40,27 +51,27 @@ h1, h2, h3, h4, h5, h6 {
 .header_logo-link {
   display: flex;
   align-items: center;
-  gap: 0.7rem;
+  gap: var(--space-sm);
 }
 
 .header_menu-list {
   list-style-type: none;
   display: flex;
-  gap: 0.7rem;
+  gap: var(--space-sm);
   font-size: 1rem;
   letter-spacing: 0.05em;
 }
 
 .hero {
   width: 100%;
-  padding: 8rem;
+  padding: var(--space-xxl);
   background-image: url(/assets/img/banner-collage.jpg);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--space-md);
   align-items: center;
   text-align: center;
 
@@ -80,7 +91,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .hero_button {
   cursor: pointer;
-  padding: 1rem;
+  padding: var(--space-sm);
   border: 1px solid white;
   border-radius: 4px;
 }