Fixed footer styles and added color transitions

material/assets/manifest.json

@@ -5,8 +5,8 @@
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.809e24aa.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.f6ebf1dc.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.f6ebf1dc.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.7ee248fe.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.55fa3425.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.7ee248fe.min.css.map",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.55fa3425.min.css.map",
-  "assets/stylesheets/palette.css": "assets/stylesheets/palette.2d35e723.min.css",
+  "assets/stylesheets/palette.css": "assets/stylesheets/palette.bf23daf6.min.css",
-  "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.2d35e723.min.css.map"
+  "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.bf23daf6.min.css.map"
 }

material/base.html

@@ -41,9 +41,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.7ee248fe.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.55fa3425.min.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.2d35e723.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.bf23daf6.min.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}

mkdocs.yml

@@ -54,7 +54,7 @@ theme:
     - tabs
     #- instant
   palette:
-    scheme: dark
+    scheme: slate
     primary: indigo
     accent: indigo
   font:

src/assets/stylesheets/base/_colors.scss

@@ -49,12 +49,9 @@
   --md-accent-fg-color--transparent:   hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
   --md-accent-bg-color:                hsla(0, 0%, 100%, 1);
   --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7);
-}
-
-// ----------------------------------------------------------------------------
 
   // Light theme (default)
-body {
+  > * {
 
     // Code color shades
     --md-code-bg-color:                  hsla(0, 0%, 96%, 1);
@@ -64,7 +61,15 @@ body {
     --md-text-color:                     var(--md-default-fg-color);
     --md-text-link-color:                var(--md-primary-fg-color);
 
-  // Admonition shades
+    // Admonition color shades
     --md-admonition-bg-color:            var(--md-default-bg-color);
     --md-admonition-fg-color:            var(--md-default-fg-color);
+
+    // Footer color shades
+    --md-footer-bg-color:                hsla(0, 0%, 0%, 0.87);
+    --md-footer-bg-color--dark:          hsla(0, 0%, 0%, 0.32);
+    --md-footer-fg-color:                hsla(0, 0%, 100%, 1);
+    --md-footer-fg-color--light:         hsla(0, 0%, 100%, 0.7);
+    --md-footer-fg-color--lighter:       hsla(0, 0%, 100%, 0.3);
+  }
 }

src/assets/stylesheets/base/_typeset.scss

@@ -36,6 +36,9 @@ input {
   color: var(--md-text-color);
   font-feature-settings: "kern", "liga";
   font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+  transition:
+    color            250ms,
+    background-color 250ms;
 }
 
 // Proportionally spaced fonts
@@ -45,6 +48,9 @@ kbd {
   color: var(--md-text-color);
   font-feature-settings: "kern";
   font-family: SFMono-Regular, Consolas, Menlo, monospace;
+  transition:
+    color            250ms,
+    background-color 250ms;
 }
 
 // ----------------------------------------------------------------------------
@@ -138,7 +144,7 @@ kbd {
     // Also enable color transition on pseudo elements
     &,
     &::before {
-      transition: color 125ms;
+      transition: color 250ms;
     }
 
     // Focused or hover links
@@ -292,6 +298,9 @@ kbd {
     padding-left: px2rem(12px);
     color: var(--md-default-fg-color--light);
     border-left: px2rem(4px) solid var(--md-default-fg-color--lighter);
+    transition:
+      color        250ms,
+      border-color 250ms;
 
     // Adjust for right-to-left languages
     [dir="rtl"] & {
@@ -437,7 +446,7 @@ kbd {
 
     // Table rows
     tr {
-      transition: background-color 125ms;
+      transition: background-color 250ms;
 
       // Add background on hover
       &:hover {

src/assets/stylesheets/extensions/_admonition.scss

@@ -76,6 +76,10 @@ $admonitions: (
     box-shadow:
       0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
       0 0           px2rem(1px)  hsla(0, 0%, 0%, 0.1);
+    transition:
+      color            250ms,
+      background-color 250ms,
+      border-color     250ms;
 
     // Adjust for right-to-left languages
     [dir="rtl"] & {

src/assets/stylesheets/extensions/_footnotes.scss

@@ -77,7 +77,7 @@
 
     // Footnote
     li {
-      transition: color 125ms;
+      transition: color 250ms;
 
       // Darken color for targeted footnote
       &:target {

src/assets/stylesheets/extensions/pymdown/_tabbed.scss

@@ -88,7 +88,7 @@
       font-size: ms(-1);
       border-bottom: px2rem(2px) solid transparent;
       cursor: pointer;
-      transition: color 125ms;
+      transition: color 250ms;
 
       // Hovered tab label
       html &:hover {

src/assets/stylesheets/layout/_button.scss

@@ -36,9 +36,9 @@
     border: px2rem(2px) solid currentColor;
     border-radius: px2rem(2px);
     transition:
-      color            125ms,
+      color            250ms,
-      background-color 125ms,
+      background-color 250ms,
-      border-color     125ms;
+      border-color     250ms;
 
     // Primary button
     &--primary {

src/assets/stylesheets/layout/_clipboard.scss

@@ -35,7 +35,7 @@
   color: var(--md-default-fg-color--lightest);
   border-radius: px2rem(2px);
   cursor: pointer;
-  transition: color 125ms;
+  transition: color 250ms;
 
   // Hide for print
   @media print {

src/assets/stylesheets/layout/_footer.scss

@@ -26,8 +26,11 @@
 
 // Application footer
 .md-footer {
-  color: var(--md-default-bg-color);
+  color: var(--md-footer-fg-color);
-  background-color: var(--md-default-fg-color);
+  background-color: var(--md-footer-bg-color);
+  transition:
+    color            250ms,
+    background-color 250ms;
 
   // Hide for print
   @media print {
@@ -129,14 +132,14 @@
     left: 0;
     margin-top: px2rem(-20px);
     padding: 0 px2rem(20px);
-    color: var(--md-default-bg-color--light);
     font-size: ms(-1);
+    opacity: 0.7;
   }
 }
 
 // Non-navigational information
 .md-footer-meta {
-  background-color: var(--md-default-fg-color--lighter);
+  background-color: var(--md-footer-bg-color--dark);
 
   // Set spacing
   &__inner {
@@ -148,12 +151,12 @@
 
   // Use a decent color for non-hovered links and ensure specificity
   html &.md-typeset a {
-    color: var(--md-default-bg-color--light);
+    color: var(--md-footer-fg-color--light);
 
     // Focused or hovered link
     &:focus,
     &:hover {
-      color: var(--md-default-bg-color);
+      color: var(--md-footer-fg-color);
     }
   }
 }
@@ -163,7 +166,7 @@
   width: 100%;
   margin: auto px2rem(12px);
   padding: px2rem(8px) 0;
-  color: var(--md-default-bg-color--lighter);
+  color: var(--md-footer-fg-color--lighter);
   font-size: ms(-1);
 
   // [tablet portrait +]: Show next to social media links
@@ -173,7 +176,7 @@
 
   // Highlight copyright information
   &__highlight {
-    color: var(--md-default-bg-color--light);
+    color: var(--md-footer-fg-color--light);
   }
 }
 

src/assets/stylesheets/layout/_nav.scss

@@ -106,7 +106,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     cursor: pointer;
-    transition: color 125ms;
+    transition: color 250ms;
     scroll-snap-align: start;
 
     // Hide link to table of contents by default - this will only match the

src/assets/stylesheets/layout/_search.scss

@@ -226,7 +226,10 @@ $md-toggle__search--checked:
     z-index: 2;
     padding: 0 px2rem(44px) 0 px2rem(72px);
     text-overflow: ellipsis;
-    background-color: var(--primary-bg-color);
+    background-color: var(--md-default-bg-color);
+    transition:
+      color            250ms,
+      background-color 250ms;
 
     // Adjust for right-to-left languages
     [dir="rtl"] & {
@@ -265,9 +268,6 @@ $md-toggle__search--checked:
       font-size: ms(0);
       background-color: hsla(0, 0%, 0%, 0.26);
       border-radius: px2rem(2px);
-      transition:
-        color            250ms,
-        background-color 250ms;
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
@@ -445,6 +445,9 @@ $md-toggle__search--checked:
     background-color: var(--md-default-bg-color);
     // Hack: reduce jitter
     backface-visibility: hidden;
+    transition:
+      color            250ms,
+      background-color 250ms;
     scroll-snap-type: y mandatory;
     touch-action: pan-y;
 
@@ -495,6 +498,7 @@ $md-toggle__search--checked:
 .md-search-result {
   color: var(--md-default-fg-color);
   word-break: break-word;
+  transition: color 250ms;
 
   // Search metadata
   &__meta {

src/assets/stylesheets/palette/_scheme.scss

@@ -45,7 +45,11 @@
   --md-text-color:                     var(--md-default-fg-color--light);
   --md-text-link-color:                var(--md-primary-fg-color--light);
 
-  // Admonition shades
+  // Admonition color shades
   --md-admonition-bg-color:            hsla(0, 0%, 100%, 0.025);
   --md-admonition-fg-color:            var(--md-default-fg-color);
+
+  // Footer color shades
+  --md-footer-bg-color:                hsla(232, 15%, 12%, 0.87);
+  --md-footer-bg-color--dark:          hsla(232, 15%, 10%, 1);
 }