Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-28 01:10:58 +01:00
Code Issues Releases Wiki Activity

Slight facelift

Browse Source
This commit is contained in:
squidfunk 2017-11-19 16:02:33 +01:00 committed by Martin Donath
parent 823347fcb3
commit 042eb374a0
18 changed files with 107 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/javascripts/application-3545abc56a.js → material/assets/javascripts/application-23f8e48ddb.js
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-23f75ab9c7.palette.css
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-34bd9d9ec8.palette.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-63c41eb78d.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-6e761e1b0b.css
View File

File diff suppressed because one or more lines are too long

6
material/base.html
View File

@ -46,9 +46,9 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-6e761e1b0b.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-63c41eb78d.css">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-23f75ab9c7.palette.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-34bd9d9ec8.palette.css">
{% endif %}
{% endblock %}
{% block libs %}
@ -162,7 +162,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ base_url }}/assets/javascripts/application-3545abc56a.js"></script>
<script src="{{ base_url }}/assets/javascripts/application-23f8e48ddb.js"></script>
{% if lang.t("search.language") != "en" %}
{% set languages = lang.t("search.language").split(",") %}
{% if languages | length and languages[0] != "" %}

9
material/partials/header.html
View File

@ -16,14 +16,7 @@
<div class="md-flex__cell md-flex__cell--stretch">
<span class="md-flex__ellipsis md-header-nav__title">
{% block site_name %}
{% if page %}
{% for parent in page.ancestors %}
<span class="md-header-nav__parent">
{{ parent.title }}
</span>
{% endfor %}
{% endif %}
{{ page.title | default(config.site_name, true) }}
{{ config.site_name }}
{% endblock %}
</span>
</div>

6
material/partials/nav-item.html
View File

@ -9,7 +9,7 @@
{% else %}
<input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}">
{% endif %}
<label class="md-nav__link" for="{{ path }}" tabindex="0">
<label class="md-nav__link" for="{{ path }}">
{{ nav_item.title }}
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}">
@ -38,7 +38,7 @@
{{ nav_item.title }}
</label>
{% endif %}
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active" tabindex="0">
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
{{ nav_item.title }}
</a>
{% if toc_ | first is defined %}
@ -47,7 +47,7 @@
</li>
{% else %}
<li class="{{ class }}">
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link" tabindex="0">
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link">
{{ nav_item.title }}
</a>
</li>

54
src/assets/stylesheets/application.palette.scss
View File

@ -76,7 +76,7 @@ button[data-md-color-accent] {
"green": $clr-green-500,
"light-green": $clr-light-green-600,
"lime": $clr-lime-600,
"yellow": $clr-yellow-800,
"yellow": $clr-yellow-600,
"amber": $clr-amber-600,
"orange": $clr-orange-600,
"deep-orange": $clr-deep-orange-400,
@ -146,17 +146,57 @@ button[data-md-color-accent] {
// Tabs with outline
.md-tabs {
background: mix($color, $md-color-black, 75%);
// Fade-out tabs background upon scrolling
&[data-md-state="hidden"] {
background: $color;
}
background: $color;
}
}
}
}
// Overrides for white color
[data-md-color-primary="white"] {
// Application header (stays always on top)
.md-header {
background-color: $md-color-white;
color: $md-color-black;
}
// Search input
.md-search__input {
background-color: $md-color-black--lightest;
// Search input placeholder
&::placeholder {
color: $md-color-black--light;
}
}
// [tablet portrait -]: Layered navigation
@include break-to-device(tablet portrait) {
// Repository containing source
.md-nav__source {
background-color: $md-color-black--lightest;
color: $md-color-black;
}
}
// [tablet -]: Layered navigation
@include break-to-device(tablet) {
// Site title in main navigation
html & .md-nav--primary .md-nav__title--site {
background-color: $md-color-white;
color: $md-color-black;
}
}
// Table of contents
.md-nav--secondary {
border-left: 0.4rem solid $md-color-black--light;
}
}
// Build accent colors
@each $name, $color in (
"red": $clr-red-a400,

8
src/assets/stylesheets/extensions/_footnotes.scss
View File

@ -39,8 +39,8 @@
// Targeted anchor
&:target::before {
margin-top: -(5.6rem + 2.4rem + 1.8rem);
padding-top: (5.6rem + 2.4rem + 1.8rem);
margin-top: -(4.8rem + 2.4rem + 1.8rem);
padding-top: (4.8rem + 2.4rem + 1.8rem);
}
}
@ -71,8 +71,8 @@
// Targeted footnote
&:target::before {
margin-top: -(5.6rem + 2.4rem + 1rem);
padding-top: (5.6rem + 2.4rem + 1rem);
margin-top: -(4.8rem + 2.4rem + 1rem);
padding-top: (4.8rem + 2.4rem + 1rem);
pointer-events: none;
}

