From 796a8ee01a5ac2092da66d6d19180802673fc3e9 Mon Sep 17 00:00:00 2001
From: xengineering <me@xengineering.eu>
Date: Sat, 27 Nov 2021 14:19:19 +0100
Subject: Introduce small/big vertical Space Variable
---
css/xengineering.css | 61 +++++++++++++++++++++++++++-------------------------
1 file changed, 32 insertions(+), 29 deletions(-)
(limited to 'css')
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;
--
cgit v1.2.3-70-g09d2