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

Update styles from style guide

This commit is contained in:
Ramon Wenger 2018-08-14 14:00:13 +02:00
parent c58986a0b4
commit e708f8e334
4 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/ModuleTeaser.vue
View File

@ -33,7 +33,7 @@
} }
&__meta-title { &__meta-title {
color: $grey-2; color: $color-lightgrey;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.2rem; font-size: 1.2rem;
} }

2
client/src/pages/topic.vue
View File

@ -29,7 +29,7 @@
.topic { .topic {
&__teaser { &__teaser {
color: $grey-2; color: $color-grey;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 25px; line-height: 25px;
max-width: 895px; max-width: 895px;

8
client/src/styles/_typography.scss
View File

@ -15,20 +15,20 @@ p, a {
} }
h1 { h1 {
font-size: 5rem; font-size: 4rem; // 64px
font-weight: 800; font-weight: 800;
color: $header-color; color: $header-color;
margin-bottom: 18px; margin-bottom: 18px;
} }
h2 { h2 {
font-size: 2.625rem; // 42px
} }
h3 { h3 {
font-size: 2.5rem; font-size: 2.1875rem; // 35px
} }
h4 { h4 {
font-size: 1.5rem; font-size: 1.3125rem; // 21px
} }

39
client/src/styles/_variables.scss
View File

@ -1,12 +1,39 @@
$grey-1: #333333;; /*
$grey-2: #A1A1A1; Colors:
$grey-3: #F3F3F3; */
$header-color: $grey-1; /* accent */
$intro-color: $grey-2; $color-accent-1: #ffb800;
$color-accent-1-dark: #d69d0a;
$color-accent-1-light: #fff5d9;
$color-accent-2-dark: #118dc2;
$color-accent-2: #09a4e7;
$color-accent-2-light: #daf2fc;
$color-accent-3-dark: #bd4163;
$color-accent-3: #e04570;
$color-accent-3-light: #fbe3ea;
$color-accent-4-dark: #96b23d;
$color-accent-4: #afd240;
$color-accent-4-light: #f3f9e3;
/* brand */
$color-brand-dark: #1c9076;
$color-brand: #17a887;
$color-brand-light: #ddf3ee;
/* greyscale */
$color-darkgrey-1: #333333;
$color-darkgrey-2: #515151;
$color-grey: #a1a1a1;
$color-lightgrey: #f3f3f3;
$color-white: #ffffff;
$header-color: $color-darkgrey-1;
$intro-color: $color-grey;
$sans-serif-font-family: 'Montserrat', Arial, sans-serif; $sans-serif-font-family: 'Montserrat', Arial, sans-serif;
$serif-font-family: "ff-meta-serif-web-pro", serif; $serif-font-family: "ff-meta-serif-web-pro", serif;
$base-font-size: 14px; $base-font-size: 100%; // 16px in most browsers