Slight facelift

material/base.html

@@ -46,9 +46,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-6e761e1b0b.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-63c41eb78d.css">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-23f75ab9c7.palette.css">
+        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-34bd9d9ec8.palette.css">
       {% endif %}
     {% endblock %}
     {% block libs %}
@@ -162,7 +162,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-3545abc56a.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-23f8e48ddb.js"></script>
       {% if lang.t("search.language") != "en" %}
         {% set languages = lang.t("search.language").split(",") %}
         {% if languages | length and languages[0] != "" %}

material/partials/header.html

@@ -16,14 +16,7 @@
       <div class="md-flex__cell md-flex__cell--stretch">
         <span class="md-flex__ellipsis md-header-nav__title">
           {% block site_name %}
-            {% if page %}
+            {{ config.site_name }}
-              {% for parent in page.ancestors %}
-                <span class="md-header-nav__parent">
-                  {{ parent.title }}
-                </span>
-              {% endfor %}
-            {% endif %}
-            {{ page.title | default(config.site_name, true) }}
           {% endblock %}
         </span>
       </div>

material/partials/nav-item.html

@@ -9,7 +9,7 @@
     {% else %}
       <input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}">
     {% endif %}
-    <label class="md-nav__link" for="{{ path }}" tabindex="0">
+    <label class="md-nav__link" for="{{ path }}">
       {{ nav_item.title }}
     </label>
     <nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}">
@@ -38,7 +38,7 @@
         {{ nav_item.title }}
       </label>
     {% endif %}
-    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active" tabindex="0">
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
       {{ nav_item.title }}
     </a>
     {% if toc_ | first is defined %}
@@ -47,7 +47,7 @@
   </li>
 {% else %}
   <li class="{{ class }}">
-    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link" tabindex="0">
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link">
       {{ nav_item.title }}
     </a>
   </li>

src/assets/stylesheets/application.palette.scss

@@ -76,7 +76,7 @@ button[data-md-color-accent] {
   "green":       $clr-green-500,
   "light-green": $clr-light-green-600,
   "lime":        $clr-lime-600,
-  "yellow":      $clr-yellow-800,
+  "yellow":      $clr-yellow-600,
   "amber":       $clr-amber-600,
   "orange":      $clr-orange-600,
   "deep-orange": $clr-deep-orange-400,
@@ -146,17 +146,57 @@ button[data-md-color-accent] {
 
       // Tabs with outline
       .md-tabs {
-        background: mix($color, $md-color-black, 75%);
+        background: $color;
-
-        // Fade-out tabs background upon scrolling
-        &[data-md-state="hidden"] {
-          background: $color;
-        }
       }
     }
   }
 }
 
+// Overrides for white color
+[data-md-color-primary="white"] {
+
+  // Application header (stays always on top)
+  .md-header {
+    background-color: $md-color-white;
+    color: $md-color-black;
+  }
+
+  // Search input
+  .md-search__input {
+    background-color: $md-color-black--lightest;
+
+    // Search input placeholder
+    &::placeholder {
+      color: $md-color-black--light;
+    }
+  }
+
+  // [tablet portrait -]: Layered navigation
+  @include break-to-device(tablet portrait) {
+
+    // Repository containing source
+    .md-nav__source {
+      background-color: $md-color-black--lightest;
+      color: $md-color-black;
+    }
+  }
+
+  // [tablet -]: Layered navigation
+  @include break-to-device(tablet) {
+
+    // Site title in main navigation
+    html & .md-nav--primary .md-nav__title--site {
+      background-color: $md-color-white;
+      color: $md-color-black;
+    }
+  }
+
+  // Table of contents
+  .md-nav--secondary {
+    border-left: 0.4rem solid $md-color-black--light;
+  }
+}
+
 // Build accent colors
 @each $name, $color in (
   "red":         $clr-red-a400,

src/assets/stylesheets/extensions/_footnotes.scss

@@ -39,8 +39,8 @@
 
     // Targeted anchor
     &:target::before {
-      margin-top: -(5.6rem + 2.4rem + 1.8rem);
+      margin-top: -(4.8rem + 2.4rem + 1.8rem);
-      padding-top: (5.6rem + 2.4rem + 1.8rem);
+      padding-top: (4.8rem + 2.4rem + 1.8rem);
     }
   }
 
@@ -71,8 +71,8 @@
 
       // Targeted footnote
       &:target::before {
-        margin-top: -(5.6rem + 2.4rem + 1rem);
+        margin-top: -(4.8rem + 2.4rem + 1rem);
-        padding-top: (5.6rem + 2.4rem + 1rem);
+        padding-top: (4.8rem + 2.4rem + 1rem);
         pointer-events: none;
       }
 

src/assets/stylesheets/extensions/_permalinks.scss

@@ -72,10 +72,10 @@
         content: "";
       }
 
