From a2484b9d6fea67a93dbfd3a8b830c7b3d2e3ad89 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 13 Aug 2018 18:21:20 +0200
Subject: [PATCH] Add some styles

---
 client/src/App.vue                     | 27 +++-----------
 client/src/components/ModuleTeaser.vue | 22 ++++++++++-
 client/src/pages/topic.vue             | 29 +++++++++++++--
 client/src/styles/_reset.scss          | 51 ++++++++++++++++++++++++++
 client/src/styles/_typography.scss     | 10 +++--
 client/src/styles/_variables.scss      | 10 +++++
 client/src/styles/main.scss            | 27 ++++++++------
 client/src/styles/var.scss             | 19 ----------
 8 files changed, 137 insertions(+), 58 deletions(-)
 create mode 100644 client/src/styles/_reset.scss
 create mode 100644 client/src/styles/_variables.scss
 delete mode 100644 client/src/styles/var.scss

diff --git a/client/src/App.vue b/client/src/App.vue
index 776a2f58..9857a639 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,26 +1,11 @@
 <template>
   <div class="container">
-    <header>Header</header>
-    <aside>
-      <h2>Themen</h2>
-      <ul>
-        <li>1. Berufliche Grundbildung</li>
-        <li>2. Geld und Kauf</li>
-        <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>
+    <header class="header">
+      <span class="header__logo">
+        skillBox
+      </span>
+    </header>
+    <router-view></router-view>
     <footer>Footer</footer>
   </div>
 </template>
diff --git a/client/src/components/ModuleTeaser.vue b/client/src/components/ModuleTeaser.vue
index 314c7d7b..e390852a 100644
--- a/client/src/components/ModuleTeaser.vue
+++ b/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>
diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue
index 9e3caf4a..93b13600 100644
--- a/client/src/pages/topic.vue
+++ b/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>
-    <module-teaser></module-teaser>
-    <module-teaser></module-teaser>
+    <div class="topic__modules">
+      <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>
diff --git a/client/src/styles/_reset.scss b/client/src/styles/_reset.scss
new file mode 100644
index 00000000..7af790d9
--- /dev/null
+++ b/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;
+}
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index fe11b371..c7d998ad 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -1,10 +1,14 @@
+@import "variables";
+
 * {
-  font-family: Montserrat, sans-serif;
-  font-size: 14px;
+  font-family: $font-family;
+  font-size: $base-font-size;
 }
 
 h1 {
-  font-size: 68px;
+  font-size: 5rem;
   font-weight: 800;
+  color: $header-color;
+  margin-bottom: 18px;
 }
 
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
new file mode 100644
index 00000000..654832ba
--- /dev/null
+++ b/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;
+
+
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 5e72d162..a9f33057 100644
--- a/client/src/styles/main.scss
+++ b/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-column-gap: 80px;
+  grid-row-gap: 20px;
   min-height: 100vh;
-  grid-template-areas: "h h" "a m" "f f";
+  grid-template-areas: "h" "c" "f";
 
-  header {
+  .header {
     grid-area: h;
-  }
-  aside {
-    grid-area: a;
-  }
-  main {
-    grid-area: m;
+    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+
+    &__logo {
+      color: #17A887;
+      font-size: 36px;
+      font-weight: 800;
+    }
   }
   footer {
     grid-area: f;
diff --git a/client/src/styles/var.scss b/client/src/styles/var.scss
deleted file mode 100644
index 963945f4..00000000
--- a/client/src/styles/var.scss
+++ /dev/null
@@ -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;
\ No newline at end of file