clean up typography, whitespace, shorten header

Signed-off-by: Jos Poortvliet <jospoortvliet@gmail.com>

1 files changed, 109 insertions, 45 deletions

diff --git a/assets/css/modules/typography.scss b/assets/css/modules/typography.scss
index 96cafa4e..6ad02a01 100644
--- a/assets/css/modules/typography.scss
+++ b/assets/css/modules/typography.scss
@@ -2,6 +2,27 @@
 @import '../helpers';
 @import '../vendor/modular-scale/modular-scale';
 
+section {
+    padding-top: 100px;
+    padding-bottom: 100px;
+}
+
+p {
+  margin-top: 5px;
+}
+
+ul {
+  margin-top: 15px;
+  padding-left: 20px;
+  list-style-type: none;
+}
+
+li {
+  margin-top: 15px;
+}
+
+
+
 .jumbotron {
     &--heading-1 {
         padding-top: 0;
@@ -9,61 +30,68 @@
         font-size: ms(3) !important;
         line-height: 120%;
         font-weight: 500;
+        margin-bottom: 15px;
+
 
         @media (max-width: $break-small) {
             font-size: ms(0, 34px) !important;
             line-height: 1 !important;
             margin-top: 0;
+            margin-bottom: 10px;
         }
     }
 
     &--lead {
-      font-size: ms(0);
+      font-size: 1.125em;
       color: white;
       line-height: 1.6;
       font-weight: 500;
+      margin-bottom: 10px;
 
       @media (max-width: $break-small) {
-        font-size: ms(0, 16px)
+        font-size: ms(0, 16px);
+        margin-bottom: 10px;
       }
     }
 }
 
-.section {
-    &--text--center {
-        margin: 0 auto;
-        text-align: center;
-    }
+/* To easily color text */
+.red {
+    color: red;
+}
+.green {
+    color: green;
+}
 
-    &--heading-1 {
-        font-size: ms(3);
-        font-weight: 300;
-        line-height: 1.2;
-        margin: 0;
-        color: $dark-grey;
+.blue {
+    color: $nextcloud-blue;
+}
 
-        @media (max-width: $break-small) {
-            font-size: ms(2);
-            line-height: 1;
-            margin-top: 0;
-        }
-    }
+.gray {
+    color: #555;
+}
 
-    &--heading-2 {
-        font-size: ms(2);
-        font-weight: 300;
-        color: $dark-grey;
+.text-center {
+	margin-left: auto;
+    margin-right: auto;
+	text-align: center;
+}
 
-        @media (max-width: $break-small) {
-            font-size: ms(2);
-            line-height: 1.2;
-            margin-top: 0;
-        }
+.section {
+    &--text--center {
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
     }
 
-    &--intro {
-        font-size: ms(0, 22px);
+    &--intro { /*  Introduction on top of page, just under the fold */
+        padding-top: 80px;
+        font-size: 22px;
         font-weight: 300;
+        blockquote {
+            font-size: 20px;
+            font-weight: 400;
+        }
     }
 
     &--paragraph__tittle,&--paragraph__title {
@@ -96,19 +124,41 @@
 }
 
 h1 {
-    margin-bottom: 10px;
-    font-size: 60px;
-    line-height: 120%;
-    color: #555;
-    font-weight: 500;
+  font-size: 60px;
+  line-height: 120%;
+  color: #555;
+  font-weight: 500;
+  margin-bottom: 50px;
+  &.text-center,.section--text--center {
+      margin: 0px auto 50px auto;
+  }
+  @media (max-width: $break-small) {
+        font-size: 40px;
+        line-height: 1.2;
+        margin-bottom: 30px;
+          &.text-center,.section--text--center {
+            margin: 0px auto 30px auto;
+        }
+    }
 }
 
 h2 {
-    font-size: 60px;
-    font-weight: 300;
-    color: #555;
-    line-height: 1.5;
-    margin-bottom: 12px;
+  font-size: 60px;
+  font-weight: 300;
+  color: #555;
+  line-height: 1.5;
+  margin-bottom: 40px;
+  &.text-center,.section--text--center {
+      margin: 0px auto 40px auto;
+  }
+    @media (max-width: $break-small) {
+        font-size: 40px;
+        line-height: 1.2;
+        margin-bottom: 25px;
+          &.text-center,.section--text--center {
+                margin: 0px auto 25px auto;
+            }
+    }
 }
 
 h3 {
@@ -116,6 +166,18 @@ h3 {
   font-weight: 300;
   line-height: 1.5;
   color: #555;
+  margin-bottom: 30px;
+  &.text-center,.section--text--center {
+      margin: 0px auto 30px auto;
+  }
+  @media (max-width: $break-small) {
+        font-size: 20px;
+        line-height: 1.2;
+        margin-bottom: 20px;
+          &.text-center,.section--text--center {
+                margin: 0px auto 20px auto;
+            }
+    }
 }
 
 h4 {
@@ -124,6 +186,9 @@ h4 {
   line-height: 1.36;
   color: #555;
   margin-bottom: 20px;
+  &.text-center,.section--text--center {
+      margin: 0px auto 20px auto;
+  }
 }
 
 h5 {
@@ -131,9 +196,8 @@ h5 {
   font-weight: bold;
   line-height: 1.5;
   color: #555;
-}
-
-.text-center {
-    margin: 0 auto;
-    text-align: center;
+  margin-bottom: 20px;
+  &.text-center,.section--text--center {
+      margin: 0px auto 20px auto;
+  }
 }