Style improvements (#25)

- Better TOC (visibile inline if sidebar is not open). - Anchors before paragraphs for better locatability.
gabyx · Feb 1, 2022 · af97226 · af97226
2 parents 11d6a26 + bd519be
commit af97226
Show file tree

Hide file tree

Showing 20 changed files with 383 additions and 165 deletions.
diff --git a/Content.html b/Content.html
@@ -121,6 +121,41 @@
         <!--[if lt IE 9]>
 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
 <![endif]-->
+        <script>
+        // If we have a hash we disable history scrolling restoration and
+        // really scroll into view.
+        var c = window.location.hash;
+        if (c.length != 0) {
+            history.scrollRestoration = "manual"
+        }
+
+        document.addEventListener('DOMContentLoaded', function(event) {
+            var c = window.location.hash;
+            var e = document.getElementById(c.replace("#", ""));
+            if (e != null) {
+                e.scrollIntoView();
+            }
+        });
+        </script>
+        <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
+
+        <script>
+            document.addEventListener('DOMContentLoaded', function (event) {
+                var P = "#main-markdown > header"
+                var noAnchorHeaders = document.querySelectorAll(`${P} h1, ${P} h2, ${P} h3, ${P} h4, ${P} h5, ${P} h6`)
+                for (var k = 0; k < noAnchorHeaders.length; k++) {
+                    noAnchorHeaders[k].classList.add("no-anchor")
+                }
+
+                anchors.options = {
+                    placement: 'left',
+                    visible: 'always',
+                    icon: '§'
+                };
+                var P = "#main-markdown"
+                anchors.add(`${P} h1:not(.no-anchor),${P} h2:not(.no-anchor),${P} h3:not(.no-anchor),${P} h4:not(.no-anchor),${P} h5:not(.no-anchor),${P} h6:not(.no-anchor)`);
+            });
+        </script>
         <script>
             function openSideNav() {
                 expandWidth = 300;
@@ -131,11 +166,14 @@
                 if (m.offsetLeft - expandWidth < 0) {
                     m.style.marginLeft = `${expandWidth + 40}px`
                 }
+
+                document.getElementById("nav-content-inline").style.display = "none";
             }
 
             function closeSideNav() {
                 document.getElementById("side-nav").style.width = "0";
                 document.getElementById("main-markdown").style.marginLeft = null;
+                document.getElementById("nav-content-inline").style.display = "initial";
             }
 
             var EXPAND_ALL = "⊞";
@@ -167,22 +205,34 @@
             };
 
             var onLoad = function () {
-                var treeListItems = document.querySelectorAll('nav ul a');
+                var treeListItems = document.querySelectorAll('nav ul li');
                 for (var i = 0; i < treeListItems.length; i++) {
+
+                    var isLeaf = treeListItems[i].getElementsByTagName('ul').length == 0;
+                    if (isLeaf) {
+                        treeListItems[i].classList.add("leaf")
+                        continue;
+                    }
+
                     // click handler
-                    treeListItems[i].addEventListener('click', function (e) {
-                        var parent = e.target.parentElement;
-                        var classList = parent.classList;
-                        if (classList.contains("open")) { // close the element and its children
-                            classList.remove('open');
-                            var openChildrenList = parent.querySelectorAll(':scope .open');
-                            for (var j = 0; j < openChildrenList.length; j++) {
-                                openChildrenList[j].classList.remove('open');
+                    treeListItems[i].addEventListener('click',
+                        function (e) {
+                            var target = e.target;
+
+                            var classList = target.classList;
+                            if (classList.contains("open")) { // close the element and its children
+                                classList.remove('open');
+                                var openChildrenList = target.querySelectorAll(':scope li.open');
+                                for (var j = 0; j < openChildrenList.length; j++) {
+                                    openChildrenList[j].classList.remove('open');
+                                }
+                            } else { // open the element
+                                classList.add('open');
                             }
-                        } else { // open the element
-                            classList.add('open');
+
+                            e.stopPropagation();
                         }
-                    });
+                    );
                 }
             }
 
@@ -203,7 +253,7 @@
 
 <div id="side-nav" class="sidenav">
     <div id="nav-menu">
-        <a class="expand-btn" id="expand" href="javascript:void(0)" onClick="toggleExpandCollapse()">⊞</a>
+        <a class="expand-btn" id="expand" href="javascript:void(0)" onClick="toggleExpandCollapse()" style="baseline-shift:-10%">⊞</a>
         <a class="close-btn" href="javascript:void(0)" onclick="closeSideNav()">&times;</a>
     </div>
         <div id="nav-content">
@@ -249,11 +299,37 @@ <h3 class="subtitle">Demonstrating the Power of Markdown with Pandoc</h4>
     <div class="title-logo">
         <img src="files/Logo.svg">
     </div>
-</header><div class="latex-math-define">
-$$ \newcommand{\vvec}[1]{\mathbf{#1}} \newcommand{\mat}[1]{\mathbf{#1}} \newcommand{\cs}[1]{\mathrm{#1}} \newcommand{\rp}[1]{{_\cs{#1}}} \newcommand{\csT}[2]{\mat{A}_{\mathrm{#1#2}}} \newcommand{\genT}[2]{\mat{T}_{\mathrm{#1#2}}} \newcommand{\affcsT}[2]{\mat{H}_{\mathrm{#1#2}}} \newcommand{\affcsTdx}[2]{\mat{H}_{\mathrm{#1#2}}^{\transp}} \newcommand{\basevec}[2]{\vvec{e}_{\mathrm{#1}}^{\cs{#2}}} \newcommand{\homArr}[1]{\left[\begin{array}{c}#1 \\ 1 \end{array}\right]} \newcommand{\homArrTr}[1]{\left[\begin{array}{c}#1 &amp;&amp; 1 \end{array}\right]} \newcommand{\homMat}[2]{\left[\begin{array}{cc}#1 &amp; #2 \\ \vvec{0} &amp; 1 \end{array}\right]} \newcommand{\arr}[2]{\left[\begin{array}{#1}#2\end{array}\right]} \newcommand{\transp}{\top} \newcommand{\rot}[2]{\mat{R}_\mathrm{#1#2}} \newcommand{\norm}[1]{\|#1\|} \newcommand{\mdet}[1]{\det(#1)} \newcommand{\set}[1]{\mathcal{#1}} \newcommand{\prox}[1]{\mathbf{prox}_{\set{C}}} \DeclareMathOperator*{\argmin}{argmin} \newcommand{\ncone}[1]{\mathcal{N}_{\set{#1}}} \newcommand{\indf}[1]{I_{\set{#1}}} $$
+</header><div class="abstract">
+<div class="abstract-title">Abstract</div>
+This is a setup demonstrating the power and use of markdown for technical documents by using a fully automated conversion sequence with <a href="https://gradle.org"><code>gradle</code></a> and of course <a href="https://pandoc.org"><code>pandoc</code></a>.
 </div>
-<div class="abstract">
-<p>This is a setup demonstrating the power and use of markdown for technical documents by using a fully automated conversion sequence with <a href="https://gradle.org"><code>gradle</code></a> and of course <a href="https://pandoc.org"><code>pandoc</code></a>.</p>
+<div id="nav-content-inline">
+    <nav id="TOC">
+                <ul>
+                <li><a href="#intro"><span class="toc-section-number">1</span> Intro</a></li>
+                <li><a href="#samples"><span class="toc-section-number">2</span> Samples</a>
+                <ul>
+                <li><a href="#konvexe-probleme"><span class="toc-section-number">2.1</span> Konvexe Probleme</a>
+                <ul>
+                <li><a href="#konvexe-menge"><span class="toc-section-number">2.1.1</span> Konvexe Menge</a></li>
+                <li><a href="#proximaler-punkt"><span class="toc-section-number">2.1.2</span> Proximaler Punkt</a></li>
+                <li><a href="#normalkegel"><span class="toc-section-number">2.1.3</span> Normalkegel</a></li>
+                <li><a href="#zusammenhang-von-normalkegel-und-proximaler-punkt"><span class="toc-section-number">2.1.4</span> Zusammenhang von Normalkegel und Proximaler Punkt</a></li>
+                <li><a href="#zusammenhang-von-normalkegel-und-konvexer-optimierung"><span class="toc-section-number">2.1.5</span> Zusammenhang von Normalkegel und Konvexer Optimierung</a></li>
+                </ul></li>
+                <li><a href="#code-sample"><span class="toc-section-number">2.2</span> Code Sample</a></li>
+                <li><a href="#tables"><span class="toc-section-number">2.3</span> Tables</a>
+                <ul>
+                <li><a href="#html-table"><span class="toc-section-number">2.3.1</span> HTML Table</a></li>
+                <li><a href="#sec:multi-line-table"><span class="toc-section-number">2.3.2</span> Markdown Table</a></li>
+                </ul></li>
+                </ul></li>
+                <li><a href="#references">References</a></li>
+                </ul>
+    </nav>
+</div>
+<div class="latex-math-define">
+$$ \newcommand{\vvec}[1]{\mathbf{#1}} \newcommand{\mat}[1]{\mathbf{#1}} \newcommand{\cs}[1]{\mathrm{#1}} \newcommand{\rp}[1]{{_\cs{#1}}} \newcommand{\csT}[2]{\mat{A}_{\mathrm{#1#2}}} \newcommand{\genT}[2]{\mat{T}_{\mathrm{#1#2}}} \newcommand{\affcsT}[2]{\mat{H}_{\mathrm{#1#2}}} \newcommand{\affcsTdx}[2]{\mat{H}_{\mathrm{#1#2}}^{\transp}} \newcommand{\basevec}[2]{\vvec{e}_{\mathrm{#1}}^{\cs{#2}}} \newcommand{\homArr}[1]{\left[\begin{array}{c}#1 \\ 1 \end{array}\right]} \newcommand{\homArrTr}[1]{\left[\begin{array}{c}#1 &amp;&amp; 1 \end{array}\right]} \newcommand{\homMat}[2]{\left[\begin{array}{cc}#1 &amp; #2 \\ \vvec{0} &amp; 1 \end{array}\right]} \newcommand{\arr}[2]{\left[\begin{array}{#1}#2\end{array}\right]} \newcommand{\transp}{\top} \newcommand{\rot}[2]{\mat{R}_\mathrm{#1#2}} \newcommand{\norm}[1]{\|#1\|} \newcommand{\mdet}[1]{\det(#1)} \newcommand{\set}[1]{\mathcal{#1}} \newcommand{\prox}[1]{\mathbf{prox}_{\set{C}}} \DeclareMathOperator*{\argmin}{argmin} \newcommand{\ncone}[1]{\mathcal{N}_{\set{#1}}} \newcommand{\indf}[1]{I_{\set{#1}}} $$
 </div>
 <h1 data-number="1" id="intro"><span class="header-section-number">1</span> Intro</h1>
 <p>Read the <a href="https://github.com/gabyx/TechnicalMarkdown/blob/master/Readme.md">Readme.md</a> for futher information.</p>
@@ -408,7 +484,6 @@ <h3 data-number="2.3.1" id="html-table"><span class="header-section-number">2.3.
 <li>HTML citations dont work.</li>
 <li>Table caption is not parsed <code>table_caption</code> not allowed as extension.</li>
 </ul>
-</div>
 <table style="width: 100%">
 <caption>Table by included <code>.html</code> file.</caption>
 <colgroup>
@@ -459,6 +534,7 @@ <h3 data-number="2.3.1" id="html-table"><span class="header-section-number">2.3.
 </tr>
 </tbody>
 </table>
+</div>
 <h3 data-number="2.3.2" id="sec:multi-line-table"><span class="header-section-number">2.3.2</span> Markdown Table</h3>
 <ul>
 <li>Included markdown files.</li>

diff --git a/Content.md b/Content.md
@@ -14,7 +14,11 @@ link-citations: true
 
 fontsize: 12pt
 lang: en-GB
-
+abstract: This is a setup demonstrating the power and use 
+  of markdown for technical documents by using 
+  a fully automated conversion sequence with 
+  [`gradle`](https://gradle.org) and of course [`pandoc`](https://pandoc.org).
+abstract-title: Abstract
 toc: true
 toc-depth: 2
 top-level-division: chapter
@@ -33,11 +37,6 @@ Note: This is a Div block which get discarded because of the `{include-if-format
 includes/Math.html
 ```
 
-:::{.abstract}
-This is a setup demonstrating the power and use of markdown for technical documents by using
-a fully automated conversion sequence with [`gradle`](https://gradle.org) and of course [`pandoc`](https://pandoc.org).
-:::
-
 # Intro
 
 Read the [Readme.md](https://github.com/gabyx/TechnicalMarkdown/blob/master/Readme.md)

diff --git a/Content.pdf b/Content.pdf
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -162,7 +162,6 @@ data class PandocSettings(
 
 fun createPandocSettings(): PandocSettings {
         var env = globalEnv.toMutableMap()
-        logger.quiet("First PATH: '${env["PATH"]}")
         //env.addExecutableDirToPath(pythonExe)
         //env.addExecutableDirToPath(pandocExe)
         env["ROOT_DIR"] = "${project.rootDir}"
@@ -226,6 +225,7 @@ abstract class PandocTask @Inject constructor() : Exec() {
         convertFiles.convention(project.fileTree("${project.rootDir}/convert/"){ 
             include("pandoc/**/*")
             include("scripts/**/*")
+            include("css/**/*.css")
         })
 
         inputs.files(inputFile, markdownFiles, assetFiles, convertFiles, literatureFiles)

diff --git a/chapters/TableSamples.md b/chapters/TableSamples.md
@@ -7,22 +7,23 @@
 - Markdown citations/cross refeferences do not work inside.
 - HTML citations dont work.
 - Table caption is not parsed `table_caption` not allowed as extension.
-:::
 
-```{.include format=html+tex_math_dollars include-if-format=latex;html;html5;json;native .relative-to-current}
+```{.include format=html+tex_math_dollars .relative-to-current}
 tables/TableExample.html
 ```
+:::
 
 :::{include-if-format=latex;json;native}
 ## \LaTeX\ Table
 - Included latex file as raw `latex`.
 - Converted from `.html` by `convert-tables.py` and `table.json`.
 - Latex citations do work inside.
-:::
 
 ```{.include format=latex raw=true include-if-format=latex;json;native .relative-to-current}
 tables-tex/TableExample.tex
 ```
+:::
+
 
 ## Markdown Table {#sec:multi-line-table}