From 7fb61d9f05a00bc54db03d0c94c0ff40fb529b53 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 7 Oct 2020 15:54:40 +0200
Subject: [PATCH] Update spacing of various text elements

---
 client/src/components/ContentBlock.vue                   | 5 +++--
 .../src/components/content-blocks/SectionTitleBlock.vue  | 3 ++-
 client/src/components/content-blocks/SubtitleBlock.vue   | 7 +++++--
 client/src/components/content-blocks/TextBlock.vue       | 5 ++++-
 client/src/components/modules/Module.vue                 | 5 +----
 client/src/pages/instrument.vue                          | 8 ++++++--
 client/src/styles/_intro.scss                            | 1 +
 client/src/styles/_mixins.scss                           | 5 +++++
 client/src/styles/_typography.scss                       | 9 +++++----
 9 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 28667a01..ec9d44e6 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -248,7 +248,7 @@
   @import "@/styles/_mixins.scss";
 
   .content-block {
-    margin-bottom: 2.5em;
+    margin-bottom: $section-spacing;
     position: relative;
 
     &__container {
@@ -257,10 +257,11 @@
 
     &__title {
       line-height: 1.5;
+      margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
     }
 
     &__instrument-label {
-      margin-bottom: 0;
+      margin-bottom: $medium-spacing;
       @include regular-text();
     }
 
diff --git a/client/src/components/content-blocks/SectionTitleBlock.vue b/client/src/components/content-blocks/SectionTitleBlock.vue
index 2dc1ea7c..1fa621c1 100644
--- a/client/src/components/content-blocks/SectionTitleBlock.vue
+++ b/client/src/components/content-blocks/SectionTitleBlock.vue
@@ -12,9 +12,10 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .section-title {
     margin-bottom: 30px;
-    line-height: $default-heading-line-height;
+    @include heading-line-height;
   }
 </style>
diff --git a/client/src/components/content-blocks/SubtitleBlock.vue b/client/src/components/content-blocks/SubtitleBlock.vue
index 7732ee01..8e076f53 100644
--- a/client/src/components/content-blocks/SubtitleBlock.vue
+++ b/client/src/components/content-blocks/SubtitleBlock.vue
@@ -12,9 +12,12 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
   .subtitle {
     padding-top: 1px;
-    margin-bottom: $large-spacing;
-    line-height: $default-heading-line-height;
+    margin-bottom: $medium-spacing;
+    margin-bottom: calc(#{$large-spacing} - 0.1rem);
+    @include heading-line-height;
   }
 </style>
diff --git a/client/src/components/content-blocks/TextBlock.vue b/client/src/components/content-blocks/TextBlock.vue
index 992e28f1..40460e49 100644
--- a/client/src/components/content-blocks/TextBlock.vue
+++ b/client/src/components/content-blocks/TextBlock.vue
@@ -11,7 +11,10 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
   .text-block {
-    margin-bottom: 30px;
+    margin-bottom: $medium-spacing; // if calc is not supported
+    margin-bottom: calc(#{$large-spacing} - 0.25rem); // to offset the 1.5 line height, which leaves a padding
   }
 </style>
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 88bd9c67..6d31b1c7 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -254,12 +254,9 @@
     }
 
     &__intro {
-      line-height: 1.5;
-      margin-bottom: 3em;
-
       > /deep/ p {
         font-size: toRem(25px);
-        margin-bottom: 1.5em;
+        margin-bottom: $large-spacing;
 
         &:last-child {
           margin-bottom: 0;
diff --git a/client/src/pages/instrument.vue b/client/src/pages/instrument.vue
index ace59f8e..23a9603e 100644
--- a/client/src/pages/instrument.vue
+++ b/client/src/pages/instrument.vue
@@ -55,13 +55,17 @@
   .instrument {
     &__title {
       font-size: toRem(35px);
-      margin-bottom: 40px;
+      margin-bottom: $large-spacing;
       line-height: $default-heading-line-height;
     }
 
     & /deep/ {
       & p {
-        margin-bottom: 40px;
+        margin-bottom: $large-spacing;
+      }
+
+      & p:last-child {
+        margin-bottom: 0;
       }
 
       & ul {
diff --git a/client/src/styles/_intro.scss b/client/src/styles/_intro.scss
index 9a7e8986..9d188773 100644
--- a/client/src/styles/_intro.scss
+++ b/client/src/styles/_intro.scss
@@ -1,5 +1,6 @@
 .intro {
   @include lead-paragraph;
+  margin-bottom: $section-spacing;
 
   > p {
     @include lead-paragraph;
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index f553611b..dd5aea82 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -206,3 +206,8 @@
 @mixin default-box-shadow {
   box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
 }
+
+@mixin heading-line-height {
+  line-height: $default-heading-line-height;
+  margin-top: -0.2rem; // to offset the 1.2 line height, it leaves a padding on top
+}
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index 6e37a8ef..62b31f44 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -22,6 +22,7 @@ p, a, li {
 
 p {
   line-height: 1.5;
+  margin-top: -0.25rem; // to offset the 1.5 line height, it leaves a padding on top
 }
 
 a {
@@ -43,22 +44,22 @@ h1 {
 
 h2 {
   font-size: 2.75rem; // 44px
-  margin-bottom: 24px;
+  margin-bottom: $large-spacing;
 }
 
 h3 {
   font-size: 2.125rem; // 34px
-  margin-bottom: 52px;
+  margin-bottom: $large-spacing;
 }
 
 h4 {
   font-size: 1.5rem; // 24px
-  margin-bottom: 24px;
+  margin-bottom: $large-spacing;
 }
 
 h5 {
   font-size: 1.125rem; // 18px
-  margin-bottom: 24px;
+  margin-bottom: $large-spacing;
 }
 
 input, textarea, select, button {