From fcfe57e5e2f3436d74b73d9f4dce5f4ce143aab9 Mon Sep 17 00:00:00 2001
From: rejas <github@veeck.de>
Date: Fri, 14 May 2021 17:09:46 +0200
Subject: [PATCH] Add more properties for finer body margins

---
 css/custom.css.sample | 17 +++++++++++++++--
 css/main.css          | 22 +++++++++++++---------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/css/custom.css.sample b/css/custom.css.sample
index 091462f7..ac5b5e2e 100644
--- a/css/custom.css.sample
+++ b/css/custom.css.sample
@@ -1,4 +1,8 @@
 /* Magic Mirror Custom CSS Sample
+ *
+ * Change color and fonts here.
+ *
+ * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
  *
  * MIT Licensed.
  */
@@ -6,13 +10,22 @@
 /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
 /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
 
-/* Change color and fonts here: */
 :root {
   --color-text: #999;
   --color-text-dimmed: #666;
   --color-text-bright: #fff;
   --color-background: black;
-  --font-size: 20px;
+
   --font-primary: "Roboto Condensed";
   --font-secondary: "Roboto";
+  
+  --font-size: 20px;
+  --font-size-small: 0.75rem;
+
+  --gap-body-top: 60px;
+  --gap-body-right: 60px;
+  --gap-body-bottom: 60px;
+  --gap-body-left: 60px;
+  
+  --gap-modules: 30px;
 }
diff --git a/css/main.css b/css/main.css
index 99b561a4..a36ca5e4 100644
--- a/css/main.css
+++ b/css/main.css
@@ -10,8 +10,12 @@
   --font-size: 20px;
   --font-size-small: 0.75rem;
 
-  --gap-body: 60px;
-  --gap-modules: calc(var(--gap-body) / 2);
+  --gap-body-top: 60px;
+  --gap-body-right: 60px;
+  --gap-body-bottom: 60px;
+  --gap-body-left: 60px;
+
+  --gap-modules: 30px;
 }
 
 html {
@@ -27,10 +31,10 @@ html {
 }
 
 body {
-  margin: var(--gap-body);
+  margin: var(--gap-body-top) var(--gap-body-right) var(--gap-body-bottom) var(--gap-body-left);
   position: absolute;
-  height: calc(100% - 2 * var(--gap-body));
-  width: calc(100% - 2 * var(--gap-body));
+  height: calc(100% - var(--gap-body-top) - var(--gap-body-bottom));
+  width: calc(100% - var(--gap-body-right) - var(--gap-body-left));
   background: var(--color-background);
   color: var(--color-text);
   font-family: var(--font-primary), sans-serif;
@@ -159,10 +163,10 @@ sup {
 
 .region.fullscreen {
   position: absolute;
-  top: calc(-1 * var(--gap-body));
-  left: calc(-1 * var(--gap-body));
-  right: calc(-1 * var(--gap-body));
-  bottom: calc(-1 * var(--gap-body));
+  top: calc(-1 * var(--gap-body-top));
+  left: calc(-1 * var(--gap-body-left));
+  right: calc(-1 * var(--gap-body-right));
+  bottom: calc(-1 * var(--gap-body-bottom));
   pointer-events: none;
 }