summaryrefslogtreecommitdiff
path: root/live/static
diff options
context:
space:
mode:
Diffstat (limited to 'live/static')
-rw-r--r--live/static/css/style.css51
-rw-r--r--live/static/css/theme.css37
-rw-r--r--live/static/scripts/return_top.js21
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
+}