-      // Targeted anchor (56px from header, 24px from sidebar offset)
+      // Targeted anchor (48px from header, 24px from sidebar offset)
       &:target::before {
-        margin-top: -(5.6rem + 2.4rem + $delta);
+        margin-top: -(4.8rem + 2.4rem + $delta);
-        padding-top: (5.6rem + 2.4rem + $delta);
+        padding-top: (4.8rem + 2.4rem + $delta);
       }
 
       // Make permalink visible on hover

src/assets/stylesheets/layout/_base.scss

@@ -106,7 +106,7 @@ hr {
   display: table;
   width: 100%;
   height: 100%;
-  padding-top: 5.6rem;
+  padding-top: 4.8rem;
   table-layout: fixed;
 }
 

src/assets/stylesheets/layout/_header.scss

@@ -26,23 +26,26 @@
 
 // Application header (stays always on top)
 .md-header {
-  @include z-depth(2);
-
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
-  height: 5.6rem;
+  height: 4.8rem;
   transition: background-color 0.25s;
   background-color: $md-color-primary;
   color: $md-color-white;
+  box-shadow:
+    0 0      0.4rem rgba(0, 0, 0, 0.14),
+    0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
   z-index: 2;
   // Hack: putting the header on the GPU avoids unnecessary repaints
   backface-visibility: hidden;
 
   // Always show shadow, in case JavaScript is not available
   .no-js & {
-    @include z-depth(2);
+    box-shadow:
+      0 0      0.4rem rgba(0, 0, 0, 0.14),
+      0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
   }
 
   // [screen +]: Show shadow depending on scroll offset
@@ -51,7 +54,9 @@
 
     // Show and animate shadow
     &[data-md-state="shadow"] {
-      @include z-depth(2);
+      box-shadow:
+        0 0      0.4rem rgba(0, 0, 0, 0.14),
+        0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
     }
   }
 
