Added new admonition classes and finished details

docs/extensions/admonition.md

@@ -95,7 +95,7 @@ standard Markdown library does not account for those.
 
 However, the [PyMdown Extensions][4] package adds an extension called
 [SuperFences][5], which makes it possible to nest code blocks within other
-blocks.
+blocks, respectively Admonition blocks.
 
   [4]: https://facelessuser.github.io/pymdown-extensions
   [5]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
@@ -128,14 +128,40 @@ Example:
     sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
     Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
 
+### Collapsible blocks
+
+The [Details][6] extension which is also part of the [PyMdown Extensions][4]
+package adds support for rendering collapsible Admonition blocks. This is
+useful for FAQs or content that is of secondary nature.
+
+Example:
+
+``` markdown
+??? note "Phasellus posuere in sem ut cursus"
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+??? note "Phasellus posuere in sem ut cursus"
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+By adding a `+` sign directly after the start marker, blocks can be rendered
+open by default.
+
+  [6]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
+
 ## Types
 
 Admonition supports user-defined type qualifiers which may influence the style
-of the inserted block. Following is a list of type qualifiers supported by the
+of the inserted block. Following is a list of type qualifiers provided by the
 Material theme, whereas the default type, and thus fallback for unknown type
-qualifiers, is [note][6].
+qualifiers, is `note`.
-
-  [6]: #note
 
 ### Note
 
@@ -185,6 +211,30 @@ Qualifiers:
 * `summary`
 * `tldr`
 
+### Info
+
+Example:
+
+``` markdown
+!!! info
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+!!! info
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+Qualifiers:
+
+* `info`
+* `todo`
+
 ### Tip
 
 Example:
@@ -235,6 +285,31 @@ Qualifiers:
 * `check`
 * `done`
 
+### Question
+
+Example:
+
+``` markdown
+!!! question
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+!!! question
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+Qualifiers:
+
+* `question`
+* `help`
+* `faq`
+
 ### Warning
 
 Example:

docs/extensions/pymdown.md

@@ -38,182 +38,18 @@ markdown_extensions:
 
 ## Usage
 
-### GitHub Flavored Markdown
-
-Most of the extensions included in the PyMdown Extensions package try to bring
-the Markdown experience closer to GitHub Flavored Markdown (GFM).
-
-The PyMdown Extensions package adds a shorthand to enable all of the included
-extensions that provide the GFM experience. However, usage of the shorthand is
-discouraged, because some extensions are not supported, as the Material theme
-uses some incompatible extensions included in the standard Markdown library.
-
-#### BetterEm
-
-[BetterEm][2] improves the handling of emphasis markup (**bold** and *italic*)
-within Markdown by providing a more sophisticated parser for better detecting
-start and end tokens. Read the documentation for [usage notes][3].
-
-  [2]: https://facelessuser.github.io/pymdown-extensions/extensions/betterem/
-  [3]: https://facelessuser.github.io/pymdown-extensions/usage_notes/
-
-#### Emoji
-
-[Emoji][4] adds the ability to insert a :shit:-load of emojis that we use in
-our daily lives. See the [EmojiOne demo][5] for a list of all available
-emojis. Happy scrolling :tada:
-
-!!! warning "Legal disclaimer"
-
-    Material has no affiliation with [EmojiOne][6] which is released under
-    [CC BY 4.0][7]. When including EmojiOne images or CSS, please read the
-    [EmojiOne license][8] to ensure proper usage and attribution.
-
-  [4]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
-  [5]: https://emoji.codes/
-  [6]: http://emojione.com
-  [7]: https://creativecommons.org/licenses/by/4.0/legalcode
-  [8]: http://emojione.com/licensing/
-
-#### MagicLink
-
-[MagicLink][9] detects links in Markdown and auto-generates the necessary
-markup, so no special syntax is required. It auto-links `http[s]://` and
-`ftp://` links, as well as references to email addresses.
-
-  [9]: https://facelessuser.github.io/pymdown-extensions/extensions/magiclink/
-
-#### SuperFences
-
-[SuperFences][10] provides the ability to nest code blocks under blockquotes,
-lists and other block elements, which the [Fenced Code Blocks][11] extension
-from the standard Markdown library doesn't parse correctly.
-
-  [10]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
-  [11]: https://pythonhosted.org/Markdown/extensions/fenced_code_blocks.html
-
-#### Tasklist
-
-[Tasklist][12] 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.
-Checkbox lists are like regular lists, but prefixed with `[ ]` for empty or
-`[x]` for 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
-
-[12]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
-
-#### Tilde
-
-[Tilde][13] provides an easy way to ~~strike through~~ cross out text.
-The portion of text that should be erased must be enclosed in two tildes
-`~~...~~` and the extension will take care of the rest.
-
-  [13]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
-
-### More syntactic sugar
-
-#### Caret
-
-[Caret][14] is the sister extension of [Tilde][15] and makes it possible to
-highlight ^^inserted text^^. The portion of text that should be marked as added
-must be enclosed in two carets `^^...^^`.
-
-  [14]: https://facelessuser.github.io/pymdown-extensions/extensions/caret/
-  [15]: #tilde
-
-#### Mark
-
-[Mark][16] adds the ability to ==highlight text== like it was marked with a
-==text marker==. The portion of text that should be highlighted must be
-enclosed in two equal signs `==...==`.
-
-  [16]: https://facelessuser.github.io/pymdown-extensions/extensions/mark/
-
-#### SmartSymbols
-
-[SmartSymbols][17] converts markup for special characters into their
-corresponding symbols, e.g. arrows (<--, -->, <-->), trademark and copyright
-symbols ((c), (tm), (r)) and fractions (1/2, 1/4, ...).
-
-  [17]: https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
-
-### Critic
-
-[Critic][18] implements [Critic Markup][19], a Markdown extension that enables
-the tracking of changes (additions, deletions and comments) on documents.
-During compilation of the Markdown document, changes can be rendered (default),
-accepted or rejected.
-
-Text can be {--deleted--} and replacement text {++added++}. This can also be
-combined into {~~one~>a single~~} operation. {==Highlighting==} is also
-possible {>>and comments can be added inline<<}.
-
-{==
-
-Formatting can also be applied to blocks, by putting the opening and closing
-tags on separate lines and adding new lines between the tags and the content.
-
-==}
-
-  [18]: https://facelessuser.github.io/pymdown-extensions/extensions/critic/
-  [19]: http://criticmarkup.com/
-
-### Details
-
-[Details][20] adds collapsible elements that can contain arbitrary content.
-It's implemented using the HTML5 `details` and `summary` tags and adds the
-
-???+ note "Open styled details"
-
-    ??? danger "Nested details!"
-        And more content again.
-
-    !!! quote "Admonition!"
-        And more content again.
-
-  [20]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
-
-TODO: adjust links!
-
 ### Arithmatex <small>MathJax</small>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML"></script>
 
