Add some styles

client/src/App.vue

@@ -1,26 +1,11 @@
 <template>
   <div class="container">
-    <header>Header</header>
+    <header class="header">
-    <aside>
+      <span class="header__logo">
-      <h2>Themen</h2>
+        skillBox
-      <ul>
+      </span>
-        <li>1. Berufliche Grundbildung</li>
+    </header>
-        <li>2. Geld und Kauf</li>
+    <router-view></router-view>
-        <li>3. Geld und Kauf</li>
-        <li>4. Geld und Kauf</li>
-        <li>5. Geld und Kauf</li>
-        <li>6. Geld und Kauf</li>
-        <li>7. Geld und Kauf</li>
-        <li>8. Geld und Kauf</li>
-        <li>9. Geld und Kauf</li>
-      </ul>
-      <h2>Basiswissen</h2>
-      <h2>ABU News</h2>
-
-    </aside>
-    <main>
-      <router-view></router-view>
-    </main>
     <footer>Footer</footer>
   </div>
 </template>

client/src/components/ModuleTeaser.vue

@@ -13,12 +13,15 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
   .module-teaser {
     box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
     border: 1px solid #E2E2E2;
     height: 330px;
-    width: 300px;
+    width: 100%;
     border-radius: 12px;
+    overflow: hidden;
 
     &__image {
       width: 100%;
@@ -28,5 +31,22 @@
     &__body {
       padding: 20px;
     }
+
+    &__meta-title {
+      color: $grey-2;
+      margin-bottom: 20px;
+      font-size: 1.2rem;
+    }
+
+    &__title {
+      font-size: 1.5em;
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+
+    &__description {
+      line-height: 1.5;
+      font-size: 1.2rem;
+    }
   }
 </style>

client/src/pages/topic.vue

@@ -5,9 +5,12 @@
       Die berufliche Grundbildung lehrt Sie, den Arbeitsalltag erfolgreich zu bewältigen, Ihre Fähigkeiten zu entwickeln und beruflich flexibel zu sein. Ebenso wichtig ist der Umgang mit verschiedensten Mitmenschen. Eine angemessene mündliche Kommunikation erleichtert
       das Zusammenleben und Zusammenarbeiten.
     </p>
-    <module-teaser></module-teaser>
+    <div class="topic__modules">
-    <module-teaser></module-teaser>
+      <module-teaser></module-teaser>
-    <module-teaser></module-teaser>
+      <module-teaser></module-teaser>
+      <module-teaser></module-teaser>
+
+    </div>
   </div>
 </template>
 
@@ -20,3 +23,23 @@
     }
   }
 </script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .topic {
+    &__teaser {
+      color: $grey-2;
+      font-size: 1.2rem;
+      line-height: 25px;
+      max-width: 895px;
+    }
+
+    &__modules {
+      margin-top: 40px;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-column-gap: 40px;
+    }
+  }
+</style>

client/src/styles/_reset.scss

@@ -0,0 +1,51 @@
+// http://meyerweb.com/eric/tools/css/reset/
+//  v2.0 | 20110126
+//  License: none (public domain)
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+}
+
+// HTML5 display-role reset for older browsers
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

client/src/styles/_typography.scss

@@ -1,10 +1,14 @@
+@import "variables";
+
 * {
-  font-family: Montserrat, sans-serif;
+  font-family: $font-family;
-  font-size: 14px;
+  font-size: $base-font-size;
 }
 
 h1 {
-  font-size: 68px;
+  font-size: 5rem;
   font-weight: 800;
+  color: $header-color;
+  margin-bottom: 18px;
 }
 

client/src/styles/_variables.scss

@@ -0,0 +1,10 @@
+$grey-1: #333333;;
+$grey-2: #A1A1A1;
+
+$header-color: $grey-1;
+$intro-color: $grey-2;
+
+$font-family: 'Montserrat', Arial, sans-serif;
+$base-font-size: 14px;
+
+

client/src/styles/main.scss

@@ -3,8 +3,9 @@
   - https://css-tricks.com/bem-101/
   - https://seesparkbox.com/foundry/bem_by_example
  */
+@import "reset";
 @import "typography";
-@import "var";
+@import "variables";
 
 body {
   font-family: $font-family;
@@ -26,19 +27,23 @@ a {
   max-width: 1440px;
   display: grid;
   grid-template-rows: 72px auto 50px;
-  grid-template-columns: 305px auto;
+  grid-row-gap: 20px;
-  grid-column-gap: 80px;
   min-height: 100vh;
-  grid-template-areas: "h h" "a m" "f f";
+  grid-template-areas: "h" "c" "f";
 
-  header {
+  .header {
     grid-area: h;
-  }
+    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
-  aside {
+    display: flex;
-    grid-area: a;
+    align-items: center;
-  }
+    justify-content: center;
-  main {
+
-    grid-area: m;
+
+    &__logo {
+      color: #17A887;
+      font-size: 36px;
+      font-weight: 800;
+    }
   }
   footer {
     grid-area: f;

client/src/styles/var.scss

@@ -1,19 +0,0 @@
-$grey-1: #F7F7F7;
-$grey-3: #F3F3F3;
-$grey-2: #D8D8D8;
-$grey-4: #AFB1B1;
-$grey-9: #3F3F3F;
-
-$orange: #FD6E22;
-$orange-shadow: #c54602;
-
-$blue: #EDF7FA;
-$blue-shadow: #B6CCD4;
-
-$beige: #F3F0EB;
-
-$text-color: $grey-9;
-$font-family: 'Montserrat', Arial, sans-serif;
-$base-font-size: 15px;
-
-$learn-unit-bg-color: $beige;