OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixed #6: Include multiple color palettes via mkdocs.yml

Browse Source
This commit is contained in:
squidfunk 2016-02-24 16:24:32 +01:00
parent bf8be26e0a
commit 32a14cbb12
8 changed files with 251 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG
View File

@ -1,5 +1,6 @@
mkdocs-material-0.x.x (2016-xx-xx) mkdocs-material-0.2.0 (2016-xx-xx)
* Fixed #6: Include multiple color palettes via mkdocs.yml
* Fixed #9: Text for prev/next footer navigation should be customizable * Fixed #9: Text for prev/next footer navigation should be customizable
* Refactored templates (replaced if/else with modifiers where possible) * Refactored templates (replaced if/else with modifiers where possible)

1
material/assets/stylesheets/palettes-05ab2406df.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palettes.css Normal file
View File

File diff suppressed because one or more lines are too long

8
material/base.html
View File

@ -54,6 +54,9 @@
} }
</style> </style>
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-eaf860cca2.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-eaf860cca2.css">
{% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/palettes-05ab2406df.css">
{% endif %}
{% if config.extra.font != "none" %} {% if config.extra.font != "none" %}
{% set text = config.extra.get("font", {}).text | default("Ubuntu") %} {% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
{% set code = config.extra.get("font", {}).code | default("Ubuntu Mono") %} {% set code = config.extra.get("font", {}).code | default("Ubuntu Mono") %}
@ -74,7 +77,10 @@
<script src="{{ base_url }}/assets/javascripts/modernizr-4ab42b99fd.js"></script> <script src="{{ base_url }}/assets/javascripts/modernizr-4ab42b99fd.js"></script>
{% block extrahead %}{% endblock %} {% block extrahead %}{% endblock %}
</head> </head>
<body> {% set palette = config.extra.get("palette", {}) %}
{% set primary = palette.primary | replace(' ', '-') | lower %}
{% set accent = palette.accent | replace(' ', '-') | lower %}
<body class="{% if primary %}palette-primary-{{ primary }}{% endif %} {% if accent %}palette-accent-{{ accent }}{% endif %}">
{% if repo_name == "GitHub" and repo_url %} {% if repo_name == "GitHub" and repo_url %}
{% set repo_id = repo_url | replace("https://github.com/", "") %} {% set repo_id = repo_url | replace("https://github.com/", "") %}
{% if repo_id[-1:] == "/" %} {% if repo_id[-1:] == "/" %}

3
material/manifest.json
View File

@ -2,5 +2,6 @@
"assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico", "assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
"assets/javascripts/application.js": "assets/javascripts/application-a10a824a49.js", "assets/javascripts/application.js": "assets/javascripts/application-a10a824a49.js",
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-4ab42b99fd.js", "assets/javascripts/modernizr.js": "assets/javascripts/modernizr-4ab42b99fd.js",
"assets/stylesheets/application.css": "assets/stylesheets/application-eaf860cca2.css" "assets/stylesheets/application.css": "assets/stylesheets/application-eaf860cca2.css",
"assets/stylesheets/palettes.css": "assets/stylesheets/palettes-05ab2406df.css"
} }

4
src/assets/stylesheets/modules/drawer/_layout.scss
View File

