From 10ed3e863002e2fe6f7c59eb906359c794b24085 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 27 Feb 2019 16:18:33 +0100
Subject: [PATCH] Add new news styling

---
 client/src/components/NewsTeaser.vue          | 45 ++++++++++---------
 client/src/components/SectionBlock.vue        | 14 +++---
 .../illustrations/PortfolioIllustration.vue   |  1 -
 .../illustrations/RoomsIllustration.vue       |  1 -
 client/src/layouts/BlankLayout.vue            |  2 -
 client/src/pages/start.vue                    | 43 ++++++++++++++----
 client/src/styles/_variables.scss             | 11 +++++
 7 files changed, 77 insertions(+), 40 deletions(-)

diff --git a/client/src/components/NewsTeaser.vue b/client/src/components/NewsTeaser.vue
index e8d69de5..aac08c28 100644
--- a/client/src/components/NewsTeaser.vue
+++ b/client/src/components/NewsTeaser.vue
@@ -1,18 +1,17 @@
 <template>
-  <a class="news-teaser" :href="url" target="_blank">
-    <img class="news-teaser__image" :src="imageUrl">
-    <div class="news-teaser__text teaser-text">
-      <h4 class="teaser__title small-emph">{{title}}</h4>
-      <div class="teaser__date">
-        <p>{{date}}</p>
-      </div>
-    </div>
-  </a>
+  <div class="news-teaser">
+    <h4 class="small-emph">
+      <a :href="url" target="_blank" class="teaser__title">{{title}}</a>
+    </h4>
+    <a :href="url" target="_blank" class="teaser__date">
+        {{date}}
+      </a>
+  </div>
 </template>
 
 <script>
   export default {
-    props: ['title', 'date', 'imageUrl', 'url']
+    props: ['title', 'date', 'url']
   }
 </script>
 
