Refactored code container

material/base.html

@@ -56,8 +56,8 @@
               </div>
             </div>
           {% endif %}
-          <div class="md-content md-content--typeset">
-            <article class="md-content__inner">
+          <div class="md-content">
+            <article class="md-content__inner md-typeset">
               {% block content %}
                 {% if edit_uri %}
                   <a class="md-button md-button--edit" href="{{ edit_uri }}">
@@ -91,7 +91,7 @@
       var base_url = '{{ base_url }}';
       var repo_url = '{{ repo_url }}';
     </script>
-    <script src="{{ base_url }}/assets/javascripts/application-409da39d08.js"></script>
+    <script src="{{ base_url }}/assets/javascripts/application-caa33c61a6.js"></script>
     {% for path in extra_javascript %}
       <script src="{{ path }}"></script>
     {% endfor %}

src/assets/javascripts/application.js

@@ -118,6 +118,19 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   });
 
+  // document.querySelector('[for="nav-3"]').addEventListener('click', function() {
+  //   var el = document.querySelector('[for="nav-3"] + nav');
+  //
+  //   // TODO: do via class and disable transforms!!!
+  //   el.style.maxHeight = '100%';
+  //   var rect = el.getBoundingClientRect();
+  //   el.style.maxHeight = '0';
+  //
+  //   // console.log(rect.height);
+  //   el.style.maxHeight = '120px';
+  // });
+
+
 // setTimeout(function() {
   fetch('https://api.github.com/repos/squidfunk/mkdocs-material')
     .then(function(response) {

src/assets/stylesheets/base/_typeset.scss

@@ -61,7 +61,7 @@ kbd {
 // ----------------------------------------------------------------------------
 
 // Content that is typeset
-.md-content--typeset {
+.md-typeset {
   font-size: ms(0);
   line-height: 1.6;
 
@@ -187,7 +187,8 @@ kbd {
     color: $md-code-color;
     font-size: 85%;
     line-height: 1.4;
-    overflow-x: scroll;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
 
     // Reset, if pre is inside code
     > code {
@@ -195,6 +196,29 @@ kbd {
     }
   }
 
+  // Full-width container
+  > div > pre,
+  > pre > code {
+
+    // [mobile -]: Stretch to whole width
+    @include break-to-device(mobile) {
+      margin: 1.0em -1.6rem;
+      padding: 1.0rem 1.6rem;
+      border-radius: 0;
+    }
+
+    // Override native scrollbar styles
+    &::-webkit-scrollbar {
+      width: 0.4rem;
+      height: 0.4rem;
+
+      // Style scrollbar thumb
+      &-thumb {
+        background: $md-color-black--lighter;
+      }
+    }
+  }
+
   // Keystrokes
   kbd {
     display: inline-block;

src/assets/stylesheets/extensions/_permalinks.scss

@@ -25,7 +25,7 @@
 // ----------------------------------------------------------------------------
 
 // Scoped in typesetted content for greater specificity
-.md-content--typeset {
+.md-typeset {
 
   // Permalink
   .headerlink {

src/assets/stylesheets/layout/_content.scss

@@ -42,7 +42,7 @@
     margin: 2.4rem 1.6rem;
 
     // Hack: this is necessary for floating the edit button
-    overflow: auto;
+    // overflow: auto;
 
     // [screen +]: Increase spacing
     @include break-from-device(screen) {

src/base.html

@@ -126,8 +126,8 @@
           {% endif %}
 
           <!-- Article -->
-          <div class="md-content md-content--typeset">
-            <article class="md-content__inner">
+          <div class="md-content">
+            <article class="md-content__inner md-typeset">
 
               <!-- Content block -->
               {% block content %}