From 8e1c938dbec405151ac7e42892ac74bb727b0569 Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Tue, 27 Jun 2023 22:57:47 +0800 Subject: [PATCH] Removed usage of custom HTML elements --- about/index.html | 5 +- articles/index.html | 5 +- changelog/2022.html | 5 +- changelog/index.html | 5 +- changelog/layouts.html | 5 +- .../updates/2023-june-layout-rewrite.html | 7 +- changelog/updates/2023-redesign.html | 5 +- components/footer.js | 22 ++--- components/header.js | 85 +++++++++---------- featured/index.html | 5 +- .../kotor2-modder-interview-ars-technica.html | 5 +- .../lgbtq-booklet-interview-misi-bawang.html | 5 +- home.html | 5 +- links/index.html | 5 +- main.css | 19 +++-- mycreations/index.html | 5 +- mymods/index.html | 5 +- mymods/kotor1mods/index.html | 5 +- mymods/kotor2mods/index.html | 5 +- playlists/index.html | 5 +- ...ti-harry-potter-jk-rowling-masterlist.html | 5 +- resources/index.html | 5 +- shrines/asummersend/components/footer.js | 19 +---- shrines/asummersend/components/header.js | 45 ++++------ .../asummersend/components/sidebar-content.js | 35 +++----- shrines/asummersend/gallery.html | 9 +- shrines/asummersend/index.html | 9 +- shrines/asummersend/playlists.html | 9 +- shrines/asummersend/trivia.html | 9 +- shrines/index.html | 9 +- .../articles/arren-kae-kreia-theory.html | 9 +- .../faq-same-gender-romance-mods.html | 14 ++- .../articles/handmaiden-sisters-mother.html | 10 +-- shrines/starwarskotor/articles/index.html | 10 +-- .../juhani-hostility-towards-canderous.html | 10 +-- .../articles/juhani-lesbian-evidence.html | 10 +-- shrines/starwarskotor/components/footer.js | 19 +---- shrines/starwarskotor/components/header.js | 43 ++++------ .../components/sidebar-content.js | 21 ++--- shrines/starwarskotor/guides/index.html | 10 +-- .../guides/kotor-juhani-romance-guide.html | 9 +- .../guides/kotor-redeeming-bastila-guide.html | 10 +-- .../kotor-sandral-matale-feud-guide.html | 10 +-- shrines/starwarskotor/index.html | 9 +- shrines/starwarskotor/resources/index.html | 10 +-- .../kotor-same-gender-romance-mods.html | 10 +-- ...-female-exile-recruit-handmaiden-mods.html | 10 +-- .../tslrcm-m478ep-modules-music.html | 10 +-- sitemap.html | 5 +- 49 files changed, 265 insertions(+), 341 deletions(-) diff --git a/about/index.html b/about/index.html index 5fab77b5..1abdab86 100644 --- a/about/index.html +++ b/about/index.html @@ -26,7 +26,8 @@ About | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/articles/index.html b/articles/index.html index 312c4f7a..e0264cd0 100644 --- a/articles/index.html +++ b/articles/index.html @@ -26,7 +26,8 @@ Articles | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/changelog/2022.html b/changelog/2022.html index d94c5cf2..c02d1a81 100644 --- a/changelog/2022.html +++ b/changelog/2022.html @@ -26,7 +26,8 @@ Website Changelog Archive: 2022 | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/changelog/index.html b/changelog/index.html index 5f103116..fc7a5f6a 100644 --- a/changelog/index.html +++ b/changelog/index.html @@ -26,7 +26,8 @@ Website Changelog | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/changelog/layouts.html b/changelog/layouts.html index 4738361c..3add7f43 100644 --- a/changelog/layouts.html +++ b/changelog/layouts.html @@ -26,7 +26,8 @@ Website Layout Archive | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/changelog/updates/2023-june-layout-rewrite.html b/changelog/updates/2023-june-layout-rewrite.html index fcf9a965..40061182 100644 --- a/changelog/updates/2023-june-layout-rewrite.html +++ b/changelog/updates/2023-june-layout-rewrite.html @@ -26,7 +26,8 @@ June 2023 Layout Rewrite | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/changelog/updates/2023-redesign.html b/changelog/updates/2023-redesign.html index a113ab0f..e74f7fed 100644 --- a/changelog/updates/2023-redesign.html +++ b/changelog/updates/2023-redesign.html @@ -26,7 +26,8 @@ Website Layout Archive | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/components/footer.js b/components/footer.js index bc4d41b2..95cb3cdc 100644 --- a/components/footer.js +++ b/components/footer.js @@ -1,17 +1,5 @@ -class Footer extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - this.innerHTML = ` - - `; - } -} - -customElements.define('footer-component', Footer); \ No newline at end of file +// Footer component content +document.querySelector("footer").innerHTML = ` +

