diff --git a/_scss/_base.scss b/_scss/_base.scss index 0edb4c37a0..9f48c7cd47 100755 --- a/_scss/_base.scss +++ b/_scss/_base.scss @@ -25,3 +25,7 @@ a { text-decoration: none; } } +blockquote { + /* Override Bootstrap's style */ + border-left: none; +} \ No newline at end of file diff --git a/_scss/_landing.scss b/_scss/_landing.scss index 34a3958e6c..09ae2033cf 100644 --- a/_scss/_landing.scss +++ b/_scss/_landing.scss @@ -210,11 +210,11 @@ body.landing { } .cardlet { - background-color: #F2F3F5; + background-color: $white-25; padding: 24px 36px; .title { - font-family: 'Geomanist Book', sans-serif; + font-family: "Open Sans", sans-serif; line-height: 22px; font-size: 22px; } @@ -270,12 +270,12 @@ body.landing { .help-by-product { .title { - font-family: 'Geomanist Book', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 22px; } ul.nav.nav-tabs li a, h5, h6 { - font-family: 'Geomanist Regular', sans-serif; + font-family: 'Open Sans', sans-serif; font-size: 18px; } diff --git a/_scss/_notes.scss b/_scss/_notes.scss index 283a04b90e..8f8d8591a6 100644 --- a/_scss/_notes.scss +++ b/_scss/_notes.scss @@ -20,9 +20,8 @@ The available classes are: */ -@mixin notification($bg-color, $header-color, $body-text-color, $left-border-color, $icon) { +@mixin notification($bg-color, $header-color, $body-text-color, $icon) { background-color: $bg-color; - border-left-color: $left-border-color; font-size: unset; // override bootstrap font-size for blockquotes // The first child will generally be a header (e.g. "Note" or "This is an experimental feature"), @@ -53,17 +52,15 @@ blockquote { &:not(.important):not(.warning):not(.restricted) { @include notification( $bg-color: change-color($marine-10, $alpha: 0.2), - $left-border-color: $blue-80, $header-color: $marine-10, $body-text-color: $marine-10, - $icon: "\f058" + $icon: "\f06a" ); } &.important { @include notification( $bg-color: change-color($orange-60, $alpha: 0.4), - $left-border-color: $orange-90, $header-color: $orange-20, $body-text-color: $orange-20, $icon: "\f06a" @@ -73,17 +70,15 @@ blockquote { &.warning { @include notification( $bg-color: change-color($red-60, $alpha: 0.3), - $left-border-color: $red-40, $header-color: $red-10, $body-text-color: $red-10, - $icon: "\f057" + $icon: "\f06a" ); } &.restricted { @include notification( $bg-color: change-color($purple-60, $alpha: 0.44), - $left-border-color: $purple-70, $header-color: $purple-10, $body-text-color: $purple-10, $icon: "\f135" @@ -96,19 +91,17 @@ blockquote { &:not(.important):not(.warning):not(.restricted) { @include notification( - $bg-color: change-color($marine-10, $alpha: 0.2), - $left-border-color: $blue-80, + $bg-color: #E8F4FD, // Hardcoding this variable temporary till we migrate to the new color pallette $header-color: $blue-80, $body-text-color: inherit, - $icon: "\f058" + $icon: "\f05a" ); } &.important { @include notification( - $bg-color: change-color($orange-10, $alpha: 0.4), - $left-border-color: $orange-90, - $header-color: $orange-90, + $bg-color: $orange-10, + $header-color: $orange-100, $body-text-color: inherit, $icon: "\f06a" ); @@ -116,18 +109,16 @@ blockquote { &.warning { @include notification( - $bg-color: change-color($red-10, $alpha: 0.2), - $left-border-color: $red-40, - $header-color: $red-40, + $bg-color: #FEEFEF, // Hardcoding this variable temporary till we migrate to the new color pallette + $header-color: $red-50, $body-text-color: inherit, - $icon: "\f057" + $icon: "\f06a" ); } &.restricted { @include notification( - $bg-color: change-color($purple-20, $alpha: 0.2), - $left-border-color: $purple-70, + $bg-color: $purple-10, $header-color: $purple-50, $body-text-color: inherit, $icon: "\f135" diff --git a/_scss/_typography.scss b/_scss/_typography.scss index 455c4b77b9..5febe654da 100755 --- a/_scss/_typography.scss +++ b/_scss/_typography.scss @@ -45,6 +45,7 @@ h1,h2,h3,h4,h5,h6 { line-height: 26px; margin-top: 30px; margin-bottom: 0; + font-weight: 600; } h1 { diff --git a/_scss/_variables.scss b/_scss/_variables.scss index 5b6594114f..a83fa07531 100755 --- a/_scss/_variables.scss +++ b/_scss/_variables.scss @@ -1,10 +1,13 @@ +@import "color-palette"; + + /* * global */ -$headings: "Geomanist Book", sans-serif; -$headings-landing: "Geomanist Regular", sans-serif; -$buttons: "Geomanist Book", sans-serif; +$headings: "Open Sans", sans-serif; +$headings-landing: "Open Sans", sans-serif; +$buttons: "Open Sans", sans-serif; $font: "Open Sans", sans-serif; $body-text-size: 14px; $white: #fff; @@ -14,30 +17,28 @@ $top-navigation-height: 92px; // top navigation height is: nav (55px) + breadcru /* * standard mode */ -$body-text: hsl(199, 20%, 25%); -$primary-links: hsl(206, 85%, 54%); +$body-text: $black-0; +$primary-links: $blue-70; +// +$bg-body: $white-0; +$bg-body-landing: $white-10; +$bg-header: $blue-60; +$bg-secondary: $blue-60; +$bg-sidebar: $white-10; +$bg-sidebar-active: $white-15; +$bg-footer: $white-0; +$bg-footer-landing: $marine-90; +$bg-component: $white-5; +$bg-card: $white-0; -$bg-body: hsl(206, 0%, 100%); -$bg-body-landing: hsl(206, 14%, 99%); -$bg-header: hsl(206, 85%, 54%); -$bg-secondary: hsl(206, 85%, 54%); -$bg-sidebar: hsl(206, 14%, 99%); -$bg-sidebar-active: hsl(206, 33%, 97%); -$bg-footer: hsl(206, 0%, 100%); -$bg-footer-landing: hsl(214, 100%, 20%); +// notes, warnings// +$note-color: $blue-80; +$important-color: $orange-90; +$warning-color: $red-90; -$bg-component: hsl(240, 14%, 99%); -$bg-card: hsl( 0, 0%, 100%); - -// notes, warnings -$note-color: hsl(206, 82%, 43%); -$important-color: hsl( 35, 91%, 35%); -$warning-color: hsl( 2, 58%, 54%); - -$slider-bg: hsl(206, 76%, 87%); -$slider-btn: hsl(206, 85%, 54%); - -$table-head: hsl(206, 5%, 82%); +$slider-bg: $marine-10; +$slider-btn: $blue-60; +$table-head: $grey-10; /* * night mode @@ -55,7 +56,7 @@ $bg-footer-night: hsl(203, 0%, 0%); $bg-footer-landing-night: hsl(214, 100%, 20%); $bg-component-night: hsl(203, 44%, 10%); -$bg-card-night: hsl(203, 33%, 8%); +$bg-card-night: #0e161b; $active-sidebar-night: hsl(203, 85%, 79%);