diff --git a/assets/styles/app.scss b/assets/styles/app.scss index 8f59b41782..3a1f9384fe 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -6,6 +6,7 @@ @import "./base/helpers"; @import "./base/color"; @import "./base/basic"; +@import "./base/typography"; @import "./fonts/fira"; @import "./fonts/dots"; diff --git a/assets/styles/base/_typography.scss b/assets/styles/base/_typography.scss new file mode 100644 index 0000000000..714f269dc9 --- /dev/null +++ b/assets/styles/base/_typography.scss @@ -0,0 +1,150 @@ +// ----------------------------------------------------------------------------- +// This file contains typography styles. +// ----------------------------------------------------------------------------- + +// +HTML { + box-sizing: border-box; + height: 100%; +} + +html, body { + font-size: 12px; +} + +h1, h2, h3, h4, h5, h6 { + color: var(--body-text); + font-family: 'Fira Sans'; + font-weight: 300; +} + +h1 { +margin-bottom: 3rem; +font-family: Fira Sans; +font-size: 3.2382850718749987em; +line-height: 6rem; +font-weight: 300; +font-style: normal; +letter-spacing: 0em; +} + +h2 { +margin-bottom: 3rem; +font-family: Fira Sans; +font-size: 2.815900062499999em; +line-height: 3rem; +font-weight: 300; +font-style: normal; +letter-spacing: 0em; +} + +h3 { +margin-bottom: 3rem; +font-family: Fira Sans; +font-size: 2.448608749999999em; +line-height: 3rem; +font-weight: 300; +font-style: normal; +letter-spacing: 0em; +} + +h4 { +margin-bottom: 3rem; +font-family: Fira Sans; +font-size: 2.1292249999999995em; +line-height: 3rem; +font-weight: 300; +font-style: normal; +letter-spacing: 0em; +} + +h5 { +margin-bottom: 3rem; +font-family: Fira Sans; +font-size: 1.8514999999999995em; +line-height: 3rem; +font-weight: 300; +font-style: normal; +letter-spacing: 0em; +} + +h6 { +margin-bottom: 3rem; +font-family: Fira Sans; +font-size: 1.25em; +line-height: 3rem; +font-weight: 300; +font-style: normal; +letter-spacing: .25em; +text-transform: uppercase; +} + +p { +margin-bottom: 3rem; +font-family: Fira Sans; +font-size: 1.4em; +line-height: 3rem; +font-weight: 400; +font-style: normal; +letter-spacing: 0em; +} + +@media screen and (max-width: 720px) { + h1 { + margin-bottom: 3rem; + font-size: 6.103515625em; + line-height: 9rem; + font-weight: 600; + font-style: normal; + letter-spacing: 0em; + } + h2 { + margin-bottom: 3rem; + font-size: 4.8828125em; + line-height: 6rem; + font-weight: 600; + font-style: normal; + letter-spacing: 0em; + } + h3 { + margin-bottom: 3rem; + font-size: 3.90625em; + line-height: 6rem; + font-weight: 600; + font-style: normal; + letter-spacing: 0em; + } + h4 { + margin-bottom: 3rem; + font-size: 3.125em; + line-height: 6rem; + font-weight: 600; + font-style: normal; + letter-spacing: 0em; + } + h5 { + margin-bottom: 3rem; + font-size: 2.5em; + line-height: 3rem; + font-weight: 600; + font-style: normal; + letter-spacing: 0em; + } + h6 { + margin-bottom: 3rem; + font-size: 2em; + line-height: 3rem; + font-weight: 600; + font-style: normal; + letter-spacing: 0em; + } + p { + margin-bottom: 3rem; + font-family: Lora; + font-size: 1.6em; + line-height: 3rem; + font-weight: 400; + font-style: normal; + letter-spacing: 0em; + } +} \ No newline at end of file diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss index 59de9ceb7b..c8ae7b78dc 100644 --- a/assets/styles/base/_variables.scss +++ b/assets/styles/base/_variables.scss @@ -1,7 +1,7 @@ $max-width: 1440px !default; $min-width: 75% !default; -$outline-width: 4px; +$outline-width: 0; $z-indexes: ( default: 1, diff --git a/assets/styles/global/_button.scss b/assets/styles/global/_button.scss index a4d2a72677..01f4171a50 100644 --- a/assets/styles/global/_button.scss +++ b/assets/styles/global/_button.scss @@ -20,7 +20,7 @@ button, user-select: none; border: 0 solid transparent; padding: $btn-padding; - border-radius: 4px; + border-radius: $border-radius; &:hover { text-decoration: none; @@ -99,7 +99,7 @@ fieldset[disabled] .btn { padding: 0; overflow: hidden; background: var(--input-bg); - border-radius: 4px; + border-radius: $border-radius; border: 4px solid transparent; .btn, .btn-xs, .btn-sm, .btn-lg { diff --git a/assets/styles/global/_form.scss b/assets/styles/global/_form.scss index 174f31e047..ee102a7a94 100644 --- a/assets/styles/global/_form.scss +++ b/assets/styles/global/_form.scss @@ -13,7 +13,7 @@ TEXTAREA { display: block; box-sizing: border-box; width: 100%; - padding: 9px 12px 8px; + padding: 8.5px; color: var(--input-text); background: var(--input-bg); @@ -23,7 +23,7 @@ TEXTAREA { border-radius: $border-radius; border-style: solid; border-color: transparent; - font-size: 15px; + // font-size: 15px; &::placeholder { color: var(--input-placeholder); diff --git a/assets/styles/themes/_dark.scss b/assets/styles/themes/_dark.scss index 7a077af8ff..2a97f1cab2 100644 --- a/assets/styles/themes/_dark.scss +++ b/assets/styles/themes/_dark.scss @@ -1,8 +1,8 @@ .theme-dark { // Local variables for reused colors - $secondary: #9c9fa4; - $disabled: #7c8084; - $link: #6cb4b9; + // $secondary: #9c9fa4; + // $disabled: #7c8084; + // $link: #6cb4b9; //Contrast colors $contrasted-dark: $lightest !default; @@ -30,7 +30,7 @@ --login-bg: #{$darkest}; --body-bg: #{$darker}; --body-text: white; - --header-bg: #{$dark}; + --header-bg: #{$primary}; --box-bg: #{$darker}; --border: #{$darker}; --nav-select: #{$darker}; diff --git a/assets/styles/themes/_light.scss b/assets/styles/themes/_light.scss index 796beb7e17..95fda276fc 100644 --- a/assets/styles/themes/_light.scss +++ b/assets/styles/themes/_light.scss @@ -4,24 +4,24 @@ $lighter: #BABFC5; $light: #9B9FA5; $medium: #7B8085; $dark: #5B6064; -$darker: #3C4044; -$darkest: #2D3033; +$darker: #1F1D25; +$darkest: #131217; $contrasted-dark: $darkest !default; $contrasted-light: $lightest !default; -$primary: #12BE72; +$primary: #3D98D3; $secondary: $darkest; -$link: #6cb4b9; +$link: $primary; $disabled: $medium; -$success: #9ebb85; -$info: #d7c25a; -$warning: #d7c25a; -$error: #de5347; +$success: #96BD7F; +$info: #16A085; +$warning: #DAC342; +$error: #EF5A53; $selected: rgba($primary, .5); -$border-radius: 4px; +$border-radius: 3px; :root { // Colors that will have text- and bg- helper classes created @@ -48,8 +48,8 @@ $border-radius: 4px; --body-bg: white; --body-text: black; --disabled-bg: #{$disabled}; - --header-bg: #f1f2f3; - --nav-bg: #f1f2f3; + --header-bg: $primary; + --nav-bg: $primary; --nav-bg2: #e1e2e3; --nav-bg3: #d1d2d3; --footer-bg: #f1f2f3; diff --git a/components/Accordion.vue b/components/Accordion.vue index 2c482832e2..05672b77e1 100644 --- a/components/Accordion.vue +++ b/components/Accordion.vue @@ -49,7 +49,7 @@ export default {