Made with ♥ by Leilukin | Site Launched: September 11, 2022

+

Website Changelog | Back to top

+`; \ No newline at end of file diff --git a/components/header.js b/components/header.js index d2927c85..2ae24c50 100644 --- a/components/header.js +++ b/components/header.js @@ -1,47 +1,38 @@ -class Header extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - this.innerHTML = ` -
- -
- - `; - } -} - -customElements.define('header-component', Header); \ No newline at end of file +// Header component content +document.querySelector("header").innerHTML = ` + +`; + +// Navigation component content +document.querySelector("nav").innerHTML = ` + +`; \ No newline at end of file diff --git a/featured/index.html b/featured/index.html index 8be9a5db..dc56d396 100644 --- a/featured/index.html +++ b/featured/index.html @@ -26,7 +26,8 @@ Featured | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/featured/kotor2-modder-interview-ars-technica.html b/featured/kotor2-modder-interview-ars-technica.html index 8132c4b5..556c4aa4 100644 --- a/featured/kotor2-modder-interview-ars-technica.html +++ b/featured/kotor2-modder-interview-ars-technica.html @@ -26,7 +26,8 @@ KotOR 2 Modders Interview on Ars Technica | Featured | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/featured/lgbtq-booklet-interview-misi-bawang.html b/featured/lgbtq-booklet-interview-misi-bawang.html index 7a8e7a63..4b5c559e 100644 --- a/featured/lgbtq-booklet-interview-misi-bawang.html +++ b/featured/lgbtq-booklet-interview-misi-bawang.html @@ -27,7 +27,8 @@ LGBTQ+ Booklet Artist Interview from MISI:Bawang | Featured | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/home.html b/home.html index 70fe539f..c027ec9c 100644 --- a/home.html +++ b/home.html @@ -26,7 +26,8 @@ Home | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/links/index.html b/links/index.html index da5cc42f..a0b033f9 100644 --- a/links/index.html +++ b/links/index.html @@ -26,7 +26,8 @@ Links | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/main.css b/main.css index 7f886231..0aae6f4d 100644 --- a/main.css +++ b/main.css @@ -214,7 +214,7 @@ summary { /* HEADER COMPONENT */ header { - width: 100vw; + width: 100%; max-height: 20rem; background-color: var(--header-bg-color); display: flex; @@ -230,7 +230,7 @@ header img { /* NAVIGATION BAR COMPONENT */ nav { background: var(--nav-bg); - padding: 0 0.9rem; + padding: 0 0.6rem; width: 100%; z-index: 999; } @@ -249,12 +249,12 @@ nav a { } .nav__title { - font-size: 20px; + font-size: 1.2rem; padding: 0.2rem 0; } .nav__item { - padding: 0.6rem; + padding: 0.5rem; } .nav__item a:hover, @@ -275,7 +275,7 @@ nav a { padding: 0.9rem 0.8rem; } -.nav__menu li.nav__subitem a { +.nav__menu li .nav__subitem a { padding: 0.9rem; } @@ -381,7 +381,7 @@ as the navigation bar gets a new position at the top of the page display: block; position: absolute; left: 0; - top: 68px; + top: 4.25rem; background: var(--nav-submenu-active); } @@ -429,6 +429,11 @@ article, .content-container { order: 1; } +.sidebar--sticky { + position: sticky; + top: 5rem; +} + .left-sidebar { order: 2; } @@ -592,7 +597,7 @@ article, .content-container { /* FOOTER COMPONENT */ footer { background-color: var(--footer-bg); - width: 100vw; + width: 100%; padding: 0.5rem; text-align: center; } diff --git a/mycreations/index.html b/mycreations/index.html index e7570655..e218eac5 100644 --- a/mycreations/index.html +++ b/mycreations/index.html @@ -26,7 +26,8 @@ My Creations | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/mymods/index.html b/mymods/index.html index 239b3e2f..d39f7f9a 100644 --- a/mymods/index.html +++ b/mymods/index.html @@ -26,7 +26,8 @@ My Video Game Mods | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/mymods/kotor1mods/index.html b/mymods/kotor1mods/index.html index ce6e13f4..44dd649e 100644 --- a/mymods/kotor1mods/index.html +++ b/mymods/kotor1mods/index.html @@ -28,7 +28,8 @@ My KotOR 1 Mods | Leilukin's Hub - +
+
- + My KotOR 2 Mods | Leilukin's Hub - +
+
- + Playlists | Leilukin's Hub - +
+
-->
- + \ No newline at end of file diff --git a/resources/anti-harry-potter-jk-rowling-masterlist.html b/resources/anti-harry-potter-jk-rowling-masterlist.html index bf787070..b21118e6 100644 --- a/resources/anti-harry-potter-jk-rowling-masterlist.html +++ b/resources/anti-harry-potter-jk-rowling-masterlist.html @@ -26,7 +26,8 @@ Anti-Harry Potter and Anti-J. K. Rowling Masterlist | Resources | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/resources/index.html b/resources/index.html index 8c7f81e9..d618f662 100644 --- a/resources/index.html +++ b/resources/index.html @@ -26,7 +26,8 @@ Resources | Leilukin's Hub - +
+
- + \ No newline at end of file diff --git a/shrines/asummersend/components/footer.js b/shrines/asummersend/components/footer.js index fdcadca2..a472b170 100644 --- a/shrines/asummersend/components/footer.js +++ b/shrines/asummersend/components/footer.js @@ -1,15 +1,4 @@ -class Footer extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - this.innerHTML = ` - - `; - } -} - -customElements.define('footer-component', Footer); \ No newline at end of file +// Footer component content +document.querySelector("footer").innerHTML = ` +