@@ -63,7 +68,7 @@
 
 // Navigation within header
 .md-header-nav {
-  padding: 0.4rem;
+  padding: 0 0.4rem;
 
   // Icon buttons
   &__button {
@@ -124,23 +129,6 @@
     line-height: 4.8rem;
   }
 
-  // Parent page title
-  &__parent {
-    color: $md-color-white--light;
-
-    // Ancestor separator
-    &::after {
-      display: inline;
-      color: $md-color-white--lighter;
-      content: "/";
-    }
-
-    // [mobile portrait -]: Hide on very small screens
-    @include break-to-device(mobile portrait) {
-      display: none;
-    }
-  }
-
   // Repository containing source
   &__source {
     display: none;

src/assets/stylesheets/layout/_nav.scss

@@ -294,7 +294,7 @@
       .md-nav__link {
         position: relative;
         margin-top: 0;
-        padding: 1.6rem;
+        padding: 1.2rem 1.6rem;
 
         // Rotate icon
         &::after {
@@ -407,7 +407,7 @@
     // Repository containing source
     &__source {
       display: block;
-      padding: 0.4rem;
+      padding: 0 0.4rem;
       background-color: mix($md-color-primary, $md-color-black, 75%);
       color: $md-color-white;
     }

src/assets/stylesheets/layout/_search.scss

@@ -55,8 +55,8 @@ $md-toggle__search--checked:
       position: absolute;
       top: 0.4rem;
       left: 0.4rem;
-      width: 4rem;
+      width: 3.6rem;
-      height: 4rem;
+      height: 3.6rem;
       transform-origin: center;
       transition:
         transform 0.3s 0.1s,
@@ -155,6 +155,7 @@ $md-toggle__search--checked:
     @include break-from-device(tablet landscape) {
       position: relative;
       width: 23rem;
+      padding: 0.2rem 0;
       float: right;
       transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
     }
@@ -210,27 +211,31 @@ $md-toggle__search--checked:
     // [tablet portrait -]: Full-screen search bar
     @include break-to-device(tablet portrait) {
       width: 100%;
-      height: 5.6rem;
+      height: 4.8rem;
       font-size: 1.8rem;
     }
 
     // [tablet landscape +]: Header-embedded search
     @include break-from-device(tablet landscape) {
       width: 100%;
-      height: 4rem;
+      height: 3.6rem;
-      padding-left: 4.8rem;
+      padding-left: 4.4rem;
       transition:
         background-color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1),
         color            0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
       border-radius: 0.2rem;
       background-color: $md-color-black--lighter;
-      color: $md-color-white;
+      color: inherit;
       font-size: ms(0);
 
+      // Icon color
+      + .md-search__icon {
+        color: inherit;
+      }
+
       // Placeholder color
-      + .md-search__icon,
       &::placeholder {
-        color: $md-color-white;
+        color: $md-color-white--light;
       }
 
       // Hovered search field
@@ -271,8 +276,8 @@ $md-toggle__search--checked:
 
     // Search icon
     &[for="search"] {
-      top: $md-icon-padding;
+      top: 0.6rem;
-      left: $md-icon-padding + $md-icon-margin;
+      left: 1rem;
 
       // Set search icon on pseudo class, so it can be overridden for mobile
       // and tablet when the search is rendered in an overlay
@@ -282,7 +287,7 @@ $md-toggle__search--checked:
 
       // [tablet portrait -]: Full-screen search bar
       @include break-to-device(tablet portrait) {
-        top: 1.6rem;
+        top: 1.2rem;
         left: 1.6rem;
 
         // Show back arrow instead of search icon
@@ -294,8 +299,8 @@ $md-toggle__search--checked:
 
     // Reset button
     &[type="reset"] {
-      top: $md-icon-padding;
+      top: 0.6rem;
-      right: $md-icon-padding + $md-icon-margin;
+      right: 1rem;
       transform: scale(0.125);
       transition:
         transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
@@ -304,7 +309,7 @@ $md-toggle__search--checked:
 
       // [tablet portrait -]: Full-screen search bar
       @include break-to-device(tablet portrait) {
-        top: 1.6rem;
+        top: 1.2rem;
         right: 1.6rem;
       }
 
@@ -331,13 +336,13 @@ $md-toggle__search--checked:
 
     // [tablet portrait -]: Full-screen search bar
     @include break-to-device(tablet portrait) {
-      top: 5.6rem;
+      top: 4.8rem;
       bottom: 0;
     }
 
     // [tablet landscape +]: Header-embedded search
     @include break-from-device(tablet landscape) {
-      top: 4rem;
+      top: 3.8rem;
       transition: opacity 0.4s;
       opacity: 0;
 
@@ -353,27 +358,7 @@ $md-toggle__search--checked:
   // Wrapper for scrolling on overflow
   &__scrollwrap {
     height: 100%;
-
-    // Pure CSS scrolling shadows, taken from
-    // http://lea.verou.me/2012/04/background-attachment-local/
-    background:
-      linear-gradient(
-        to bottom,
-        $md-color-white 10%,
-        $md-color-white--transparent
-      ),
-      linear-gradient(
-        to bottom,
-        $md-color-black--lighter,
-        $md-color-black--lightest 35%,
-        $md-color-black--transparent 60%
-      );
-    background-attachment: local, scroll;
     background-color: $md-color-white;
-    background-repeat: no-repeat;
-    background-size: 100% 2rem, 100% 1rem;
-
-    // End of scrolling shadow definition
     box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -427,11 +412,11 @@ $md-toggle__search--checked:
     background-color: $md-color-black--lightest;
     color: $md-color-black--light;
     font-size: ms(-1);
-    line-height: 4rem;
+    line-height: 3.6rem;
 
     // [tablet landscape +]: Increase left indent
     @include break-from-device(tablet landscape) {
-      padding-left: 4.8rem;
+      padding-left: 4.4rem;
     }
   }
 
@@ -480,7 +465,7 @@ $md-toggle__search--checked:
 
     // [tablet landscape +]: Increase left indent
     @include break-from-device(tablet landscape) {
-      padding-left: 4.8rem;
+      padding-left: 4.4rem;
     }
 
     // Document
@@ -492,6 +477,7 @@ $md-toggle__search--checked:
 
         position: absolute;
         left: 0;
+        margin: 0.2rem;
         transition: opacity 0.25s;
         color: $md-color-black--light;
         content: "\E880"; // find_in_page
@@ -504,7 +490,7 @@ $md-toggle__search--checked:
 
       // Title
       .md-search-result__title {
-        margin: 1.3rem 0;
+        margin: 1.1rem 0;
         font-size: ms(0);
         font-weight: 400;
         line-height: 1.4;

src/assets/stylesheets/layout/_sidebar.scss

@@ -47,7 +47,7 @@ $md-toggle__drawer--checked:
   // Lock sidebar to container height (account for fixed header)
   &[data-md-state="lock"] {
     position: fixed;
-    top: 5.6rem;
+    top: 4.8rem;
   }
 
   // [tablet -]: Convert navigation to drawer

src/assets/stylesheets/layout/_tabs.scss

@@ -28,7 +28,7 @@
 .md-tabs {
   width: 100%;
   transition: background 0.25s;
-  background: mix($md-color-primary, $md-color-black, 75%);
+  background: $md-color-primary;
   overflow: auto;
 
   // [tablet -]: Hide tabs for tablet and below, as they don't make any sense
@@ -86,7 +86,6 @@
 
   // Fade-out tabs background upon scrolling
   &[data-md-state="hidden"] {
-    background: $md-color-primary;
     pointer-events: none;
 
     // Hide tabs upon scrolling - disable transition to minimizes repaints whilte

src/partials/header.html

@@ -51,14 +51,7 @@
       <div class="md-flex__cell md-flex__cell--stretch">
         <span class="md-flex__ellipsis md-header-nav__title">
           {% block site_name %}
-            {% if page %}
+            {{ config.site_name }}
-              {% for parent in page.ancestors %}
-                <span class="md-header-nav__parent">
-                  {{ parent.title }}
-                </span>
-              {% endfor %}
-            {% endif %}
-            {{ page.title | default(config.site_name, true) }}
           {% endblock %}
         </span>
       </div>