Added support for tasklist and critic extension + em fixes

docs/extensions/footnotes.md

@@ -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

docs/extensions/pymdown/tasklist.md

@@ -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

docs/specimen.md

@@ -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

mkdocs.yml

@@ -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

src/assets/stylesheets/_shame.scss

@@ -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!

src/assets/stylesheets/base/_typeset.scss

@@ -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;
+    $correct: 1 / 0.85;
-    padding: 0.1rem 0;
+
+    margin: 0 0.25em * $correct;
+    padding: 0.0625em * $correct 0;
     border-radius: 0.2rem;
     box-shadow:
-       0.4rem 0 0 $md-code-background,
+       0.25em * $correct 0 0 $md-code-background,
-      -0.4rem 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;
+    $correct: 1 / 0.85;
-    padding: 0.4rem 0.5rem 0.5rem;
+
+    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%);
-    box-shadow: 0 -0.1rem 0
-      darken($md-keyboard-background, 30%) inset;
-    vertical-align: 0.1rem;
     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: 0.5em 0 0.5em 0.625em;
-        margin-left: 1.0rem;
-        padding-top: 1.0rem;
       }
     }
   }
 
   // Data tables
   table {
-    margin: 1.5em 0;                                                            // TODO: check spacing
+    margin: 1.5em 0;
     font-size: ms(-1);
     overflow: hidden;
 

src/assets/stylesheets/extensions/_admonition.scss

@@ -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;
+  }
+}

src/assets/stylesheets/extensions/_codehilite.scss

@@ -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

src/assets/stylesheets/extensions/_footnotes.scss

@@ -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,9 +53,10 @@
         color: $md-color-accent;
       }
     }
+  }
 
-    // Correct anchor offset
+  // Footnote reference with corrected anchor offset
-    &-ref::before {
+  .footnote-ref::before {
     position: absolute;
     margin-top: -(5.6rem + 2.4rem);
     padding-top: (5.6rem + 2.4rem);
@@ -63,8 +64,8 @@
     pointer-events: none;
   }
 
-    // Make back reference text transparent for icon
+  // Footnote back-reference
-    &-backref {
+  .footnote-backref {
     @extend %md-icon;
 
     position: absolute;
@@ -73,7 +74,7 @@
                 color     0.25s,
                 opacity   0.125s 0.125s;
     color: $md-color-black--lighter;
-      font-size: 2.0rem;
+    font-size: 1.5625em;
     opacity: 0;
     vertical-align: middle;
 
@@ -88,4 +89,3 @@
     }
   }
 }
-}

src/assets/stylesheets/extensions/pymdown/_critic.scss

@@ -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;
+    }
+  }
+}

src/assets/stylesheets/extensions/pymdown/_tasklist.scss

@@ -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;
+    }
+  }
+}

src/assets/stylesheets/layout/_search.scss

@@ -312,9 +312,10 @@
       &::-webkit-scrollbar {
         width: 0.4rem;
         height: 0.4rem;
+      }
 
       // Style scrollbar thumb
-        &-thumb {
+      &::-webkit-scrollbar-thumb {
         background-color: $md-color-black--lighter;
 
         // Hovered scrollbar thumb
@@ -325,4 +326,3 @@
     }
   }
 }
-}

src/assets/stylesheets/layout/_sidebar.scss

@@ -133,9 +133,10 @@
     &::-webkit-scrollbar {
       width: 0.4rem;
       height: 0.4rem;
+    }
 
     // Style scrollbar thumb
-      &-thumb {
+    &::-webkit-scrollbar-thumb {
       background-color: $md-color-black--lighter;
 
       // Hovered scrollbar thumb
@@ -144,7 +145,6 @@
       }
     }
   }
-  }
 
   // Sidebar content
   &__inner {