Integrated social icons and moved copyright banner below footer navigation

material/base.html

@@ -36,7 +36,10 @@
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
       <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-ca351710b4.css">
+      {% if config.extra.social %}
+        <link rel="stylesheet" href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
+      {% endif %}
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-5c79a378e0.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-535e87ca3f.palette.css">
       {% endif %}
@@ -91,24 +94,6 @@
                 {% endif %}
                 {{ page.content }}
               {% endblock %}
-              <hr>
-              <small class="md-content__copyright">
-                {% if config.copyright %}
-                  {{ config.copyright }} &ndash;
-                {% endif %}
-                This document was created with
-                <a href="http://www.mkdocs.org">MkDocs</a>
-                and the
-                <a href="http://squidfunk.github.io/mkdocs-material/">
-                  Material
-                </a>
-                theme.
-                {% if config.edit_uri %}
-                  <a href="{{ page.edit_url }}">
-                    Edit this page
-                  </a>
-                {% endif %}
-              </small>
             </article>
           </div>
         </div>

material/partials/footer.html

@@ -1,11 +1,11 @@
 <footer class="md-footer">
-  <div class="md-footer__inner">
+  {% if page.previous_page or page.next_page %}
-    {% if page.previous_page or page.next_page %}
+    <div class="md-footer-nav">
-      <nav class="md-footer-nav md-grid">
+      <nav class="md-footer-nav__inner md-grid">
         {% if page.previous_page %}
           <a href="{{ page.previous_page.url }}" title="{{ page.previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
             <div class="md-flex__cell md-flex__cell--shrink">
-              <i class="md-icon md-icon--back md-footer-nav__icon"></i>
+              <i class="md-icon md-footer-nav__icon">arrow_back</i>
             </div>
             <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
               <span class="md-flex__ellipsis">
@@ -28,11 +28,35 @@
               </span>
             </div>
             <div class="md-flex__cell md-flex__cell--shrink">
-              <i class="md-icon md-icon--forward md-footer-nav__icon"></i>
+              <i class="md-icon md-footer-nav__icon">arrow_forward</i>
             </div>
           </a>
         {% endif %}
       </nav>
-    {% endif %}
+    </div>
+  {% endif %}
+  <div class="md-footer-meta md-typeset">
+    <div class="md-footer-meta__inner md-grid">
+      <div class="md-footer-copyright">
+        {% if config.copyright %}
+          <span class="md-footer-copyright__highlight">
+            {{ config.copyright }}
+          </span>
+        {% endif %}
+        <br>
+        powered by
+        <a href="http://www.mkdocs.org">MkDocs</a>
+        and the
+        <a href="http://squidfunk.github.io/mkdocs-material/">Material</a>
+        theme
+      </div>
+      {% if config.extra.social %}
+        <div class="md-footer-social">
+          {% for social in config.extra.social %}
+            <a href="{{ social.link }}" class="md-footer-social__link socicon-{{ social.type }}"></a>
+          {% endfor %}
+        </div>
+      {% endif %}
+    </div>
   </div>
 </footer>

mkdocs.yml

@@ -37,17 +37,19 @@ theme_dir: material
 
 # Options
 extra:
-  version: 0.2.4
-  logo: images/logo.png
-  font:
-    text: Ubuntu
-    mono: Ubuntu Mono
-  author:
-    github: squidfunk
-    twitter: squidfunk
   palette:
     primary: indigo
     accent: indigo
+  font:
+    text: Ubuntu
+    mono: Ubuntu Mono
+  social:
+    - type: github
+      link: https://github.com/squidfunk
+    - type: twitter
+      link: https://twitter.com/squidfunk
+    - type: linkedin
+      link: https://de.linkedin.com/in/martin-donath-20a95039
 
 # Extensions
 markdown_extensions:

src/assets/stylesheets/layout/_footer.scss

@@ -32,18 +32,18 @@
   @media print {
     display: none;
   }
-
-  // Footer container
-  &__inner {
-    background-color: $md-color-black;
-    color: $md-color-white;
-  }
 }
 
 // Navigation within footer
 .md-footer-nav {
-  padding: 0.4rem;
+  background-color: $md-color-black;
-  overflow: auto;
+  color: $md-color-white;
+
+  // Set spacing
+  &__inner {
+    padding: 0.4rem;
+    overflow: auto;
+  }
 
   // Links to previous and next page
   &__link {
@@ -110,3 +110,67 @@
     font-size: 1.5rem;
   }
 }
