diff options
Diffstat (limited to 'theme/stylesheets')
| -rwxr-xr-x | theme/stylesheets/website/markdown.less | 102 | ||||
| -rwxr-xr-x | theme/stylesheets/website/summary.less | 8 | ||||
| -rw-r--r-- | theme/stylesheets/website/variables.less | 113 |
3 files changed, 169 insertions, 54 deletions
diff --git a/theme/stylesheets/website/markdown.less b/theme/stylesheets/website/markdown.less index c5cd348..b5b0121 100755 --- a/theme/stylesheets/website/markdown.less +++ b/theme/stylesheets/website/markdown.less @@ -16,57 +16,123 @@ } .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal { - color:@page-color-1; + color: @page-color-1; + + a { + color: @page-link-color-1; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: @page-heading-color-1; + } + + h1, h2 { + border-color: @page-heading-border-color-1; + } + + h6 { + color: @page-h6-color-1; + } + + hr { + background-color: @page-hr-color-1; + } + + blockquote { + border-color: @page-blockquote-border-color-1; + } pre, code { - background: #fdf6e3; - color: #657b83; - border-color: darken(#fdf6e3, 15%); + background: @page-pre-background-1; + color: @page-pre-color-1; + border-color: @page-pre-border-color-1; @import "./highlight/sepia.less"; } + .highlight { + background-color: @page-highlight-background-1; + } + table { th, td { - border-color: darken(#fdf6e3, 25%); + border-color: @page-table-header-border-color-1; } tr { - background: #fdf6e3; - color: inherit; - border-color: #444; + color: @page-table-row-color-1; + background-color: @page-table-row-background-1; + border-color: @page-table-row-border-color-1; } tr:nth-child(2n) { - background-color: darken(#fdf6e3, 5%); + background-color: @page-table-row-odd-background-1; } } } .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal { - color:@page-color-2; + color: @page-color-2; + + a { + color: @page-link-color-2; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: @page-heading-color-2; + } + + h1, h2 { + border-color: @page-heading-border-color-2; + } + + h6 { + color: @page-h6-color-2; + } + + hr { + background-color: @page-hr-color-2; + } + + blockquote { + border-color: @page-blockquote-border-color-2; + } pre, code { - background: black; - color: #eaeaea; - border-color: #000; + color: @page-pre-color-2; + background: @page-pre-background-2; + border-color: @page-pre-border-color-2; @import "./highlight/night.less"; } + .highlight { + background-color: @page-highlight-background-2; + } + table { th, td { - border-color: #444; + border-color: @page-table-header-border-color-2; } tr { - background-color: black; - color: #eaeaea; - border-color: #444; + color: @page-table-row-color-2; + background-color: @page-table-row-background-2; + border-color: @page-table-row-border-color-2; } tr:nth-child(2n) { - background-color: #222; + background-color: @page-table-row-odd-background-2; } } } diff --git a/theme/stylesheets/website/summary.less b/theme/stylesheets/website/summary.less index f004819..50aeebd 100755 --- a/theme/stylesheets/website/summary.less +++ b/theme/stylesheets/website/summary.less @@ -11,7 +11,7 @@ width: @sidebar-width; color: @sidebar-color; background: @sidebar-background; - border-right: 1px solid @sidebar-border; + border-right: @sidebar-border-right; .transition(left @sidebar-transition-duration ease); @@ -152,6 +152,7 @@ .book-summary { color: @sidebar-color-1; background: @sidebar-background-1; + border-right: @sidebar-border-right-1; .book-search { background: @sidebar-search-background-1; @@ -179,11 +180,13 @@ a, span { color: @sidebar-link-color-1; background: @sidebar-link-background-1; + font-weight: @sidebar-link-weight-1; } &.active > a, a:hover { color: @sidebar-link-hover-color-1; background: @sidebar-link-hover-background-1; + font-weight: @sidebar-link-hover-weight-1; } } } @@ -197,6 +200,7 @@ .book-summary { color: @sidebar-color-2; background: @sidebar-background-2; + border-right: @sidebar-border-right-2; .book-search { background: @sidebar-search-background-2; @@ -224,11 +228,13 @@ a, span { color: @sidebar-link-color-2; background: @sidebar-link-background-2; + font-weight: @sidebar-link-weight-2; } &.active > a, a:hover { color: @sidebar-link-hover-color-2; background: @sidebar-link-hover-background-2; + font-weight: @sidebar-link-hover-weight-2; } } } diff --git a/theme/stylesheets/website/variables.less b/theme/stylesheets/website/variables.less index bf6e23d..e3ec2cb 100644 --- a/theme/stylesheets/website/variables.less +++ b/theme/stylesheets/website/variables.less @@ -31,7 +31,7 @@ @sidebar-breakpoint: 600px; @sidebar-color: hsl(207, 15%, 25%); @sidebar-background: #fafafa; -@sidebar-border: @header-border; +@sidebar-border-right: 1px solid @header-border; @sidebar-nested-padding: 20px; @@ -40,7 +40,7 @@ @sidebar-search-input-background: transparent; @sidebar-search-input-border-color: transparent; -@sidebar-divider-color: @sidebar-border; +@sidebar-divider-color: @header-border; @sidebar-link-color: @sidebar-color; @sidebar-link-background: transparent; @@ -103,12 +103,12 @@ @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; +@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; /* ,--------.,--. @@ -123,9 +123,9 @@ @header-background-1: transparent; @header-background-2: transparent; @header-button-color-1: #AFA790; -@header-button-color-2: #7e888b; +@header-button-color-2: hsl(230, 17%, 28%); @header-button-hover-color-1: #73553C; -@header-button-hover-color-2: #C9C9C9; +@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; @@ -133,14 +133,16 @@ // Body @body-background-1: #F3EACB; -@body-background-2: #1d1f21; +@body-background-2: hsl(228, 21%, 14%); // Sidebar @sidebar-transition-duration: 250ms; @sidebar-color-1: #AFA790; -@sidebar-color-2: hsl(207, 15%, 80%); +@sidebar-color-2: hsl(226, 20%, 78%); @sidebar-background-1: #111; -@sidebar-background-2: #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; @@ -148,51 +150,92 @@ @sidebar-search-input-border-color-2: transparent; @sidebar-divider-color-1: @sidebar-divider-color; -@sidebar-divider-color-2: #1d1f21; +@sidebar-divider-color-2: hsl(230, 19%, 19%); @sidebar-link-color-1: #877F6A; -@sidebar-link-color-2: hsl(207, 15%, 50%); +@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(207, 100%, 50%); +@sidebar-link-hover-color-2: hsl(240, 5%, 96%); @sidebar-link-hover-background-1: transparent; -@sidebar-link-hover-background-2: 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: @sidebar-link-color-2; +@sidebar-link-completed-2: hsl(227, 13%, 44%); @sidebar-link-completed-weight-1: normal; -@sidebar-link-completed-weight-2: 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-border-color-1: @sidebar-divider-color-1; +@dropdown-button-color-2: hsl(228, 13%, 44%); @dropdown-button-hover-color-1: @header-button-hover-color-1; - -@dropdown-divider-color-2: @sidebar-divider-color-2; -@dropdown-background-2: @sidebar-background-2; -@dropdown-button-color-2: @header-button-color-2; -@dropdown-border-color-2: @sidebar-divider-color-2; -@dropdown-button-hover-color-2: @header-button-hover-color-2; +@dropdown-button-hover-color-2: hsl(240, 5%, 96%); // Page -@page-color-1: #704214; -@page-color-2: #a4b1b1; -@page-background-1: #F3EACB; -@page-background-2: #1d1f21; - -@bar-background-1: #F3EACB; -@bar-background-2: #1d1f21; +@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: @header-button-color-2; +@navigation-color-2: hsl(224, 19%, 27%); @navigation-hover-color-1: @header-button-hover-color-1; -@navigation-hover-color-2: @header-button-hover-color-2; +@navigation-hover-color-2: hsl(60, 100%, 98%); // Basics of a navbar @navbar-default-border-1: #d5d5d5; |