$theme-width: 1280px; $theme-width-sidebar: 250px; $theme-index-column-width: 384px; $theme-hue: 210; $theme-content-background: hsl($theme-hue, 33%, 20%); $theme-content-color: hsl($theme-hue, 0%, 90%); $theme-header-logo-height: 90px; $theme-header-background: hsl($theme-hue, 0%, 7.5%); $theme-header-color: hsl($theme-hue, 100%, 99%); $theme-menu-background: hsl($theme-hue, 0%, 6.5%); $theme-menu-light-background: hsl($theme-hue, 33%, 13.0%); $theme-menu-color: hsl($theme-hue, 0%, 85%); $theme-menu-color-active: hsl($theme-hue, 0%, 100%); $theme-article-background: hsl($theme-hue, 50%, 10%); $theme-article-color: $theme-content-color; $theme-article-title-background: hsl($theme-hue, 100%, 40%); $theme-article-title-color: hsl($theme-hue, 100%, 100%); $theme-article-heading-h1-background: hsl($theme-hue, 75%, 30%); $theme-article-heading-h2-background: hsl($theme-hue, 75%, 15%); $theme-article-heading-h3-background: transparent; $theme-article-heading-h4-background: transparent; $theme-article-heading-h5-background: transparent; $theme-article-heading-h6-background: transparent; $theme-article-heading-link-color: hsl($theme-hue, 100%, 75%); $theme-article-heading-link-color-active: hsl($theme-hue, 100%, 90%); $theme-article-table-head-background: hsl($theme-hue, 75%, 25%); $theme-article-table-body-background: hsl($theme-hue, 60%, 15%); $theme-article-table-body-background-alt: hsl($theme-hue, 60%, 12.5%); $theme-article-link-color: hsl($theme-hue, 50%, 75%); $theme-article-link-color-active: hsl($theme-hue, 100%, 85%); $theme-article-meta-background: hsl($theme-hue, 50%, 7.5%); $theme-article-meta-color: hsl($theme-hue, 0%, 70%); $theme-article-meta-link-color: hsl($theme-hue, 100%, 70%); $theme-article-meta-link-color-active: hsl($theme-hue, 100%, 90%); $theme-article-shadow: 3px 3px 6px 1px hsla(0, 0%, 0%, 0.75); $theme-comments-background: $theme-article-background; $theme-comments-color: $theme-article-color; $theme-comments-title-background: hsl($theme-hue, 40%, 35%); $theme-comments-title-color: $theme-article-title-color; $theme-comments-shadow: 3px 3px 6px 1px hsla(0, 0%, 0%, 0.75); $theme-breadcrumbs-background: hsl($theme-hue, 33%, 15%); $theme-breadcrumbs-color: hsl($theme-hue, 100%, 100%); $theme-breadcrumbs-link-color: hsl($theme-hue, 100%, 75%); $theme-breadcrumbs-link-color-active: hsl($theme-hue, 100%, 85%); $theme-footer-background: hsl($theme-hue, 33%, 10.0%); $theme-footer-color: hsl($theme-hue, 0%, 80%); $theme-code-background: hsl($theme-hue, 50%, 5%); $theme-button-background: hsl($theme-hue, 100%, 30.0%); $theme-button-background-active: hsl($theme-hue, 100%, 50%); $theme-button-color: hsl($theme-hue, 0%, 100%); $theme-button-color-active: hsl($theme-hue, 100%, 100%); $theme-pagination-background: hsl($theme-hue, 50%, 10%); $theme-pagination-background-active: hsl($theme-hue, 100%, 50%); $theme-pagination-background-selected: hsl($theme-hue, 100%, 33%); $theme-pagination-shadow: 0px 3px 6px 1px hsla(0, 0%, 0%, 0.75); $theme-pagination-shadow-active: 0px 3px 6px 1px hsla(0, 0%, 0%, 0.75); $theme-pagination-shadow-selected: 0px 3px 6px 1px hsla(0, 0%, 0%, 0.75); $theme-pagination-color: $theme-content-color; $theme-pagination-color-active: hsl($theme-hue, 100%, 100%); $theme-pagination-color-selected: hsl($theme-hue, 100%, 50%);