@@ -21,21 +20,23 @@
   @import "@/styles/_functions.scss";
 
   .news-teaser {
-    display: block;
-    @supports (display: grid) {
-      display: grid;
-    }
-    grid-template-columns: 1fr 2fr;
-    grid-column-gap: 10px;
-
-    &__image {
-      width: 100px;
-    }
+    display: flex;
+    border-left: 1px solid $color-lightgrey-2;
+    padding-left: $medium-spacing;
+    flex-direction: column;
   }
 
   .teaser {
-    &__date > p {
-      color: $color-text-gray;
+    &__title {
+      color: $color-white;
+      font-family: $sans-serif-font-family;
+      font-weight: $font-weight-bold;
+      line-height: $default-line-height;
+      margin-bottom: $small-spacing;
+    }
+
+    &__date {
+      color: $color-white;
       font-family: $sans-serif-font-family;
       font-size: toRem(14px);
     }
diff --git a/client/src/components/SectionBlock.vue b/client/src/components/SectionBlock.vue
index 72a9f29a..be7260fb 100644
--- a/client/src/components/SectionBlock.vue
+++ b/client/src/components/SectionBlock.vue
@@ -1,13 +1,17 @@
 <template>
-  <div class="section-block" @click="navigate()" :class="{'section-block--navigatable': route}">
-    <slot></slot>
-    <div class="section-block__title block-title">
+  <div class="section-block">
+    <div class="section-block__illustration" @click="navigate()" :class="{'section-block--navigatable': route}">
+      <slot></slot>
+    </div>
+
+    <div class="section-block__title block-title" @click="navigate()" :class="{'section-block--navigatable': route}">
       <h2 class="block-title__title">{{title}}</h2>
       <h3 class="block-title__subtitle small-emph">{{subtitle}}</h3>
     </div>
     <div class="section-block__content section-content">
       <div class="section-content__subsection subsection">
-        <a class="subsection__content button button--primary small-emph" v-if="route">
+        <a class="subsection__content button button--primary" v-if="route" @click="navigate()"
+           :class="{'section-block--navigatable': route}">
           {{linkText}}
         </a>
         <span class="subsection__content subsection__content--disabled" v-if="!route">Noch nicht verfügbar</span>
@@ -63,7 +67,7 @@
 
     &__subtitle {
       font-size: toRem(14px);
-      font-weight: 500;
+      font-weight: $font-weight-regular;
       min-height: 2rem;
     }
   }
diff --git a/client/src/components/illustrations/PortfolioIllustration.vue b/client/src/components/illustrations/PortfolioIllustration.vue
index 5728e989..908dcf61 100644
--- a/client/src/components/illustrations/PortfolioIllustration.vue
+++ b/client/src/components/illustrations/PortfolioIllustration.vue
@@ -20,7 +20,6 @@
               d="M768.87,234.17c-.39,16.74,7.78,33.11,16.5,46.94-11.1,19.08-21.15,30.22-35.61,48.54a244.74,244.74,0,0,0-14.84-50.95"/>
       </clipPath>
     </defs>
-    <title>portfolio-01-outline</title>
     <g>
       <path class="cls-2"
             d="M740.58,193c-122.46-29.16-246.52,11.93-303,129.5-18.87,39.33-27.2,84.88-54.42,119.86-44.34,57-122.63,65.94-160,130.07C204.37,604.86,197,643,199.43,680.25c8.74,133,146.75,200.68,261.44,224.11,57.83,11.82,120.62,12,179.52,15.08,15.72.82,31.5,1.69,47.3,2.47,116.13,5.7,233.37,5.9,334.2-62.21,22.95-15.51,47.53-33,61-57.89,58-107-37.35-181.91-86.23-264.79-59.91-101.59-41.94-244.94-161-304.83C807.24,217.86,740.58,193,740.58,193Z"/>
diff --git a/client/src/components/illustrations/RoomsIllustration.vue b/client/src/components/illustrations/RoomsIllustration.vue
index f84c03a9..4679ef0b 100644
--- a/client/src/components/illustrations/RoomsIllustration.vue
+++ b/client/src/components/illustrations/RoomsIllustration.vue
@@ -19,7 +19,6 @@
               d="M1032.8,291.63c4.25,15.09,12.29,39.06,18.54,53.42-17.14,9.37-34.75,14-52.61,10.16-.17-11.93-2-23.66-3.72-35.42"/>
       </clipPath>
     </defs>
-    <title>räume-01-outline</title>
     <g id="Layer_1" data-name="Layer 1">
       <g>
         <path class="cls-3"
diff --git a/client/src/layouts/BlankLayout.vue b/client/src/layouts/BlankLayout.vue
index 46108f4b..ad66f0c4 100644
--- a/client/src/layouts/BlankLayout.vue
+++ b/client/src/layouts/BlankLayout.vue
@@ -6,8 +6,6 @@
 
 <style lang="scss">
   .blank-layout {
-    margin-top: 60px;
-    margin-bottom: 60px;
   }
 </style>
 
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index b380e388..a64068bb 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -33,9 +33,13 @@
     </div>
     <div class="start-page__news news">
       <h2 class="news__title">News</h2>
-      <div class="news__teasers news-teasers">
-
-      </div>
+      <news-teaser date="19. Dezember 2018" title="Bilder eines Jahres"
+                   url="https://www.brennpunkt-welt.ch/jahresrückblick-2018/"></news-teaser>
+      <news-teaser date="20. November 2018" title="100 Jahre Erster Weltkrieg"
+                   url="http://abunews-1f178193a10edaabff3ab828e30af44.webflow.io/"></news-teaser>
+      <news-teaser date="31. Oktober 2018" title="Sommerzeit - Festivalzeit"
+                   url="https://abunews.webflow.io/"></news-teaser>
+      <div class="news__more">Mehr...</div>
     </div>
   </div>
 </template>
@@ -69,8 +73,11 @@
   @import "@/styles/_mixins.scss";
 
   .start-page {
-
-    margin: 0 30px;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    min-height: 100vh;
+    box-sizing: border-box;
+    padding-top: 2*$large-spacing;
 
     &__title {
       color: $color-brand;
@@ -95,6 +102,7 @@
   }
 
   .start-sections {
+    margin: 0 30px;
     @include desktop {
       padding-left: 120px;
       padding-right: 120px;
@@ -114,18 +122,35 @@
   }
 
   .news {
+    background-color: $color-darkgrey-1;
+    color: $color-white;
+    padding-top: $large-spacing;
+    padding-bottom: $large-spacing;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+
     @include desktop {
-      padding-left: 120px;
-      padding-right: 120px;
+      /*padding-left: 120px;*/
+      /*padding-right: 120px;*/
     }
 
     &__title {
-      font-family: $serif-font-family;
+      font-family: $sans-serif-font-family;
+      font-weight: $font-weight-bold;
       text-transform: uppercase;
       font-size: 2.1875rem;
       padding-bottom: 24px;
       text-align: center;
-      border-bottom: 1px solid $color-lightgrey-2;
+      color: inherit;
+    }
+
+    &__more {
+      color: $color-white;
+      font-family: $sans-serif-font-family;
+      border-left: 1px solid $color-lightgrey-2;
+      line-height: $default-line-height;
+      padding-left: $medium-spacing;
+      font-weight: $font-weight-bold;
     }
 
     &__teasers {
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 92484050..ca2cd89b 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -57,3 +57,14 @@ $modal-input-width: 560px;
 
 
 $default-padding: 30px;
+
+$small-spacing: 10px;
+$medium-spacing: 20px;
+$large-spacing: 30px;
+
+
+$font-weight-bold: 700;
+$font-weight-semibold: 600;
+$font-weight-regular: 500;
+
+$default-line-height: 1.5;