From 239568d6150b2ce0aa1464516ac7e5fd2b0d979c Mon Sep 17 00:00:00 2001
From: Jeroen De Meerleer <me@jeroened.be>
Date: Fri, 24 Jan 2025 12:34:34 +0100
Subject: [PATCH] Update styles for better layout and readability

- Adjusted padding and margins in main content area
- Added line-height to headings and paragraphs for clarity
- Introduced a new variable for font size to maintain consistency
---
 assets/styles/app.css  | 13 ++++++++++---
 assets/styles/vars.css |  1 +
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/assets/styles/app.css b/assets/styles/app.css
index fd13911..81e2e97 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -57,12 +57,15 @@ body {
 main {
     font-family: var(--main-font);
     background-color: var(--main-background);
-    padding: 0 15px;
+    font-size: var(--main-size);
+    padding: 15px;
+    margin: 5% 20%;
 
     h1 {
         font-weight: normal;
         font-size: var(--main-h1-size);
-        margin: 5px 0;
+        margin: 15px 0;
+        line-height: calc(var(--main-h1-size) * 2);
     }
     h1:before {
         color: var(--main-h1-before-color);
@@ -71,7 +74,8 @@ main {
 
     h2 {
         font-weight: normal;
-        margin: 5px 0;
+        margin: 15px 0;
+        line-height: calc(var(--main-h2-size) * 2);
     }
     h2:before {
         content: "## ";
@@ -82,12 +86,14 @@ main {
     h3 {
         font-weight: normal;
         margin: 10px 0;
+        line-height: calc(var(--main-h3-size) * 2);
     }
     h3:before {
         font-size: var(--main-h3-size);
     }
     p {
         margin: 5px 0;
+        line-height: calc(var(--main-size) * 2);
     }
 
     a {
@@ -102,6 +108,7 @@ main {
 
         li  {
             max-width: calc(100vw - 30px);
+            line-height: calc(var(--main-size) * 1.5);
         }
     }
 }
diff --git a/assets/styles/vars.css b/assets/styles/vars.css
index be25573..01596e5 100644
--- a/assets/styles/vars.css
+++ b/assets/styles/vars.css
@@ -7,6 +7,7 @@
 
     --main-font: 'Fira Code', monospace;
     --main-background: rgb(224, 224, 224);
+    --main-size: 16px;
     --main-h1-size: 28px;
     --main-h1-before-color: rgb(128,128,128);
     --main-h2-size: 24px;