mirror of https://github.com/ascribe/wp-theme
big refactor of all typography
This commit is contained in:
parent
26a51ef110
commit
6a8d8d75a4
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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%; }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
@ -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;
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue