Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Removed usage of custom HTML elements

This commit is contained in:
Helen Chong 2023-06-27 22:57:47 +08:00
parent 9ab729b2d5
commit 8e1c938dbe
49 changed files with 265 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
about/index.html
View File

@ -26,7 +26,8 @@
<title>About | Leilukin's Hub</title> <title>About | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -82,6 +83,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
articles/index.html
View File

@ -26,7 +26,8 @@
<title>Articles | Leilukin's Hub</title> <title>Articles | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -43,6 +44,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
changelog/2022.html
View File

@ -26,7 +26,8 @@
<title>Website Changelog Archive: 2022 | Leilukin's Hub</title> <title>Website Changelog Archive: 2022 | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -192,6 +193,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
changelog/index.html
View File

@ -26,7 +26,8 @@
<title>Website Changelog | Leilukin's Hub</title> <title>Website Changelog | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -194,6 +195,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
changelog/layouts.html
View File

@ -26,7 +26,8 @@
<title>Website Layout Archive | Leilukin's Hub</title> <title>Website Layout Archive | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -54,6 +55,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

7
changelog/updates/2023-june-layout-rewrite.html
View File

@ -26,7 +26,8 @@
<title>June 2023 Layout Rewrite | Leilukin's Hub</title> <title>June 2023 Layout Rewrite | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -50,7 +51,7 @@
<li>Use a mobile-first workflow to rewrite the CSS of this website to make the website more responsive to various screen sizes (mobile, tablet and desktop). </li> <li>Use a mobile-first workflow to rewrite the CSS of this website to make the website more responsive to various screen sizes (mobile, tablet and desktop). </li>
<li>Streamline the CSS of the main parts of the site into one CSS file. The only pages that also have their own CSS due to unique elements with custom classes exclusive to the pages are <a href="/mymods/">my mod pages</a>. The shrines still have their own CSS files, however.</li> <li>Streamline the CSS of the main parts of the site into one CSS file. The only pages that also have their own CSS due to unique elements with custom classes exclusive to the pages are <a href="/mymods/">my mod pages</a>. The shrines still have their own CSS files, however.</li>
<li>Use <a href="https://andy-bell.co.uk/a-modern-css-reset/" target="_blank">Andy Bell's modern CSS reset</a> for the CSS of the entire website.</li> <li>Use <a href="https://andy-bell.co.uk/a-modern-css-reset/" target="_blank">Andy Bell's modern CSS reset</a> for the CSS of the entire website.</li>
<li>Use <a href="https://www.freecodecamp.org/news/reusable-html-components-how-to-reuse-a-header-and-footer-on-a-website/" target="_blank">custom HTML elements</a> for components that are shared across multiple pages, including the header, navigation bar and footer</li> <li>The header, navigation bar and footer have their own scripts to dynamically render the content of these elements with JavaScript's <a href="https://www.javascripttutorial.net/javascript-dom/javascript-innerhtml/" target="_blank"><code class="inline-code">innerHTML</code></a> property.</li>
<li>Add a "Back to top" link to the footer to quickly scroll back to the top of the page you are viewing</li> <li>Add a "Back to top" link to the footer to quickly scroll back to the top of the page you are viewing</li>
</ul> </ul>
@ -61,6 +62,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
changelog/updates/2023-redesign.html
View File

@ -26,7 +26,8 @@
<title>Website Layout Archive | Leilukin's Hub</title> <title>Website Layout Archive | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -67,6 +68,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

18
components/footer.js
View File

@ -1,17 +1,5 @@
class Footer extends HTMLElement { // Footer component content
constructor() { document.querySelector("footer").innerHTML = `
super(); <p>Made with ♥ by Leilukin | Site Launched: September 11, 2022</p>
}
connectedCallback() {
this.innerHTML = `
<footer>
<p>Made with ♥ by Leilukin</p>
<p>Site Launched: September 11, 2022</p>
<p><a href="/changelog">Website Changelog</a> | <a href="#page-top">Back to top</a></p> <p><a href="/changelog">Website Changelog</a> | <a href="#page-top">Back to top</a></p>
</footer>
`; `;
}
}
customElements.define('footer-component', Footer);

21
components/header.js
View File

@ -1,14 +1,10 @@
class Header extends HTMLElement { // Header component content
constructor() { document.querySelector("header").innerHTML = `
super();
}
connectedCallback() {
this.innerHTML = `
<header>
<img src="/assets/Leilukins-Hub-website-banner.png" alt=""> <img src="/assets/Leilukins-Hub-website-banner.png" alt="">
</header> `;
<nav>
// Navigation component content
document.querySelector("nav").innerHTML = `
<ul class="nav__menu"> <ul class="nav__menu">
<li class="nav__title"><a href="/">Leilukin's Hub</a></li> <li class="nav__title"><a href="/">Leilukin's Hub</a></li>
<li class="nav__item"><a href="/home.html">Home</a></li> <li class="nav__item"><a href="/home.html">Home</a></li>
@ -39,9 +35,4 @@ class Header extends HTMLElement {
<li class="nav__item"><a href="/sitemap.html">Site Map</a></li> <li class="nav__item"><a href="/sitemap.html">Site Map</a></li>
<li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li> <li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
</ul> </ul>
</nav>
`; `;
}
}
customElements.define('header-component', Header);

5
featured/index.html
View File

@ -26,7 +26,8 @@
<title>Featured | Leilukin's Hub</title> <title>Featured | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -48,6 +49,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
featured/kotor2-modder-interview-ars-technica.html
View File

@ -26,7 +26,8 @@
<title>KotOR 2 Modders Interview on Ars Technica | Featured | Leilukin's Hub</title> <title>KotOR 2 Modders Interview on Ars Technica | Featured | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -59,6 +60,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
featured/lgbtq-booklet-interview-misi-bawang.html
View File

@ -27,7 +27,8 @@
<title>LGBTQ+ Booklet Artist Interview from MISI:Bawang | Featured | Leilukin's Hub</title> <title>LGBTQ+ Booklet Artist Interview from MISI:Bawang | Featured | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -78,6 +79,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
home.html
View File

@ -26,7 +26,8 @@
<title>Home | Leilukin's Hub</title> <title>Home | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -87,6 +88,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
links/index.html
View File

@ -26,7 +26,8 @@
<title>Links | Leilukin's Hub</title> <title>Links | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -56,6 +57,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

17
main.css
View File

@ -214,7 +214,7 @@ summary {
/* HEADER COMPONENT */ /* HEADER COMPONENT */
header { header {
width: 100vw; width: 100%;
max-height: 20rem; max-height: 20rem;
background-color: var(--header-bg-color); background-color: var(--header-bg-color);
display: flex; display: flex;
@ -230,7 +230,7 @@ header img {
/* NAVIGATION BAR COMPONENT */ /* NAVIGATION BAR COMPONENT */
nav { nav {
background: var(--nav-bg); background: var(--nav-bg);
padding: 0 0.9rem; padding: 0 0.6rem;
width: 100%; width: 100%;
z-index: 999; z-index: 999;
} }
@ -249,12 +249,12 @@ nav a {
} }
.nav__title { .nav__title {
font-size: 20px; font-size: 1.2rem;
padding: 0.2rem 0; padding: 0.2rem 0;
} }
.nav__item { .nav__item {
padding: 0.6rem; padding: 0.5rem;
} }
.nav__item a:hover, .nav__item a:hover,
@ -381,7 +381,7 @@ as the navigation bar gets a new position at the top of the page
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
top: 68px; top: 4.25rem;
background: var(--nav-submenu-active); background: var(--nav-submenu-active);
} }
@ -429,6 +429,11 @@ article, .content-container {
order: 1; order: 1;
} }
.sidebar--sticky {
position: sticky;
top: 5rem;
}
.left-sidebar { .left-sidebar {
order: 2; order: 2;
} }
@ -592,7 +597,7 @@ article, .content-container {
/* FOOTER COMPONENT */ /* FOOTER COMPONENT */
footer { footer {
background-color: var(--footer-bg); background-color: var(--footer-bg);
width: 100vw; width: 100%;
padding: 0.5rem; padding: 0.5rem;
text-align: center; text-align: center;
} }

5
mycreations/index.html
View File

@ -26,7 +26,8 @@
<title>My Creations | Leilukin's Hub</title> <title>My Creations | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -46,6 +47,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
mymods/index.html
View File

@ -26,7 +26,8 @@
<title>My Video Game Mods | Leilukin's Hub</title> <title>My Video Game Mods | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -53,6 +54,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
mymods/kotor1mods/index.html
View File

@ -28,7 +28,8 @@
<title>My KotOR 1 Mods | Leilukin's Hub</title> <title>My KotOR 1 Mods | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -197,6 +198,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</h </h

5
mymods/kotor2mods/index.html
View File

@ -28,7 +28,8 @@
<title>My KotOR 2 Mods | Leilukin's Hub</title> <title>My KotOR 2 Mods | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -241,6 +242,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</h </h

5
playlists/index.html
View File

@ -26,7 +26,8 @@
<title>Playlists | Leilukin's Hub</title> <title>Playlists | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<aside class="left-sidebar"> <aside class="left-sidebar">
<div class="sidebar__toc"> <div class="sidebar__toc">
@ -67,6 +68,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
resources/anti-harry-potter-jk-rowling-masterlist.html
View File

@ -26,7 +26,8 @@
<title>Anti-Harry Potter and Anti-J. K. Rowling Masterlist | Resources | Leilukin's Hub</title> <title>Anti-Harry Potter and Anti-J. K. Rowling Masterlist | Resources | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -81,6 +82,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
resources/index.html
View File

@ -26,7 +26,8 @@
<title>Resources | Leilukin's Hub</title> <title>Resources | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -61,6 +62,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

17
shrines/asummersend/components/footer.js
View File

@ -1,15 +1,4 @@
class Footer extends HTMLElement { // Footer component content
constructor() { document.querySelector("footer").innerHTML = `
super(); <p>Made with ♥ by Leilukin | <a href="#page-top">Back to top</a></p>
}
connectedCallback() {
this.innerHTML = `
<footer>
Made with ♥ by Leilukin | <a href="#page-top">Back to top</a>
</footer>
`; `;
}
}
customElements.define('footer-component', Footer);

21
shrines/asummersend/components/header.js
View File

@ -1,14 +1,10 @@
class Header extends HTMLElement { // Header component content
constructor() { document.querySelector("header").innerHTML = `
super();
}
connectedCallback() {
this.innerHTML = `
<header>
<img src="./img/asummersend_header.png" alt=""> <img src="./img/asummersend_header.png" alt="">
</header> `;
<nav>
// Navigation component content
document.querySelector("nav").innerHTML = `
<ul class="nav__menu"> <ul class="nav__menu">
<li class="nav__title"><a href="/shrines/asummersend/">A Summer's End</a></li> <li class="nav__title"><a href="/shrines/asummersend/">A Summer's End</a></li>
<li class="nav__item"><a href="/shrines/asummersend/">Shrine Home</a></li> <li class="nav__item"><a href="/shrines/asummersend/">Shrine Home</a></li>
@ -19,9 +15,4 @@ class Header extends HTMLElement {
<li class="nav__item"><a href="/home.html">Main Site</a></li> <li class="nav__item"><a href="/home.html">Main Site</a></li>
<li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li> <li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
</ul> </ul>
</nav>
`; `;
}
}
customElements.define('header-component', Header);

15
shrines/asummersend/components/sidebar-content.js
View File

@ -1,10 +1,6 @@
class RightSidebarContent extends HTMLElement { // Sidebar content
constructor() { document.querySelector(".right-sidebar").innerHTML = `
super(); <div class="sidebar--sticky">
}
connectedCallback() {
this.innerHTML = `
<h2>About</h2> <h2>About</h2>
<p><em>A Summer’s End — Hong Kong 1986</em> 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.</p> <p><em>A Summer’s End — Hong Kong 1986</em> 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.</p>
<h3>Links</h3> <h3>Links</h3>
@ -14,8 +10,5 @@ class RightSidebarContent extends HTMLElement {
<li><a href="https://store.steampowered.com/app/1111370/A_Summers_End__Hong_Kong_1986/" target="_blank">Steam</a></li> <li><a href="https://store.steampowered.com/app/1111370/A_Summers_End__Hong_Kong_1986/" target="_blank">Steam</a></li>
<li><a href="https://oracleandbone.itch.io/a-summers-end" target="_blank">itch.io</a></li> <li><a href="https://oracleandbone.itch.io/a-summers-end" target="_blank">itch.io</a></li>
</ul> </ul>
</div>
`; `;
}
}
customElements.define('right-sidebar-component', RightSidebarContent);

9
shrines/asummersend/gallery.html
View File

@ -27,7 +27,8 @@
<title>Gallery | A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title> <title>Gallery | A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -54,11 +55,9 @@
</section> </section>
</div> </div>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

9
shrines/asummersend/index.html
View File

@ -27,7 +27,8 @@
<title>A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title> <title>A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -67,11 +68,9 @@
</section> </section>
</div> </div>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

9
shrines/asummersend/playlists.html
View File

@ -27,7 +27,8 @@
<title>Playlists | A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title> <title>Playlists | A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<aside class="left-sidebar"> <aside class="left-sidebar">
<div class="sidebar__toc"> <div class="sidebar__toc">
@ -85,11 +86,9 @@
</section> </section>
</div> </div>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

9
shrines/asummersend/trivia.html
View File

@ -27,7 +27,8 @@
<title>Trivia | A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title> <title>Trivia | A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -84,11 +85,9 @@
</section> </section>
</div> </div>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

7
shrines/index.html
View File

@ -26,7 +26,8 @@
<title>Shrines | Leilukin's Hub</title> <title>Shrines | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -36,10 +37,14 @@
<section class="content-section"> <section class="content-section">
<h1>Shrines</h1> <h1>Shrines</h1>
<p>Internet shrines are website pages dedicated to specific topics or interests. Here is a list of shrines I have made for my own website.</p> <p>Internet shrines are website pages dedicated to specific topics or interests. Here is a list of shrines I have made for my own website.</p>
</section>
<section class="content-section">
<h2><a href="./asummersend/" target="_blank"><em>A Summer’s End — Hong Kong 1986</em></a></h2> <h2><a href="./asummersend/" target="_blank"><em>A Summer’s End — Hong Kong 1986</em></a></h2>
<a href="./asummersend/" target="_blank"><img src="./asummersend/img/asummersend_header.png" alt="Header of A Summer’s End — Hong Kong 1986" width="100%"></a> <a href="./asummersend/" target="_blank"><img src="./asummersend/img/asummersend_header.png" alt="Header of A Summer’s End — Hong Kong 1986" width="100%"></a>
</section>
<section class="content-section">
<h2><a href="./starwarskotor/" target="_blank"><em>Star Wars: Knights of the Old Republic</em></a></h2> <h2><a href="./starwarskotor/" target="_blank"><em>Star Wars: Knights of the Old Republic</em></a></h2>
<a href="./starwarskotor/" target="_blank"><img src="./starwarskotor/img/swkotor-header.jpg" alt="Header of the Star Wars: Knights of the Old Republic series" width="100%"></a> <a href="./starwarskotor/" target="_blank"><img src="./starwarskotor/img/swkotor-header.jpg" alt="Header of the Star Wars: Knights of the Old Republic series" width="100%"></a>
</section> </section>

9
shrines/starwarskotor/articles/arren-kae-kreia-theory.html
View File

@ -27,7 +27,8 @@
<title>My Thoughts on the “Arren Kae is Kreia” Theory | Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>My Thoughts on the “Arren Kae is Kreia” Theory | Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -51,11 +52,9 @@
<p>In conclusion, Keeping Arren Kae and Kreia as two different people in my <cite>KotOR</cite> headcanons allows Arren to be a positive influence in Brianna’s life that Brianna needs. Also, there are many interesting ideas and possibilities about Arren and Kreia’s dynamics that could be explored.</p> <p>In conclusion, Keeping Arren Kae and Kreia as two different people in my <cite>KotOR</cite> headcanons allows Arren to be a positive influence in Brianna’s life that Brianna needs. Also, there are many interesting ideas and possibilities about Arren and Kreia’s dynamics that could be explored.</p>
</article> </article>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

14
shrines/starwarskotor/articles/faq-same-gender-romance-mods.html
View File

@ -27,7 +27,8 @@
<title>FAQ for My Star Wars: KotOR Same-Gender Romance Mods | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>FAQ for My Star Wars: KotOR Same-Gender Romance Mods | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<aside class="left-sidebar"> <aside class="left-sidebar">
<div class="sidebar__toc"> <div class="sidebar__toc">
@ -209,10 +210,10 @@
<details class="qna-accordion"> <details class="qna-accordion">
<summary class="qna-accordion__question"> <summary class="qna-accordion__question">
Will you add kissing scenes/sex scenes to your romance mods? Will you add kissing scenes to your romance mods?
</summary> </summary>
<div class="qna-accordion__answer"> <div class="qna-accordion__answer">
<p>No. The purpose of my same-gender romance mods is not necessary to add new content, but to allow players to experience the pre-existing romance content in the <cite>KotOR</cite> series without the heterosexual gender restrictions. Kissing or sex scenes are beyond the scope of my mods, and I do not necessary have the skills required (such as modelling, animations, etc.) to create them either, especially given how limited the animations in these old games are.</p> <p>No. The purpose of my same-gender romance mods is not necessary to add new content, but to allow players to experience the pre-existing romance content in the <cite>KotOR</cite> series without the heterosexual gender restrictions. Kissing scenes are beyond the scope of my mods, and I do not necessary have the skills required (such as modelling, animations, etc.) to create them either, especially given how limited the animations in these old games are.</p>
<p>For Carth Onasi and Male PC Romance mod for KotOR 1, if you want your male PC to kiss Carth, you may install cjt0202's <a href="http://www.cjt0202.net/carth_romance.php" target="_blank">Carth Romance Fix</a> mod, then install the compatibility patch provided in my mod.</p> <p>For Carth Onasi and Male PC Romance mod for KotOR 1, if you want your male PC to kiss Carth, you may install cjt0202's <a href="http://www.cjt0202.net/carth_romance.php" target="_blank">Carth Romance Fix</a> mod, then install the compatibility patch provided in my mod.</p>
</div> </div>
</details> </details>
@ -314,10 +315,7 @@
</section> </section>
</article> </article>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>

10
shrines/starwarskotor/articles/handmaiden-sisters-mother.html
View File

@ -27,7 +27,8 @@
<title>Where is the Mother of Handmaiden’s Sisters? | Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>Where is the Mother of Handmaiden’s Sisters? | Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -55,11 +56,8 @@
<p>However, I would still like to know at least a little more about the mother of Brianna’s sisters, since Brianna’s complicated relationship with her sisters also affects Brianna’s character and story arc.</p> <p>However, I would still like to know at least a little more about the mother of Brianna’s sisters, since Brianna’s complicated relationship with her sisters also affects Brianna’s character and story arc.</p>
</article> </article>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

10
shrines/starwarskotor/articles/index.html
View File

@ -27,7 +27,8 @@
<title>Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -63,11 +64,8 @@
</section> </section>
</div> </div>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

10
shrines/starwarskotor/articles/juhani-hostility-towards-canderous.html
View File

@ -27,7 +27,8 @@
<title>Access Juhani's Conversaion about Canderous without Restoration Mods | Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>Access Juhani's Conversaion about Canderous without Restoration Mods | Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -62,11 +63,8 @@
<p>As evidence, I have recorded and compile the above video myself showing Juhani's interactions with Canderous and Juhani's conversation about Canderous.</p> <p>As evidence, I have recorded and compile the above video myself showing Juhani's interactions with Canderous and Juhani's conversation about Canderous.</p>
</article> </article>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

10
shrines/starwarskotor/articles/juhani-lesbian-evidence.html
View File

@ -27,7 +27,8 @@
<title>Evidence of Juhani being a Lesbian from Star Wars: KotOR's Game Files | Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>Evidence of Juhani being a Lesbian from Star Wars: KotOR's Game Files | Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -81,11 +82,8 @@
<p>I would also like to emphasise that <strong>I DO NOT support any mods that make Juhani a romance option for male characters under any circumstances</strong>, because such mods would be erasing the identity of the very first confirmed lesbian character in any Star Wars media. Not to mention, Juhani is the ONLY confirmed LGBTQ+ character in the entire KotOR series (Belaya from KotOR 1 and Luxa from KotOR 2 are heavily implied to be gay or bisexual, but their sexuality is never confirmed). Please respect LGBTQ+ representation and the identities of canon LGBTQ+ characters.</p> <p>I would also like to emphasise that <strong>I DO NOT support any mods that make Juhani a romance option for male characters under any circumstances</strong>, because such mods would be erasing the identity of the very first confirmed lesbian character in any Star Wars media. Not to mention, Juhani is the ONLY confirmed LGBTQ+ character in the entire KotOR series (Belaya from KotOR 1 and Luxa from KotOR 2 are heavily implied to be gay or bisexual, but their sexuality is never confirmed). Please respect LGBTQ+ representation and the identities of canon LGBTQ+ characters.</p>
</article> </article>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

17
shrines/starwarskotor/components/footer.js
View File

@ -1,15 +1,4 @@
class Footer extends HTMLElement { // Footer component content
constructor() { document.querySelector("footer").innerHTML = `
super(); <p>Made with ♥ and the Force by Leilukin | <a href="#page-top">Back to top</a></p>
}
connectedCallback() {
this.innerHTML = `
<footer>
Made with ♥ and the Force by Leilukin | <a href="#page-top">Back to top</a>
</footer>
`; `;
}
}
customElements.define('footer-component', Footer);

21
shrines/starwarskotor/components/header.js
View File

@ -1,14 +1,10 @@
class Header extends HTMLElement { // Header component content
constructor() { document.querySelector("header").innerHTML = `
super();
}
connectedCallback() {
this.innerHTML = `
<header>
<img src="/shrines/starwarskotor/img/swkotor-header.jpg" alt=""> <img src="/shrines/starwarskotor/img/swkotor-header.jpg" alt="">
</header> `;
<nav>
// Navigation component content
document.querySelector("nav").innerHTML = `
<ul class="nav__menu"> <ul class="nav__menu">
<li class="nav__title"><a href="/shrines/starwarskotor/">Star Wars: KotOR</a></li> <li class="nav__title"><a href="/shrines/starwarskotor/">Star Wars: KotOR</a></li>
<li class="nav__item"><a href="/shrines/starwarskotor/">Home</a></li> <li class="nav__item"><a href="/shrines/starwarskotor/">Home</a></li>
@ -18,9 +14,4 @@ class Header extends HTMLElement {
<li class="nav__item"><a href="/home.html">Main Site</a></li> <li class="nav__item"><a href="/home.html">Main Site</a></li>
<li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li> <li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
</ul> </ul>
</nav>
`; `;
}
}
customElements.define('header-component', Header);

15
shrines/starwarskotor/components/sidebar-content.js
View File

@ -1,14 +1,7 @@
class RightSidebarContent extends HTMLElement { // Sidebar content
constructor() { document.querySelector(".right-sidebar").innerHTML = `
super(); <div class="sidebar--sticky">
}
connectedCallback() {
this.innerHTML = `
<h2>About</h2> <h2>About</h2>
<p><em>Star Wars: Knights of the Old Republic</em> is a space opera role-playing video game series that takes place in the <em>Star Wars</em> universe. The story takes place approximately 4,000 years before the rise of the Galactic Empire.</p> <p><em>Star Wars: Knights of the Old Republic</em> is a space opera role-playing video game series that takes place in the <em>Star Wars</em> universe. The story takes place approximately 4,000 years before the rise of the Galactic Empire.</p>
</div>
`; `;
}
}
customElements.define('right-sidebar-component', RightSidebarContent);

10
shrines/starwarskotor/guides/index.html
View File

@ -27,7 +27,8 @@
<title>Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -59,11 +60,8 @@
</section> </section>
</div> </div>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

9
shrines/starwarskotor/guides/kotor-juhani-romance-guide.html
View File

@ -27,7 +27,8 @@
<title>Juhani Romance Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>Juhani Romance Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<aside class="left-sidebar"> <aside class="left-sidebar">
<div class="sidebar__toc"> <div class="sidebar__toc">
@ -184,11 +185,9 @@
</section> </section>
</article> </article>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

10
shrines/starwarskotor/guides/kotor-redeeming-bastila-guide.html
View File

@ -27,7 +27,8 @@
<title>Redeeming Bastila Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>Redeeming Bastila Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<aside class="left-sidebar"> <aside class="left-sidebar">
<div class="sidebar__toc"> <div class="sidebar__toc">
@ -151,11 +152,8 @@
</section> </section>
</article> </article>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

10
shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide.html
View File

@ -27,7 +27,8 @@
<title>Sandral-Matale Feud Ending Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>Sandral-Matale Feud Ending Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -111,11 +112,8 @@
</section> </section>
</article> </article>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

9
shrines/starwarskotor/index.html
View File

@ -27,7 +27,8 @@
<title>Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -59,11 +60,9 @@
</section> </section>
</div> </div>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

10
shrines/starwarskotor/resources/index.html
View File

@ -27,7 +27,8 @@
<title>Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -88,11 +89,8 @@
</section> </section>
</div> </div>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

10
shrines/starwarskotor/resources/kotor-same-gender-romance-mods.html
View File

@ -27,7 +27,8 @@
<title>Same-Gender Romance Mods for KotOR Series | Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>Same-Gender Romance Mods for KotOR Series | Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<aside class="left-sidebar"> <aside class="left-sidebar">
<h3 class="sidebar__toc-title">Contents</h3> <h3 class="sidebar__toc-title">Contents</h3>
@ -202,11 +203,8 @@
</section> </section>
</article> </article>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

10
shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods.html
View File

@ -27,7 +27,8 @@
<title>List of KotOR 2 Mods that Allow Female Exiles to Recruit the Handmaiden as a Party Member | Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>List of KotOR 2 Mods that Allow Female Exiles to Recruit the Handmaiden as a Party Member | Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -64,11 +65,8 @@
<p>It is very important to note when it comes to installing mods for <cite>KotOR 2</cite>, <strong>I do NOT recommend using the Steam Workshop</strong>, including the Steam Workshop version of The Sith Lords Restored Contente Mod. because frankly, the Steam Workshop is a mod compatibility nightmare for games like <cite>KotOR 2</cite>. I recommend reading this post: <a href="https://deadlystream.com/topic/7321-why-not-to-use-the-steam-workshop/" target="_blank">Why NOT to Use the Steam Workshop</a>.</p> <p>It is very important to note when it comes to installing mods for <cite>KotOR 2</cite>, <strong>I do NOT recommend using the Steam Workshop</strong>, including the Steam Workshop version of The Sith Lords Restored Contente Mod. because frankly, the Steam Workshop is a mod compatibility nightmare for games like <cite>KotOR 2</cite>. I recommend reading this post: <a href="https://deadlystream.com/topic/7321-why-not-to-use-the-steam-workshop/" target="_blank">Why NOT to Use the Steam Workshop</a>.</p>
</article> </article>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

10
shrines/starwarskotor/resources/tslrcm-m478ep-modules-music.html
View File

@ -27,7 +27,8 @@
<title>List of KotOR 2 Mods that Allow Female Exiles to Recruit the Handmaiden as a Party Member | Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title> <title>List of KotOR 2 Mods that Allow Female Exiles to Recruit the Handmaiden as a Party Member | Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -53,11 +54,8 @@
<p>Hope you will find this spreadsheet helpful. Enjoy!</p> <p>Hope you will find this spreadsheet helpful. Enjoy!</p>
</article> </article>
<aside class="right-sidebar"> <aside class="right-sidebar"></aside>
<right-sidebar-component></right-sidebar-component>
</aside>
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>

5
sitemap.html
View File

@ -26,7 +26,8 @@
<title>Site Map | Leilukin's Hub</title> <title>Site Map | Leilukin's Hub</title>
</head> </head>
<body> <body>
<header-component></header-component> <header></header>
<nav></nav>
<main> <main>
<!-- <aside class="left-sidebar"> <!-- <aside class="left-sidebar">
Left sidebar content here Left sidebar content here
@ -111,6 +112,6 @@
Right sidebar content here Right sidebar content here
</aside> --> </aside> -->
</main> </main>
<footer-component></footer-component> <footer></footer>
</body> </body>
</html> </html>