From 1f890411b71d73f1a6b02a62fdf70394130acbaa Mon Sep 17 00:00:00 2001 From: Spax Date: Sun, 2 Nov 2025 00:57:10 -0700 Subject: [PATCH] massive css and js overhaul/declutter --- export/pghrtcss.css | 558 ++++++++++++++++++++++++++++---------------- export/pghrtjs.js | 161 +++++++------ 2 files changed, 441 insertions(+), 278 deletions(-) diff --git a/export/pghrtcss.css b/export/pghrtcss.css index 71f00ed..c48d6ef 100644 --- a/export/pghrtcss.css +++ b/export/pghrtcss.css @@ -1,314 +1,464 @@ /* avec - computer modern */ @font-face { - font-family: 'crm'; - src: url('font/crm.otf') format('opentype'); + font-family: "crm"; + src: url("font/crm.otf") format("opentype"); } @font-face { - font-family: 'crmb'; - src: url('font/crmb.otf') format('opentype'); + font-family: "crmb"; + src: url("font/crmb.otf") format("opentype"); } @font-face { - font-family: 'crmi'; - src: url('font/crmi.otf') format('opentype'); + font-family: "crmi"; + src: url("font/crmi.otf") format("opentype"); } @font-face { - font-family: 'crmbi'; - src: url('font/crmbi.otf') format('opentype'); + font-family: "crmbi"; + src: url("font/crmbi.otf") format("opentype"); } @font-face { - font-family: 'macsucks'; - src: url('font/macsucks.otf') format('opentype'); + font-family: "macsucks"; + src: url("font/macsucks.otf") format("opentype"); } /*default for light*/ :root { - --font-color: #000; - --font-bold: #000; - --link-color:blue; - --main-bg: #fff; - --toc-bg: #eee; - --toc-accent: #ddd; - --toc-hover: #ccc; - --typewriter-bg: #ddd; - --snackbar-bg: #333; - --snackbar-color: #fff; - --table-border-color: #000; - --font: 'crm'; - --font-i: 'crmi'; - --font-b: 'crmb'; - --font-bi: 'crmbi'; - --mobile-button: min(5vh, 80px); + --font-color: #000; + --font-bold: #000; + --link-color:blue; + --main-bg: #fff; + --toc-bg: #eee; + --toc-accent: #ddd; + --toc-hover: #ccc; + --typewriter-bg: #ddd; + --snackbar-bg: #333; + --snackbar-color: #fff; + --table-border-color: #000; + --font: "crm"; + --font-i: "crmi"; + --font-b: "crmb"; + --font-bi: "crmbi"; + --mobile-button: min(5vh, 80px); } [data-theme="dark"] { - --font-color: #eee; - --font-bold: #fff; - --link-color: #00cfff; - --main-bg: #121212; - --toc-bg: #323232; - --toc-accent: #242424; - --toc-hover: #161616; - --typewriter-bg: #323232; - --snackbar-bg: #333; - --snackbar-color: #fff; - --table-border-color: #eee; + --font-color: #eee; + --font-bold: #fff; + --link-color: #00cfff; + --main-bg: #121212; + --toc-bg: #323232; + --toc-accent: #242424; + --toc-hover: #161616; + --typewriter-bg: #323232; + --snackbar-bg: #333; + --snackbar-color: #fff; + --table-border-color: #eee; } -/* i changed how i wanted to do this and now it's annoyingly repeititive but that's fineeee*/ +/* i changed how i wanted to do this and now it's annoyingly repeititive but that's fineeee */ /* i'm gonna be honest i don't actually LIKE web design you feel me? */ +/* no longer repetitive! */ [data-font="sans"] { - --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --font-i: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --font-b: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --font-bi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-i: var(--font); + --font-b: var(--font); + --font-bi: var(--font); } body { - font-family: var(--font); - padding: 0 0px 0 0; - margin: 0; - font-size: 17px; + font-family: var(--font); + padding: 0 0px 0 0; + margin: 0; + font-size: 17px; font-variant-ligatures: none; background: var(--main-bg); color: var(--font-color); } -.ltx_TOC a:link, .ltx_TOC a:visited, .ltx_p a:link, .ltx_p a:visited, a.ltx_LaTeXML_logo:visited{ color: var(--link-color) !important; } -.ltx_personname a:link, .ltx_personname a:visited { color: fuchsia; } - -.ltx_title_abstract, .ltx_title, .ltx_font_bold { font-family: var(--font-b);} -.ltx_font_italic { font-family: var(--font-i);} -.ltx_font_bold.ltx_font_italic, .ltx_title .ltx_font_italic { font-family: var(--font-bi) !important; } -.ltx_title_subsection, .ltx_title, .ltx_font_bold { font-weight: bold; color: var(--font-bold);} - #menu { - content: '\09776'; - min-height: 5vh; - height: 5vh; - width: 5vw; + content: "\09776"; + min-height: 5vh; + height: 5vh; + width: 5vw; + display: none; +} + +.header { + display: none; +} + + +.ltx_TOC a:link, +.ltx_TOC a:visited, +.ltx_p a:link, +.ltx_p a:visited, +a.ltx_LaTeXML_logo:visited { + color: var(--link-color) !important; +} + +.ltx_personname a:link, .ltx_personname a:visited { + color: fuchsia; +} + +.ltx_title_abstract, .ltx_title, .ltx_font_bold { + font-family: var(--font-b); +} + +.ltx_font_italic { + font-family: var(--font-i); +} + +.ltx_font_bold.ltx_font_italic, .ltx_title .ltx_font_italic { + font-family: var(--font-bi) !important; +} + +.ltx_title_subsection, .ltx_title, .ltx_font_bold { + font-weight: bold; + color: var(--font-bold); } -.header { display: none; } .ltx_font_typewriter { - background-color: var(--typewriter-bg); + background-color: var(--typewriter-bg); } -:target::before { - display: block; - content: ""; - margin-top: -2vh; - height: 2vh; - visibility: hidden; - pointer-events: none; +.ltx_page_main { + margin-left: 400px; + transition: margin 0.2s ease-out; + padding: min(1em, 1.5%) min(3em, 4.5%) min(1em, 1.5%) min(3em, 4.5%); + width: 50%; } -.ltx_page_main { margin-left: 400px; transition: margin 0.2s ease-out; padding: min(1em,1.5%) min(3em,4.5%) min(1em,1.5%) min(3em, 4.5%); width: 50%;} -.ltx_TOC a { display: block; width: 100%; } -.ltx_TOC { position: fixed; overflow-y: scroll; width: 400px; background-color: var(--toc-bg); transition: width 0.2s ease-out; top: 0; bottom: 0; border-right: 2px solid var(--toc-accent);} -.ltx_TOC.show { width: 100vw; visibility: visible; } -#menu { display: none; } +.ltx_TOC a { + display: block; width: 100%; +} -.ltx_border_tt, .ltx_border_t, .ltx_border_bb { border-color: var(--table-border-color); } +.ltx_TOC { + position: fixed; + overflow-y: scroll; + width: 400px; + background-color: var(--toc-bg); + transition: width 0.2s ease-out; + top: 0; + bottom: 0; + border-right: 2px solid var(--toc-accent); +} +.ltx_TOC.show { + width: 100vw; + visibility: visible; +} -.ltx_toclist { padding: 0; } -.ltx_tocentry { padding-left: 20px } -.ltx_title_contents {text-align:center; font-size: 120%; margin-top: 1em; margin-bottom: 1em; } -.ltx_tag_section { margin-right: .5em } -.ltx_p { line-height: 1.4; } +.ltx_border_tt, .ltx_border_t, .ltx_border_bb { + border-color: var(--table-border-color); +} + +.ltx_toclist { + padding: 0; +} + +.ltx_tocentry { + padding-left: 20px; +} + +.ltx_title_contents { + text-align: center; + font-size: 120%; + margin-top: 1em; + margin-bottom: 1em; +} + +.ltx_tag_section { + margin-right: .5em; +} + +.ltx_p { + line-height: 1.4; +} .ltx_tocentry_section { cursor: pointer; } .ltx_graphics { - object-fit: contain; - height: auto !important; - width: 100% !important; - max-width: max-content; + object-fit: contain; + height: auto !important; + width: 100% !important; + max-width: max-content; } .ltx_eqn_center_padleft, .ltx_eqn_center_padright { - min-width: 0; + min-width: 0; } -.chain { - text-decoration:none; - font-size: 80%; +.ltx_tocentry_subsection:hover, .ltx_ref.active:hover { + background-color: var(--toc-hover); +} + +.ltx_tocentry_section:hover { + background-color: var(--toc-accent); +} + +/* +/- handling */ +.ltx_tocentry.ltx_tocentry_section > .ltx_ref::after { + content: "\2795"; /* Unicode escape sequence for the plus sign (+) emoji */ + font-size: 16px; + color: white; + float: right; + margin-right: 5px; + position: relative; + font-family: serif; +} + +.ltx_tocentry.ltx_tocentry_section > .ltx_ref.active::after { + content: "\2796"; /* Unicode escape sequence for the minus sign (-) emoji */ + position: relative; + font-family: serif; } /*side bar*/ -ol[class="ltx_toclist ltx_toclist_section"]{ +ol[class="ltx_toclist ltx_toclist_section"] { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; width: 97%; } -.ltx_tocentry_subsection:hover, .ltx_ref.active:hover { - background-color: var(--toc-hover); -} -* -.ltx_tocentry_section:hover { - background-color: var(--toc-accent); +:target::before { + display: block; + content: ""; + margin-top: -2vh; + height: 2vh; + visibility: hidden; + pointer-events: none; } - -/* +/- handling */ - -.ltx_tocentry.ltx_tocentry_section > .ltx_ref:after { - content: '\02795'; /* Unicode character for "plus" sign (+) */ - font-size: 16px; - color: white; - float: right; - margin-right: 5px; - position: relative; - z-index: 100; - font-family: serif; -} - -.ltx_tocentry.ltx_tocentry_section > .ltx_ref.active:after { - content: "\2796"; /* Unicode character for "minus" sign (-) */ - position: relative; - z-index: 100; - font-family: serif; +.chain { + text-decoration: none; + font-size: 80%; } /* removing +/- from any without subs*/ -.del:after { - content: "" !important; -} - -/* return to ref button ⮌ */ -#return.show:after { - content: "⮌"; - display: block; +.del::after { + content: "" !important; } /* return to ref button ⮌ */ -#return:after { - content: "🡱"; - display: block; - top: 40px; - position: relative; +#return.show::after { + content: "⮌"; + display: block; +} + +/* return to ref button ⮌ */ +#return::after { + content: "🡱"; + display: block; + top: 40px; + position: relative; } #return { - position: fixed; - bottom: 5vh; - left: calc(55% + 400px); - width: 80px; - height: 80px; - font-size: 60px; - color: var(--font-bold); - line-height: 0; - padding: 0; - border-radius: 0; - border: 2px solid var(--toc-accent); - background: var(--toc-bg); - cursor: pointer; - text-align: center; - font-family: 'macsucks'; + position: fixed; + bottom: 5vh; + left: calc(55% + 400px); + width: 80px; + height: 80px; + font-size: 60px; + color: var(--font-bold); + line-height: 0; + padding: 0; + border-radius: 0; + border: 2px solid var(--toc-accent); + background: var(--toc-bg); + cursor: pointer; + text-align: center; + font-family: "macsucks"; } /* i'm just copying this shit from w3schools ngl */ - #snackbar { - visibility: hidden; - min-width: 250px; - margin-left: -125px; - background-color: var(--snackbar-bg); - color: var(--snackbar-color); - text-align: center; - border-radius: 2px; - padding: 16px; - position: fixed; - z-index: 1; - left: 50%; - bottom: 30px; - font-size: 17px; + visibility: hidden; + min-width: 250px; + margin-left: -125px; + background-color: var(--snackbar-bg); + color: var(--snackbar-color); + text-align: center; + border-radius: 2px; + padding: 16px; + position: fixed; + z-index: 1; + left: 50%; + bottom: 30px; + font-size: 17px; } #snackbar.show { - visibility: visible; - -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; - animation: fadein 0.5s, fadeout 0.5s 2.5s; + visibility: visible; + -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; + animation: fadein 0.5s, fadeout 0.5s 2.5s; } + /* styling the toggle buttons, which yes i know this is cursed */ - -#theme-toggle, #font-toggle { - position: fixed; - top: 0; - right: 0; - width: 80px; - height: 80px; - font-size: 80px; - color: var(--font-bold); - line-height: 0; - padding-bottom: 9px; - border-radius: 0; - border: 2px solid var(--toc-accent); - background: var(--toc-bg); - cursor: pointer; +.togglebuttons > button { + position: fixed; + top: 0; + right: 0; + width: 80px; + height: 80px; + font-size: 80px; + color: var(--font-bold); + line-height: 0; + padding-bottom: 9px; + border-radius: 0; + border: 2px solid var(--toc-accent); + background: var(--toc-bg); + cursor: pointer; } -#theme-toggle:hover, #font-toggle:hover { - background: var(--toc-hover); +.togglebuttons > button, #return { + transition-property: background, border; + transition-duration: 0.1s; + transition-timing-function: linear; } -/* BELIEVE ME, i know this is cursed. YOU try having a generated html output that you're adding amendments to with sloppy code injection! AND also clearly defined content layout requirements based on the project requirements. i don't need to over engineer this, okay!? */ +.togglebuttons > button:hover, #return:hover { + background: var(--toc-hover); +} + + +/* +BELIEVE ME, i know this is cursed. +YOU try having a generated html output that you're +adding amendments to with sloppy code injection! +AND also clearly defined content layout requirements +based on the project requirements. +i don't need to over engineer this, okay!? +*/ #font-toggle { top: 80px; border-top: 0; font-size: 55px; - padding-bottom: 6px; - padding-right: 1px; - padding-left: 4px; - font-family: 'crm'; + padding: 0 6px 1px 4px; + font-family: "crm"; } @-webkit-keyframes fadein { - from {bottom: 0; opacity: 0;} - to {bottom: 30px; opacity: 1;} + from { + bottom: 0; + opacity: 0; + } + to { + bottom: 30px; + opacity: 1; + } } @keyframes fadein { - from {bottom: 0; opacity: 0;} - to {bottom: 30px; opacity: 1;} + from { + bottom: 0; + opacity: 0; + } + to { + bottom: 30px; + opacity: 1; + } } @-webkit-keyframes fadeout { - from {bottom: 30px; opacity: 1;} - to {bottom: 0; opacity: 0;} + from { + bottom: 30px; + opacity: 1; + } + to { + bottom: 0; + opacity: 0; + } } @keyframes fadeout { - from {bottom: 30px; opacity: 1;} - to {bottom: 0; opacity: 0;} + from { + bottom: 30px; + opacity: 1; + } + to { + bottom: 0; opacity: 0; + } } -@media screen AND (max-width:1000px) { - .ltx_TOC { width: 0; visibility: hidden; top: 5vh; border-right: none; } - #menu { display: block; width: 100%; padding: 0; border-radius: 0; border-top: none; border-left: none; border-right: none; background: var(--toc-bg);color: var(--font); border-bottom: 2px solid var(--toc-hover);} - .header { display: block; position: sticky; width: 100%; top: 0; padding: 0;} - .ltx_page_main { margin: auto; width: 90% !important;} - .ltx_eqn_table {width: 90% !important;} - #theme-toggle, #font-toggle {height: var(--mobile-button); width: var(--mobile-button); font-size: 30px; border-right: none; min-width: 45px; } - #theme-toggle { top: 5vh; border-top: none;} - #font-toggle {top: calc(2 * var(--mobile-button)); } - .ltx_tocentry.ltx_tocentry_section > .ltx_ref:after { margin-right: 20px; } - :target::before { margin-top: -5vh; height: 5vh; } - #return {left: calc(95% - 50px) !important; height: 50px; width: 50px; font-size: 40px; } - #return:after { top: 23px; } +@media screen and (max-width: 1000px) { + #menu { + display: block; + width: 100%; + padding: 0; + border-radius: 0; + border-top: none; + border-left: none; + border-right: none; + background: var(--toc-bg); + color: var(--font); + border-bottom: 2px solid var(--toc-hover); + } + .header { + display: block; + position: sticky; + width: 100%; + top: 0; + padding: 0; + } + .ltx_TOC { + width: 0; + visibility: hidden; + top: 5vh; + border-right: none; + } + .ltx_page_main { + margin: auto; + width: 90% !important; + } + .ltx_eqn_table { + width: 90% !important; + } + .ltx_tocentry.ltx_tocentry_section > .ltx_ref::after { + margin-right: 20px; + } + .togglebuttons > button { + height: var(--mobile-button); + width: var(--mobile-button); + font-size: 30px; + border-right: none; + min-width: 45px; + } + #theme-toggle { + top: 5vh; + border-top: none; + } + #font-toggle { + top: calc(2 * var(--mobile-button)); + } + :target::before { + margin-top: -5vh; + height: 5vh; + } + #return { + left: calc(95% - 50px) !important; + height: 50px; + width: 50px; + font-size: 40px; + } + #return::after { + top: 23px; + } } -@media screen AND (max-width:500px) { - .ltx_eqn_table {font-size: 15px; } +@media screen and (max-width: 500px) { + .ltx_eqn_table { + font-size: 15px; + } } /* hack for the return button to not cut off the screen until mobile crossover */ -@media screen AND (max-width:1200px) { - #return {left: calc(55% + 350px); } +@media screen and (max-width: 1200px) { + #return { + left: calc(55% + 350px); + } } diff --git a/export/pghrtjs.js b/export/pghrtjs.js index ebdb29c..c8a1461 100644 --- a/export/pghrtjs.js +++ b/export/pghrtjs.js @@ -1,44 +1,47 @@ -// this function adds the + and functionality to the toc so that it is less scary +// this function adds the + and functionality to the toc so that it is less scary // it's still pretty scary ngl it's a giant toc but at least it starts hidden function initTocOnClick() { - var coll = document.querySelectorAll(".ltx_tocentry.ltx_tocentry_section > .ltx_ref"); - var i; + const colls = document.querySelectorAll(".ltx_tocentry.ltx_tocentry_section > .ltx_ref"); - for (i = 0; i < coll.length; i++) { - coll[i].addEventListener("click", function (event) { - this.classList.toggle("active"); - var content = this.nextElementSibling; + for (const coll of colls) { + coll.addEventListener("click", (event) => { + coll.classList.toggle("active"); + const content = coll.nextElementSibling; if (content) { + event.preventDefault(); // don't jump if (content.style.maxHeight) { content.style.maxHeight = null; - event.preventDefault(); // don't jump when closing } else { content.style.maxHeight = content.scrollHeight + "px"; } - } else { } + } }); // don't add the + if there's nothing to expand - if (coll[i].nextElementSibling) { } else { - coll[i].classList.add("del"); + if (!coll.nextElementSibling) { + coll.classList.add("del"); } } } // copy on click for section permalinks -function copyURI(evt) { - evt.preventDefault(); - // ensures url is without hash, then add on correct hash - navigator.clipboard.writeText(window.location.href.replace(window.location.hash,'') + evt.target.getAttribute('href')).then(() => { - // clipboard successfully set - }, () => { - // clipboard write failed - }); +function copyURI(event) { + event.preventDefault(); + try { + navigator.clipboard.writeText( + // ensures url is without hash, then add on correct hash + window.location.href.replace(window.location.hash, "") + event.target.getAttribute("href") + ); + } catch (e) { + console.error(e); + } // toast that i ripped from w3schools. does not nicely handle being spam clicked. w/e // OKAY understanding more later. why is this replace and not remove? so ugly wow... // you're telling me that chatgpt and copilot were trained on obtuse garbage like this!? - var x = document.getElementById("snackbar"); - x.className = "show"; - setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2000); + const snackbar = document.getElementById("snackbar"); + snackbar.className = "show"; + setTimeout(() => { + snackbar.className = snackbar.className.replace("show", ""); + }, 2000); } // source: https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting @@ -47,118 +50,128 @@ function copyURI(evt) { function detectColorScheme() { // check if already saved dark if (localStorage.getItem("theme")) { - if (localStorage.getItem("theme") == "dark") { + if (localStorage.getItem("theme") === "dark") { document.documentElement.setAttribute("data-theme", "dark"); } } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) { // set to dark if OS preferred document.documentElement.setAttribute("data-theme", "dark"); - localStorage.setItem('theme', 'dark'); + localStorage.setItem("theme", "dark"); } else { // default light otherwise document.documentElement.setAttribute("data-theme", "light"); - localStorage.setItem('theme', 'light'); + localStorage.setItem("theme", "light"); } } -function detectFont(){ - // check if user wants sans - if (localStorage.getItem("font") == "sans") { +function detectFont() { + // check if user wants sans + if (localStorage.getItem("font") === "sans") { document.documentElement.setAttribute("data-font", "sans"); - localStorage.setItem('font', 'sans'); + localStorage.setItem("font", "sans"); } else { // otherwise give avec document.documentElement.setAttribute("data-font", "avec"); - localStorage.setItem('font', 'avec'); + localStorage.setItem("font", "avec"); } } // source: https://www.accessibilityfirst.at/posts/dark-and-light-mode-a-simple-guide-for-web-design-and-development // add onClick to toggle theme between light and dark function initThemeToggle() { - document.getElementById('theme-toggle').addEventListener('click', () => { + document.getElementById("theme-toggle").addEventListener("click", () => { document.documentElement.setAttribute( - 'data-theme', - document.documentElement.getAttribute('data-theme') === 'dark' - ? 'light' - : 'dark' + "data-theme", + document.documentElement.getAttribute("data-theme") === "dark" + ? "light" + : "dark" ); localStorage.setItem( - 'theme', - document.documentElement.getAttribute('data-theme') + "theme", + document.documentElement.getAttribute("data-theme") ); }); } // the same function except it's for font toggle // btw i think i'm a little funny for the var naming +// funny status redacted for the var naming function initFontToggle() { - document.getElementById('font-toggle').addEventListener('click', () => { + document.getElementById("font-toggle").addEventListener("click", () => { document.documentElement.setAttribute( - 'data-font', - document.documentElement.getAttribute('data-font') === 'avec' - ? 'sans' - : 'avec' + "data-font", + document.documentElement.getAttribute("data-font") === "avec" + ? "sans" + : "avec" ); localStorage.setItem( - 'font', - document.documentElement.getAttribute('data-font') + "font", + document.documentElement.getAttribute("data-font") ); }); } // saving the scroll position for clicking references or toc function saveScroll() { - var coll = document.querySelectorAll(".ltx_ref"); - var i; + const colls = document.querySelectorAll(".ltx_ref"); - for (i = 0; i < coll.length; i++) { - coll[i].addEventListener("click", function () { + for (const coll of colls) { + coll.addEventListener("click", () => { document.getElementById("return").classList.add("show"); // only fires once - pos = window.scrollY; - scrollArray = JSON.parse(sessionStorage.getItem('scrollPos')); - scrollArray.unshift(pos); - sessionStorage.setItem('scrollPos', JSON.stringify(scrollArray)); + const pos = window.scrollY; + const scrollArray = JSON.parse(sessionStorage.getItem("scrollPos") ?? "[]"); + scrollArray.unshift(pos); + sessionStorage.setItem("scrollPos", JSON.stringify(scrollArray)); }); } } -// it returns. positions stored in array then will jump back +// it returns to scroll positions stored in the array "scrollPos" function returnScroll() { - document.getElementById("return").addEventListener("click", function () { + document.getElementById("return").addEventListener("click", () => { - scrollArray = JSON.parse(sessionStorage.getItem('scrollPos')); + const scrollArray = JSON.parse(sessionStorage.getItem("scrollPos") ?? "[]").map(num => Number(num)); // check if saved, otherwise goto top and remove back arrow if (scrollArray.length > 1) { pos = scrollArray.shift(); - sessionStorage.setItem('scrollPos', JSON.stringify(scrollArray)); - window.scroll(0, Number(pos)); + sessionStorage.setItem("scrollPos", JSON.stringify(scrollArray)); + window.scroll(0, pos); } - else if (scrollArray.length == 1) { + else if (scrollArray.length === 1) { this.classList.remove("show"); - pos = scrollArray.shift(); - sessionStorage.setItem('scrollPos', JSON.stringify(scrollArray)); - window.scroll(0, Number(pos)); - // scroll top - } - else { + let pos = scrollArray.shift(); + sessionStorage.setItem("scrollPos", JSON.stringify(scrollArray)); + // scroll to top + window.scroll(0, pos); + } else { this.classList.remove("show"); + // scroll to top window.scroll(0, 0); - // scroll top } }); } // run da functions -initTocOnClick(); -detectColorScheme(); -detectFont(); -initThemeToggle(); -initFontToggle(); -saveScroll(); -returnScroll(); -// init scoll pos array storage (should this be done elsehow?) -sessionStorage.setItem('scrollPos', JSON.stringify([])); \ No newline at end of file +function main() { + const funcs = [ + initTocOnClick, + detectColorScheme, + detectFont, + initThemeToggle, + initFontToggle, + saveScroll, + returnScroll + ]; + for (const func of funcs) { + try { + func(); + } catch (e) { + console.error(e); + } + } +} + +main();