Integrated palettes from 0.2.x

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; }
 

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; } }

material/base.html

@@ -37,13 +37,23 @@
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
       <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
       <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.css">
+      {% if config.extra.palette %}
+        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.palettes.css">
+      {% endif %}
       {% for path in extra_css %}
         <link rel="stylesheet" href="{{ path }}">
       {% endfor %}
     {% endblock %}
-    {%- block extrahead -%}{% endblock %}
+    {% block extrahead %}{% endblock %}
   </head>
-  <body>
+  {% set palette = config.extra.get("palette", {}) %}
+  {% set primary = palette.primary | replace(" ", "-") | lower %}
+  {% set accent  = palette.accent  | replace(" ", "-") | lower %}
+  {% if primary or accent %}
+    <body data-md-palette-primary="{{ primary }}" data-md-palette-accent="{{ accent }}">
+  {% else %}
+    <body>
+  {% endif %}
     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="drawer">
     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="search">
     <label class="md-overlay" data-md-overlay for="drawer"></label>
@@ -131,17 +141,39 @@
     {% block analytics %}
       {% if config.google_analytics %}
       <script>
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||
+        (function(i,s,o,g,r,a,m){
-        function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
+          i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||
-        a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;
+          []).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-        a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script',
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
-        '//www.google-analytics.com/analytics.js','ga');
+          m.parentNode.insertBefore(a,m)
-        ga('create',
+        })(window, document,
-          '{{ config.google_analytics[0] }}',
+          "script", "https://www.google-analytics.com/analytics.js", "ga");
-          '{{ config.google_analytics[1] }}');
+        /* General initialization */
-        ga('send', 'pageview');
+        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);
+          }
+        });
       </script>
       {% endif %}
     {% endblock %}
   </body>
-</html>
+</body></html>

mkdocs.yml

@@ -45,6 +45,9 @@ extra:
   author:
     github: squidfunk
     twitter: squidfunk
+  palette:
+    primary: indigo
+    accent: indigo
 
 # Extensions
 markdown_extensions:

src/assets/stylesheets/application.palettes.scss

@@ -0,0 +1,171 @@
+////
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+///
+/// 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;
+    }
+  }
+}

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);

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 {

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;
       }

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,

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;
 

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;
   }
 }

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;
 

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;
     }
   }

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;

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

src/base.html

@@ -87,6 +87,12 @@
       <link rel="stylesheet" type="text/css"
           href="{{ base_url }}/assets/stylesheets/application.css" />
 
+      <!-- Extra palettes -->
+      {% if config.extra.palette %}
+        <link rel="stylesheet" type="text/css"
+            href="{{ base_url }}/assets/stylesheets/application.palettes.css" />
+      {% endif %}
+
       <!-- Custom stylesheets -->
       {% for path in extra_css %}
         <link rel="stylesheet" type="text/css" href="{{ path }}" />
@@ -94,9 +100,19 @@
     {% endblock %}
 
     <!-- Block: custom front matter -->
-    {%- block extrahead -%}{% endblock %}
+    {% block extrahead %}{% endblock %}
   </head>
-  <body>
+
+  <!-- Integrate palette colors, if defined -->
+  {% set palette = config.extra.get("palette", {}) %}
+  {% set primary = palette.primary | replace(" ", "-") | lower %}
+  {% set accent  = palette.accent  | replace(" ", "-") | lower %}
+  {% if primary or accent %}
+    <body data-md-palette-primary="{{ primary }}"
+        data-md-palette-accent="{{ accent }}">
+  {% else %}
+    <body>
+  {% endif %}
 
     <!-- State toggles -->
     <input class="md-toggle" data-md-toggle="drawer"
@@ -233,15 +249,40 @@
     {% block analytics %}
       {% if config.google_analytics %}
       <script>
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||
+        (function(i,s,o,g,r,a,m){
-        function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
+          i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||
-        a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;
+          []).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-        a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script',
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
-        '//www.google-analytics.com/analytics.js','ga');
+          m.parentNode.insertBefore(a,m)
-        ga('create',
+        })(window, document,
-          '{{ config.google_analytics[0] }}',
+          "script", "https://www.google-analytics.com/analytics.js", "ga");
-          '{{ config.google_analytics[1] }}');
+
-        ga('send', 'pageview');
+        /* 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);
+          }
+        });
       </script>
       {% endif %}
     {% endblock %}