1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-14 09:05:17 +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-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
@font-family-base: 'ff-tisa-sans-web-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-weight-base: 400;
@font-size-base: 18px;
@font-size-large: ceil(@font-size-base * 1.15);
@font-size-small: ceil(@font-size-base * 0.8);
@font-size-mini: ceil(@font-size-base * 0.7);
@line-height-base: 1.5;
@line-height-computed: floor(@font-size-base * @line-height-base);
@headings-font-family: 'brandon-grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
@headings-font-weight: 500; // Medium
@headings-line-height: 1.2;
// 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: #dfe8ef;
@page-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) ";
@highDPI_3x: ~"print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) ";