+
+// Non-navigational information
+.md-footer-meta {
+  background: opacify($md-color-black, 0.025);
+
+  // Set spacing
+  &__inner {
+    padding: 0.4rem;
+    overflow: auto;
+  }
+
+  // Use a decent color for non-hovered links and ensure specificity
+  html &.md-typeset a {
+    color: $md-color-white--lighter;
+  }
+}
+
+// Copyright and theme information
+.md-footer-copyright {
+  margin: 0 1.2rem;
+  padding: 0.8rem 0;
+  color: $md-color-white--lightest;
+  font-size: ms(-1);
+
+  // [tablet portrait +]: Show next to social media links
+  @include break-from-device(tablet portrait) {
+    max-width: 75%;
+    float: left;
+  }
+
+  // Highlight copyright information
+  &__highlight {
+    color: $md-color-white--light;
+  }
+}
+
+// Social media links
+.md-footer-social {
+  margin: 0 0.8rem;
+  padding: 1.2rem 0;
+  text-align: center;
+
+  // [tablet portrait +]: Show next to copyright information
+  @include break-from-device(tablet portrait) {
+    float: right;
+  }
+
+  // Link with icon
+  &__link {
+    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;
+
+    // Adjust line-height to match height for correct alignment
+    &::before {
+      line-height: 3.2rem;
+    }
+  }
+}

src/base.html

@@ -82,6 +82,12 @@
       <link rel="stylesheet" type="text/css"
           href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 
+      <!-- Social icon webfont, if necessary -->
+      {% if config.extra.social %}
+        <link rel="stylesheet" type="text/css"
+            href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
+      {% endif %}
+
       <!-- Theme-related stylesheets -->
       <link rel="stylesheet" type="text/css"
           href="{{ base_url }}/assets/stylesheets/application.css" />
@@ -181,28 +187,6 @@
                 <!-- Content -->
                 {{ page.content }}
               {% endblock %}
-
-              <!-- Copyright and theme information -->
-              <hr />
-              <small class="md-content__copyright">
-                {% if config.copyright %}
-                  {{ config.copyright }} &ndash;
-                {% endif %}
-                This document was created with
-                <a href="http://www.mkdocs.org">MkDocs</a>
-                and the
-                <a href="http://squidfunk.github.io/mkdocs-material/">
-                  Material
-                </a>
-                theme.
-
-                <!-- Edit button, if URL was defined -->
-                {% if config.edit_uri %}
-                  <a href="{{ page.edit_url }}">
-                    Edit this page
-                  </a>
-                {% endif %}
-              </small>
             </article>
           </div>
         </div>

src/partials/footer.html

@@ -22,11 +22,11 @@
 
 <!-- Application footer -->
 <footer class="md-footer">
-  <div class="md-footer__inner">
 
-    <!-- Link to previous and/or next page -->
+  <!-- Link to previous and/or next page -->
-    {% if page.previous_page or page.next_page %}
+  {% if page.previous_page or page.next_page %}
-      <nav class="md-footer-nav md-grid">
+    <div class="md-footer-nav">
+      <nav class="md-footer-nav__inner md-grid">
 
         <!-- Link to previous page -->
         {% if page.previous_page %}
@@ -34,7 +34,7 @@
               class="md-flex md-footer-nav__link md-footer-nav__link--prev"
               rel="prev">
             <div class="md-flex__cell md-flex__cell--shrink">
-              <i class="md-icon md-icon--back md-footer-nav__icon"></i>
+              <i class="md-icon md-footer-nav__icon">arrow_back</i>
             </div>
             <div class="md-flex__cell md-flex__cell--stretch
                   md-footer-nav__title">
@@ -63,11 +63,42 @@
               </span>
             </div>
             <div class="md-flex__cell md-flex__cell--shrink">
-              <i class="md-icon md-icon--forward md-footer-nav__icon"></i>
+              <i class="md-icon md-footer-nav__icon">arrow_forward</i>
             </div>
           </a>
         {% endif %}
       </nav>
-    {% endif %}
+    </div>
+  {% endif %}
+
+  <!-- Further information -->
+  <div class="md-footer-meta md-typeset">
+    <div class="md-footer-meta__inner md-grid">
+
+      <!-- Copyright and theme information -->
+      <div class="md-footer-copyright">
+        {% if config.copyright %}
+          <span class="md-footer-copyright__highlight">
+            {{ config.copyright }}
+          </span>
+        {% endif %}
+        <br />
+        powered by
+        <a href="http://www.mkdocs.org">MkDocs</a>
+        and the
+        <a href="http://squidfunk.github.io/mkdocs-material/">Material</a>
+        theme
+      </div>
+
+      <!-- Link to social media accounts, if any -->
+      {% if config.extra.social %}
+        <div class="md-footer-social">
+          {% for social in config.extra.social %}
+            <a href="{{ social.link }}" class="md-footer-social__link
+                  socicon-{{ social.type }}"></a>
+          {% endfor %}
+        </div>
+      {% endif %}
+    </div>
   </div>
 </footer>