diff --git a/changelog/index.html b/changelog/index.html index 64c3be3e..86bc3a07 100644 --- a/changelog/index.html +++ b/changelog/index.html @@ -46,6 +46,7 @@

August 13, 2023:

August 10, 2023:

diff --git a/css/style-main.css b/css/style-main.css index bc9e7af4..0efa4887 100644 --- a/css/style-main.css +++ b/css/style-main.css @@ -163,6 +163,10 @@ p { padding: 0.5rem 0;; } +hr { + border: 0.05rem solid var(--clr-title-border); +} + strong { color: var(--clr-bold-txt); } @@ -214,6 +218,10 @@ summary { color: var(--clr-dates); } +.hidden { + display: none; +} + /* HEADER COMPONENT */ .main-header { width: 100%; @@ -231,14 +239,14 @@ summary { } /* NAVIGATION BAR COMPONENT */ -nav { +.navbar { background: var(--clr-navbar-bg); padding: 0 0.6rem; width: 100%; z-index: 999; } -nav a { +.navbar a { color: var(--clr-navbar-link); text-decoration: none; cursor: pointer; @@ -478,32 +486,6 @@ article, .content-container { gap: 0.5rem; } -/* TABLE OF CONTENTS */ -.sidebar__toc { - position: sticky; - top: 5rem; -} - -.sidebar__toc-title { - font-size: 1.3rem; - font-weight: bold; -} - -.sidebar__toc-list { - list-style: none; - margin-left: 0; - padding-left: 0; - font-size: 1rem; -} - -.sidebar__toc-list li { - margin-bottom: 0.5em; -} - -.sidebar__toc-list ul { - padding-left: 1.25rem; -} - /* REFERENCES LIST */ .references-list { font-size: 0.96em; diff --git a/css/style-toc.css b/css/style-toc.css new file mode 100644 index 00000000..9cb58f0e --- /dev/null +++ b/css/style-toc.css @@ -0,0 +1,68 @@ +.toc { + background-color: var(--clr-quote-bg); + width: max-content; + max-width: 95%; + padding: 1rem 1.3rem 0.3rem 1.3rem; + margin-top: 1rem; + outline: 1px solid var(--clr-title-border); + position: relative; + border-radius: 0.4rem; +} + +.toc-heading { + font-size: 1.1rem; + font-weight: 700; + margin-bottom: 0.5rem; + margin-right: 2rem; + cursor: pointer; +} + +.toc ol { + border-top: 1px solid var(--clr-title-border); + list-style-position: inside; + padding: 0.8em 0 0 0; + line-height: 1.8; +} + +.toc ol ul { + list-style-position: inside; + list-style-type: disc; + line-height: 1.5; + padding-left: 1em; +} + +.toc a { + font-size: 1.1rem; + padding-left: 0.4rem; +} + +.toc ul a { + padding: 0; + font-size: 1rem; +} + +.sidebar__toc { + position: sticky; + top: 5rem; +} + +.sidebar__toc-title { + font-size: 1.3rem; + font-weight: bold; +} + +.sidebar__toc ol { + list-style: none; + margin-left: 0; + padding-left: 0; + font-size: 1rem; +} + +.sidebar__toc ol li { + margin-bottom: 0.5em; +} + +.sidebar__toc ol ul { + padding-left: 1.25rem; + list-style-type: disc; +} \ No newline at end of file diff --git a/home.html b/home.html index c6be908b..d4826795 100644 --- a/home.html +++ b/home.html @@ -71,6 +71,7 @@

August 13, 2023:

View all site changelog diff --git a/js/toc.js b/js/toc.js new file mode 100644 index 00000000..02c27200 --- /dev/null +++ b/js/toc.js @@ -0,0 +1,60 @@ +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 totalHeadings = headings.length; + let tocOl = document.createElement("ol"); + let tocFragment = new DocumentFragment(); + let mainLi = null; + let subUl = null; + let subLi = null; + let isSibling = false; + + if (totalHeadings > 1) { + for (let element of headings) { + let anchor = document.createElement("a"); + let anchorText = element.innerText; + anchor.innerText = anchorText; + let elementId = anchorText.replaceAll(" ", "-").toLowerCase(); + anchor.href = "#" + elementId; + element.id = elementId; + let level = element.nodeName; + + if ("H3" === level) { + if (mainLi) { + subLi = document.createElement("li"); + subLi.appendChild(anchor); + + if (isSibling === false) { + subUl = document.createElement("ul"); + } + subUl.appendChild(subLi); + mainLi.appendChild(subUl); + + isSibling = true; + } + } else { + mainLi = document.createElement("li"); + mainLi.appendChild(anchor); + tocFragment.appendChild(mainLi); + isSibling = false; + subUl = null; + } + } + tocOl.append(tocFragment); + toc.append(tocOl); + } else { + toc.classList.add('hidden'); + } + + const windowWidth = window.innerWidth; + const leftSidebar = document.querySelector('.left-sidebar'); + if (windowWidth < 480) { + toc.removeAttribute('open'); + leftSidebar.classList.add('hidden'); + } else { + toc.setAttribute('open', true); + leftSidebar.classList.remove('hidden'); + } +}); \ No newline at end of file diff --git a/playlists/index.html b/playlists/index.html index 752304cf..49c9caf9 100644 --- a/playlists/index.html +++ b/playlists/index.html @@ -12,6 +12,7 @@ + @@ -20,6 +21,7 @@ + Playlists | Leilukin's Hub @@ -33,38 +35,58 @@
-
-

Leilukin's Music Playlists

+
+
+

Leilukin's Music Playlists

+

Here is a list of mysic playlists I have compiled.

+ +
+ + Table Of Contents + +
+
+ +

My Dear Summer Lover

- A playlist cover image made of Sam and Michelle from A Summer's End being close to kissing, with the title 'My Dear Summer Lover: A Sam x Michelle Fanmix' -

A fanmix for the visual novel A Summer’s End — Hong Kong 1986, dedicated to Sam and Michelle’s love story.

-

This mix contains mostly Cantonese and English songs, with one Mandarin song. Majority of these songs were performed by Hong Kong artists and released in the 80s, because A Summer’s End took place in Hong Kong and in the 80s.

+ + A playlist cover image made of Sam and Michelle from A Summer's End being close to kissing, with the title 'My Dear Summer Lover: A Sam x Michelle Fanmix' -

I have carefully selected and arranged these tracks, so the lyrics would reflect Sam and Michelle’s relationship development throughout A Summer’s End. Therefore, the content of this mix could be considered spoilers if you have not played the visual novel.

+

A fanmix for the visual novel A Summer’s End — Hong Kong 1986, dedicated to Sam and Michelle’s love story.

-

Since Oracle and Bone has cited Anita Mui as a major inspiration for them and this visual novel, I have also included multiple songs performed by Anita Mui in this mix. Because A Summer’s End is a lesbian story, when I was choosing which songs to include in this mix, I also prioritize songs that were performed by women artists.

+

This mix contains mostly Cantonese and English songs, with one Mandarin song. Majority of these songs were performed by Hong Kong artists and released in the 80s, because A Summer’s End took place in Hong Kong and in the 80s.

- Listen on Spotify

- +

I have carefully selected and arranged these tracks, so the lyrics would reflect Sam and Michelle’s relationship development throughout A Summer’s End. Therefore, the content of this mix could be considered spoilers if you have not played the visual novel.

-
+

Since Oracle and Bone has cited Anita Mui as a major inspiration for them and this visual novel, I have also included multiple songs performed by Anita Mui in this mix. Because A Summer’s End is a lesbian story, when I was choosing which songs to include in this mix, I also prioritize songs that were performed by women artists.

+ Listen on Spotify

+ + +
+ +

Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌

- A playlist cover image made of the progress pride flag, with Chinese words meaning queer anthem on top -

Collection of Mandarin queer anthems.

-

I made this playlist after discovering Wikipedia's list of Chinese queer anthems on its Mandarin article for Gay Anthem (同志國歌).

- Listen on Spotify

- + A playlist cover image made of the progress pride flag, with Chinese words meaning queer anthem on top + +

Collection of Mandarin queer anthems.

+ +

I made this playlist after discovering Wikipedia's list of Chinese queer anthems on its Mandarin article for Gay Anthem (同志國歌).

+ + Listen on Spotify

+ + +