From 41fb9cd97a33f0487650ce3d59ff03ad3efa7ea1 Mon Sep 17 00:00:00 2001 From: squidfunk Date: Sat, 17 Dec 2016 12:53:24 +0100 Subject: [PATCH] Integrated palettes from 0.2.x --- material/assets/stylesheets/application.css | 72 +- .../stylesheets/application.palettes.css | 716 ++++++++++++++++++ material/base.html | 56 +- mkdocs.yml | 3 + .../stylesheets/application.palettes.scss | 171 +++++ src/assets/stylesheets/base/_typeset.scss | 12 +- .../stylesheets/extensions/_admonition.scss | 4 +- .../stylesheets/extensions/_codehilite.scss | 10 +- .../extensions/pymdown/_critic.scss | 2 +- src/assets/stylesheets/layout/_base.scss | 2 +- src/assets/stylesheets/layout/_footer.scss | 2 +- src/assets/stylesheets/layout/_header.scss | 3 +- src/assets/stylesheets/layout/_nav.scss | 11 +- src/assets/stylesheets/layout/_search.scss | 13 +- src/assets/stylesheets/layout/_sidebar.scss | 2 +- src/base.html | 63 +- 16 files changed, 1056 insertions(+), 86 deletions(-) create mode 100644 material/assets/stylesheets/application.palettes.css create mode 100644 src/assets/stylesheets/application.palettes.scss diff --git a/material/assets/stylesheets/application.css b/material/assets/stylesheets/application.css index 64b6ae78f..23ee7407c 100644 --- a/material/assets/stylesheets/application.css +++ b/material/assets/stylesheets/application.css @@ -180,7 +180,7 @@ kbd { color: #536dfe; } .md-typeset code, .md-typeset pre { - background: rgba(0, 0, 0, 0.035); + background-color: rgba(0, 0, 0, 0.035); color: #37474F; font-size: 85%; } .md-typeset code { @@ -198,13 +198,13 @@ kbd { .md-typeset h5 code, .md-typeset h6 code { margin: 0; - background: transparent; + background-color: transparent; box-shadow: none; } .md-typeset a > code { margin: inherit; padding: inherit; border-radius: none; - background: inherit; + background-color: inherit; color: inherit; box-shadow: none; } .md-typeset pre { @@ -223,7 +223,7 @@ kbd { background-color: #536dfe; } .md-typeset pre > code { margin: 0; - background: none; + background-color: none; font-size: inherit; box-shadow: none; -webkit-box-decoration-break: none; @@ -245,7 +245,7 @@ kbd { margin: 0 0.25em; padding: 0.0625em 0; border-radius: 0.2rem; - background: rgba(255, 235, 59, 0.5); + background-color: rgba(255, 235, 59, 0.5); box-shadow: 0.25em 0 0 rgba(255, 235, 59, 0.5), -0.25em 0 0 rgba(255, 235, 59, 0.5); word-break: break-word; -webkit-box-decoration-break: clone; @@ -357,7 +357,7 @@ hr { height: 0; -webkit-transition: width 0s 0.25s, height 0s 0.25s, opacity 0.25s; transition: width 0s 0.25s, height 0s 0.25s, opacity 0.25s; - background: rgba(0, 0, 0, 0.54); + background-color: rgba(0, 0, 0, 0.54); opacity: 0; z-index: 2; } @@ -395,7 +395,9 @@ hr { right: 0; left: 0; height: 5.6rem; - background: #3f51b5; + -webkit-transition: background-color 0.25s; + transition: background-color 0.25s; + background-color: #3f51b5; color: white; z-index: 1; } @@ -428,7 +430,7 @@ hr { bottom: 0; width: 100%; } .md-footer__inner { - background: rgba(0, 0, 0, 0.87); + background-color: rgba(0, 0, 0, 0.87); color: white; } .md-footer-nav { @@ -469,6 +471,8 @@ hr { font-size: 1.28rem; line-height: 1.3; } .md-nav--secondary { + -webkit-transition: border-left 0.25s; + transition: border-left 0.25s; border-left: 0.4rem solid #3f51b5; } .md-nav__title { display: block; @@ -571,7 +575,7 @@ hr { .md-search-result__meta { padding: 0 1.6rem; - background: rgba(0, 0, 0, 0.07); + background-color: rgba(0, 0, 0, 0.07); color: rgba(0, 0, 0, 0.54); font-size: 1.28rem; line-height: 4.0rem; } @@ -592,7 +596,7 @@ hr { transition: background 0.25s; overflow: auto; } .md-search-result__link:hover { - background: rgba(83, 109, 254, 0.1); } + background-color: rgba(83, 109, 254, 0.1); } .md-search-result__article { margin: 1.0em 0; } @@ -739,7 +743,7 @@ hr { padding: 0.8rem 1.2rem; border-left: 3.2rem solid rgba(68, 138, 255, 0.4); border-radius: 0.2rem; - background: rgba(68, 138, 255, 0.15); + background-color: rgba(68, 138, 255, 0.15); font-size: 1.28rem; } .admonition::before { position: absolute; @@ -754,37 +758,37 @@ hr { margin-bottom: 0; } .admonition.tldr, .admonition.summary { border-color: rgba(0, 176, 255, 0.4); - background: rgba(0, 176, 255, 0.15); } + background-color: rgba(0, 176, 255, 0.15); } .admonition.tldr::before, .admonition.summary::before { content: "subject"; } .admonition.idea, .admonition.tip { border-color: rgba(0, 191, 165, 0.4); - background: rgba(0, 191, 165, 0.15); } + background-color: rgba(0, 191, 165, 0.15); } .admonition.idea::before, .admonition.tip::before { content: "whatshot"; } .admonition.check, .admonition.done, .admonition.success { border-color: rgba(0, 230, 118, 0.4); - background: rgba(0, 230, 118, 0.15); } + background-color: rgba(0, 230, 118, 0.15); } .admonition.check::before, .admonition.done::before, .admonition.success::before { content: "done"; } .admonition.attention, .admonition.important, .admonition.warning { border-color: rgba(255, 145, 0, 0.4); - background: rgba(255, 145, 0, 0.15); } + background-color: rgba(255, 145, 0, 0.15); } .admonition.attention::before, .admonition.important::before, .admonition.warning::before { content: "warning"; } .admonition.fail, .admonition.missing, .admonition.failure { border-color: rgba(255, 82, 82, 0.4); - background: rgba(255, 82, 82, 0.15); } + background-color: rgba(255, 82, 82, 0.15); } .admonition.fail::before, .admonition.missing::before, .admonition.failure::before { content: "clear"; } .admonition.caution, .admonition.danger { border-color: rgba(255, 23, 68, 0.4); - background: rgba(255, 23, 68, 0.15); } + background-color: rgba(255, 23, 68, 0.15); } .admonition.caution::before, .admonition.danger::before { content: "flash_on"; } .admonition.bug, .admonition.error { border-color: rgba(245, 0, 87, 0.4); - background: rgba(245, 0, 87, 0.15); } + background-color: rgba(245, 0, 87, 0.15); } .admonition.bug::before, .admonition.error::before { content: "bug_report"; } @@ -985,13 +989,13 @@ hr { display: block; margin: 0 -1.2rem; padding: 0 1.2rem; - background: rgba(255, 235, 59, 0.5); } + background-color: rgba(255, 235, 59, 0.5); } .md-typeset .codehilite { margin: 1.0em 0; padding: 1.0rem 1.2rem 0.8rem; border-radius: 0.2rem; - background: rgba(0, 0, 0, 0.035); + background-color: rgba(0, 0, 0, 0.035); color: #37474F; line-height: 1.4; overflow: auto; @@ -1008,7 +1012,7 @@ hr { min-width: 100%; margin: 0; padding: 0; - background: transparent; + background-color: transparent; overflow: visible; vertical-align: top; } @@ -1036,7 +1040,7 @@ hr { .md-typeset .codehilitetable .linenodiv > pre { height: 100%; } .md-typeset .codehilitetable .linenos { - background: rgba(0, 0, 0, 0.07); + background-color: rgba(0, 0, 0, 0.07); color: rgba(0, 0, 0, 0.26); -webkit-user-select: none; -moz-user-select: none; @@ -1045,7 +1049,7 @@ hr { .md-typeset .codehilitetable .linenos pre { margin: 0; padding: 0; - background: transparent; + background-color: transparent; color: inherit; text-align: right; } .md-typeset .codehilitetable .code { @@ -1164,7 +1168,7 @@ hr { margin: 0 0.25em; padding: 0.0625em 0; border-radius: 0.2rem; - background: rgba(0, 0, 0, 0.035); + background-color: rgba(0, 0, 0, 0.035); color: #37474F; box-shadow: 0.25em 0 0 rgba(0, 0, 0, 0.035), -0.25em 0 0 rgba(0, 0, 0, 0.035); -webkit-box-decoration-break: clone; @@ -1304,7 +1308,7 @@ hr { .md-nav__source { display: block; padding: 0.4rem; - background: rgba(0, 0, 0, 0.87); + background-color: rgba(0, 0, 0, 0.87); color: white; } .md-search__overlay { @@ -1321,7 +1325,7 @@ hr { transition: transform 0.3s 0.1s, opacity 0.2s 0.2s; transition: transform 0.3s 0.1s, opacity 0.2s 0.2s, -webkit-transform 0.3s 0.1s; border-radius: 2.0rem; - background: white; + background-color: white; opacity: 0; overflow: hidden; z-index: 1; } @@ -1402,17 +1406,17 @@ hr { z-index: 1; } .md-nav--primary { - background: white; } + background-color: white; } .md-nav--primary .md-nav__toggle ~ .md-nav { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4); left: 0.4rem; - background: white; } + background-color: white; } html .md-nav--primary .md-nav__title { position: relative; padding: 0.4rem 1.6rem 0.4rem 5.6rem; - background: rgba(0, 0, 0, 0.07); + background-color: rgba(0, 0, 0, 0.07); color: rgba(0, 0, 0, 0.54); font-size: 1.8rem; font-weight: 400; @@ -1460,7 +1464,7 @@ hr { font-size: 2.4rem; } .md-nav--primary .md-nav__link:hover::after { - color: #536dfe; } + color: inherit; } .md-nav--primary .md-nav--secondary .md-nav { position: static; } @@ -1519,7 +1523,7 @@ hr { transition: box-shadow 0.25s, -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s, -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); - background: white; + background-color: white; z-index: 2; } .no-csstransforms3d .md-sidebar--primary { @@ -1576,7 +1580,7 @@ hr { -webkit-transition: background-color 0.25s, color 0.25s; transition: background-color 0.25s, color 0.25s; border-radius: 0.2rem; - background: rgba(0, 0, 0, 0.26); + background-color: rgba(0, 0, 0, 0.26); color: white; font-size: 1.6rem; } @@ -1601,11 +1605,11 @@ hr { color: white; } .md-search__input:hover { - background: rgba(255, 255, 255, 0.12); } + background-color: rgba(255, 255, 255, 0.12); } [data-md-toggle="search"]:checked ~ .md-header .md-search__input { border-radius: 0.2rem 0.2rem 0 0; - background: white; + background-color: white; color: rgba(0, 0, 0, 0.87); text-overflow: none; } diff --git a/material/assets/stylesheets/application.palettes.css b/material/assets/stylesheets/application.palettes.css new file mode 100644 index 000000000..e5654dde3 --- /dev/null +++ b/material/assets/stylesheets/application.palettes.css @@ -0,0 +1,716 @@ +[data-md-palette-primary="red"] .md-typeset a { + color: #ef5350; } + +[data-md-palette-primary="red"] .md-header { + background-color: #ef5350; } + +[data-md-palette-primary="red"] .md-nav--secondary { + border-left: 0.4rem solid #ef5350; } + +[data-md-palette-primary="pink"] .md-typeset a { + color: #e91e63; } + +[data-md-palette-primary="pink"] .md-header { + background-color: #e91e63; } + +[data-md-palette-primary="pink"] .md-nav--secondary { + border-left: 0.4rem solid #e91e63; } + +[data-md-palette-primary="purple"] .md-typeset a { + color: #ab47bc; } + +[data-md-palette-primary="purple"] .md-header { + background-color: #ab47bc; } + +[data-md-palette-primary="purple"] .md-nav--secondary { + border-left: 0.4rem solid #ab47bc; } + +[data-md-palette-primary="deep-purple"] .md-typeset a { + color: #7e57c2; } + +[data-md-palette-primary="deep-purple"] .md-header { + background-color: #7e57c2; } + +[data-md-palette-primary="deep-purple"] .md-nav--secondary { + border-left: 0.4rem solid #7e57c2; } + +[data-md-palette-primary="indigo"] .md-typeset a { + color: #3f51b5; } + +[data-md-palette-primary="indigo"] .md-header { + background-color: #3f51b5; } + +[data-md-palette-primary="indigo"] .md-nav--secondary { + border-left: 0.4rem solid #3f51b5; } + +[data-md-palette-primary="blue"] .md-typeset a { + color: #2196f3; } + +[data-md-palette-primary="blue"] .md-header { + background-color: #2196f3; } + +[data-md-palette-primary="blue"] .md-nav--secondary { + border-left: 0.4rem solid #2196f3; } + +[data-md-palette-primary="light-blue"] .md-typeset a { + color: #03a9f4; } + +[data-md-palette-primary="light-blue"] .md-header { + background-color: #03a9f4; } + +[data-md-palette-primary="light-blue"] .md-nav--secondary { + border-left: 0.4rem solid #03a9f4; } + +[data-md-palette-primary="cyan"] .md-typeset a { + color: #00bcd4; } + +[data-md-palette-primary="cyan"] .md-header { + background-color: #00bcd4; } + +[data-md-palette-primary="cyan"] .md-nav--secondary { + border-left: 0.4rem solid #00bcd4; } + +[data-md-palette-primary="teal"] .md-typeset a { + color: #009688; } + +[data-md-palette-primary="teal"] .md-header { + background-color: #009688; } + +[data-md-palette-primary="teal"] .md-nav--secondary { + border-left: 0.4rem solid #009688; } + +[data-md-palette-primary="green"] .md-typeset a { + color: #4caf50; } + +[data-md-palette-primary="green"] .md-header { + background-color: #4caf50; } + +[data-md-palette-primary="green"] .md-nav--secondary { + border-left: 0.4rem solid #4caf50; } + +[data-md-palette-primary="light-green"] .md-typeset a { + color: #7cb342; } + +[data-md-palette-primary="light-green"] .md-header { + background-color: #7cb342; } + +[data-md-palette-primary="light-green"] .md-nav--secondary { + border-left: 0.4rem solid #7cb342; } + +[data-md-palette-primary="lime"] .md-typeset a { + color: #c0ca33; } + +[data-md-palette-primary="lime"] .md-header { + background-color: #c0ca33; } + +[data-md-palette-primary="lime"] .md-nav--secondary { + border-left: 0.4rem solid #c0ca33; } + +[data-md-palette-primary="yellow"] .md-typeset a { + color: #f9a825; } + +[data-md-palette-primary="yellow"] .md-header { + background-color: #f9a825; } + +[data-md-palette-primary="yellow"] .md-nav--secondary { + border-left: 0.4rem solid #f9a825; } + +[data-md-palette-primary="amber"] .md-typeset a { + color: #ffb300; } + +[data-md-palette-primary="amber"] .md-header { + background-color: #ffb300; } + +[data-md-palette-primary="amber"] .md-nav--secondary { + border-left: 0.4rem solid #ffb300; } + +[data-md-palette-primary="orange"] .md-typeset a { + color: #fb8c00; } + +[data-md-palette-primary="orange"] .md-header { + background-color: #fb8c00; } + +[data-md-palette-primary="orange"] .md-nav--secondary { + border-left: 0.4rem solid #fb8c00; } + +[data-md-palette-primary="deep-orange"] .md-typeset a { + color: #ff7043; } + +[data-md-palette-primary="deep-orange"] .md-header { + background-color: #ff7043; } + +[data-md-palette-primary="deep-orange"] .md-nav--secondary { + border-left: 0.4rem solid #ff7043; } + +[data-md-palette-primary="brown"] .md-typeset a { + color: #795548; } + +[data-md-palette-primary="brown"] .md-header { + background-color: #795548; } + +[data-md-palette-primary="brown"] .md-nav--secondary { + border-left: 0.4rem solid #795548; } + +[data-md-palette-primary="grey"] .md-typeset a { + color: #757575; } + +[data-md-palette-primary="grey"] .md-header { + background-color: #757575; } + +[data-md-palette-primary="grey"] .md-nav--secondary { + border-left: 0.4rem solid #757575; } + +[data-md-palette-primary="blue-grey"] .md-typeset a { + color: #546e7a; } + +[data-md-palette-primary="blue-grey"] .md-header { + background-color: #546e7a; } + +[data-md-palette-primary="blue-grey"] .md-nav--secondary { + border-left: 0.4rem solid #546e7a; } + +[data-md-palette-accent="red"] .md-typeset a:hover, +[data-md-palette-accent="red"] .md-typeset a:active { + color: #ff1744; } + +[data-md-palette-accent="red"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="red"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #ff1744; } + +[data-md-palette-accent="red"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="red"] .md-typeset .footnote li:target .footnote-backref { + color: #ff1744; } + +[data-md-palette-accent="red"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="red"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="red"] .md-typeset [id] .headerlink:focus { + color: #ff1744; } + +[data-md-palette-accent="red"] .md-nav__link:hover, +[data-md-palette-accent="red"] .md-nav__link:active, +[data-md-palette-accent="red"] .md-nav__link--active { + color: #ff1744; } + +[data-md-palette-accent="red"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #ff1744; } + +[data-md-palette-accent="red"] .md-search-result__link:hover { + background-color: rgba(255, 23, 68, 0.1); } + +[data-md-palette-accent="red"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #ff1744; } + +[data-md-palette-accent="pink"] .md-typeset a:hover, +[data-md-palette-accent="pink"] .md-typeset a:active { + color: #f50057; } + +[data-md-palette-accent="pink"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="pink"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #f50057; } + +[data-md-palette-accent="pink"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="pink"] .md-typeset .footnote li:target .footnote-backref { + color: #f50057; } + +[data-md-palette-accent="pink"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="pink"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="pink"] .md-typeset [id] .headerlink:focus { + color: #f50057; } + +[data-md-palette-accent="pink"] .md-nav__link:hover, +[data-md-palette-accent="pink"] .md-nav__link:active, +[data-md-palette-accent="pink"] .md-nav__link--active { + color: #f50057; } + +[data-md-palette-accent="pink"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #f50057; } + +[data-md-palette-accent="pink"] .md-search-result__link:hover { + background-color: rgba(245, 0, 87, 0.1); } + +[data-md-palette-accent="pink"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #f50057; } + +[data-md-palette-accent="purple"] .md-typeset a:hover, +[data-md-palette-accent="purple"] .md-typeset a:active { + color: #e040fb; } + +[data-md-palette-accent="purple"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="purple"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #e040fb; } + +[data-md-palette-accent="purple"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="purple"] .md-typeset .footnote li:target .footnote-backref { + color: #e040fb; } + +[data-md-palette-accent="purple"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="purple"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="purple"] .md-typeset [id] .headerlink:focus { + color: #e040fb; } + +[data-md-palette-accent="purple"] .md-nav__link:hover, +[data-md-palette-accent="purple"] .md-nav__link:active, +[data-md-palette-accent="purple"] .md-nav__link--active { + color: #e040fb; } + +[data-md-palette-accent="purple"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #e040fb; } + +[data-md-palette-accent="purple"] .md-search-result__link:hover { + background-color: rgba(224, 64, 251, 0.1); } + +[data-md-palette-accent="purple"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #e040fb; } + +[data-md-palette-accent="deep-purple"] .md-typeset a:hover, +[data-md-palette-accent="deep-purple"] .md-typeset a:active { + color: #7c4dff; } + +[data-md-palette-accent="deep-purple"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="deep-purple"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #7c4dff; } + +[data-md-palette-accent="deep-purple"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="deep-purple"] .md-typeset .footnote li:target .footnote-backref { + color: #7c4dff; } + +[data-md-palette-accent="deep-purple"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="deep-purple"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="deep-purple"] .md-typeset [id] .headerlink:focus { + color: #7c4dff; } + +[data-md-palette-accent="deep-purple"] .md-nav__link:hover, +[data-md-palette-accent="deep-purple"] .md-nav__link:active, +[data-md-palette-accent="deep-purple"] .md-nav__link--active { + color: #7c4dff; } + +[data-md-palette-accent="deep-purple"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #7c4dff; } + +[data-md-palette-accent="deep-purple"] .md-search-result__link:hover { + background-color: rgba(124, 77, 255, 0.1); } + +[data-md-palette-accent="deep-purple"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #7c4dff; } + +[data-md-palette-accent="indigo"] .md-typeset a:hover, +[data-md-palette-accent="indigo"] .md-typeset a:active { + color: #536dfe; } + +[data-md-palette-accent="indigo"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="indigo"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #536dfe; } + +[data-md-palette-accent="indigo"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="indigo"] .md-typeset .footnote li:target .footnote-backref { + color: #536dfe; } + +[data-md-palette-accent="indigo"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="indigo"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="indigo"] .md-typeset [id] .headerlink:focus { + color: #536dfe; } + +[data-md-palette-accent="indigo"] .md-nav__link:hover, +[data-md-palette-accent="indigo"] .md-nav__link:active, +[data-md-palette-accent="indigo"] .md-nav__link--active { + color: #536dfe; } + +[data-md-palette-accent="indigo"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #536dfe; } + +[data-md-palette-accent="indigo"] .md-search-result__link:hover { + background-color: rgba(83, 109, 254, 0.1); } + +[data-md-palette-accent="indigo"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #536dfe; } + +[data-md-palette-accent="blue"] .md-typeset a:hover, +[data-md-palette-accent="blue"] .md-typeset a:active { + color: #448aff; } + +[data-md-palette-accent="blue"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="blue"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #448aff; } + +[data-md-palette-accent="blue"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="blue"] .md-typeset .footnote li:target .footnote-backref { + color: #448aff; } + +[data-md-palette-accent="blue"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="blue"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="blue"] .md-typeset [id] .headerlink:focus { + color: #448aff; } + +[data-md-palette-accent="blue"] .md-nav__link:hover, +[data-md-palette-accent="blue"] .md-nav__link:active, +[data-md-palette-accent="blue"] .md-nav__link--active { + color: #448aff; } + +[data-md-palette-accent="blue"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #448aff; } + +[data-md-palette-accent="blue"] .md-search-result__link:hover { + background-color: rgba(68, 138, 255, 0.1); } + +[data-md-palette-accent="blue"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #448aff; } + +[data-md-palette-accent="light-blue"] .md-typeset a:hover, +[data-md-palette-accent="light-blue"] .md-typeset a:active { + color: #0091ea; } + +[data-md-palette-accent="light-blue"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="light-blue"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #0091ea; } + +[data-md-palette-accent="light-blue"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="light-blue"] .md-typeset .footnote li:target .footnote-backref { + color: #0091ea; } + +[data-md-palette-accent="light-blue"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="light-blue"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="light-blue"] .md-typeset [id] .headerlink:focus { + color: #0091ea; } + +[data-md-palette-accent="light-blue"] .md-nav__link:hover, +[data-md-palette-accent="light-blue"] .md-nav__link:active, +[data-md-palette-accent="light-blue"] .md-nav__link--active { + color: #0091ea; } + +[data-md-palette-accent="light-blue"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #0091ea; } + +[data-md-palette-accent="light-blue"] .md-search-result__link:hover { + background-color: rgba(0, 145, 234, 0.1); } + +[data-md-palette-accent="light-blue"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #0091ea; } + +[data-md-palette-accent="cyan"] .md-typeset a:hover, +[data-md-palette-accent="cyan"] .md-typeset a:active { + color: #00b8d4; } + +[data-md-palette-accent="cyan"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="cyan"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #00b8d4; } + +[data-md-palette-accent="cyan"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="cyan"] .md-typeset .footnote li:target .footnote-backref { + color: #00b8d4; } + +[data-md-palette-accent="cyan"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="cyan"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="cyan"] .md-typeset [id] .headerlink:focus { + color: #00b8d4; } + +[data-md-palette-accent="cyan"] .md-nav__link:hover, +[data-md-palette-accent="cyan"] .md-nav__link:active, +[data-md-palette-accent="cyan"] .md-nav__link--active { + color: #00b8d4; } + +[data-md-palette-accent="cyan"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #00b8d4; } + +[data-md-palette-accent="cyan"] .md-search-result__link:hover { + background-color: rgba(0, 184, 212, 0.1); } + +[data-md-palette-accent="cyan"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #00b8d4; } + +[data-md-palette-accent="teal"] .md-typeset a:hover, +[data-md-palette-accent="teal"] .md-typeset a:active { + color: #00bfa5; } + +[data-md-palette-accent="teal"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="teal"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #00bfa5; } + +[data-md-palette-accent="teal"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="teal"] .md-typeset .footnote li:target .footnote-backref { + color: #00bfa5; } + +[data-md-palette-accent="teal"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="teal"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="teal"] .md-typeset [id] .headerlink:focus { + color: #00bfa5; } + +[data-md-palette-accent="teal"] .md-nav__link:hover, +[data-md-palette-accent="teal"] .md-nav__link:active, +[data-md-palette-accent="teal"] .md-nav__link--active { + color: #00bfa5; } + +[data-md-palette-accent="teal"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #00bfa5; } + +[data-md-palette-accent="teal"] .md-search-result__link:hover { + background-color: rgba(0, 191, 165, 0.1); } + +[data-md-palette-accent="teal"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #00bfa5; } + +[data-md-palette-accent="green"] .md-typeset a:hover, +[data-md-palette-accent="green"] .md-typeset a:active { + color: #00c853; } + +[data-md-palette-accent="green"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="green"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #00c853; } + +[data-md-palette-accent="green"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="green"] .md-typeset .footnote li:target .footnote-backref { + color: #00c853; } + +[data-md-palette-accent="green"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="green"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="green"] .md-typeset [id] .headerlink:focus { + color: #00c853; } + +[data-md-palette-accent="green"] .md-nav__link:hover, +[data-md-palette-accent="green"] .md-nav__link:active, +[data-md-palette-accent="green"] .md-nav__link--active { + color: #00c853; } + +[data-md-palette-accent="green"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #00c853; } + +[data-md-palette-accent="green"] .md-search-result__link:hover { + background-color: rgba(0, 200, 83, 0.1); } + +[data-md-palette-accent="green"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #00c853; } + +[data-md-palette-accent="light-green"] .md-typeset a:hover, +[data-md-palette-accent="light-green"] .md-typeset a:active { + color: #64dd17; } + +[data-md-palette-accent="light-green"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="light-green"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #64dd17; } + +[data-md-palette-accent="light-green"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="light-green"] .md-typeset .footnote li:target .footnote-backref { + color: #64dd17; } + +[data-md-palette-accent="light-green"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="light-green"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="light-green"] .md-typeset [id] .headerlink:focus { + color: #64dd17; } + +[data-md-palette-accent="light-green"] .md-nav__link:hover, +[data-md-palette-accent="light-green"] .md-nav__link:active, +[data-md-palette-accent="light-green"] .md-nav__link--active { + color: #64dd17; } + +[data-md-palette-accent="light-green"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #64dd17; } + +[data-md-palette-accent="light-green"] .md-search-result__link:hover { + background-color: rgba(100, 221, 23, 0.1); } + +[data-md-palette-accent="light-green"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #64dd17; } + +[data-md-palette-accent="lime"] .md-typeset a:hover, +[data-md-palette-accent="lime"] .md-typeset a:active { + color: #aeea00; } + +[data-md-palette-accent="lime"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="lime"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #aeea00; } + +[data-md-palette-accent="lime"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="lime"] .md-typeset .footnote li:target .footnote-backref { + color: #aeea00; } + +[data-md-palette-accent="lime"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="lime"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="lime"] .md-typeset [id] .headerlink:focus { + color: #aeea00; } + +[data-md-palette-accent="lime"] .md-nav__link:hover, +[data-md-palette-accent="lime"] .md-nav__link:active, +[data-md-palette-accent="lime"] .md-nav__link--active { + color: #aeea00; } + +[data-md-palette-accent="lime"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #aeea00; } + +[data-md-palette-accent="lime"] .md-search-result__link:hover { + background-color: rgba(174, 234, 0, 0.1); } + +[data-md-palette-accent="lime"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #aeea00; } + +[data-md-palette-accent="yellow"] .md-typeset a:hover, +[data-md-palette-accent="yellow"] .md-typeset a:active { + color: #ffd600; } + +[data-md-palette-accent="yellow"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="yellow"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #ffd600; } + +[data-md-palette-accent="yellow"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="yellow"] .md-typeset .footnote li:target .footnote-backref { + color: #ffd600; } + +[data-md-palette-accent="yellow"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="yellow"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="yellow"] .md-typeset [id] .headerlink:focus { + color: #ffd600; } + +[data-md-palette-accent="yellow"] .md-nav__link:hover, +[data-md-palette-accent="yellow"] .md-nav__link:active, +[data-md-palette-accent="yellow"] .md-nav__link--active { + color: #ffd600; } + +[data-md-palette-accent="yellow"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #ffd600; } + +[data-md-palette-accent="yellow"] .md-search-result__link:hover { + background-color: rgba(255, 214, 0, 0.1); } + +[data-md-palette-accent="yellow"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #ffd600; } + +[data-md-palette-accent="amber"] .md-typeset a:hover, +[data-md-palette-accent="amber"] .md-typeset a:active { + color: #ffab00; } + +[data-md-palette-accent="amber"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="amber"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #ffab00; } + +[data-md-palette-accent="amber"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="amber"] .md-typeset .footnote li:target .footnote-backref { + color: #ffab00; } + +[data-md-palette-accent="amber"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="amber"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="amber"] .md-typeset [id] .headerlink:focus { + color: #ffab00; } + +[data-md-palette-accent="amber"] .md-nav__link:hover, +[data-md-palette-accent="amber"] .md-nav__link:active, +[data-md-palette-accent="amber"] .md-nav__link--active { + color: #ffab00; } + +[data-md-palette-accent="amber"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #ffab00; } + +[data-md-palette-accent="amber"] .md-search-result__link:hover { + background-color: rgba(255, 171, 0, 0.1); } + +[data-md-palette-accent="amber"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #ffab00; } + +[data-md-palette-accent="orange"] .md-typeset a:hover, +[data-md-palette-accent="orange"] .md-typeset a:active { + color: #ff9100; } + +[data-md-palette-accent="orange"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="orange"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #ff9100; } + +[data-md-palette-accent="orange"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="orange"] .md-typeset .footnote li:target .footnote-backref { + color: #ff9100; } + +[data-md-palette-accent="orange"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="orange"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="orange"] .md-typeset [id] .headerlink:focus { + color: #ff9100; } + +[data-md-palette-accent="orange"] .md-nav__link:hover, +[data-md-palette-accent="orange"] .md-nav__link:active, +[data-md-palette-accent="orange"] .md-nav__link--active { + color: #ff9100; } + +[data-md-palette-accent="orange"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #ff9100; } + +[data-md-palette-accent="orange"] .md-search-result__link:hover { + background-color: rgba(255, 145, 0, 0.1); } + +[data-md-palette-accent="orange"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #ff9100; } + +[data-md-palette-accent="deep-orange"] .md-typeset a:hover, +[data-md-palette-accent="deep-orange"] .md-typeset a:active { + color: #ff6e40; } + +[data-md-palette-accent="deep-orange"] .md-typeset pre::-webkit-scrollbar-thumb:hover, +[data-md-palette-accent="deep-orange"] .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #ff6e40; } + +[data-md-palette-accent="deep-orange"] .md-typeset .footnote li:hover .footnote-backref:hover, +[data-md-palette-accent="deep-orange"] .md-typeset .footnote li:target .footnote-backref { + color: #ff6e40; } + +[data-md-palette-accent="deep-orange"] .md-typeset [id]:hover .headerlink:hover, +[data-md-palette-accent="deep-orange"] .md-typeset [id]:target .headerlink, +[data-md-palette-accent="deep-orange"] .md-typeset [id] .headerlink:focus { + color: #ff6e40; } + +[data-md-palette-accent="deep-orange"] .md-nav__link:hover, +[data-md-palette-accent="deep-orange"] .md-nav__link:active, +[data-md-palette-accent="deep-orange"] .md-nav__link--active { + color: #ff6e40; } + +[data-md-palette-accent="deep-orange"] .md-search-result__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #ff6e40; } + +[data-md-palette-accent="deep-orange"] .md-search-result__link:hover { + background-color: rgba(255, 110, 64, 0.1); } + +[data-md-palette-accent="deep-orange"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: #ff6e40; } + +@media only screen and (max-width: 59.9375em) { + + html [data-md-palette-accent="red"] .md-nav__link[for="toc"]::after { + color: #ff1744; } + + html [data-md-palette-accent="pink"] .md-nav__link[for="toc"]::after { + color: #f50057; } + + html [data-md-palette-accent="purple"] .md-nav__link[for="toc"]::after { + color: #e040fb; } + + html [data-md-palette-accent="deep-purple"] .md-nav__link[for="toc"]::after { + color: #7c4dff; } + + html [data-md-palette-accent="indigo"] .md-nav__link[for="toc"]::after { + color: #536dfe; } + + html [data-md-palette-accent="blue"] .md-nav__link[for="toc"]::after { + color: #448aff; } + + html [data-md-palette-accent="light-blue"] .md-nav__link[for="toc"]::after { + color: #0091ea; } + + html [data-md-palette-accent="cyan"] .md-nav__link[for="toc"]::after { + color: #00b8d4; } + + html [data-md-palette-accent="teal"] .md-nav__link[for="toc"]::after { + color: #00bfa5; } + + html [data-md-palette-accent="green"] .md-nav__link[for="toc"]::after { + color: #00c853; } + + html [data-md-palette-accent="light-green"] .md-nav__link[for="toc"]::after { + color: #64dd17; } + + html [data-md-palette-accent="lime"] .md-nav__link[for="toc"]::after { + color: #aeea00; } + + html [data-md-palette-accent="yellow"] .md-nav__link[for="toc"]::after { + color: #ffd600; } + + html [data-md-palette-accent="amber"] .md-nav__link[for="toc"]::after { + color: #ffab00; } + + html [data-md-palette-accent="orange"] .md-nav__link[for="toc"]::after { + color: #ff9100; } + + html [data-md-palette-accent="deep-orange"] .md-nav__link[for="toc"]::after { + color: #ff6e40; } } diff --git a/material/base.html b/material/base.html index 7b09930ee..1e01a5dec 100644 --- a/material/base.html +++ b/material/base.html @@ -37,13 +37,23 @@ + {% if config.extra.palette %} + + {% endif %} {% for path in extra_css %} {% endfor %} {% endblock %} - {%- block extrahead -%}{% endblock %} + {% block extrahead %}{% endblock %} - + {% set palette = config.extra.get("palette", {}) %} + {% set primary = palette.primary | replace(" ", "-") | lower %} + {% set accent = palette.accent | replace(" ", "-") | lower %} + {% if primary or accent %} + + {% else %} + + {% endif %} @@ -131,17 +141,39 @@ {% block analytics %} {% if config.google_analytics %} {% endif %} {% endblock %} - + diff --git a/mkdocs.yml b/mkdocs.yml index d669b57bb..16d999c54 100755 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -45,6 +45,9 @@ extra: author: github: squidfunk twitter: squidfunk + palette: + primary: indigo + accent: indigo # Extensions markdown_extensions: diff --git a/src/assets/stylesheets/application.palettes.scss b/src/assets/stylesheets/application.palettes.scss new file mode 100644 index 000000000..a227ed57c --- /dev/null +++ b/src/assets/stylesheets/application.palettes.scss @@ -0,0 +1,171 @@ +//// +/// Copyright (c) 2016 Martin Donath +/// +/// Permission is hereby granted, free of charge, to any person obtaining a +/// copy of this software and associated documentation files (the "Software"), +/// to deal in the Software without restriction, including without limitation +/// the rights to use, copy, modify, merge, publish, distribute, sublicense, +/// and/or sell copies of the Software, and to permit persons to whom the +/// Software is furnished to do so, subject to the following conditions: +/// +/// The above copyright notice and this permission notice shall be included in +/// all copies or substantial portions of the Software. +/// +/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL +/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER +/// DEALINGS +//// + +// ---------------------------------------------------------------------------- +// Dependencies +// ---------------------------------------------------------------------------- + +@import "modular-scale"; +@import "material-color"; +@import "material-shadows"; + +// ---------------------------------------------------------------------------- +// Local imports +// ---------------------------------------------------------------------------- + +@import "helpers/break"; +@import "helpers/px2em"; + +@import "config"; + +// ---------------------------------------------------------------------------- +// Rules +// ---------------------------------------------------------------------------- + +// Build primary palette +@each $name, $color in ( + "red": $clr-red-400, + "pink": $clr-pink-500, + "purple": $clr-purple-400, + "deep-purple": $clr-deep-purple-400, + "indigo": $clr-indigo-500, + "blue": $clr-blue-500, + "light-blue": $clr-light-blue-500, + "cyan": $clr-cyan-500, + "teal": $clr-teal-500, + "green": $clr-green-500, + "light-green": $clr-light-green-600, + "lime": $clr-lime-600, + "yellow": $clr-yellow-800, + "amber": $clr-amber-600, + "orange": $clr-orange-600, + "deep-orange": $clr-deep-orange-400, + "brown": $clr-brown-500, + "grey": $clr-grey-600, + "blue-grey": $clr-blue-grey-600 +) { + [data-md-palette-primary="#{$name}"] { + + // Links in typesetted content + .md-typeset a { + color: $color; + } + + // Application header (stays always on top) + .md-header { + background-color: $color; + } + + // Table of contents + .md-nav--secondary { + border-left: 0.4rem solid $color; + } + } +} + +// Build accent palette +@each $name, $color in ( + "red": $clr-red-a400, + "pink": $clr-pink-a400, + "purple": $clr-purple-a200, + "deep-purple": $clr-deep-purple-a200, + "indigo": $clr-indigo-a200, + "blue": $clr-blue-a200, + "light-blue": $clr-light-blue-a700, + "cyan": $clr-cyan-a700, + "teal": $clr-teal-a700, + "green": $clr-green-a700, + "light-green": $clr-light-green-a700, + "lime": $clr-lime-a700, + "yellow": $clr-yellow-a700, + "amber": $clr-amber-a700, + "orange": $clr-orange-a400, + "deep-orange": $clr-deep-orange-a200 +) { + [data-md-palette-accent="#{$name}"] { + + // Typesetted content + .md-typeset { + + // Hovered and active links + a:hover, + a:active { + color: $color; + } + + // Hovered scrollbar thumb + pre::-webkit-scrollbar-thumb:hover, + .codehilite::-webkit-scrollbar-thumb:hover { + background-color: $color; + } + + // Active or targeted back reference + .footnote li:hover .footnote-backref:hover, + .footnote li:target .footnote-backref { + color: $color; + } + + // Active or targeted permalink + [id]:hover .headerlink:hover, + [id]:target .headerlink, + [id] .headerlink:focus { + color: $color; + } + } + + // Current or hovered link + .md-nav__link:hover, + .md-nav__link:active, + .md-nav__link--active { + color: $color; + } + + // [tablet portrait -]: Show table of contents in drawer + @include break-to-device(tablet portrait) { + + // Show link to table of contents - higher specificity is necessary to + // display the table of contents inside the drawer + html & .md-nav__link[for="toc"]::after { + color: $color; + } + } + + // Search result + .md-search-result { + + // Hovered scrollbar thumb + &__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: $color; + } + + // Hovered link + &__link:hover { + background-color: transparentize($color, 0.9); + } + } + + // Wrapper for scrolling on overflow + .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover { + background-color: $color; + } + } +} diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss index ba5ad1595..4e4712d44 100644 --- a/src/assets/stylesheets/base/_typeset.scss +++ b/src/assets/stylesheets/base/_typeset.scss @@ -149,7 +149,7 @@ kbd { transition: color 0.125s; } - // Active links + // Hovered and active links &:hover, &:active { color: $md-color-accent; @@ -169,7 +169,7 @@ kbd { // Code blocks code, pre { - background: $md-code-background; + background-color: $md-code-background; color: $md-code-color; font-size: 85%; } @@ -202,7 +202,7 @@ kbd { h5 code, h6 code { margin: 0; - background: transparent; + background-color: transparent; box-shadow: none; } @@ -211,7 +211,7 @@ kbd { margin: inherit; padding: inherit; border-radius: none; - background: inherit; + background-color: inherit; color: inherit; box-shadow: none; } @@ -251,7 +251,7 @@ kbd { // Reset, if code is inside pre > code { margin: 0; - background: none; + background-color: none; font-size: inherit; box-shadow: none; box-decoration-break: none; @@ -284,7 +284,7 @@ kbd { margin: 0 0.25em; padding: 0.0625em 0; border-radius: 0.2rem; - background: transparentize($clr-yellow-500, 0.5); + background-color: transparentize($clr-yellow-500, 0.5); box-shadow: 0.25em 0 0 transparentize($clr-yellow-500, 0.5), -0.25em 0 0 transparentize($clr-yellow-500, 0.5); diff --git a/src/assets/stylesheets/extensions/_admonition.scss b/src/assets/stylesheets/extensions/_admonition.scss index 569628414..98030e084 100644 --- a/src/assets/stylesheets/extensions/_admonition.scss +++ b/src/assets/stylesheets/extensions/_admonition.scss @@ -31,7 +31,7 @@ padding: 0.8rem 1.2rem; border-left: 3.2rem solid transparentize($clr-blue-a200, 0.6); border-radius: 0.2rem; - background: transparentize($clr-blue-a200, 0.85); + background-color: transparentize($clr-blue-a200, 0.85); font-size: ms(-1); // Icon @@ -73,7 +73,7 @@ &%#{nth($names, 1)}, &.#{nth($names, 1)} { border-color: transparentize($tint, 0.6); - background: transparentize($tint, 0.85); + background-color: transparentize($tint, 0.85); // Icon &::before { diff --git a/src/assets/stylesheets/extensions/_codehilite.scss b/src/assets/stylesheets/extensions/_codehilite.scss index d1b2d697d..a978ab4cc 100644 --- a/src/assets/stylesheets/extensions/_codehilite.scss +++ b/src/assets/stylesheets/extensions/_codehilite.scss @@ -196,7 +196,7 @@ $codehilite-whitespace: transparent; display: block; margin: 0 -1.2rem; padding: 0 1.2rem; - background: transparentize($clr-yellow-500, 0.5); + background-color: transparentize($clr-yellow-500, 0.5); // [mobile -]: Stretch to whole width @include break-to-device(mobile) { @@ -219,7 +219,7 @@ $codehilite-whitespace: transparent; margin: 1.0em 0; padding: 1.0rem 1.2rem 0.8rem; border-radius: 0.2rem; - background: $md-code-background; + background-color: $md-code-background; color: $md-code-color; line-height: 1.4; overflow: auto; @@ -248,7 +248,7 @@ $codehilite-whitespace: transparent; min-width: 100%; margin: 0; padding: 0; - background: transparent; + background-color: transparent; overflow: visible; vertical-align: top; } @@ -299,7 +299,7 @@ $codehilite-whitespace: transparent; // Disable pointer-events, so code can be easily copied without // accidentally also copying the line numbers .linenos { - background: $md-color-black--lightest; + background-color: $md-color-black--lightest; color: $md-color-black--lighter; user-select: none; @@ -307,7 +307,7 @@ $codehilite-whitespace: transparent; pre { margin: 0; padding: 0; - background: transparent; + background-color: transparent; color: inherit; text-align: right; } diff --git a/src/assets/stylesheets/extensions/pymdown/_critic.scss b/src/assets/stylesheets/extensions/pymdown/_critic.scss index 7fe29acd6..b70787d5f 100644 --- a/src/assets/stylesheets/extensions/pymdown/_critic.scss +++ b/src/assets/stylesheets/extensions/pymdown/_critic.scss @@ -32,7 +32,7 @@ margin: 0 0.25em; padding: 0.0625em 0; border-radius: 0.2rem; - background: $md-code-background; // TODO: rename, centralize somehow + background-color: $md-code-background; // TODO: rename, centralize somehow color: $md-code-color; box-shadow: 0.25em 0 0 $md-code-background, diff --git a/src/assets/stylesheets/layout/_base.scss b/src/assets/stylesheets/layout/_base.scss index f6704536d..3f7ab8d4f 100644 --- a/src/assets/stylesheets/layout/_base.scss +++ b/src/assets/stylesheets/layout/_base.scss @@ -109,7 +109,7 @@ hr { width 0s 0.25s, height 0s 0.25s, opacity 0.25s; - background: $md-color-black--light; + background-color: $md-color-black--light; opacity: 0; z-index: 2; diff --git a/src/assets/stylesheets/layout/_footer.scss b/src/assets/stylesheets/layout/_footer.scss index a7afa2b71..0a40b4b54 100644 --- a/src/assets/stylesheets/layout/_footer.scss +++ b/src/assets/stylesheets/layout/_footer.scss @@ -37,7 +37,7 @@ // Footer container &__inner { - background: $md-color-black; + background-color: $md-color-black; color: $md-color-white; } } diff --git a/src/assets/stylesheets/layout/_header.scss b/src/assets/stylesheets/layout/_header.scss index be53874e7..32f042522 100644 --- a/src/assets/stylesheets/layout/_header.scss +++ b/src/assets/stylesheets/layout/_header.scss @@ -33,7 +33,8 @@ right: 0; left: 0; height: 5.6rem; - background: $md-color-primary; + transition: background-color 0.25s; + background-color: $md-color-primary; color: $md-color-white; z-index: 1; diff --git a/src/assets/stylesheets/layout/_nav.scss b/src/assets/stylesheets/layout/_nav.scss index 346dd2977..224649a4a 100644 --- a/src/assets/stylesheets/layout/_nav.scss +++ b/src/assets/stylesheets/layout/_nav.scss @@ -31,6 +31,7 @@ // Table of contents &--secondary { + transition: border-left 0.25s; border-left: 0.4rem solid $md-color-primary; } @@ -148,14 +149,14 @@ // Adjust styles for primary navigation &--primary { - background: $md-color-white; + background-color: $md-color-white; // Move subsequent navigations off .md-nav__toggle ~ .md-nav { @include z-depth(4); left: 0.4rem; - background: $md-color-white; + background-color: $md-color-white; } // List title - higher specificity is necessary to ensure that the title @@ -163,7 +164,7 @@ html & .md-nav__title { position: relative; padding: 0.4rem 1.6rem 0.4rem 5.6rem; - background: $md-color-black--lightest; + background-color: $md-color-black--lightest; color: $md-color-black--light; font-size: 1.8rem; font-weight: 400; @@ -222,7 +223,7 @@ // Color of icon should inherit link color on hover &:hover::after { - color: $md-color-accent; + color: inherit; } } @@ -324,7 +325,7 @@ &__source { display: block; padding: 0.4rem; - background: $md-color-black; + background-color: $md-color-black; color: $md-color-white; } } diff --git a/src/assets/stylesheets/layout/_search.scss b/src/assets/stylesheets/layout/_search.scss index 434a940f1..d9601f941 100644 --- a/src/assets/stylesheets/layout/_search.scss +++ b/src/assets/stylesheets/layout/_search.scss @@ -56,7 +56,7 @@ transform 0.3s 0.1s, opacity 0.2s 0.2s; border-radius: 2.0rem; - background: $md-color-white; + background-color: $md-color-white; opacity: 0; overflow: hidden; z-index: 1; @@ -187,7 +187,7 @@ background-color 0.25s, color 0.25s; border-radius: 0.2rem; - background: $md-color-black--lighter; + background-color: $md-color-black--lighter; color: $md-color-white; font-size: ms(0); @@ -200,13 +200,13 @@ // Hovered search field &:hover { - background: $md-color-white--lightest; + background-color: $md-color-white--lightest; } // Set light background on active search field [data-md-toggle="search"]:checked ~ .md-header & { border-radius: 0.2rem 0.2rem 0 0; - background: $md-color-white; + background-color: $md-color-white; color: $md-color-black; text-overflow: none; @@ -343,7 +343,7 @@ // Search metadata &__meta { padding: 0 1.6rem; - background: $md-color-black--lightest; + background-color: $md-color-black--lightest; color: $md-color-black--light; font-size: ms(-1); line-height: 4.0rem; @@ -376,7 +376,7 @@ // Hovered link &:hover { - background: transparentize($md-color-accent, 0.9); + background-color: transparentize($md-color-accent, 0.9); } // [tablet landscape +]: Increase left indent @@ -400,6 +400,7 @@ line-height: 1.4; } + // Search result teaser &__teaser { margin: 0.5em 0;; color: $md-color-black--light; diff --git a/src/assets/stylesheets/layout/_sidebar.scss b/src/assets/stylesheets/layout/_sidebar.scss index a71591a8e..d8af844a0 100644 --- a/src/assets/stylesheets/layout/_sidebar.scss +++ b/src/assets/stylesheets/layout/_sidebar.scss @@ -56,7 +56,7 @@ transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0), box-shadow 0.25s; - background: $md-color-white; + background-color: $md-color-white; z-index: 2; // Just hide drawer, if browser doesn't support 3D transforms diff --git a/src/base.html b/src/base.html index 2944d1c3b..4fbc4ab60 100644 --- a/src/base.html +++ b/src/base.html @@ -87,6 +87,12 @@ + + {% if config.extra.palette %} + + {% endif %} + {% for path in extra_css %} @@ -94,9 +100,19 @@ {% endblock %} - {%- block extrahead -%}{% endblock %} + {% block extrahead %}{% endblock %} - + + + {% set palette = config.extra.get("palette", {}) %} + {% set primary = palette.primary | replace(" ", "-") | lower %} + {% set accent = palette.accent | replace(" ", "-") | lower %} + {% if primary or accent %} + + {% else %} + + {% endif %} - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]|| - function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date(); - a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1; - a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script', - '//www.google-analytics.com/analytics.js','ga'); - ga('create', - '{{ config.google_analytics[0] }}', - '{{ config.google_analytics[1] }}'); - ga('send', 'pageview'); + (function(i,s,o,g,r,a,m){ + i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q|| + []).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g; + m.parentNode.insertBefore(a,m) + })(window, document, + "script", "https://www.google-analytics.com/analytics.js", "ga"); + + /* General initialization */ + ga("create", + "{{ config.google_analytics[0] }}", + "{{ config.google_analytics[1] }}"); + ga("set", "anonymizeIp", true); + ga("send", "pageview"); + + /* Track outbound links */ + var links = document.getElementsByTagName("a"); + Array.prototype.map.call(links, function(item) { + if (item.host != document.location.host) { + item.addEventListener("click", function() { + var action = item.getAttribute("data-action") || "follow"; + ga("send", "event", "outbound", action, item.href); + }); + } + }); + + /* Register handler to log search on blur */ + var query = document.forms.search.query; + query.addEventListener("blur", function() { + if (this.value) { + var path = document.location.pathname; + ga("send", "pageview", path + "?q=" + this.value); + } + }); {% endif %} {% endblock %}