6
src/assets/stylesheets/extensions/_permalinks.scss
View File

@ -72,10 +72,10 @@
content: "";
}
// Targeted anchor (56px from header, 24px from sidebar offset)
// Targeted anchor (48px from header, 24px from sidebar offset)
&:target::before {
margin-top: -(5.6rem + 2.4rem + $delta);
padding-top: (5.6rem + 2.4rem + $delta);
margin-top: -(4.8rem + 2.4rem + $delta);
padding-top: (4.8rem + 2.4rem + $delta);
}
// Make permalink visible on hover

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

@ -106,7 +106,7 @@ hr {
display: table;
width: 100%;
height: 100%;
padding-top: 5.6rem;
padding-top: 4.8rem;
table-layout: fixed;
}

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

@ -26,23 +26,26 @@
// Application header (stays always on top)
.md-header {
@include z-depth(2);
position: fixed;
top: 0;
right: 0;
left: 0;
height: 5.6rem;
height: 4.8rem;
transition: background-color 0.25s;
background-color: $md-color-primary;
color: $md-color-white;
box-shadow:
0 0 0.4rem rgba(0, 0, 0, 0.14),
0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
z-index: 2;
// Hack: putting the header on the GPU avoids unnecessary repaints
backface-visibility: hidden;
// Always show shadow, in case JavaScript is not available
.no-js & {
@include z-depth(2);
box-shadow:
0 0 0.4rem rgba(0, 0, 0, 0.14),
0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
}
// [screen +]: Show shadow depending on scroll offset
@ -51,7 +54,9 @@
// Show and animate shadow
&[data-md-state="shadow"] {
@include z-depth(2);
box-shadow:
0 0 0.4rem rgba(0, 0, 0, 0.14),
0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
}
}
@ -63,7 +68,7 @@
// Navigation within header
.md-header-nav {
padding: 0.4rem;
padding: 0 0.4rem;
// Icon buttons
&__button {
@ -124,23 +129,6 @@
line-height: 4.8rem;
}
// Parent page title
&__parent {
color: $md-color-white--light;
// Ancestor separator
&::after {
display: inline;
color: $md-color-white--lighter;
content: "/";
}
// [mobile portrait -]: Hide on very small screens
@include break-to-device(mobile portrait) {
display: none;
}
}
// Repository containing source
&__source {
display: none;

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

@ -294,7 +294,7 @@
.md-nav__link {
position: relative;
margin-top: 0;
padding: 1.6rem;
padding: 1.2rem 1.6rem;
// Rotate icon
&::after {
@ -407,7 +407,7 @@
// Repository containing source
&__source {
display: block;
padding: 0.4rem;
padding: 0 0.4rem;
background-color: mix($md-color-primary, $md-color-black, 75%);
color: $md-color-white;
}

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

@ -55,8 +55,8 @@ $md-toggle__search--checked:
position: absolute;
top: 0.4rem;
left: 0.4rem;
width: 4rem;
height: 4rem;
width: 3.6rem;
height: 3.6rem;
transform-origin: center;
transition:
transform 0.3s 0.1s,
@ -155,6 +155,7 @@ $md-toggle__search--checked:
@include break-from-device(tablet landscape) {
position: relative;
width: 23rem;
padding: 0.2rem 0;
float: right;
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
}
@ -210,27 +211,31 @@ $md-toggle__search--checked:
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
width: 100%;
height: 5.6rem;
height: 4.8rem;
font-size: 1.8rem;
}
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
width: 100%;
height: 4rem;
padding-left: 4.8rem;
height: 3.6rem;
padding-left: 4.4rem;
transition:
background-color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1),
color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
border-radius: 0.2rem;
background-color: $md-color-black--lighter;
color: $md-color-white;
color: inherit;
font-size: ms(0);
// Icon color
+ .md-search__icon {
color: inherit;
}
// Placeholder color
+ .md-search__icon,
&::placeholder {
color: $md-color-white;
color: $md-color-white--light;
}
// Hovered search field
@ -271,8 +276,8 @@ $md-toggle__search--checked:
// Search icon
&[for="search"] {
top: $md-icon-padding;
left: $md-icon-padding + $md-icon-margin;
top: 0.6rem;
left: 1rem;
// Set search icon on pseudo class, so it can be overridden for mobile
// and tablet when the search is rendered in an overlay
@ -282,7 +287,7 @@ $md-toggle__search--checked:
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
top: 1.6rem;
top: 1.2rem;
left: 1.6rem;
// Show back arrow instead of search icon
@ -294,8 +299,8 @@ $md-toggle__search--checked:
// Reset button
&[type="reset"] {
top: $md-icon-padding;
right: $md-icon-padding + $md-icon-margin;
top: 0.6rem;
right: 1rem;
transform: scale(0.125);
transition:
transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
@ -304,7 +309,7 @@ $md-toggle__search--checked:
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
top: 1.6rem;
top: 1.2rem;
right: 1.6rem;
}
@ -331,13 +336,13 @@ $md-toggle__search--checked:
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
top: 5.6rem;
top: 4.8rem;
bottom: 0;
}
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
top: 4rem;
top: 3.8rem;
transition: opacity 0.4s;
opacity: 0;
@ -353,27 +358,7 @@ $md-toggle__search--checked:
// Wrapper for scrolling on overflow
&__scrollwrap {
height: 100%;
// Pure CSS scrolling shadows, taken from
// http://lea.verou.me/2012/04/background-attachment-local/
background:
linear-gradient(
to bottom,
$md-color-white 10%,
$md-color-white--transparent
),
linear-gradient(
to bottom,
$md-color-black--lighter,
$md-color-black--lightest 35%,
$md-color-black--transparent 60%
);
background-attachment: local, scroll;
background-color: $md-color-white;
background-repeat: no-repeat;
background-size: 100% 2rem, 100% 1rem;
// End of scrolling shadow definition
box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
@ -427,11 +412,11 @@ $md-toggle__search--checked:
background-color: $md-color-black--lightest;
color: $md-color-black--light;
font-size: ms(-1);
line-height: 4rem;
line-height: 3.6rem;
// [tablet landscape +]: Increase left indent
@include break-from-device(tablet landscape) {
padding-left: 4.8rem;
padding-left: 4.4rem;
}
}
@ -480,7 +465,7 @@ $md-toggle__search--checked:
// [tablet landscape +]: Increase left indent
@include break-from-device(tablet landscape) {
padding-left: 4.8rem;
padding-left: 4.4rem;
}
// Document
@ -492,6 +477,7 @@ $md-toggle__search--checked:
position: absolute;
left: 0;
margin: 0.2rem;
transition: opacity 0.25s;
color: $md-color-black--light;
content: "\E880"; // find_in_page
@ -504,7 +490,7 @@ $md-toggle__search--checked:
// Title
.md-search-result__title {
margin: 1.3rem 0;
margin: 1.1rem 0;
font-size: ms(0);
font-weight: 400;
line-height: 1.4;

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

@ -47,7 +47,7 @@ $md-toggle__drawer--checked:
// Lock sidebar to container height (account for fixed header)
&[data-md-state="lock"] {
position: fixed;
top: 5.6rem;
top: 4.8rem;
}
// [tablet -]: Convert navigation to drawer

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

@ -28,7 +28,7 @@
.md-tabs {
width: 100%;
transition: background 0.25s;
background: mix($md-color-primary, $md-color-black, 75%);
background: $md-color-primary;
overflow: auto;
// [tablet -]: Hide tabs for tablet and below, as they don't make any sense
@ -86,7 +86,6 @@
// Fade-out tabs background upon scrolling
&[data-md-state="hidden"] {
background: $md-color-primary;
pointer-events: none;
// Hide tabs upon scrolling - disable transition to minimizes repaints whilte

9
src/partials/header.html
View File

@ -51,14 +51,7 @@
<div class="md-flex__cell md-flex__cell--stretch">
<span class="md-flex__ellipsis md-header-nav__title">
{% block site_name %}
{% if page %}
{% for parent in page.ancestors %}
<span class="md-header-nav__parent">
{{ parent.title }}
</span>
{% endfor %}
{% endif %}
{{ page.title | default(config.site_name, true) }}
{{ config.site_name }}
{% endblock %}
</span>
</div>