8
0
daux.io/themes/daux/scss/_variables.scss
2018-02-26 22:46:36 +01:00

90 Zeilen
2.9 KiB
SCSS

:root {
// Gray Scale
--gray: #7a8288;
--dark-gray: color(var(--gray) blend(#000 40%));
//--darker-gray: color(var(--gray) blend(#000 60%));
--light-gray: color(var(--gray) blend(#fff 50%));
--lighter-gray: color(var(--gray) blend(#fff 70%));
--lightest-gray: color(var(--gray) blend(#fff 90%));
// Type Scale
--type-size-1: 2.441rem; // ~39.056px
--type-size-2: 1.953rem; // ~31.248px
--type-size-3: 1.563rem; // ~25.008px
--type-size-4: 1.25rem; // ~20px
--type-size-5: 1rem; // ~16px
--type-size-6: 0.75rem; // ~12px
--dark: #3f4657;
--light: #82becd;
--text: #222;
--link-color: var(--light);
--brand-color: var(--light);
--brand-background: var(--dark);
// Sidebar
--sidebar-border: #e7e7e9;
--sidebar-background: #f7f7f7;
// Sidebar links
--sidebar-link-color: var(--dark);
--sidebar-link-active-background: #c5c5cb;
--sidebar-link-hover-background: var(--sidebar-link-active-background);
--sidebar-link-arrow-color: var(--dark);
--sidebar-link-secondary-color: var(--text);
// Sidebar Checkbox
--checkbox-background: #e6e6e6;
--checkbox-hover-background: #ccc;
--checkbox-checked-background: var(--dark);
--checkbox-checked-hover-background: var(--light);
--checkbox-tick-color: #fff;
--checkbox-disabled-background: #e6e6e6;
--checkbox-disabled-tick-color: #7b7b7b;
// Sidebar search field
--search-field-color: #555;
--search-field-border-color: #ccc;
--search-field-background: #fff;
--search-field-hover-border-color: var(--light);
// Sidebar hamburger
--sidebar-collapsible--hamburger-color: var(--light);
--sidebar-collapsible--hamburger-hover-color: var(--dark);
--sidebar-collapsible--hamburger-hover-background: var(--light);
// Homepage
--homepage-navbar-background: var(--dark);
--homepage-hero-background: var(--light);
--homepage-hero-color: var(--dark);
--homepage-bullet-color: var(--light);
--homepage-footer-color: var(--light);
--homepage-footer-background: var(--dark);
// Homepage Hero Buttons
--hero-button-block-background: var(--sidebar-link-active-background);
--hero-button-border-color: var(--dark);
--hero-button-primary-color: var(--sidebar-background);
--hero-buttom-primary-background: var(--dark);
--hero-button-secondary-color: var(--dark);
--hero-button-secondary-background: var(--sidebar-link-active-background);
--content-floating-blocks-background: var(--light);
--code-tag-color: var(--dark);
--code-tag-background-color: #fafafa;
--code-tag-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
--code-tag-border-radius: 4px;
--blockquote-border-color: var(--dark);
}
/*
* Breakpoints
* ===================================================================== */
@custom-media --viewport-small (width < 850px);
@custom-media --viewport-large (width >= 850px);