Introduce small/big vertical Space Variable

1 files changed, 32 insertions, 29 deletions

diff --git a/css/xengineering.css b/css/xengineering.css
index 4a322ed..9067ec7 100644
--- a/css/xengineering.css
+++ b/css/xengineering.css
@@ -34,6 +34,9 @@ contact via mail: me@xengineering.eu
   --background-color-dark2: darkgray;
   
   --font-family-primary: Arial, Helvetica, sans-serif;
+
+  --vertical-space-small: 1vh;
+  --vertical-space-big: 3vh;
 }
 
 /***************************** DEFAULT / MOBILE *******************************/
@@ -85,50 +88,50 @@ main {
 }
 
 h1 {
-  margin-top: 3vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-big);
+  margin-bottom: var(--vertical-space-small);
   font-size: 2.2em;
 }
 
 h2 {
-  margin-top: 3vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-big);
+  margin-bottom: var(--vertical-space-small);
   font-size: 2.0em;
 }
 
 h3 {
-  margin-top: 3vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-big);
+  margin-bottom: var(--vertical-space-small);
   font-size: 1.8em;
 }
 
 h4 {
-  margin-top: 3vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-big);
+  margin-bottom: var(--vertical-space-small);
   font-size: 1.6em;
 }
 
 h5 {
-  margin-top: 3vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-big);
+  margin-bottom: var(--vertical-space-small);
   font-size: 1.4em;
 }
 
 h6 {
-  margin-top: 3vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-big);
+  margin-bottom: var(--vertical-space-small);
   font-size: 1.2em;
 }
 
 p {
-  margin-top: 1vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-small);
+  margin-bottom: var(--vertical-space-small);
 }
 
 a {
   display: inline;
-  margin-top: 1vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-small);
+  margin-bottom: var(--vertical-space-small);
   text-decoration: none;
   color: blue;
 }
@@ -148,33 +151,33 @@ button:hover {
 }
 
 img {
-  margin-top: 1vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-small);
+  margin-bottom: var(--vertical-space-small);
 }
 
 ol {
-  margin-top: 1vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-small);
+  margin-bottom: var(--vertical-space-small);
   list-style-position: outside;
   padding-left: 2em;
 }
 
 ul {
-  margin-top: 1vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-small);
+  margin-bottom: var(--vertical-space-small);
   list-style-position: outside;
   padding-left: 2em;
 }
 
 li {
   display: list-item;
-  margin-top: 1vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-small);
+  margin-bottom: var(--vertical-space-small);
 }
 
 pre {
-  margin-top: 1vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-small);
+  margin-bottom: var(--vertical-space-small);
   padding: 1em;
   white-space: pre-wrap;
   background-color: var(--background-color-light2);
@@ -182,13 +185,13 @@ pre {
 }
 
 footer {
-  height: 3vh;
+  height: var(--vertical-space-big);
   background-color: rgba(0,0,0,0);
 }
 
 .card {
-  margin-top: 1vh;
-  margin-bottom: 1vh;
+  margin-top: var(--vertical-space-small);
+  margin-bottom: var(--vertical-space-small);
   padding: 1em;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   border-radius: 0.5em;