-[Arithmatex][20] integrates Material with [MathJax][21] which parses
+[Arithmatex][2] integrates Material with [MathJax][3] which parses
 block-style and inline equations written in TeX markup and outputs them in
-mathematical notation. See [this thread][22] for a short introduction and quick
+mathematical notation. See [this thread][4] for a short introduction and quick
 reference on how to write equations in TeX syntax.
 
 Besides activating the extension in the `mkdocs.yml`, the MathJax JavaScript
 runtime needs to be included. This must be done with
-[additional JavaScript][23]:
+[additional JavaScript][5]:
 
 ``` yaml
 extra_javascript:
@@ -255,10 +91,10 @@ extra_javascript:
   - 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML'
 ```
 
-  [20]: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/
+  [2]: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/
-  [21]: https://www.mathjax.org/
+  [3]: https://www.mathjax.org/
-  [22]: http://meta.math.stackexchange.com/questions/5020/
+  [4]: http://meta.math.stackexchange.com/questions/5020/
-  [23]: ../customization.md#additional-javascript
+  [5]: ../customization.md#additional-javascript
 
 #### Blocks
 
@@ -292,11 +128,157 @@ Result:
 
 Lorem ipsum dolor sit amet: $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$
 
+### BetterEm
+
+[BetterEm][6] improves the handling of emphasis markup (**bold** and *italic*)
+within Markdown by providing a more sophisticated parser for better detecting
+start and end tokens. Read the documentation for [usage notes][7].
+
+  [6]: https://facelessuser.github.io/pymdown-extensions/extensions/betterem/
+  [7]: https://facelessuser.github.io/pymdown-extensions/usage_notes/
+
+### Caret
+
+[Caret][8] makes it possible to highlight ^^inserted text^^. The portion of
+text that should be marked as added must be enclosed in two carets `^^...^^`.
+
+  [8]: https://facelessuser.github.io/pymdown-extensions/extensions/caret/
+
+### Critic
+
+[Critic][9] implements [Critic Markup][10], a Markdown extension that enables
+the tracking of changes (additions, deletions and comments) on documents.
+During compilation of the Markdown document, changes can be rendered (default),
+accepted or rejected.
+
+Text can be {--deleted--} and replacement text {++added++}. This can also be
+combined into {~~one~>a single~~} operation. {==Highlighting==} is also
+possible {>>and comments can be added inline<<}.
+
+{==
+
+Formatting can also be applied to blocks, by putting the opening and closing
+tags on separate lines and adding new lines between the tags and the content.
+
+==}
+
+  [9]: https://facelessuser.github.io/pymdown-extensions/extensions/critic/
+  [10]: http://criticmarkup.com/
+
+### Details
+
+[Details][11] adds collapsible [Admonition-style blocks][12] which can contain
+arbitrary content using the HTML5 `details` and `summary` tags. Additionally,
+all Admonition qualifiers can be used, e.g. `note`, `question`, `warning` etc.
+
+??? question "How many Prolog programmers does it take to change a lightbulb?"
+
+    Yes.
+
+  [11]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
+  [12]: admonition.md
+
+### Emoji
+
+[Emoji][13] adds the ability to insert a :shit:-load of emojis that we use in
+our daily lives. See the [EmojiOne demo][14] for a list of all available
+emojis. Happy scrolling :tada:
+
+!!! warning "Legal disclaimer"
+
+    Material has no affiliation with [EmojiOne][15] which is released under
+    [CC BY 4.0][16]. When including EmojiOne images or CSS, please read the
+    [EmojiOne license][17] to ensure proper usage and attribution.
+
+  [13]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
+  [14]: https://emoji.codes/
+  [15]: http://emojione.com
+  [16]: https://creativecommons.org/licenses/by/4.0/legalcode
+  [17]: http://emojione.com/licensing/
+
 ### InlineHilite
 
