New docSkimmer version (v.0.4.0)

* refactor mobile/TOC menu for improved separation of styling and behaviour * update documentation, demo, bump version number to v0.4.0
hfagerlund · Oct 11, 2018 · 3141195 · 3141195
2 parents cdd554c + cec373d
commit 3141195
Show file tree

Hide file tree

Showing 18 changed files with 172 additions and 131 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog:
 
+- - -
+## 0.4.0 - 2018-10-11
+
+#### Changed:
+* [Refactored sliding (mobile) menu panel](https://github.com/hfagerlund/mkdocs-docskimmer/issues/11)
+* Updated [demo](https://hfagerlund.github.io/mkdocs-docskimmer/) (to docSkimmer v0.4.0)
+* Bumped version number
 - - -
 ## 0.3.1 - 2018-07-04
 
@@ -47,7 +54,7 @@
 ## 0.1.1 - 2017-06-15
 
 #### New features:
-* Launched documentation site
+* Launched [documentation site/demo](https://hfagerlund.github.io/mkdocs-docskimmer/)
 
 #### Changed:
 * Replaced screenshot

diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@
 * no libs - except for a single (~2KB) module (include only what you prefer using `extra_javascript`);
 * supports MkDocs configuration features such as `google_analytics`.
 
-## Install
+## Installation
 
 * Clone docSkimmer from GitHub:
 
@@ -30,9 +30,11 @@ Or [download the required version](https://github.com/hfagerlund/mkdocs-docskimm
 
 * Copy the contents of the `mkdocs_docskimmer` directory into the MkDocs project root (ie. at the same level as the `docs` directory).
 
+## Usage
+
 * Modify the following settings in the 'mkdocs.yml' file:
 
-### For docSkimmer v0.3.x:
+### For docSkimmer v0.3.x, v0.4.x:
 ```yaml
 # mkdocs.yml:
 
@@ -110,6 +112,7 @@ theme_dir: 'mkdocs_docskimmer'
 
 | docSkimmer theme version(s) | MkDocs version(s) |
 | :------: | :------: |
+| 0.4.0 | 1.0.4 |
 | 0.3.1 | 1.0.4<br>[Template URL filter addition](https://github.com/mkdocs/mkdocs/tree/decaf6141c90b0123a4b7f03ee839d0780570bc9) |
 | 0.3.0 | [Pages refactor](https://github.com/mkdocs/mkdocs/tree/34ef3ca6d0390959080ce93a695361eea1649272) |
 | 0.2.1 | 0.17.4<br>0.17.3<br>0.17.2<br>0.17.1<br>0.17.0 |

diff --git a/docs/404.html b/docs/404.html
@@ -91,7 +91,7 @@ <h2 class="header-main__heading"><a class="header-main__link" href="/mkdocs-docs
 
 
 
-    <button id="menu-hamburger" aria-label="Open menu table of contents for this page" type="button" title="Menu">&#9776; open</button>
+    <button class="menu-hamburger" data-js="menuOpenCtrl" aria-label="Open menu table of contents for this page" type="button" title="Menu">&#9776; open</button>
     <!-- END subnav -->
 
 
@@ -140,8 +140,8 @@ <h1>404 Page Not Found</h1>
 
   <!--
   MkDocs version : 1.0.4
-  docSkimmer theme version: 0.3.1
-  Build Date UTC : 2018-09-18 18:45:13
+  docSkimmer theme version: 0.4.0
+  Build Date UTC : 2018-10-11 16:16:40
   -->
   </body>
 </html>
diff --git a/docs/css/docskimmer.css b/docs/css/docskimmer.css
@@ -1,5 +1,5 @@
 /*
-   docSkimmer theme v0.3.1
+   docSkimmer theme v0.4.0
    License: BSD-2-Clause license (https://github.com/hfagerlund/mkdocs-docskimmer/blob/master/LICENSE)
 */
 
@@ -207,7 +207,7 @@ ol ol,ul ul{margin-left:1.5em}
 /* phone-and-tablet */
   @media only screen and (max-width:1199px) {
     /* BEGIN page TOC menu panel */
-    #maincontent{padding:0;transition:margin-left .5s}
+    .maincontent{padding:0;transition:margin-left .5s}
     .page-toc{background-color:#eee;border-right:1px solid #999;height:100%;left:0;overflow-x:hidden;position:fixed;top:0;transition:0.5s;width:0;z-index:2}
     .page-toc__closebtn{border:1px solid #085f5f;font-size:1.4em;margin-top:0.5em;padding:0 0.2em;position:absolute;right:0.5em;text-decoration:none;top:0}
     .page-toc__heading{margin-left:1em}
@@ -216,7 +216,7 @@ ol ol,ul ul{margin-left:1.5em}
 
     code{background-color:transparent;border-left:7px solid #eee;border-radius:0}
     .form__input{min-width:70%;width:auto}
-    #menu-hamburger{background-color:#222;color:#fff;cursor:pointer;border-radius:25px;float:right;font-size:1.2em;margin:0.5em 0.5em 0 0;padding:0.2em 0.5em}
+    .menu-hamburger{background-color:#222;color:#fff;cursor:pointer;border-radius:25px;float:right;font-size:1.2em;margin:0.5em 0.5em 0 0;padding:0.2em 0.5em}
     .page-toc__heading{border-bottom:0;margin-bottom:0;padding-top:2em}
     .page-toc__item{margin:0}
   } /* END phone-and-tablet */
@@ -266,8 +266,8 @@ ol ol,ul ul{margin-left:1.5em}
 
 /* desktop-up */
   @media only screen and (min-width:1200px) {
-    #maincontent{margin-left:7em;margin-right:19em} 
-    #menu-hamburger,.page-toc__closebtn{display:none}
+    .maincontent{margin-left:7em;margin-right:19em}
+    .menu-hamburger,.page-toc__closebtn{display:none}
     .page-toc{display:block;float:right;position:absolute;top:17em;right:0;margin:0;padding:0.5em 1em 2em 2em;max-width:15em}
   }
 
diff --git a/docs/examples/another-sample-page/index.html b/docs/examples/another-sample-page/index.html
@@ -113,11 +113,11 @@ <h2 class="header-main__heading"><a class="header-main__link" href="../..">docSk
 
 
 
-    <button id="menu-hamburger" aria-label="Open menu table of contents for this page" type="button" title="Menu">&#9776; open</button>
+    <button class="menu-hamburger" data-js="menuOpenCtrl" aria-label="Open menu table of contents for this page" type="button" title="Menu">&#9776; open</button>
     <!-- END subnav -->
 
 
-     <main id="maincontent" role="main">
+     <main class="maincontent" data-js="mainContent" role="main">
       <h1 id="another-sample-page">Another sample page</h1>
 <p>This is another sample page to demonstrate:</p>
 <ul>
@@ -460,28 +460,28 @@ <h2 id="data-tables">Data tables</h2>
 </table>
      </main>
 
-     <aside id="page-toc" class="page-toc" role="complementary" aria-label="Table of Contents for this page">
-       <button aria-label="Close" id="page-toc__closebtn" class="page-toc__closebtn">X</button>
+     <aside class="page-toc" data-js="toc" role="complementary" aria-label="Table of Contents for this page">
+       <button aria-label="Close" class="page-toc__closebtn" data-js="tocCloseCtrl">X</button>
        <h2 class="page-toc__heading">On this Page:</h2>
 <ul>
 
-    <li class="page-toc__item"><a href="../../#another-sample-page" class="page-toc__link" tabindex="0">Another sample page</a></li>
+    <li class="page-toc__item"><a href="../../#another-sample-page" class="page-toc__link" data-js="tocLink" tabindex="0">Another sample page</a></li>
 
-        <li class="page-toc__item"><a href="./#body-copy" class="page-toc__link" tabindex="0">Body copy</a></li>
+        <li class="page-toc__item"><a href="./#body-copy" class="page-toc__link" data-js="tocLink" tabindex="0">Body copy</a></li>
 
-        <li class="page-toc__item"><a href="./#headings" class="page-toc__link" tabindex="0">Headings</a></li>
+        <li class="page-toc__item"><a href="./#headings" class="page-toc__link" data-js="tocLink" tabindex="0">Headings</a></li>
 
-        <li class="page-toc__item"><a href="./#headings-with-secondary-text" class="page-toc__link" tabindex="0">Headings with secondary text</a></li>
+        <li class="page-toc__item"><a href="./#headings-with-secondary-text" class="page-toc__link" data-js="tocLink" tabindex="0">Headings with secondary text</a></li>
 
-        <li class="page-toc__item"><a href="./#blockquotes" class="page-toc__link" tabindex="0">Blockquotes</a></li>
+        <li class="page-toc__item"><a href="./#blockquotes" class="page-toc__link" data-js="tocLink" tabindex="0">Blockquotes</a></li>
 
-        <li class="page-toc__item"><a href="./#lists" class="page-toc__link" tabindex="0">Lists</a></li>
+        <li class="page-toc__item"><a href="./#lists" class="page-toc__link" data-js="tocLink" tabindex="0">Lists</a></li>
 
-        <li class="page-toc__item"><a href="./#code-blocks" class="page-toc__link" tabindex="0">Code blocks</a></li>
+        <li class="page-toc__item"><a href="./#code-blocks" class="page-toc__link" data-js="tocLink" tabindex="0">Code blocks</a></li>
 
-        <li class="page-toc__item"><a href="./#horizontal-rules" class="page-toc__link" tabindex="0">Horizontal rules</a></li>
+        <li class="page-toc__item"><a href="./#horizontal-rules" class="page-toc__link" data-js="tocLink" tabindex="0">Horizontal rules</a></li>
 
-        <li class="page-toc__item"><a href="./#data-tables" class="page-toc__link" tabindex="0">Data tables</a></li>
+        <li class="page-toc__item"><a href="./#data-tables" class="page-toc__link" data-js="tocLink" tabindex="0">Data tables</a></li>
 
 
 </ul>
@@ -527,8 +527,8 @@ <h2 class="page-toc__heading">On this Page:</h2>
 
   <!--
   MkDocs version : 1.0.4
-  docSkimmer theme version: 0.3.1
-  Build Date UTC : 2018-09-18 18:45:13
+  docSkimmer theme version: 0.4.0
+  Build Date UTC : 2018-10-11 16:16:40
   -->
   </body>
 </html>
diff --git a/docs/examples/sample-page/index.html b/docs/examples/sample-page/index.html
@@ -113,11 +113,11 @@ <h2 class="header-main__heading"><a class="header-main__link" href="../..">docSk
 
 
 
-    <button id="menu-hamburger" aria-label="Open menu table of contents for this page" type="button" title="Menu">&#9776; open</button>
+    <button class="menu-hamburger" data-js="menuOpenCtrl" aria-label="Open menu table of contents for this page" type="button" title="Menu">&#9776; open</button>
     <!-- END subnav -->
 
 
-     <main id="maincontent" role="main">
+     <main class="maincontent" data-js="mainContent" role="main">
       <h1 id="sample-page">Sample page</h1>
 <p>This is a sample page to demonstrate:</p>
 <ul>
@@ -460,28 +460,28 @@ <h2 id="data-tables">Data tables</h2>
 </table>
      </main>
 
-     <aside id="page-toc" class="page-toc" role="complementary" aria-label="Table of Contents for this page">
-       <button aria-label="Close" id="page-toc__closebtn" class="page-toc__closebtn">X</button>
+     <aside class="page-toc" data-js="toc" role="complementary" aria-label="Table of Contents for this page">
+       <button aria-label="Close" class="page-toc__closebtn" data-js="tocCloseCtrl">X</button>
        <h2 class="page-toc__heading">On this Page:</h2>
 <ul>
 
-    <li class="page-toc__item"><a href="../../#sample-page" class="page-toc__link" tabindex="0">Sample page</a></li>
+    <li class="page-toc__item"><a href="../../#sample-page" class="page-toc__link" data-js="tocLink" tabindex="0">Sample page</a></li>
 
-        <li class="page-toc__item"><a href="./#body-copy" class="page-toc__link" tabindex="0">Body copy</a></li>
+        <li class="page-toc__item"><a href="./#body-copy" class="page-toc__link" data-js="tocLink" tabindex="0">Body copy</a></li>
 
-        <li class="page-toc__item"><a href="./#headings" class="page-toc__link" tabindex="0">Headings</a></li>
+        <li class="page-toc__item"><a href="./#headings" class="page-toc__link" data-js="tocLink" tabindex="0">Headings</a></li>
 
-        <li class="page-toc__item"><a href="./#headings-with-secondary-text" class="page-toc__link" tabindex="0">Headings with secondary text</a></li>
+        <li class="page-toc__item"><a href="./#headings-with-secondary-text" class="page-toc__link" data-js="tocLink" tabindex="0">Headings with secondary text</a></li>
 
-        <li class="page-toc__item"><a href="./#blockquotes" class="page-toc__link" tabindex="0">Blockquotes</a></li>
+        <li class="page-toc__item"><a href="./#blockquotes" class="page-toc__link" data-js="tocLink" tabindex="0">Blockquotes</a></li>
 
-        <li class="page-toc__item"><a href="./#lists" class="page-toc__link" tabindex="0">Lists</a></li>
+        <li class="page-toc__item"><a href="./#lists" class="page-toc__link" data-js="tocLink" tabindex="0">Lists</a></li>
 
-        <li class="page-toc__item"><a href="./#code-blocks" class="page-toc__link" tabindex="0">Code blocks</a></li>
+        <li class="page-toc__item"><a href="./#code-blocks" class="page-toc__link" data-js="tocLink" tabindex="0">Code blocks</a></li>
 
-        <li class="page-toc__item"><a href="./#horizontal-rules" class="page-toc__link" tabindex="0">Horizontal rules</a></li>
+        <li class="page-toc__item"><a href="./#horizontal-rules" class="page-toc__link" data-js="tocLink" tabindex="0">Horizontal rules</a></li>
 
-        <li class="page-toc__item"><a href="./#data-tables" class="page-toc__link" tabindex="0">Data tables</a></li>
+        <li class="page-toc__item"><a href="./#data-tables" class="page-toc__link" data-js="tocLink" tabindex="0">Data tables</a></li>
 
 
 </ul>
@@ -529,8 +529,8 @@ <h2 class="page-toc__heading">On this Page:</h2>
 
   <!--
   MkDocs version : 1.0.4
-  docSkimmer theme version: 0.3.1
-  Build Date UTC : 2018-09-18 18:45:13
+  docSkimmer theme version: 0.4.0
+  Build Date UTC : 2018-10-11 16:16:40
   -->
   </body>
 </html>
diff --git a/docs/index.html b/docs/index.html
@@ -91,11 +91,11 @@ <h2 class="header-main__heading"><a class="header-main__link" href=".">docSkimme
 
 
 
-    <button id="menu-hamburger" aria-label="Open menu table of contents for this page" type="button" title="Menu">&#9776; open</button>
+    <button class="menu-hamburger" data-js="menuOpenCtrl" aria-label="Open menu table of contents for this page" type="button" title="Menu">&#9776; open</button>
     <!-- END subnav -->
 
 
-     <main id="maincontent" role="main">
+     <main class="maincontent" data-js="mainContent" role="main">
       <h1 id="docskimmer">docSkimmer</h1>
 <p><a href="https://github.com/hfagerlund/mkdocs-docskimmer/">docSkimmer</a> is a skimmable minimal theme for static documentation sites built using <a href="https://github.com/mkdocs/mkdocs/">MkDocs</a>.</p>
 <p>Supports <a href="https://hfagerlund.github.io/mkdocs-docskimmer/#version-compatibility">MkDocs versions &gt;= 0.16.2</a>.</p>
@@ -116,14 +116,13 @@ <h2 id="installation">Installation</h2>
 
 <p>Or <a href="https://github.com/hfagerlund/mkdocs-docskimmer/releases">download the required version</a> - refer to: <a href="https://hfagerlund.github.io/mkdocs-docskimmer/#version-compatibility">'Version compatibility'</a>.</p>
 <ul>
-<li>
-<p>Copy the contents of the '/mkdocs_docskimmer' directory into your MkDocs project root (ie. at the same level as the project's '/docs' directory).</p>
-</li>
-<li>
-<p>Modify the following settings in the 'mkdocs.yml' file:</p>
-</li>
+<li>Copy the contents of the '/mkdocs_docskimmer' directory into your MkDocs project root (ie. at the same level as the project's '/docs' directory).</li>
 </ul>
-<h3 id="for-docskimmer-v03x">For docSkimmer v0.3.x:</h3>
+<h2 id="usage">Usage</h2>
+<ul>
+<li>Modify the following settings in the 'mkdocs.yml' file:</li>
+</ul>
+<h3 id="for-docskimmer-v03x-v04x">For docSkimmer v0.3.x, v0.4.x:</h3>
 <pre><code># mkdocs.yml:
 
 nav:
@@ -203,6 +202,10 @@ <h2 id="version-compatibility">Version compatibility</h2>
 </thead>
 <tbody>
 <tr>
+<td align="center">0.4.0</td>
+<td align="center">1.0.4</td>
+</tr>
+<tr>
 <td align="center">0.3.1</td>
 <td align="center">1.0.4<br><a href="https://github.com/mkdocs/mkdocs/tree/decaf6141c90b0123a4b7f03ee839d0780570bc9">Template URL filter addition</a></td>
 </tr>
@@ -228,20 +231,22 @@ <h2 id="examples">Examples</h2>
 <p>Examples of how Markdown syntax is rendered and how 2nd-level navigation is displayed in the <a href="https://github.com/hfagerlund/mkdocs-docskimmer/">docSkimmer theme</a> are available on <a href="/examples/sample-page">this sample page</a>.</p>
      </main>
 
-     <aside id="page-toc" class="page-toc" role="complementary" aria-label="Table of Contents for this page">
-       <button aria-label="Close" id="page-toc__closebtn" class="page-toc__closebtn">X</button>
+     <aside class="page-toc" data-js="toc" role="complementary" aria-label="Table of Contents for this page">
+       <button aria-label="Close" class="page-toc__closebtn" data-js="tocCloseCtrl">X</button>
        <h2 class="page-toc__heading">On this Page:</h2>
 <ul>
 
-    <li class="page-toc__item"><a href="#docskimmer" class="page-toc__link" tabindex="0">docSkimmer</a></li>
+    <li class="page-toc__item"><a href="#docskimmer" class="page-toc__link" data-js="tocLink" tabindex="0">docSkimmer</a></li>
+
+        <li class="page-toc__item"><a href=".#features" class="page-toc__link" data-js="tocLink" tabindex="0">Features</a></li>
 
-        <li class="page-toc__item"><a href=".#features" class="page-toc__link" tabindex="0">Features</a></li>
+        <li class="page-toc__item"><a href=".#installation" class="page-toc__link" data-js="tocLink" tabindex="0">Installation</a></li>
 
-        <li class="page-toc__item"><a href=".#installation" class="page-toc__link" tabindex="0">Installation</a></li>
+        <li class="page-toc__item"><a href=".#usage" class="page-toc__link" data-js="tocLink" tabindex="0">Usage</a></li>
 
-        <li class="page-toc__item"><a href=".#version-compatibility" class="page-toc__link" tabindex="0">Version compatibility</a></li>
+        <li class="page-toc__item"><a href=".#version-compatibility" class="page-toc__link" data-js="tocLink" tabindex="0">Version compatibility</a></li>
 
-        <li class="page-toc__item"><a href=".#examples" class="page-toc__link" tabindex="0">Examples</a></li>
+        <li class="page-toc__item"><a href=".#examples" class="page-toc__link" data-js="tocLink" tabindex="0">Examples</a></li>
 
 
 </ul>
@@ -287,8 +292,8 @@ <h2 class="page-toc__heading">On this Page:</h2>
 
   <!--
   MkDocs version : 1.0.4
-  docSkimmer theme version: 0.3.1
-  Build Date UTC : 2018-09-18 18:45:13
+  docSkimmer theme version: 0.4.0
+  Build Date UTC : 2018-10-11 16:16:40
   -->
   </body>
 </html>