From d2dabd69520d19563160da620b7d7364bcbc6a75 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 8 Jul 2019 13:11:20 +0200
Subject: [PATCH 01/11] Update font styles, change width

---
 client/src/components/ContentBlock.vue             |  5 ++++-
 .../content-blocks/assignment/Assignment.vue       |  1 -
 client/src/components/modules/Module.vue           |  7 +++++--
 client/src/styles/_mixins.scss                     |  4 ++++
 client/src/styles/_objective-group.scss            | 14 +++++++++-----
 client/src/styles/_typography.scss                 | 13 ++++++++-----
 6 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 24bb1a9e..2d52e701 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -148,7 +148,10 @@
     }
 
     &--task {
-      @include content-box($color-brand);
+      .content-block__title {
+        color: $color-brand;
+        @include light-border(bottom);
+      }
     }
 
     &--base_society {
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index 33c7b975..7647ca51 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="assignment">
-    <h3 class="assignment__title" :id="id">{{assignment.title}}</h3>
     <p class="assignment__assignment-text">
       {{assignment.assignment}}
     </p>
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 2f808dc0..372e124d 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -147,7 +147,7 @@
     display: flex;
     justify-self: center;
     @include desktop {
-      width: 640px;
+      width: 800px;
     }
     flex-direction: column;
     padding: $large-spacing 15px;
@@ -166,9 +166,11 @@
     }
 
     &__meta-title {
-      font-size: 2.6rem;
+      color: $color-grey;
+      font-size: 2.25rem;
       font-weight: 300;
       font-family: $serif-font-family;
+      line-height: 3.25rem;
     }
 
     &__intro {
@@ -184,5 +186,6 @@
         }
       }
     }
+
   }
 </style>
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 4880edc7..7688b579 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -138,3 +138,7 @@
   margin-bottom: $medium-spacing;
   @include heading-3;
 }
+
+@mixin light-border($border-position) {
+  border-#{$border-position}: 1px solid $color-lightgrey;
+}
diff --git a/client/src/styles/_objective-group.scss b/client/src/styles/_objective-group.scss
index f61ffbc1..43bce60c 100644
--- a/client/src/styles/_objective-group.scss
+++ b/client/src/styles/_objective-group.scss
@@ -1,13 +1,11 @@
 @import 'variables';
