From 2eb3fec0bb3f657358f4ed3b3f97b4b5b859ab3b Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 11 Jul 2019 07:34:17 +0200
Subject: [PATCH] Use variables and mixins

---
 client/src/components/ContentBlock.vue                |  3 ++-
 .../src/components/content-blocks/SubtitleBlock.vue   |  3 ++-
 client/src/styles/_mixins.scss                        |  6 +++---
 client/src/styles/_objective-group.scss               |  2 +-
 client/src/styles/_typography.scss                    | 11 -----------
 5 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index d5987295..5c541820 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -12,7 +12,7 @@
         </a>
       </div>
 
-      <h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label text-regular">{{instrumentLabel}}</h3>
+      <h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label">{{instrumentLabel}}</h3>
       <h4 class="content-block__title">{{contentBlock.title}}</h4>
 
       <component v-for="component in contentBlock.contents"
@@ -150,6 +150,7 @@
 
     &__instrument-label {
       margin-bottom: 0;
+      @include regular-text();
     }
 
     &__actions {
diff --git a/client/src/components/content-blocks/SubtitleBlock.vue b/client/src/components/content-blocks/SubtitleBlock.vue
index c99e870a..b3ebd13b 100644
--- a/client/src/components/content-blocks/SubtitleBlock.vue
+++ b/client/src/components/content-blocks/SubtitleBlock.vue
@@ -9,7 +9,8 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_variables.scss";
   .subtitle {
-    margin-bottom: 30px;
+    margin-bottom: $large-spacing;
   }
 </style>
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 99e96450..1f575f0a 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -77,7 +77,7 @@
 
 @mixin main-title {
   font-family: $sans-serif-font-family;
-  font-weight: 700;
+  font-weight: 800;
   font-size: toRem(64px);
 }
 
@@ -96,7 +96,7 @@
 @mixin heading-3 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
-  font-size: toRem(22px);
+  font-size: toRem(24px);
 }
 
 @mixin heading-4 {
@@ -119,7 +119,7 @@
 
 @mixin meta-title {
   font-family: $serif-font-family;
-  font-size: toRem(42px);
+  font-size: toRem(36px);
 }
 
 @mixin lead-paragraph {
diff --git a/client/src/styles/_objective-group.scss b/client/src/styles/_objective-group.scss
index 43bce60c..61ba0b66 100644
--- a/client/src/styles/_objective-group.scss
+++ b/client/src/styles/_objective-group.scss
@@ -14,7 +14,7 @@
   }
 
   &__objective {
-    padding: 10px 0;
+    padding: $small-spacing 0;
     line-height: 1.5;
     @include light-border(top);
 
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index 8b6293cb..ba98ae3f 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -72,14 +72,3 @@ input, textarea, select, button {
   margin-bottom: 7.5px;
   font-weight: 600;
 }
-
-.text-regular {
-  font-family: $sans-serif-font-family;
-  font-weight: $font-weight-regular;
-  font-size: toRem(18px);
-  line-height: toRem(27px);
-
-  &--small {
-    font-size: toRem(16px);
-  }
-}