Made with ♥ by Leilukin | Back to top

+`; \ No newline at end of file diff --git a/shrines/asummersend/components/header.js b/shrines/asummersend/components/header.js index 8283b569..aaaf98a6 100644 --- a/shrines/asummersend/components/header.js +++ b/shrines/asummersend/components/header.js @@ -1,27 +1,18 @@ -class Header extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - this.innerHTML = ` -
- -
- - `; - } -} - -customElements.define('header-component', Header); \ No newline at end of file +// Header component content +document.querySelector("header").innerHTML = ` + +`; + +// Navigation component content +document.querySelector("nav").innerHTML = ` + +`; \ No newline at end of file diff --git a/shrines/asummersend/components/sidebar-content.js b/shrines/asummersend/components/sidebar-content.js index 23bda789..2ff4c8e7 100644 --- a/shrines/asummersend/components/sidebar-content.js +++ b/shrines/asummersend/components/sidebar-content.js @@ -1,21 +1,14 @@ -class RightSidebarContent extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - this.innerHTML = ` -

About

-

A Summer’s End — Hong Kong 1986 is a visual novel set in 1980s Hong Kong. It tells of a love story between two women. Lush and vibrant visuals, the game features over 400 unique hand-drawn artwork inspired by Asian cinema and 1980s anime.

-

Links

- - `; - } -} - -customElements.define('right-sidebar-component', RightSidebarContent); \ No newline at end of file +// Sidebar content +document.querySelector(".right-sidebar").innerHTML = ` +
+

About

+

A Summer’s End — Hong Kong 1986 is a visual novel set in 1980s Hong Kong. It tells of a love story between two women. Lush and vibrant visuals, the game features over 400 unique hand-drawn artwork inspired by Asian cinema and 1980s anime.

+

Links

+ +
+`; \ No newline at end of file diff --git a/shrines/asummersend/gallery.html b/shrines/asummersend/gallery.html index fc820ad0..66d1c41c 100644 --- a/shrines/asummersend/gallery.html +++ b/shrines/asummersend/gallery.html @@ -27,7 +27,8 @@ Gallery | A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub - +
+
- + \ No newline at end of file