starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-07-23 22:33:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

Integrated palettes from 0.2.x

Browse Source
This commit is contained in:
squidfunk
2016-12-17 12:53:24 +01:00
parent b44c503008
commit 41fb9cd97a
16 changed files with 1056 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/assets/stylesheets/application.palettes.scss Normal file
View File

@@ -0,0 +1,171 @@
////
/// 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
////
// ----------------------------------------------------------------------------
// Dependencies
// ----------------------------------------------------------------------------
@import "modular-scale";
@import "material-color";
@import "material-shadows";
// ----------------------------------------------------------------------------
// Local imports
// ----------------------------------------------------------------------------
@import "helpers/break";
@import "helpers/px2em";
@import "config";
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// Build primary palette
@each $name, $color in (
"red": $clr-red-400,
"pink": $clr-pink-500,
"purple": $clr-purple-400,
"deep-purple": $clr-deep-purple-400,
"indigo": $clr-indigo-500,
"blue": $clr-blue-500,
"light-blue": $clr-light-blue-500,
"cyan": $clr-cyan-500,
"teal": $clr-teal-500,
"green": $clr-green-500,
"light-green": $clr-light-green-600,
"lime": $clr-lime-600,
"yellow": $clr-yellow-800,
"amber": $clr-amber-600,
"orange": $clr-orange-600,
"deep-orange": $clr-deep-orange-400,
"brown": $clr-brown-500,
"grey": $clr-grey-600,
"blue-grey": $clr-blue-grey-600
) {
[data-md-palette-primary="#{$name}"] {
// Links in typesetted content
.md-typeset a {
color: $color;
}
// Application header (stays always on top)
.md-header {
background-color: $color;
}
// Table of contents
.md-nav--secondary {
border-left: 0.4rem solid $color;
}
}
}
// Build accent palette
@each $name, $color in (
"red": $clr-red-a400,
"pink": $clr-pink-a400,
"purple": $clr-purple-a200,
"deep-purple": $clr-deep-purple-a200,
"indigo": $clr-indigo-a200,
"blue": $clr-blue-a200,
"light-blue": $clr-light-blue-a700,
"cyan": $clr-cyan-a700,
"teal": $clr-teal-a700,
"green": $clr-green-a700,
"light-green": $clr-light-green-a700,
"lime": $clr-lime-a700,
"yellow": $clr-yellow-a700,
"amber": $clr-amber-a700,
"orange": $clr-orange-a400,
"deep-orange": $clr-deep-orange-a200
) {
[data-md-palette-accent="#{$name}"] {
// Typesetted content
.md-typeset {
// Hovered and active links
a:hover,
a:active {
color: $color;
}
// Hovered scrollbar thumb
pre::-webkit-scrollbar-thumb:hover,
.codehilite::-webkit-scrollbar-thumb:hover {
background-color: $color;
}
// Active or targeted back reference
.footnote li:hover .footnote-backref:hover,
.footnote li:target .footnote-backref {
color: $color;
}
// Active or targeted permalink
[id]:hover .headerlink:hover,
[id]:target .headerlink,
[id] .headerlink:focus {
color: $color;
}
}
// Current or hovered link
.md-nav__link:hover,
.md-nav__link:active,
.md-nav__link--active {
color: $color;
}
// [tablet portrait -]: Show table of contents in drawer
@include break-to-device(tablet portrait) {
// Show link to table of contents - higher specificity is necessary to
// display the table of contents inside the drawer
html & .md-nav__link[for="toc"]::after {
color: $color;
}
}
// Search result
.md-search-result {
// Hovered scrollbar thumb
&__scrollwrap::-webkit-scrollbar-thumb:hover {
background-color: $color;
}
// Hovered link
&__link:hover {
background-color: transparentize($color, 0.9);
}
}
// Wrapper for scrolling on overflow
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
background-color: $color;
}
}
}

12
src/assets/stylesheets/base/_typeset.scss
View File

