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,98 +1,227 @@
|
|||||||
/* avec - computer modern */
|
/* avec - computer modern */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'crm';
|
font-family: "crm";
|
||||||
src: url('font/crm.otf') format('opentype');
|
src: url("font/crm.otf") format("opentype");
|
||||||
}
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'crmb';
|
font-family: "crmb";
|
||||||
src: url('font/crmb.otf') format('opentype');
|
src: url("font/crmb.otf") format("opentype");
|
||||||
}
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'crmi';
|
font-family: "crmi";
|
||||||
src: url('font/crmi.otf') format('opentype');
|
src: url("font/crmi.otf") format("opentype");
|
||||||
}
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'crmbi';
|
font-family: "crmbi";
|
||||||
src: url('font/crmbi.otf') format('opentype');
|
src: url("font/crmbi.otf") format("opentype");
|
||||||
}
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'macsucks';
|
font-family: "macsucks";
|
||||||
src: url('font/macsucks.otf') format('opentype');
|
src: url("font/macsucks.otf") format("opentype");
|
||||||
}
|
}
|
||||||
|
|
||||||
/*default for light*/
|
/*default for light*/
|
||||||
:root {
|
:root {
|
||||||
--font-color: #000;
|
--font-color: #000;
|
||||||
--font-bold: #000;
|
--font-bold: #000;
|
||||||
--link-color:blue;
|
--link-color:blue;
|
||||||
--main-bg: #fff;
|
--main-bg: #fff;
|
||||||
--toc-bg: #eee;
|
--toc-bg: #eee;
|
||||||
--toc-accent: #ddd;
|
--toc-accent: #ddd;
|
||||||
--toc-hover: #ccc;
|
--toc-hover: #ccc;
|
||||||
--typewriter-bg: #ddd;
|
--typewriter-bg: #ddd;
|
||||||
--snackbar-bg: #333;
|
--snackbar-bg: #333;
|
||||||
--snackbar-color: #fff;
|
--snackbar-color: #fff;
|
||||||
--table-border-color: #000;
|
--table-border-color: #000;
|
||||||
--font: 'crm';
|
--font: "crm";
|
||||||
--font-i: 'crmi';
|
--font-i: "crmi";
|
||||||
--font-b: 'crmb';
|
--font-b: "crmb";
|
||||||
--font-bi: 'crmbi';
|
--font-bi: "crmbi";
|
||||||
--mobile-button: min(5vh, 80px);
|
--mobile-button: min(5vh, 80px);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] {
|
[data-theme="dark"] {
|
||||||
--font-color: #eee;
|
--font-color: #eee;
|
||||||
--font-bold: #fff;
|
--font-bold: #fff;
|
||||||
--link-color: #00cfff;
|
--link-color: #00cfff;
|
||||||
--main-bg: #121212;
|
--main-bg: #121212;
|
||||||
--toc-bg: #323232;
|
--toc-bg: #323232;
|
||||||
--toc-accent: #242424;
|
--toc-accent: #242424;
|
||||||
--toc-hover: #161616;
|
--toc-hover: #161616;
|
||||||
--typewriter-bg: #323232;
|
--typewriter-bg: #323232;
|
||||||
--snackbar-bg: #333;
|
--snackbar-bg: #333;
|
||||||
--snackbar-color: #fff;
|
--snackbar-color: #fff;
|
||||||
--table-border-color: #eee;
|
--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? */
|
/* i'm gonna be honest i don't actually LIKE web design you feel me? */
|
||||||
|
/* no longer repetitive! */
|
||||||
[data-font="sans"] {
|
[data-font="sans"] {
|
||||||
--font: -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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
--font-i: var(--font);
|
||||||
--font-b: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
--font-b: var(--font);
|
||||||
--font-bi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
--font-bi: var(--font);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: var(--font);
|
font-family: var(--font);
|
||||||
padding: 0 0px 0 0;
|
padding: 0 0px 0 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-variant-ligatures: none;
|
font-variant-ligatures: none;
|
||||||
background: var(--main-bg);
|
background: var(--main-bg);
|
||||||
color: var(--font-color);
|
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 {
|
#menu {
|
||||||
content: '\09776';
|
content: "\09776";
|
||||||
min-height: 5vh;
|
min-height: 5vh;
|
||||||
height: 5vh;
|
height: 5vh;
|
||||||
width: 5vw;
|
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 {
|
.ltx_font_typewriter {
|
||||||
background-color: var(--typewriter-bg);
|
background-color: var(--typewriter-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ltx_eqn_center_padleft, .ltx_eqn_center_padright {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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"] {
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.2s ease-out;
|
||||||
|
width: 97%;
|
||||||
|
}
|
||||||
|
|
||||||
:target::before {
|
:target::before {
|
||||||
display: block;
|
display: block;
|
||||||
content: "";
|
content: "";
|
||||||
@@ -102,213 +231,234 @@ body {
|
|||||||
pointer-events: none;
|
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_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_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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ltx_eqn_center_padleft, .ltx_eqn_center_padright {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chain {
|
.chain {
|
||||||
text-decoration:none;
|
text-decoration: none;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
|
||||||
|
|
||||||
/*side bar*/
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* +/- 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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* removing +/- from any without subs*/
|
/* removing +/- from any without subs*/
|
||||||
.del:after {
|
.del::after {
|
||||||
content: "" !important;
|
content: "" !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* return to ref button ⮌ */
|
/* return to ref button ⮌ */
|
||||||
#return.show:after {
|
#return.show::after {
|
||||||
content: "⮌";
|
content: "⮌";
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* return to ref button ⮌ */
|
/* return to ref button ⮌ */
|
||||||
#return:after {
|
#return::after {
|
||||||
content: "🡱";
|
content: "🡱";
|
||||||
display: block;
|
display: block;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#return {
|
#return {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 5vh;
|
bottom: 5vh;
|
||||||
left: calc(55% + 400px);
|
left: calc(55% + 400px);
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
color: var(--font-bold);
|
color: var(--font-bold);
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: 2px solid var(--toc-accent);
|
border: 2px solid var(--toc-accent);
|
||||||
background: var(--toc-bg);
|
background: var(--toc-bg);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: 'macsucks';
|
font-family: "macsucks";
|
||||||
}
|
}
|
||||||
|
|
||||||
/* i'm just copying this shit from w3schools ngl */
|
/* i'm just copying this shit from w3schools ngl */
|
||||||
|
|
||||||
#snackbar {
|
#snackbar {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
min-width: 250px;
|
min-width: 250px;
|
||||||
margin-left: -125px;
|
margin-left: -125px;
|
||||||
background-color: var(--snackbar-bg);
|
background-color: var(--snackbar-bg);
|
||||||
color: var(--snackbar-color);
|
color: var(--snackbar-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#snackbar.show {
|
#snackbar.show {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||||
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 */
|
/* styling the toggle buttons, which yes i know this is cursed */
|
||||||
|
.togglebuttons > button {
|
||||||
#theme-toggle, #font-toggle {
|
position: fixed;
|
||||||
position: fixed;
|
top: 0;
|
||||||
top: 0;
|
right: 0;
|
||||||
right: 0;
|
width: 80px;
|
||||||
width: 80px;
|
height: 80px;
|
||||||
height: 80px;
|
font-size: 80px;
|
||||||
font-size: 80px;
|
color: var(--font-bold);
|
||||||
color: var(--font-bold);
|
line-height: 0;
|
||||||
line-height: 0;
|
padding-bottom: 9px;
|
||||||
padding-bottom: 9px;
|
border-radius: 0;
|
||||||
border-radius: 0;
|
border: 2px solid var(--toc-accent);
|
||||||
border: 2px solid var(--toc-accent);
|
background: var(--toc-bg);
|
||||||
background: var(--toc-bg);
|
cursor: pointer;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-toggle:hover, #font-toggle:hover {
|
.togglebuttons > button, #return {
|
||||||
background: var(--toc-hover);
|
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 {
|
#font-toggle {
|
||||||
top: 80px;
|
top: 80px;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
font-size: 55px;
|
font-size: 55px;
|
||||||
padding-bottom: 6px;
|
padding: 0 6px 1px 4px;
|
||||||
padding-right: 1px;
|
font-family: "crm";
|
||||||
padding-left: 4px;
|
|
||||||
font-family: 'crm';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes fadein {
|
@-webkit-keyframes fadein {
|
||||||
from {bottom: 0; opacity: 0;}
|
from {
|
||||||
to {bottom: 30px; opacity: 1;}
|
bottom: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
bottom: 30px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadein {
|
@keyframes fadein {
|
||||||
from {bottom: 0; opacity: 0;}
|
from {
|
||||||
to {bottom: 30px; opacity: 1;}
|
bottom: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
bottom: 30px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes fadeout {
|
@-webkit-keyframes fadeout {
|
||||||
from {bottom: 30px; opacity: 1;}
|
from {
|
||||||
to {bottom: 0; opacity: 0;}
|
bottom: 30px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeout {
|
@keyframes fadeout {
|
||||||
from {bottom: 30px; opacity: 1;}
|
from {
|
||||||
to {bottom: 0; opacity: 0;}
|
bottom: 30px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
bottom: 0; opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen AND (max-width:1000px) {
|
@media screen and (max-width: 1000px) {
|
||||||
.ltx_TOC { width: 0; visibility: hidden; top: 5vh; border-right: none; }
|
#menu {
|
||||||
#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);}
|
display: block;
|
||||||
.header { display: block; position: sticky; width: 100%; top: 0; padding: 0;}
|
width: 100%;
|
||||||
.ltx_page_main { margin: auto; width: 90% !important;}
|
padding: 0;
|
||||||
.ltx_eqn_table {width: 90% !important;}
|
border-radius: 0;
|
||||||
#theme-toggle, #font-toggle {height: var(--mobile-button); width: var(--mobile-button); font-size: 30px; border-right: none; min-width: 45px; }
|
border-top: none;
|
||||||
#theme-toggle { top: 5vh; border-top: none;}
|
border-left: none;
|
||||||
#font-toggle {top: calc(2 * var(--mobile-button)); }
|
border-right: none;
|
||||||
.ltx_tocentry.ltx_tocentry_section > .ltx_ref:after { margin-right: 20px; }
|
background: var(--toc-bg);
|
||||||
:target::before { margin-top: -5vh; height: 5vh; }
|
color: var(--font);
|
||||||
#return {left: calc(95% - 50px) !important; height: 50px; width: 50px; font-size: 40px; }
|
border-bottom: 2px solid var(--toc-hover);
|
||||||
#return:after { top: 23px; }
|
}
|
||||||
|
.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) {
|
@media screen and (max-width: 500px) {
|
||||||
.ltx_eqn_table {font-size: 15px; }
|
.ltx_eqn_table {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* hack for the return button to not cut off the screen until mobile crossover */
|
/* hack for the return button to not cut off the screen until mobile crossover */
|
||||||
@media screen AND (max-width:1200px) {
|
@media screen and (max-width: 1200px) {
|
||||||
#return {left: calc(55% + 350px); }
|
#return {
|
||||||
|
left: calc(55% + 350px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
// it's still pretty scary ngl it's a giant toc but at least it starts hidden
|
||||||
function initTocOnClick() {
|
function initTocOnClick() {
|
||||||
var coll = document.querySelectorAll(".ltx_tocentry.ltx_tocentry_section > .ltx_ref");
|
const colls = document.querySelectorAll(".ltx_tocentry.ltx_tocentry_section > .ltx_ref");
|
||||||
var i;
|
|
||||||
|
|
||||||
for (i = 0; i < coll.length; i++) {
|
for (const coll of colls) {
|
||||||
coll[i].addEventListener("click", function (event) {
|
coll.addEventListener("click", (event) => {
|
||||||
this.classList.toggle("active");
|
coll.classList.toggle("active");
|
||||||
var content = this.nextElementSibling;
|
const content = coll.nextElementSibling;
|
||||||
if (content) {
|
if (content) {
|
||||||
|
event.preventDefault(); // don't jump
|
||||||
if (content.style.maxHeight) {
|
if (content.style.maxHeight) {
|
||||||
content.style.maxHeight = null;
|
content.style.maxHeight = null;
|
||||||
event.preventDefault(); // don't jump when closing
|
|
||||||
} else {
|
} else {
|
||||||
content.style.maxHeight = content.scrollHeight + "px";
|
content.style.maxHeight = content.scrollHeight + "px";
|
||||||
}
|
}
|
||||||
} else { }
|
}
|
||||||
});
|
});
|
||||||
// don't add the + if there's nothing to expand
|
// don't add the + if there's nothing to expand
|
||||||
if (coll[i].nextElementSibling) { } else {
|
if (!coll.nextElementSibling) {
|
||||||
coll[i].classList.add("del");
|
coll.classList.add("del");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// copy on click for section permalinks
|
// copy on click for section permalinks
|
||||||
function copyURI(evt) {
|
function copyURI(event) {
|
||||||
evt.preventDefault();
|
event.preventDefault();
|
||||||
// ensures url is without hash, then add on correct hash
|
try {
|
||||||
navigator.clipboard.writeText(window.location.href.replace(window.location.hash,'') + evt.target.getAttribute('href')).then(() => {
|
navigator.clipboard.writeText(
|
||||||
// clipboard successfully set
|
// ensures url is without hash, then add on correct hash
|
||||||
}, () => {
|
window.location.href.replace(window.location.hash, "") + event.target.getAttribute("href")
|
||||||
// clipboard write failed
|
);
|
||||||
});
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
// toast that i ripped from w3schools. does not nicely handle being spam clicked. w/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...
|
// 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!?
|
// you're telling me that chatgpt and copilot were trained on obtuse garbage like this!?
|
||||||
var x = document.getElementById("snackbar");
|
const snackbar = document.getElementById("snackbar");
|
||||||
x.className = "show";
|
snackbar.className = "show";
|
||||||
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2000);
|
setTimeout(() => {
|
||||||
|
snackbar.className = snackbar.className.replace("show", "");
|
||||||
|
}, 2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
// source: https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting
|
// source: https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting
|
||||||
@@ -47,118 +50,128 @@ function copyURI(evt) {
|
|||||||
function detectColorScheme() {
|
function detectColorScheme() {
|
||||||
// check if already saved dark
|
// check if already saved dark
|
||||||
if (localStorage.getItem("theme")) {
|
if (localStorage.getItem("theme")) {
|
||||||
if (localStorage.getItem("theme") == "dark") {
|
if (localStorage.getItem("theme") === "dark") {
|
||||||
document.documentElement.setAttribute("data-theme", "dark");
|
document.documentElement.setAttribute("data-theme", "dark");
|
||||||
}
|
}
|
||||||
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||||
// set to dark if OS preferred
|
// set to dark if OS preferred
|
||||||
document.documentElement.setAttribute("data-theme", "dark");
|
document.documentElement.setAttribute("data-theme", "dark");
|
||||||
localStorage.setItem('theme', 'dark');
|
localStorage.setItem("theme", "dark");
|
||||||
} else {
|
} else {
|
||||||
// default light otherwise
|
// default light otherwise
|
||||||
document.documentElement.setAttribute("data-theme", "light");
|
document.documentElement.setAttribute("data-theme", "light");
|
||||||
localStorage.setItem('theme', 'light');
|
localStorage.setItem("theme", "light");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function detectFont(){
|
function detectFont() {
|
||||||
// check if user wants sans
|
// check if user wants sans
|
||||||
if (localStorage.getItem("font") == "sans") {
|
if (localStorage.getItem("font") === "sans") {
|
||||||
document.documentElement.setAttribute("data-font", "sans");
|
document.documentElement.setAttribute("data-font", "sans");
|
||||||
localStorage.setItem('font', 'sans');
|
localStorage.setItem("font", "sans");
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
// otherwise give avec
|
// otherwise give avec
|
||||||
document.documentElement.setAttribute("data-font", "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
|
// 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
|
// add onClick to toggle theme between light and dark
|
||||||
function initThemeToggle() {
|
function initThemeToggle() {
|
||||||
document.getElementById('theme-toggle').addEventListener('click', () => {
|
document.getElementById("theme-toggle").addEventListener("click", () => {
|
||||||
document.documentElement.setAttribute(
|
document.documentElement.setAttribute(
|
||||||
'data-theme',
|
"data-theme",
|
||||||
document.documentElement.getAttribute('data-theme') === 'dark'
|
document.documentElement.getAttribute("data-theme") === "dark"
|
||||||
? 'light'
|
? "light"
|
||||||
: 'dark'
|
: "dark"
|
||||||
);
|
);
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
'theme',
|
"theme",
|
||||||
document.documentElement.getAttribute('data-theme')
|
document.documentElement.getAttribute("data-theme")
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// the same function except it's for font toggle
|
// the same function except it's for font toggle
|
||||||
// btw i think i'm a little funny for the var naming
|
// btw i think i'm a little funny for the var naming
|
||||||
|
// funny status redacted for the var naming
|
||||||
function initFontToggle() {
|
function initFontToggle() {
|
||||||
document.getElementById('font-toggle').addEventListener('click', () => {
|
document.getElementById("font-toggle").addEventListener("click", () => {
|
||||||
document.documentElement.setAttribute(
|
document.documentElement.setAttribute(
|
||||||
'data-font',
|
"data-font",
|
||||||
document.documentElement.getAttribute('data-font') === 'avec'
|
document.documentElement.getAttribute("data-font") === "avec"
|
||||||
? 'sans'
|
? "sans"
|
||||||
: 'avec'
|
: "avec"
|
||||||
);
|
);
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
'font',
|
"font",
|
||||||
document.documentElement.getAttribute('data-font')
|
document.documentElement.getAttribute("data-font")
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// saving the scroll position for clicking references or toc
|
// saving the scroll position for clicking references or toc
|
||||||
function saveScroll() {
|
function saveScroll() {
|
||||||
var coll = document.querySelectorAll(".ltx_ref");
|
const colls = document.querySelectorAll(".ltx_ref");
|
||||||
var i;
|
|
||||||
|
|
||||||
for (i = 0; i < coll.length; i++) {
|
for (const coll of colls) {
|
||||||
coll[i].addEventListener("click", function () {
|
coll.addEventListener("click", () => {
|
||||||
document.getElementById("return").classList.add("show"); // only fires once
|
document.getElementById("return").classList.add("show"); // only fires once
|
||||||
|
|
||||||
pos = window.scrollY;
|
const pos = window.scrollY;
|
||||||
scrollArray = JSON.parse(sessionStorage.getItem('scrollPos'));
|
const scrollArray = JSON.parse(sessionStorage.getItem("scrollPos") ?? "[]");
|
||||||
scrollArray.unshift(pos);
|
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() {
|
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
|
// check if saved, otherwise goto top and remove back arrow
|
||||||
if (scrollArray.length > 1) {
|
if (scrollArray.length > 1) {
|
||||||
pos = scrollArray.shift();
|
pos = scrollArray.shift();
|
||||||
sessionStorage.setItem('scrollPos', JSON.stringify(scrollArray));
|
sessionStorage.setItem("scrollPos", JSON.stringify(scrollArray));
|
||||||
window.scroll(0, Number(pos));
|
window.scroll(0, pos);
|
||||||
}
|
}
|
||||||
else if (scrollArray.length == 1) {
|
else if (scrollArray.length === 1) {
|
||||||
this.classList.remove("show");
|
this.classList.remove("show");
|
||||||
pos = scrollArray.shift();
|
let pos = scrollArray.shift();
|
||||||
sessionStorage.setItem('scrollPos', JSON.stringify(scrollArray));
|
sessionStorage.setItem("scrollPos", JSON.stringify(scrollArray));
|
||||||
window.scroll(0, Number(pos));
|
// scroll to top
|
||||||
// scroll top
|
window.scroll(0, pos);
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
this.classList.remove("show");
|
this.classList.remove("show");
|
||||||
|
// scroll to top
|
||||||
window.scroll(0, 0);
|
window.scroll(0, 0);
|
||||||
// scroll top
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// run da functions
|
// run da functions
|
||||||
initTocOnClick();
|
function main() {
|
||||||
detectColorScheme();
|
const funcs = [
|
||||||
detectFont();
|
initTocOnClick,
|
||||||
initThemeToggle();
|
detectColorScheme,
|
||||||
initFontToggle();
|
detectFont,
|
||||||
saveScroll();
|
initThemeToggle,
|
||||||
returnScroll();
|
initFontToggle,
|
||||||
// init scoll pos array storage (should this be done elsehow?)
|
saveScroll,
|
||||||
sessionStorage.setItem('scrollPos', JSON.stringify([]));
|
returnScroll
|
||||||
|
];
|
||||||
|
for (const func of funcs) {
|
||||||
|
try {
|
||||||
|
func();
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main();
|
||||||
|
|||||||
Reference in New Issue
Block a user