ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add style guide

This commit is contained in:
Ramon Wenger 2019-06-27 17:56:49 +02:00
parent 9b85560795
commit fbe39e2784
2 changed files with 53 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
client/src/pages/styleguide.vue Normal file
View File

@ -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>

4
client/src/router/index.js
View File

@ -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}
];