From 801c8a7d2e5ee47167938f590cb89a94492f9e77 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 7 Oct 2020 13:48:42 +0200
Subject: [PATCH] Make news teaser spacing more consistent

---
 client/src/components/news/NewsTeaser.vue  | 86 +++++++++++-----------
 client/src/components/news/NewsTeasers.vue |  9 ++-
 client/src/styles/_mixins.scss             | 10 +++
 client/src/styles/_typography.scss         |  6 --
 client/src/styles/_variables.scss          |  2 +-
 5 files changed, 60 insertions(+), 53 deletions(-)

diff --git a/client/src/components/news/NewsTeaser.vue b/client/src/components/news/NewsTeaser.vue
index b249fde5..2909b707 100644
--- a/client/src/components/news/NewsTeaser.vue
+++ b/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>
diff --git a/client/src/components/news/NewsTeasers.vue b/client/src/components/news/NewsTeasers.vue
index 0efd518c..79c25014 100644
--- a/client/src/components/news/NewsTeasers.vue
+++ b/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>
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 3c86c941..f553611b 100644
--- a/client/src/styles/_mixins.scss
+++ b/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);
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index c9be50cd..6e37a8ef 100644
--- a/client/src/styles/_typography.scss
+++ b/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;
-}
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 6a52b4c9..56a3bcc0 100644
--- a/client/src/styles/_variables.scss
+++ b/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;