mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-23 23:21:00 +01:00
Fixed #6: Include multiple color palettes via mkdocs.yml
This commit is contained in:
squidfunk
parent
bf8be26e0a
commit
32a14cbb12
@ -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
|
||||
* Refactored templates (replaced if/else with modifiers where possible)
|
||||
|
||||
|
||||
1
material/assets/stylesheets/palettes-05ab2406df.css
Normal file
1
material/assets/stylesheets/palettes-05ab2406df.css
Normal file
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/palettes.css
Normal file
1
material/assets/stylesheets/palettes.css
Normal file
File diff suppressed because one or more lines are too long
@ -54,6 +54,9 @@
|
||||
}
|
||||
</style>
|
||||
<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" %}
|
||||
{% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
|
||||
{% set code = config.extra.get("font", {}).code | default("Ubuntu Mono") %}
|
||||
@ -74,7 +77,10 @@
|
||||
<script src="{{ base_url }}/assets/javascripts/modernizr-4ab42b99fd.js"></script>
|
||||
{% block extrahead %}{% endblock %}
|
||||
</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 %}
|
||||
{% set repo_id = repo_url | replace("https://github.com/", "") %}
|
||||
{% if repo_id[-1:] == "/" %}
|
||||
|
||||
@ -2,5 +2,6 @@
|
||||
"assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
|
||||
"assets/javascripts/application.js": "assets/javascripts/application-a10a824a49.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"
|
||||
}
|
||||
@ -74,14 +74,14 @@
|
||||
}
|
||||
|
||||
/*
|
||||
* Nested links
|
||||
* Nested links and anchors
|
||||
*/
|
||||
.toc li ul {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* Nested anchors
|
||||
*/
|
||||
.current + ul {
|
||||
margin-bottom: 9px;
|
||||
|
||||
221
src/assets/stylesheets/palettes.scss
Normal file
221
src/assets/stylesheets/palettes.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -86,6 +86,12 @@
|
||||
<link rel="stylesheet" type="text/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 -->
|
||||
{% if config.extra.font != "none" %}
|
||||
{% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
|
||||
@ -114,7 +120,15 @@
|
||||
<!-- Custom header -->
|
||||
{% block extrahead %}{% endblock %}
|
||||
</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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user