mirror of https://github.com/ascribe/wp-theme
101 lines
2.1 KiB
Plaintext
101 lines
2.1 KiB
Plaintext
//
|
|
// Ascribe
|
|
// -----------------
|
|
// Variables
|
|
//
|
|
|
|
// COLORS
|
|
@blueDeep: #121417;
|
|
@blueMedium: #003C69;
|
|
@blueBright: #67C4DA;
|
|
@blueLight: #d7e9ef;
|
|
@pink: #D8127D;
|
|
|
|
@white: #fff;
|
|
@greyBg: #fbfbfb;
|
|
@greySocial: #b8b8b8;
|
|
@greyHr: #979797;
|
|
@greyFooter: #8c8c8c;
|
|
@greyText: #595959;
|
|
@blackish: #1e1e1e;
|
|
@black: #000;
|
|
|
|
// social networks
|
|
@brand-twitter: #00aced;
|
|
@brand-facebook: #3b5998;
|
|
@brand-linkedin: #007bb5;
|
|
|
|
|
|
//
|
|
// Typography
|
|
//
|
|
@font-size-base: 18px;
|
|
@font-size-small: 15px;
|
|
@font-size-mini: 13px;
|
|
@font-size-large: 24px;
|
|
|
|
@font-size-h1: 42px;
|
|
@font-size-h2: 32px;
|
|
@font-size-h3: 26px;
|
|
@font-size-h4: 22px;
|
|
@font-size-h5: @font-size-base;
|
|
@font-size-h6: @font-size-small;
|
|
|
|
@line-height-base: 24px;
|
|
@line-height-small: 22px;
|
|
@line-height-large: 28px;
|
|
|
|
@text-color: @greyText;
|
|
|
|
@font-family-base: "canada-type-gibson", sans-serif;
|
|
@font-weight-light: 300;
|
|
@font-weight-normal: 400;
|
|
|
|
@font-weight-base: @font-weight-light;
|
|
@font-weight-bold: @font-weight-normal;
|
|
|
|
@body-bg: @white;
|
|
|
|
|
|
@link-color: @blueBright;
|
|
@link-hover-color: @pink;
|
|
|
|
|
|
@headings-font-family: @font-family-base;
|
|
@headings-font-weight: @font-weight-base;
|
|
@headings-line-height: 1.2;
|
|
@headings-color: @pink;
|
|
|
|
|
|
//
|
|
// Spacing
|
|
//
|
|
@spacer: 40px;
|
|
|
|
|
|
//
|
|
// Responsive breakpoints
|
|
//
|
|
@screen-xs-min: 400px;
|
|
@screen-sm-min: 768px;
|
|
@screen-md-min: 900px;
|
|
@screen-lg-min: 1100px;
|
|
|
|
@screen-xs: ~'min-width: @{screen-xs-min}';
|
|
@screen-sm: ~'min-width: @{screen-sm-min}';
|
|
@screen-md: ~'min-width: @{screen-md-min}';
|
|
@screen-lg: ~'min-width: @{screen-lg-min}';
|
|
|
|
// LEGACY
|
|
// mostly used in conjunction with max-width media queries
|
|
@smallWidth: @screen-xs-min;
|
|
@middleWidth: 570px;
|
|
@phoneWidth: 600px;
|
|
@tabletWidth: @screen-sm-min;
|
|
|
|
|
|
//
|
|
// Grid
|
|
//
|
|
@gutter-space: (@spacer * 1.5);
|