Fixed no-js styles

material/assets/manifest.json

@@ -1,8 +1,8 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.a9b5ac61.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.59fd537b.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.a9b5ac61.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.59fd537b.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
-  "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.c0cd5d4d.min.css",
+  "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.8adb38b9.min.css",
-  "assets/stylesheets/app.scss": "assets/stylesheets/app.55d3176a.min.css"
+  "assets/stylesheets/app.scss": "assets/stylesheets/app.d99d5cd5.min.css"
 }

material/base.html

@@ -43,9 +43,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.55d3176a.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.d99d5cd5.min.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.c0cd5d4d.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.8adb38b9.min.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -195,7 +195,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.a9b5ac61.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.59fd537b.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/stylesheets/app-palette.scss

@@ -136,7 +136,7 @@ button[data-md-color-accent] {
     @include break-to-device(tablet) {
 
       // Site title in main navigation
-      html & .md-nav--primary .md-nav__title[for="drawer"] {
+      html & .md-nav--primary .md-nav__title[for="__drawer"] {
         background-color: $color;
       }
     }
@@ -211,7 +211,7 @@ button[data-md-color-primary="white"] {
   @include break-to-device(tablet) {
 
     // Site title in main navigation
-    html & .md-nav--primary .md-nav__title[for="drawer"] {
+    html & .md-nav--primary .md-nav__title[for="__drawer"] {
       background-color: $md-color-white;
       color: $md-color-black;
     }
@@ -278,7 +278,7 @@ button[data-md-color-primary="black"] {
   @include break-to-device(tablet) {
 
     // Site title in main navigation
-    html & .md-nav--primary .md-nav__title[for="drawer"] {
+    html & .md-nav--primary .md-nav__title[for="__drawer"] {
       background-color: $clr-black;
     }
   }

src/assets/stylesheets/layout/_header.scss

@@ -109,7 +109,7 @@
     }
 
     // Hide search icon, if JavaScript is not available.
-    .no-js &[for="search"] {
+    .no-js &[for="__search"] {
       display: none;
     }
 
@@ -145,7 +145,7 @@
   &__topic {
     display: block;
     position: absolute;
-    width: calc(100% - #{px2rem(40px)});
+    width: 100%;
     padding: 0 px2rem(20px);
     transition:
       transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),

src/assets/stylesheets/layout/_tabs.scss

@@ -32,6 +32,11 @@
   color: $md-color-white;
   overflow: auto;
 
+  // Omit transitions, in case JavaScript is not available
+  .no-js & {
+    transition: none;
+  }
+
   // [tablet -]: Hide tabs for tablet and below, as they don't make any sense
   @include break-to-device(tablet) {
     display: none;
@@ -70,6 +75,11 @@
     font-size: px2rem(14px);
     opacity: 0.7;
 
+    // Omit transitions, in case JavaScript is not available
+    .no-js & {
+      transition: none;
+    }
+
     // Active or hovered link
     &--active,
     &:hover {