Add basic knowledge overview

client/src/components/BasicKnowledgeTeaser.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="basic-knowledge-teaser">
+    <h3 class="basic-knowledge-teaser__title">Basiswissen: Diskussionsregeln</h3>
+    <p class="basic-knowledge-teaser__text">
+      Für eine konstruktive Diskussion braucht es gewisse Regeln.
+    </p>
+  </div>
+</template>
+
+<script>
+  export default {}
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .basic-knowledge-teaser {
+    height: 250px;
+    box-sizing: border-box;
+    padding: $medium-spacing;
+    @include widget-shadow;
+
+    &__title {
+      @include heading-3;
+      margin-bottom: $small-spacing;
+      line-height: 1.2;
+    }
+  }
+</style>

client/src/components/FilterBar.vue

@@ -62,11 +62,8 @@
   .filter-bar {
     position: sticky;
     top: -1px;
-    margin-top: -25px;
-
     z-index: 9;
-
+    padding: 0 24px;
-    padding: 0px 24px;
     height: 50px;
     background-color: $color-lightgrey;
     display: flex;

client/src/components/book-navigation/BookNavigationItem.vue

@@ -25,7 +25,7 @@
 
     data() {
       return {
-        show: true
+        show: false
       }
     }
   }

client/src/layouts/DefaultLayout.vue

@@ -71,7 +71,6 @@
     width: 100%;
     display: grid;
     grid-template-rows: auto 1fr;
-    grid-row-gap: 32px;
     min-height: 100vh;
     grid-auto-rows: 1fr;
 

client/src/pages/basicknowledge-overview.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="basic-knowledge-overview">
+    <div class="basic-knowledge-overview__heading">
+      <h1 class="basic-knowledge-overview__title">
+        Basiswissen:<br> Sprache und Gesellschaft
+      </h1>
+    </div>
+    <div class="basic-knowledge-overview__list">
+      <basic-knowledge-teaser></basic-knowledge-teaser>
+      <basic-knowledge-teaser></basic-knowledge-teaser>
+      <basic-knowledge-teaser></basic-knowledge-teaser>
+    </div>
+  </div>
+</template>
+
+<script>
+  import BasicKnowledgeTeaser from '@/components/BasicKnowledgeTeaser';
+
+  export default {
+    components: {
+      BasicKnowledgeTeaser
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .basic-knowledge-overview {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    justify-items: center;
+    width: 100%;
+
+    &__heading {
+      padding: 2*$large-spacing 0;
+      background-color: $color-accent-2;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    &__title {
+      max-width: 1200px;
+      line-height: 1.2;
+    }
+
+    &__list {
+      padding: $large-spacing 0;
+      max-width: 1200px;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-auto-rows: auto;
+      grid-column-gap: $large-spacing;
+      grid-row-gap: $large-spacing;
+    }
+  }
+</style>

client/src/router/index.js

@@ -11,6 +11,7 @@ import newRoom from '@/pages/newRoom'
 import editRoom from '@/pages/editRoom'
 import article from '@/pages/article'
 import basicknowledge from '@/pages/basicknowledge'
+import basicknowledgeOverview from '@/pages/basicknowledge-overview'
 import submissions from '@/pages/submissions'
 import p404 from '@/pages/p404'
 import start from '@/pages/start'
@@ -45,6 +46,7 @@ const routes = [
   {path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true},
   {path: '/room/:slug', name: 'room', component: room, props: true},
   {path: '/article/:slug', name: 'article', component: article, meta: {layout: 'simple'}},
+  {path: '/basic-knowledge/', name: 'basic-knowledge-overview', component: basicknowledgeOverview, meta: {subnavigation: true}},
   {path: '/basic-knowledge/:slug', name: 'basic-knowledge', component: basicknowledge, meta: {layout: 'simple'}},
   {path: '/submission/:id', name: 'submission', component: submission, meta: {layout: 'simple'}},
   {path: '/portfolio', name: 'portfolio', component: portfolio},