add start page

.gitignore

@@ -37,3 +37,6 @@ server/images
 server/original_images
 original_images/
 server/media/
+
+# pyenv
+.python-version

client/src/components/NewsTeaser.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="news-teaser">
+    <div class="news-teaser__image">
+    </div>
+    <div class="news-teaser__text teaser-text">
+      <h4 class="teaser__title small-emph">{{title}}</h4>
+      <div class="teaser__date">
+        <p>{{date}}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['title', 'date', 'imageUrl']
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .news-teaser {
+    @supports (display: grid) {
+      display: grid;
+    }
+    grid-template-columns: 1fr 2fr;
+    grid-column-gap: 10px;
+  }
+
+  .teaser {
+    &__date > p {
+      color: $color-text-gray;
+      font-family: $sans-serif-font-family;
+      font-size: toRem(14px);
+    }
+  }
+
+</style>

client/src/components/SectionBlock.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="section-block">
+    <div class="section-block__title block-title">
+      <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">
+        <h4 class="subsection__title small-emph">Zuletzt bearbeitet</h4>
+        <p class="subsection__content small-emph">
+          {{lastModified}}
+        </p>
+      </div>
+      <div class="section-content__subsection">
+        <h4 class="subsection_title small-emph">Aktivität</h4>
+        <p class="subsection__content small-emph">
+          {{lastModified}}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['title', 'subtitle', 'lastModified', 'activities']
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .section-block {
+    border-radius: $default-border-radius;
+    width: 100%;
+    border: solid 1px $color-lightgrey-2;
+    box-shadow: 5px 5px 21px 0px rgba(219,219,219,1);
+    overflow: hidden;
+
+   &__title {
+      background-color: $color-brand;
+      padding: 20px;
+    }
+  }
+
+  .block-title {
+    &__title, &__subtitle {
+      color: $color-white;
+    }
+  }
+
+  .section-content {
+    padding: 60px 15px 15px;
+
+    &__subsection {
+      padding-bottom: 15px;
+    }
+  }
+
+  .subsection {
+    &__content {
+      font-family: $sans-serif-font-family;
+      font-weight: 600;
+      color: $color-brand;
+    }
+  }
+
+</style>

client/src/pages/start.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="start-page">
+    <h1 class="start-page__title h1">skillbox</h1>
+    <div class="start-page__sections start-sections">
+      <section-block
+        class="start-sections__section"
+        title="Inhalte"
+        subtitle="Lernen"
+        lastModified="Modul 1: Mein neues Umfeld"
+        activities="4 neue Ergebnisse"
+      ></section-block>
+      <section-block
+        class="start-sections__section"
+        title="Räume"
+        subtitle="Zusammenarbeiten"
+        lastModified="Ein historisches Festival"
+        activities="2 neue Beiträge"
+      ></section-block>
+      <section-block
+        class="start-sections__section"
+        title="Portfolio"
+        subtitle="Dokumentation & reflektieren"
+        lastModified="Mein Projekt 1"
+        activities="2 geteilte Portfolios"
+      ></section-block>
+    </div>
+    <div class="start-page__news news">
+      <h2 class="news__title">News</h2>
+      <div class="news__teasers news-teasers">
+        <news-teaser
+          title="Sommerzeit - Festivalzeit"
+          date="3. Juli 2018"
+          imageUrl="http"
+          ></news-teaser>
+        <news-teaser
+          title="Bitcoin - Hype um die Kryptowährung"
+          date="23. April 2018"
+          imageUrl="http"
+          ></news-teaser>
+        <news-teaser
+          title="Plastic Ocean - Plastikinseln im Meer"
+          date="3. April 2018"
+          imageUrl="http"
+          ></news-teaser>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  import SectionBlock from '@/components/SectionBlock.vue';
+  import NewsTeaser from '@/components/NewsTeaser.vue';
+
+  export default {
+    components: {
+      SectionBlock,
+      NewsTeaser
+    },
+
+    computed: {},
+
+  }
+</script>
+
+<style scoped lang="scss">
+
+  @import "@/styles/_variables.scss";
+
+  .start-page {
+
+    margin: 0 30px;
+
+    &__title {
+      color: $color-brand;
+      text-align: center;
+      border-bottom: 1px solid $color-lightgrey-2;
+      padding-bottom: 30px;
+      margin-left: 30px;
+      margin-right: 30px;
+      margin-bottom: 60px;
+    }
+  }
+
+  .start-sections {
+    padding-left: 120px;
+    padding-right: 120px;
+    display: -ms-grid;
+    margin-bottom: 90px;
+    @supports (display: grid) {
+      display: grid;
+    }
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-column-gap: 50px;
+
+    justify-items: start;
+  }
+
+  .news {
+
+    padding-left: 120px;
+    padding-right: 120px;
+
+    &__title {
+      font-family: $serif-font-family;
+      text-transform: uppercase;
+      font-size: 2.1875rem;
+      padding-bottom: 24px;
+      text-align: center;
+      border-bottom: 1px solid $color-lightgrey-2;
+    }
+
+    &__teasers {
+      @supports (display: grid) {
+        display: grid;
+      }
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-column-gap: 50px;
+    }
+  }
+
+</style>

client/src/router/index.js

@@ -13,9 +13,10 @@ import article from '@/pages/article'
 import basicknowledge from '@/pages/basicknowledge'
 import submissions from '@/pages/submissions'
 import p404 from '@/pages/p404'
+import start from '@/pages/start'
 
 const routes = [
-  {path: '/', redirect: '/book/topic'},
+  {path: '/', component: start},
   {
     path: '/module/:slug',
     component: moduleBase,

client/src/styles/_typography.scss

@@ -53,3 +53,9 @@ input, textarea, select, button {
   font-weight: 500;
 
 }
+
+.small-emph {
+  font-size: toRem($base-font-size-pixels);
+  margin-bottom: 7.5px;
+  font-weight: 600;
+}

client/src/styles/_variables.scss

@@ -28,7 +28,7 @@ $color-grey: rgba(51, 51, 51, 0.5);
 $color-lightgrey-2: #dbdbdb;
 $color-lightgrey: #f3f3f3;
 $color-white: #ffffff;
-
+$color-text-gray: rgb(161, 161, 161);
 
 
 $header-color: $color-darkgrey-1;