Added icons for GitHub, GitLab and BitBucket integrations

This commit is contained in:
squidfunk 2016-09-11 19:58:22 +02:00
parent 37310eb52d
commit 0111478b65
9 changed files with 133 additions and 83 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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 %}

View File

@ -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">
<div class="md-header-source__inner">
<div class="title">squidfunk/mkdocs-material</div>
<div class="count">0.2.4 177 Stars 46 Forks</div>
<a href="{{ repo_url }}" title="Go to repository" class="md-source {{ platform }}">
<div class="md-source__repository">{{ repo_name }}</div>
<div class="md-source__stats">
0.2.4 &middot; 177 Stars &middot; 46 Forks
</div>
</a>
</div>

View File

@ -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 {

View File

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

View File

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

View File

@ -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;
}
}

View File

@ -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">
<div class="md-header-source__inner">
<div class="title">squidfunk/mkdocs-material</div>
<div class="count">0.2.4 177 Stars 46 Forks</div>
<a href="{{ repo_url }}" title="Go to repository"
class="md-source {{ platform }}">
<div class="md-source__repository">{{ repo_name }}</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>