mirror of
https://github.com/Juicysteak117/pghrt.git
synced 2025-12-21 15:35:25 +00:00
massive css and js overhaul/declutter
This commit is contained in:
Spax
@@ -1,23 +1,23 @@
|
||||
/* 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*/
|
||||
@@ -33,10 +33,10 @@
|
||||
--snackbar-bg: #333;
|
||||
--snackbar-color: #fff;
|
||||
--table-border-color: #000;
|
||||
--font: 'crm';
|
||||
--font-i: 'crmi';
|
||||
--font-b: 'crmb';
|
||||
--font-bi: 'crmbi';
|
||||
--font: "crm";
|
||||
--font-i: "crmi";
|
||||
--font-b: "crmb";
|
||||
--font-bi: "crmbi";
|
||||
--mobile-button: min(5vh, 80px);
|
||||
}
|
||||
|
||||
@@ -54,13 +54,14 @@
|
||||
--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-i: var(--font);
|
||||
--font-b: var(--font);
|
||||
--font-bi: var(--font);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -73,49 +74,105 @@ body {
|
||||
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';
|
||||
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);
|
||||
}
|
||||
|
||||
: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;
|
||||
@@ -132,61 +189,66 @@ body {
|
||||
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 {
|
||||
.del::after {
|
||||
content: "" !important;
|
||||
}
|
||||
|
||||
/* return to ref button ⮌ */
|
||||
#return.show:after {
|
||||
#return.show::after {
|
||||
content: "⮌";
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* return to ref button ⮌ */
|
||||
#return:after {
|
||||
#return::after {
|
||||
content: "🡱";
|
||||
display: block;
|
||||
top: 40px;
|
||||
@@ -208,11 +270,10 @@ ol[class="ltx_toclist ltx_toclist_section"]{
|
||||
background: var(--toc-bg);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-family: 'macsucks';
|
||||
font-family: "macsucks";
|
||||
}
|
||||
|
||||
/* i'm just copying this shit from w3schools ngl */
|
||||
|
||||
#snackbar {
|
||||
visibility: hidden;
|
||||
min-width: 250px;
|
||||
@@ -235,9 +296,9 @@ ol[class="ltx_toclist ltx_toclist_section"]{
|
||||
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
}
|
||||
|
||||
/* styling the toggle buttons, which yes i know this is cursed */
|
||||
|
||||
#theme-toggle, #font-toggle {
|
||||
/* styling the toggle buttons, which yes i know this is cursed */
|
||||
.togglebuttons > button {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -253,62 +314,151 @@ ol[class="ltx_toclist ltx_toclist_section"]{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#theme-toggle:hover, #font-toggle:hover {
|
||||
.togglebuttons > button, #return {
|
||||
transition-property: background, border;
|
||||
transition-duration: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
.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!? */
|
||||
|
||||
/*
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,44 +1,47 @@
|
||||
// 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();
|
||||
function copyURI(event) {
|
||||
event.preventDefault();
|
||||
try {
|
||||
navigator.clipboard.writeText(
|
||||
// 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
|
||||
});
|
||||
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(){
|
||||
function detectFont() {
|
||||
// check if user wants sans
|
||||
if (localStorage.getItem("font") == "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'));
|
||||
const pos = window.scrollY;
|
||||
const scrollArray = JSON.parse(sessionStorage.getItem("scrollPos") ?? "[]");
|
||||
scrollArray.unshift(pos);
|
||||
sessionStorage.setItem('scrollPos', JSON.stringify(scrollArray));
|
||||
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([]));
|
||||
function main() {
|
||||
const funcs = [
|
||||
initTocOnClick,
|
||||
detectColorScheme,
|
||||
detectFont,
|
||||
initThemeToggle,
|
||||
initFontToggle,
|
||||
saveScroll,
|
||||
returnScroll
|
||||
];
|
||||
for (const func of funcs) {
|
||||
try {
|
||||
func();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
Reference in New Issue
Block a user