Reimplement CSS starting with mobile-only Design

1 files changed, 89 insertions, 103 deletions

diff --git a/css/xengineering.css b/css/xengineering.css
index 116cada..062c52c 100644
--- a/css/xengineering.css
+++ b/css/xengineering.css
@@ -22,112 +22,136 @@ contact via mail: me@xengineering.eu
 */
 
 
-/********************************** MOBILE ************************************/
+/******************************** VARIABLES ***********************************/
 
-body {
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
+:root {
+  --font-color-dark: black;
+  --font-color-light: white;
+
+  --background-color-light: white;
+  
+  --font-family-primary: Arial, Helvetica, sans-serif;
 }
 
-body * {
+/***************************** DEFAULT / MOBILE *******************************/
+
+/* personal defaults for all elements */
+* {
+  /* box model elements */
+  margin: 0px;
+  padding: 0px;
+  border: 0px solid;
+
+  /* positioning */
+  position: relative;
+  float: none;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+
   display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: auto;
+
+  /* styling */
+  font-family: var(--font-family-primary);
+  font-size: 1.0em;
+  color: var(--font-color-dark);
+  border-color: var(--font-color-dark);
+  background-color: var(--background-color-light);
 }
 
-script {
-  display: none;
+head {
+  display: none;  /* do not display anything from the head section */
 }
 
-main {
-  padding-left: 20px;
-  padding-right: 20px;
-  text-align: justify;
-  background-color: white;
+body {
+  padding-left: 3vw;
+  padding-right: 3vw;
 }
 
 h1 {
-  text-align: center;
+  margin-top: 3vh;
+  margin-bottom: 1vh;
+  font-size: 2.2em;
 }
 
-img {
-  max-width: 100%;
-  height: auto;
+h2 {
+  margin-top: 3vh;
+  margin-bottom: 1vh;
+  font-size: 2.0em;
+}
+
+h3 {
+  margin-top: 3vh;
+  margin-bottom: 1vh;
+  font-size: 1.8em;
+}
+
+h4 {
+  margin-top: 3vh;
+  margin-bottom: 1vh;
+  font-size: 1.6em;
+}
+
+h5 {
+  margin-top: 3vh;
+  margin-bottom: 1vh;
+  font-size: 1.4em;
+}
+
+h6 {
+  margin-top: 3vh;
+  margin-bottom: 1vh;
+  font-size: 1.2em;
 }
 
 p {
-  text-align: left;
+  margin-top: 1vh;
+  margin-bottom: 1vh;
 }
 
 a {
+  margin-top: 1vh;
+  margin-bottom: 1vh;
   text-decoration: none;
   color: blue;
 }
 
+img {
+  margin-top: 1vh;
+  margin-bottom: 1vh;
+}
+
 ol {
+  margin-top: 1vh;
+  margin-bottom: 1vh;
   list-style-position: inside;
-  padding-left: 0px;
 }
 
 ul {
+  margin-top: 1vh;
+  margin-bottom: 1vh;
   list-style-position: inside;
-  padding-left: 0px;
 }
 
 li {
-  text-align: left;
   display: list-item;
-}
-
-nav {
-  background-color: black;
-}
-
-.menu-anchor {
-  display: block;
-  padding: 16px;
-  text-align: center;
-  color: lightgray;
-  background-color: black;
-  text-decoration: none;
-}
-
-#menu-button {
-  display: block;
-  border: 0px;
-  width: 100%;
-  padding: 16px;
-  text-align: center;
-  color: lightgray;
-  background-color: black;
-  text-decoration: none;
+  margin-top: 1vh;
+  margin-bottom: 1vh;
 }
 
 pre {
+  margin-top: 1vh;
+  margin-bottom: 1vh;
+  padding: 2vw;
   white-space: pre-wrap;
-  color: black;
   background-color: lightgray;
-  padding: 10px;
   border-radius: 5px;
 }
 
-.card {
-  color: black;
-  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-  padding: 10px;
-  border-radius: 5px;
-  margin-bottom: 16px;
-}
-
-.card h3 {
-  margin-top: 0px;
-  text-align: center;
-}
-
-.card p {
-  margin-bottom: 0px;
-  text-align: center;
-}
-
-
 /******************************************************************************/
 
 
@@ -146,44 +170,6 @@ pre {
 
 @media only screen and (min-width: 768px) {
 
-  h1 {
-    text-align: left;
-  }
-
-  nav {
-    height: 100%;
-    width: 200px;
-    position: fixed;
-    top: 0px;
-  }
-
-  #menu-button {
-    display: none;
-  }
-
-  .menu-anchor {
-    text-align: left;
-  }
-
-  .menu-anchor:hover {
-    color: black;
-    background-color: lightgray;
-  }
-
-  main {
-    margin-left: 200px;
-  }
-
-  main * {
-    max-width: 960px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  a .card:hover {
-    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-  }
-
 }
 
 /******************************************************************************/