diff --git a/documentation/dev-portal/book.toml b/documentation/dev-portal/book.toml index d36c694e22..6c944bd37d 100644 --- a/documentation/dev-portal/book.toml +++ b/documentation/dev-portal/book.toml @@ -20,7 +20,7 @@ content-main-margin-left = "5%" content-main-margin-right = "5%" root-font-size = "70%" # DO NOT CHANGE or you might overwrite the custom hbs file -turn-off = true +turn-off = false [preprocessor.admonish] command = "mdbook-admonish" diff --git a/documentation/dev-portal/nym_themes/css/chrome.css b/documentation/dev-portal/nym_themes/css/chrome.css index a0e30b81ff..e16262342c 100644 --- a/documentation/dev-portal/nym_themes/css/chrome.css +++ b/documentation/dev-portal/nym_themes/css/chrome.css @@ -396,7 +396,7 @@ ul#searchresults span.teaser em { top: 0; bottom: 0; width: var(--sidebar-width); - font-size: 0.85em; + font-size: 1em; box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; diff --git a/documentation/dev-portal/nym_themes/css/variables.css b/documentation/dev-portal/nym_themes/css/variables.css index 51b94cfc5a..93de90cb02 100644 --- a/documentation/dev-portal/nym_themes/css/variables.css +++ b/documentation/dev-portal/nym_themes/css/variables.css @@ -6,7 +6,7 @@ --sidebar-resize-indicator-width: 8px; --sidebar-resize-indicator-space: 2px; --page-padding: 15px; - --content-max-width: 80%; + --content-max-width: 70%; --menu-bar-height: 40px; --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */ diff --git a/documentation/dev-portal/nym_themes/custom.css b/documentation/dev-portal/nym_themes/custom.css index 35840fabec..8005eb68df 100644 --- a/documentation/dev-portal/nym_themes/custom.css +++ b/documentation/dev-portal/nym_themes/custom.css @@ -32,7 +32,6 @@ position: absolute; left: 50%; } - .menu-bar .a:hover, /*necessary because of ^*/ @@ -45,10 +44,11 @@ select { font-size: 16px; } + + footer { font-size: 0.8em; text-align: center; border-top: 1px solid black; padding: 5px 0; } - diff --git a/documentation/dev-portal/nym_themes/index.hbs b/documentation/dev-portal/nym_themes/index.hbs index b8115558e3..505111d5b9 100644 --- a/documentation/dev-portal/nym_themes/index.hbs +++ b/documentation/dev-portal/nym_themes/index.hbs @@ -259,12 +259,12 @@
-
- {{{ content }}} -
+
+ {{{ content }}} +
diff --git a/documentation/dev-portal/nym_themes/index.hbs.bak b/documentation/dev-portal/nym_themes/index.hbs.bak deleted file mode 100644 index d2a64dbc97..0000000000 --- a/documentation/dev-portal/nym_themes/index.hbs.bak +++ /dev/null @@ -1,370 +0,0 @@ - - - - - - {{ title }} - {{#if is_print }} - - {{/if}} - {{#if base_url}} - - {{/if}} - - - - {{> head}} - - - - - - {{#if favicon_svg}} - - {{/if}} - {{#if favicon_png}} - - {{/if}} - - - - {{#if print_enable}} - - {{/if}} - - - - {{#if copy_fonts}} - - {{/if}} - - - - - - - - {{#each additional_css}} - - {{/each}} - - {{#if mathjax_support}} - - - {{/if}} - - -
- - - - - - - - - - - - - - - - - - - -
- -
- {{> header}} - - - - {{#if search_enabled}} - - {{/if}} - - - - -
-
-
-
- {{{ content }}} -
-
- -
-
-
- - -
-
- - - -
- - {{#if live_reload_endpoint}} - - - {{/if}} - - {{#if playground_line_numbers}} - - {{/if}} - - {{#if playground_copyable}} - - {{/if}} - - {{#if playground_js}} - - - - - - {{/if}} - - {{#if search_js}} - - - - {{/if}} - - - - - - - {{#each additional_js}} - - {{/each}} - - {{#if is_print}} - {{#if mathjax_support}} - - {{else}} - - {{/if}} - {{/if}} - - -
- - diff --git a/documentation/dev-portal/nym_themes/pagetoc.css b/documentation/dev-portal/nym_themes/pagetoc.css index 651572ce55..a68e5b8e21 100644 --- a/documentation/dev-portal/nym_themes/pagetoc.css +++ b/documentation/dev-portal/nym_themes/pagetoc.css @@ -1,101 +1,47 @@ -:root { - --toc-width: 270px; - --center-content-toc-shift: calc(-1 * var(--toc-width) / 2); -} - -.nav-chapters { - /* adjust width of buttons that bring to the previous or the next page */ - min-width: 50px; -} - -.previous { - /* - adjust the space between the left sidebar or the left side of the screen - and the button that leads to the previous page - */ - margin-left: var(--page-padding); -} - -@media only screen { - main { - display: flex; - } - - @media (max-width: 1179px) { - .sidebar-hidden .sidetoc { - display: none; - } - } - - @media (max-width: 1439px) { - .sidebar-visible .sidetoc { - display: none; - } - } - - @media (1180px <= width <= 1439px) { - .sidebar-hidden main { - position: relative; - left: var(--center-content-toc-shift); - } - } - - @media (1440px <= width <= 1700px) { - .sidebar-visible main { - position: relative; - left: var(--center-content-toc-shift); - } - } - - .content-wrap { - overflow-y: auto; - width: 100%; - } +/* src: https://github.com/JorelAli/mdBook-pagetoc */ +@media only screen and (max-width:1439px) { .sidetoc { - margin-top: 20px; - margin-left: 10px; + display: none; + } +} + +@media only screen and (min-width:1440px) { + main { + position: relative; + } + .sidetoc { + margin-left: auto; margin-right: auto; + /* left: calc(90% + (var(--content-min-width))/4 - 110px); */ + left: 101%; + position: absolute; + font-size: var(--pagetoc-fontsize); } .pagetoc { position: fixed; - /* adjust TOC width */ - width: var(--toc-width); - height: calc(100vh - var(--menu-bar-height) - 0.67em * 4); - overflow: auto; + width: var(--pagetoc-width); } .pagetoc a { border-left: 1px solid var(--sidebar-bg); - color: var(--fg) !important; + /* color: var(--fg); */ + /* color: var(--sidebar-fg); */ + color: var(--links); display: block; padding-bottom: 5px; padding-top: 5px; padding-left: 10px; text-align: left; text-decoration: none; + font-weight: normal; + background: var(--sidebar-bg); } .pagetoc a:hover, .pagetoc a.active { background: var(--sidebar-bg); - color: var(--sidebar-fg) !important; - } - .pagetoc .active { - background: var(--sidebar-bg); - color: var(--sidebar-fg); - } - .pagetoc .pagetoc-H2 { - padding-left: 20px; - } - .pagetoc .pagetoc-H3 { - padding-left: 40px; - } - .pagetoc .pagetoc-H4 { - padding-left: 60px; - } -} - -@media print { - .sidetoc { - display: none; + /* color: var(--sidebar-fg); */ + color: var(--sidebar-active); + font-weight: bold; + font-size: var(--pagetoc-fontsize); } } diff --git a/documentation/dev-portal/nym_themes/pagetoc.js b/documentation/dev-portal/nym_themes/pagetoc.js index 490d9e4c31..b11052427e 100644 --- a/documentation/dev-portal/nym_themes/pagetoc.js +++ b/documentation/dev-portal/nym_themes/pagetoc.js @@ -1,114 +1,68 @@ -function forEach(elems, fun) { - Array.prototype.forEach.call(elems, fun); -} - -function getPagetoc(){ - return document.getElementsByClassName("pagetoc")[0] -} - -function getPagetocElems() { - return getPagetoc().children; -} - -function getHeaders(){ - return document.getElementsByClassName("header") -} +// src: https://github.com/JorelAli/mdBook-pagetoc // Un-active everything when you click it -function forPagetocElem(fun) { - forEach(getPagetocElems(), fun); -} - -function getRect(element) { - return element.getBoundingClientRect(); -} - -function overflowTop(container, element) { - return getRect(container).top - getRect(element).top; -} - -function overflowBottom(container, element) { - return getRect(container).bottom - getRect(element).bottom; -} - -var activeHref = location.href; - -var updateFunction = function (elem = undefined) { - var id = elem; - - if (!id && location.href != activeHref) { - activeHref = location.href; - forPagetocElem(function (el) { - if (el.href === activeHref) { - id = el; - } +Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.addEventHandler("click", function() { + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.classList.remove("active"); + }); + el.classList.add("active"); }); - } +}); - if (!id) { - var elements = getHeaders(); - let margin = window.innerHeight / 3; +var updateFunction = function() { - forEach(elements, function (el, i, arr) { - if (!id && getRect(el).top >= 0) { - if (getRect(el).top < margin) { - id = el; - } else { - id = arr[Math.max(0, i - 1)]; + var id; + var elements = document.getElementsByClassName("header"); + Array.prototype.forEach.call(elements, function(el, i) { + if (window.pageYOffset >= el.offsetTop) { + id = el; } - } - // a very long last section - // its heading is over the screen - if (!id && i == arr.length - 1) { - id = el - } }); - } - forPagetocElem(function (el) { - el.classList.remove("active"); - }); + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.classList.remove("active"); + }); - if (!id) return; - - forPagetocElem(function (el) { - if (id.href.localeCompare(el.href) == 0) { - el.classList.add("active"); - let pagetoc = getPagetoc(); - if (overflowTop(pagetoc, el) > 0) { - pagetoc.scrollTop = el.offsetTop; - } - if (overflowBottom(pagetoc, el) < 0) { - pagetoc.scrollTop -= overflowBottom(pagetoc, el); - } - } - }); + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + if (id.href.localeCompare(el.href) == 0) { + el.classList.add("active"); + } + }); }; -let elements = getHeaders(); +// Populate sidebar on load +window.addEventListener('load', function() { + var pagetoc = document.getElementsByClassName("pagetoc")[0]; + var elements = document.getElementsByClassName("header"); + Array.prototype.forEach.call(elements, function(el, i) { + var link = document.createElement("a"); -if (elements.length > 1) { - // Populate sidebar on load - window.addEventListener("load", function () { - var pagetoc = getPagetoc(); - var elements = getHeaders(); - forEach(elements, function (el) { - var link = document.createElement("a"); - link.appendChild(document.createTextNode(el.text)); - link.href = el.hash; - link.classList.add("pagetoc-" + el.parentElement.tagName); - pagetoc.appendChild(link); - link.onclick = function () { - updateFunction(link); - }; + // Indent shows hierarchy + var indent = ""; + switch (el.parentElement.tagName) { + case "H2": + indent = "20px"; + break; + case "H3": + indent = "40px"; + break; + case "H4": + indent = "60px"; + break; + default: + break; + } + + link.appendChild(document.createTextNode(el.text)); + link.style.paddingLeft = indent; + link.href = el.href; + pagetoc.appendChild(link); }); - updateFunction(); - }); + updateFunction.call(); +}); - // Handle active elements on scroll - window.addEventListener("scroll", function () { - updateFunction(); - }); -} else { - document.getElementsByClassName("sidetoc")[0].remove(); -} + + +// Handle active elements on scroll +window.addEventListener("scroll", updateFunction); diff --git a/documentation/docs/book.toml b/documentation/docs/book.toml index 0f2732e7f3..33505cb707 100644 --- a/documentation/docs/book.toml +++ b/documentation/docs/book.toml @@ -14,6 +14,7 @@ edition = "2018" ################# [preprocessor.theme] +pagetoc = true sidebar-width = "280px" content-max-width = "70%" content-main-margin-left = "5%" diff --git a/documentation/docs/nym_themes/css/chrome.css b/documentation/docs/nym_themes/css/chrome.css index a0e30b81ff..e16262342c 100644 --- a/documentation/docs/nym_themes/css/chrome.css +++ b/documentation/docs/nym_themes/css/chrome.css @@ -396,7 +396,7 @@ ul#searchresults span.teaser em { top: 0; bottom: 0; width: var(--sidebar-width); - font-size: 0.85em; + font-size: 1em; box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; diff --git a/documentation/docs/nym_themes/css/variables.css b/documentation/docs/nym_themes/css/variables.css index 51b94cfc5a..93de90cb02 100644 --- a/documentation/docs/nym_themes/css/variables.css +++ b/documentation/docs/nym_themes/css/variables.css @@ -6,7 +6,7 @@ --sidebar-resize-indicator-width: 8px; --sidebar-resize-indicator-space: 2px; --page-padding: 15px; - --content-max-width: 80%; + --content-max-width: 70%; --menu-bar-height: 40px; --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */ diff --git a/documentation/docs/nym_themes/index.hbs b/documentation/docs/nym_themes/index.hbs index b8115558e3..505111d5b9 100644 --- a/documentation/docs/nym_themes/index.hbs +++ b/documentation/docs/nym_themes/index.hbs @@ -259,12 +259,12 @@
-
- {{{ content }}} -
+
+ {{{ content }}} +
diff --git a/documentation/docs/nym_themes/index.hbs.bak b/documentation/docs/nym_themes/index.hbs.bak deleted file mode 100644 index d2a64dbc97..0000000000 --- a/documentation/docs/nym_themes/index.hbs.bak +++ /dev/null @@ -1,370 +0,0 @@ - - - - - - {{ title }} - {{#if is_print }} - - {{/if}} - {{#if base_url}} - - {{/if}} - - - - {{> head}} - - - - - - {{#if favicon_svg}} - - {{/if}} - {{#if favicon_png}} - - {{/if}} - - - - {{#if print_enable}} - - {{/if}} - - - - {{#if copy_fonts}} - - {{/if}} - - - - - - - - {{#each additional_css}} - - {{/each}} - - {{#if mathjax_support}} - - - {{/if}} - - -
- - - - - - - - - - - - - - - - - - - -
- -
- {{> header}} - - - - {{#if search_enabled}} - - {{/if}} - - - - -
-
-
-
- {{{ content }}} -
-
- -
-
-
- - -
-
- - - -
- - {{#if live_reload_endpoint}} - - - {{/if}} - - {{#if playground_line_numbers}} - - {{/if}} - - {{#if playground_copyable}} - - {{/if}} - - {{#if playground_js}} - - - - - - {{/if}} - - {{#if search_js}} - - - - {{/if}} - - - - - - - {{#each additional_js}} - - {{/each}} - - {{#if is_print}} - {{#if mathjax_support}} - - {{else}} - - {{/if}} - {{/if}} - - -
- - diff --git a/documentation/docs/nym_themes/pagetoc.css b/documentation/docs/nym_themes/pagetoc.css index 651572ce55..a68e5b8e21 100644 --- a/documentation/docs/nym_themes/pagetoc.css +++ b/documentation/docs/nym_themes/pagetoc.css @@ -1,101 +1,47 @@ -:root { - --toc-width: 270px; - --center-content-toc-shift: calc(-1 * var(--toc-width) / 2); -} - -.nav-chapters { - /* adjust width of buttons that bring to the previous or the next page */ - min-width: 50px; -} - -.previous { - /* - adjust the space between the left sidebar or the left side of the screen - and the button that leads to the previous page - */ - margin-left: var(--page-padding); -} - -@media only screen { - main { - display: flex; - } - - @media (max-width: 1179px) { - .sidebar-hidden .sidetoc { - display: none; - } - } - - @media (max-width: 1439px) { - .sidebar-visible .sidetoc { - display: none; - } - } - - @media (1180px <= width <= 1439px) { - .sidebar-hidden main { - position: relative; - left: var(--center-content-toc-shift); - } - } - - @media (1440px <= width <= 1700px) { - .sidebar-visible main { - position: relative; - left: var(--center-content-toc-shift); - } - } - - .content-wrap { - overflow-y: auto; - width: 100%; - } +/* src: https://github.com/JorelAli/mdBook-pagetoc */ +@media only screen and (max-width:1439px) { .sidetoc { - margin-top: 20px; - margin-left: 10px; + display: none; + } +} + +@media only screen and (min-width:1440px) { + main { + position: relative; + } + .sidetoc { + margin-left: auto; margin-right: auto; + /* left: calc(90% + (var(--content-min-width))/4 - 110px); */ + left: 101%; + position: absolute; + font-size: var(--pagetoc-fontsize); } .pagetoc { position: fixed; - /* adjust TOC width */ - width: var(--toc-width); - height: calc(100vh - var(--menu-bar-height) - 0.67em * 4); - overflow: auto; + width: var(--pagetoc-width); } .pagetoc a { border-left: 1px solid var(--sidebar-bg); - color: var(--fg) !important; + /* color: var(--fg); */ + /* color: var(--sidebar-fg); */ + color: var(--links); display: block; padding-bottom: 5px; padding-top: 5px; padding-left: 10px; text-align: left; text-decoration: none; + font-weight: normal; + background: var(--sidebar-bg); } .pagetoc a:hover, .pagetoc a.active { background: var(--sidebar-bg); - color: var(--sidebar-fg) !important; - } - .pagetoc .active { - background: var(--sidebar-bg); - color: var(--sidebar-fg); - } - .pagetoc .pagetoc-H2 { - padding-left: 20px; - } - .pagetoc .pagetoc-H3 { - padding-left: 40px; - } - .pagetoc .pagetoc-H4 { - padding-left: 60px; - } -} - -@media print { - .sidetoc { - display: none; + /* color: var(--sidebar-fg); */ + color: var(--sidebar-active); + font-weight: bold; + font-size: var(--pagetoc-fontsize); } } diff --git a/documentation/docs/nym_themes/pagetoc.js b/documentation/docs/nym_themes/pagetoc.js index 490d9e4c31..b11052427e 100644 --- a/documentation/docs/nym_themes/pagetoc.js +++ b/documentation/docs/nym_themes/pagetoc.js @@ -1,114 +1,68 @@ -function forEach(elems, fun) { - Array.prototype.forEach.call(elems, fun); -} - -function getPagetoc(){ - return document.getElementsByClassName("pagetoc")[0] -} - -function getPagetocElems() { - return getPagetoc().children; -} - -function getHeaders(){ - return document.getElementsByClassName("header") -} +// src: https://github.com/JorelAli/mdBook-pagetoc // Un-active everything when you click it -function forPagetocElem(fun) { - forEach(getPagetocElems(), fun); -} - -function getRect(element) { - return element.getBoundingClientRect(); -} - -function overflowTop(container, element) { - return getRect(container).top - getRect(element).top; -} - -function overflowBottom(container, element) { - return getRect(container).bottom - getRect(element).bottom; -} - -var activeHref = location.href; - -var updateFunction = function (elem = undefined) { - var id = elem; - - if (!id && location.href != activeHref) { - activeHref = location.href; - forPagetocElem(function (el) { - if (el.href === activeHref) { - id = el; - } +Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.addEventHandler("click", function() { + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.classList.remove("active"); + }); + el.classList.add("active"); }); - } +}); - if (!id) { - var elements = getHeaders(); - let margin = window.innerHeight / 3; +var updateFunction = function() { - forEach(elements, function (el, i, arr) { - if (!id && getRect(el).top >= 0) { - if (getRect(el).top < margin) { - id = el; - } else { - id = arr[Math.max(0, i - 1)]; + var id; + var elements = document.getElementsByClassName("header"); + Array.prototype.forEach.call(elements, function(el, i) { + if (window.pageYOffset >= el.offsetTop) { + id = el; } - } - // a very long last section - // its heading is over the screen - if (!id && i == arr.length - 1) { - id = el - } }); - } - forPagetocElem(function (el) { - el.classList.remove("active"); - }); + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.classList.remove("active"); + }); - if (!id) return; - - forPagetocElem(function (el) { - if (id.href.localeCompare(el.href) == 0) { - el.classList.add("active"); - let pagetoc = getPagetoc(); - if (overflowTop(pagetoc, el) > 0) { - pagetoc.scrollTop = el.offsetTop; - } - if (overflowBottom(pagetoc, el) < 0) { - pagetoc.scrollTop -= overflowBottom(pagetoc, el); - } - } - }); + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + if (id.href.localeCompare(el.href) == 0) { + el.classList.add("active"); + } + }); }; -let elements = getHeaders(); +// Populate sidebar on load +window.addEventListener('load', function() { + var pagetoc = document.getElementsByClassName("pagetoc")[0]; + var elements = document.getElementsByClassName("header"); + Array.prototype.forEach.call(elements, function(el, i) { + var link = document.createElement("a"); -if (elements.length > 1) { - // Populate sidebar on load - window.addEventListener("load", function () { - var pagetoc = getPagetoc(); - var elements = getHeaders(); - forEach(elements, function (el) { - var link = document.createElement("a"); - link.appendChild(document.createTextNode(el.text)); - link.href = el.hash; - link.classList.add("pagetoc-" + el.parentElement.tagName); - pagetoc.appendChild(link); - link.onclick = function () { - updateFunction(link); - }; + // Indent shows hierarchy + var indent = ""; + switch (el.parentElement.tagName) { + case "H2": + indent = "20px"; + break; + case "H3": + indent = "40px"; + break; + case "H4": + indent = "60px"; + break; + default: + break; + } + + link.appendChild(document.createTextNode(el.text)); + link.style.paddingLeft = indent; + link.href = el.href; + pagetoc.appendChild(link); }); - updateFunction(); - }); + updateFunction.call(); +}); - // Handle active elements on scroll - window.addEventListener("scroll", function () { - updateFunction(); - }); -} else { - document.getElementsByClassName("sidetoc")[0].remove(); -} + + +// Handle active elements on scroll +window.addEventListener("scroll", updateFunction); diff --git a/documentation/operators/nym_themes/css/chrome.css b/documentation/operators/nym_themes/css/chrome.css index a0e30b81ff..e16262342c 100644 --- a/documentation/operators/nym_themes/css/chrome.css +++ b/documentation/operators/nym_themes/css/chrome.css @@ -396,7 +396,7 @@ ul#searchresults span.teaser em { top: 0; bottom: 0; width: var(--sidebar-width); - font-size: 0.85em; + font-size: 1em; box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; diff --git a/documentation/operators/nym_themes/css/variables.css b/documentation/operators/nym_themes/css/variables.css index 51b94cfc5a..93de90cb02 100644 --- a/documentation/operators/nym_themes/css/variables.css +++ b/documentation/operators/nym_themes/css/variables.css @@ -6,7 +6,7 @@ --sidebar-resize-indicator-width: 8px; --sidebar-resize-indicator-space: 2px; --page-padding: 15px; - --content-max-width: 80%; + --content-max-width: 70%; --menu-bar-height: 40px; --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */ diff --git a/documentation/operators/nym_themes/index.hbs b/documentation/operators/nym_themes/index.hbs index b8115558e3..505111d5b9 100644 --- a/documentation/operators/nym_themes/index.hbs +++ b/documentation/operators/nym_themes/index.hbs @@ -259,12 +259,12 @@
-
- {{{ content }}} -
+
+ {{{ content }}} +
diff --git a/documentation/operators/nym_themes/index.hbs.bak b/documentation/operators/nym_themes/index.hbs.bak deleted file mode 100644 index d2a64dbc97..0000000000 --- a/documentation/operators/nym_themes/index.hbs.bak +++ /dev/null @@ -1,370 +0,0 @@ - - - - - - {{ title }} - {{#if is_print }} - - {{/if}} - {{#if base_url}} - - {{/if}} - - - - {{> head}} - - - - - - {{#if favicon_svg}} - - {{/if}} - {{#if favicon_png}} - - {{/if}} - - - - {{#if print_enable}} - - {{/if}} - - - - {{#if copy_fonts}} - - {{/if}} - - - - - - - - {{#each additional_css}} - - {{/each}} - - {{#if mathjax_support}} - - - {{/if}} - - -
- - - - - - - - - - - - - - - - - - - -
- -
- {{> header}} - - - - {{#if search_enabled}} - - {{/if}} - - - - -
-
-
-
- {{{ content }}} -
-
- -
-
-
- - -
-
- - - -
- - {{#if live_reload_endpoint}} - - - {{/if}} - - {{#if playground_line_numbers}} - - {{/if}} - - {{#if playground_copyable}} - - {{/if}} - - {{#if playground_js}} - - - - - - {{/if}} - - {{#if search_js}} - - - - {{/if}} - - - - - - - {{#each additional_js}} - - {{/each}} - - {{#if is_print}} - {{#if mathjax_support}} - - {{else}} - - {{/if}} - {{/if}} - - -
- - diff --git a/documentation/operators/nym_themes/pagetoc.css b/documentation/operators/nym_themes/pagetoc.css index 651572ce55..a68e5b8e21 100644 --- a/documentation/operators/nym_themes/pagetoc.css +++ b/documentation/operators/nym_themes/pagetoc.css @@ -1,101 +1,47 @@ -:root { - --toc-width: 270px; - --center-content-toc-shift: calc(-1 * var(--toc-width) / 2); -} - -.nav-chapters { - /* adjust width of buttons that bring to the previous or the next page */ - min-width: 50px; -} - -.previous { - /* - adjust the space between the left sidebar or the left side of the screen - and the button that leads to the previous page - */ - margin-left: var(--page-padding); -} - -@media only screen { - main { - display: flex; - } - - @media (max-width: 1179px) { - .sidebar-hidden .sidetoc { - display: none; - } - } - - @media (max-width: 1439px) { - .sidebar-visible .sidetoc { - display: none; - } - } - - @media (1180px <= width <= 1439px) { - .sidebar-hidden main { - position: relative; - left: var(--center-content-toc-shift); - } - } - - @media (1440px <= width <= 1700px) { - .sidebar-visible main { - position: relative; - left: var(--center-content-toc-shift); - } - } - - .content-wrap { - overflow-y: auto; - width: 100%; - } +/* src: https://github.com/JorelAli/mdBook-pagetoc */ +@media only screen and (max-width:1439px) { .sidetoc { - margin-top: 20px; - margin-left: 10px; + display: none; + } +} + +@media only screen and (min-width:1440px) { + main { + position: relative; + } + .sidetoc { + margin-left: auto; margin-right: auto; + /* left: calc(90% + (var(--content-min-width))/4 - 110px); */ + left: 101%; + position: absolute; + font-size: var(--pagetoc-fontsize); } .pagetoc { position: fixed; - /* adjust TOC width */ - width: var(--toc-width); - height: calc(100vh - var(--menu-bar-height) - 0.67em * 4); - overflow: auto; + width: var(--pagetoc-width); } .pagetoc a { border-left: 1px solid var(--sidebar-bg); - color: var(--fg) !important; + /* color: var(--fg); */ + /* color: var(--sidebar-fg); */ + color: var(--links); display: block; padding-bottom: 5px; padding-top: 5px; padding-left: 10px; text-align: left; text-decoration: none; + font-weight: normal; + background: var(--sidebar-bg); } .pagetoc a:hover, .pagetoc a.active { background: var(--sidebar-bg); - color: var(--sidebar-fg) !important; - } - .pagetoc .active { - background: var(--sidebar-bg); - color: var(--sidebar-fg); - } - .pagetoc .pagetoc-H2 { - padding-left: 20px; - } - .pagetoc .pagetoc-H3 { - padding-left: 40px; - } - .pagetoc .pagetoc-H4 { - padding-left: 60px; - } -} - -@media print { - .sidetoc { - display: none; + /* color: var(--sidebar-fg); */ + color: var(--sidebar-active); + font-weight: bold; + font-size: var(--pagetoc-fontsize); } } diff --git a/documentation/operators/nym_themes/pagetoc.js b/documentation/operators/nym_themes/pagetoc.js index 490d9e4c31..b11052427e 100644 --- a/documentation/operators/nym_themes/pagetoc.js +++ b/documentation/operators/nym_themes/pagetoc.js @@ -1,114 +1,68 @@ -function forEach(elems, fun) { - Array.prototype.forEach.call(elems, fun); -} - -function getPagetoc(){ - return document.getElementsByClassName("pagetoc")[0] -} - -function getPagetocElems() { - return getPagetoc().children; -} - -function getHeaders(){ - return document.getElementsByClassName("header") -} +// src: https://github.com/JorelAli/mdBook-pagetoc // Un-active everything when you click it -function forPagetocElem(fun) { - forEach(getPagetocElems(), fun); -} - -function getRect(element) { - return element.getBoundingClientRect(); -} - -function overflowTop(container, element) { - return getRect(container).top - getRect(element).top; -} - -function overflowBottom(container, element) { - return getRect(container).bottom - getRect(element).bottom; -} - -var activeHref = location.href; - -var updateFunction = function (elem = undefined) { - var id = elem; - - if (!id && location.href != activeHref) { - activeHref = location.href; - forPagetocElem(function (el) { - if (el.href === activeHref) { - id = el; - } +Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.addEventHandler("click", function() { + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.classList.remove("active"); + }); + el.classList.add("active"); }); - } +}); - if (!id) { - var elements = getHeaders(); - let margin = window.innerHeight / 3; +var updateFunction = function() { - forEach(elements, function (el, i, arr) { - if (!id && getRect(el).top >= 0) { - if (getRect(el).top < margin) { - id = el; - } else { - id = arr[Math.max(0, i - 1)]; + var id; + var elements = document.getElementsByClassName("header"); + Array.prototype.forEach.call(elements, function(el, i) { + if (window.pageYOffset >= el.offsetTop) { + id = el; } - } - // a very long last section - // its heading is over the screen - if (!id && i == arr.length - 1) { - id = el - } }); - } - forPagetocElem(function (el) { - el.classList.remove("active"); - }); + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.classList.remove("active"); + }); - if (!id) return; - - forPagetocElem(function (el) { - if (id.href.localeCompare(el.href) == 0) { - el.classList.add("active"); - let pagetoc = getPagetoc(); - if (overflowTop(pagetoc, el) > 0) { - pagetoc.scrollTop = el.offsetTop; - } - if (overflowBottom(pagetoc, el) < 0) { - pagetoc.scrollTop -= overflowBottom(pagetoc, el); - } - } - }); + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + if (id.href.localeCompare(el.href) == 0) { + el.classList.add("active"); + } + }); }; -let elements = getHeaders(); +// Populate sidebar on load +window.addEventListener('load', function() { + var pagetoc = document.getElementsByClassName("pagetoc")[0]; + var elements = document.getElementsByClassName("header"); + Array.prototype.forEach.call(elements, function(el, i) { + var link = document.createElement("a"); -if (elements.length > 1) { - // Populate sidebar on load - window.addEventListener("load", function () { - var pagetoc = getPagetoc(); - var elements = getHeaders(); - forEach(elements, function (el) { - var link = document.createElement("a"); - link.appendChild(document.createTextNode(el.text)); - link.href = el.hash; - link.classList.add("pagetoc-" + el.parentElement.tagName); - pagetoc.appendChild(link); - link.onclick = function () { - updateFunction(link); - }; + // Indent shows hierarchy + var indent = ""; + switch (el.parentElement.tagName) { + case "H2": + indent = "20px"; + break; + case "H3": + indent = "40px"; + break; + case "H4": + indent = "60px"; + break; + default: + break; + } + + link.appendChild(document.createTextNode(el.text)); + link.style.paddingLeft = indent; + link.href = el.href; + pagetoc.appendChild(link); }); - updateFunction(); - }); + updateFunction.call(); +}); - // Handle active elements on scroll - window.addEventListener("scroll", function () { - updateFunction(); - }); -} else { - document.getElementsByClassName("sidetoc")[0].remove(); -} + + +// Handle active elements on scroll +window.addEventListener("scroll", updateFunction);