-[InlineHilite][24] adds support for inline code highlighting. It's useful for
+[InlineHilite][18] adds support for inline code highlighting. It's useful for
 short snippets included within body copy, e.g. `#!js var test = 0;` and can be
 achived by prefixing inline code with a shebang and language identifier,
 e.g. `#!js`.
 
-  [24]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
+  [18]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
+
+### MagicLink
+
+[MagicLink][19] detects links in Markdown and auto-generates the necessary
+markup, so no special syntax is required. It auto-links `http[s]://` and
+`ftp://` links, as well as references to email addresses.
+
+  [19]: https://facelessuser.github.io/pymdown-extensions/extensions/magiclink/
+
+### Mark
+
+[Mark][20] adds the ability to ==highlight text== like it was marked with a
+==text marker==. The portion of text that should be highlighted must be
+enclosed in two equal signs `==...==`.
+
+  [20]: https://facelessuser.github.io/pymdown-extensions/extensions/mark/
+
+### SmartSymbols
+
+[SmartSymbols][21] converts markup for special characters into their
+corresponding symbols, e.g. arrows (<--, -->, <-->), trademark and copyright
+symbols ((c), (tm), (r)) and fractions (1/2, 1/4, ...).
+
+  [21]: https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
+
+### SuperFences
+
+[SuperFences][22] provides the ability to nest code blocks under blockquotes,
+lists and other block elements, which the [Fenced Code Blocks][23] extension
+from the standard Markdown library doesn't parse correctly.
+
+  [22]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
+  [23]: https://pythonhosted.org/Markdown/extensions/fenced_code_blocks.html
+
+### Tasklist
+
+[Tasklist][24] 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.
+Checkbox lists are like regular lists, but prefixed with `[ ]` for empty or
+`[x]` for 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
+
+[24]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
+
+### Tilde
+
+[Tilde][25] provides an easy way to ~~strike through~~ cross out text.
+The portion of text that should be erased must be enclosed in two tildes
+`~~...~~` and the extension will take care of the rest.
+
+  [25]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/

material/base.html

@@ -39,7 +39,7 @@
       <script src="{{ base_url }}/assets/javascripts/modernizr-1df76c4e58.js"></script>
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-3fec322ccb.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-b57c021441.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02c2a4388f.palette.css">
       {% endif %}

src/assets/stylesheets/extensions/_admonition.scss

@@ -56,7 +56,7 @@
     // Title
     .admonition-title {
       margin: -1.2rem -1.2rem 0;
-      padding: 0.8rem 1.2rem;
+      padding: 0.8rem 1.2rem 0.8rem 4rem;
       border-bottom: 0.1rem solid transparentize($clr-blue-a200, 0.9);
       background-color: transparentize($clr-blue-a200, 0.9);
       font-weight: 700;
@@ -65,19 +65,21 @@
       &::before {
         @extend %md-icon;
 
-        margin-right: 0.8rem;
+        position: absolute;
+        left: 1.2rem;
         color: $clr-blue-a200;
         font-size: 2rem;
         content: "edit";
-        vertical-align: -0.25em;
       }
     }
 
     // Build representational classes
     @each $names, $appearance in (
       summary tldr: $clr-light-blue-a400 "subject",
+      info todo: $clr-cyan-a700 "info",
       tip hint important : $clr-teal-a700 "whatshot",
       success check done: $clr-green-a700 "done",
+      question help faq: $clr-light-green-a700 "help",
       warning caution attention: $clr-orange-a400 "warning",
       failure fail missing: $clr-red-a200 "clear",
       danger error: $clr-red-a400 "flash_on",

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

@@ -37,12 +37,21 @@
     // Re-add bottom spacing if block is open
     &[open] {
       padding-bottom: 1.2rem;
+
+      > summary::after {
+        transform: rotate(180deg);
+      }
     }
 
     // Remove bottom border if block is closed
     &:not([open]) summary {
       border-bottom: none;
     }
+
+    // TODO specificity problem
+    summary {
+      padding-right: 4rem;
+    }
   }
 
   // Title
@@ -56,5 +65,17 @@
     &::-webkit-details-marker {
       display: none;
     }
+
+    // Icon
+    &::after {
+      @extend %md-icon;
+
+      position: absolute;
+      top: 0.8rem;
+      right: 1.2rem;
+      color: $md-color-black--lighter;
+      font-size: 2rem;
+      content: "keyboard_arrow_down";
+    }
   }
 }