@ -74,14 +74,14 @@
} }
/* /*
* Nested links * Nested links and anchors
*/ */
.toc li ul { .toc li ul {
margin-left: 12px; margin-left: 12px;
} }
/* /*
* * Nested anchors
*/ */
.current + ul { .current + ul {
margin-bottom: 9px; margin-bottom: 9px;

221
src/assets/stylesheets/palettes.scss Normal file
View File

@ -0,0 +1,221 @@
/*
* 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
* IN THE SOFTWARE.
*/
/* ----------------------------------------------------------------------------
* Dependencies
* ------------------------------------------------------------------------- */
@import "bourbon";
@import "quantum-colors";
@import "quantum-shadows";
/* ----------------------------------------------------------------------------
* Application
* ------------------------------------------------------------------------- */
@import "palette";
@import "mixins/break";
/* ----------------------------------------------------------------------------
* Palette
* ------------------------------------------------------------------------- */
/*
* Build primary palette
*/
@each $name, $color in (
'red': $red-400,
'pink': $pink-500,
'purple': $purple-400,
'deep-purple': $deep-purple-400,
'indigo': $indigo-500,
'blue': $blue-500,
'light-blue': $light-blue-500,
'cyan': $cyan-500,
'teal': $teal-500,
'green': $green-500,
'light-green': $light-green-600,
'lime': $lime-600,
'yellow': $yellow-800,
'amber': $amber-600,
'orange': $orange-600,
'deep-orange': $deep-orange-400,
'brown': $brown-500,
'grey': $grey-600,
'blue-grey': $blue-grey-600
) {
/*
* Device specific background hacks related to rubberband
*/
.palette-primary-#{$name} {
/* Hack [Chrome, Opera]: Set background color in Chrome and Opera */
@supports (-webkit-appearance: none) {
background: $color;
}
/*
* Application header and footer
*/
.header, .footer {
background: $color;
}
/*
* Drawer container
*/
.drawer {
/*
* Color links
*/
.toc a {
/*
* Current active element
*/
&.current {
color: $color;
}
/*
* Hovered link
*/
&:hover, &:focus {
color: $color;
}
}
/*
* Color anchors menu
*/
.anchor a {
border-left: 2px solid $color;
}
}
/*
* Project information
*/
.project {
/* [tablet landscape-]: Set background color */
@include break-to-device(tablet landscape) {
background: $color;
}
}
/*
* Article
*/
.article {
/*
* Differing top and bottom rubberband backgrounds in iOS web application
*/
.ios.standalone & {
background: linear-gradient(
to bottom, $white 50%, $color 50%);
}
/*
* Headlines, chapters, links and inline code
*/
h1, h2, a, code {
color: $color;
}
/*
* Light permalinks
*/
.headerlink {
color: $black-lighter;
}
/*
* Data table headings
*/
table th {
background: mix($color, $white, 75%);
}
}
/*
* Search meta data
*/
.results .meta {
background: $color;
}
}
}
/*
* Build accent palette
*/
@each $name, $color in (
'red': $red-a400,
'pink': $pink-a400,
'purple': $purple-a200,
'deep-purple': $deep-purple-a200,
'indigo': $indigo-a200,
'blue': $blue-a200,
'light-blue': $light-blue-a700,
'cyan': $cyan-a700,
'teal': $teal-a700,
'green': $green-a700,
'light-green': $light-green-a700,
'lime': $lime-a700,
'yellow': $yellow-a700,
'amber': $amber-a700,
'orange': $orange-a400,
'deep-orange': $deep-orange-a200
) {
/*
* Device specific background hacks related to rubberband
*/
.palette-accent-#{$name} {
/*
* Article
*/
.article {
/*
* Hovered and focused links
*/
a:hover,
a:focus {
color: $color;
}
}
/*
* Repository buttons
*/
.repo a {
background: $color;
}
}
}

16
src/base.html
View File

@ -86,6 +86,12 @@
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href="{{ base_url }}/assets/stylesheets/application.css" /> href="{{ base_url }}/assets/stylesheets/application.css" />
<!-- Extra palettes -->
{% if config.extra.palette %}
<link rel="stylesheet" type="text/css"
href="{{ base_url }}/assets/stylesheets/palettes.css" />
{% endif %}
<!-- Configure webfonts --> <!-- Configure webfonts -->
{% if config.extra.font != "none" %} {% if config.extra.font != "none" %}
{% set text = config.extra.get("font", {}).text | default("Ubuntu") %} {% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
@ -114,7 +120,15 @@
<!-- Custom header --> <!-- Custom header -->
{% block extrahead %}{% endblock %} {% block extrahead %}{% endblock %}
</head> </head>
<body>
<!-- Define palette -->
{% set palette = config.extra.get("palette", {}) %}
{% set primary = palette.primary | replace(' ', '-') | lower %}
{% set accent = palette.accent | replace(' ', '-') | lower %}
<body class="
{% if primary %}palette-primary-{{ primary }}{% endif %}
{% if accent %}palette-accent-{{ accent }}{% endif %}
">
<!-- <!--
Sadly the jinja template engine is not very flexible - it doesn't support Sadly the jinja template engine is not very flexible - it doesn't support