diff --git a/core/css/decanter.css b/core/css/decanter.css index 30d4c2af8..8b1e5f229 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -1863,8 +1863,25 @@ html { font-size: 10px; } body { - color: #2e2d29; - font-size: 2rem; } + color: #2e2d29; } + @media only screen and (min-width: 0) { + body { + font-size: 1.6rem; } } + @media only screen and (min-width: 576px) { + body { + font-size: 1.6rem; } } + @media only screen and (min-width: 768px) { + body { + font-size: 1.8rem; } } + @media only screen and (min-width: 992px) { + body { + font-size: 1.8rem; } } + @media only screen and (min-width: 1200px) { + body { + font-size: 1.8rem; } } + @media only screen and (min-width: 1500px) { + body { + font-size: 1.9rem; } } p { line-height: 1.4; diff --git a/core/scss/elements/typography/_typography.scss b/core/scss/elements/typography/_typography.scss index 8be24c69c..f35cdc165 100644 --- a/core/scss/elements/typography/_typography.scss +++ b/core/scss/elements/typography/_typography.scss @@ -22,8 +22,8 @@ html { } body { + @include modular-typography-base; color: $color-black; - font-size: $base-font-size; } p { diff --git a/core/scss/utilities/mixins/modular-scale/_modular-typography-base.scss b/core/scss/utilities/mixins/modular-scale/_modular-typography-base.scss new file mode 100644 index 000000000..725346910 --- /dev/null +++ b/core/scss/utilities/mixins/modular-scale/_modular-typography-base.scss @@ -0,0 +1,16 @@ +@charset 'UTF-8'; + +// +// @modular-typography-base +// +// Set base font-size for at each breakpoint to use with modular typography. +// +// Style guide: Mixins.Modular.modular-typography-base +// +@mixin modular-typography-base($grid: $grid-media) { + @each $key, $breakpoint in $grid { + @include grid-media($key) { + font-size: map-get($modular-typography-base, $key); + } + } +} diff --git a/core/scss/utilities/mixins/modular-scale/_modular-typography.scss b/core/scss/utilities/mixins/modular-scale/_modular-typography.scss index ae6ae47ce..adb4fdc40 100644 --- a/core/scss/utilities/mixins/modular-scale/_modular-typography.scss +++ b/core/scss/utilities/mixins/modular-scale/_modular-typography.scss @@ -5,9 +5,11 @@ // // Specify font size using modular-scale, relative to the base font size (which varies by breakpoint). // +// `@include modular-typography(0)` returns the base font size for that breakpoint. +// // **Examples:** // - `@include modular-typography(2)` -// - `@include modular-typography(1.5)` +// - `@include modular-typography(0)` // - `@include modular-typography(-1)` // // $scale - number (unitless) indicating how many steps to adjust font-size up or down the scale. @@ -16,26 +18,5 @@ // Style guide: Mixins.Modular.modular-typography // @mixin modular-typography($scale: 1) { - - font-size: modular-scale($scale, map-get($modular-typography, 'xs')); - - @include grid-media('sm') { - font-size: modular-scale($scale, map-get($modular-typography, 'sm')); - } - - @include grid-media('md') { - font-size: modular-scale($scale, map-get($modular-typography, 'md')); - } - - @include grid-media('lg') { - font-size: modular-scale($scale, map-get($modular-typography, 'lg')); - } - - @include grid-media('xl') { - font-size: modular-scale($scale, map-get($modular-typography, 'xl')); - } - - @include grid-media('2xl') { - font-size: modular-scale($scale, map-get($modular-typography, '2xl')); - } + font-size: modular-scale($scale); } diff --git a/core/scss/utilities/mixins/modular-scale/index.scss b/core/scss/utilities/mixins/modular-scale/index.scss index 649220a39..a9d449e6e 100644 --- a/core/scss/utilities/mixins/modular-scale/index.scss +++ b/core/scss/utilities/mixins/modular-scale/index.scss @@ -14,4 +14,5 @@ @import 'modular-spacing', + 'modular-typography-base', 'modular-typography'; diff --git a/core/scss/utilities/variables/core/_modular-typography.scss b/core/scss/utilities/variables/core/_modular-typography.scss index ea926ceb7..3c79ca9f2 100644 --- a/core/scss/utilities/variables/core/_modular-typography.scss +++ b/core/scss/utilities/variables/core/_modular-typography.scss @@ -1,11 +1,20 @@ @charset "UTF-8"; - // -// $modular-typography +// Modular Typography +// +// A unitless system for setting font sizes. The modular typography scale follows the Bourbon modular-scale mixin formula with a fixed scale ratio between each step. +// The scale is bi-directional, as font sizes can scale up or down. +// +// Note: modular-typography(0) will return the base font size at that breakpoint. +// +// Style guide: Variables.Core.ModularTypography +// + +// $modular-typography-base // -// A unitless system for assigning font sizes. These variables are the base font sizes for each break point. +// The base font sizes for each break point for use with the modular typography system which is based on the Bourbon modular scale. // -// Markup: $modular-typography: ( +// Markup: $modular-typography-base: ( // 'xs': 1.6rem, // 'sm': 1.6rem, // 'md': 1.8rem, @@ -14,9 +23,9 @@ // '2xl': 1.9rem // ) !default; // -// Styleguide: Variables.Core.modular-typography +// Styleguide: Variables.Core.ModularTypography.modular-typography-base // -$modular-typography: ( +$modular-typography-base: ( 'xs': 1.6rem, 'sm': 1.6rem, 'md': 1.8rem, diff --git a/core/scss/utilities/variables/core/_typography.scss b/core/scss/utilities/variables/core/_typography.scss index e8f04ee9e..2a6c6e3d6 100644 --- a/core/scss/utilities/variables/core/_typography.scss +++ b/core/scss/utilities/variables/core/_typography.scss @@ -127,7 +127,6 @@ $h5-font-size: 1.8rem !default; // $h6-font-size: 1.6rem !default; - // // $base-line-height // @@ -161,7 +160,6 @@ $heading-line-height: 1.2 !default; // $lead-line-height: 1.5 !default; - // // $font-sans // diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 645e4e4a7..6902377f2 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -939,42 +939,12 @@ body { #kss-node.kss-home .kss-section { margin-bottom: 0; } #kss-node.kss-home p { - font-size: 1.6rem; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home p { - font-size: 1.6rem; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home p { - font-size: 1.8rem; } } - @media only screen and (min-width: 992px) { - #kss-node.kss-home p { - font-size: 1.8rem; } } - @media only screen and (min-width: 1200px) { - #kss-node.kss-home p { - font-size: 1.8rem; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home p { - font-size: 1.9rem; } } + font-size: 1em; } #kss-node.kss-home h2, #kss-node.kss-home h3, #kss-node.kss-home h4, #kss-node.kss-home h5, #kss-node.kss-home p, #kss-node.kss-home li { color: #2e2d29; } #kss-node.kss-home h2 { - font-size: 3.125rem; + font-size: 1.953125em; font-weight: 700; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home h2 { - font-size: 3.125rem; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home h2 { - font-size: 3.515625rem; } } - @media only screen and (min-width: 992px) { - #kss-node.kss-home h2 { - font-size: 3.515625rem; } } - @media only screen and (min-width: 1200px) { - #kss-node.kss-home h2 { - font-size: 3.515625rem; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home h2 { - font-size: 3.7109375rem; } } #kss-node.kss-home .section { padding: 20px; } @media only screen and (min-width: 768px) { @@ -1022,23 +992,8 @@ body { #kss-node.kss-home .section--welcome p { max-width: 65%; } } #kss-node.kss-home .section--welcome p { - font-size: 2rem; + font-size: 1.25em; font-weight: 200; } - @media only screen and (min-width: 576px) { - #kss-node.kss-home .section--welcome p { - font-size: 2rem; } } - @media only screen and (min-width: 768px) { - #kss-node.kss-home .section--welcome p { - font-size: 2.25rem; } } - @media only screen and (min-width: 992px) { - #kss-node.kss-home .section--welcome p { - font-size: 2.25rem; } } - @media only screen and (min-width: 1200px) { - #kss-node.kss-home .section--welcome p { - font-size: 2.25rem; } } - @media only screen and (min-width: 1500px) { - #kss-node.kss-home .section--welcome p { - font-size: 2.375rem; } } #kss-node.kss-home .section--welcome h2 { margin: 0; } #kss-node.kss-home .section--ui-components { @@ -1664,7 +1619,7 @@ body { .masthead div > *:nth-child(2) { -ms-grid-column: 2; } } .masthead .brand-logo { - font-size: 3.125rem; + font-size: 1.953125em; color: #ffffff; font-weight: 700; display: block; @@ -1674,21 +1629,6 @@ body { text-align: center; -ms-grid-row: 1; -ms-grid-column: 1; } - @media only screen and (min-width: 576px) { - .masthead .brand-logo { - font-size: 3.125rem; } } - @media only screen and (min-width: 768px) { - .masthead .brand-logo { - font-size: 3.515625rem; } } - @media only screen and (min-width: 992px) { - .masthead .brand-logo { - font-size: 3.515625rem; } } - @media only screen and (min-width: 1200px) { - .masthead .brand-logo { - font-size: 3.515625rem; } } - @media only screen and (min-width: 1500px) { - .masthead .brand-logo { - font-size: 3.7109375rem; } } .masthead .main-nav { -ms-grid-row: 1; -ms-grid-column: 2; }