Added support for footnotes

This commit is contained in:
squidfunk
2016-09-02 22:59:14 +02:00
parent 930c206132
commit 2eed3bdb4f
28 changed files with 2178 additions and 102 deletions

View File

@@ -24,15 +24,6 @@
* Nothing to see here, move along
* ------------------------------------------------------------------------- */
// Specificity?
.md-content .admonition-title {
margin: 0;
+ * {
margin-top: 0;
margin-bottom: 0;
}
}
.md-search__suggest {
background: $md-color-white;
border-radius: 0 0 px2rem(3px) px2rem(3px);

View File

@@ -51,6 +51,7 @@
@import "extensions/admonition";
@import "extensions/codehilite";
@import "extensions/footnotes";
@import "extensions/permalinks";
@import "shame";

View File

@@ -73,7 +73,7 @@ pre, code {
* Body copy
*/
p {
margin: 2.0rem 0;
margin: 1.25em 0;
}
/*
@@ -85,16 +85,6 @@ pre, code {
line-height: 1.3;
letter-spacing: -.01em;
color: $md-color-black--light;
/*
* Correct anchor offset
*/
&:before {
content: " ";
display: block;
padding-top: (5.6rem + 2.4rem + 3.0rem);
margin-top: -(5.6rem + 2.4rem + 3.0rem);
}
}
/*
@@ -106,16 +96,6 @@ pre, code {
font-weight: 300;
line-height: 1.4;
letter-spacing: -.01em;
/*
* Correct anchor offset
*/
&:before {
content: " ";
display: block;
padding-top: (5.6rem + 2.4rem + 0.2rem);
margin-top: -(5.6rem + 2.4rem + 0.2rem);
}
}
/*
@@ -127,16 +107,6 @@ pre, code {
font-weight: 400;
line-height: 1.5;
letter-spacing: -.01em;
/*
* Correct anchor offset
*/
&:before {
content: " ";
display: block;
padding-top: (5.6rem + 2.4rem + 0.4rem);
margin-top: -(5.6rem + 2.4rem + 0.4rem);
}
}
/*
@@ -147,23 +117,13 @@ pre, code {
}
/*
* 4th, 5th and 6th level headline
* 4th level headline
*/
h4 {
margin-top: 1.6rem;
font-size: ms(0);
font-weight: 700;
letter-spacing: -.01em;
/*
* Correct anchor offset
*/
&:before {
content: " ";
display: block;
padding-top: (5.6rem + 2.4rem + 0.8rem);
margin-top: -(5.6rem + 2.4rem + 0.8rem);
}
}
/*
@@ -175,16 +135,6 @@ pre, code {
font-weight: 700;
letter-spacing: -.01em;
color: $md-color-black--light;
/*
* Correct anchor offset
*/
&:before {
content: " ";
display: block;
padding-top: (5.6rem + 2.4rem + 1.0rem);
margin-top: -(5.6rem + 2.4rem + 1.0rem);
}
}
/*
@@ -199,7 +149,14 @@ pre, code {
*/
a {
color: $md-color-primary;
transition: color .125s;
/*
* Also enable transition on pseudo elements
*/
&,
&:before {
transition: color .125s;
}
/*
* Active links
@@ -256,9 +213,18 @@ pre, code {
* Smaller text
*/
small {
font-size: smaller;
color: $md-color-black--light;
}
/*
* Superscript and subscript
*/
sup,
sub {
margin-left: 0.1rem;
}
/*
* Horizontal separators
*/
@@ -300,7 +266,8 @@ pre, code {
/*
* Unordered and ordered lists
*/
ul, ol {
ul,
ol {
margin-left: 1.0rem;
/*
@@ -320,7 +287,8 @@ pre, code {
/*
* Nested lists
*/
ul, ol {
ul,
ol {
padding-top: 1.0rem;
margin-bottom: 1.0rem;
margin-left: 1.0rem;

View File

@@ -61,6 +61,34 @@
line-height: 2.0rem;
text-transform: uppercase;
color: $clr-blue-a400;
/*
* Ensure smaller spacing to next element
*/
html & {
margin-bottom: 1.6rem;
}
/*
* Ensure smaller spacing to next element
*/
html & + * {
margin-top: 1.6rem;
}
}
/*
* Remove spacing on first element
*/
:first-child {
margin-top: 0;
}
/*
* Remove spacing on last element
*/
:last-child {
margin-bottom: 0;
}
/*
@@ -69,7 +97,7 @@
@each $names, $appearance in (
tip idea: $clr-teal-a700 "whatshot",
success check: $clr-green-a400 "done",
warning: $clr-orange-a400 "warning",
warning warn: $clr-orange-a400 "warning",
failure fail: $clr-red-a200 "clear",
danger fatal: $clr-red-a400 "flash_on",
bug error: $clr-pink-a400 "bug_report"

View File

@@ -0,0 +1,118 @@
/*
* 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.
*/
/* ----------------------------------------------------------------------------
* Footnotes extension
* ------------------------------------------------------------------------- */
/*
* Scoped in typesetted content for greater specificity
*/
.md-content--typeset {
/*
* Footnote
*/
.footnote {
@extend small;
/*
* Remove additional spacing on footnotes
*/
> ol {
margin-left: 0;
/*
* Single footnote
*/
> li {
// TODO: this doesn't work entirely
// &:before {
// display: block;
// content: " ";
// padding-top: (5.6rem + 2.4rem + 0.4rem);
// margin-top: -(5.6rem + 2.4rem + 0.4rem);
// }
/*
* Make permalink visible on hover
*/
&:hover .footnote-backref,
&:target .footnote-backref {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/*
* Active or targeted permalink
*/
&:hover .footnote-backref:hover,
&:target .footnote-backref {
color: $md-color-accent;
}
}
}
/*
* Correct anchor offset;
*/
&-ref:before {
position: absolute;
content: " ";
pointer-events: none;
padding-top: (5.6rem + 2.4rem + 0.4rem);
margin-top: -(5.6rem + 2.4rem + 0.4rem);
}
/*
* Make backref transparent for custom icon
*/
&-backref {
@extend .md-icon;
position: absolute;
font-size: 2.0rem;
vertical-align: middle;
opacity: 0;
color: $md-color-black--lighter;
transform: translate3d(0.5rem, 0, 0);
transition: opacity .125s .125s,
transform .25s .125s,
color .25s;
/*
* Hack: remove Unicode arrow for icon
*/
&:first-letter {
font-size: 0;
}
/*
* Icon
*/
&:after {
content: "keyboard_return";
}
}
}
}

View File

@@ -25,9 +25,9 @@
* ------------------------------------------------------------------------- */
/*
* Scope in content for greater specificity
* Scoped in typesetted content for greater specificity
*/
.md-content {
.md-content--typeset {
/*
* Permalink
@@ -41,26 +41,47 @@
transition: opacity .125s .25s,
transform .25s .25s,
color .25s;
}
/*
* Only show permalinks in active state
* All headers with permalinks have ids
*/
h1, h2, h3, h4, h5, h6 {
[id] {
/*
* Make permalink visible on hover
*/
&:hover .headerlink,
&:target .headerlink {
margin-left: 1.0rem;
opacity: 1;
transform: translate3d(0, 0, 0);
}
/*
* Active or targeted link
* Active or targeted permalink
*/
&:hover .headerlink:hover,
&:target .headerlink {
color: $md-color-accent;
}
}
/*
* Correct anchor offset of headlines
*/
@each $level, $delta in (
h1: 3.0rem,
h2: 0.2rem,
h3: 0.4rem,
h4: 0.6rem,
h5: 1.0rem,
h6: 1.0rem
) {
#{$level}[id]:before {
content: " ";
display: block;
padding-top: (5.6rem + 2.4rem + $delta);
margin-top: -(5.6rem + 2.4rem + $delta);
}
}
}

View File

@@ -130,10 +130,13 @@
{{ copyright }} &ndash;
{% endif %}
This document was created with
<a href="http://www.mkdocs.org" target="_blank">MkDocs</a>
<a href="http://www.mkdocs.org">
MkDocs
</a>
and the
<a href="http://squidfunk.github.io/mkdocs-material/"
target="_blank">Material</a>
<a href="http://squidfunk.github.io/mkdocs-material/">
Material
</a>
theme.
</small>
</article>