@@ -149,7 +149,7 @@ kbd {
transition: color 0.125s;
}
// Active links
// Hovered and active links
&:hover,
&:active {
color: $md-color-accent;
@@ -169,7 +169,7 @@ kbd {
// Code blocks
code,
pre {
background: $md-code-background;
background-color: $md-code-background;
color: $md-code-color;
font-size: 85%;
}
@@ -202,7 +202,7 @@ kbd {
h5 code,
h6 code {
margin: 0;
background: transparent;
background-color: transparent;
box-shadow: none;
}
@@ -211,7 +211,7 @@ kbd {
margin: inherit;
padding: inherit;
border-radius: none;
background: inherit;
background-color: inherit;
color: inherit;
box-shadow: none;
}
@@ -251,7 +251,7 @@ kbd {
// Reset, if code is inside pre
> code {
margin: 0;
background: none;
background-color: none;
font-size: inherit;
box-shadow: none;
box-decoration-break: none;
@@ -284,7 +284,7 @@ kbd {
margin: 0 0.25em;
padding: 0.0625em 0;
border-radius: 0.2rem;
background: transparentize($clr-yellow-500, 0.5);
background-color: transparentize($clr-yellow-500, 0.5);
box-shadow:
0.25em 0 0 transparentize($clr-yellow-500, 0.5),
-0.25em 0 0 transparentize($clr-yellow-500, 0.5);

4
src/assets/stylesheets/extensions/_admonition.scss
View File

@@ -31,7 +31,7 @@
padding: 0.8rem 1.2rem;
border-left: 3.2rem solid transparentize($clr-blue-a200, 0.6);
border-radius: 0.2rem;
background: transparentize($clr-blue-a200, 0.85);
background-color: transparentize($clr-blue-a200, 0.85);
font-size: ms(-1);
// Icon
@@ -73,7 +73,7 @@
&%#{nth($names, 1)},
&.#{nth($names, 1)} {
border-color: transparentize($tint, 0.6);
background: transparentize($tint, 0.85);
background-color: transparentize($tint, 0.85);
// Icon
&::before {

10
src/assets/stylesheets/extensions/_codehilite.scss
View File

@@ -196,7 +196,7 @@ $codehilite-whitespace: transparent;
display: block;
margin: 0 -1.2rem;
padding: 0 1.2rem;
background: transparentize($clr-yellow-500, 0.5);
background-color: transparentize($clr-yellow-500, 0.5);
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
@@ -219,7 +219,7 @@ $codehilite-whitespace: transparent;
margin: 1.0em 0;
padding: 1.0rem 1.2rem 0.8rem;
border-radius: 0.2rem;
background: $md-code-background;
background-color: $md-code-background;
color: $md-code-color;
line-height: 1.4;
overflow: auto;
@@ -248,7 +248,7 @@ $codehilite-whitespace: transparent;
min-width: 100%;
margin: 0;
padding: 0;
background: transparent;
background-color: transparent;
overflow: visible;
vertical-align: top;
}
@@ -299,7 +299,7 @@ $codehilite-whitespace: transparent;
// Disable pointer-events, so code can be easily copied without
// accidentally also copying the line numbers
.linenos {
background: $md-color-black--lightest;
background-color: $md-color-black--lightest;
color: $md-color-black--lighter;
user-select: none;
@@ -307,7 +307,7 @@ $codehilite-whitespace: transparent;
pre {
margin: 0;
padding: 0;
background: transparent;
background-color: transparent;
color: inherit;
text-align: right;
}

2
src/assets/stylesheets/extensions/pymdown/_critic.scss
View File

@@ -32,7 +32,7 @@
margin: 0 0.25em;
padding: 0.0625em 0;
border-radius: 0.2rem;
background: $md-code-background; // TODO: rename, centralize somehow
background-color: $md-code-background; // TODO: rename, centralize somehow
color: $md-code-color;
box-shadow:
0.25em 0 0 $md-code-background,

2
src/assets/stylesheets/layout/_base.scss
View File

@@ -109,7 +109,7 @@ hr {
width 0s 0.25s,
height 0s 0.25s,
opacity 0.25s;
background: $md-color-black--light;
background-color: $md-color-black--light;
opacity: 0;
z-index: 2;

2
src/assets/stylesheets/layout/_footer.scss
View File

@@ -37,7 +37,7 @@
// Footer container
&__inner {
background: $md-color-black;
background-color: $md-color-black;
color: $md-color-white;
}
}

3
src/assets/stylesheets/layout/_header.scss
View File

@@ -33,7 +33,8 @@
right: 0;
left: 0;
height: 5.6rem;
background: $md-color-primary;
transition: background-color 0.25s;
background-color: $md-color-primary;
color: $md-color-white;
z-index: 1;

11
src/assets/stylesheets/layout/_nav.scss
View File

@@ -31,6 +31,7 @@
// Table of contents
&--secondary {
transition: border-left 0.25s;
border-left: 0.4rem solid $md-color-primary;
}
@@ -148,14 +149,14 @@
// Adjust styles for primary navigation
&--primary {
background: $md-color-white;
background-color: $md-color-white;
// Move subsequent navigations off
.md-nav__toggle ~ .md-nav {
@include z-depth(4);
left: 0.4rem;
background: $md-color-white;
background-color: $md-color-white;
}
// List title - higher specificity is necessary to ensure that the title
@@ -163,7 +164,7 @@
html & .md-nav__title {
position: relative;
padding: 0.4rem 1.6rem 0.4rem 5.6rem;
background: $md-color-black--lightest;
background-color: $md-color-black--lightest;
color: $md-color-black--light;
font-size: 1.8rem;
font-weight: 400;
@@ -222,7 +223,7 @@
// Color of icon should inherit link color on hover
&:hover::after {
color: $md-color-accent;
color: inherit;
}
}
@@ -324,7 +325,7 @@
&__source {
display: block;
padding: 0.4rem;
background: $md-color-black;
background-color: $md-color-black;
color: $md-color-white;
}
}

13
src/assets/stylesheets/layout/_search.scss
View File

@@ -56,7 +56,7 @@
transform 0.3s 0.1s,
opacity 0.2s 0.2s;
border-radius: 2.0rem;
background: $md-color-white;
background-color: $md-color-white;
opacity: 0;
overflow: hidden;
z-index: 1;
@@ -187,7 +187,7 @@
background-color 0.25s,
color 0.25s;
border-radius: 0.2rem;
background: $md-color-black--lighter;
background-color: $md-color-black--lighter;
color: $md-color-white;
font-size: ms(0);
@@ -200,13 +200,13 @@
// Hovered search field
&:hover {
background: $md-color-white--lightest;
background-color: $md-color-white--lightest;
}
// Set light background on active search field
[data-md-toggle="search"]:checked ~ .md-header & {
border-radius: 0.2rem 0.2rem 0 0;
background: $md-color-white;
background-color: $md-color-white;
color: $md-color-black;
text-overflow: none;
@@ -343,7 +343,7 @@
// Search metadata
&__meta {
padding: 0 1.6rem;
background: $md-color-black--lightest;
background-color: $md-color-black--lightest;
color: $md-color-black--light;
font-size: ms(-1);
line-height: 4.0rem;
@@ -376,7 +376,7 @@
// Hovered link
&:hover {
background: transparentize($md-color-accent, 0.9);
background-color: transparentize($md-color-accent, 0.9);
}
// [tablet landscape +]: Increase left indent
@@ -400,6 +400,7 @@
line-height: 1.4;
}
// Search result teaser
&__teaser {
margin: 0.5em 0;;
color: $md-color-black--light;

2
src/assets/stylesheets/layout/_sidebar.scss
View File

@@ -56,7 +56,7 @@
transition:
transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
box-shadow 0.25s;
background: $md-color-white;
background-color: $md-color-white;
z-index: 2;
// Just hide drawer, if browser doesn't support 3D transforms

63
src/base.html
View File

@@ -87,6 +87,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/application.palettes.css" />
{% endif %}
<!-- Custom stylesheets -->
{% for path in extra_css %}
<link rel="stylesheet" type="text/css" href="{{ path }}" />
@@ -94,9 +100,19 @@
{% endblock %}
<!-- Block: custom front matter -->
{%- block extrahead -%}{% endblock %}
{% block extrahead %}{% endblock %}
</head>
<body>
<!-- Integrate palette colors, if defined -->
{% set palette = config.extra.get("palette", {}) %}
{% set primary = palette.primary | replace(" ", "-") | lower %}
{% set accent = palette.accent | replace(" ", "-") | lower %}
{% if primary or accent %}
<body data-md-palette-primary="{{ primary }}"
data-md-palette-accent="{{ accent }}">
{% else %}
<body>
{% endif %}
<!-- State toggles -->
<input class="md-toggle" data-md-toggle="drawer"
@@ -233,15 +249,40 @@
{% block analytics %}
{% if config.google_analytics %}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||
function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;
a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script',
'//www.google-analytics.com/analytics.js','ga');
ga('create',
'{{ config.google_analytics[0] }}',
'{{ config.google_analytics[1] }}');
ga('send', 'pageview');
(function(i,s,o,g,r,a,m){
i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||
[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
m.parentNode.insertBefore(a,m)
})(window, document,
"script", "https://www.google-analytics.com/analytics.js", "ga");
/* General initialization */
ga("create",
"{{ config.google_analytics[0] }}",
"{{ config.google_analytics[1] }}");
ga("set", "anonymizeIp", true);
ga("send", "pageview");
/* Track outbound links */
var links = document.getElementsByTagName("a");
Array.prototype.map.call(links, function(item) {
if (item.host != document.location.host) {
item.addEventListener("click", function() {
var action = item.getAttribute("data-action") || "follow";
ga("send", "event", "outbound", action, item.href);
});
}
});
/* Register handler to log search on blur */
var query = document.forms.search.query;
query.addEventListener("blur", function() {
if (this.value) {
var path = document.location.pathname;
ga("send", "pageview", path + "?q=" + this.value);
}
});
</script>
{% endif %}
{% endblock %}