1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-14 00:55:16 +01:00
blog/_src/assets/less/variables.less

68 lines
2.0 KiB
Plaintext

// Colors
/////////////////////////////////////
@brand-dark: #015565;
@brand-light: #e7eef4;
@brand-cyan: #3a9085;
@brand-grey: #56666e;
@brand-grey-light: #96a6ad;
// Typography
/////////////////////////////////////
@font-family-sans-serif: 'brandon-grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-family-serif: 'rooney-web',Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif;
@font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
@font-family-base: @font-family-serif;
@font-weight-base: 400;
@font-size-base: 18px;
@font-size-large: ceil(@font-size-base * 1.25);
@font-size-small: ceil(@font-size-base * 0.8);
@font-size-mini: ceil(@font-size-base * 0.7);
@line-height-base: 1.5; // 27/18
@line-height-computed: floor(@font-size-base * @line-height-base);
@headings-font-family: @font-family-sans-serif;
@headings-font-weight: 500;
@headings-line-height: 1.1;
// Text Colors
/////////////////////////////////////
@text-color: lighten(@brand-grey, 5%);
@text-color-light: darken(@brand-grey-light, 5%);
@text-color-dimmed: lighten(@brand-grey-light, 5%);
@headings-color: @brand-dark;
// Scaffolding
/////////////////////////////////////
@body-bg: @brand-light;
@border-radius-base: 3px;
// Links
/////////////////////////////////////
@link-color: lighten(@brand-cyan, 5%);
@link-color-hover: lighten(@link-color, 10%);
// Responsive breakpoints
/////////////////////////////////////
@breakpoint1: ~"only screen and (min-width: 30em)";
@breakpoint2: ~"only screen and (min-width: 40.625em)";
@breakpoint3: ~"only screen and (min-width: 87.500em)";
// High dpi media query
/////////////////////////////////////
@highDPI: ~"print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) ";