Added polyfill for details and adjusted social footer

docs/extensions/pymdown.md

@@ -169,7 +169,7 @@ tags on separate lines and adding new lines between the tags and the content.
 
 [Details][11] adds collapsible [Admonition-style blocks][12] which can contain
 arbitrary content using the HTML5 `details` and `summary` tags. Additionally,
-all Admonition qualifiers can be used, e.g. `note`, `question`, `warning` etc.
+all Admonition qualifiers can be used, e.g. `note`, `question`, `warning` etc.:
 
 ??? question "How many Prolog programmers does it take to change a lightbulb?"
 

material/base.html

@@ -36,10 +36,10 @@
       {% endif %}
     {% endblock %}
     {% block libs %}
-      <script src="{{ base_url }}/assets/javascripts/modernizr-1df76c4e58.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/modernizr-e826f8942a.js"></script>
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-b57c021441.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-4cc45aa1cf.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02c2a4388f.palette.css">
       {% endif %}
@@ -150,7 +150,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-6940329b9f.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-3700c4cc12.js"></script>
       {% set languages = lang.t("search.languages").split(",") %}
       {% if languages | length and languages[0] != "" %}
         {% set path = base_url + "/assets/javascripts/lunr" %}

src/assets/javascripts/application.js

@@ -111,6 +111,21 @@ function initialize(config) { // eslint-disable-line func-style
       })
     }
 
+    /* Polyfill details/summary functionality */
+    if (!Modernizr.details) {
+      const blocks = document.querySelectorAll("details > summary")
+      Array.prototype.forEach.call(blocks, summary => {
+        summary.addEventListener("click", ev => {
+          const details = ev.target.parentNode
+          if (details.hasAttribute("open")) {
+            details.removeAttribute("open")
+          } else {
+            details.setAttribute("open", "")
+          }
+        })
+      })
+    }
+
     /* Force 1px scroll offset to trigger overflow scrolling */
     if (Modernizr.ios) {
       const scrollable = document.querySelectorAll("[data-md-scrollfix]")

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

@@ -32,32 +32,48 @@
     @extend .admonition;
 
     padding-top: 0;
-    padding-bottom: 0;
 
-    // Re-add bottom spacing if block is open
+    // Rotate title icon
-    &[open] {
+    &[open] > summary::after {
-      padding-bottom: 1.2rem;
+      transform: rotate(180deg);
+    }
 
-      > summary::after {
+    // Remove bottom spacing
-        transform: rotate(180deg);
+    &:not([open]) {
+      padding-bottom: 0;
+
+      // Remove bottom border if block is closed
+      > summary {
+        border-bottom: none;
       }
     }
 
-    // Remove bottom border if block is closed
+    // Increase spacing to the right - scoped here for higher specificity
-    &:not([open]) summary {
-      border-bottom: none;
-    }
-
-    // TODO specificity problem
     summary {
       padding-right: 4rem;
     }
+
+    // Manually hide and show, if browser doesn't support details
+    .no-details &:not([open]) {
+
+      // Hide all nested tags ...
+      > * {
+        display: none;
+      }
+
+      // ... but show title
+      summary {
+        display: block;
+      }
+    }
   }
 
   // Title
   summary {
     @extend .admonition-title;
 
+    // Hack: set to block, so Firefox doesn't render marker
+    display: block;
     outline: none;
     cursor: pointer;
 

src/assets/stylesheets/layout/_footer.scss

@@ -163,9 +163,6 @@
     display: inline-block;
     width: 3.2rem;
     height: 3.2rem;
-    border: 0.1rem solid $md-color-white--lightest;
-    border-radius: 100%;
-    color: $md-color-white--light;
     font-size: 1.6rem;
     text-align: center;
 
@@ -173,5 +170,10 @@
     &::before {
       line-height: 1.9;
     }
+
+    // Active link
+    &:hover::before {
+      color: $md-color-white;
+    }
   }
 }