Added icons for GitHub, GitLab and BitBucket integrations

material/base.html

@@ -24,7 +24,7 @@
     <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:500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-6e34e5e667.css">
+    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-07c02d33cc.css">
     {% for path in extra_css %}
       <link rel="stylesheet" href="{{ path }}">
     {% endfor %}

material/header.html

@@ -34,12 +34,21 @@
             </div>
           </form>
         </div>
-      </div> 
+      </div>
+      {% if "github." in repo_url %}
+        {% set platform = "md-source--github" %}
+      {% elif "gitlab." in repo_url %}
+        {% set platform = "md-source--gitlab" %}
+      {% elif "bitbucket." in repo_url %}
+        {% set platform = "md-source--bitbucket" %}
+      {% else %}
+        {% set platform = "" %}
+      {% endif %}
       <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ repo_url }}" title="GitHub" class="md-header-source">
+        <a href="{{ repo_url }}" title="Go to repository" class="md-source {{ platform }}">
-          <div class="md-header-source__inner">
+          <div class="md-source__repository">{{ repo_name }}</div>
-            <div class="title">squidfunk/mkdocs-material</div>
+          <div class="md-source__stats">
-            <div class="count">0.2.4 – 177 Stars – 46 Forks</div>
+            0.2.4 &middot; 177 Stars &middot; 46 Forks
           </div>
         </a>
       </div>

src/assets/stylesheets/_shame.scss

@@ -67,71 +67,6 @@
   }
 }
 
-// .md-icon--github {
-//   &::before {
-//     content: " ";
-//     display: block;
-//     background-image: url("../images/icons/github-white.svg"); // TODO: user default source icon otherwise
-//     background-size: 2.4rem 2.4rem;
-//     background-repeat: no-repeat;
-//     width:  2.4rem;
-//     height: 2.4rem;
-//   }
-// }
-
-// override locally
-
-.md-header-source {
-  position: relative;
-  display: table-cell;
-  // background: black;
-  white-space: nowrap;
-  min-width: 23.0rem;
-  max-width: 23.0rem;
-  height: 4.8rem;
-  font-size: 1.3rem;
-  vertical-align: middle;
-  padding-right: 0.8rem;
-  padding-left: 4.0rem;
-  transition: opacity .25s;
-  &:hover {
-    opacity: 0.7;
-  }
-
-  &::before {
-    content: " ";
-    display: block;
-    background-image: url("../images/icons/github-white.svg"); // TODO: user default source icon otherwise
-    background-size: 2.4rem 2.4rem;
-    background-repeat: no-repeat;
-    width:  2.4rem;
-    height: 2.4rem;
-    position: absolute;
-    left: 0.8rem;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .title {
-    font-weight: 700;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .count {
-    color: $md-color-white--light;
-    // display: none;
-    // text-transform: uppercase;
-    font-weight: bold;
-    font-size: 1.1rem;
-  }
-}
-
-
-
-
-
-
-
 .checklist {
 
   li {

src/assets/stylesheets/application.scss

@@ -48,6 +48,7 @@
 @import "layout/nav";
 @import "layout/search";
 @import "layout/sidebar";
+@import "layout/source";
 
 @import "extensions/admonition";
 @import "extensions/codehilite";

src/assets/stylesheets/layout/_header.scss

@@ -52,7 +52,7 @@
       cursor: pointer;
       z-index: 1;
 
-      // Pushed/clicked icon
+      // Hovered icon
       &:hover {
         opacity: 0.7;
       }

src/assets/stylesheets/layout/_source.scss

@@ -0,0 +1,95 @@
+////
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Source
+// ----------------------------------------------------------------------------
+
+// Repository containing source
+.md-source {
+  display: table-cell;
+  position: relative;
+  min-width: 23.0rem;
+  max-width: 23.0rem;
+  height: 4.8rem;
+  padding: 0 1.2rem;
+  transition: opacity 0.25s;
+  font-size: 1.3rem;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+
+  // Hovered source information
+  &:hover {
+    opacity: 0.7;
+  }
+
+  // Repository is hosted on platform
+  &--bitbucket,
+  &--github,
+  &--gitlab {
+    padding-left: 4.0rem;
+
+    // Platform icon
+    &::before {
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: 0.8rem;
+      width:  2.4rem;
+      height: 2.4rem;
+      transform: translateY(-50%);
+      background-repeat: no-repeat;
+      background-size: 2.4rem 2.4rem;
+      content: "";
+    }
+  }
+
+  // Code is hosted on BitBucket
+  &--bitbucket::before {
+    background-image: url("../images/icons/bitbucket-white.svg");
+  }
+
+  // Code is hosted on GitHub
+  &--github::before {
+    background-image: url("../images/icons/github-white.svg");
+  }
+
+  // Code is hosted on GitLab
+  &--gitlab::before {
+    background-image: url("../images/icons/gitlab-white.svg");
+  }
+
+  // Repository name
+  &__repository {
+    font-weight: 700;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  // Repository statistics
+  &__stats {
+    color: $md-color-white--light;
+    font-size: 1.1rem;
+    font-weight: 700;
+  }
+}

src/header.html

@@ -70,14 +70,29 @@
             </div>
           </form>
         </div>
-      </div> 
+      </div>
+
+      <!--
+        Check whether the repository is hosted on one of the supported code
+        hosting platforms: Github, Gitlab or Bitbucket.
+      -->
+      {% if "github." in repo_url %}
+        {% set platform = "md-source--github" %}
+      {% elif "gitlab." in repo_url %}
+        {% set platform = "md-source--gitlab" %}
+      {% elif "bitbucket." in repo_url %}
+        {% set platform = "md-source--bitbucket" %}
+      {% else %}
+        {% set platform = "" %}
+      {% endif %}
 
       <!-- Link to repository -->
       <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ repo_url }}" title="GitHub" class="md-header-source">
+        <a href="{{ repo_url }}" title="Go to repository"
-          <div class="md-header-source__inner">
+            class="md-source {{ platform }}">
-            <div class="title">squidfunk/mkdocs-material</div>
+          <div class="md-source__repository">{{ repo_name }}</div>
-            <div class="count">0.2.4 – 177 Stars – 46 Forks</div>
+          <div class="md-source__stats">
+            0.2.4 &middot; 177 Stars &middot; 46 Forks
           </div>
         </a>
       </div>
@@ -88,9 +103,4 @@
   <nav class="md-header-search">
 
   </nav>
-
-  <!--
-  FOO
-
--->
 </header>