mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-30 13:41:54 +02:00
120 lines
2.7 KiB
SCSS
120 lines
2.7 KiB
SCSS
$imageMaxWidth: 940px;
|
|
$easing: cubic-bezier(0.75, 0, 0.08, 1);
|
|
|
|
// Colors
|
|
/////////////////////////////////////
|
|
|
|
$brand-main: #015565;
|
|
$brand-cyan: #43a699;
|
|
$brand-main-light: #88bec8;
|
|
$brand-light: #e7eef4;
|
|
|
|
$brand-grey: #4e5d63;
|
|
$brand-grey-light: lighten($brand-grey, 15%);
|
|
$brand-grey-dimmed: lighten($brand-grey, 50%);
|
|
|
|
$alert-info: #f7f1e4;
|
|
$alert-success: #dff0d8;
|
|
$alert-error: #f2dede;
|
|
|
|
// Backgrounds
|
|
/////////////////////////////////////
|
|
|
|
$body-background-color: $brand-light;
|
|
$body-background-color--dark: darken($brand-grey, 22%);
|
|
|
|
// Text Colors
|
|
/////////////////////////////////////
|
|
|
|
$text-color: $brand-grey;
|
|
$text-color-light: $brand-grey-light;
|
|
|
|
$text-color--dark: lighten($brand-grey-light, 10%);
|
|
$text-color-light--dark: lighten($brand-grey-light, 5%);
|
|
|
|
$link-color: $brand-cyan;
|
|
$link-color-hover: lighten($link-color, 10%);
|
|
$link-color-active: darken($link-color, 10%);
|
|
|
|
// Base Typography
|
|
/////////////////////////////////////
|
|
|
|
$font-size-root: 18px;
|
|
|
|
$font-size-base: 1rem;
|
|
$font-size-large: 1.15rem;
|
|
$font-size-small: 0.85rem;
|
|
$font-size-mini: 0.7rem;
|
|
|
|
$font-size-h1: 3rem;
|
|
$font-size-h2: 2rem;
|
|
$font-size-h3: 1.5rem;
|
|
$font-size-h4: 1.2rem;
|
|
$font-size-h5: $font-size-large;
|
|
$font-size-h6: $font-size-base;
|
|
|
|
$line-height: 1.5;
|
|
$line-height-small: 1.1428571429;
|
|
|
|
$font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
|
|
Helvetica, Arial, sans-serif;
|
|
$font-weight-base: 400;
|
|
|
|
$font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
|
|
'Courier New', monospace;
|
|
|
|
// Headings
|
|
/////////////////////////////////////
|
|
|
|
$font-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',
|
|
Helvetica, Arial, sans-serif;
|
|
$font-weight-headings: 700;
|
|
$line-height-headings: 1.1;
|
|
|
|
$color-headings: $brand-main;
|
|
$color-headings--dark: $brand-main-light;
|
|
|
|
// Spacing
|
|
/////////////////////////////////////
|
|
|
|
$spacer: 1.7rem;
|
|
$padding-base-vertical: 0.75rem;
|
|
$padding-base-horizontal: 1.25rem;
|
|
|
|
$border-radius: 0.25rem;
|
|
|
|
// Code
|
|
/////////////////////////////////////
|
|
|
|
$code-bg: #343642;
|
|
$code-color: $brand-light;
|
|
$kbd-bg: $code-bg;
|
|
$kbd-color: $code-color;
|
|
|
|
// Responsive breakpoints
|
|
/////////////////////////////////////
|
|
|
|
$screen-xs: 30em;
|
|
$screen-sm: 40.625em;
|
|
$screen-md: 60em;
|
|
$screen-lg: 87.5em;
|
|
|
|
// Forms
|
|
/////////////////////////////////////
|
|
|
|
$input-bg: darken($body-background-color, 5%);
|
|
$input-bg--dark: darken($body-background-color--dark, 5%);
|
|
$input-bg-disabled: $brand-grey-light;
|
|
|
|
$input-font-size: $font-size-base;
|
|
$input-font-weight: $font-weight-base;
|
|
|
|
$input-color: $text-color;
|
|
$input-color--dark: $text-color--dark;
|
|
$input-color-placeholder: $brand-grey-light;
|
|
$input-color-placeholder--dark: $brand-grey;
|
|
|
|
$input-border: $brand-grey-light;
|
|
$input-border-radius: $border-radius;
|
|
$input-border-focus: $brand-cyan;
|