Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
277 lines (188 sloc) 7.62 KB
// =============================================================================
// Variables
// =============================================================================
// ==========================================
// Colour definitions
// ==========================================
// Grays
// -------------------------
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
// Accent colors
// -------------------------
@blue: #049cdb;
@blue-dark: #0064cd;
@green: #093;
@red: #9d261d;
@orange-light: #ffc768;
@orange: #f89406;
@orange-dark: #d54e21;
@pink: #f71570;
@purple: #7a43b6;
// ==========================================
// Scaffolding
// ==========================================
@body-bg: #e3ecf2;
@text-color: @gray;
// ==========================================
// Links
// ==========================================
@link-color: #3083aa;
@link-color-hover: @orange-dark;
// ==========================================
// Selections
// ==========================================
@color-selection: #568cbb;
@color-selection-text: #fff;
// ==========================================
// Typography
// ==========================================
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, Cambria, "Bitstream Charter", serif;
@font-family-monospace: Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-serif;
@font-size-base: 16; // 16px, 1.6 rem
@font-size-large: ceil( (@font-size-base * 1.1) ); // ~18px
@font-size-medium: ceil( (@font-size-base * 0.9) ); // ~15px
@font-size-small: ceil( (@font-size-base * 0.85) ); // ~14px
@font-size-mini: ceil( (@font-size-base * 0.8) ); // ~13px
@font-size-micro: ceil( (@font-size-base * 0.75) ); // ~12px
@line-height-base: 1.6;
@headings-font-size: 26; // 26px, 1.6 rem
@headings-size-large: ceil( (@headings-font-size * 1.15) ); // ~30px
@headings-size-medium: ceil( (@headings-font-size * 0.85) ); // ~23px
@headings-size-small: ceil( (@headings-font-size * 0.8) ); // ~21px
@headings-size-mini: ceil( (@headings-font-size * 0.75) ); // ~20px
@headings-size-micro: ceil( (@headings-font-size * 0.7) ); // ~19px
// ==========================================
// Widths
// ==========================================
@width-site: 1080px;
@width-main: 650px;
@width-secondary: 310px;
@gutter-width: 40px;
@gutter-width-small: 25px;
// Set the width of the three column layouts
@three-col-main-width: 500px;
@three-col-sidebar-width: ( @three-col-main-width / 2 - @gutter-width-small ); // 225px
// ==========================================
// Component variables
// ==========================================
// Widget and section titles
// -------------------------
@title-widget-bg: lighten(#000, 92.5%); // #ececec
@title-section-bg: @orange-dark;
// Inputs
// -------------------------
@input-border-color: lighten(#000, 80%); // #ccc
@input-text-color: @gray;
@input-focus-color: #52a8ec;
// Topbar
// -------------------------
@topbar-bg: #262626;
@topbar-height: 60px;
@topbar-color: lighten(#000, 80%); // #ccc
@topbar-search-border: @gray-darker;
// Posts
// -------------------------
@post-border-color: @gray-lighter;
@post-meta-color: darken(@gray-light, 10%);
// Comments
// -------------------------
@comments-border-color: @gray-lighter;
// Post formats
// -------------------------
@format-image-meta-bg: #e0e6e8;
// Slider
// -------------------------
@slider-pagination-size: 16px;
@slider-pagination-color: @orange-light;
@slider-pagination-color-hover: @orange;
@slider-pagination-color-active: @orange-dark;
// Recent Posts
// -------------------------
@recent-post-width: 220px;
@recent-post-opacity: 0.75;
// Headlines Lists
// -------------------------
@headline-box-count: 2; // Number of boxes in each row
@headline-box-width: 470px; // @todo use calc()
// Breadcrumbs
// -------------------------
@breadcrumb-bg: #f8f8f7;
// Pagination
// -------------------------
@pagination-bg: @gray-lighter;
@pagination-hover-bg: @orange-light;
@pagination-hover-border: @orange;
@pagination-hover-text: darken(@orange-dark, 30%);
// Captions
// -------------------------
@caption-bg: @gray-darker;
@caption-text-color: darken(@gray-lighter, 6%);
// Tables
// -------------------------
@table-bg: #fff; // overall background-color
@table-bg-accent: #f9f9f9; // for striping
@table-bg-hover: #f5f5f5; // for hover
@table-border-color: #ddd; // table and cell border
// Related Posts
// -------------------------
@related-post-bg: #fff;
@related-post-border: darken(@gray-lighter, 3%);
@related-post-hover-bg: @orange-light;
@related-post-hover-border: @orange;
@related-post-hover-text: darken(@orange-dark, 30%);
// Colorbox
// -------------------------
@colorbox-primary-color: #000;
// Misc
// -------------------------
@highlight-bg: #f2f7fc; // blue
@highlight-bg-secondary: #ffffdf; // yellowish
@orange-line: 5px solid @orange-light;
// ==========================================
// Buttons
// ==========================================
@btn-default-color: @text-color;
@btn-default-bg: #fefefe; // #fefefe, #f4f4f4
@btn-default-secondary: #f4f4f4;
@btn-primary-color: #fff;
@btn-primary-bg: #08c;
@btn-primary-secondary: spin(#08c, 20%);
@btn-success-color: #fff;
@btn-success-bg: #62c462;
@btn-success-secondary: #51a351;
@btn-warning-color: #fff;
@btn-warning-bg: #faa51a;
@btn-warning-secondary: #f47a20;
@btn-danger-color: #fff;
@btn-danger-bg: #ee5f5b;
@btn-danger-secondary: #bd362f;
@btn-info-color: #fff;
@btn-info-bg: #5bc0de;
@btn-info-secondary: #2f96b4;
@btn-inverse-color: #fff;
@btn-inverse-bg: #444;
@btn-inverse-secondary: @gray-darker;
// ==========================================
// Alert messages
// ==========================================
@alert-bg: @gray-lighter;
@alert-text: @gray-darker;
@alert-border: darken(@gray-lighter, 8%);
@alert-success-bg: #dff0d8;
@alert-success-text: #0d370d;
@alert-success-border: darken(spin(@alert-success-bg, 10), 40%);
@alert-warning-bg: #fef9c7;
@alert-warning-text: #3b3601;
@alert-warning-border: darken(spin(@alert-warning-bg, -5), 25%);
@alert-error-bg: #f2dede;
@alert-error-text: #4b0706;
@alert-error-border: darken(spin(@alert-error-bg, -10), 25%);
@alert-info-bg: @highlight-bg;
@alert-info-text: darken(@text-color, 10%);
@alert-info-border: spin(desaturate(darken(@alert-info-bg, 10%), 40), -21);