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

Added support for tasklist and critic extension + em fixes

Browse Source
This commit is contained in:
squidfunk 2016-11-05 23:26:07 +01:00
parent 528afd7d7f
commit 65f23355c8
24 changed files with 321 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/extensions/footnotes.md
View File

@ -82,4 +82,3 @@ Result:
<a href="#fn:2">Jump to footnote at the bottom of the page</a>
[Footnotes]: https://pythonhosted.org/Markdown/extensions/footnotes.html
[PyMdown Extensions]: https://facelessuser.github.io/pymdown-extensions

55
docs/extensions/pymdown/tasklist.md
View File

@ -0,0 +1,55 @@
# Tasklist
The [Tasklist][] extension included in the [PyMdown Extensions][] package adds
support for styled checkbox lists. This is useful for keeping track of tasks
and showing what has been done and has yet to be done.
## Installation
Make sure that the PyMdown Extensions package [is installed][] and add the
following lines to your `mkdocs.yml`:
``` yaml
markdown_extensions:
- pymdownx.tasklist(custom_checkbox=true)
```
The `custom_checkbox` flag adds additional markup for better styling, so it is
highly recommended to add this flag, as the Material theme supports it.
## Usage
Checkbox lists are like regular lists, but prefixed with `[ ]` empty or `[x]`
filled checkboxes.
Example:
``` markdown
* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
* [x] Nulla lobortis egestas semper
* [x] Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
* [ ] Vestibulum convallis sit amet nisi a tincidunt
* [x] In hac habitasse platea dictumst
* [x] In scelerisque nibh non dolor mollis congue sed et metus
* [x] Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
* [ ] Praesent sed risus massa
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
* [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
```
Result:
* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
* [x] Nulla lobortis egestas semper
* [x] Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
* [ ] Vestibulum convallis sit amet nisi a tincidunt
* [x] In hac habitasse platea dictumst
* [x] In scelerisque nibh non dolor mollis congue sed et metus
* [x] Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
* [ ] Praesent sed risus massa
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
* [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
[Tasklist]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
[PyMdown Extensions]: https://facelessuser.github.io/pymdown-extensions
[is installed]: /extensions/pymdown/overview/#installation

BIN
docs/images/colors.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 254 KiB

BIN
docs/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
docs/images/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 145 KiB

0
docs/reference/cpp/api/one.md
View File

0
docs/reference/cpp/api/two.md
View File

0
docs/reference/cpp/one.md
View File

0
docs/reference/cpp/two.md
View File

0
docs/reference/java/one.md
View File

0
docs/reference/java/two.md
View File

27
docs/specimen.md
View File

@ -14,6 +14,33 @@ Naturally, the Material theme defines __bold__ and _italic_ styles, makes it
easy to write `fenced inline code blocks`, [links](#) and <kbd>Keyboard</kbd>
<kbd>+</kbd> <kbd>Commands</kbd>.
* test
* test
* Material's typographical system follows the idea of __vertical rhythm__, which
means it tries to establish a _consistent visual rhythm_ to the content of the
page to make reading pleasant and easy on the eyes. It's a simple concept but
rather hard to implement correctly. Luckily, the Material theme has already
1. test
2. test
1. Material's typographical system follows the idea of __vertical rhythm__, which
means it tries to establish a _consistent visual rhythm_ to the content of the
page to make reading pleasant and easy on the eyes. It's a simple concept but
rather hard to implement correctly. Luckily, the Material theme has already
2. Material's typographical system follows the idea of __vertical rhythm__, which
means it tries to establish a _consistent visual rhythm_ to the content of the
page to make reading pleasant and easy on the eyes. It's a simple concept but
rather hard to implement correctly. Luckily, the Material theme has already
3. Material's typographical system follows the idea of __vertical rhythm__, which
means it tries to establish a _consistent visual rhythm_ to the content of the
page to make reading pleasant and easy on the eyes. It's a simple concept but
rather hard to implement correctly. Luckily, the Material theme has already
3. test
1. test
2. test
3. test
* test
* test
### Headings <small>w/ or w/o secondary text</small>
Besides the default HTML headings `<h2>` to `<h6>`, the representational

1
material/assets/stylesheets/application-869f33f02e.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-9cd3c99a66.css
View File

File diff suppressed because one or more lines are too long

1
mkdocs.yml
View File

@ -76,6 +76,7 @@ pages:
- Permalinks: extensions/permalinks.md
- PyMdown:
- Overview: extensions/pymdown/overview.md
- Tasklist: extensions/pymdown/tasklist.md
- Specimen: specimen.md
- Customization: customization.md
- License: license.md

161
src/assets/stylesheets/_shame.scss
View File

@ -24,15 +24,6 @@
// Rules
// ----------------------------------------------------------------------------
// TODO today:
// x refactor search JavaScript (production-ready, namespacing not important)
// x refactor footnotes extension
// 2. include table styles
// 3. make nav bar production ready (webkit overflow scrolling)
// TODO: Indexing... meta search result, always show!
// TODO: offset error in table of contents on specimen on checklists stuff
// --> breaks on multiple <a> tags
@include break-to-device(tablet portrait) {
.md-search-result__link {
padding: 0 1.6rem;
@ -99,108 +90,6 @@
}
}
// .md-nav--secondary > .md-nav__title {
// // -webkit-overflow-scrolling: touch;
// @include z-depth(1);
// }
// .checklist {
//
// li {
// position: relative;
// list-style-type: none;
//
// &::before {
// @extend %md-icon;
//
// position: absolute;
// appearance: none;
// color: blue;
//
// content: "check_box";
// font-size: 2.4rem;
// }
// }
//
// input[type="checkbox"]:checked {
// width: 20px;
// // & ~ .checklist li::after {
// // color: red;
// // }
// }
// }
// Inline code blocks
ins.critic, del.critic, mark {
margin: 0 0.4rem;
padding: 0.1rem 0;
word-break: break-word;
box-decoration-break: clone;
border-radius: 0.2rem;
// &::before {
// @extend %md-icon;
//
// color: $md-color-black--light;
//
// font-size: 1.6rem;
// padding-right: 0.2rem;
// vertical-align: -0.2rem;
// }
}
ins.critic {
background: #DDFFDD;
box-shadow: 0.4rem 0 0 #DDFFDD,
-0.4rem 0 0 #DDFFDD;
text-decoration: none;
// &::before {
// content: "add";
// }
}
del.critic {
background: #FFDDDD;
box-shadow: 0.4rem 0 0 #FFDDDD,
-0.4rem 0 0 #FFDDDD;
//
// &::before {
// content: "remove";
// }
}
// Not critic-specific, also used for code hilite!
mark {
background: #FFFF00;
box-shadow: 0.4rem 0 0 #FFFF00,
-0.4rem 0 0 #FFFF00; // ligher yellow...
// overflow: auto; // TODO: remove this, just needed to rebuild
}
.critic.comment {
margin: 0 0.4rem;
padding: 0.1rem 0;
border-radius: 0.2rem;
background: #F0F0F0;
color: #37474F;
// font-size: 85%;
box-shadow: 0.4rem 0 0 #F0F0F0,
-0.4rem 0 0 #F0F0F0; // darker than code!!!
box-decoration-break: clone;
&::before {
@extend %md-icon;
color: $md-color-black--lighter;
content: "chat";
font-size: 1.6rem;
padding-right: 0.2rem;
vertical-align: -0.2rem;
}
}
.md-button {
float: right;
margin-top: 9px;
@ -209,53 +98,3 @@ mark {
font-weight: 700;
text-transform: uppercase;
}
.task-list-item {
list-style-type: none !important;
}
.task-list-item input[type="checkbox"] {
margin: 0 4px 0.25em -20px;
vertical-align: middle;
}
.task-list-control {
display: inline; /* Ensure label is inline incase theme sets it to block.*/
}
.task-list-control {
position: relative;
display: inline-block;
color: #555;
cursor: pointer;
}
.task-list-control input[type="checkbox"] {
position: absolute;
opacity: 0;
z-index: -1; /* Put the input behind the label so it doesn't overlay text */
}
.task-list-indicator {
position: absolute;
top: -8px;
left: -18px;
display: block;
width: 14px;
height: 14px;
color: #eee;
background-color: #eee;
border-radius: .25rem;
}
.task-list-control input[type="checkbox"]:checked + .task-list-indicator::before {
display: block;
margin-top: -4px;
margin-left: 2px;
font-size: 16px;
line-height: 1;
content: "✔";
color: #1EBB52;
}
// TODO: integrate stylelint and property order!

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

@ -61,7 +61,10 @@ kbd {
// Rules: typesetted content
// ----------------------------------------------------------------------------
// Content that is typeset
// Content that is typeset - if possible, all margins, paddings and font sizes
// should be set in ems, so nested blocks (e.g. Admonition) render correctly,
// except headlines that should only appear on the top level and need to have
// consistent spacing due to layout issues
.md-typeset {
font-size: ms(0);
line-height: 1.6;
@ -132,7 +135,7 @@ kbd {
// Horizontal separators
hr {
margin: 2.4rem 0;
margin: 1.5em 0;
border-bottom: 0.1rem dotted $md-color-black--lighter;
}
@ -171,14 +174,16 @@ kbd {
font-size: 85%;
}
// Inline code blocks
// Inline code blocks, correct relative ems for smaller font size
code {
margin: 0 0.4rem;
padding: 0.1rem 0;
$correct: 1 / 0.85;
margin: 0 0.25em * $correct;
padding: 0.0625em * $correct 0;
border-radius: 0.2rem;
box-shadow:
0.4rem 0 0 $md-code-background,
-0.4rem 0 0 $md-code-background;
0.25em * $correct 0 0 $md-code-background,
-0.25em * $correct 0 0 $md-code-background;
word-break: break-word;
box-decoration-break: clone;
@ -245,21 +250,38 @@ kbd {
// Keystrokes
kbd {
display: inline-block;
padding: 0.4rem 0.5rem 0.5rem;
$correct: 1 / 0.85;
padding: 0 0.25em * $correct;
border: 0.1rem solid darken($md-keyboard-background, 20%);
border-radius: 0.2rem;
border-bottom-color: darken($md-keyboard-background, 25%);
background-color: $md-keyboard-background;
color: $md-keyboard-color;
font-size: 85%;
line-height: 1.0rem;
box-shadow: 0 -0.1rem 0
darken($md-keyboard-background, 30%) inset;
vertical-align: 0.1rem;
box-shadow: 0 0.1rem 0 darken($md-keyboard-background, 30%);
word-break: break-word;
}
// Text insertion and deletion markers
del,
ins {
color: $clr-red-500;
}
// Text highlighting marker
mark {
margin: 0 0.25em;
padding: 0.0625em 0;
border-radius: 0.2rem;
background: 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);
word-break: break-word;
box-decoration-break: clone;
}
// Smaller text
small {
opacity: 0.75;
@ -268,7 +290,7 @@ kbd {
// Superscript and subscript
sup,
sub {
margin-left: 0.1rem;
margin-left: 0.0625em * 1 / 0.8;
}
// Blockquotes, possibly nested
@ -296,13 +318,13 @@ kbd {
// Unordered and ordered lists
ul,
ol {
margin-left: 1.0rem;
margin-left: 0.625em;
padding: 0;
// List elements
li {
margin-bottom: 0.5em;
margin-left: 2.0rem;
margin-left: 1.25em;
// Decrease vertical spacing
p,
@ -318,16 +340,14 @@ kbd {
// Nested lists
ul,
ol {
margin-bottom: 1.0rem;
margin-left: 1.0rem;
padding-top: 1.0rem;
margin: 0.5em 0 0.5em 0.625em;
}
}
}
// Data tables
table {
margin: 1.5em 0; // TODO: check spacing
margin: 1.5em 0;
font-size: ms(-1);
overflow: hidden;

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

@ -27,7 +27,7 @@
// Admonition extension
.admonition {
position: relative;
margin: 2.0rem 0;
margin: 1.5625em 0;
padding: 0.8rem 1.2rem;
border-left: 3.2rem solid transparentize($clr-blue-a200, 0.6);
border-radius: 0.2rem;
@ -46,21 +46,6 @@
vertical-align: -0.25em;
}
// Title
&-title {
font-weight: 700;
// Remove bottom spacing for title
html & {
margin-bottom: 0;
}
// Remove top spacing for first element following title
html & + * {
margin-top: 0;
}
}
// Remove spacing on first element
:first-child {
margin-top: 0;
@ -106,3 +91,18 @@
}
}
}
// Title
.admonition-title {
font-weight: 700;
// Remove bottom spacing for title
html & {
margin-bottom: 0;
}
// Remove top spacing for first element following title
html & + * {
margin-top: 0;
}
}

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

@ -225,13 +225,6 @@ $codehilite-whitespace: transparent;
overflow: auto;
-webkit-overflow-scrolling: touch;
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
margin: 1.0em -1.6rem;
padding: 1.0rem 1.6rem 0.8rem;
border-radius: 0;
}
// Override native scrollbar styles
&::-webkit-scrollbar {
width: 0.4rem;
@ -264,6 +257,7 @@ $codehilite-whitespace: transparent;
// Block with line numbers
.codehilitetable {
display: block;
margin: 1.0em 0;
border-radius: 0.2em;
font-size: ms(0);
overflow: hidden;
@ -327,12 +321,23 @@ $codehilite-whitespace: transparent;
}
}
// Full-width container
> .codehilite {
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
margin: 1.0em -1.6rem;
padding: 1.0rem 1.6rem 0.8rem;
border-radius: 0;
}
}
// Full-width container
> .codehilitetable {
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
margin: 0 -1.6rem;
margin: 1.0em -1.6rem;
border-radius: 0;
// Increase spacing

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

@ -30,7 +30,7 @@
// Footnotes extension
.footnote {
color: $md-color-black--light;
font-size: 80%;
font-size: ms(-1);
// Remove additional spacing on footnotes
ol {
@ -53,39 +53,39 @@
color: $md-color-accent;
}
}
}
// Correct anchor offset
&-ref::before {
position: absolute;
margin-top: -(5.6rem + 2.4rem);
padding-top: (5.6rem + 2.4rem);
content: "";
pointer-events: none;
// Footnote reference with corrected anchor offset
.footnote-ref::before {
position: absolute;
margin-top: -(5.6rem + 2.4rem);
padding-top: (5.6rem + 2.4rem);
content: "";
pointer-events: none;
}
// Footnote back-reference
.footnote-backref {
@extend %md-icon;
position: absolute;
transform: translateX(0.5rem);
transition: transform 0.25s 0.125s,
color 0.25s,
opacity 0.125s 0.125s;
color: $md-color-black--lighter;
font-size: 1.5625em;
opacity: 0;
vertical-align: middle;
// Hack: remove Unicode arrow for icon
&::first-letter {
font-size: 0;
}
// Make back reference text transparent for icon
&-backref {
@extend %md-icon;
position: absolute;
transform: translateX(0.5rem);
transition: transform 0.25s 0.125s,
color 0.25s,
opacity 0.125s 0.125s;
color: $md-color-black--lighter;
font-size: 2.0rem;
opacity: 0;
vertical-align: middle;
// Hack: remove Unicode arrow for icon
&::first-letter {
font-size: 0;
}
// Back reference icon
&::after {
content: "keyboard_return";
}
// Back reference icon
&::after {
content: "keyboard_return";
}
}
}

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

@ -0,0 +1,52 @@
////
/// 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
////
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// Critic extension
.critic {
// Comment
&.comment {
margin: 0 0.25em;
padding: 0.0625em 0;
border-radius: 0.2rem;
background: $md-code-background; // TODO: rename, centralize somehow
color: $md-code-color;
box-shadow:
0.25em 0 0 $md-code-background,
-0.25em 0 0 $md-code-background;
box-decoration-break: clone;
// Icon
&::before {
@extend %md-icon;
padding-right: 0.125em;
color: $md-color-black--lighter;
content: "chat";
vertical-align: -0.125em;
}
}
}

71
src/assets/stylesheets/extensions/pymdown/_tasklist.scss
View File

@ -0,0 +1,71 @@
////
/// 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
////
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Remove list icon on task items
.task-list-item {
position: relative;
list-style-type: none;
// Make checkbox items align with normal list items, but position
// everything in ems for correct layout at smaller font sizes
[type="checkbox"] {
position: absolute;
top: 0.45em;
left: -2.0em;
}
}
// Wrapper for list controls, in case custom checkboxes are enabled
.task-list-control {
// Checkbox icon in unchecked state
.task-list-indicator::before {
@extend %md-icon;
position: absolute;
top: 0.15em;
left: -1.25em;
color: $md-color-black--lighter;
font-size: 1.25em;
content: "check_box_outline_blank";
vertical-align: -0.25em;
}
// Checkbox icon in checked state
[type="checkbox"]:checked + .task-list-indicator::before {
content: "check_box";
}
// Hide original checkbox behind icon
[type="checkbox"] {
opacity: 0;
z-index: -1;
}
}
}

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

@ -312,15 +312,15 @@
&::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
}
// Style scrollbar thumb
&-thumb {
background-color: $md-color-black--lighter;
// Style scrollbar thumb
&::-webkit-scrollbar-thumb {
background-color: $md-color-black--lighter;
// Hovered scrollbar thumb
&:hover {
background-color: $md-color-accent;
}
// Hovered scrollbar thumb
&:hover {
background-color: $md-color-accent;
}
}
}

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

@ -133,15 +133,15 @@
&::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
}
// Style scrollbar thumb
&-thumb {
background-color: $md-color-black--lighter;
// Style scrollbar thumb
&::-webkit-scrollbar-thumb {
background-color: $md-color-black--lighter;
// Hovered scrollbar thumb
&:hover {
background-color: $md-color-accent;
}
// Hovered scrollbar thumb
&:hover {
background-color: $md-color-accent;
}
}
}