Adjust styles to be more consistent

client/src/components/ContentBlock.vue

@@ -33,7 +33,6 @@
     margin-bottom: 2.5em;
 
     /deep/ p {
-      font-size: 1.125rem;
       line-height: 1.5;
       margin-bottom: 1em;
 
@@ -41,5 +40,6 @@
         margin-bottom: 0;
       }
     }
+
   }
 </style>

client/src/components/content-blocks/ImageBlock.vue

@@ -6,5 +6,8 @@
   .image-block {
     width: 100%;
     max-width: 100%;
+    border-radius: 13px;
+
+    margin-bottom: 30px;
   }
 </style>

client/src/components/content-blocks/ModalText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="modal-text">
     <div v-html="value.description"></div>
     <a :href="value.url">{{value.url}}</a>
   </div>
@@ -10,3 +10,9 @@
     props: ['value']
   }
 </script>
+
+<style scoped lang="scss">
+  .modal-text {
+    margin-bottom: 30px;
+  }
+</style>

client/src/components/content-blocks/StudentEntry.vue

@@ -2,7 +2,7 @@
   <div class="student-entry">
     <p v-html="value.task_text"></p>
     <textarea class="student-entry__input" placeholder="Text schreiben"></textarea>
-    <div class="student-entry__dropzone-dummy">drag & drop | Dokument wählen</div>
+    <div class="student-entry__dropzone-dummy">Dokument hier hinziehen oder hier klicken</div>
     <button class="student-entry__submit">Ergebnis teilen</button>
   </div>
 </template>
@@ -54,8 +54,11 @@
     &__dropzone-dummy {
       padding: 15px;
       border: 1px dashed #C5C5C5;
+      font-family: $sans-serif-font-family;
+      font-weight: 500;
       margin-bottom: 12px;
       border-radius: 3px;
+      opacity: 0.6;
     }
 
     &__submit {

client/src/components/content-blocks/Task.vue

@@ -11,5 +11,7 @@
 <style scoped lang="scss">
   .task {
     padding-left: 30px;
+
+    margin-bottom: 30px;
   }
 </style>

client/src/components/content-blocks/TextBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-html="value.text"></div>
+  <div class="text-block" v-html="value.text"></div>
 </template>
 
 <script>
@@ -7,3 +7,9 @@
     props: ['value']
   }
 </script>
+
+<style scoped lang="scss">
+  .text-block {
+    margin-bottom: 30px;
+  }
+</style>

client/src/components/modules/Module.vue

@@ -46,6 +46,7 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
 
   .module {
     display: flex;
@@ -70,11 +71,11 @@
     }
 
     &__intro {
-      font-size: 1.5625rem;
       line-height: 1.5;
       margin-bottom: 3em;
 
       > /deep/ p {
+        font-size: toRem(25px);
         margin-bottom: 1.5em;
 
         &:last-child {

client/src/components/modules/ObjectiveGroup.vue

@@ -41,7 +41,6 @@
     }
 
     &__objective {
-      font-size: 1.2857142857142858rem;
       margin-bottom: 28px;
       line-height: 1.5;
     }

client/src/components/rooms/RoomEntry.vue

@@ -37,6 +37,7 @@
     page-break-inside: avoid; /* Firefox */
     break-inside: avoid; /* IE 10+ */
     margin-bottom: 25px;
+    cursor: pointer;
 
     &__image {
       max-width: 100%;
@@ -52,7 +53,6 @@
     }
 
     &__teaser {
-      font-size: toRem(18px);
       line-height: 1.5;
       margin-bottom: 10px;
     }

client/src/components/rooms/RoomWidget.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="room-widget" :class="roomClass">
+  <router-link to="/room" tag="div" class="room-widget" :class="roomClass">
     <div class="room-widget__content">
       <h2 class="room-widget__title">{{title}}</h2>
       <room-group-widget :group="group"></room-group-widget>
@@ -10,7 +10,7 @@
         <ellipses></ellipses>
       </router-link>
     </div>
-  </div>
+  </router-link>
 
 </template>
 
@@ -51,6 +51,8 @@
     overflow: hidden;
     @include widget-shadow;
 
+    cursor: pointer;
+
     /*
      * For IE10+
      */

client/src/styles/_typography.scss

@@ -1,8 +1,10 @@
 @import "variables";
+@import "functions";
 
 * {
   font-size: $base-font-size;
   font-weight: 400;
+  color: $color-darkgrey-1;
 }
 
 h1, h2, h3, h4, h5 {
@@ -12,9 +14,14 @@ h1, h2, h3, h4, h5 {
 
 p, a, li {
   font-family: $serif-font-family;
+  font-size: toRem(18px);
   font-weight: 300;
 }
 
+a {
+  font-size: toRem(18px);
+}
+
 h1 {
   font-size: 4rem; // 64px
   font-weight: 800;