initial sticky TOC

jlmitch5 · Jul 21, 2017 · 30a4350f5f248150803bd3c742a055a6162ba6e3 · 30a4350
1 parent 4a2c2c1
commit 30a4350f5f248150803bd3c742a055a6162ba6e3
Unified Split

Showing with 95 additions and 9 deletions.

+2 −1 utils/docs.py

+22 −8 utils/templates/docs.css

+71 −0 utils/templates/template.html5
diff --git a/utils/docs.py b/utils/docs.py
@@ -170,7 +170,8 @@ def main():
                             "--self-contained",
                             "--toc",
                             "--toc-depth=2",
-                            "--css=" + str(TEMPLATE_DIR / "docs.css")])
+                            "--css=" + str(TEMPLATE_DIR / "docs.css"),
+                            "--template=" + str(TEMPLATE_DIR / "template.html5")])
         elif ext == ".pdf" or ext == ".tex":
             latex_preamble = env.get_template("latex_preamble.jinja2.md")
             latex = latex_preamble.render(fonts_dir=FONTS_DIR) + "\n\n"

diff --git a/utils/templates/docs.css b/utils/templates/docs.css
@@ -2,16 +2,30 @@ body {
     font-family: Helvetica, arial, sans-serif;
     font-size: 14px;
     line-height: 1.6;
-    padding-top: 10px;
-    padding-bottom: 10px;
     background-color: white;
-    padding: 30px;
-}
-body > *:first-child {
-    margin-top: 0 !important;
+    display: flex;
+    margin: 0;
+    height: 100vh;
+}
+
+#TOC {
+    width: 30%;
+    height: 100%;
+    overflow-y: scroll;
+}
+
+.content {
+    width: calc(70% - 40px);
+    padding: 0 20px;
+    height: 100%;
+    overflow-y: scroll;
+    max-width: 100%;
+    overflow-x: hidden;
 }
-body > *:last-child {
-    margin-bottom: 0 !important;
+.content-inner {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
 }
 a {
     color: #4183C4;

diff --git a/utils/templates/template.html5 b/utils/templates/template.html5
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html$if(lang)$ lang="$lang$"$endif$$if(dir)$ dir="$dir$"$endif$>
+<head>
+  <meta charset="utf-8">
+  <meta name="generator" content="pandoc">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+$for(author-meta)$
+  <meta name="author" content="$author-meta$">
+$endfor$
+$if(date-meta)$
+  <meta name="dcterms.date" content="$date-meta$">
+$endif$
+$if(keywords)$
+  <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$">
+$endif$
+  <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
+  <style type="text/css">code{white-space: pre;}</style>
+$if(quotes)$
+  <style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>
+$endif$
+$if(highlighting-css)$
+  <style type="text/css">
+$highlighting-css$
+  </style>
+$endif$
+$for(css)$
+  <link rel="stylesheet" href="$css$">
+$endfor$
+$if(math)$
+  $math$
+$endif$
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+$for(header-includes)$
+  $header-includes$
+$endfor$
+</head>
+<body>
+$for(include-before)$
+$include-before$
+$endfor$
+$if(title)$
+<header>
+<h1 class="title">$title$</h1>
+$if(subtitle)$
+<p class="subtitle">$subtitle$</p>
+$endif$
+$for(author)$
+<p class="author">$author$</p>
+$endfor$
+$if(date)$
+<p class="date">$date$</p>
+$endif$
+</header>
+$endif$
+$if(toc)$
+<nav id="$idprefix$TOC">
+$toc$
+</nav>
+$endif$
+<div class="content">
+<div class="content-inner">
+$body$
+$for(include-after)$
+$include-after$
+$endfor$
+</div>
+</div>
+</body>
+</html>