diff --git a/css/style-toc.css b/css/style-toc.css
index 9cb58f0e..daf392e2 100644
--- a/css/style-toc.css
+++ b/css/style-toc.css
@@ -19,13 +19,11 @@
.toc ol {
border-top: 1px solid var(--clr-title-border);
- list-style-position: inside;
- padding: 0.8em 0 0 0;
+ padding: 0.8em 0 0 1em;
line-height: 1.8;
}
.toc ol ul {
- list-style-position: inside;
list-style-type: disc;
line-height: 1.5;
padding-left: 1em;
@@ -63,6 +61,7 @@
}
.sidebar__toc ol ul {
+ padding-top: 0.5em;
padding-left: 1.25rem;
list-style-type: disc;
}
\ No newline at end of file
diff --git a/js/toc.js b/js/toc.js
index 5ed0bed1..6cb152e6 100644
--- a/js/toc.js
+++ b/js/toc.js
@@ -1,7 +1,12 @@
+// Auto generate table of contents
+// Code based on https://techindetail.com/table-of-contents-javascript/
+
window.addEventListener('DOMContentLoaded', (event) => {
const article = document.querySelector("article");
const headings = article.querySelectorAll("h2, h3");
const toc = document.querySelector(".toc");
+ const tocSidebar = document.querySelector(".sidebar__toc");
+ const leftSidebar = document.querySelector('.left-sidebar');
const totalHeadings = headings.length;
let tocOl = document.createElement("ol");
let tocFragment = new DocumentFragment();
@@ -43,12 +48,16 @@ window.addEventListener('DOMContentLoaded', (event) => {
}
tocOl.append(tocFragment);
toc.append(tocOl);
+ const tocClone = tocOl.cloneNode(true);
+ tocSidebar.appendChild(tocClone);
} else {
toc.classList.add('hidden');
+ leftSidebar.classList.add('hidden');
}
+ // Open the article ToC and hide the left sidebar for small screen size
+ // Code based on https://codepen.io/neptotech/pen/RwjRjOZ
const windowWidth = window.innerWidth;
- const leftSidebar = document.querySelector('.left-sidebar');
if (windowWidth < 480) {
toc.removeAttribute('open');
leftSidebar.classList.add('hidden');
@@ -56,4 +65,16 @@ window.addEventListener('DOMContentLoaded', (event) => {
toc.setAttribute('open', true);
leftSidebar.classList.remove('hidden');
}
+
+ // Don't make the sidebar ToC sticky if it is larger than screen height
+ function preventSidebarOverflow() {
+ if (
+ document.documentElement.clientHeight <
+ tocSidebar.offsetHeight + 50
+ ) {
+ tocSidebar.style.marginTop = "50px";
+ tocSidebar.style.position = "static";
+ }
+ }
+ preventSidebarOverflow();
});
\ No newline at end of file
diff --git a/playlists/index.html b/playlists/index.html
index 49c9caf9..a230274f 100644
--- a/playlists/index.html
+++ b/playlists/index.html
@@ -37,10 +37,6 @@
@@ -57,7 +53,7 @@
- My Dear Summer Lover
+ My Dear Summer Lover
@@ -75,7 +71,7 @@
- Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌
+ Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌
diff --git a/shrines/starwarskotor/articles/faq-same-gender-romance-mods.html b/shrines/starwarskotor/articles/faq-same-gender-romance-mods.html
index 076c82a8..2984c9d1 100644
--- a/shrines/starwarskotor/articles/faq-same-gender-romance-mods.html
+++ b/shrines/starwarskotor/articles/faq-same-gender-romance-mods.html
@@ -37,16 +37,6 @@
diff --git a/shrines/starwarskotor/guides/kotor-juhani-romance-guide.html b/shrines/starwarskotor/guides/kotor-juhani-romance-guide.html
index f9a14503..0a1722e9 100644
--- a/shrines/starwarskotor/guides/kotor-juhani-romance-guide.html
+++ b/shrines/starwarskotor/guides/kotor-juhani-romance-guide.html
@@ -37,16 +37,6 @@
diff --git a/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide.html b/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide.html
index ea3e9a53..ca00dd27 100644
--- a/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide.html
+++ b/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide.html
@@ -37,11 +37,6 @@
diff --git a/shrines/starwarskotor/resources/kotor-same-gender-romance-mods.html b/shrines/starwarskotor/resources/kotor-same-gender-romance-mods.html
index 93f58c18..0d25f694 100644
--- a/shrines/starwarskotor/resources/kotor-same-gender-romance-mods.html
+++ b/shrines/starwarskotor/resources/kotor-same-gender-romance-mods.html
@@ -37,10 +37,6 @@