3 files changed, 105 insertions, 4 deletions

diff --git a/live/static/css/style.css b/live/static/css/style.css
index 5a18881..161da3d 100644
--- a/live/static/css/style.css
+++ b/live/static/css/style.css
@@ -13,6 +13,46 @@ h2 {
   text-align: center;
 }
 
+h1 a.headerlink,
+h2 a.headerlink,
+h3 a.headerlink,
+h4 a.headerlink,
+h5 a.headerlink,
+h5 a.headerlink {
+  display: none;
+  padding-left: 0.3em;
+}
+
+h1:hover a.headerlink,
+h2:hover a.headerlink,
+h3:hover a.headerlink,
+h4:hover a.headerlink,
+h5:hover a.headerlink,
+h6:hover a.headerlink{
+  display: inline;
+}
+
+div.return-top {
+  position: fixed;
+  bottom: 1em;
+  right: 1em;
+}
+
+button.return-top {
+  display: none;
+  border: none;
+  font: inherit;
+  cursor: pointer;
+  position: relative;
+  border-radius: 5px;
+  min-width: 1em;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  padding-left: 0.4em;
+  padding-right: 0.4em;
+}
+
+
 body,
 html {
   margin: 0;
@@ -77,6 +117,12 @@ main.art p {
   width: clamp(30ch, calc(100% - 1em), 75ch);
 }
 
+/* TOC */
+
+div.toc {
+  border-radius: 5px;
+  overflow-wrap: anywhere;
+}
 
 /* article/art elements */
 div.article-info,
@@ -243,7 +289,6 @@ img {
   display: block;
   margin-left: auto;
   margin-right: auto;
-  vertical-align: middle;
 }
 
 img.wrap-right {
@@ -377,7 +422,9 @@ div.page-nav > span {
   padding-left: 0.4em;
   padding-right: 0.4em;
   margin-left: 0.2em;
-  margin-right: 0.2em;
+  margin-right: 0.2em
+
+  ;
 }
 
 div.art-nav > span span,
diff --git a/live/static/css/theme.css b/live/static/css/theme.css
index c9b85c6..80ae808 100644
--- a/live/static/css/theme.css
+++ b/live/static/css/theme.css
@@ -46,7 +46,7 @@
   --code-border: var(--color3);
   --art-border: var(--color3);
 
-  --pagenav-bg: var(--color1);
+  --pagenav-bg: var(--color5);
   --pagenav-bg-hl: var(--color2);
   --pagenav-link: var(--color8);
   --pagenav-link-hl: var(--color7);
@@ -80,7 +80,7 @@
   --code-border: var(--color4);
   --art-border: var(--color4);
 
-  --pagenav-bg: var(--color10);
+  --pagenav-bg: var(--color3);
   --pagenav-bg-hl: var(--color9);
   --pagenav-link: var(--color7);
   --pagenav-link-hl: var(--color6);
@@ -137,6 +137,24 @@ h5 {
   color: var(--fg-acc5);
 }
 
+a.headerlink {
+  color: var(--fg-acc2);
+}
+
+a.headerlink:hover {
+  color: var(--fg-acc1);
+}
+
+button.return-top {
+  background-color: var(--navitem-bg);
+  color: var(--navitem-link);
+}
+
+button.return-top:hover {
+  background-color: var(--navitem-bg-hl);
+  color: var(--navitem-link-hl);
+}
+
 body {
   background: var(--bg);
   color: var(--fg);
@@ -151,6 +169,21 @@ pre, code {
   border: 1px solid var(--code-border);
 }
 
+/* TOC */
+
+div.toc {
+  border: 1px solid var(--code-border);
+  background-color: var(--bg);
+}
+
+div.toc a {
+  color: var(--fg-acc2)
+}
+
+div.toc a:hover {
+  color: var(--fg-acc1)
+}
+
 /* nav bar */
 body > header {
   background: var(--bg);
diff --git a/live/static/scripts/return_top.js b/live/static/scripts/return_top.js
new file mode 100644
index 0000000..77c468f
--- /dev/null
+++ b/live/static/scripts/return_top.js
@@ -0,0 +1,21 @@
+// Taken from https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
+// and tweaked as needed
+document.addEventListener("DOMContentLoaded", function(event) {
+    let returnTopButton = document.getElementById("returnTopButton");
+    let scrollTopAppearPX = window.screen.availHeight;
+
+    window.onscroll = function() {scrolling(returnTopButton, scrollTopAppearPX)};
+})
+
+function scrolling(returnButton, onScrollAppear) {
+  if (document.body.scrollTop > onScrollAppear || document.documentElement.scrollTop > onScrollAppear) {
+    returnButton.style.display = "inline-block";
+  } else {
+    returnButton.style.display = "none";
+  }
+}
+
+function returnTop() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}