diff options
Diffstat (limited to 'theme/stylesheets/website/variables.less')
| -rw-r--r-- | theme/stylesheets/website/variables.less | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/theme/stylesheets/website/variables.less b/theme/stylesheets/website/variables.less new file mode 100644 index 0000000..e3ec2cb --- /dev/null +++ b/theme/stylesheets/website/variables.less @@ -0,0 +1,242 @@ +@staticPath: "./"; + +// Font sizes +@font-size-base: 14px; +@font-size-large: ceil(@font-size-base * 1.25); // ~18px +@font-size-small: ceil(@font-size-base * 0.85); // ~12px +@line-height-base: 1.428571429; // 20/14 +@line-height-computed: floor(@font-size-base * @line-height-base); + +// Sizes +@mobileMaxWidth: 1240px; + +// Header +@header-height: 50px; +@header-color: hsl(194, 5%, 52%); +@header-background: transparent; +@header-border: rgba(0, 0, 0, 0.07); +@header-button-color: #ccc; +@header-button-hover-color: #444; +@header-button-hover-background: none; + +// Navigation +@navigation-color: @header-button-color; +@navigation-hover-color: @header-button-hover-color; + +// Body +@body-background: white; + +// Sidebar +@sidebar-width: 300px; +@sidebar-breakpoint: 600px; +@sidebar-color: hsl(207, 15%, 25%); +@sidebar-background: #fafafa; +@sidebar-border-right: 1px solid @header-border; + +@sidebar-nested-padding: 20px; + +@sidebar-search-padding: 6px; +@sidebar-search-background: transparent; +@sidebar-search-input-background: transparent; +@sidebar-search-input-border-color: transparent; + +@sidebar-divider-color: @header-border; + +@sidebar-link-color: @sidebar-color; +@sidebar-link-background: transparent; +@sidebar-link-hover-color: hsl(207, 100%, 50%); +@sidebar-link-hover-background: transparent; + +@sidebar-icon-color: hsl(120, 60%, 50%); +@sidebar-link-completed: @sidebar-link-color; +@sidebar-link-completed-weight: normal; + +// Page +@page-color: black; +@page-background: @body-background; + +// Content +@content-line-height: 1.6; +@content-color: #333333; + +// Dropdown +@dropdown-zindex: 100; +@dropdown-divider-color: @sidebar-divider-color; +@dropdown-background: @sidebar-background; +@dropdown-button-color: darken(@header-button-color, 15%); +@dropdown-border-color: @sidebar-divider-color; +@dropdown-button-hover-color: @header-button-hover-color; + +// Buttons +@button-background: #eee; +@button-color: #666; +@button-hover-color: #444; + +// States and alerts +@state-success-text: #3c763d; +@state-success-bg: #dff0d8; +@state-success-border: darken(spin(@state-success-bg, -10), 5%); + +@state-info-text: #31708f; +@state-info-bg: #d9edf7; +@state-info-border: darken(spin(@state-info-bg, -10), 7%); + +@state-warning-text: #8a6d3b; +@state-warning-bg: #fcf8e3; +@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); + +@state-danger-text: #a94442; +@state-danger-bg: #f2dede; +@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); + +// Border Radius +@border-radius-base: 1px; +@border-radius-large: 3px; +@border-radius-small: 1px; + +// Fonts +@font-family-serif: "Merriweather", Georgia, serif; +@font-family-sans: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-base: @font-family-sans; +@headings-font-family: inherit; + +@FontPath: '@{staticPath}/fonts'; +@fa-font-path: "@{FontPath}/fontawesome"; + +@s-font-size: 1.2rem; +@m-font-size: 1.4rem; +@l-font-size: 1.6rem; +@xl-font-size: 2.2rem; +@xxl-font-size: 4.0rem; +@default-font-size: @l-font-size; + +/* +,--------.,--. +'--. .--'| ,---. ,---. ,--,--,--. ,---. ,---. .--. + | | | .-. || .-. :| || .-. :( .-' '--' + | | | | | |\ --.| | | |\ --..-' `).--. + `--' `--' `--' `----'`--`--`--' `----'`----' '--' +*/ +// Header +@header-color-1: #AFA790; +@header-color-2: #7e888b; +@header-background-1: transparent; +@header-background-2: transparent; +@header-button-color-1: #AFA790; +@header-button-color-2: hsl(230, 17%, 28%); +@header-button-hover-color-1: #73553C; +@header-button-hover-color-2: hsl(60, 100%, 98%); +@header-button-hover-background-1: none; +@header-button-hover-background-2: none; +@header-dropdown-background-1: @sidebar-background-1; +@header-dropdown-background-2: @sidebar-background-2; + +// Body +@body-background-1: #F3EACB; +@body-background-2: hsl(228, 21%, 14%); + +// Sidebar +@sidebar-transition-duration: 250ms; +@sidebar-color-1: #AFA790; +@sidebar-color-2: hsl(226, 20%, 78%); +@sidebar-background-1: #111; +@sidebar-background-2: hsl(229, 20%, 22%); +@sidebar-border-right-1: @sidebar-border-right; +@sidebar-border-right-2: none; + +@sidebar-search-background-1: transparent; +@sidebar-search-background-2: transparent; +@sidebar-search-input-border-color-1: transparent; +@sidebar-search-input-border-color-2: transparent; + +@sidebar-divider-color-1: @sidebar-divider-color; +@sidebar-divider-color-2: hsl(230, 19%, 19%); + +@sidebar-link-color-1: #877F6A; +@sidebar-link-color-2: hsl(226, 22%, 80%); +@sidebar-link-background-1: transparent; +@sidebar-link-background-2: transparent; +@sidebar-link-weight-1: normal; +@sidebar-link-weight-2: 600; +@sidebar-link-hover-color-1: #704214; +@sidebar-link-hover-color-2: hsl(240, 5%, 96%); +@sidebar-link-hover-background-1: transparent; +@sidebar-link-hover-background-2: hsl(233, 19%, 18%); +@sidebar-link-hover-weight-1: normal; +@sidebar-link-hover-weight-2: 600; + +@sidebar-icon-color-1: hsl(120, 60%, 50%); +@sidebar-icon-color-2: @sidebar-icon-color-1; +@sidebar-link-completed-1: @sidebar-link-color-1; +@sidebar-link-completed-2: hsl(227, 13%, 44%); +@sidebar-link-completed-weight-1: normal; +@sidebar-link-completed-weight-2: 600; + +// Dropdown +@dropdown-divider-color-1: @sidebar-divider-color-1; +@dropdown-divider-color-2: @sidebar-divider-color-2; +@dropdown-border-color-1: @sidebar-divider-color-1; +@dropdown-border-color-2: @sidebar-divider-color-2; +@dropdown-background-1: @sidebar-background-1; +@dropdown-background-2: @sidebar-background-2; + +@dropdown-button-color-1: @header-button-color-1; +@dropdown-button-color-2: hsl(228, 13%, 44%); +@dropdown-button-hover-color-1: @header-button-hover-color-1; +@dropdown-button-hover-color-2: hsl(240, 5%, 96%); + +// Page +@page-color-1: #704214; +@page-color-2: hsl(214, 29%, 80%); +@page-background-1: @body-background-1; +@page-background-2: @body-background-2; + +@page-link-color-1: inherit; +@page-link-color-2: hsl(193, 61%, 53%); + +@page-heading-color-1: inherit; +@page-heading-color-2: hsl(60, 100%, 99%); +@page-heading-border-color-1: inherit; +@page-heading-border-color-2: hsl(230, 17%, 26%); +@page-h6-color-1: inherit; +@page-h6-color-2: hsl(230, 17%, 26%); + +@page-hr-color-1: inherit; +@page-hr-color-2: hsl(230, 17%, 26%); + +@page-blockquote-border-color-1: inherit; +@page-blockquote-border-color-2: hsl(230, 17%, 26%); + +@page-pre-color-1: #657b83; +@page-pre-color-2: hsl(206, 43%, 73%); +@page-pre-background-1: #fdf6e3; +@page-pre-background-2: hsl(229, 20%, 22%); +@page-pre-border-color-1: darken(#fdf6e3, 15%); +@page-pre-border-color-2: hsl(229, 20%, 22%); +@page-highlight-background-1: inherit; +@page-highlight-background-2: hsl(233, 18%, 19%); + +@page-table-header-border-color-1: darken(#fdf6e3, 25%); +@page-table-header-border-color-2: hsl(230, 17%, 28%); +@page-table-row-border-color-1: #444; +@page-table-row-border-color-2: hsl(230, 17%, 28%); +@page-table-row-color-1: inherit; +@page-table-row-color-2: hsl(216, 24%, 77%); +@page-table-row-background-1: #fdf6e3; +@page-table-row-background-2: hsl(229, 19%, 22%); +@page-table-row-odd-background-1: darken(#fdf6e3, 5%); +@page-table-row-odd-background-2: hsl(229, 17%, 25%); + +// Page Bar +@bar-background-1: @page-background-1; +@bar-background-2: @page-background-2; + +// Navigation +@navigation-color-1: @header-button-color-1; +@navigation-color-2: hsl(224, 19%, 27%); +@navigation-hover-color-1: @header-button-hover-color-1; +@navigation-hover-color-2: hsl(60, 100%, 98%); + +// Basics of a navbar +@navbar-default-border-1: #d5d5d5; +@navbar-default-border-2: #d5d5d5; |