+@import 'mixins';
 
 .objective-group {
-  background-color: $color-lightgrey;
-  padding: 17px;
   margin-bottom: 35px;
 
   &__objective-list {
-    padding-left: 20px;
-    list-style: disc;
+    list-style: none;
 
     &--no-list {
       list-style: none;
@@ -16,7 +14,13 @@
   }
 
   &__objective {
-    margin-bottom: 28px;
+    padding: 10px 0;
     line-height: 1.5;
+    @include light-border(top);
+
+  }
+
+  &:last-child {
+    @include light-border(bottom);
   }
 }
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index b9a9b620..e0343a54 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -11,6 +11,7 @@
 h1, h2, h3, h4, h5 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
+  color: $header-color
 }
 
 p, a, li {
@@ -30,11 +31,12 @@ a {
 h1 {
   font-size: 2rem;
   font-weight: 800;
-  color: $header-color;
-  margin-bottom: 35px;
+  margin-bottom: 21px;
 
   @include desktop {
     font-size: 4rem; // 64px
+    line-height: 4.5rem;
+    margin-bottom: 20px;
   }
 }
 
@@ -44,12 +46,13 @@ h2 {
 }
 
 h3 {
-  font-size: 2.1875rem; // 35px
-  margin-bottom: 24px;
+  font-size: 2.13rem; // 34px
+  line-height: 2.63rem; // 42px
+  margin-bottom: 52px;
 }
 
 h4 {
-  font-size: 1.3125rem; // 21px
+  font-size: 1.5rem; // 24px
   margin-bottom: 24px;
 }
 

From 03d8ed67121fc31aaa3c7bfecc3e1e44e1a67e25 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 8 Jul 2019 14:24:12 +0200
Subject: [PATCH 02/11] Add subtitle block, update font sizes

---
 client/src/components/ContentBlock.vue            |  6 ++++++
 .../components/content-blocks/SubtitleBlock.vue   | 15 +++++++++++++++
 client/src/styles/_typography.scss                |  9 +++++++--
 server/books/blocks.py                            |  4 ++++
 server/books/models/contentblock.py               |  3 ++-
 5 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/content-blocks/SubtitleBlock.vue

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 2d52e701..4abe4df6 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -39,6 +39,7 @@
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
   import InfogramBlock from '@/components/content-blocks/InfogramBlock';
   import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
+  import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
   import Assignment from '@/components/content-blocks/assignment/Assignment';
   import Solution from '@/components/content-blocks/Solution';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
@@ -64,6 +65,7 @@
       'document_block': DocumentBlock,
       'infogram_block': InfogramBlock,
       'genially_block': GeniallyBlock,
+      'subtitle': SubtitleBlock,
       Solution,
       Assignment,
       Task,
@@ -150,7 +152,11 @@
     &--task {
       .content-block__title {
         color: $color-brand;
+        margin-top: $default-padding;
         @include light-border(bottom);
+        @include desktop {
+          margin-top: 0;
+        }
       }
     }
 
diff --git a/client/src/components/content-blocks/SubtitleBlock.vue b/client/src/components/content-blocks/SubtitleBlock.vue
new file mode 100644
index 00000000..c99e870a
--- /dev/null
+++ b/client/src/components/content-blocks/SubtitleBlock.vue
@@ -0,0 +1,15 @@
+<template>
+  <h5 class="subtitle" v-html="value.text"></h5>
+</template>
+
+<script>
+  export default {
+    props: ['value']
+  }
+</script>
+
+<style scoped lang="scss">
+  .subtitle {
+    margin-bottom: 30px;
+  }
+</style>
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index e0343a54..c37a822f 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -41,12 +41,12 @@ h1 {
 }
 
 h2 {
-  font-size: 2.625rem; // 42px
+  font-size: 2.75rem; // 44px
   margin-bottom: 24px;
 }
 
 h3 {
-  font-size: 2.13rem; // 34px
+  font-size: 2.125rem; // 34px
   line-height: 2.63rem; // 42px
   margin-bottom: 52px;
 }
@@ -56,6 +56,11 @@ h4 {
   margin-bottom: 24px;
 }
 
+h5 {
+  font-size: 1.125rem; // 18px
+  margin-bottom: 24px;
+}
+
 input, textarea, select, button {
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
diff --git a/server/books/blocks.py b/server/books/blocks.py
index 5343cb7b..70317c80 100644
--- a/server/books/blocks.py
+++ b/server/books/blocks.py
@@ -73,6 +73,10 @@ class InfogramBlock(blocks.StructBlock):
 class GeniallyBlock(blocks.StructBlock):
     id = blocks.TextBlock()
 
+
+class SubtitleBlock(blocks.StructBlock):
+    text = blocks.TextBlock()
+
 # 'text_block' 'task' 'basic_knowledge' 'student_entry' 'image_block'
 #
 # url = blocks.URLBlock()
diff --git a/server/books/models/contentblock.py b/server/books/models/contentblock.py
index 907efe5f..9044abd7 100644
--- a/server/books/models/contentblock.py
+++ b/server/books/models/contentblock.py
@@ -6,7 +6,7 @@ from wagtail.core.fields import StreamField
 from wagtail.images.blocks import ImageChooserBlock
 
 from books.blocks import TextBlock, BasicKnowledgeBlock, LinkBlock, VideoBlock, DocumentBlock, \
-    ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock
+    ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock, SubtitleBlock
 from core.wagtail_utils import StrictHierarchyPage
 from users.models import SchoolClass
 
@@ -46,6 +46,7 @@ class ContentBlock(StrictHierarchyPage):
         ('document_block', DocumentBlock()),
         ('infogram_block', InfogramBlock()),
         ('genially_block', GeniallyBlock()),
+        ('subtitle', SubtitleBlock()),
     ], null=True, blank=True)
 
     type = models.CharField(

From 695a9a8ccb17731d5609288c7b3039e95f65e6e2 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 9 Jul 2019 14:20:04 +0200
Subject: [PATCH 03/11] Change grayscale, add border

---
 client/src/components/AddContentBlockButton.vue |  2 +-
 client/src/components/AddContentElement.vue     |  4 ++--
 .../src/components/AddObjectiveGroupButton.vue  |  4 ++--
 client/src/components/AddWidget.vue             |  2 +-
 .../components/AssignmentWithSubmissions.vue    |  2 +-
 client/src/components/ColorChooser.vue          |  4 ++--
 client/src/components/ContentBlock.vue          |  2 ++
 client/src/components/FilterBar.vue             |  2 +-
 client/src/components/HelpfulTooltip.vue        |  8 ++++----
 client/src/components/LogoutWidget.vue          |  2 +-
 client/src/components/MobileHeader.vue          |  2 +-
 client/src/components/Modal.vue                 |  6 +++---
 client/src/components/MoreOptionsWidget.vue     |  2 +-
 client/src/components/NewsTeaser.vue            |  4 ++--
 client/src/components/SectionBlock.vue          |  4 ++--
 client/src/components/StudentSubmission.vue     |  2 +-
 client/src/components/TopNavigation.vue         |  2 +-
 client/src/components/UserWidget.vue            |  6 +++---
 .../book-navigation/BookTopicNavigation.vue     |  2 +-
 .../components/content-blocks/DocumentBlock.vue |  2 +-
 .../src/components/content-blocks/Solution.vue  |  6 +++---
 .../content-blocks/assignment/Assignment.vue    |  6 +++---
 .../assignment/SubmissionForm.vue               |  4 ++--
 .../ContentBlockElementChooserWidget.vue        |  4 ++--
 .../components/content-forms/DocumentForm.vue   |  2 +-
 .../src/components/content-forms/ImageForm.vue  |  2 +-
 client/src/components/inputs/BaseInput.vue      |  2 +-
 client/src/components/modules/Module.vue        |  2 +-
 .../src/components/modules/ModuleNavigation.vue |  2 +-
 client/src/components/modules/ModuleTeaser.vue  |  2 +-
 client/src/components/page-form/PageForm.vue    |  2 +-
 .../src/components/portfolio/ProjectActions.vue |  2 +-
 .../src/components/portfolio/ProjectEntry.vue   |  2 +-
 client/src/components/profile/Avatar.vue        |  2 +-
 client/src/components/profile/Classlist.vue     |  2 +-
 .../src/components/profile/ModuleActivity.vue   |  2 +-
 .../components/profile/PasswordChangeForm.vue   |  2 +-
 .../src/components/rooms/EntryCountWidget.vue   |  2 +-
 client/src/components/rooms/RoomActions.vue     |  2 +-
 client/src/components/rooms/RoomGroupWidget.vue |  2 +-
 client/src/components/rooms/RoomWidget.vue      |  4 ++--
 client/src/components/rooms/WidgetPopover.vue   |  2 +-
 .../components/visibility/VisibilityPopover.vue |  2 +-
 client/src/pages/project.vue                    |  2 +-
 client/src/pages/room.vue                       |  2 +-
 client/src/pages/start.vue                      |  6 +++---
 client/src/pages/topic.vue                      |  2 +-
 client/src/styles/_actions.scss                 |  2 +-
 client/src/styles/_article.scss                 |  2 +-
 client/src/styles/_buttons.scss                 |  8 ++++----
 client/src/styles/_forms.scss                   |  2 +-
 client/src/styles/_mixins.scss                  |  6 +++---
 client/src/styles/_top-navigation.scss          |  2 +-
 client/src/styles/_typography.scss              |  2 +-
 client/src/styles/_uploadcare_overwrite.scss    |  2 +-
 client/src/styles/_variables.scss               | 17 ++++++++++-------
 56 files changed, 92 insertions(+), 87 deletions(-)

diff --git a/client/src/components/AddContentBlockButton.vue b/client/src/components/AddContentBlockButton.vue
index dbff0f03..9af880d0 100644
--- a/client/src/components/AddContentBlockButton.vue
+++ b/client/src/components/AddContentBlockButton.vue
@@ -47,7 +47,7 @@
 
     &__icon {
       height: 57px;
-      fill: $color-grey;
+      fill: $color-silver-dark;
     }
   }
 </style>
diff --git a/client/src/components/AddContentElement.vue b/client/src/components/AddContentElement.vue
index 565d50d8..a1266a67 100644
--- a/client/src/components/AddContentElement.vue
+++ b/client/src/components/AddContentElement.vue
@@ -22,14 +22,14 @@
   .add-content-element {
     display: flex;
     justify-content: center;
-    border-bottom: 2px solid $color-grey;
+    border-bottom: 2px solid $color-silver-dark;
     margin-bottom: 21px + 25px;
     cursor: pointer;
 
     &__icon {
       width: 40px;
       height: 40px;
-      fill: $color-grey;
+      fill: $color-silver-dark;
       margin-bottom: -21px;
       background-color: $color-white;
       border-radius: 50px;
diff --git a/client/src/components/AddObjectiveGroupButton.vue b/client/src/components/AddObjectiveGroupButton.vue
index 6961e06d..8fe426cc 100644
--- a/client/src/components/AddObjectiveGroupButton.vue
+++ b/client/src/components/AddObjectiveGroupButton.vue
@@ -54,11 +54,11 @@
     &__icon {
       width: 25px;
       height: 25px;
-      fill: $color-grey;
+      fill: $color-silver-dark;
     }
 
     &__text {
-      color: $color-grey;
+      color: $color-silver-dark;
       font-family: $sans-serif-font-family;
     }
   }
diff --git a/client/src/components/AddWidget.vue b/client/src/components/AddWidget.vue
index 6eee2b4c..c84a70b9 100644
--- a/client/src/components/AddWidget.vue
+++ b/client/src/components/AddWidget.vue
@@ -60,7 +60,7 @@
 
     &__add {
       width: 80px;
-      fill: $color-grey;
+      fill: $color-silver-dark;
     }
 
     &--reverse {
diff --git a/client/src/components/AssignmentWithSubmissions.vue b/client/src/components/AssignmentWithSubmissions.vue
index 11ed0399..6c88ba23 100644
--- a/client/src/components/AssignmentWithSubmissions.vue
+++ b/client/src/components/AssignmentWithSubmissions.vue
@@ -84,7 +84,7 @@
     &__link {
       display: block;
       &:first-of-type {
-        border-top: 1px solid $color-grey;
+        border-top: 1px solid $color-silver-dark;
       }
     }
 
diff --git a/client/src/components/ColorChooser.vue b/client/src/components/ColorChooser.vue
index 50d3c3a7..4e7a092c 100644
--- a/client/src/components/ColorChooser.vue
+++ b/client/src/components/ColorChooser.vue
@@ -56,13 +56,13 @@
       padding: 10px;
 
       &--selected {
-        border: 1px solid $color-darkgrey-1;
+        border: 1px solid $color-charcoal-dark;
       }
     }
 
     &__selected-icon {
       width: 17px;
-      fill: $color-darkgrey-1;
+      fill: $color-charcoal-dark;
     }
 
     &__color {
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 4abe4df6..d839f2b9 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -150,6 +150,8 @@
     }
 
     &--task {
+      @include light-border(bottom);
+      
       .content-block__title {
         color: $color-brand;
         margin-top: $default-padding;
diff --git a/client/src/components/FilterBar.vue b/client/src/components/FilterBar.vue
index 153d4f5d..edbbf669 100644
--- a/client/src/components/FilterBar.vue
+++ b/client/src/components/FilterBar.vue
@@ -65,7 +65,7 @@
     z-index: 9;
     padding: 0 24px;
     height: 50px;
-    background-color: $color-lightgrey;
+    background-color: $color-silver-light;
     display: flex;
     align-items: center;
     justify-items: left;
diff --git a/client/src/components/HelpfulTooltip.vue b/client/src/components/HelpfulTooltip.vue
index b3a9e9d1..d9fd0f77 100644
--- a/client/src/components/HelpfulTooltip.vue
+++ b/client/src/components/HelpfulTooltip.vue
@@ -31,7 +31,7 @@
     &__icon {
       width: 20px;
       height: 20px;
-      fill: $color-grey;
+      fill: $color-silver-dark;
     }
 
     &__tooltip {
@@ -47,7 +47,7 @@
       width: auto;
 
       background-color: $color-white;
-      border: 1px solid $color-grey;
+      border: 1px solid $color-silver-dark;
       border-radius: 5px;
       padding: $small-spacing;
       @include small-text;
@@ -58,8 +58,8 @@
         left: 0;
         top: 18px;
         margin-left: -1px;
-        border-left: 1px solid $color-grey;
-        border-top: 1px solid $color-grey;
+        border-left: 1px solid $color-silver-dark;
+        border-top: 1px solid $color-silver-dark;
         background-color: $color-white;
         width: 10px;
         height: 10px;
diff --git a/client/src/components/LogoutWidget.vue b/client/src/components/LogoutWidget.vue
index bba0f6d4..20fba9e5 100644
--- a/client/src/components/LogoutWidget.vue
+++ b/client/src/components/LogoutWidget.vue
@@ -25,7 +25,7 @@
   @import "@/styles/_variables.scss";
 
   .logout-widget {
-    color: $color-grey;
+    color: $color-silver-dark;
     display: flex;
     align-items: center;
 
diff --git a/client/src/components/MobileHeader.vue b/client/src/components/MobileHeader.vue
index 46c1aeb0..23157d55 100644
--- a/client/src/components/MobileHeader.vue
+++ b/client/src/components/MobileHeader.vue
@@ -48,7 +48,7 @@
     &__hamburger {
       width: 30px;
       height: 30px;
-      fill: $color-grey;
+      fill: $color-silver-dark;
     }
   }
 </style>
diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index 3fb0f7c8..6bd145c3 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -58,7 +58,7 @@
     background-color: $color-white;
     border-radius: 12px;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
-    border: 1px solid $color-lightgrey;
+    border: 1px solid $color-silver-light;
     display: -ms-grid;
     @supports (display: grid) {
       display: grid;
@@ -130,7 +130,7 @@
       grid-area: header;
       -ms-grid-row: 1;
       padding: 10px $modal-lateral-padding;
-      border-bottom: 1px solid $color-lightgrey;
+      border-bottom: 1px solid $color-silver-light;
     }
 
     &__body {
@@ -162,7 +162,7 @@
     &__footer {
       grid-area: footer;
       -ms-grid-row: 3;
-      border-top: 1px solid $color-lightgrey;
+      border-top: 1px solid $color-silver-light;
       padding: 16px $modal-lateral-padding;
     }
   }
diff --git a/client/src/components/MoreOptionsWidget.vue b/client/src/components/MoreOptionsWidget.vue
index d964f269..863129ba 100644
--- a/client/src/components/MoreOptionsWidget.vue
+++ b/client/src/components/MoreOptionsWidget.vue
@@ -39,7 +39,7 @@
     &__ellipses {
       width: 30px;
       height: 30px;
-      fill: $color-darkgrey-1;
+      fill: $color-charcoal-dark;
       margin-top: -7px;
     }
 
diff --git a/client/src/components/NewsTeaser.vue b/client/src/components/NewsTeaser.vue
index d55a2cd3..91584b25 100644
--- a/client/src/components/NewsTeaser.vue
+++ b/client/src/components/NewsTeaser.vue
@@ -22,13 +22,13 @@
 
   .news-teaser {
     display: flex;
-    border-bottom: 1px solid $color-lightgrey;
+    border-bottom: 1px solid $color-silver-light;
     padding-bottom: $large-spacing;
     text-align: center;
 
     @include desktop {
       border-bottom: 0;
-      border-left: 1px solid $color-lightgrey;
+      border-left: 1px solid $color-silver-light;
       padding-bottom: 0;
       text-align: left;
     }
diff --git a/client/src/components/SectionBlock.vue b/client/src/components/SectionBlock.vue
index be7260fb..34d72822 100644
--- a/client/src/components/SectionBlock.vue
+++ b/client/src/components/SectionBlock.vue
@@ -54,7 +54,7 @@
 
   .block-title {
     &__title, &__subtitle {
-      color: $color-darkgrey-1;
+      color: $color-charcoal-dark;
       font-family: $sans-serif-font-family;
     }
 
@@ -86,7 +86,7 @@
       font-weight: 600;
 
       &--disabled {
-        color: $color-grey;
+        color: $color-silver-dark;
       }
     }
   }
diff --git a/client/src/components/StudentSubmission.vue b/client/src/components/StudentSubmission.vue
index ef6e9473..386d399c 100644
--- a/client/src/components/StudentSubmission.vue
+++ b/client/src/components/StudentSubmission.vue
@@ -54,7 +54,7 @@
     grid-template-columns: 170px 1fr;
     grid-column-gap: 80px;
     align-items: center;
-    border-bottom: 1px solid $color-grey;
+    border-bottom: 1px solid $color-silver-dark;
     padding: 15px 0;
 
     &__student-name {
diff --git a/client/src/components/TopNavigation.vue b/client/src/components/TopNavigation.vue
index 95c02f47..491c2de5 100644
--- a/client/src/components/TopNavigation.vue
+++ b/client/src/components/TopNavigation.vue
@@ -39,7 +39,7 @@
       padding: 0 24px;
       font-family: $sans-serif-font-family;
       font-weight: $font-weight-regular;
-      color: $color-grey;
+      color: $color-silver-dark;
 
       &--active {
         color: $color-brand;
diff --git a/client/src/components/UserWidget.vue b/client/src/components/UserWidget.vue
index 42e9aaa7..03c28f54 100644
--- a/client/src/components/UserWidget.vue
+++ b/client/src/components/UserWidget.vue
@@ -29,13 +29,13 @@
   @import "@/styles/_variables.scss";
 
   .user-widget {
-    color: $color-grey;
+    color: $color-silver-dark;
     display: flex;
     align-items: center;
 
     &__name {
       padding: 0px 10px;
-      color: $color-grey;
+      color: $color-silver-dark;
       font-family: $sans-serif-font-family;
     }
 
@@ -46,7 +46,7 @@
     &__avatar {
       width: 30px;
       height: 30px;
-      fill: $color-grey;
+      fill: $color-silver-dark;
     }
 
     &--is-profile {
diff --git a/client/src/components/book-navigation/BookTopicNavigation.vue b/client/src/components/book-navigation/BookTopicNavigation.vue
index bb7de545..9cb04857 100644
--- a/client/src/components/book-navigation/BookTopicNavigation.vue
+++ b/client/src/components/book-navigation/BookTopicNavigation.vue
@@ -34,7 +34,7 @@
       font-family: $sans-serif-font-family;
       font-size: toRem(14px);
       margin-bottom: 20px;
-      color: $color-grey;
+      color: $color-silver-dark;
 
       &--active {
         color: $color-brand;
diff --git a/client/src/components/content-blocks/DocumentBlock.vue b/client/src/components/content-blocks/DocumentBlock.vue
index 613c0347..f3a0b5a6 100644
--- a/client/src/components/content-blocks/DocumentBlock.vue
+++ b/client/src/components/content-blocks/DocumentBlock.vue
@@ -66,7 +66,7 @@
     &__trash-icon {
       width: 25px;
       height: 25px;
-      fill: $color-grey;
+      fill: $color-silver-dark;
       cursor: pointer;
       justify-self: center;
     }
diff --git a/client/src/components/content-blocks/Solution.vue b/client/src/components/content-blocks/Solution.vue
index 7122f8e6..48fa6e66 100644
--- a/client/src/components/content-blocks/Solution.vue
+++ b/client/src/components/content-blocks/Solution.vue
@@ -42,7 +42,7 @@
 
     &__toggle {
       font-family: $sans-serif-font-family;
-      color: $color-grey;
+      color: $color-silver-dark;
       font-size: toRem(15px);
       /*margin-bottom: 15px;*/
       display: block;
@@ -52,11 +52,11 @@
 
     &__text {
       font-size: toRem(18px);
-      color: $color-grey;
+      color: $color-silver-dark;
 
       /deep/ p {
         font-size: toRem(18px);
-        color: $color-grey;
+        color: $color-silver-dark;
       }
     }
   }
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index 7647ca51..31993722 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -254,13 +254,13 @@
       padding: 5px 0;
       margin-right: 15px;
       outline: 0;
-      color: $color-grey;
+      color: $color-silver-dark;
       cursor: pointer;
       border-bottom: 2px solid transparent;
 
       &--active {
-        border-bottom-color: $color-darkgrey-1;
-        color: $color-darkgrey-1;
+        border-bottom-color: $color-charcoal-dark;
+        color: $color-charcoal-dark;
       }
     }
 
diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index 8ac8ee83..dd61eee7 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -66,13 +66,13 @@
     &__save-status-icon {
       width: 22px;
       height: 22px;
-      fill: $color-grey;
+      fill: $color-silver-dark;
       margin-right: 8px;
     }
 
     &__save-status-text {
       font-size: toRem(14px);
-      color: $color-grey;
+      color: $color-silver-dark;
     }
 
     @keyframes spin {
diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
index 0ce15f71..1287a698 100644
--- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
+++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
@@ -84,7 +84,7 @@
     grid-column-gap: 0px;
     font-family: $sans-serif-font-family;
     text-align: center;
-    border: 2px solid $color-grey;
+    border: 2px solid $color-silver-dark;
     padding: 30px 5px;
     border-radius: 12px;
     margin-top: 20px;
@@ -126,7 +126,7 @@
       position: absolute;
       width: 20px;
       height: 20px;
-      border: 2px solid $color-grey;
+      border: 2px solid $color-silver-dark;
       border-bottom: 0;
       border-right: 0;
       background-color: white;
diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue
index 4f23d235..d09c36ae 100644
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@@ -73,7 +73,7 @@
 
       & + label {
         cursor: pointer;
-        background-color: $color-lightgrey;
+        background-color: $color-silver-light;
         height: 150px;
         display: flex;
         width: 100%;
diff --git a/client/src/components/content-forms/ImageForm.vue b/client/src/components/content-forms/ImageForm.vue
index e588d5b3..259de7dd 100644
--- a/client/src/components/content-forms/ImageForm.vue
+++ b/client/src/components/content-forms/ImageForm.vue
@@ -101,7 +101,7 @@
 
       & + label {
         cursor: pointer;
-        background-color: $color-lightgrey;
+        background-color: $color-silver-light;
         height: 150px;
         display: flex;
         width: 100%;
diff --git a/client/src/components/inputs/BaseInput.vue b/client/src/components/inputs/BaseInput.vue
index 00b20304..e0c0c59f 100644
--- a/client/src/components/inputs/BaseInput.vue
+++ b/client/src/components/inputs/BaseInput.vue
@@ -68,7 +68,7 @@
       width: 20px;
       height: 20px;
       display: flex;
-      border: 2px solid $color-grey;
+      border: 2px solid $color-silver-dark;
       justify-content: center;
       align-items: center;
       box-sizing: border-box;
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 372e124d..6cf8b602 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -166,7 +166,7 @@
     }
 
     &__meta-title {
-      color: $color-grey;
+      color: $color-silver-dark;
       font-size: 2.25rem;
       font-weight: 300;
       font-family: $serif-font-family;
diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index a7c3fd4e..d9f54bf6 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -101,7 +101,7 @@
 
   @mixin module-navigation-typography {
     font-family: $sans-serif-font-family;
-    color: $color-grey;
+    color: $color-silver-dark;
     font-weight: $font-weight-regular;
   }
 
diff --git a/client/src/components/modules/ModuleTeaser.vue b/client/src/components/modules/ModuleTeaser.vue
index 0883365f..fb0f23d3 100644
--- a/client/src/components/modules/ModuleTeaser.vue
+++ b/client/src/components/modules/ModuleTeaser.vue
@@ -56,7 +56,7 @@
     }
 
     &__meta-title {
-      color: $color-grey;
+      color: $color-silver-dark;
       margin-bottom: $large-spacing;
       @include regular-text;
     }
diff --git a/client/src/components/page-form/PageForm.vue b/client/src/components/page-form/PageForm.vue
index 69aca5b0..47f54b19 100644
--- a/client/src/components/page-form/PageForm.vue
+++ b/client/src/components/page-form/PageForm.vue
@@ -57,7 +57,7 @@
     }
 
     &__footer {
-      border-top: 1px solid $color-lightgrey;
+      border-top: 1px solid $color-silver-light;
       padding: $small-spacing $medium-spacing;
     }
   }
diff --git a/client/src/components/portfolio/ProjectActions.vue b/client/src/components/portfolio/ProjectActions.vue
index 02e0a556..f27e1641 100644
--- a/client/src/components/portfolio/ProjectActions.vue
+++ b/client/src/components/portfolio/ProjectActions.vue
@@ -108,7 +108,7 @@
 
     svg {
       width: 30px;
-      fill: $color-darkgrey-1;
+      fill: $color-charcoal-dark;
       margin-right: 15px;
     }
   }
diff --git a/client/src/components/portfolio/ProjectEntry.vue b/client/src/components/portfolio/ProjectEntry.vue
index 35e15ad9..3efab961 100644
--- a/client/src/components/portfolio/ProjectEntry.vue
+++ b/client/src/components/portfolio/ProjectEntry.vue
@@ -98,7 +98,7 @@
 
     &__date {
       font-family: $sans-serif-font-family;
-      color: $color-grey;
+      color: $color-silver-dark;
       font-size: toRem(17px);
     }
 
diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue
index 0b8d7eb7..8e781a7e 100644
--- a/client/src/components/profile/Avatar.vue
+++ b/client/src/components/profile/Avatar.vue
@@ -47,7 +47,7 @@
 
     &__placeholder {
       height: $max-width;
-      fill: $color-grey;
+      fill: $color-silver-dark;
 
       &--highlighted {
         fill: $color-brand;
diff --git a/client/src/components/profile/Classlist.vue b/client/src/components/profile/Classlist.vue
index c28b2f5d..7689be92 100644
--- a/client/src/components/profile/Classlist.vue
+++ b/client/src/components/profile/Classlist.vue
@@ -35,7 +35,7 @@
     &__item {
       line-height: $height;
       height: $height;
-      border-bottom: 1px solid $color-grey;
+      border-bottom: 1px solid $color-silver-dark;
     }
   }
 
diff --git a/client/src/components/profile/ModuleActivity.vue b/client/src/components/profile/ModuleActivity.vue
index 29ee43d1..7af3595d 100644
--- a/client/src/components/profile/ModuleActivity.vue
+++ b/client/src/components/profile/ModuleActivity.vue
@@ -65,7 +65,7 @@
 
     &__module-name {
       @include small-text;
-      color: $color-grey;
+      color: $color-silver-dark;
     }
   }
 
diff --git a/client/src/components/profile/PasswordChangeForm.vue b/client/src/components/profile/PasswordChangeForm.vue
index a5f58eda..98749d10 100644
--- a/client/src/components/profile/PasswordChangeForm.vue
+++ b/client/src/components/profile/PasswordChangeForm.vue
@@ -109,7 +109,7 @@
     &__hint {
       margin-top: $small-spacing;
       font-family: $sans-serif-font-family;
-      color: $color-grey;
+      color: $color-silver-dark;
     }
   }
 
diff --git a/client/src/components/rooms/EntryCountWidget.vue b/client/src/components/rooms/EntryCountWidget.vue
index 46e81309..a925e2b2 100644
--- a/client/src/components/rooms/EntryCountWidget.vue
+++ b/client/src/components/rooms/EntryCountWidget.vue
@@ -27,7 +27,7 @@
 
     svg {
       width: 30px;
-      fill: $color-darkgrey-1;
+      fill: $color-charcoal-dark;
       margin-right: 15px;
     }
 
diff --git a/client/src/components/rooms/RoomActions.vue b/client/src/components/rooms/RoomActions.vue
index b284dfff..d2c1217e 100644
--- a/client/src/components/rooms/RoomActions.vue
+++ b/client/src/components/rooms/RoomActions.vue
@@ -74,7 +74,7 @@
 
     svg {
       width: 30px;
-      fill: $color-darkgrey-1;
+      fill: $color-charcoal-dark;
       margin-right: 15px;
     }
   }
diff --git a/client/src/components/rooms/RoomGroupWidget.vue b/client/src/components/rooms/RoomGroupWidget.vue
index 6508b25b..57b4d744 100644
--- a/client/src/components/rooms/RoomGroupWidget.vue
+++ b/client/src/components/rooms/RoomGroupWidget.vue
@@ -29,7 +29,7 @@
 
     svg {
       width: 30px;
-      fill: $color-darkgrey-1;
+      fill: $color-charcoal-dark;
       margin-right: 15px;
     }
 
diff --git a/client/src/components/rooms/RoomWidget.vue b/client/src/components/rooms/RoomWidget.vue
index 49d05a29..7fab1336 100644
--- a/client/src/components/rooms/RoomWidget.vue
+++ b/client/src/components/rooms/RoomWidget.vue
@@ -79,13 +79,13 @@
 
     svg {
       width: 30px;
-      fill: $color-darkgrey-1;
+      fill: $color-charcoal-dark;
       margin-right: 15px;
     }
 
     &__content {
       padding: 22px;
-      color: $color-darkgrey-1;
+      color: $color-charcoal-dark;
       cursor: pointer;
 
       /*
diff --git a/client/src/components/rooms/WidgetPopover.vue b/client/src/components/rooms/WidgetPopover.vue
index 31b0f57d..e97784f3 100644
--- a/client/src/components/rooms/WidgetPopover.vue
+++ b/client/src/components/rooms/WidgetPopover.vue
@@ -40,7 +40,7 @@
     &__link {
       & > a {
         display: inline-block;
-        color: $color-grey;
+        color: $color-silver-dark;
         font-family: $sans-serif-font-family;
         font-size: toRem(14px);
         line-height: 1.5;
diff --git a/client/src/components/visibility/VisibilityPopover.vue b/client/src/components/visibility/VisibilityPopover.vue
index 883bd795..3f859075 100644
--- a/client/src/components/visibility/VisibilityPopover.vue
+++ b/client/src/components/visibility/VisibilityPopover.vue
@@ -112,7 +112,7 @@
 
   .visibility-menu {
     border-radius: 13px;
-    border: 1px solid $color-lightgrey;
+    border: 1px solid $color-silver-light;
     box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
     width: 180px;
     box-sizing: border-box;
diff --git a/client/src/pages/project.vue b/client/src/pages/project.vue
index 1ac73b1e..03b960c2 100644
--- a/client/src/pages/project.vue
+++ b/client/src/pages/project.vue
@@ -165,7 +165,7 @@
     }
 
     &__content {
-      background-color: rgba($color-darkgrey-1, 0.18);
+      background-color: rgba($color-charcoal-dark, 0.18);
       display: flex;
       flex-direction: column;
       /*max-width: 840px;*/
diff --git a/client/src/pages/room.vue b/client/src/pages/room.vue
index a1001222..9b781af1 100644
--- a/client/src/pages/room.vue
+++ b/client/src/pages/room.vue
@@ -131,7 +131,7 @@
 
     &__content {
       padding: 50px 15px;
-      background-color: rgba($color-darkgrey-1, 0.18);
+      background-color: rgba($color-charcoal-dark, 0.18);
       @include desktop {
         columns: 4;
         padding: 50px 60px;
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index 0fde6ae4..b95af4cc 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -122,7 +122,7 @@
     &__title {
       color: $color-brand;
       text-align: center;
-      border-bottom: 1px solid $color-lightgrey;
+      border-bottom: 1px solid $color-silver-light;
       padding-bottom: 30px;
       margin-left: 30px;
       margin-right: 30px;
@@ -182,7 +182,7 @@
   }
 
   .news {
-    background-color: $color-darkgrey-1;
+    background-color: $color-charcoal-dark;
     color: $color-white;
     padding-top: $large-spacing;
     padding-bottom: $large-spacing;
@@ -246,7 +246,7 @@
 
       @include desktop {
         text-align: left;
-        border-left: 1px solid $color-lightgrey;
+        border-left: 1px solid $color-silver-light;
       }
     }
   }
diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue
index 4cc38290..091686a5 100644
--- a/client/src/pages/topic.vue
+++ b/client/src/pages/topic.vue
@@ -69,7 +69,7 @@
 
   .topic {
     &__teaser {
-      color: $color-darkgrey-1;
+      color: $color-charcoal-dark;
       width: 90%;
       @include lead-paragraph;
       margin-bottom: $large-spacing;
diff --git a/client/src/styles/_actions.scss b/client/src/styles/_actions.scss
index 20ab33c1..ee7a9673 100644
--- a/client/src/styles/_actions.scss
+++ b/client/src/styles/_actions.scss
@@ -1,5 +1,5 @@
 .action-icon {
   width: 40px;
   height: 40px;
-  fill: $color-grey;
+  fill: $color-silver-dark;
 }
diff --git a/client/src/styles/_article.scss b/client/src/styles/_article.scss
index ef3787c8..a5595082 100644
--- a/client/src/styles/_article.scss
+++ b/client/src/styles/_article.scss
@@ -11,7 +11,7 @@
   }
 
   &__meta {
-    border-bottom: 1px solid $color-lightgrey;
+    border-bottom: 1px solid $color-silver-light;
     align-self: end;
     padding: 20px 0;
     width: 100%;
diff --git a/client/src/styles/_buttons.scss b/client/src/styles/_buttons.scss
index 6faafa9d..fccfe2ec 100644
--- a/client/src/styles/_buttons.scss
+++ b/client/src/styles/_buttons.scss
@@ -1,6 +1,6 @@
 .button {
   background: transparent;
-  border: 2px solid $color-grey;
+  border: 2px solid $color-silver-dark;
   padding: 5px 15px;
   border-radius: 3px;
   font-family: $sans-serif-font-family;
@@ -20,8 +20,8 @@
     background-color: $color-white;
   }
   &--disabled {
-    border: 2px solid $color-lightgrey;
-    background-color: $color-lightgrey;
+    border: 2px solid $color-silver-light;
+    background-color: $color-silver-light;
   }
 }
 
@@ -35,7 +35,7 @@
   &__icon {
     width: 25px;
     height: 25px;
-    fill: $color-grey;
+    fill: $color-silver-dark;
     cursor: pointer;
     justify-self: center;
   }
diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss
index 22248bf6..dceb4cd4 100644
--- a/client/src/styles/_forms.scss
+++ b/client/src/styles/_forms.scss
@@ -4,7 +4,7 @@
   box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   box-sizing: border-box;
-  border: 1px solid $color-lightgrey;
+  border: 1px solid $color-silver-light;
   max-width: 100%;
   background-color: $color-white;
 }
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 7688b579..42084e7e 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -8,7 +8,7 @@
 
 @mixin widget-shadow {
   @include widget-shadow-base;
-  border: 1px solid $color-lightgrey;
+  border: 1px solid $color-silver-light;
 }
 
 @mixin widget-shadow-reverse {
@@ -19,7 +19,7 @@
 @mixin room-widget-text-style {
   font-family: $sans-serif-font-family;
   font-size: 1rem;
-  fill: $color-darkgrey-1;
+  fill: $color-charcoal-dark;
 }
 
 @mixin input-box-shadow {
@@ -140,5 +140,5 @@
 }
 
 @mixin light-border($border-position) {
-  border-#{$border-position}: 1px solid $color-lightgrey;
+  border-#{$border-position}: 1px solid $color-silver;
 }
diff --git a/client/src/styles/_top-navigation.scss b/client/src/styles/_top-navigation.scss
index 4c93a283..7f4f07fa 100644
--- a/client/src/styles/_top-navigation.scss
+++ b/client/src/styles/_top-navigation.scss
@@ -6,7 +6,7 @@
     padding: 0 24px;
     font-family: $sans-serif-font-family;
     font-weight: $font-weight-regular;
-    color: $color-grey;
+    color: $color-silver-dark;
 
     &--active {
       color: $color-brand;
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index c37a822f..ba98ae3f 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -5,7 +5,7 @@
 * {
   font-size: $base-font-size;
   font-weight: $font-weight-regular;
-  color: $color-darkgrey-1;
+  color: $color-charcoal-dark;
 }
 
 h1, h2, h3, h4, h5 {
diff --git a/client/src/styles/_uploadcare_overwrite.scss b/client/src/styles/_uploadcare_overwrite.scss
index d25d3886..690d414e 100644
--- a/client/src/styles/_uploadcare_overwrite.scss
+++ b/client/src/styles/_uploadcare_overwrite.scss
@@ -1,5 +1,5 @@
 .uploadcare--panel {
-  background: $color-lightgrey;
+  background: $color-silver-light;
   height: 200px;
   border: none;
   border-radius: 0;
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index a186ef59..cb4a296d 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -27,17 +27,20 @@ $color-brand-light: #DCF2ED;
 $color-error: #C02108;
 
 /* greyscale */
-$color-darkgrey-1: #333333;
-$color-grey: #999999;
+$color-silver: #d0d0d0;
+$color-silver-light: #f0f0f0;
+$color-silver-dark: #aaaaaa;
+
+$color-charcoal: #616161;
+$color-charcoal-light: #828282;
+$color-charcoal-dark: #333333;
+
 //$color-grey--lighter: rgba(51, 51, 51, 0.18);
 $color-grey--lighter: transparent;
-$color-lightgrey: #f0f0f0;
 $color-white: #ffffff;
 
-
-
-$header-color: $color-darkgrey-1;
-$intro-color: $color-grey;
+$header-color: $color-charcoal-dark;
+$intro-color: $color-silver-dark;
 
 $sans-serif-font-family: 'Montserrat', Arial, sans-serif;
 $serif-font-family: "ff-meta-serif-web-pro", serif;

From ecba0d84bccfb79252ee4adaa40a390b4e052417 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 9 Jul 2019 15:36:51 +0200
Subject: [PATCH 04/11] Add subtitle to contentblock, style instrument widget

---
 client/src/components/ContentBlock.vue        | 32 +++++++++++++++++--
 .../content-blocks/InstrumentWidget.vue       |  2 +-
 client/src/styles/_mixins.scss                |  6 ++--
 client/src/styles/_typography.scss            | 10 ++++++
 client/src/styles/_variables.scss             |  3 ++
 5 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index d839f2b9..a408d85a 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -12,6 +12,7 @@
         </a>
       </div>
 
+      <p v-if="subtitle !== ''" class="content-block__subtitle text-regular">{{subtitle}}</p>
       <h4 class="content-block__title">{{contentBlock.title}}</h4>
 
       <component v-for="component in contentBlock.contents"
@@ -51,6 +52,11 @@
   import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
+  const INSTRUMENTS = {
+    base_communication: 'Sprache & Kommunikation',
+    base_society: 'Gesellschaft'
+  }
+
   export default {
     props: ['contentBlock', 'parent'],
 
@@ -79,6 +85,14 @@
     computed: {
       specialClass() {
         return `content-block--${this.contentBlock.type.toLowerCase()}`
+      },
+      subtitle() {
+        const contentType = this.contentBlock.type.toLowerCase()
+        if (!(contentType in INSTRUMENTS)) {
+          return ''
+        }
+
+        return `Instrument - ${INSTRUMENTS[contentType]}`
       }
     },
 
@@ -134,6 +148,10 @@
       line-height: 1.5;
     }
 
+    &__subtitle {
+      margin-bottom: 0 !important;
+    }
+
     &__actions {
       position: absolute;
       left: -70px;
@@ -146,12 +164,16 @@
     }
 
     &--base_communication {
-      @include content-box($color-accent-1);
+      @include content-box($color-accent-1-list);
+
+      .content-block__subtitle {
+        color: $color-accent-1-dark;
+      }
     }
 
     &--task {
       @include light-border(bottom);
-      
+
       .content-block__title {
         color: $color-brand;
         margin-top: $default-padding;
@@ -163,7 +185,11 @@
     }
 
     &--base_society {
-      @include content-box($color-accent-2);
+      @include content-box($color-accent-2-list);
+
+      .content-block__subtitle {
+        color: $color-accent-2-dark;
+      }
     }
 
     /deep/ p {
diff --git a/client/src/components/content-blocks/InstrumentWidget.vue b/client/src/components/content-blocks/InstrumentWidget.vue
index 5d9672d7..7cbdb9ad 100644
--- a/client/src/components/content-blocks/InstrumentWidget.vue
+++ b/client/src/components/content-blocks/InstrumentWidget.vue
@@ -2,7 +2,7 @@
   <div class="instrument-widget">
     <div class="instrument-widget__description" v-html="value.description"></div>
     <router-link class="instrument-widget__button button" tag="button"
-                 :to="{name: 'instrument', params: { slug: value.slug }}">Instrument lesen
+                 :to="{name: 'instrument', params: { slug: value.slug }}">Instrument anzeigen
     </router-link>
   </div>
 </template>
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 42084e7e..99e96450 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -57,14 +57,14 @@
 
 }
 
-@mixin content-box($main-color) {
-  background-color: rgba($main-color, 0.15);
+@mixin content-box($color-list) {
+  background-color: nth($color-list, 2);
   padding: 15px;
   align-items: start;
   border-radius: $default-border-radius;
 
   /deep/ .button {
-    border-color: $main-color;
+    border-color: nth($color-list, 1);
     background-color: $color-white;
   }
 }
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index ba98ae3f..ec6c573a 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -72,3 +72,13 @@ 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);
+
+  &--small {
+    font-size: toRem(16px);
+  }
+}
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index cb4a296d..2cf324e0 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -19,6 +19,9 @@ $color-accent-5-dark: #09496F;
 $color-accent-5: #004E7C;
 $color-accent-5: #DBE6EC;
 
+$color-accent-1-list: $color-accent-1 $color-accent-1-light $color-accent-1-dark;
+$color-accent-2-list: $color-accent-2 $color-accent-2-light $color-accent-2-dark;
+
 /* brand */
 $color-brand-dark: #138E72;
 $color-brand: #17A887;

From adbb6ca4d4de898d2ea0939a0f672626796b2d59 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 9 Jul 2019 15:43:43 +0200
Subject: [PATCH 05/11] Fix margin

---
 client/src/components/content-blocks/InstrumentWidget.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/content-blocks/InstrumentWidget.vue b/client/src/components/content-blocks/InstrumentWidget.vue
index 7cbdb9ad..38d0ade8 100644
--- a/client/src/components/content-blocks/InstrumentWidget.vue
+++ b/client/src/components/content-blocks/InstrumentWidget.vue
@@ -14,8 +14,9 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_variables.scss";
   .instrument-widget {
-    margin-bottom: 30px;
+    margin-bottom: $small-spacing;
 
     &__description {
       margin-bottom: 25px;

From 9df8ef6423bd1ad6ffbef6f2c6c1188defb2e437 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 9 Jul 2019 16:35:21 +0200
Subject: [PATCH 06/11] Change title markup

---
 client/src/components/ContentBlock.vue | 2 +-
 client/src/styles/_typography.scss     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index a408d85a..b8f0bd84 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -12,7 +12,7 @@
         </a>
       </div>
 
-      <p v-if="subtitle !== ''" class="content-block__subtitle text-regular">{{subtitle}}</p>
+      <h3 v-if="subtitle !== ''" class="content-block__subtitle text-regular">{{subtitle}}</h3>
       <h4 class="content-block__title">{{contentBlock.title}}</h4>
 
       <component v-for="component in contentBlock.contents"
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index ec6c573a..8b6293cb 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -77,6 +77,7 @@ input, textarea, select, button {
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
   font-size: toRem(18px);
+  line-height: toRem(27px);
 
   &--small {
     font-size: toRem(16px);

From e1936a33b1a5b6601e8da96eab1f2ba35f63b1cc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 10 Jul 2019 17:15:56 +0200
Subject: [PATCH 07/11] Rename constant

---
 client/src/components/ContentBlock.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index b8f0bd84..db5a2082 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -52,10 +52,10 @@
   import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
-  const INSTRUMENTS = {
+  const instruments = {
     base_communication: 'Sprache & Kommunikation',
     base_society: 'Gesellschaft'
-  }
+  };
 
   export default {
     props: ['contentBlock', 'parent'],
@@ -88,11 +88,11 @@
       },
       subtitle() {
         const contentType = this.contentBlock.type.toLowerCase()
-        if (!(contentType in INSTRUMENTS)) {
+        if (!(contentType in instruments)) {
           return ''
         }
 
-        return `Instrument - ${INSTRUMENTS[contentType]}`
+        return `Instrument - ${instruments[contentType]}`
       }
     },
 

From 0ef9298c1939ffb4bb5fb8fe3c37b6ab0e6bba49 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 10 Jul 2019 17:16:45 +0200
Subject: [PATCH 08/11] Refactor code

---
 client/src/components/ContentBlock.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index db5a2082..d5987295 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -12,7 +12,7 @@
         </a>
       </div>
 
-      <h3 v-if="subtitle !== ''" class="content-block__subtitle text-regular">{{subtitle}}</h3>
+      <h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label text-regular">{{instrumentLabel}}</h3>
       <h4 class="content-block__title">{{contentBlock.title}}</h4>
 
       <component v-for="component in contentBlock.contents"
@@ -86,7 +86,7 @@
       specialClass() {
         return `content-block--${this.contentBlock.type.toLowerCase()}`
       },
-      subtitle() {
+      instrumentLabel() {
         const contentType = this.contentBlock.type.toLowerCase()
         if (!(contentType in instruments)) {
           return ''
@@ -148,8 +148,8 @@
       line-height: 1.5;
     }
 
-    &__subtitle {
-      margin-bottom: 0 !important;
+    &__instrument-label {
+      margin-bottom: 0;
     }
 
     &__actions {
@@ -166,7 +166,7 @@
     &--base_communication {
       @include content-box($color-accent-1-list);
 
-      .content-block__subtitle {
+      .content-block__instrument-label {
         color: $color-accent-1-dark;
       }
     }
@@ -187,7 +187,7 @@
     &--base_society {
       @include content-box($color-accent-2-list);
 
-      .content-block__subtitle {
+      .content-block__instrument-label {
         color: $color-accent-2-dark;
       }
     }

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 09/11] 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);
-  }
-}

From 1f72d4757f851a1187af391f49463a5ed14e83c9 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 11 Jul 2019 09:49:39 +0200
Subject: [PATCH 10/11] Change boldest font weight

---
 client/index.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/index.html b/client/index.html
index 45c9fa05..ed5ca2b8 100644
--- a/client/index.html
+++ b/client/index.html
@@ -6,12 +6,11 @@
   <title>skillbox</title>
 
   <link href='https://fonts.googleapis.com/css?family=Material+Icons' rel="stylesheet" type="text/css">
-  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800" rel="stylesheet">
   <link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
   <!--  FIXME: replace with own css -->
   <link href="https://surveyjs.azureedge.net/1.0.87/survey.css" type="text/css" rel="stylesheet"/>
 
-
   <script>
     window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac';
     window.UPLOADCARE_LOCALE = 'de';

From 7bdeb4b6f5d9596aeb17dffe14a13881f44d4825 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 11 Jul 2019 10:39:29 +0200
Subject: [PATCH 11/11] Add import

---
 client/index.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/index.html b/client/index.html
index ed5ca2b8..2f9e0886 100644
--- a/client/index.html
+++ b/client/index.html
@@ -10,6 +10,10 @@
   <link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
   <!--  FIXME: replace with own css -->
   <link href="https://surveyjs.azureedge.net/1.0.87/survey.css" type="text/css" rel="stylesheet"/>
+<<<<<<< HEAD
+=======
+
+>>>>>>> Add import
 
   <script>
     window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac';