diff --git a/src/disco/css/Addon.scss b/src/disco/css/Addon.scss index c41a142a1a2..665804d7722 100644 --- a/src/disco/css/Addon.scss +++ b/src/disco/css/Addon.scss @@ -2,8 +2,6 @@ @import "~core/css/inc/mixins"; $addon-padding: 20px; -$primary-text-color: #000; -$secondary-text-color: #6a6a6a; .addon { background: #fff; @@ -51,20 +49,20 @@ $secondary-text-color: #6a6a6a; flex-grow: 1; .heading { - color: $primary-text-color; + color: $primary-font-color; font-size: 18px; font-weight: medium; margin: 0; .sub-heading { - color: $secondary-text-color; + color: $secondary-font-color; font-size: 14px; font-weight: normal; } } .editorial-description { - color: $secondary-text-color; + color: $secondary-font-color; font-size: 12px; margin: 0.5em 0; } diff --git a/src/disco/css/App.scss b/src/disco/css/App.scss index c592fc86496..140265378aa 100644 --- a/src/disco/css/App.scss +++ b/src/disco/css/App.scss @@ -1,7 +1,7 @@ @import "~normalize.css"; @import "~core/css/inc/lib"; +@import "~disco/css/inc/vars"; -$page-background: #f5f5f5; html, body { @@ -30,7 +30,7 @@ img { header { display: flex; - border-bottom: 2px solid #ddd; + border-bottom: 1px solid $header-border-color; flex-direction: row; margin-bottom: 40px; padding-bottom: 40px; @@ -40,14 +40,20 @@ header { } h1 { + color: $primary-font-color; display: block; - letter-spacing: 0.11ex; - line-height: 1.5; - font-size: 22px; + font-size: 20px; font-weight: 400; + line-height: 1.5; margin: 0 0 20px; } + p { + color: $header-copy-font-color; + font-size: 14px; + line-height: 1.28; + } + p:last-child { display: block; margin-bottom: 0; diff --git a/src/disco/css/inc/vars.scss b/src/disco/css/inc/vars.scss index bb1e607325e..37fb9fa6ed5 100644 --- a/src/disco/css/inc/vars.scss +++ b/src/disco/css/inc/vars.scss @@ -1 +1,8 @@ $focus-outline-color: #0096dc; +$page-background: #f5f5f5; + +$primary-font-color: #000; +$secondary-font-color: #6a6a6a; + +$header-copy-font-color: #414141; +$header-border-color: #b1b1b1;