diff --git a/assets/less/ascribe.less b/assets/less/ascribe.less index 411afa5..4c35bec 100644 --- a/assets/less/ascribe.less +++ b/assets/less/ascribe.less @@ -14,8 +14,11 @@ @import 'ascribe/_variables'; //@import "ascribe/_mixins'; +@import 'ascribe/_typography.less'; @import 'ascribe/_branding.less'; @import 'ascribe/_helpers.less'; +@import 'ascribe/_buttons.less'; + @import 'ascribe/_grid.less'; @import 'ascribe/_footer.less'; @import 'vendor/print.less'; @@ -570,7 +573,7 @@ header + .chevron-divider { text-align: center; } .description { - .copyTextSmall; + //.copyTextSmall; p { margin-bottom: 0; } } @@ -851,9 +854,6 @@ header + .chevron-divider { font-size: 22px; margin:0; } - p { - .copyText; - } .text-column { text-align: center; } @@ -1198,8 +1198,7 @@ header + .chevron-divider { } } input[type=submit] { - .button; - .button.blue; + &:extend(.button, .button.blue); width: auto; } .contact-point { @@ -1533,7 +1532,7 @@ header + .chevron-divider { } } .button { - .button.pink; + &:extend(.button.pink); } @media screen and (max-width: @phoneWidth) { diff --git a/assets/less/ascribe/_branding.less b/assets/less/ascribe/_branding.less index ad32367..bfd04c2 100644 --- a/assets/less/ascribe/_branding.less +++ b/assets/less/ascribe/_branding.less @@ -1,15 +1,3 @@ -//GLOBALS -body, -html { - .copyTextSmall; - font-smoothing: antialiased; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - &.page-template-template-companyblue { - .copyText; - } -} a { text-decoration: none; @@ -88,25 +76,6 @@ a { line-height: 19px; } -.copyText { - &:extend(.fontLight); - color: @blueDeep; - font-size: 18px; - line-height: 22px; -} -.copyTextMedium { - &:extend(.fontLight); - color: @blueDeep; - font-size: 17px; - line-height: 21px; -} -.copyTextSmall { - &:extend(.fontLight); - color: @blueDeep; - font-size: 15px; - line-height: 19px; -} - // SPECIALIZED TEXT STYLES .heroText { &:extend(.fontLight); @@ -197,109 +166,6 @@ a { color: @black; font-size: 19px; } -.footerText { - &:extend(.fontLight); - font-size: 14px; - color: @white; - line-height: 25px; -} -.subfooterText { - color: @greyText; - font-size: 13px; - line-height: 14px; -} - - - - -// DEVICES -.button { - display: inline-block; - padding: 25px 40px; - &:extend(.fontRegular); - border: 1px solid; - font-size: 22px; - line-height: 26px; - text-decoration: none; - min-width: 265px; - text-align: center; - - &.blue { - @bgColor: @blueBright; - color: @white; - background-color: @bgColor; - border-color: @bgColor; - &:hover { - background-color: fade(@bgColor,50); - } - } - - &.pink { - @bgColor: @pink; - color: @white; - background-color: @bgColor; - border-color: @bgColor; - &:hover { - background-color: fade(@bgColor,50); - } - } - - &.blue-overPic { - @bgColor: @blueBright; - color: @white; - background-color: @bgColor; - border-color: @bgColor; - - &:hover { - background-color: @white; - color: @bgColor; - } - } - - &.pink-overPic { - @bgColor: @pink; - color: @white; - background-color: @bgColor; - border-color: @bgColor; - - &:hover { - background-color: @white; - color: @bgColor; - } - } - - &.white-blue { - @bgColor: @white; - color: @blueBright; - background-color: @bgColor; - border-color: @blueBright; - - &:hover { - background-color: fade(@blueBright,50); - color: @white; - } - } - - &.small { - &:extend(.fontLight); - padding: 5px 15px; - font-size: 14px; - color: @white; - background-color: transparent; - border-color: @white; - min-width: auto; - - &:hover { - background-color: fade(@white,40); - border-color: fade(@white,40); - color: @white; - } - } - - @media screen and (max-width: @smallWidth) { - min-width: initial; - } -} .chevron-divider { background-image: url(../../images/svg/ascribe-chevron.svg); diff --git a/assets/less/ascribe/_buttons.less b/assets/less/ascribe/_buttons.less new file mode 100644 index 0000000..c0317cd --- /dev/null +++ b/assets/less/ascribe/_buttons.less @@ -0,0 +1,95 @@ + +.button { + &:extend(.fontRegular); + display: inline-block; + padding: (@spacer / 2) @spacer; + border: 1px solid; + font-size: 22px; + line-height: 26px; + text-decoration: none; + min-width: 265px; + text-align: center; + transition: .2s ease-out; + + &.blue { + @bgColor: @blueBright; + color: @white; + background-color: @bgColor; + border-color: @bgColor; + &:hover, + &:focus { + background-color: fade(@bgColor,50); + } + } + + &.pink { + @bgColor: @pink; + color: @white; + background-color: @bgColor; + border-color: @bgColor; + &:hover, + &:focus { + background-color: fade(@bgColor,50); + } + } + + &.blue-overPic { + @bgColor: @blueBright; + color: @white; + background-color: @bgColor; + border-color: @bgColor; + + &:hover, + &:focus { + background-color: @white; + color: @bgColor; + } + } + + &.pink-overPic { + @bgColor: @pink; + color: @white; + background-color: @bgColor; + border-color: @bgColor; + + &:hover, + &:focus { + background-color: @white; + color: @bgColor; + } + } + + &.white-blue { + @bgColor: @white; + color: @blueBright; + background-color: @bgColor; + border-color: @blueBright; + + &:hover, + &:focus { + background-color: fade(@blueBright,50); + color: @white; + } + } + + &.small { + &:extend(.fontLight); + padding: (@spacer / 4) (@spacer / 2); + font-size: 14px; + color: @white; + background-color: transparent; + border-color: @white; + min-width: 0; + + &:hover, + &:focus { + background-color: fade(@white,40); + border-color: fade(@white,40); + color: @white; + } + } + + @media screen and (max-width: @smallWidth) { + min-width: initial; + } +} diff --git a/assets/less/ascribe/_footer.less b/assets/less/ascribe/_footer.less index 8e2d0ea..d5d3d13 100644 --- a/assets/less/ascribe/_footer.less +++ b/assets/less/ascribe/_footer.less @@ -2,7 +2,8 @@ // FOOTER // .footer { - .footerText; + &:extend(.copyTextSmall); + color: @white; text-align: center; @media (@screen-sm) { @@ -17,7 +18,7 @@ display: inline; a { - .footerText; + color: @white; display: inline-block; padding: 3px 15px; opacity: .85; @@ -71,7 +72,9 @@ // Bottom footer // .footer__bottom { - .subfooterText; + color: @greyText; + font-size: 13px; + line-height: 14px; padding: (@spacer / 2) 15px; .menu { @@ -85,7 +88,7 @@ } .menu-item a { - .subfooterText; + color: @greyText; } } @@ -97,6 +100,8 @@ @media (@screen-sm) { width: 25%; float: right; + + .button { width: 100%; } } } diff --git a/assets/less/ascribe/_helpers.less b/assets/less/ascribe/_helpers.less index 84346b2..0397bd9 100644 --- a/assets/less/ascribe/_helpers.less +++ b/assets/less/ascribe/_helpers.less @@ -99,15 +99,12 @@ ul, ol { @paddingForCols: 30px; .ttl-columns { - font-size:0; width:100%; width: calc(~"100% +"@paddingForCols); .column { display: inline-block; vertical-align: top; padding-right: @paddingForCols; - font-size: 15px; - } .column-2 { diff --git a/assets/less/ascribe/_typography.less b/assets/less/ascribe/_typography.less new file mode 100644 index 0000000..3cf964a --- /dev/null +++ b/assets/less/ascribe/_typography.less @@ -0,0 +1,126 @@ +// +// Typography +// + +// +// Scaffolding +// + +// Root reset +html { + font-size: 10px; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +body { + &:extend(.copyText); + background-color: @body-bg; + + text-rendering: optimizeLegibility; + // Controversial! But prevents text flickering in + // Safari/Firefox when animations are running + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-font-feature-settings: 'liga', 'kern'; + + // remove old style numerals + font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1; +} + +// Text styles +.copyText { + font-family: @font-family-base; + font-size: @font-size-base; + font-weight: @font-weight-base; + line-height: @line-height-base; + color: @text-color; +} +.copyTextMedium { + &:extend(.fontLight); + color: @blueDeep; + font-size: 17px; + line-height: 21px; +} +.copyTextSmall { + font-family: @font-family-base; + font-size: @font-size-small; + font-weight: @font-weight-base; + line-height: @line-height-small; + color: @text-color; +} + + +// +// Links +// +a { + color: @link-color; + text-decoration: none; + + &:hover, + &:focus { + color: @link-hover-color; + } + + &:active {} +} + + +// Reset fonts for relevant elements +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +// +// Body text +// +p { + margin: 0 0 (@spacer / 2); +} + + +// +// Emphasis & misc +// +small, +.small { + font-size: @font-size-small; + font-weight: @font-weight-normal; +} + +.mini { + font-size: @font-size-mini; + font-weight: @font-weight-normal; +} + +.large { + font-size: @font-size-large; +} + +strong, +.strong, +.bold { + font-weight: @font-weight-bold; +} + +em, +.italic { + font-style: italic; +} + +// Alignment +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } +.text-justify { text-align: justify; } +.text-nowrap { white-space: nowrap; } + +// Transformation +.text-lowercase { text-transform: lowercase; } +.text-uppercase { text-transform: uppercase; } +.text-capitalize { text-transform: capitalize; } diff --git a/assets/less/ascribe/_variables.less b/assets/less/ascribe/_variables.less index c18234b..446400b 100644 --- a/assets/less/ascribe/_variables.less +++ b/assets/less/ascribe/_variables.less @@ -21,7 +21,33 @@ @black: #000; -// SPACING +// +// Typography +// +@font-size-base: 18px; +@font-size-small: 14px; +@font-size-mini: 11px; +@font-size-large: 24px; + +@line-height-base: 24px; +@line-height-small: 18px; + +@text-color: @blueDeep; + +@font-family-base: "canada-type-gibson", sans-serif; +@font-weight-base: 200; +@font-weight-normal: 400; +@font-weight-bold: @font-weight-normal; + +@body-bg: @white; + + +@link-color: @blueBright; +@link-hover-color: @pink; + +// +// Spacing +// @spacer: 40px;