From fbe39e278462bc82507572642fe23e60bc48d5fa Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 27 Jun 2019 17:56:49 +0200
Subject: [PATCH] Add style guide

---
 client/src/pages/styleguide.vue | 51 +++++++++++++++++++++++++++++++++
 client/src/router/index.js      |  4 +--
 2 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 client/src/pages/styleguide.vue

diff --git a/client/src/pages/styleguide.vue b/client/src/pages/styleguide.vue
new file mode 100644
index 00000000..cdef142f
--- /dev/null
+++ b/client/src/pages/styleguide.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="style-guide">
+    <h1>Styleguide</h1>
+    <h1 class="style-guide__main-title">Main Title - 64px Bold - 700</h1>
+    <h2 class="style-guide__heading-1">Title 1 - 44px Semibold - 600</h2>
+    <h3 class="style-guide__heading-2">Title 2 - 34px Semibold- 600</h3>
+    <h4 class="style-guide__heading-3">Title 3 - 22px Semibold - 600</h4>
+    <h5 class="style-guide__heading-4">Title 4 - 18px Semibold - 600</h5>
+    <p class="style-guide__regular-text">Text - 18px Regular - 400</p>
+    <p class="style-guide__small-text">Text Small -  16px Regular - 400</p>
+    <h2 class="style-guide__meta-title">Meta Title - 42px Book</h2>
+    <p class="style-guide__lead-paragraph">Lead paragraph - 26px<br>
+Vor wenigen Monaten haben Sie Ihren ersten Lohn bekommen – ein befriedigendes Gefühl, für seine Arbeit Geld zu erhalten.</p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .style-guide {
+    &__main-title {
+      @include main-title;
+    }
+
+    &__heading-1 {
+      @include heading-1;
+    }
+    &__heading-2 {
+      @include heading-2;
+    }
+    &__heading-3 {
+      @include heading-3;
+    }
+    &__heading-4 {
+      @include heading-4;
+    }
+    &__regular-text {
+      @include regular-text;
+    }
+    &__small-text {
+      @include small-text;
+    }
+    &__meta-title {
+      @include meta-title;
+    }
+    &__lead-paragraph {
+      @include lead-paragraph;
+    }
+  }
+</style>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index a06fc241..d3d3d629 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -25,7 +25,7 @@ import Router from 'vue-router'
 import editProject from '@/pages/editProject'
 import newProject from '@/pages/newProject'
 import surveyPage from '@/pages/survey'
-// import styleGuidePage from '@/pages/styleguide'
+import styleGuidePage from '@/pages/styleguide'
 
 import store from '@/store/index';
 
@@ -92,7 +92,7 @@ const routes = [
     component: surveyPage,
     props: true
   },
-  // {path: '/styleguide', component: styleGuidePage},
+  {path: '/styleguide', component: styleGuidePage},
   {path: '*', component: p404}
 ];