Added source file links, have to fix repaints

docs/getting-started.md

@@ -1,3 +1,6 @@
+source: src/assets/javascripts/application.js
+        src/assets/stylesheets/application.scss
+
 # Getting started
 
 ## Installation

material/base.html

@@ -32,7 +32,7 @@
       <script src="{{ base_url }}/assets/javascripts/modernizr-56ade86843.js"></script>
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-e17eeafcbc.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-646a8e0c44.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-892b79c5c5.palette.css">
       {% endif %}
@@ -108,14 +108,25 @@
           {% endblock %}
           <div class="md-content">
             <article class="md-content__inner md-typeset">
-               {% if config.edit_uri %}
-                 <a href="{{ page.edit_url }}" title="{{ lang.t('edit.link.title') }}" class="md-icon md-content__edit">edit</a>
-               {% endif %}
+              {% if config.edit_uri %}
+                <a href="{{ page.edit_url }}" title="{{ lang.t('edit.link.title') }}" class="md-icon md-content__icon">edit</a>
+              {% endif %}
               {% block content %}
+                {% if page.meta.source %}
+                  <a href="{{ page.edit_url }}" title="{{ lang.t('source.link.title') }}" class="md-icon md-content__icon">folder_open</a>
+                {% endif %}
                 {% if not "\x3ch1" in page.content %}
                   <h1>{{ page.title | default(config.site_name, true)}}</h1>
                 {% endif %}
                 {{ page.content }}
+                {% if page.meta.source %}
+                  <hr>
+                  <ul>
+                    {% for file in page.meta.source %}
+                      <li><a href="#"><code>{{ file }}</code></a></li>
+                    {% endfor %}
+                  </ul>
+                {% endif %}
               {% endblock %}
               {% if config.extra.disqus and not page.is_homepage %}
                 <h2>{{ lang.t('comments') }}</h2>

mkdocs.yml

@@ -27,6 +27,7 @@ site_url: http://squidfunk.github.io/mkdocs-material/
 # Repository
 repo_name: squidfunk/mkdocs-material
 repo_url: https://github.com/squidfunk/mkdocs-material
+edit_uri: tree/master/docs
 
 # Copyright
 copyright: 'Copyright © 2016 - 2017 Martin Donath'

src/assets/stylesheets/layout/_content.scss

@@ -26,6 +26,9 @@
 
 // Content container
 .md-content {
+  // Hack: setting overflow to hidden induces new layer borders which omits
+  // massive repaints because of the margins of the inner elements
+  overflow: hidden;
 
   // [tablet landscape +]: Add space for table of contents
   @include break-from-device(tablet landscape) {
@@ -35,9 +38,6 @@
   // [screen +]: Add space for table of contents
   @include break-from-device(screen) {
     margin-left: 24.2rem;
-    // Hack: setting overflow to auto induces margin collapse which omits
-    // massive repaints because of the margins of the inner elements
-    overflow: auto;
   }
 
   // Define spacing
@@ -55,20 +55,43 @@
     }
   }
 
-  // Icons (edit button)
-  &__edit {
+  // Icons
+  &__icon {
     @extend %md-icon__button;
 
+    position: relative;
+    margin-top: 0.8rem;
     float: right;
 
+    // TODO
+    html body .md-typeset & {
+      color: $md-color-black--lighter;
+    }
+
     // [tablet portrait -]: Align edit link with search icon
     @include break-to-device(tablet portrait) {
       margin-right: -0.8rem;
+
+      // TODO
+      & + & {
+        margin-right: 0.4rem;
+      }
     }
 
     // Hide for print
     @media print {
       display: none;
     }
+
+    // TODO
+    & + &::before {
+      display: block;
+      position: absolute;
+      top: -0.4rem;
+      right: -0.4rem;
+      height: 4.8rem;
+      border-right: 0.1rem solid $md-color-black--lighter;
+      content: "";
+    }
   }
 }

src/assets/stylesheets/layout/_sidebar.scss

@@ -30,7 +30,7 @@
   width: 24.2rem;
   padding: 2.4rem 0;
   float: left;
-  overflow: visible;
+  overflow: hidden;
 
   // Hide for print
   @media print {
@@ -41,7 +41,6 @@
   &[data-md-state="lock"] {
     position: fixed;
     top: 5.6rem;
-    backface-visibility: hidden;
   }
 
   // [tablet -]: Convert navigation to drawer

src/assets/stylesheets/layout/_tabs.scss

@@ -36,6 +36,11 @@
     display: none;
   }
 
+  // Hide for print
+  @media print {
+    display: none;
+  }
+
   // List of items
   &__list {
     margin: 0;
@@ -82,6 +87,7 @@
   // 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
     // scrolling down, while scrolling up seems to be okay

src/base.html

@@ -211,15 +211,22 @@
             <article class="md-content__inner md-typeset">
 
               <!-- Edit button, if URL was defined -->
-               {% if config.edit_uri %}
-                 <a href="{{ page.edit_url }}"
-                      title="{{ lang.t('edit.link.title') }}"
-                      class="md-icon md-content__edit">edit</a>
-               {% endif %}
+              {% if config.edit_uri %}
+                <a href="{{ page.edit_url }}"
+                    title="{{ lang.t('edit.link.title') }}"
+                    class="md-icon md-content__icon">edit</a>
+              {% endif %}
 
               <!-- Block: content -->
               {% block content %}
 
+                <!-- Linked source files -->
+                {% if page.meta.source %}
+                  <a href="{{ page.edit_url }}"
+                      title="{{ lang.t('source.link.title') }}"
+                      class="md-icon md-content__icon">folder_open</a>
+                {% endif %}
+
                 <!--
                   Hack: check whether the content contains a h1 headline. If it
                   doesn't, the page title (or respectively site name) is used
@@ -231,6 +238,15 @@
 
                 <!-- Content -->
                 {{ page.content }}
+
+                {% if page.meta.source %}
+                  <hr>
+                  <ul>
+                    {% for file in page.meta.source %}
+                      <li><a href="#"><code>{{ file }}</code></a></li>
+                    {% endfor %}
+                  </ul>
+                {% endif %}
               {% endblock %}
 
               <!-- Disqus integration -->