Make news teaser spacing more consistent

client/src/components/news/NewsTeaser.vue

@@ -4,10 +4,10 @@
       <img
         :src="teaser.imageUrl"
         class="news-teaser__image">
-      <p class="news-teaser__image-source">
-        <a
-          :href="teaser.imageSource"
-          class="tiny-text">Quelle {{ teaser.imageSource }}</a></p>
+      <a
+        :href="teaser.imageSource"
+        class="news-teaser__image-source">Quelle {{ teaser.imageSource }}</a>
+
       <h4 class="news-teaser__title">{{ teaser.title }}</h4>
       <p class="news-teaser__description">{{ teaser.description }}</p>
       <p class="news-teaser__date">{{ teaser.displayDate }}</p>
@@ -16,52 +16,54 @@
 </template>
 
 <script>
-  export default {
-    props: {
-      teaser: {
-        type: Object,
-        default: () => {
-          return {};
-        }
+export default {
+  props: {
+    teaser: {
+      type: Object,
+      default: () => {
+        return {};
       }
     }
-  };
+  }
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
-  @import "@/styles/_mixins.scss";
+@import "@/styles/_variables.scss";
+@import "@/styles/_functions.scss";
+@import "@/styles/_mixins.scss";
 
-  .news-teaser {
-    position: relative;
-    padding-bottom: $large-spacing;
+.news-teaser {
+  position: relative;
 
-    &__image {
-      display: block;
-      max-width: 100%;
-      height: auto;
+  &__image {
+    display: block;
+    max-width: 100%;
+    height: auto;
 
-      @include desktop {
-        max-width: $news_width;
-      }
-    }
-
-    &__image-source {
-      line-height: 25px;
-    }
-
-    &__description {
-      margin-bottom: $large-spacing;
-    }
-
-    &__date {
-      font-family: $sans-serif-font-family;
-      font-weight: $font-weight-regular;
-      color: $color-silver-dark;
-      position: absolute;
-      bottom: 0;
-      left: 0;
+    @include desktop {
+      max-width: $news-width;
     }
   }
+
+  &__image-source {
+    line-height: 25px;
+    @include tiny-text;
+    margin-bottom: $medium-spacing;
+    display: block;
+  }
+
+  &__title {
+    margin-bottom: $small-spacing;
+  }
+
+  &__description {
+    margin-bottom: $small-spacing;
+  }
+
+  &__date {
+    @include regular-text;
+    color: $color-silver-dark;
+  }
+}
 </style>

client/src/components/news/NewsTeasers.vue

@@ -35,14 +35,15 @@
       display: grid;
     }
     margin-bottom: $large-spacing;
-    grid-gap: 40px;
+    grid-gap: $large-spacing;
 
     @include desktop {
-      grid-column-gap: 40px;
-      grid-template-columns: repeat(auto-fit, minmax(320px, $news_width));
+      grid-column-gap: $large-spacing;
+      grid-row-gap: $section-spacing;
+      grid-template-columns: repeat(auto-fit, minmax(320px, $news-width));
       grid-auto-rows: minmax(400px, auto);
       grid-template-rows: auto auto;
-      -ms-grid-columns: $news_width $news_width;
+      -ms-grid-columns: $news-width $news-width;
     }
   }
 </style>

client/src/styles/_mixins.scss

@@ -37,6 +37,7 @@
   }
   &--blue {
     background-color: $color-accent-2;
+
     & .widget-footer {
       background-color: $color-accent-2-dark;
     }
@@ -44,12 +45,14 @@
   }
   &--red {
     background-color: $color-accent-3;
+
     & .widget-footer {
       background-color: $color-accent-3-dark;
     }
   }
   &--green {
     background-color: $color-accent-4;
+
     & .widget-footer {
       background-color: $color-accent-4-dark;
     }
@@ -118,6 +121,13 @@
   font-size: toRem(14px);
 }
 
+@mixin tiny-text {
+  font-size: toRem(11px);
+  font-family: $sans-serif-font-family;
+  font-weight: $font-weight-regular;
+  color: $color-silver-dark;
+}
+
 @mixin aside-text {
   @include regular-text;
   font-size: toRem(14px);

client/src/styles/_typography.scss

@@ -82,9 +82,3 @@ input, textarea, select, button {
   color: $color-brand-dark;
 }
 
-.tiny-text {
-  font-size: toRem(11px);
-  font-family: $sans-serif-font-family;
-  font-weight: $font-weight-regular;
-  color: $color-silver-dark;
-}

client/src/styles/_variables.scss

@@ -78,4 +78,4 @@ $default-heading-line-height: 1.2;
 $popover-default-bottom: -110px;
 
 $footer-width: 800px;
-$news_width: 550px;
+$news-width: 550px;