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

Rewrote the layout of the entire website

This commit is contained in:
Helen Chong 2023-06-23 02:05:23 +08:00
parent 89e2dc866c
commit 2be77d6f2d
62 changed files with 4385 additions and 3707 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
about/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,32 +12,27 @@
<meta property="og:description" content="About this website and its owner.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>About | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent"></div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>About</h1>
<h2>The Site</h2>
@ -49,7 +44,7 @@
<h2>The Site Owner</h2>
<center>
<img src="../assets/leilukin-bee.png" width="230px" height="230px" style="border-radius: 50%">
<img src="../assets/leilukin-bee.png" width="200px" height="200px" style="border-radius: 50%">
</center>
<p>You can call me Leilukin. I am a Malaysian Chinese non-binary lesbian born in the early 90s. My pronouns are they/she/他/她.</p>
@ -83,11 +78,12 @@
<script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support Me on Ko-fi', '#7A37A3', 'A1042UH4');kofiwidget2.draw();</script><br><br>
<script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="leilukin" data-color="#7a37a3" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#ffffff" data-font-color="#ffffff" data-coffee-color="#FFDD00" ></script>
</p>
</article>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

40
articles/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,37 +12,37 @@
<meta property="og:description" content="List of articles published on my website.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Articles | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent"></div>
</div>
</aside>
<header-component></header-component>
<main>
<h1>Articles</h1>
</main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>Articles</h1>
<p>Work in progress</p>
</section>
</div>
<footer id="footer"></footer>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
<footer-component></footer-component>
</body>
</html>

92
changelog/2022.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,160 +12,154 @@
<meta property="og:description" content="Changelog of my website during the year of 2022.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="changelog.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Website Changelog Archive: 2022 | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent"></div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>Website Changelog</h1>
<center><p>Archive: <a href="../changelog/">Latest</a> | <strong>2022</strong> | <a href="./layouts.html">Website Layouts</a></p></center>
<strong>December 29, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, KotOR 1 Twi'lek Male NPC Diversity, to <a href="../mymods/kotor1mods">my mods for <em>Star Wars: Knights of the Old Republic</em></a> page.</li>
</ul>
<strong>December 19, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added new resource, <em>Star Wars: Knights of the Old Republic</em> save files, to <a href="../resources">my resources</a> page: KotOR 2 Light Side Female Saves with The Sith Lords Restored Content Mod and PartySwap.</li>
</ul>
<strong>December 16, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mods, Exile's Trial Overlay Removal and Visas Visible Jedi Robes, to <a href="../mymods/kotor2mods">my mods for <em>Star Wars: Knights of the Old Republic II: THe Sith Lords</em></a> page.</li>
</ul>
<strong>December 11, 2022:</strong>
<ul class="changelist">
<ul>
<li>For my <a href="../mymods/kotor1mods">mod page for <em>Star Wars: Knights of the Old Republic</em></a>, No Flirting with Davik's Slaves has been updated and renamed to PC Dialogue with Davik's Slaves Change.</li>
</ul>
<strong>December 8, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, No Flirting with Davik's Slaves, to <a href="../mymods/kotor1mods">my mods for <em>Star Wars: Knights of the Old Republic</em></a> page.</li>
</ul>
<strong>November 27, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, Prologue Item Recovery, to <a href="../mymods/kotor2mods">my mods for <em>Star Wars: Knights of the Old Republic II: THe Sith Lords</em></a> page.</li>
</ul>
<strong>November 24, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, Bastila and Carth Romance Removal, to <a href="../mymods/kotor1mods">my mods for <em>Star Wars: Knights of the Old Republic</em></a> page.</li>
</ul>
<strong>November 22, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, No Jealousy Lock in Handmaiden Dialogue, to <a href="../mymods/kotor2mods">my mods for <em>Star Wars: Knights of the Old Republic II: THe Sith Lords</em></a> page.</li>
</ul>
<strong>November 16, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, Lonna Vash Mod for TSLRCM, to <a href="../mymods/kotor2mods">my mods for <em>Star Wars: Knights of the Old Republic II: THe Sith Lords</em></a> page.</li>
</ul>
<strong>November 12, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, Dahnis Unique Look, to <a href="../mymods/kotor2mods">my mods for <em>Star Wars: Knights of the Old Republic II: THe Sith Lords</em></a> page.</li>
</ul>
<strong>November 9, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, TSL Workbench Lightsaber Creation, to <a href="../mymods/kotor2mods">my mods for <em>Star Wars: Knights of the Old Republic II: THe Sith Lords</em></a> page.</li>
<li>Rearrange the mod catogeries on <a href="../mymods/kotor2mods">my mod page for <em>Star Wars: Knights of the Old Republic II: THe Sith Lords</em></a>. </li>
</ul>
<strong>October 23, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, Trask Ulgo Without Tutorials, to <a href="../mymods/kotor1mods">my mods for <em>Star Wars: Knights of the Old Republic</em></a> page.</li>
</ul>
<strong>October 22, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, KotOR 1 Twi'lek Female NPC Diversity, to <a href="../mymods/kotor1mods">my mods for <em>Star Wars: Knights of the Old Republic</em></a> page.</li>
</ul>
<strong>October 17, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added new resource, <em>Star Wars: Knights of the Old Republic</em> save files, to <a href="../resources">my resources</a> page: Light Side Female Saves with KOTOR 1 Community Patch and All Romances.</li>
</ul>
<strong>October 16, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, KotOR 1 No Gendered Dialogue from Male NPCs, to <a href="../mymods/kotor1mods">my mods for <em>Star Wars: Knights of the Old Republic</em></a> page.</li>
</ul>
<strong>October 11, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, Juhani Dialogue Restoration, to <a href="../mymods/kotor1mods">my mods for <em>Star Wars: Knights of the Old Republic</em></a> page.</li>
<li>Added new article about <em>Star Wars: Knights of the Old Republic</em>: <a href="../articles/juhani-hostility-towards-canderous.html">How to Access Juhani's Conversaion about Canderous without Restoration Mods</a></li>
</ul>
<strong>October 6, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added the <a href="https://ogp.me/" target="_blank">Open Graph protocol</a> on each page.</li>
</ul>
<strong>October 5, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added navigation links bar under the websit banner on each page.</li>
<li>Added new article about <em>Star Wars: Knights of the Old Republic II: The Sith Lords</em>: <a href="../articles/handmaiden-sisters-mother.html">Where is the Mother of the Handmaiden’s Sisters?</a>.</li>
<li>Added resource: <a href="../resources/kotor2-female-exile-recruit-handmaiden-mods.html">List of <em>Star Wars: Knights of the Old Republic II: The Sith Lords</em> Mods that Allow Female Exiles to Recruit the Handmaiden as a Party Member</a></li>
</ul>
<strong>October 4, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added download links to <a href="https://www.dropbox.com/s/ilntlihyaabthzg/Love%20Between%20Brianna%20And%20The%20Exile%20-%20TSLRCM%20version.zip?dl=0" target="_blank">Love Between Brianna and the Exile - The Sith Lords Restored Content Mod Version</a> and <a href="https://www.dropbox.com/s/af3h6y793f3zjxq/Remote%20Tells%20Influence%20Patch%20for%20TSLRCM.zip?dl=0" target="_blank">Remote Tells Influence Patch for The Sith Lords Restored Content Mod</a> on my <a href="/mymods/kotor2mods">KotOR 2 mods</a> page.</li>
</ul>
<strong>October 3, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added banner images for each of my <a href="../mymods/kotor1mods">KotOR 1 mods</a> and <a href="../mymods/kotor2mods">KotOR 2 mods</a>.</li>
</ul>
<strong>October 1, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added article: <a href="../articles/arren-kae-kreia-theory.html">Why I Personally Do Not Subscribe to the “Arren Kae is Kreia” Theory</a>.</li>
</ul>
<strong>September 30, 2022:</strong>
<ul class="changelist">
<ul>
<li>Adjusted the codes for the <a href="../articles">Articles</a> and <a href="/featured">Featured</a> pages.</li>
</ul>
<strong>September 25, 2022:</strong>
<ul class="changelist">
<ul>
<li>Added a button to <a href="https://www.buymeacoffee.com/leilukin" target="_blank">my Buy Me a Coffee page</a> on the home page and About page.</li>
<li>The top banner on each page is now linked to the home page.</li>
</ul>
<strong>September 20, 2022:</strong>
<ul class="changelist">
<ul>
<li>Website banner created and placed on the top each page.</li>
<li>Rearrange the buttons on the main page.</li>
<li>Created indivisual sub-pages for the pieces shared on the <a href="/featured">Featured page</a>.</li>
@ -175,25 +169,27 @@
</ul>
<strong>September 16, 2022:</strong>
<ul class="changelist">
<ul>
<li>Adjusted the font size, line and paragraph spacing of the website to make it easier to read and more responsive.</li>
<li>Redesigned the buttons on the website.</li>
</ul>
<strong>September 12, 2022:</strong>
<ul class="changelist">
<ul>
<li>Created a page for <a href="../resources/tslrcm-m478ep-modules-music.html">The Sith Lords Restored Content Mod + M4-78 Enhancement Project Modules, Warp Codes & Music Overview</a>.</li>
<li>Modified the HTML and CSS codes of the entire website to make the website more accessible.</li>
</ul>
<strong>September 11, 2022:</strong>
<ul class="changelist">
<ul>
<li>Website launch.</li>
</ul>
</main>
</article>
</div>
<footer id="footer"></footer>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
<footer-component></footer-component>
</body>
</html>

73
changelog/2023-redesign.html
View File

@ -1,73 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:url" content="https://leilukin.neocities.org/articles/2023-redesign.html">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:title" content="2023 New Year Redesign of Leilukin's Hub">
<meta property="og:description" content="About giving my website a new design in light of a new year of 2023.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="changelog.css" type="text/css" media="all">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<title>2023 New Year Redesign of Leilukin's Hub | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent"></div>
</div>
</aside>
<main>
<h1>2023 New Year Redesign of Leilukin's Hub</h1>
<img src="./layouts/Leilukins-Hub-layout-2023-01.png" alt="A screenshot of Leilukin's Hub home page, with its layout design released on January 26, 2023" width="100%" height="auto">
<p>In light of a new year, the Leilukin's Hub website has received a new design on January 26. 2023!</p>
<p>I have wanted to rewrite and redesign this site after learning HTML and CSS more and getting better at writing those languages. With Visual Studio Code and the <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank">Live Server</a> extension installed, I have also finally found a good workflow for me to write and test HTML and CSS.</p>
<p>Looking at other Neocities websites have also given me more ideas in enhancing my own website. Special thanks to <a href="https://sadgrl.online/" target="_blank">sadgrl.online</a>, whose various web building resources, including the Layout Builder, have helped tremendously in redesigning this site.</p>
<p>With this 2023 new year redesign of this website, the index page, which is for when you visit the link <a href="https://leilukin.neocities.org/">leilukin.neocities.org</a>, you will be presented with a very simple page, but when you click the "Enter" button to enter, you will be brought to my website's home page, and can start properly browsing my website, and enjoying the new design!</p>
<h3>Highlights of the 2023 New Year redesign of Leilukin's Hub:</h3>
<ul>
<li>Uses purple colour schemes primarily, as purple is one of my favourite colours.</li>
<li>Each page category has their own CSS file, allowing me to give certain pages unique elements. However, the site still has a main CSS file to be imported into CSS files of other pages, saving me time to edit the CSS files one by one just to tweak a certain part of the main layout design.</li>
<li>Background image added.</li>
<li>Sidebars added, with the contents being sticky, so you can still see them while scrolling through.</li>
<li>The navigation links are now on the right sidebar. Previously, the navigation links of my website are in a row placed at the header section.</li>
<li>The table of contents of some of my pages is now placed on the left sidebar.</li>
<li>The <a href="/changelog/">website changelog</a> page adds archives for the layout designs of this site and old changelog.</li>
<li>My <a href="/mymods">video game mod pages</a> have added a filter function, so you can use buttons to view a specific category of mods.</li>
</ul>
<p>After spending many hours on this site redesign, I am very pleased with how it turns out. Hope you enjoy it!</p>
</main>
</div>
<footer id="footer"></footer>
</div>
</body>
</html>

10
changelog/changelog.css
View File

@ -1,10 +0,0 @@
@import url("/main.css");
.changelist {
line-height: 1.5em;
}
.changelist li {
margin-top: 0;
padding-bottom: 0.5em;
}

81
changelog/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,33 +12,27 @@
<meta property="og:description" content="Changelog of my website.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="changelog.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Website Changelog | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent"></div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>Website Changelog</h1>
<center>
@ -46,66 +40,66 @@
</center>
<strong>June 15, 2023:</strong>
<ul class="changelist">
<ul>
<li>Removed unnecessary CSS files.</li>
<li>Refactored the index page's HTML and CSS.</li>
</ul>
<strong>June 11, 2023:</strong>
<ul class="changelist">
<ul>
<li>Widened the website content layout.</li>
<li>Changed the header image of my <a href="/shrines/starwarskotor/"><em>Star Wars: Knights of the Old Republic</em> shrine</a>.</li>
</ul>
<strong>May 9, 2023:</strong>
<ul class="changelist">
<ul>
<li>New blog post: <a href="/blog/posts/2023-05-09-Onboard-the-Dracula-Daily-Hype-Train.html">Onboard the Dracula Daily Hype Train</a>.</li>
</ul>
<strong>May 5, 2023:</strong>
<ul class="changelist">
<ul>
<li>Modify the web application manifest of this site to make this site look more like a mobile app when added to a mobile device's home screen.</li>
</ul>
<strong>April 22, 2023:</strong>
<ul class="changelist">
<ul>
<li>Switch the content of the left and right sidebars. Navigation links are now on the left sidebar, while the table of contents on the right sidebar.</li>
<li>Proper indentation of the HTML codes.</li>
</ul>
<strong>March 27, 2023:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, Leilukin's Juhani's Outfit Reskin Pack, to <a href="../mymods/kotor1mods">my mods for <em>Star Wars: Knights of the Old Republic</em></a> page.</li>
</ul>
<strong>March 22, 2023:</strong>
<ul class="changelist">
<ul>
<li>Added the dates of publication of articles.</li>
</ul>
<strong>March 20, 2023:</strong>
<ul class="changelist">
<ul>
<li>Tweaked the format of the dates of publication and update of articles.</li>
</ul>
<strong>March 19, 2023:</strong>
<ul class="changelist">
<ul>
<li>Added a new masterlist on my <a href="/resources/">Resources</a> page: <a href="/resources/anti-harry-potter-jk-rowling-masterlist.html">Anti-Harry Potter and Anti-J. K. Rowling Masterlist</a></li>
<li>Changed the color of subheadings.</li>
</ul>
<strong>March 8, 2023:</strong>
<ul class="changelist">
<ul>
<li>Updated the <a href="/shrines/starwarskotor/"><em>Star Wars: Knights of the Old Republic</em> shrine</a>'s <a href="/shrines/starwarskotor/guides/">Guides page</a> to add a section for lists of cheats for the <em>KotOR</em> games.</li>
</ul>
<strong>March 2, 2023:</strong>
<ul class="changelist">
<ul>
<li>Updated the <a href="/shrines/starwarskotor/"><em>Star Wars: Knights of the Old Republic</em> shrine</a>'s <a href="/shrines/starwarskotor/guides/">Guides page</a> to add a section for lists of cheats for the <em>KotOR</em> games.</li>
</ul>
<strong>February 18, 2023:</strong>
<ul class="changelist">
<ul>
<li>Added <a href="/sitemap.html">Site Map</a>.</li>
<li>Added web pages for my <em>Star Wars: Knights of the Old Republic</em> <a href="/shrines/starwarskotor/guides/">guides</a>:</li>
<ul>
@ -117,7 +111,7 @@
</ul>
<strong>February 17, 2023:</strong>
<ul class="changelist">
<ul>
<li>For my <a href="/shrines/asummersend/"><em>A Summer’s End — Hong Kong 1986</em> shrine</a>:</li>
<ul>
<li>Added a <a href="/shrines/asummersend/trivia.html">Trivia</a> page.</li>
@ -127,33 +121,33 @@
</ul>
<strong>February 16, 2023:</strong>
<ul class="changelist">
<ul>
<li>Added a <a href="/shrines/">Shrines</a> page, with the first e-shrine on this website being <a href="/shrines/asummersend/"><em>A Summer’s End — Hong Kong 1986</em></a>.</li>
</ul>
<strong>February 10, 2023:</strong>
<ul class="changelist">
<ul>
<li>Updated the banner image of my Alternate Revan Romances REDUX mod on the <a href="../mymods/kotor2mods"><em>Star Wars: Knights of the Old Republic II: The Sith Lords</em> mod page</a>.</li>
<li>Added a Webrings section on the <a href="../home">home page</a>.</li>
</ul>
<strong>February 7, 2023:</strong>
<ul class="changelist">
<ul>
<li>Updated the <a href="/resources">Resources</a> page to add a my <a href="https://deadlystream.com/files/file/2249-missing-k1-party-member-ports-for-tsl-modders-resource/" target="_blank">Missing K1 Party Member Ports for TSL</a> modder's resource.</li>
</ul>
<strong>January 31, 2023:</strong>
<ul class="changelist">
<ul>
<li>Updated the <a href="/links">Links</a> page as I have officially joined the <a href="https://isaacfish.neocities.org/webring/" target="_blank">Queer Coded webring</a>.</li>
</ul>
<strong>January 30, 2023:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, Juhani Item Pack for TSL, to <a href="../mymods/kotor2mods">my mods for <em>Star Wars: Knights of the Old Republic II: The Sith Lords</em></a> page.</li>
</ul>
<strong>January 28, 2023:</strong>
<ul class="changelist">
<ul>
<li>Added a <a href="/links">Links</a> page.</li>
<li>Move the link to <a href="/changelog/">changelog</a> to the sidebar.</li>
<li>Due to these new changes to the navigation links on the sidebar, I wrote a JavaScript file to dynamically generate the contents on the right sidebar and the footer across multiple pages on this site.</li>
@ -165,20 +159,21 @@
</ul>
<strong>January 26, 2023:</strong>
<ul class="changelist">
<li>The entire website has been redesigned! See the <a href="./2023-redesign.html">2023 New Year Redesign of Leilukin's Hub</a> for more information!</li>
<ul>
<li>The entire website has been redesigned! See the <a href="./updates/2023-redesign.html">2023 New Year Redesign of Leilukin's Hub</a> for more information!</li>
</ul>
<strong>January 25, 2023:</strong>
<ul class="changelist">
<ul>
<li>Added my latest mod, TSL Twi'lek Male NPC Diversity, to <a href="../mymods/kotor2mods">my mods for <em>Star Wars: Knights of the Old Republic II: The Sith Lords</em></a> page.</li>
<li>Corrected the mod description of KotOR 1 Twi'lek Male NPC Diversity on <a href="../mymods/kotor1mods">my mods for <em>Star Wars: Knights of the Old Republic</em></a> page.</li>
</ul>
</article>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

37
changelog/layouts.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,33 +12,27 @@
<meta property="og:description" content="An archive for the page layout designs mt website has used.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="changelog.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Website Layout Archive | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent"></div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>Website Layout Archive</h1>
<center>
@ -51,11 +45,12 @@
<h3>September 11, 2023 (Site Launch)</h3>
<img src="./layouts/Leilukins-Hub-layout-2022-index.png" alt="A screenshot of Leilukin's Hub home page, with its layout design released on the site's launch on September 11, 2023" width="100%">
<img src="./layouts/Leilukins-Hub-layout-2022-page.png" alt="A screenshot of Leilukin's Hub website's My Creation page, with its layout design released on the site's launch on September 11, 2023" width="100%">
</article>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

71
changelog/updates/2023-redesign.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:url" content="https://leilukin.neocities.org/articles/2023-redesign.html">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:title" content="2023 New Year Redesign of Leilukin's Hub">
<meta property="og:description" content="About giving my website a new design in light of a new year of 2023.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Website Layout Archive | Leilukin's Hub</title>
</head>
<body>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>2023 New Year Redesign of Leilukin's Hub</h1>
<center><p>Published on January 26, 2023</p></center>
<img src="../layouts/Leilukins-Hub-layout-2023-01.png" alt="A screenshot of Leilukin's Hub home page, with its layout design released on January 26, 2023" width="100%" height="auto">
<p>In light of a new year, the Leilukin's Hub website has received a new design on January 26. 2023!</p>
<p>I have wanted to rewrite and redesign this site after learning HTML and CSS more and getting better at writing those languages. With Visual Studio Code and the <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank">Live Server</a> extension installed, I have also finally found a good workflow for me to write and test HTML and CSS.</p>
<p>Looking at other Neocities websites have also given me more ideas in enhancing my own website. Special thanks to <a href="https://sadgrl.online/" target="_blank">sadgrl.online</a>, whose various web building resources, including the Layout Builder, have helped tremendously in redesigning this site.</p>
<p>With this 2023 new year redesign of this website, the index page, which is for when you visit the link <a href="https://leilukin.neocities.org/">leilukin.neocities.org</a>, you will be presented with a very simple page, but when you click the "Enter" button to enter, you will be brought to my website's home page, and can start properly browsing my website, and enjoying the new design!</p>
<h3>Highlights of the 2023 New Year redesign of Leilukin's Hub:</h3>
<ul>
<li>Uses purple colour schemes primarily, as purple is one of my favourite colours.</li>
<li>Each page category has their own CSS file, allowing me to give certain pages unique elements. However, the site still has a main CSS file to be imported into CSS files of other pages, saving me time to edit the CSS files one by one just to tweak a certain part of the main layout design.</li>
<li>Background image added.</li>
<li>Sidebars added, with the contents being sticky, so you can still see them while scrolling through.</li>
<li>The navigation links are now on the right sidebar. Previously, the navigation links of my website are in a row placed at the header section.</li>
<li>The table of contents of some of my pages is now placed on the left sidebar.</li>
<li>The <a href="/changelog/">website changelog</a> page adds archives for the layout designs of this site and old changelog.</li>
<li>My <a href="/mymods">video game mod pages</a> have added a filter function, so you can use buttons to view a specific category of mods.</li>
</ul>
<p>After spending many hours on this site redesign, I am very pleased with how it turns out. Hope you enjoy it!</p>
</article>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
<footer-component></footer-component>
</body>
</html>

15
components/footer.js Normal file
View File

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

47
components/header.js Normal file
View File

@ -0,0 +1,47 @@
class Header extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<header>
<img src="/assets/Leilukins-Hub-website-banner.png" alt="">
</header>
<nav>
<ul class="nav__menu">
<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="/about">About</a></li>
<li class="nav__item"><a href="/blog">Blog</a></li>
<li class="nav__item"><a href="/articles">Articles</a></li>
<li class="nav__item"><a href="/mycreations">My Creations</a></li>
<li class="nav__item nav__has-submenu">
<a tabindex="0">My Mods</a>
<ul class="nav__submenu">
<li class="nav__subitem"><a href="/mymods">Index</a></li>
<li class="nav__subitem"><a href="/mymods/kotor1mods">KotOR 1</a></li>
<li class="nav__subitem"><a href="/mymods/kotor2mods">KotOR 2</a></li>
</ul>
</li>
<li class="nav__item"><a href="/playlists">Playlists</a></li>
<li class="nav__item"><a href="/featured">Featured</a></li>
<li class="nav__item"><a href="/mycreations">Resources</a></li>
<li class="nav__item nav__has-submenu">
<a tabindex="1">Shrines</a>
<ul class="nav__submenu">
<li class="nav__subitem"><a href="/shrines">Index</a></li>
<li class="nav__subitem"><a href="#">A Summer's End</a></li>
<li class="nav__subitem"><a href="#">Star Wars: KotOR</a></li>
</ul>
</li>
<li class="nav__item"><a href="/links">Links</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>
</ul>
</nav>
`;
}
}
customElements.define('header-component', Header);

66
components/navbar.js Normal file
View File

@ -0,0 +1,66 @@
/* FOR TOGGLING MENUS ON THE NAVBAR */
const navToggle = document.querySelector(".nav__toggle");
const navMenu = document.querySelector(".nav__menu");
const navItems = document.querySelectorAll(".nav__item");
/* Toggle mobile navMenu */
function toggleMenu() {
if (navMenu.classList.contains("nav__active")) {
navMenu.classList.remove("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
navMenu.classList.add("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Activate Submenu */
function toggleItem() {
if (this.classList.contains("nav__submenu-active")) {
this.classList.remove("nav__submenu-active");
} else if (navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
this.classList.add("nav__submenu-active");
} else {
this.classList.add("nav__submenu-active");
}
}
/* Close Submenu From Anywhere */
function closeSubmenu(e) {
if (navMenu.querySelector(".nav__submenu-active")) {
let isClickInside = navMenu
.querySelector(".nav__submenu-active")
.contains(e.target);
if (!isClickInside && navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
}
}
}
/* Event Listeners */
navToggle.addEventListener("click", toggleMenu, false);
for (let item of navItems) {
if (item.querySelector(".nav__submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
/* FOR MAKING THE NAVBAR STICKY */
const header = document.querySelector("header");
const navbar = document.querySelector("nav");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = header.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {
navbar.classList.remove("sticky-nav");
}
});

12
featured/featured.css
View File

@ -1,12 +0,0 @@
@import url("/main.css");
blockquote {
margin: 1.25rem 0;
padding: 0 1.25rem;
border-inline-start: 0.1875rem solid #999999;
}
#source {
font-size: 1.6rem;
font-weight: bold;
}

40
featured/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,34 +12,28 @@
<meta property="og:description" content="Compilation of me and my work getting featured on other websites or platforms, including interviews and spotlights.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="featured.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Featured | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent">
</div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>Featured</h1>
<h2>Interviews with Me</h2>
@ -47,11 +41,13 @@
<li><a href="./kotor2-modder-interview-ars-technica.html">The modders who spent 15 years fixing Knights of the Old Republic 2 @ Ars Technica</a></li>
<li><a href="./lgbtq-booklet-interview-misi-bawang.html">Artist Interview for MISI:Bawang's Floating in a Sky Full of Pride</a></li>
</ul>
</section>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

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

@ -1,45 +1,38 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:url" content="https://leilukin.neocities.org/featured/kotor2-modder-interview-ars-technica.html">
<meta property="og:url" content="https://leilukin.neocities.org/featured/kotor2-modder-interview-ars-technica">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:title" content="The modders who spent 15 years fixing Knights of the Old Republic 2 @ Ars Technica">
<meta property="og:description" content="Ars Technica's article on the KotOR 2's modding community to celebrate the game's 15th anniversary. I was interviewed for my same-gender romance mods for KotOR 2.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="featured.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>KotOR 2 Modders Interview on Ars Technica | Featured | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent">
</div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>The modders who spent 15 years fixing <em>Knights of the Old Republic 2</em> @ Ars Technica</h1>
<p>On December 6, 2019, to celebrate the 15th anniversary of <em>Star Wars: Knights of the Old Republic 2</em>, Ars Technica has published <a href="https://arstechnica.com/gaming/2019/12/the-modders-that-spent-15-years-fixing-knights-of-the-old-republic-2/" target="_blank">an article about the modding community of KotOR 2</a>. I was interviewed by the author of this article, Austin Taylor, for my same-gender romance mods for KotOR 2.</p>
@ -58,14 +51,14 @@
<p>To recruit both The Handmaiden and The Disciple at the same time, players can install the <a href="https://deadlystream.com/files/file/544-partyswap/" target="_blank">PartySwap mod by DarthTyren</a>. That mod was initially lacking the same-gender romance dialogue from Leiluken’s mod. But Leiluken has since added a compatibility installation option, letting the two mods now work together and fully opening up the same-gender romance options of your dreams.</p>
</blockquote>
<p>Read the full article on Ars Technica here:</p>
<p id="source"><a href="https://arstechnica.com/gaming/2019/12/the-modders-that-spent-15-years-fixing-knights-of-the-old-republic-2/" target="_blank">The modders who spent 15 years fixing <em>Knights of the Old Republic 2</em></a></p>
<p>Read the full article on Ars Technica here:<br>
<a href="https://arstechnica.com/gaming/2019/12/the-modders-that-spent-15-years-fixing-knights-of-the-old-republic-2/" target="_blank">The modders who spent 15 years fixing <em>Knights of the Old Republic 2</em></a></p>
</article>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

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

@ -1,54 +1,48 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:url" content="https://leilukin.neocities.org/featured/lgbtq-booklet-interview-misi-bawang.html">
<meta property="og:url" content="https://leilukin.neocities.org/featured/lgbtq-booklet-interview-misi-bawang">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:title" content="Floating in a Sky Full of Pride: LGBTQ+ Booklet Artist Interview from MISI:Bawang">
<meta property="og:description" content="My submission for MISI:Bawang's booklet about LGBTQ+ Malaysians was accepted and published. Here is MISI:Bawang's interview with me regarding my work and my queer identity.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="featured.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>LGBTQ+ Booklet Artist Interview from MISI:Bawang | Featured | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent">
</div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>Floating in a Sky Full of Pride: LGBTQ+ Booklet Artist Interview from MISI:Bawang</h1>
<center><p>(This article is also available on <a href="https://leilukinart.tumblr.com/post/676165415142031360/misibawang-a-malaysian-digital-booklet-project" target="_blank">my art blog on Tumblr</a>)</p></center>
<p><a href="https://bawangqueerbooklet.msolidariti.org/" target="_blank">Floating in a Sky Full of Pride</a>, the LGBTQ+ booklet of <a href="https://misibawang.msolidariti.org/" target="_blank">MISI:Bawang</a>, a Malaysian digital booklet project, has been released on Valentine’s Day 2022. Since my submitted art piece, Life of a Bee with Pride, has been selected to be included in the booklet, I had received the honour of being interviewed by MISI:Bawang to share my personal experience with my LGBTQ+ identity, favourite queer art/media, and a ✨ special message to the Malaysian LGBTQ+ community. 🏳‍🌈</p>
<img src="/featured/images/Bawang-Booklet-Interview-Leilukin-1.jpg" width="100%" height="auto" alt="First slide of MISI:Bawang's interview with me for their LGBTQ+ booklet"><br>
<img src="/featured/images/Bawang-Booklet-Interview-Leilukin-2.jpg" width="100%" height="auto" alt="Second slide of MISI:Bawang's interview with me for their LGBTQ+ booklet"><br>
<img src="/featured/images/Bawang-Booklet-Interview-Leilukin-3.jpg" width="100%" height="auto" alt="Third slide of MISI:Bawang's interview with me for their LGBTQ+ booklet"><br>
<img src="./img/Bawang-Booklet-Interview-Leilukin-1.jpg" width="100%" height="auto" alt="First slide of MISI:Bawang's interview with me for their LGBTQ+ booklet"><br>
<img src="./img/Bawang-Booklet-Interview-Leilukin-2.jpg" width="100%" height="auto" alt="Second slide of MISI:Bawang's interview with me for their LGBTQ+ booklet"><br>
<img src="./img/Bawang-Booklet-Interview-Leilukin-3.jpg" width="100%" height="auto" alt="Third slide of MISI:Bawang's interview with me for their LGBTQ+ booklet"><br>
<p>MISI:Bawang has shared their interview with me and other Malaysian LGBTQ+ artists and authors who submitted their work to the booklet on Twitter and Instagram. Here are the <a href="https://twitter.com/misi_bawang/status/1470247663471763464" target="_blank">Twitter thread</a> and <a href="https://www.instagram.com/p/CXSlIbsJXsM/" target="_blank">Instagram post</a> that include my interview.</p>
@ -76,10 +70,12 @@
<p>I hope the LGBTQ+ community in Malaysia will continue to grow and thrive, and more LGBTQ+ Malaysians who are still questioning and feeling lonely could be reached out. Let us work towards a future where we could live freely.</p>
</blockquote>
</main>
</article>
</div>
<footer id="footer"></footer>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
<footer-component></footer-component>
</body>
</html>

66
home.html
View File

@ -1,58 +1,59 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:url" content="https://leilukin.neocities.org/home.html">
<meta property="og:url" content="https://leilukin.neocities.org/home">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:title" content="Home | Leilukin's Hub">
<meta property="og:description" content="Home page of Leilukin's Hub">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Home | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent"></div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>Welcome!</h1>
<p>Hello! You can call me Leilukin. Welcome to my website!</p>
<p>This hub is my own personal corner on the internet. Enjoy your stay!</p>
</section>
<h1>Updates</h1>
<div class="box">
<section class="content-section">
<h2>Updates</h2>
<div class="text-box">
<strong>June 15, 2023:</strong>
<ul>
<li>Removed unnecessary CSS files.</li>
<li>Refactored the index page's HTML and CSS.</li>
</ul>
</div>
<a href="/changelog">View all site changelog</a>
</section>
<h1>Always Proud</h1>
<section class="content-section">
<h2>Always Proud</h2>
<div style="display: inline-flex; flex-wrap: wrap;">
<img src="./buttons/progress.png" alt="A website button of the 2018 Progress Flag" title="2018 Progress Flag by Daniel Quasar (2018)">
<img src="./buttons/9_stripe.png" alt="A website button of the 9 stripe rainbow flag" title="Nine-Stripe Rainbow Flag by Gilbert Baker (2017)">
<img src="./buttons/lesbian.png" alt="A website button of the lesbian pride flag" title="I am a lesbian">
@ -60,21 +61,28 @@
<img src="./buttons/demigirl.png" alt="A website button of the demigirl pride flag" title="I am a demiwoman">
<img src="./buttons/agender.png" alt="A website button of the agender pride flag" title="I am agender">
<img src="./buttons/bigender.png" alt="A website button of the bigender pride flag" title="I am bigender">
</div>
<p>Credit to <a href="https://rainy.gay/pride/pridebuttons" target="_blank">Dime</a> for these pride buttons!</p>
</section>
<h1>Webrings</h1>
<div style="border: none; padding: 5px; display: inline-block"><a href="https://isaacfish.neocities.org/webring/25.html" target="_blank"><img src="./links/webrings/queercoded-left.png" alt="left arrow"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/" target="_blank"><img src="./links/webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/27.html" target="_blank"><img src="./links/webrings/queercoded-right.png" alt="right arrow"></a></div>
<section class="content-section">
<h2>Webrings</h2>
<div style="border: none; padding: 5px; display: inline-flex"><a href="https://isaacfish.neocities.org/webring/25.html" target="_blank"><img src="./links/webrings/queercoded-left.png" alt="left arrow"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/" target="_blank"><img src="./links/webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/27.html" target="_blank"><img src="./links/webrings/queercoded-right.png" alt="right arrow"></a></div>
</section>
<h1>Support Me</h1>
<section class="content-section">
<h2>Support Me</h2>
<p>If you enjoy my work, you can support me on Ko-Fi or Buy Me a Coffee:
<script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support Me on Ko-fi', '#7A37A3', 'A1042UH4');kofiwidget2.draw();</script><br><br>
<script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="leilukin" data-color="#7a37a3" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#ffffff" data-font-color="#ffffff" data-coffee-color="#FFDD00" ></script>
</p>
</section>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

46
links/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,46 +12,50 @@
<meta property="og:description" content="A collection of links.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Links | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent"></div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>Links</h1>
<h2>Webrings I Have Joined</h2>
<div style="border: none; padding: 5px; display: inline-block"><a href="https://isaacfish.neocities.org/webring/25.html" target="_blank"><img src="./webrings/queercoded-left.png" alt="left arrow"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/" target="_blank"><img src="./webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/27.html" target="_blank"><img src="./webrings/queercoded-right.png" alt="right arrow"></a></div>
<div style="border: none; padding: 5px; display: inline-flex"><a href="https://isaacfish.neocities.org/webring/25.html" target="_blank"><img src="./webrings/queercoded-left.png" alt="left arrow"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/" target="_blank"><img src="./webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/27.html" target="_blank"><img src="./webrings/queercoded-right.png" alt="right arrow"></a></div>
</section>
<section class="content-section">
<h2>Fanlistings I Have Joined</h2>
<div style="display: flex;flex-wrap: wrap;">
<a href="https://glitterskies.org/kotor/" target="_blank"><img src="./fanlistings/kotor-100x50.png" alt="A website button of a Star Wars: Knights of the Old Republic fanlisting" title="Erased Identity - Star Wars: Knights of the Old Republic fanlisting"></a>
<a href="https://glitterskies.org/kotor2/" target="_blank"><img src="./fanlistings/kotor2-100x50.jpg" alt="A website button of a Star Wars: Knights of the Old Republic 2 fanlisting" title="Mysteries of Malachor - Star Wars: Knights of the Old Republic 2: The Sith Lords fanlisting"></a>
<a href="https://inspirationally.net/jedi/" target="_blank"><img src="./fanlistings/jedi-100x50.png" alt="A website button of a Jedi fanlisting" title="Keepers of the Peace // the Star Wars: [+] Jedi fanlisting"></a>
</div>
</section>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

678
main.css
View File

@ -1,10 +1,36 @@
:root {
--header-image: url('/assets/Leilukins-Hub-website-banner.png');
--body-bg-color: #08031A;
--body-bg-image: url('/assets/starsforever.gif');
--content: #43256E;
--title-border: #d3aad5;
--code-bg: #241445;
--code-border: #82668f;
--body-font-color: #fceaff;
--content-bg-color: #3d2163;
--main-heading-color: #ED64F5;
--sub-heading-color: #e8b86f;
--title-border-color: #d3aad5;
--bold-font-color: #ff9933;
--link-color: #ED64F5;
--link-hover-color: #c355c9;
--quote-bg: #13092D;
--quote-border-color: #999999;
--code-bg-color: #241445;
--code-border-color: #82668f;
--link-btn-bg: #873eb5;
--link-btn-text: white;
--link-btn-hover: #241445;
--header-bg-color: black;
--nav-bg: #222;
--nav-link: white;
--nav-submenu-active: #111;
--nav-item-hover: #ccc;
--top-btn-bg: #251347;
--top-btn-icon: #d3aad5;
--footer-bg: #13092D;
}
@font-face {
@ -23,75 +49,459 @@
font-style: italic;
}
html,
body {
scroll-behavior: smooth;
}
body {
font-family: 'Nunito', Arial, sans-serif;
font-size: 1rem; /* 16px */
margin: 0;
background-color: #08031A;
background-size: 4rem;
color: #fceaff;
background-image: var(--body-bg-image);
background-attachment: fixed;
line-height: 1.6;
}
* {
/* CSS RESET */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* STYLING BEGINS */
body {
display: flex;
align-items: center;
flex-direction: column;
font-family: 'Nunito';
color: var(--body-font-color);
background-color: var(--body-bg-color);
background-image: var(--body-bg-image);
background-attachment: fixed;
}
h1 {
color: #ED64F5;
color: var(--main-heading-color);
}
h1 {
margin-bottom: 1.2rem;
}
h2, h3 {
color: #e8b86f;
color: var(--sub-heading-color);
}
h1 {
font-size: 2.2rem;
border-bottom: 0.18rem solid var(--title-border);
padding-bottom: 0.5rem;
}
h1:not(:first-child) {
padding-top: 2rem;
border-bottom: 0.18rem solid var(--title-border-color);
}
h2 {
font-size: 1.7rem;
}
strong {
color: #ff9933;
article h2,
article h3 {
margin-top: 1.5rem;
}
span.monospace {
p {
padding: 0.5rem 0;;
}
strong {
color: var(--bold-font-color);
}
a {
font-weight: 700;
color: var(--link-color);
}
a:hover {
color: var(--link-hover-color);
}
blockquote {
margin: 1.5rem 0;
padding: 0.5rem 1rem;
border-inline-start: 0.1rem solid var(--main-heading-color);
background-color: var(--quote-bg);
}
pre {
white-space: pre-wrap;
overflow-x: auto;
}
/* HEADER */
header {
width: 100vw;
max-height: 20rem;
background-color: var(--header-bg-color);
/* background: var(--header-img); */
background-repeat: no-repeat;
background-size: auto;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
}
header img {
object-fit: contain;
height: 100%;
}
/* NAVIGATION BAR */
nav {
background: var(--nav-bg);
padding: 0 0.9rem;
width: 100%;
z-index: 999;
}
nav a {
color: var(--nav-link);
text-decoration: none;
cursor: pointer;
}
.nav__menu,
.nav__submenu {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.nav__title {
font-size: 20px;
padding: 0.2rem 0;
}
.nav__item {
padding: 0.6rem;
}
.nav__item a:hover,
.nav__item a:hover::after {
color: var(--nav-item-hover);
}
/* Mobile nav__menu */
.nav__menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.nav__menu li a {
display: block;
padding: 0.9rem 0.8rem;
}
.nav__menu li.nav__subitem a {
padding: 0.9rem;
}
.nav__toggle {
order: 1;
font-size: 1.25rem;
}
.nav__item {
order: 3;
width: 100%;
text-align: center;
display: none;
}
.nav__active .nav__item {
display: block;
}
/* nav__submenu up from mobile screens */
.nav__submenu {
display: none;
}
.nav__submenu-active .nav__submenu {
display: block;
}
.nav__has-submenu i {
font-size: 0.75rem;
}
.nav__has-submenu > a::after {
font-family: "Font Awesome 5 Free";
font-size: 0.75rem;
line-height: 1.6;
font-weight: 900;
content: "\f078";
color: white;
padding-left: 0.3125rem;
}
.nav__subitem a {
padding: 0.625rem 0.9rem;
}
.nav__submenu-active {
background-color: var(--nav-submenu-active);
border-radius: 0.1875rem;
}
/* Added to the navbar with JS when it reaches its scroll position */
.sticky-nav {
position: fixed;
width: 100vw;
top: 0;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky-nav + main {
padding-top: 3.75rem;
}
/* Tablet nav__menu */
@media all and (min-width: 43.75rem) {
.nav__menu {
justify-content: center;
}
.nav__title {
flex: 1;
}
.nav__toggle {
flex: 1;
text-align: right;
order: 2;
}
}
/* Desktop nav__menu */
@media all and (min-width: 60rem) {
.nav__menu {
align-items: flex-start;
flex-wrap: nowrap;
background: none;
}
.nav__title {
order: 0;
}
.nav__item {
order: 1;
position: relative;
display: block;
width: auto;
}
.nav__submenu-active .nav__submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background: var(--nav-submenu-active);
}
.nav__toggle {
display: none;
}
.nav__submenu-active {
border-radius: 0;
}
}
/* MAIN CONTENT */
main, .content-container {
gap: 0.8rem;
display: flex;
flex-direction: column;
width: 100%;
}
main {
font-size: 1.2rem;
}
article, .content-section {
background-color: var(--content-bg-color);
padding: 1.35rem;
}
.article-section {
padding: 1.25rem 0;
}
aside {
padding: 1rem;
font-size: 0.9rem;
background-color: var(--content-bg-color);
}
article, .content-container {
order: 1;
}
.left-sidebar {
order: 2;
}
.right-sidebar {
order: 3;
}
/* Tablet main content layout */
@media only screen and (min-width: 43.75rem) {
main {
flex-direction: row;
}
aside {
width: 10rem;
}
article, .content-container {
flex: 1;
order: 2;
}
.left-sidebar {
order: 1;
}
.right-sidebar {
order: 3;
}
}
/* Desktop main content layout */
@media only screen and (min-width: 60rem) {
main {
width: 60rem;
display: flex;
flex-direction: row;
justify-content: center;
}
aside {
width: 13rem;
}
}
/* CONTENT ELEMENTS WITH CUSTOM CLASSES */
.inline-code {
font-family: monospace;
border: 0.06rem solid var(--code-border);
border: 0.06rem solid var(--code-border-color);
padding: 0.125rem 0.3rem;
margin-left: 0.125rem;
margin-right: 0.125rem;
background-color: var(--code-bg);
background-color: var(--code-bg-color);
}
.code-snippet {
background-color: var(--code-bg);
border: 0.06rem solid var(--code-border);
background-color: var(--code-bg-color);
border: 0.08rem solid var(--code-border-color);
display: block;
padding: 0.5em;
padding: 0.5em 0.8rem;
overflow-x: auto;
word-break: break-all;
word-break: keep-all;
}
.box {
background-color: #13092D;
border: 0.06rem solid #ED64F5;
.text-box {
background-color: var(--quote-bg);
border: 0.06rem solid var(--main-heading-color);
padding: 0.625rem;
margin-bottom: 0.8rem;
}
.link-btn {
font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
display: inline-block;
border: 0.15rem solid var(--link-btn-bg);
border-radius: 0.6rem;
padding: 0.75rem 1rem;
background-color: var(--link-btn-bg);
color: var(--link-btn-text);
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
}
.link-btn,
.link-btn:hover,
.link-btn:visited {
text-decoration: none;
}
.link-btn:hover {
cursor: pointer;
background-color: var(--link-btn-hover);
transition: 0.5s;
}
.full-width-youtube-video {
@ -108,194 +518,36 @@ span.monospace {
height: 100%;
}
/* CONTAINER for wrapping the entire website */
#container {
max-width: 1100px;
/* the width of the layout */
/* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
margin: 0 auto;
/* this centers the entire page */
}
/* For all links on your page EXCEPT for the navigation */
#container a {
color: #ED64F5;
font-weight: bold;
}
#header {
width: 100%;
background-color: #13092D;
height: 22rem;
background-image: var(--header-image);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
/* NAVIGATION SECTION */
#navbar {
height: 2.5rem;
background-color: #13092D;
width: 100%;
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding-top: 0.625rem;
}
#navbar li a {
color: #ED64F5;
/* navbar text color */
font-weight: 800;
text-decoration: none;
/* this removes the underline */
}
#navbar li a:hover {
color: #a49cba;
text-decoration: underline;
}
#flex {
display: flex;
}
/* EXTRAS */
#topBar {
width: 100%;
height: 1.875rem;
padding: 0.625rem;
font-size: smaller;
background-color: #13092D;
}
/* MAIN CONTENT AREA, between the sidebars */
main {
background-color: #3d2163;
font-size: 1.2rem;
flex: 1;
padding: 1.25rem;
order: 2;
}
/* This colors BOTH sidebars
If you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
background-color: #241445;
width: 12.5rem;
padding: 20px;
font-size: smaller;
/* this makes the sidebar text slightly smaller */
}
aside h1, aside h2, aside h3 {
margin-bottom: 0;
}
aside ul {
margin-top: 0.5rem;
}
aside .box ul {
padding-left: 0.625rem;
}
#leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
.sidebar-content {
position: sticky;
top: 0;
font-size: 0.9rem;
}
/* TABLE OF CONTENTS */
.sidebar__toc {
position: sticky;
top: 5rem;
}
.toc-title {
.sidebar__toc-title {
font-size: 1.3rem;
font-weight: bold;
}
.toc-list {
.sidebar__toc-list {
list-style: none;
margin-left: 0;
padding-left: 0;
font-size: 1rem;
}
.toc-list li {
.sidebar__toc-list li {
margin-bottom: 0.5em;
}
/* SIDEBAR NAVIGATION LINKS */
.nav-links {
.sidebar__toc-list ul {
padding-left: 1.25rem;
font-size: 1rem;
margin-top: 0;
list-style-image: url(./assets/arrow-list.png);
}
/* FOOTER */
footer {
background-color: #13092D;
width: 100%;
height: 2.5rem;
padding: 0.625rem;
background-color: var(--footer-bg);
width: 100vw;
padding: 0.5rem;
text-align: center;
margin-top: 0;
}
/* MEDIA QUERY STARTS HERE */
/* To keep things responsive,
if you want to change the width of your page,
take your new width of the #container, and then subtrack it by 100.
Use this new number as the "max-width" value below */
@media only screen and (max-width: 1000px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
/* the order of the items is adjusted here for responsiveness.
since the sidebars would be too small on a mobile device. */
main {
order: 2;
}
#leftSidebar {
order: 3;
}
#rightSidebar {
order: 1;
}
#navbar ul {
flex-wrap: wrap;
}
}

63
main.js
View File

@ -1,63 +0,0 @@
var currentPath = window.location.pathname;
/* --- SCRIPT FOR THE RIGHT SIDEBAR --- */
// HTML template for the right sidebar
var leftSidebarHTML = `
<h2>Navigation</h2>
<ul class="nav-links"></ul>
`;
document.querySelector("#leftSidebarContent").innerHTML = leftSidebarHTML;
// Variables for the list of navigation links
var navList = "";
var navLinks = [
`<li><a href="/home.html">Home</a></li>`,
`<li><a href="/about">About</a></li>`,
`<li><a href="/blog">Blog</a></li>`,
`<li><a href="/articles">Articles</a></li>`,
`<li><a href="/mycreations">My Creations</a></li>`,
`<li><a href="/mymods">My Mods</a></li>`,
`<li><a href="/playlists">Playlists</a></li>`,
`<li><a href="/featured">Featured</a></li>`,
`<li><a href="/resources">Resources</a></li>`,
`<li><a href="/shrines">Shrines</a></li>`,
`<li><a href="/links">Links</a></li>`,
`<li><a href="/changelog">Changelog</a></li>`,
`<li><a href="/sitemap.html">Site Map</a></li>`
];
// To show subpage links when visiting certain pages
if (currentPath.includes("mymods/")) {
navLinks.splice(6, 0, `
<ul>
<li><a href="/mymods/kotor1mods">KotOR 1</a></li>
<li><a href="/mymods/kotor2mods">KotOR 2</a></li>
</ul>
`);
}
if (currentPath.includes("changelog/")) {
navLinks.splice(12, 0, `
<ul>
<li><a href="/changelog/2022.html">2022</a></li>
<li><a href="/changelog/layouts.html">Layout Archive</a></li>
</ul>
`);
}
// Go through the list of navigation link and display them
for (let i = 0; i < navLinks.length; i++) {
navList += navLinks[i];
}
document.querySelector(".nav-links").innerHTML = navList;
/* --- SCRIPT FOR THE FOOTER --- */
// Generate footer content
var footerHTML = `
Site Launched: September 11, 2022 by Leilukin
`;
document.querySelector("#footer").innerHTML = footerHTML;

42
mycreations/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,42 +12,40 @@
<meta property="og:description" content="Links to my works not are not featured on this website.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>My Creations | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent">
</div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>My Creations</h1>
<h2>Drawings</h2>
<p>My drawings can be found on my art blog on Tumblr:</p>
<a href="https://leilukinart.tumblr.com/" target="_blank"><button class="linkBtn">🎨 Leilukin's Art Blog</button></a>
</main>
<a class="link-btn" href="https://leilukinart.tumblr.com/" target="_blank">🎨 Leilukin's Art Blog</a>
</section>
</div>
</div>
<footer id="footer"></footer>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
<footer-component></footer-component>
</body>
</html>

21
mycreations/mycreations.css
View File

@ -1,21 +0,0 @@
@import url("/main.css");
.linkBtn {
font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
border: 0.125rem solid #BA6FE8;
border-radius: 10px;
padding: 0.75rem 1rem;
margin: 0.25em 0.15em;
background-color: #241445;
color: #BA6FE8;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
}
.linkBtn:hover {
cursor:pointer;
color: white;
background-color: #BA6FE8;
transition: 0.5s;
}

45
mymods/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,48 +12,45 @@
<meta property="og:description" content="Video game modifications I have made.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="mymods.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>My Video Game Mods | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent">
</div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>My Video Game Mods</h1>
<center>
<a href="./kotor1mods"><img src="./my-kotor1-mods-header.png" width="100%" height="auto" alt="Banner of Leilukin's mods for Star Wars: Knights of the Old Republic"></a>
<a href="./kotor1mods" class="indexLink">Star Wars: Knights of the Old Republic</a><br><br>
<a href="./kotor1mods" class="index-link">Star Wars: Knights of the Old Republic</a><br><br>
<a href="./kotor2mods"><img src="./my-kotor2-mods-header.png" width="100%" height="auto" alt="Banner of Leilukin's mods for Star Wars: Knights of the Old Republic II: The Sith Lords"></a>
<a href="./kotor2mods" class="indexLink">Star Wars: Knights of the Old Republic II: The Sith Lords</a>
<a href="./kotor2mods" class="index-link">Star Wars: Knights of the Old Republic II: The Sith Lords</a>
</center>
</main>
</section>
</div>
</div>
<footer id="footer"></footer>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
<footer-component></footer-component>
</body>
</html>

134
mymods/kotor1mods/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -13,198 +13,190 @@
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="../mymods.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<script src="../mod-filter.js" defer></script>
<title>My KotOR 1 Mods | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent">
</div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>My Mods for <em>Star Wars: Knights of the Old Republic</em></h1>
<p>Categories:</p>
<div id="myBtnContainer">
<button class="filterBtn active" onclick="filterSelection('all')">All</button>
<button class="filterBtn" onclick="filterSelection('pc-party-members')">Player & Party Members</button>
<button class="filterBtn" onclick="filterSelection('npcs')">NPCs</button>
<button class="filterBtn" onclick="filterSelection('gameplay')">Gameplay</button>
<button class="filterBtn" onclick="filterSelection('music')">Music</button>
<button class="filter-btn active" onclick="filterSelection('all')">All</button>
<button class="filter-btn" onclick="filterSelection('pc-party-members')">Player & Party Members</button>
<button class="filter-btn" onclick="filterSelection('npcs')">NPCs</button>
<button class="filter-btn" onclick="filterSelection('gameplay')">Gameplay</button>
<button class="filter-btn" onclick="filterSelection('music')">Music</button>
</div>
</section>
<div class="mod-list">
<div class="filterDiv pc-party-members">
<section class="content-section filter-div pc-party-members">
<h2>Player & Party Members</h2>
<div class="mod-entry">
<h3>Juhani Dialogue Restoration</h3>
<img src="./img/Juhani-Dialogue-Restoration.png" width="100%" height="auto" alt="Banner of Juhani Dialogue Restoration mod"><br>
<p>Restores Juhani's conversations with the player that are unused or easy to miss in vanilla KotOR.</p>
<a href="https://deadlystream.com/files/file/2173-juhani-dialogue-restoration/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1501" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2173-juhani-dialogue-restoration/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1501" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Carth Onasi and Male PC Romance</h3>
<img src="./img/Carth-Onasi-and-Male-PC-Romance.png" width="100%" height="auto" alt="Banner of Carth Onasi and Male PC Romance mod"><br>
<p>Makes Carth Onasi's romance subplot available for male player characters.</p>
<a href="https://deadlystream.com/files/file/2140-carth-onasi-and-male-pc-romance/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1493" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2140-carth-onasi-and-male-pc-romance/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1493" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Bastila and Carth Romance Removal</h3>
<img src="./img/Bastila-and-Carth-Romance-Removal.png" width="100%" height="auto" alt="Banner of Bastila and Carth Romance Removal mod"><br>
<p>Removes Bastila and Carth's romance by removing all romance-related dialogue from their conversations.</p>
<a href="https://deadlystream.com/files/file/2209-bastila-and-carth-romance-removal/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1519" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2209-bastila-and-carth-romance-removal/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1519" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Leilukin's Juhani's Outfit Reskin Pack</h3>
<img src="./img/Leilukins-Juhanis-Outfit-Reskin-Pack.png" width="100%" height="auto" alt="Banner of Leilukin's Juhani's Outfit Reskin Pack mod"><br>
<p>Reskins Juhani's outfit by changing the outfit's color scheme, with multiple versions of reskin provided.</p>
<a href="https://deadlystream.com/files/file/2275-leilukins-juhanis-outfit-reskin-pack/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1543" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2275-leilukins-juhanis-outfit-reskin-pack/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1543" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Jolee in Unique Outfit Introduction</h3>
<img src="./img/Jolee-in-Unique-Outfit-Introduction.png" width="100%" height="auto" alt="Banner of Jolee in Unique Outfit Introduction mod"><br>
<p>Makes Jolee Bindo wear his signature robe when you meet him on Kashyyyk, before he joins your party.</p>
<a href="https://deadlystream.com/files/file/1298-jolee-in-unique-outfit-introduction/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1221" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/1298-jolee-in-unique-outfit-introduction/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1221" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>KotOR 1 Improved Party Outfits</h3>
<img src="./img/KotOR-1-Improved-Party-Outfits.png" width="100%" height="auto" alt="Banner of KotOR 1 Improved Party Outfits mod"><br>
<p>Adds new items to improve the properties of the default outfits of the human and humanoid party members of TSL, namely Bastila, Canderous, Carth, Jolee, Juhani and Mission.</p>
<a href="https://deadlystream.com/files/file/2134-kotor-1-improved-party-outfits/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1491" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2134-kotor-1-improved-party-outfits/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1491" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Darth Revan Texture for Star Forge Robes</h3>
<img src="./img/Darth-Revan-Texture-for-Star-Forge-Robes.png" width="100%" height="auto" alt="Banner of Darth Revan Texture for Star Forge Robes mod"><br>
<p>Makes the Star Forge Robes to have the same texture and inventory icon as Darth Revan's Robes.</p>
<a href="https://deadlystream.com/files/file/1076-darth-revan-texture-for-star-forge-robes/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1143" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
</div>
<a class="link-btn" href="https://deadlystream.com/files/file/1076-darth-revan-texture-for-star-forge-robes/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1143" target="_blank">Nexus Mods</a>
</div>
</section>
</div>
<div class="filterDiv npcs">
<section class="content-section filter-div npcs">
<h2>Non-Playable Characters</h2>
<div class="mod-entry">
<h3>KotOR 1 Twi'lek Male NPC Diversity</h3>
<img src="./img/K1-Twilek-Male-NPC-Diversity.png" width="100%" height="auto" alt="Banner of KotOR 1 Twi'lek Male NPC Diversity mod"><br>
<p>Diversifies the appearances of Twi'lek male NPCs in KotOR 1 by giving the named Twi'lek male NPCs different looks instead of the generic NPC looks. </p>
<a href="https://deadlystream.com/files/file/2228-kotor-1-twilek-male-npc-diversity/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1530" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2228-kotor-1-twilek-male-npc-diversity/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1530" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>KotOR 1 Twi'lek Female NPC Diversity</h3>
<img src="./img/K1-Twilek-Female-NPC-Diversity.png" width="100%" height="auto" alt="Banner of KotOR 1 Twi'lek Female NPC Diversity mod"><br>
<p>Diversifies the appearances of Twi'lek female NPCs by giving the named Twi'lek female NPCs different looks instead of the generic NPC looks. </p>
<a href="https://deadlystream.com/files/file/2179-kotor-1-twilek-female-npc-diversity/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1504" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2179-kotor-1-twilek-female-npc-diversity/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1504" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Belaya's Unique Look</h3>
<img src="./img/Belaya-Unique-Look.png" width="100%" height="auto" alt="Banner of Belaya's Unique Look mod"><br>
<p>Gives the NPC Belaya a unique look instead of a generic NPC look.</p>
<a href="https://deadlystream.com/files/file/2146-belayas-unique-look/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1494" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2146-belayas-unique-look/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1494" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Human Xor Restoration</h3>
<img src="./img/Human-Xor-Restoration.png" width="100%" height="auto" alt="Banner of Human Xor Restoration mod"><br>
<p>Restores the original appearance of the NPC Xor in the Xbox version of KotOR, by changing his species from a Twi'lek to a human.</p>
<a href="https://deadlystream.com/files/file/1091-human-xor-restoration/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1155" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/1091-human-xor-restoration/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1155" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Human Xor Unique Look</h3>
<img src="./img/Human-Xor-Unique-Look.png" width="100%" height="auto" alt="Banner of Human Xor Unique Look mod"><br>
<p>Changes the NPC Xor's appearance by making him a human with a unique look to make him different from other human NPCs.</p>
<a href="https://deadlystream.com/files/file/2147-human-xor-unique-look/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1495" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2147-human-xor-unique-look/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1495" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>KotOR 1 No Gendered Dialogue from Male NPCs</h3>
<img src="./img/K1-No-Gendered-Dialogue-Male-NPCs.png" width="100%" height="auto" alt="Banner of KotOR 1 No Gendered Dialogue from Male NPCs mod"><br>
<p>Removes male NPC dialogues that involve them flirting with female player characters or remarking on the female PC's gender or appearance.</p>
<a href="https://deadlystream.com/files/file/2176-kotor-1-no-gendered-dialogue-from-male-npcs/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1502" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2176-kotor-1-no-gendered-dialogue-from-male-npcs/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1502" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>PC Dialogue with Davik's Slaves Change</h3>
<img src="./img/PC-Dialogue-with-Daviks-Slaves-Change.png" width="100%" height="auto" alt="Banner of No Flirting with Davik's Slaves mod"><br>
<p>Removes the option for the player character to flirt with Davik Kang's slaves, or give the player Dark Side options for requesting a massage from the slaves. Threatening the slaves also gives the player Dark Side points.</p>
<a href="https://deadlystream.com/files/file/2214-pc-dialogue-with-daviks-slaves-change/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1523" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
</div>
<a class="link-btn" href="https://deadlystream.com/files/file/2214-pc-dialogue-with-daviks-slaves-change/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1523" target="_blank">Nexus Mods</a>
</div>
</section>
<div class="filterDiv gameplay">
<section class="content-section filter-div gameplay">
<h2>Gameplay</h2>
<div class="mod-entry">
<h3>Trask Ulgo Without Tutorials</h3>
<img src="./img/Trask-Ulgo-Without-Tutorials.png" width="100%" height="auto" alt="Banner of Trask Ulgo Without Tutorials mod"><br>
<p>Removes the tutorial elements from the game, while keeps Trask Ulgo as a party member in the first area of the Endar Spire.</p>
<a href="https://deadlystream.com/files/file/2184-trask-ulgo-without-tutorials/" target="_blank" ><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1508" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
</div>
<a class="link-btn" href="https://deadlystream.com/files/file/2184-trask-ulgo-without-tutorials/" target="_blank" >Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1508" target="_blank">Nexus Mods</a>
</div>
</section>
<div class="filterDiv music">
<section class="content-section filter-div music">
<h2>Music</h2>
<div class="mod-entry">
<h3>Mysterious Box Music for Unknown World</h3>
<img src="./img/Mysterious-Box-Music-for-Unknown-World.png" width="100%" height="auto" alt="Banner of Mysterious Box Music for Unknown World mod"><br>
<p>This mod will make the Mysterious Box's ambient music played in some areas of the Unknown World.</p>
<a href="https://deadlystream.com/files/file/1322-mysterious-box-music-for-unknown-world/" target="_blank" ><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor/mods/1226" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/1322-mysterious-box-music-for-unknown-world/" target="_blank" >Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor/mods/1226" target="_blank">Nexus Mods</a>
</div>
</section>
</div>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>
</h

158
mymods/kotor2mods/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -13,51 +13,44 @@
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="../mymods.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<script src="../mod-filter.js" defer></script>
<title>My KotOR 2 Mods | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent">
</div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>My Mods for <em>Star Wars: Knights of the Old Republic II: The Sith Lords</em></h1>
<p>Categories:</p>
<div id="myBtnContainer">
<button class="filterBtn active" onclick="filterSelection('all')">All</button>
<button class="filterBtn" onclick="filterSelection('same-gender-romances')">Same-Gender Romances</button>
<button class="filterBtn" onclick="filterSelection('party-members')">Party Members</button>
<button class="filterBtn" onclick="filterSelection('npcs')">NPCs</button>
<button class="filterBtn" onclick="filterSelection('items')">Items</button>
<button class="filterBtn" onclick="filterSelection('misc')">Miscellaneous</button>
<button class="filterBtn" onclick="filterSelection('patches')">Patches</button>
<button class="filter-btn active" onclick="filterSelection('all')">All</button>
<button class="filter-btn" onclick="filterSelection('same-gender-romances')">Same-Gender Romances</button>
<button class="filter-btn" onclick="filterSelection('party-members')">Party Members</button>
<button class="filter-btn" onclick="filterSelection('npcs')">NPCs</button>
<button class="filter-btn" onclick="filterSelection('items')">Items</button>
<button class="filter-btn" onclick="filterSelection('misc')">Miscellaneous</button>
<button class="filter-btn" onclick="filterSelection('patches')">Patches</button>
</div>
</section>
<div class="mod-list">
<div class="filterDiv same-gender-romances">
<section class="content-section filter-div same-gender-romances">
<h2>Same-Gender Romances</h2>
<center>
<p class="psa">↓↓READ THIS↓↓ before asking questions about my romance mods!<br>
@ -68,24 +61,24 @@
<h3>Atton Rand and Male Exile Romance</h3>
<img src="./img/Atton-Rand-and-Male-Exile-Romance.png" width="100%" height="auto" alt="Banner of Atton Rand and Male Exile Romance mod"><br>
<p>Makes Atton flirts with and expresses romantic interests for male Exiles.</p>
<a href="https://deadlystream.com/files/file/972-atton-rand-and-male-exile-romance/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/926" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/972-atton-rand-and-male-exile-romance/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/926" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Handmaiden and Female Exile - Disciple and Male Exile Romance</h3>
<img src="./img/Handmaiden-Disciple-Same-Gender-Romances.png" width="100%" height="auto" alt="Banner of Handmaiden and Female Exile - Disciple and Male Exile Romances mod"><br>
<p>Makes the Handmaiden a romance option for female Exiles and the Disciple a romance option for male Exiles.</p>
<a href="https://deadlystream.com/files/file/977-handmaiden-and-female-exile-disciple-and-male-exile-romance/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/927" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/977-handmaiden-and-female-exile-disciple-and-male-exile-romance/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/927" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Visas Marr and Female Exile Romance</h3>
<img src="./img/Visas-Marr-and-Female-Exile-Romance.png" width="100%" height="auto" alt="Banner of Visas Marr and Female Exile Romance mod"><br>
<p>Makes the Visas Marr romance scene available for female Exiles.</p>
<a href="https://deadlystream.com/files/file/968-visas-marr-and-female-exile-romance/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/925" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/968-visas-marr-and-female-exile-romance/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/925" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
@ -93,162 +86,161 @@
<img src="./img/Alternate-Revan-Romances.png" width="100%" height="auto" alt="Banner of Alternate Revan Romances REDUX mod"><br>
<p>Gives players options to set Revan's love ineterest(s), or lack thereof. Updated version of felixfelicitas'
Alternate Revan Romances mod.</p>
<a href="https://deadlystream.com/files/file/1004-alternate-revan-romances-redux/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/933" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/1004-alternate-revan-romances-redux/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/933" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Darth Sion and Male Exile Mod</h3>
<img src="./img/Darth-Sion-and-Male-Exile-Mod.png" width="100%" height="auto" alt="Banner of Darth Sion and Male Exile Mod"><br>
<p>Makes Darth Sion develop the same affections to a male Exile like he did to a female Exile in vanilla KotOR II.</p>
<a href="https://deadlystream.com/files/file/996-darth-sion-and-male-exile-mod/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/928" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/996-darth-sion-and-male-exile-mod/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/928" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Dahnis Flirt Option for Female PC</h3>
<img src="./img/Dahnis-Flirt-Option-for-Female-PC.png" width="100%" height="auto" alt="Banner of Dahnis Flirt Option for Female PC mod"><br>
<p>Makes the NPC Dahnis flirt with the player character regardless of gender, including a female PC. A female PC also gets the option to flirt back.</p>
<a href="https://deadlystream.com/files/file/1400-dahnis-flirt-option-for-female-pc/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/1036" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
</div>
<a class="link-btn" href="https://deadlystream.com/files/file/1400-dahnis-flirt-option-for-female-pc/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/1036" target="_blank">Nexus Mods</a>
</div>
</section>
<div class="filterDiv party-members">
<section class="content-section filter-div party-members">
<h2>Party Members</h2>
<div class="mod-entry">
<h3>Leilukin’s Kreia Reskin</h3>
<img src="./img/Leilukin's-Kreia-Reskin.png" width="100%" height="auto" alt="Banner of Leilukin’s Kreia Reskin mod"><br>
<p>My version of a retexture of Kreia.</p>
<a href="https://deadlystream.com/files/file/1003-leilukins-kreia-reskin/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/932" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/1003-leilukins-kreia-reskin/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/932" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>No Jealousy Lock in Handmaiden Dialogue</h3>
<img src="./img/No-Jealousy-Lock-Handmaiden.png" width="100%" height="auto" alt="Banner of No Jealousy Lock in Handmaiden Dialogue mod"><br>
<p>Allows you to continue to talk to Handmaiden even if you have much higher influence with Visas than with Handmaiden.</p>
<a href="https://deadlystream.com/files/file/2205-no-jealousy-lock-in-handmaiden-dialogue/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/1181" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2205-no-jealousy-lock-in-handmaiden-dialogue/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/1181" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Visas Visible Jedi Robes</h3>
<img src="./img/Visas-Visible-Jedi-Robes.png" width="100%" height="auto" alt="Banner of Visas Visible Jedi Robes mod"><br>
<p>Makes Jedi robes visible on Visas Marr's body when you equip her with one.</p>
<a href="https://deadlystream.com/files/file/2218-visas-visible-jedi-robes/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/1185" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2218-visas-visible-jedi-robes/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/1185" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Love Between Brianna and the Exile - The Sith Lords Restored Content Mod Version</h3>
<img src="./img/Love-Between-Brianna-and-the-Exile-TSLRCM.png" width="100%" height="auto" alt="Banner of Love Between Brianna and the Exile - The Sith Lords Restored Content Mod Version"><br>
<p>Updated version of DarthShgaad's <a href="https://www.gamefront.com/games/knights-of-the-old-republic-ii/file/love-between-brianna-and-the-exile" target="_blank">Love Between Brianna and the Exile</a> mod, made to be more compatible with The Sith Lords Restored Content Mod (TSLRCM).</p>
<a href="https://www.dropbox.com/s/ilntlihyaabthzg/Love%20Between%20Brianna%20And%20The%20Exile%20-%20TSLRCM%20version.zip?dl=0" target="_blank"><button class="linkBtn">Dropbox</button></a>
</div>
<p>Updated version of DarthShgaad's <a class="link-btn" href="https://www.gamefront.com/games/knights-of-the-old-republic-ii/file/love-between-brianna-and-the-exile" target="_blank">Love Between Brianna and the Exile</a> mod, made to be more compatible with The Sith Lords Restored Content Mod (TSLRCM).</p>
<a class="link-btn" href="https://www.dropbox.com/s/ilntlihyaabthzg/Love%20Between%20Brianna%20And%20The%20Exile%20-%20TSLRCM%20version.zip?dl=0" target="_blank">Dropbox</a>
</div>
</section>
<div class="filterDiv npcs">
<section class="content-section filter-div npcs">
<h2>NPCs</h2>
<div class="mod-entry">
<h3>Lonna Vash Mod for TSLRCM</h3>
<img src="./img/Lonna-Vash-Mod-for-TSLRCM.png" width="100%" height="auto" alt="Banner of Lonna Vash Mod for TSLRCM"><br>
<p>Restores Jedi Master Lonna Vash's cut conversation by allowing the player to meet and talk to her in the secret tomb on Korriban. Updated version of Sikon's Lonna Vash Mod, made to be fully compatible with The Sith Lord Restored Content Mod (TSLRCM).</p>
<a href="https://deadlystream.com/files/file/2201-lonna-vash-mod-for-tslrcm/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/1180" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2201-lonna-vash-mod-for-tslrcm/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/1180" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>TSL Twi'lek Male NPC Diversity</h3>
<img src="./img/TSL-Twilek-Male-NPC-Diversity.png" width="100%" height="auto" alt="Banner of TSL Twi'lek Male NPC Diversity mod"><br>
<p>Diversifies the appearances of Twi'lek male NPCs in KotOR 2: TSL by giving the named Twi'lek male NPCs different looks.</p>
<a href="https://deadlystream.com/files/file/2242-tsl-twilek-male-npc-diversity/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/1188" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2242-tsl-twilek-male-npc-diversity/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/1188" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Dahnis Unique Look</h3>
<img src="./img/Dahnis-Unique-Look.png" width="100%" height="auto" alt="Banner of Dahnis Unique Look mod"><br>
<p>Gives the NPC Dahnis a unique appearance to make her look different from other Twi'lek women NPCs.</p>
<a href="https://deadlystream.com/files/file/2198-dahnis-unique-look/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/1178" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
</div>
<a class="link-btn" href="https://deadlystream.com/files/file/2198-dahnis-unique-look/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/1178" target="_blank">Nexus Mods</a>
</div>
</section>
<div class="filterDiv items">
<section class="content-section filter-div items">
<h2>Items</h2>
<div class="mod-entry">
<h3>TSL Improved Party Outfits</h3>
<img src="./img/TSL-Improved-Party-Outfits.png" width="100%" height="auto" alt="Banner of TSL Improved Party Outfits mod"><br>
<p>Adds new items to improve the properties of the default outfits of the human and humanoid party members of KotOR II, namely Atton, Bao-Dur, the Disciple, the Handmaiden, Kreia, Mandalore, Mira and Visas.</p>
<a href="https://deadlystream.com/files/file/1012-tsl-improved-party-outfits/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/934" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/1012-tsl-improved-party-outfits/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/934" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Juhani Item Pack for TSL</h3>
<img src="./img/Juhani-Item-Pack-for-TSL.png" width="100%" height="auto" alt="Banner of Juhani Item Pack for TSL mod"><br>
<p>Adds a new Jedi robe, a new headband and a new armband to In KotOR II: TSL, named after Juhani, with item descriptions that indicate these items once belonged to Juhani. </p>
<a href="https://deadlystream.com/files/file/2244-juhani-item-pack-for-tsl/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/1190" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2244-juhani-item-pack-for-tsl/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/1190" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>Prologue Item Recovery</h3>
<img src="./img/Prologue-Item-Recovery.png" width="100%" height="auto" alt="Banner of Prologue Item Recovery mod"><br>
<p>Allows you to recover the items you obtain from the prologue, regardless if you choose to skip the prologue or not. </p>
<a href="https://deadlystream.com/files/file/2211-prologue-item-recovery/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/1183" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/2211-prologue-item-recovery/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/1183" target="_blank">Nexus Mods</a>
</div>
<div class="mod-entry">
<h3>TSL Workbench Lightsaber Creation</h3>
<img src="./img/TSL-Workbnch-Lightsaber-Creation.png" width="100%" height="auto" alt="Banner of TSL Workbench Lightsaber Creation mod"><br>
<p>Allows you to create lightsabers at a workbench, including double-bladed, one-handed or short lightsabers, with any color focusing crystals available in the game, after completing the quest to craft your first lightsaber.</p>
<a href="https://deadlystream.com/files/file/2197-tsl-workbench-lightsaber-creation/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/1177" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
</div>
<a class="link-btn" href="https://deadlystream.com/files/file/2197-tsl-workbench-lightsaber-creation/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/1177" target="_blank">Nexus Mods</a>
</div>
</section>
<div class="filterDiv misc">
<section class="content-section filter-div misc">
<h2>Miscellaneous</h2>
<div class="mod-entry">
<h3>Exile's Trial Overlay Removal</h3>
<img src="./img/Exiles-Trial-Overlay-Removal.png" width="100%" height="auto" alt="Banner of Exile's Trial Overlay Removal mod"><br>
<p>Removes the blue overlay of the scene of the Exile's trial on Coruscant in The Sith Lords Restored Content Mod (TSLRCM).</p>
<a href="https://deadlystream.com/files/file/2217-exiles-trial-overlay-removal/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a href="https://www.nexusmods.com/kotor2/mods/1184" target="_blank"><button class="linkBtn">Nexus Mods</button></a>
</div>
<a class="link-btn" href="https://deadlystream.com/files/file/2217-exiles-trial-overlay-removal/" target="_blank">Deadly Stream</a>
<a class="link-btn" href="https://www.nexusmods.com/kotor2/mods/1184" target="_blank">Nexus Mods</a>
</div>
</section>
<div class="filterDiv patches">
<section class="content-section filter-div patches">
<h2>Patches</h2>
<div class="mod-entry">
<h3>PartySwap and Extended Enclave Compatibility Patch</h3>
<img src="./img/PartySwap-ExtEnclave-Comp-Patch.png" width="100%" height="auto" alt="Banner of PartySwap and Extended Enclave Compatibility Patch"><br>
<p>A standalone patch to make DarthTyren's <a href="https://deadlystream.com/files/file/544-partyswap/" target="_blank">PartySwap</a> mod compatible with danil-ch and Darth Hayze's <a href="https://deadlystream.com/files/file/428-extended-enclave-tslrcm-add-on/" target="_blank">Extended Enclave</a> mod.</p>
<a href="https://deadlystream.com/files/file/1304-partyswap-and-extended-enclave-compatibility-patch/" target="_blank"><button class="linkBtn">Deadly Stream</button></a>
<a class="link-btn" href="https://deadlystream.com/files/file/1304-partyswap-and-extended-enclave-compatibility-patch/" target="_blank">Deadly Stream</a>
</div>
<div class="mod-entry">
<h3>Remote Tells Influence Patch for The Sith Lords Restored Content Mod</h3>
<img src="./img/Remote-Tells-Influence-Patch.png" width="100%" height="auto" alt="Banner of LRemote Tells Influence Patch for The Sith Lords Restored Content Mod"><br>
<p>A patch to make tk102's <a href="https://www.gamefront.com/games/knights-of-the-old-republic-ii/file/remote-tells-influence" target="_blank">Remote Tells Influence</a> mod more compatible with The Sith Lords Restored Content Mod (TSLRCM).</p>
<a href="https://www.dropbox.com/s/af3h6y793f3zjxq/Remote%20Tells%20Influence%20Patch%20for%20TSLRCM.zip?dl=0" target="_blank"><button class="linkBtn">Dropbox</button></a>
<a class="link-btn" href="https://www.dropbox.com/s/af3h6y793f3zjxq/Remote%20Tells%20Influence%20Patch%20for%20TSLRCM.zip?dl=0" target="_blank">Dropbox</a>
</div>
</section>
</div>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>
</h

24
mymods/mod-filter.js
View File

@ -1,18 +1,18 @@
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
let x, i;
x = document.getElementsByClassName("filter-div");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
// Add the "show-items" class (display:block) to the filtered elements, and remove the "show-items" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
w3RemoveClass(x[i], "show-items");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show-items");
}
}
// Show filtered elements
// show-items filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
let i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
@ -24,7 +24,7 @@ function w3AddClass(element, name) {
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
let i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
@ -36,11 +36,11 @@ function w3RemoveClass(element, name) {
}
// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("filterBtn");
for (var i = 0; i < btns.length; i++) {
let btnContainer = document.getElementById("myBtnContainer");
let btns = btnContainer.getElementsByClassName("filter-btn");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
let current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});

42
mymods/mymods.css
View File

@ -1,6 +1,4 @@
@import url("/main.css");
.indexLink {
.index-link {
font-size: 1.6rem;
}
@ -17,20 +15,16 @@
padding: 1em 1.5em 1.5em 1.5em;
}
.mod-list {
overflow: hidden;
}
.filterDiv {
.filter-div {
display: none; /* Hidden by default */
}
/* The "show" class is added to the filtered elements */
.show {
/* The "show-items" class is added to the filtered elements */
.show-items {
display: block;
}
.filterBtn {
.filter-btn {
border: none;
outline: none;
padding: 0.75rem 1rem;
@ -38,35 +32,15 @@
background-color: #d3aad5;
color: #241445;
cursor: pointer;
font-weight: 600;
font-weight: 800;
font-size: 1.1rem;
}
.filterBtn:hover {
.filter-btn:hover {
background-color: #d5c2d6;
}
.filterBtn.active {
.filter-btn.active {
background-color: #241445;
color: #ED64F5;
}
.linkBtn {
font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
border: 0.125rem solid #BA6FE8;
border-radius: 0.6rem;
padding: 0.75rem 1rem;
margin: 0.25em 0.15em;
background-color: #241445;
color: #BA6FE8;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
}
.linkBtn:hover {
cursor:pointer;
color: white;
background-color: #BA6FE8;
transition: 0.5s;
}

54
playlists/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,34 +12,33 @@
<meta property="og:description" content="Music playlists that I have compiled myself.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="playlists.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Playlists | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent">
</div>
<header-component></header-component>
<main>
<aside class="left-sidebar">
<div class="sidebar__toc">
<h3 class="sidebar__toc-title">Contents</h3>
<ul class="sidebar__toc-list">
<li><a href="#My-Dear-Summer-Lover">My Dear Summer Lover</a></li>
<li><a href="#Mandopop-LGBTQ-Anthem">Mandopop LGBTQ+ Anthem</a></li>
</ul>
</div>
</aside>
<main>
<article>
<h1>Leilukin's Music Playlists</h1>
<h2 id="My-Dear-Summer-Lover">My Dear Summer Lover</h2>
<img src="./img/My-Dear-Summer-Lover-cover.png" width="400px" height="400px" alt="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'">
@ -50,7 +49,7 @@
<p>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.</p>
<a href="https://open.spotify.com/playlist/3SIV7VjSKhspYwugVIQjug" target="_blank"><button class="linkBtn">Listen on Spotify</button></a><br><br>
<a class="link-btn" href="https://open.spotify.com/playlist/3SIV7VjSKhspYwugVIQjug" target="_blank">Listen on Spotify</a><br><br>
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/3SIV7VjSKhspYwugVIQjug?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
<hr>
@ -60,23 +59,14 @@
<p>Collection of Mandarin queer anthems.</p>
<p>I made this playlist after discovering Wikipedia's list of Chinese queer anthems on <a href="https://zh.wikipedia.org/wiki/%E5%90%8C%E5%BF%97%E5%9C%8B%E6%AD%8C#%E8%8F%AF%E8%AA%9E" target="_blank">its Mandarin article for Gay Anthem (同志國歌)</a>.</p>
<a href="https://open.spotify.com/playlist/5JXAUPZkmv1cFScAfhOkXh" target="_blank"><button class="linkBtn">Listen on Spotify</button></a><br><br>
<a class="link-btn" href="https://open.spotify.com/playlist/5JXAUPZkmv1cFScAfhOkXh" target="_blank">Listen on Spotify</a><br><br>
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/5JXAUPZkmv1cFScAfhOkXh?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</article>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
<aside id="rightSidebar">
<div class="sidebar-content">
<h3 class="toc-title">Contents</h3>
<ul class="toc-list">
<li><a href="#My-Dear-Summer-Lover">My Dear Summer Lover</a></li>
<li><a href="#Mandopop-LGBTQ-Anthem">Mandopop LGBTQ+ Anthem</a></li>
</ul>
</div>
</aside>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

21
playlists/playlists.css
View File

@ -1,21 +0,0 @@
@import url("/main.css");
.linkBtn {
font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
border: 0.125rem solid #BA6FE8;
border-radius: 0.6rem;
padding: 0.75rem 1rem;
margin: 0.25em 0.15em;
background-color: #241445;
color: #BA6FE8;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
}
.linkBtn:hover {
cursor:pointer;
color: white;
background-color: #BA6FE8;
transition: 0.5s;
}

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,33 +12,27 @@
<meta property="og:description" content="My masterlist of criticisms of the Harry Potter series and J.K. Rowling.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Anti-Harry Potter and Anti-J. K. Rowling Masterlist | Resources | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent">
</div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>Anti-Harry Potter and Anti-J.K. Rowling Masterlist</h1>
<center><p>First published on March 19, 2023<br>Last updated on April 15, 2023</p></center>
@ -78,10 +72,12 @@
<ul>
<li><a href="https://soundcloud.com/shriekingshack" target="_blank">The Shrieking Shack</a> — A book reading podcast hosted by Xeecee and Liz. Originally a <em>Harry Potter</em> reread podcast made by and for lapsed fans that goes through every chapter of the <em>Harry Potter</em> books and their film adaptations and analyses the writing and politics of the series and J.K. Rowling.</li>
</ul>
</main>
</article>
</div>
<footer id="footer"></footer>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
<footer-component></footer-component>
</body>
</html>

45
resources/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,42 +12,40 @@
<meta property="og:description" content="List of resources I have compiled myself.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Resources | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent">
</div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>Resources</h1>
<p>Here are resources I have compiled myself.</p>
</section>
<section class="content-section">
<h2>Leilukin's Masterlists</h2>
<ul>
<li><a href="./anti-harry-potter-jk-rowling-masterlist.html">Anti-Harry Potter and Anti-J.K. Rowling Masterlist</a></li>
</ul>
</section>
<section class="content-section">
<h2>Leilukin's Mod Builds</h2>
<p>Lists of video game mods I use for my own playthroughs.</p>
<ul>
@ -56,10 +54,13 @@
<li><a href="https://docs.google.com/document/d/15HbD-k-D8WHrp10IjIryAguhq7k2W94pkuGys7Z7xNM/edit" target="_blank">Star Wars: Knights of the Old Republic II: The Sith Lords</a></li>
<li><a href="https://docs.google.com/document/d/1LMMd3yRtLYb35A7oNEN1hRUsoe9-vo2MfMxcM2Wq0MI/edit" target="_blank">Stardew Valley</a></li>
</ul>
</main>
</section>
</div>
</div>
<footer id="footer"></footer>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
<footer-component></footer-component>
</body>
</html>

736
shrines/asummersend/asummersend.css
View File

@ -1,18 +1,36 @@
:root {
--header-image: url('./img/asummersend_header.png');
--body-color: #fceaff;
--body-bg: #1f0033;
--content-bg: #000000;
--content: #43256E;
--title-color: #FF29D8;
--title-border: #d3aad5;
--code-bg: #241445;
--code-border: #82668f;
--body-bg-color: #1f0033;
/* --body-bg-image: url('/assets/starsforever.gif'); */
--body-font-color: #fceaff;
--content-bg-color: #000000;
--main-heading-color: #FF29D8;
--sub-heading-color: #FF29D8;
--title-border-color: #d3aad5;
--bold-font-color: #ff9933;
--link-color: #d270ff;
--link-hover: #7E4197;
--blockquote-bg: #222121;
--blockquote-border: #4d4385;
--box-bg: #13092D;
--link-hover-color: #7E4197;
--quote-bg: #222121;
--quote-border-color: #4d4385;
--code-bg-color: #241445;
--code-border-color: #82668f;
--link-btn-bg: #873eb5;
--link-btn-text: white;
--link-btn-hover: #241445;
--header-bg-color: black;
--nav-bg: #101010;
--nav-link: white;
--nav-submenu-active: #111;
--nav-item-hover: #ccc;
--top-btn-bg: #251347;
--top-btn-icon: #d3aad5;
--footer-bg: #101010;
}
@font-face {
@ -31,106 +49,461 @@
font-style: italic;
}
html,
body {
scroll-behavior: smooth;
}
body {
font-family: 'Nunito', Arial, sans-serif;
font-size: 1rem; /* 16px */
margin: 0;
background-color: var(--body-bg);
background-size: 4rem;
color: var(--body-color);
background-image: var(--body-bg-image);
background-attachment: fixed;
line-height: 1.6;
}
* {
/* CSS RESET */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3 {
color: var(--title-color);
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* STYLING BEGINS */
body {
display: flex;
align-items: center;
flex-direction: column;
font-family: 'Nunito';
color: var(--body-font-color);
background-color: var(--body-bg-color);
background-image: var(--body-bg-image);
background-attachment: fixed;
}
h1 {
color: var(--main-heading-color);
}
h1 {
margin-bottom: 1.2rem;
}
h2, h3 {
color: var(--sub-heading-color);
}
h1 {
font-size: 2.2rem;
border-bottom: 0.18rem solid var(--title-border);
padding-bottom: 0.5rem;
}
h1:not(:first-child) {
padding-top: 30px;
border-bottom: 0.18rem solid var(--title-border-color);
}
h2 {
font-size: 1.7rem;
}
strong {
color: var(--title-color);
article h2,
article h3 {
margin-top: 1.5rem;
}
hr {
width: 75%;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
p {
padding: 0.5rem 0;;
}
strong {
color: var(--bold-font-color);
}
a {
font-weight: 700;
color: var(--link-color);
}
a:hover {
color: var(--link-hover-color);
}
blockquote {
border-left: var(--blockquote-border) 3px solid;
background: var(--blockquote-bg);
padding: 0 0.75rem;
margin: 0 1.5rem;
margin: 1.5rem 0;
padding: 0.5rem 1rem;
border-inline-start: 0.1rem solid var(--main-heading-color);
background-color: var(--quote-bg);
}
.linkBtn {
font: 1.1rem 'Source Sans Pro', Arial, sans-serif;
border: 0.125rem solid var(--link-color);
border-radius: 10px;
padding: 0.75rem 1rem;
margin: 0.25em 0.15em;
pre {
white-space: pre-wrap;
overflow-x: auto;
}
/* HEADER */
header {
width: 100vw;
max-height: 20rem;
background-color: var(--header-bg-color);
/* background: var(--header-img); */
background-repeat: no-repeat;
background-size: auto;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
}
header img {
object-fit: contain;
height: 100%;
}
/* NAVIGATION BAR */
nav {
background: var(--nav-bg);
padding: 0 0.9rem;
width: 100%;
z-index: 999;
}
nav a {
color: var(--nav-link);
text-decoration: none;
cursor: pointer;
}
.nav__menu,
.nav__submenu {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.nav__title {
font-size: 20px;
padding: 0.2rem 0;
}
.nav__item {
padding: 0.6rem;
}
.nav__item a:hover,
.nav__item a:hover::after {
color: var(--nav-item-hover);
}
/* Mobile nav__menu */
.nav__menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.nav__menu li a {
display: block;
padding: 0.9rem 0.8rem;
}
.nav__menu li.nav__subitem a {
padding: 0.9rem;
}
.nav__toggle {
order: 1;
font-size: 1.25rem;
}
.nav__item {
order: 3;
width: 100%;
text-align: center;
display: none;
}
.nav__active .nav__item {
display: block;
}
/* nav__submenu up from mobile screens */
.nav__submenu {
display: none;
}
.nav__submenu-active .nav__submenu {
display: block;
}
.nav__has-submenu i {
font-size: 0.75rem;
}
.nav__has-submenu > a::after {
font-family: "Font Awesome 5 Free";
font-size: 0.75rem;
line-height: 1.6;
font-weight: 900;
content: "\f078";
color: white;
padding-left: 0.3125rem;
}
.nav__subitem a {
padding: 0.625rem 0.9rem;
}
.nav__submenu-active {
background-color: var(--nav-submenu-active);
border-radius: 0.1875rem;
}
/* Added to the navbar with JS when it reaches its scroll position */
.sticky-nav {
position: fixed;
width: 100vw;
top: 0;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky-nav + main {
padding-top: 3.75rem;
}
/* Tablet nav__menu */
@media all and (min-width: 43.75rem) {
.nav__menu {
justify-content: center;
}
.nav__title {
flex: 1;
}
.nav__toggle {
flex: 1;
text-align: right;
order: 2;
}
}
/* Desktop nav__menu */
@media all and (min-width: 60rem) {
.nav__menu {
align-items: flex-start;
flex-wrap: nowrap;
background: none;
color: var(--link-color);
}
.nav__title {
order: 0;
}
.nav__item {
order: 1;
position: relative;
display: block;
width: auto;
}
.nav__submenu-active .nav__submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background: var(--nav-submenu-active);
}
.nav__toggle {
display: none;
}
.nav__submenu-active {
border-radius: 0;
}
}
/* MAIN CONTENT */
main, .content-container {
gap: 0.8rem;
display: flex;
flex-direction: column;
width: 100%;
}
main {
font-size: 1.2rem;
}
article, .content-section {
background-color: var(--content-bg-color);
padding: 1.35rem;
}
.article-section {
padding: 1.25rem 0;
}
aside {
padding: 1rem;
font-size: 0.9rem;
background-color: var(--content-bg-color);
}
article, .content-container {
order: 1;
}
.left-sidebar {
order: 2;
}
.right-sidebar {
order: 3;
}
/* Tablet main content layout */
@media only screen and (min-width: 43.75rem) {
main {
flex-direction: row;
}
aside {
width: 10rem;
}
article, .content-container {
flex: 1;
order: 2;
}
.left-sidebar {
order: 1;
}
.right-sidebar {
order: 3;
}
}
/* Desktop main content layout */
@media only screen and (min-width: 60rem) {
main {
width: 60rem;
display: flex;
flex-direction: row;
justify-content: center;
}
aside {
width: 13rem;
}
}
/* CONTENT ELEMENTS WITH CUSTOM CLASSES */
.inline-code {
font-family: monospace;
border: 0.06rem solid var(--code-border-color);
padding: 0.125rem 0.3rem;
margin-left: 0.125rem;
margin-right: 0.125rem;
background-color: var(--code-bg-color);
}
.code-snippet {
background-color: var(--code-bg-color);
border: 0.08rem solid var(--code-border-color);
display: block;
padding: 0.5em 0.8rem;
overflow-x: auto;
word-break: keep-all;
}
.text-box {
background-color: var(--quote-bg);
border: 0.06rem solid var(--main-heading-color);
padding: 0.625rem;
margin-bottom: 0.8rem;
}
.link-btn {
font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
display: inline-block;
border: 0.15rem solid var(--link-btn-bg);
border-radius: 0.6rem;
padding: 0.75rem 1rem;
background-color: var(--link-btn-bg);
color: var(--link-btn-text);
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
}
.linkBtn:hover {
.link-btn,
.link-btn:hover,
.link-btn:visited {
text-decoration: none;
}
.link-btn:hover {
cursor: pointer;
color: white;
background-color: var(--link-color);
background-color: var(--link-btn-hover);
transition: 0.5s;
}
span.monospace {
font-family: monospace;
border: 1px solid var(--code-border);
padding: 2px;
background-color: var(--code-bg);
}
.code-snippet {
background-color: var(--code-bg);
border: 1px solid var(--code-border);
display: block;
padding: 0.5em;
overflow-x: auto;
word-break: break-all;
}
.box {
background-color: var(--box-bg);
border: 1px solid var(--title-color);
padding: 10px;
}
.full-width-youtube-video {
position: relative;
padding-bottom: 56.25%;
@ -145,211 +518,36 @@ span.monospace {
height: 100%;
}
/* CONTAINER for wrapping the entire website */
#container {
max-width: 1100px;
/* the width of the layout */
/* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
margin: 0 auto;
/* this centers the entire page */
}
/* For all links on your page EXCEPT for the navigation */
#container a {
color: var(--link-color);
font-weight: bold;
}
#container a:hover {
color: var(--link-hover);
}
#header {
width: 100%;
background-color: var(--content-bg);
height: 480px;
background-image: var(--header-image);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
/* NAVIGATION SECTION */
.sticky-nav {
position: fixed;
top: 0;
max-width: 1100px;
}
#navbar {
height: 2.5rem;
background-color: var(--content-bg);
width: 100%;
margin-bottom: 0.625rem;
z-index: 999;
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding-top: 0.625rem;
}
#navbar li a {
color: var(--link-color);
/* navbar text color */
font-weight: 800;
text-decoration: none;
/* this removes the underline */
}
#navbar li a:hover {
color: var(--link-hover);
text-decoration: underline;
}
#flex {
display: flex;
}
/* EXTRAS */
#topBar {
width: 100%;
height: 1.875rem;
padding: 0.625rem;
font-size: smaller;
background-color: var(--box-bg);
}
/* MAIN CONTENT AREA, between the sidebars */
main {
font-size: 1.2rem;
flex: 1;
order: 2;
}
.content-section {
background-color: var(--content-bg);
padding: 1.25rem;
}
.content-section:not(:first-child) {
margin-top: 0.625rem;
}
/* This colors BOTH sidebars
If you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
background-color: var(--content-bg);
width: 12.5rem;
padding: 1.25rem;
font-size: smaller;
/* this makes the sidebar text slightly smaller */
}
aside h1, aside h2, aside h3 {
margin-bottom: 0;
}
aside ul {
margin-top: 0.5rem;
}
aside .box ul {
padding-left: 1.25rem;
}
#leftSidebar {
order: 1;
margin-right: 1.25rem;
}
#rightSidebar {
order: 3;
margin-left: 1.25rem;
}
.sidebar-content {
position: sticky;
top: 40px;
font-size: 0.9rem;
}
/* TABLE OF CONTENTS */
.sidebar__toc {
position: sticky;
top: 5rem;
}
.toc-title {
.sidebar__toc-title {
font-size: 1.3rem;
font-weight: bold;
}
.toc-list {
.sidebar__toc-list {
list-style: none;
margin-left: 0;
padding-left: 0;
font-size: 1rem;
}
.toc-list li {
.sidebar__toc-list li {
margin-bottom: 0.5em;
}
.sidebar__toc-list ul {
padding-left: 1.25rem;
}
/* FOOTER */
footer {
background-color: var(--content-bg);
width: 100%;
height: 2.5rem;
background-color: var(--footer-bg);
width: 100vw;
padding: 0.5rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.25rem;
}
/* MEDIA QUERY STARTS HERE */
/* To keep things responsive,
if you want to change the width of your page,
take your new width of the #container, and then subtrack it by 100.
Use this new number as the "max-width" value below */
@media only screen and (max-width: 1000px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
/* the order of the items is adjusted here for responsiveness.
since the sidebars would be too small on a mobile device. */
main {
order: 1;
}
#leftSidebar {
order: 2;
margin-right: 1.25rem;
}
#rightSidebar {
order: 3;
margin-left: 1.25rem;
}
#navbar ul {
flex-wrap: wrap;
}
}

15
shrines/asummersend/components/footer.js Normal file
View File

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

27
shrines/asummersend/components/header.js Normal file
View File

@ -0,0 +1,27 @@
class Header extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<header>
<img src="./img/asummersend_header.png" alt="">
</header>
<nav>
<ul class="nav__menu">
<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="./playlists.html">Playlists</a></li>
<li class="nav__item"><a href="./trivia.html">Trivia</a></li>
<li class="nav__item"><a href="/blog">Blog</a></li>
<li class="nav__item"><a href="./gallery.html">Gallery</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>
</ul>
</nav>
`;
}
}
customElements.define('header-component', Header);

66
shrines/asummersend/components/navbar.js Normal file
View File

@ -0,0 +1,66 @@
/* FOR TOGGLING MENUS ON THE NAVBAR */
const navToggle = document.querySelector(".nav__toggle");
const navMenu = document.querySelector(".nav__menu");
const navItems = document.querySelectorAll(".nav__item");
/* Toggle mobile navMenu */
function toggleMenu() {
if (navMenu.classList.contains("nav__active")) {
navMenu.classList.remove("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
navMenu.classList.add("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Activate Submenu */
function toggleItem() {
if (this.classList.contains("nav__submenu-active")) {
this.classList.remove("nav__submenu-active");
} else if (navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
this.classList.add("nav__submenu-active");
} else {
this.classList.add("nav__submenu-active");
}
}
/* Close Submenu From Anywhere */
function closeSubmenu(e) {
if (navMenu.querySelector(".nav__submenu-active")) {
let isClickInside = navMenu
.querySelector(".nav__submenu-active")
.contains(e.target);
if (!isClickInside && navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
}
}
}
/* Event Listeners */
navToggle.addEventListener("click", toggleMenu, false);
for (let item of navItems) {
if (item.querySelector(".nav__submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
/* FOR MAKING THE NAVBAR STICKY */
const header = document.querySelector("header");
const navbar = document.querySelector("nav");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = header.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {
navbar.classList.remove("sticky-nav");
}
});

21
shrines/asummersend/components/sidebar-content.js Normal file
View File

@ -0,0 +1,21 @@
class RightSidebarContent extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<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>
<h3>Links</h3>
<ul>
<li><a href="https://www.asummersend.com/" target="_blank">Official Website</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>
</ul>
`;
}
}
customElements.define('right-sidebar-component', RightSidebarContent);

70
shrines/asummersend/gallery.html
View File

@ -1,62 +1,46 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:url" content="https://leilukin.neocities.org/shrines/asummersend/gallery">
<meta property="og:type" content="website">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:title" content="Gallery | A Summer’s End — Hong Kong 1986 Shrine">
<meta property="og:description" content="Gallery on my A Summer’s End — Hong Kong 1986 shrine">
<link rel="stylesheet" href="asummersend.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="./img/ase-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="./img/ase-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/ase-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/ase-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="components/header.js" defer></script>
<script src="components/navbar.js" defer></script>
<script src="components/sidebar-content.js" defer></script>
<script src="components/footer.js" defer></script>
<title>Gallery | A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
<ul>
<li><a href="/shrines/asummersend/">Home</a></li>
<li><a href="./playlists.html">Playlists</a></li>
<li><a href="./trivia.html">Trivia</a></li>
<li><a href="./gallery.html">Gallery</a></li>
<li><a href="/home.html">Main Site</a></li>
</ul>
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<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>
<h3>Links</h3>
<ul>
<li><a href="https://www.asummersend.com/" target="_blank">Official Website</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>
</ul>
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1><em>A Summer’s End — Hong Kong 1986</em> Gallery</h1>
<p><em>A Summer’s End — Hong Kong 1986</em> was lovingly crafted by its developer Oracle and Bone with gorgeous art, so i want to make a page dedicated to my appreciation for the visual novel’s art.</p>
<p>I also highly recommend checking out the <a href="https://www.asummersend.com/" target="_blank">official site</a> of <em>A Summer's End</em> and the social media accounts of Oracle and Bone's for more beauriful art about the visual novel!</p>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>In-Game Screenshots</h2>
<img src="./img/ASE-Screenshot-01.png" alt="In-Game Screenshot of A Summer's End 01" width="100%">
<img src="./img/ASE-Screenshot-02.png" alt="In-Game Screenshot of A Summer's End 02" width="100%">
@ -67,12 +51,14 @@
<img src="./img/ASE-Screenshot-07.png" alt="In-Game Screenshot of A Summer's End 07" width="100%">
<img src="./img/ASE-Screenshot-08.png" alt="In-Game Screenshot of A Summer's End 08" width="100%">
<img src="./img/ASE-Screenshot-09.png" alt="In-Game Screenshot of A Summer's End 09" width="100%">
</section>
</div>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

74
shrines/asummersend/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,63 +12,47 @@
<meta property="og:description" content="My shrine for A Summer’s End — Hong Kong 1986">
<link rel="stylesheet" href="asummersend.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="./img/ase-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="./img/ase-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/ase-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/ase-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="components/header.js" defer></script>
<script src="components/navbar.js" defer></script>
<script src="components/sidebar-content.js" defer></script>
<script src="components/footer.js" defer></script>
<title>A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
<ul>
<li><a href="/shrines/asummersend/">Home</a></li>
<li><a href="./playlists.html">Playlists</a></li>
<li><a href="./trivia.html">Trivia</a></li>
<li><a href="./gallery.html">Gallery</a></li>
<li><a href="/home.html">Main Site</a></li>
</ul>
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<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>
<h3>Links</h3>
<ul>
<li><a href="https://www.asummersend.com/" target="_blank">Official Website</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>
</ul>
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>Welcome to my <em>A Summer’s End — Hong Kong 1986</em> Shrine!</h1>
<img src="./img/asummersend_header.png" alt="Promotional image of A Summer’s End — Hong Kong 1986">
<p><em>A Summer’s End — Hong Kong 1986</em> is a visual novel developed by Oracle and Bone, a Canada-based independent studio consists of two Asian queer women, Charissa So and Tida Kietsungden. The visual novel tells of a lesbian romance story between Michelle Cheung, an office worker, and Sam Wong, a video store owner, that takes place in Hong Kong in the year of 1986.</p>
<p>Initially released in English on 23 Apr, 2020, <em>A Summer’s End</em> has also been translated into Simplified Chinese, Traditional Chinese and Cantonese. The Chinese translations were released on July 9, 2021.</p>
<p><em>A Summer’s End</em> is available on <a href="https://store.steampowered.com/app/1111370/A_Summers_End__Hong_Kong_1986/" target="_blank">Steam</a> and <a href="https://oracleandbone.itch.io/a-summers-end" target="_blank">itch.io</a>. It also has an <a href="https://www.asummersend.com/" target="_blank">official website</a>.</p>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>How I Discovered <em>A Summer’s End — Hong Kong 1986</em></h2>
<img src="./img/ASE-Screenshot-02.png" alt="In-Game Screenshot of A Summer's End 02" width="100%">
<p>I first learned about <em>A Summer’s End — Hong Kong 1986</em> through <a href="https://linuxgameconsortium.com/a-summers-end-hong-kong-1986-just-announced/" target="_blank">Linux Game Consortium</a>, a Linux gaming news website. There was a period where I set up my gaming laptop to dual boot Windows 10 and Linux, so I ended up following Linux gaming news for a while. While Windows is still my main platform for gaming, the discovery of <em>A Summer’s End</em> was the biggest unexpected benefit and surprise when I tried out Linux.</p>
<p>As a lesbian, the premise of a visual novel about a sapphic romance already caught my interest, but what urged me to play it even more was the Hong Kong setting, which made my interest in the game personal, since I am a Cantonese-speaking Chinese lesbian who grew up with Hong Kong media. Not to mention, it is rare to see a fiction that tells of a sapphic love story that takes place in Hong Kong.</p>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>Why <em>A Summer’s End — Hong Kong 1986</em> is Special to Me</h2>
<img src="./img/ASE-Screenshot-05.png" alt="In-Game Screenshot of A Summer's End 05" width="100%">
<p>As a Chinese lesbian who speaks Cantonese and had engaged with a lot of Hong Kong media during my teenage years, <em>A Summer’s End - Hong Kong 1986</em> is the lesbian story that I relate to and feel represented the most.</p>
@ -80,12 +64,14 @@
<p>If you ask me to list just one piece of queer art that means everything to me, that gives me comfort, inspiration, and strength the most, <em>A Summer’s End</em> would be it.</p>
<p>I seriously cannot recommend <em>A Summer’s End</em> enough, especially for Asian sapphic women.</p>
</section>
</div>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

94
shrines/asummersend/playlists.html
View File

@ -1,84 +1,75 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:url" content="https://leilukin.neocities.org/shrines/asummersend/playlists">
<meta property="og:type" content="website">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:title" content="Playlists | A Summer’s End — Hong Kong 1986 Shrine">
<meta property="og:description" content="List of A Summer’s End — Hong Kong 1986 playlists">
<link rel="stylesheet" href="asummersend.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="./img/ase-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="./img/ase-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/ase-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/ase-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="components/header.js" defer></script>
<script src="components/navbar.js" defer></script>
<script src="components/sidebar-content.js" defer></script>
<script src="components/footer.js" defer></script>
<title>Playlists | A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
<ul>
<li><a href="/shrines/asummersend/">Home</a></li>
<li><a href="./playlists.html">Playlists</a></li>
<li><a href="./trivia.html">Trivia</a></li>
<li><a href="./gallery.html">Gallery</a></li>
<li><a href="/home.html">Main Site</a></li>
</ul>
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<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>
<h3>Links</h3>
<ul>
<li><a href="https://www.asummersend.com/" target="_blank">Official Website</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>
<header-component></header-component>
<main>
<aside class="left-sidebar">
<div class="sidebar__toc">
<h2>Contents</h2>
<ul class="sidebar__toc-list">
<li><a href="#Sam's-Mixtape">Sam's Mixtape</a></li>
<li><a href="#Summer-Lover">夏日戀人 (Summer Lover)</a></li>
<li><a href="#My-Dear-Summer-Lover">My Dear Summer Lover</a></li>
</ul>
</div>
</aside>
<main>
<div class="content-section">
<div class="content-container">
<section class="content-section">
<h1><em>A Summer’s End — Hong Kong 1986</em> Playlists</h1>
<p><em>A Summer’s End — Hong Kong 1986</em> is a gold mine of music. Not only that the visual novel has a great soundtrack (its <a href="https://www.asummersend.com/original-soundtrack" target="_blank">official soundtrack</a> was released on August 21, 2020), but the developer Oracle and Bone has also compiled playlists related to the game.</p>
<p>As a tribute to <em>A Summer's End</em>, I have also created a fanmix myself.</p>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2 id="Sam's-Mixtape">Sam's Mixtape</h2>
<p>Compiled by Oracle and Bone, Sam’s Mixtape A-Side and B-Side are playlists of the songs that Sam was listening to on the first day she met Michelle.</p>
<h3>Sam's Mixtape A-Side</h3>
<a href="https://open.spotify.com/playlist/7vP8C9Sw1wLlsRDr7eQl46" target="_blank"><button class="linkBtn">Listen on Spotify</button></a><br><br>
<a class="link-btn" href="https://open.spotify.com/playlist/7vP8C9Sw1wLlsRDr7eQl46" target="_blank">Listen on Spotify</a><br><br>
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/7vP8C9Sw1wLlsRDr7eQl46?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
<h3>Sam's Mixtape B-Side</h3>
<a href="https://open.spotify.com/playlist/6n5QvHkm33nDPIy0RIJv6T" target="_blank"><button class="linkBtn">Listen on Spotify</button></a><br><br>
<a class="link-btn" href="https://open.spotify.com/playlist/6n5QvHkm33nDPIy0RIJv6T" target="_blank">Listen on Spotify</a><br><br>
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/6n5QvHkm33nDPIy0RIJv6T?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2 id="Summer-Lover">夏日戀人 (Summer Lover)</h2>
<p>Oracle and Bone compiled this playlist as a tribute to Anita Mui, who was a major inspiration for <em>A Summer’s End — Hong Kong 1986</em>.</p>
<a href="https://open.spotify.com/playlist/4GJuqiYygMPC3ifNemhCCh" target="_blank"><button class="linkBtn">Listen on Spotify</button></a><br><br>
<a class="link-btn" href="https://open.spotify.com/playlist/4GJuqiYygMPC3ifNemhCCh" target="_blank">Listen on Spotify</a><br><br>
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4GJuqiYygMPC3ifNemhCCh?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2 id="My-Dear-Summer-Lover">My Dear Summer Lover</h2>
<img src="/playlists/img/My-Dear-Summer-Lover-cover.png" width="400px" height="400px" alt="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'">
<p>My fanmix for <em>A Summer’s End — Hong Kong 1986</em>, dedicated to Sam and Michelle’s love story.</p>
@ -89,25 +80,16 @@
<p>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.</p>
<a href="https://open.spotify.com/playlist/3SIV7VjSKhspYwugVIQjug" target="_blank"><button class="linkBtn">Listen on Spotify</button></a><br><br>
<a class="link-btn" href="https://open.spotify.com/playlist/3SIV7VjSKhspYwugVIQjug" target="_blank">Listen on Spotify</a><br><br>
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/3SIV7VjSKhspYwugVIQjug?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</section>
</div>
</main>
<aside id="rightSidebar">
<div class="sidebar-content">
<h2>Contents</h2>
<ul class="toc-list">
<li><a href="#Sam's-Mixtape">Sam's Mixtape</a></li>
<li><a href="#Summer-Lover">夏日戀人 (Summer Lover)</a></li>
<li><a href="#My-Dear-Summer-Lover">My Dear Summer Lover</a></li>
</ul>
</div>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</div>
<footer id="footer"></footer>
</div>
</main>
<footer-component></footer-component>
</body>
</html>

74
shrines/asummersend/trivia.html
View File

@ -1,68 +1,52 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:url" content="https://leilukin.neocities.org/shrines/asummersend/trivia">
<meta property="og:type" content="website">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:title" content="Trivia | A Summer’s End — Hong Kong 1986 Shrine">
<meta property="og:description" content="Collection of trivia about A Summer’s End — Hong Kong 1986 shrine">
<link rel="stylesheet" href="asummersend.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="./img/ase-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="./img/ase-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/ase-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/ase-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="components/header.js" defer></script>
<script src="components/navbar.js" defer></script>
<script src="components/sidebar-content.js" defer></script>
<script src="components/footer.js" defer></script>
<title>Trivia | A Summer’s End — Hong Kong 1986 Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
<ul>
<li><a href="/shrines/asummersend/">Home</a></li>
<li><a href="./playlists.html">Playlists</a></li>
<li><a href="./trivia.html">Trivia</a></li>
<li><a href="./gallery.html">Gallery</a></li>
<li><a href="/home.html">Main Site</a></li>
</ul>
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<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>
<h3>Links</h3>
<ul>
<li><a href="https://www.asummersend.com/" target="_blank">Official Website</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>
</ul>
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1><em>A Summer’s End — Hong Kong 1986</em> Trivia</h1>
<p>Here is a collection of trivia about the characters from <em>A Summer’s End</em> provided by the developer Oracle and Bone on their social media pages, especially <a href="https://oracleandbone.tumblr.com/" target="_blank">Tumblr</a>.</p>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>Movies and Music References</h2>
<p><em>A Summer’s End</em> contains many references to movies and music. This community post on Steam compiles a list of the movie and music references made in the game. Please be aware it contains spoilers!</p>
<h3><a href="https://steamcommunity.com/sharedfiles/filedetails/?id=2213828067" target="_blank">Movies and Music in A Summer's End – Hong Kong 1986</a></h3>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>Character Trivia</h2>
<h3>Chinese Names</h3>
@ -97,12 +81,14 @@
<ul>
<li>The character and fashion of Cecelia has been largely inspired by Anita Mui. <sup><a href="https://oracleandbone.tumblr.com/post/659052064213696512/%E7%83%88%E7%84%B0%E7%B4%85%E5%94%87-august-9-is-cecilias-birthday-happy" target="_blank">[Source]</a></sup></li>
</ul>
</section>
</div>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

39
shrines/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,32 +12,28 @@
<meta property="og:description" content="Index of my personal e-shrines.">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Shrines | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent"></div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<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>
@ -46,10 +42,13 @@
<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>
</main>
</section>
</div>
</div>
<footer id="footer">Site Launched: September 11, 2022 by Leilukin | <a href="../changelog">Site Changelog</a></footer>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
<footer-component></footer-component>
</body>
</html>

28
shrines/shrine.js
View File

@ -1,28 +0,0 @@
/* SCRIPT FOR THE NAVIGATION BAR */
// When the user scrolls the page, execute stickyFunction
window.onscroll = function() {stickyFunction()};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function stickyFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky-nav")
} else {
navbar.classList.remove("sticky-nav");
}
}
/* SCRIPT FOR THE FOOTER */
// Generate footer content
var footerHTML = `
<p>This shrine is made with ♥ by <a href="/home.html">Leilukin</a></p>
`;
document.querySelector("#footer").innerHTML = footerHTML;

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,31 +12,28 @@
<meta property="og:description" content="The Star Wars: Knights of the Old Republic II: The Sith Lords theory that Arren Kae and Kreia are the same person is very popular among fans of the game. However, I personally do not subscribe to it or incorporate it into my KotOR 2 headcanons. Here is why.">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<title>My Thoughts on the “Arren Kae is Kreia” Theory | Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>Why I Personally Do Not Subscribe to the “Arren Kae is Kreia” Theory</h1>
<center><p>Originally published on January 27, 2021 on Tumblr</p></center>
@ -52,12 +49,13 @@
<p>Ultimately, since the "Arren Kae is Kreia" theory is never officially confirmed, I am free to choose to <em>not</em> subscribe to the theory, regardless of how popular the theory is in the fandom, and come up with my own theory about Arren Kae instead.</p>
<p>In conclusion, Keeping Arren Kae and Kreia as two different people in my <em>KotOR</em> 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>
</div>
</article>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,31 +12,28 @@
<meta property="og:description" content="The mother of the Handmaiden Sister is a mystery in Star Wars: Knights of the Old Republic II: The Sith Lords that the game strangely never explores, despite how important family is to the Handmaiden's story.">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<title>Where is the Mother of Handmaiden’s Sisters? | Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>Where is the Mother of the Handmaiden’s Sisters?</h1>
<center><p>Originally published on February 19, 2020 on Tumblr</p></center>
@ -56,12 +53,13 @@
<p>I guess it makes sense that we know more about Arren Kae than we did the mother of Brianna’s sisters, since she was the mother of one of the party members, while the Handmaiden Sisters are NPCs who are not even given any names. Arren is also mentioned by Mical the Disciple as one of Revan’s masters, and Revan is an important character in both <em>Knights of the Old Republic</em> games. If you subscribe to the theory that <a href="https://lparchive.org/Knights-of-the-Old-Republic-II/Update%2058/" target="_blank">Arren Kae and Kreia are the same person</a> (<a href="./arren-kae-kreia-theory.html" target="_blank">I have my own reasons not to</a>, however), Arren’s importance increases even more.</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>
</div>
</article>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,48 +12,55 @@
<meta property="og:description" content="List of my articles for the Star Wars: Knights of the Old Republic series">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<title>Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>My <em>Star Wars: Knights of the Old Republic</em> Articles</h1>
<p>Here is a list of articles I have written for the <em>Star Wars: Knights of the Old Republic</em> series.</p>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2><em>KotOR 1</em></h2>
<ul>
<li><a href="./juhani-lesbian-evidence.html">Evidence of Juhani being a Lesbian from <em>Star Wars: Knights of the Old Republic's</em> Game Files</a></li>
<li><a href="./juhani-hostility-towards-canderous.html">How to Access Juhani's Conversaion about Canderous without Restoration Mods</a></li>
</ul>
</section>
<section class="content-section">
<h2><em>KotOR 2</em></h2>
<ul>
<li><a href="./arren-kae-kreia-theory.html">Why I Personally Do Not Subscribe to the “Arren Kae is Kreia” Theory</a></li>
<li><a href="./handmaiden-sisters-mother.html">Where is the Mother of the Handmaiden’s Sisters?</a></li>
</ul>
</section>
</div>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,31 +12,28 @@
<meta property="og:description" content="If you follow the modding scene of Star Wars: Knights of the Old Republic, you might be aware of a conversation with Juhani where the player asks her why she is hostile towards Canderous. It is a commonly assumed that it is cut content, but the truth is that it is possible to access the conversation without mods, though it is extremely easy to miss.">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<title>Access Juhani's Conversaion about Canderous without Restoration Mods | Articles | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>How to Access Juhani's Conversaion about Canderous without Restoration Mods</h1>
<center><p>Published on October 11, 2022</p></center>
@ -63,12 +60,13 @@
<p>Secondly, you need to progress Juhani's conversations to the point where she reveals that her family fled to Taris because the Mandalorians attacked the Cathar homeworld and slaughtered many Cathar people. It is after this conversation where you get the dialogue option to ask Juhani why she is hostile towards 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>
</div>
</article>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,31 +12,28 @@
<meta property="og:description" content="Juhani is a canon lesbian character and she has always been intended as such by the developers of Knights of the Old Republic. Here I am presenting evidence from the game files to prove it.">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<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>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>Evidence of Juhani being a Lesbian from <em>Star Wars: Knights of the Old Republic</em>'s Game Files</h1>
<center><p>Originally published on July 15, 2017 on Tumblr</p></center>
@ -45,33 +42,33 @@
<p>Therefore, as a lesbian and someone who has <a href="/mymods">made mods</a> for the <em>Knights of the Old Republic</em> games and written a <a href="https://docs.google.com/document/d/1X_EUsoKVpaCfbbi-t5NNqMsoPeAoFsxvIRMcv5rHFBQ/edit" target="_blank">detailed Juhani romance guide</a>, I would like to present hard evidence from the game files to point out that <strong>Juhani is in fact a lesbian, a woman who is exclusively attracted to women</strong>.</p>
<p>The most crucial evidence comes from <span class="monospace">k_hjuh_dialog.dlg</span>, Juhani’s main dialogue file which contains all the conversations covered in my Juhani Romance Guide. If you use the <a href="https://deadlystream.com/files/file/280-kotor-tool/" target="_blank">KotOR Tool</a> to browse the game files, <span class="monospace">k_hjuh_dialog.dlg</span> is under KotOR I > BIFs > templates.bif > Dialog. I recommend using <a href="https://deadlystream.com/files/file/750-dlg-editor/" target="_blank">DLGEditor</a> to view the .dlg files from KotOR games.</p>
<p>The most crucial evidence comes from <code class="inline-code">k_hjuh_dialog.dlg</code>, Juhani’s main dialogue file which contains all the conversations covered in my Juhani Romance Guide. If you use the <a href="https://deadlystream.com/files/file/280-kotor-tool/" target="_blank">KotOR Tool</a> to browse the game files, <code class="inline-code">k_hjuh_dialog.dlg</code> is under KotOR I > BIFs > templates.bif > Dialog. I recommend using <a href="https://deadlystream.com/files/file/750-dlg-editor/" target="_blank">DLGEditor</a> to view the .dlg files from KotOR games.</p>
<p>Here is a screenshot of my DLGEditor with the most relevant part of the <span class="monospace">k_hjuh_dialog.dlg</span> file:<br>
<p>Here is a screenshot of my DLGEditor with the most relevant part of the <code class="inline-code">k_hjuh_dialog.dlg</code> file:<br>
<img src="./img/juhani-lesbian-in-game-evidence.png" width="100%" height="auto" alt="A screenshot of Version 2.3.2 of the DLG Editor displaying Juhani's main dialogue file, with the first conversation highlighted"></p>
<p>The highlighted dialogue shown in the screenshot (”I feel I must apologize for the way I acted towards you before, in the grove. It was wrong of me.”) is the beginning of your first personal conversation with Juhani after Juhani joins your party. Here is a video of the conversation in question:</p>
<div class="full-width-youtube-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/jzqfXoOvGrw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>As shown in the screenshot above, once you begin this conversation, the script <span class="monospace">k_hjuh_p17</span> will fire, and this is the source of the script in question:</p>
<p>As shown in the screenshot above, once you begin this conversation, the script <code class="inline-code">k_hjuh_p17</code> will fire, and this is the source of the script in question:</p>
<code class="code-snippet">
void main()
<pre>
<code class="code-snippet">void main()
{
int iGender = GetGender(GetPCSpeaker());
if (iGender == GENDER_FEMALE)
{
SetGlobalBoolean("T_JUHANIROM", TRUE);
}
}
</code>
</code></pre>
<p>(In KotOR Tool, you can see the source script <span class="monospace">k_hjuh_p17.nss</span> under KotOR I > BIFs > scripts.bif > Script, Source)</p>
<p>(In KotOR Tool, you can see the source script <code class="inline-code">k_hjuh_p17.nss</code> under KotOR I > BIFs > scripts.bif > Script, Source)</p>
<p>As you may have guessed from the above script, <span class="monospace">k_hjuh_p17</span> sets the Global Boolean <span class="monospace">T_JUHANIROM</span> to TRUE if, and ONLY IF, the player character is female. The <span class="monospace">T_JUHANIROM</span> global is used by the game to check if Juhani’s romance is active or not. In other words, <strong>the game activates Juhani’s romance ONLY IF your player character is female</strong>, as soon as you start Juhani’s personal conversation after she joins your party. <strong>If your player character is male, Juhani’s romance will NOT be activated</strong>.</p>
<p>As you may have guessed from the above script, <code class="inline-code">k_hjuh_p17</code> sets the Global Boolean <code class="inline-code">T_JUHANIROM</code> to TRUE if, and ONLY IF, the player character is female. The <code class="inline-code">T_JUHANIROM</code> global is used by the game to check if Juhani’s romance is active or not. In other words, <strong>the game activates Juhani’s romance ONLY IF your player character is female</strong>, as soon as you start Juhani’s personal conversation after she joins your party. <strong>If your player character is male, Juhani’s romance will NOT be activated</strong>.</p>
<p>Here is the hard evidence from KotOR's game files that Juhani is a lesbian, a woman who is exclusively attracted to women. Juhani is NOT straight. Juhani is NOT bisexual.</p>
@ -82,12 +79,13 @@
<p>In conclusion, <strong>Juhani is a canon lesbian character and has always been intended to be such</strong>.</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>
</div>
</article>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

15
shrines/starwarskotor/components/footer.js Normal file
View File

@ -0,0 +1,15 @@
class Footer extends HTMLElement {
constructor() {
super();
}
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);

26
shrines/starwarskotor/components/header.js Normal file
View File

@ -0,0 +1,26 @@
class Header extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<header>
<img src="/shrines/starwarskotor/img/swkotor-header.jpg" alt="">
</header>
<nav>
<ul class="nav__menu">
<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/articles/">Articles</a></li>
<li class="nav__item"><a href="/shrines/starwarskotor/guides/">Guides</a></li>
<li class="nav__item"><a href="/shrines/starwarskotor/resources/">Resources</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>
</ul>
</nav>
`;
}
}
customElements.define('header-component', Header);

66
shrines/starwarskotor/components/navbar.js Normal file
View File

@ -0,0 +1,66 @@
/* FOR TOGGLING MENUS ON THE NAVBAR */
const navToggle = document.querySelector(".nav__toggle");
const navMenu = document.querySelector(".nav__menu");
const navItems = document.querySelectorAll(".nav__item");
/* Toggle mobile navMenu */
function toggleMenu() {
if (navMenu.classList.contains("nav__active")) {
navMenu.classList.remove("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
navMenu.classList.add("nav__active");
navToggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Activate Submenu */
function toggleItem() {
if (this.classList.contains("nav__submenu-active")) {
this.classList.remove("nav__submenu-active");
} else if (navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
this.classList.add("nav__submenu-active");
} else {
this.classList.add("nav__submenu-active");
}
}
/* Close Submenu From Anywhere */
function closeSubmenu(e) {
if (navMenu.querySelector(".nav__submenu-active")) {
let isClickInside = navMenu
.querySelector(".nav__submenu-active")
.contains(e.target);
if (!isClickInside && navMenu.querySelector(".nav__submenu-active")) {
navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
}
}
}
/* Event Listeners */
navToggle.addEventListener("click", toggleMenu, false);
for (let item of navItems) {
if (item.querySelector(".nav__submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
/* FOR MAKING THE NAVBAR STICKY */
const header = document.querySelector("header");
const navbar = document.querySelector("nav");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = header.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {
navbar.classList.remove("sticky-nav");
}
});

14
shrines/starwarskotor/components/sidebar-content.js Normal file
View File

@ -0,0 +1,14 @@
class RightSidebarContent extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<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>
`;
}
}
customElements.define('right-sidebar-component', RightSidebarContent);

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,36 +12,34 @@
<meta property="og:description" content="List of guides for the Star Wars: Knights of the Old Republic series I have written or found useful. This page also includes lists of cheats.">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<title>Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1><em>Star Wars: Knights of the Old Republic</em> Guides</h1>
<p>Here is a list of guides for the <em>Star Wars: Knights of the Old Republic</em> series I have written or found useful. This page also includes lists of cheats.</p>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2><em>KotOR 1</em> Guides</h2>
<ul>
<li><a href="https://strategywiki.org/wiki/Star_Wars:_Knights_of_the_Old_Republic" target="_blank"><em>Star Wars: Knights of the Old Republic</em> section</a> on StrategyWiki</li>
@ -49,31 +47,23 @@
<li><a href="./kotor-redeeming-bastila-guide.html">Redeeming Bastila Guide</a> by Leilukin (me)</li>
<li><a href="./kotor-sandral-matale-feud-guide.html">Sandral-Matale Feud Ending Guide</a> by Leilukin (me)</li>
</ul>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2><em>KotOR 2: TSL</em> Guides</h2>
<ul>
<li><a href="https://web.archive.org/web/20190104130924/www.starwarsknights.com/influence.php" target="_blank">Influence Walkthrough</a> by by Achilles — This guide was written for the vanilla game. The Unofficial Dialog Patch on the page is not compatible with The Sith Lords Restored Content Mod (TSLRCM).</li>
<li><a href="https://reddit.com/r/kotor/comments/ruofg1/kotor_2_tslrcm_influence_guide/" target="_blank">TSLRCM Influence Guide</a> by u/XDarkStrikerX</li>
<li><a href="https://reddit.com/r/kotor/comments/vmhn73/kotor_2_tslrcm_influence_guide_collaboration/" target="_blank">TSLRCM Influence Guide Collaboration</a>, organised by u/Egg-MacGuffin. <a href="https://docs.google.com/spreadsheets/d/1SppuhOhl3AU-EAKjSji1EIJm41OTjeRGfVHbnmRwqio/edit?usp=sharing" target="_blank">Here is the direct link to the spreadsheet</a>.</li>
</ul>
</section>
</div>
<div class="content-section">
<h2>Cheats</h2>
<ul>
<li><a href="https://strategywiki.org/wiki/Star_Wars:_Knights_of_the_Old_Republic/Cheats" target="_blank">List of <em>KotOR 1</em> Cheats</a> on StrategyWiki</li>
<li><a href="https://strategywiki.org/wiki/Star_Wars_Knights_of_the_Old_Republic_II:_The_Sith_Lords/Cheats" target="_blank">List of <em>KotOR 2: TSL</em> Cheats</a> on StrategyWiki</li>
<li><a href="https://deadlystream.com/blogs/entry/414-blog-112-the-kotor1-warp-code-list/" target="_blank">The KotOR1 Warp Code List</a> by by Sith Holocron — This list also includes area codes from mods.</li>
<li><a href="https://deadlystream.com/blogs/entry/413-blog-111-the-tsl-warp-code-list/" target="_blank">The TSL Warp Code List</a> by by Sith Holocron — This list also includes area codes from mods.</li>
</ul>
</div>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,40 +12,50 @@
<meta property="og:description" content="Walkthrough of how to successfully romance Juhani in Star Wars: Knights of the Old Republic">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<title>Juhani Romance Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
<header-component></header-component>
<main>
<aside class="left-sidebar">
<div class="sidebar__toc">
<h3 class="sidebar__toc-title">Contents</h3>
<ul class="sidebar__toc-list">
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Notes">Important Notes</a></li>
<li><a href="#Walkthrough">Walkthrough</a></li>
<ul>
<li><a href="#History">History Conversation Path</a></li>
<li><a href="#Personal">Personal Conversation Path</a></li>
</ul>
<li><a href="#Mods">Mod Recommendations</a></li>
</ul>
</div>
</aside>
<main>
<div class="content-section">
<article>
<section class="article-section">
<h1><em>Star Wars: Knights of the Old Republic</em>: Juhani Romance Guide</h1>
<center><p>Written by Leilukin</p>
<p>First published on March 5, 2016<br>Last updated on October 12, 2022</p>
<p>[This guide is also available on <a href="https://docs.google.com/document/d/1X_EUsoKVpaCfbbi-t5NNqMsoPeAoFsxvIRMcv5rHFBQ/edit" target="_blank">Google Docs</a>]</p></center>
<p>The contents of this guide may not be reposted, in whole or in part, without my permission. You may quote a part of this guide to help players who have problems with progressing or completing Juhani's romance, but DO NOT claim this guide as your own.</p>
</div>
</section>
<div class="content-section">
<section class="article-section">
<h2 id="Introduction">Introduction</h2>
<p>Since I could not find a solid and detailed guide for Juhani's romance anywhere, and many players (I used to be one of them as well) have troubles with triggering Juhani's final romance conversation, I have decided to write a guide myself. Even though there is very little content for Juhani's romance, if you want to experience the very first canon same-gender romance option in BioWare games first hand, this guide is for you.</p>
@ -53,9 +63,9 @@
<p>For this guide, I have done a lot of research and investigation to find out the conditions required to trigger Juhani's conversations, including tons of web searching, using KotOR Tool to browse and examine the game files related to Juhani's conversations, as well as using KotOR SaveGame Editor (KSE) to compare my save files.</p>
<p><strong>NOTE:</strong> Even if you use KotOR 1 Restoration (K1R) mod, the conditions to progress Juhani's romance remains the same as vanilla KotOR 1. However, I recommend using <a href="https://deadlystream.com/files/file/1258-kotor-1-community-patch/" target="_blank">KOTOR 1 Community Patch</a> (K1CP) instead of K1R due to the fact K1CP fixes more bugs than K1R does, including bugs related to Juhani.</p>
</div>
</section>
<div class="content-section">
<section class="article-section">
<h2 id="Notes">Important Notes</h2>
<p>First and foremost, since Juhani was written to be a lesbian, <strong>your player character must be female if you want to romance Juhani</strong>. The game activates Juhani's romance ONLY IF your player character is female.</p>
@ -71,9 +81,9 @@
<p>Before you start a new KotOR playthrough, I highly recommend you to download and install the <a href="https://deadlystream.com/files/file/1258-kotor-1-community-patch/" target="_blank">KOTOR 1 Community Patch</a>, because the mod fixes many bugs with KotOR, including bugs that may block you from progressing Juhani's quest and conversations.</p>
<p><strong>(WARNING: this guide contains spoilers for both Juhani's personal story and KotOR's main plot)</strong></p>
</div>
</section>
<div class="content-section">
<section class="article-section">
<h2 id="Walkthrough">Walkthrough</h2>
<p>There are two paths in Juhani's conversations: <strong>History</strong> and <strong>Personal</strong>. The History path explores Juhani's past and will lead to Juhani's personal quest "Threat from Xor", while the Personal path explores Juhani's relationship with the player character and will lead to Juhani's love confession if her romance is active.</p>
@ -140,9 +150,9 @@
<p>Provided the above conditions have been met, the final romance conversation occurs after Bastila leaves the Rakatan temple summit. When you talk to Juhani, she will confess her feelings to you. If you have installed Kexikus' Juhani Romance Enhancement mod (see the Mod Recommendation section below for details), the conversation will be triggered automatically when you are leaving the temple summit, so you do not need to initiate the conversation yourself. <a href="https://youtu.be/WOcXeIqpBiQ" target="_blank">[YouTube video for vanilla version]</a> <a href="https://youtu.be/oFQDmmRUx4E" target="_blank">[YouTube video for Juhani Romance Enhancement mod version]</a></p>
</div>
</section>
<div class="content-section">
<section class="article-section">
<h2>Mod Recommendations</h2>
<p>These mods are not required to complete Juhani's romance, but they add or enhance Juhani's content.</p>
@ -169,29 +179,14 @@
</ul>
<p><strong>NOTE: I DO NOT support any mods that make Juhani a romance option for male characters under any circumstances. In addition, I DO NOT support any mods that make Juhani look like a human.</strong></p>
</div>
</section>
</article>
</main>
<aside id="rightSidebar">
<div class="sidebar-content">
<h3 class="toc-title">Contents</h3>
<ul class="toc-list">
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Notes">Important Notes</a></li>
<li><a href="#Walkthrough">Walkthrough</a></li>
<ul>
<li><a href="#History">History Conversation Path</a></li>
<li><a href="#Personal">Personal Conversation Path</a></li>
</ul>
<li><a href="#Mods">Mod Recommendations</a></li>
</ul>
</div>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</div>
<footer id="footer"></footer>
</div>
</main>
<footer-component></footer-component>
</body>
</html>

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,38 +12,41 @@
<meta property="og:description" content="Walkthrough of how to redeem Bastila in the light side ending of Star Wars: Knights of the Old Republic">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<title>Redeeming Bastila Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
<header-component></header-component>
<main>
<aside class="left-sidebar">
<h3 class="sidebar__toc-title">Contents</h3>
<ul class="sidebar__toc-list">
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Mechanics">The Mechanics of Redeeming Bastila</a></li>
<li><a href="#Walkthrough">Dialogue Walkthrough</a></li>
</ul>
</aside>
<main>
<div class="content-section">
<article>
<section class="article-section">
<h1><em>Star Wars: Knights of the Old Republic</em>: Redeeming Bastila Guide</h1>
<center><p>written by Leilukin</p>
<p>First published on September 16, 2018</p>
<p>[This guide is also available on <a href="https://docs.google.com/document/d/1HrrzojpHv9oekvDPjTmBAwdXTf6QhY8tC8RuioKFXmE/edit" target="_blank">Google Docs</a>]</p></center>
</div>
</section>
<div class="content-section">
<section class="article-section">
<h2 id="Introduction">Introduction</h2>
<p>In <em>Star Wars: Knights of the Old Republic</em>, towards the end of the game you will be provided the opportunity to determine which ending you will get, and there will be consequences of your choice there.</p>
@ -55,9 +58,9 @@
<p>This guide will provide in-depth details on how the mechanics of redeeming Bastila on the Star Forge works, and which dialogue options will give you a better chance in successfully redeeming Bastila.</p>
<p>For this guide, I have used KotOR Tool, DLGEditor and DeNCS to investigate the relevant dialogue file and scripts.</p>
</div>
</section>
<div class="content-section">
<section class="article-section">
<h2 id="Mechanics">The Mechanics of Redeeming Bastila</h2>
<p>The game uses a point system to determine if you will succeed in redeeming Bastila based on the amount of points you earn throughout the conversations when you face Bastila on the Star Forge. Some dialogue options will earn you points to increase your chance in redeeming Bastila.</p>
@ -68,9 +71,9 @@
<p>There will be [Persuade] options in the final part of Bastila's dialogue. While it is possible to save Bastila without choosing the [Persuade] options as long as you choose the right dialogue options, if you invest skill points in Persuade and pass the Persuade check, it would also be easier to save Bastila. If you want to learn more about the Persuade mechanic in KotOR, you can check out <a href="https://strategywiki.org/wiki/Star_Wars:_Knights_of_the_Old_Republic/Skills#Persuade" target="_blank">this page</a>.</p>
<p>An active romance with Bastila will make it easier to save Bastila. Although in vanilla KotOR, only a male player character can romance Bastila, this mechanic also works for a female PC who romances Bastila with mods like <a href="https://deadlystream.com/files/file/1548-jcs-romance-enhancement-biromantic-bastila-for-k1/" target="_blank">JC's Romance Enhancement: Biromantic Bastila</a>. That said, it is possible to redeem Bastila even if you do not romance her.</p>
</div>
</section>
<div class="content-section">
<section class="article-section">
<h2 id="Walkthrough">Dialogue Walkthrough</h2>
<p>There are 4 phases in your conversation with Bastila in the Star Forge, as each phase will end with you and Bastila fight, and Bastila will initiate new dialogue each time you defeat her. There are dialogue options in each phase that will increase your points in your chance to save Bastila.</p>
@ -141,24 +144,14 @@
<p>If you have gained <strong>at least 10 points in total</strong>, Bastila will respond with <strong>"You are brave... and some would say foolish. But you are also right. The dark side has not wholly consumed me. I cannot raise my blade against you."</strong> If Bastila says this to you, congratulations! You have saved her!</p>
<p>From this point, regardless of your dialogue option, Bastila will stay behind and use her Battle Meditation to help the Republic, while you go to face Darth Malak alone.</p>
</div>
</section>
</article>
</main>
<aside id="rightSidebar">
<div class="sidebar-content">
<h3 class="toc-title">Contents</h3>
<ul class="toc-list">
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Mechanics">The Mechanics of Redeeming Bastila</a></li>
<li><a href="#Walkthrough">Dialogue Walkthrough</a></li>
</ul>
</div>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</div>
<footer id="footer"></footer>
</div>
</main>
<footer-component></footer-component>
</body>
</html>

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,38 +12,36 @@
<meta property="og:description" content="Walkthrogh of the different ways to resolve the Sandral-Matale Feud quest in Star Wars: Knights of the Old Republic">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<title>Sandral-Matale Feud Ending Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<section class="article-section">
<h1><em>Star Wars: Knights of the Old Republic</em>: Sandral-Matale Feud Ending Guide</h1>
<center><p>written by Leilukin</p>
<p>First published on September 22, 2018</p>
<p>[This guide is also available on <a href="https://docs.google.com/document/d/1cHed1SQZym-F3_4rynL0BbxfGjUNmIPWANWgL0L9SR8/edit" target="_blank">Google Docs</a>]</p></center>
</div>
</section>
<div class="content-section">
<section class="article-section">
<h2>Introduction</h2>
<p>This guide is requested by Deadly Stream user Sith Holocron.</p>
@ -52,9 +50,9 @@
<p>This quest line revolves around a family feud between the Sandrals and the Matales, mainly between their patriarchs, Nurik Sandral and Ahlan Matale. As you progress the quest line, you will discover that Nurik's daughter, Rahasia and Ahlan's son, Shen are romantically involved. The quest line will lead to a heated confrontation between Nurik and Ahlan, and there are multiple ways to resolve the quest line.</p>
<p>This guide will provide details on the different ways to resolve the Sandral-Matele feud, and how to achieve those endings.</p>
</div>
</section>
<div class="content-section">
<section class="article-section">
<h2>Sandral-Matale Feud Resolution Walkthrough</h2>
<p>After you rescue Shen and meet Rahasia outside the Sandral estate, you will be confronted by Ahlan Matale and Nurik Sandral, Shen and Rahasia's fathers respectively.</p>
@ -62,7 +60,9 @@
<p>After Ahlan yells at Nurik, <em>"I don't want to hear any of your excuses! Now I will get revenge for your transgressions!"</em> Your following dialogue choices will determine the outcome of the "Sandral-Matale Feud" quest. I recommend <strong>saving the game before rescuing Shen and meeting Rahasia outside</strong> the Sandral estate, so you can reload the save if you do not get the ending you want.</p>
<p>The "Sandral-Matale Feud" quest could be resolved in four different ways:</p>
/section
<section class="article-section">
<h3>1. Convincing Ahlan and Nurik to sort out their differences and allow their children to stay together as a couple.</h3>
<p>If you want to do a Light Side playthrough, this would be the best outcome. However, you need to pass a Hard difficulty Persuasion check to get this ending. If you want to learn more about the Persuade mechanic in KotOR, you can check out <a href="https://strategywiki.org/wiki/Star_Wars:_Knights_of_the_Old_Republic/Skills#Persuade" target="_blank">this page</a>. Since you will likely be at level 10 when you do this quest, you need at least 10 points in your Persuade skill to have a decent chance to pass the check.</p>
@ -74,7 +74,9 @@
<p>Now you will be given [Persuade] options. When presented the option, choose <strong>"[Persuade] Shen is capable of making decisions on his own."</strong> After you pass a Hard difficulty Persuasion check, choose another Persuade option <strong>"[Persuade] Children grow up and leave eventually."</strong> when you are given the opportunity. If you have successfully passed the previous Persuade check, you should have no problem passing this check.</p>
<p>Once you have succeeded in these [Persuade] options, congratulations! You manage to set the feud between the Sandrals and the Matales peacefully. Your dialogue choices immediately following this do not matter. You will be rewarded with Light Side points.</p>
</section>
<section class="article-section">
<h3>2. Shen and Rahasia run off together, while the feud between their fathers remains.</h3>
<p>To get this second Light Side ending, after Ahlan rants about him getting revenge:</p>
@ -86,29 +88,32 @@
<p>Shen and Rahasia will run off together, and you will find them in the Jedi Enclave, while Ahlan and Nurik will remain angry at each other. You will be rewarded with Light Side points.</p>
<p>You would also get this outcome if you fail the Persuade check when you choose the [Persuade] option.</p>
</section>
<section class="article-section">
<h3>3. Breaking up Shen and Rahasia.</h3>
<p>To get this ending, after Ahlan rants about him getting revenge:</p>
<ul>
<li>Choose <strong>"Don't make me intervene in this."</strong> When Ahlan says, "This will be resolved very shortly." your dialogue choice here does not matter. Later, when Rahasia tells her father she wants to with Shen forever, choose either <strong>"I don't know if you can trust Rahasia, Shen."</strong> or <strong>"You may want to reconsider this."</strong> When Nurik yells "Get away from my daughter Matale!", choose <strong>"Turn away, Shen."</strong> Your dialogue choices following this do not matter.</li>
<li >Alternately, if you want to get Dark Side points from this outcome, choose <strong>"Why don't you just shoot each other and get it over with."</strong> When Ahlan says he wants Nurik "dead and rotting in the ground", choose <strong>"If you fight, you'll all be killed."</strong> and then choose <strong>"[Lie] Rahasia doesn't love you anyway."</strong> You need to pass a Medium difficulty Persuasion check for this [Lie] option to succeed.</li>
</ul>
<p>Shen breaks up with Rahasia, and the two return to their own fathers.</p>
</section>
<section class="article-section">
<h3>4. Making the Sandrals and the Matales kill each other, result in the death of the fathers and the children.</h3>
<p>To get this Dark Side ending, after Ahlan rants about him getting revenge, choose <strong>"Why don't you just shoot each other and get it over with."</strong> When Ahlan says he wants Nurik "dead and rotting in the ground", choose <strong>"The only way either of you will end this is with blood."</strong> When Ahlan yells about how can Shen disrespects his (Ahlan's) wishes, choose <strong>"[Lie] You know, Nurik, Ahlan actually did kill Casus."</strong> Interestingly, you do not need any Persuade skills to make this [Lie] option succeed.</p>
<p>After Nurik kills Shen, choose either <strong>"Are you going to let that one pass?"</strong> or <strong>"Wipe them all out."</strong> for more Dark Side points. After the fathers and their children are dead, you will fight the fathers' droids.</p>
</div>
</section>
</article>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

62
shrines/starwarskotor/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,52 +12,58 @@
<meta property="og:description" content="My shrine for Star Wars: Knights of the Old Republic">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<title>Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1>Welcome to my <em>Star Wars: Knights of the Old Republic</em> Shrine!</h1>
<img src="./img/swkotor-header.jpg" alt="Cover arts of Star Wars: Knights of the Old Republic series">
<p><em>Star Wars: Knights of the Old Republic</em> (<em>KotOR</em>) is a space opera role-playing video game series. The series takes place in the fictional universe of Star Wars, with the story taking place approximately 4,000 years before the rise of the Galactic Empire. </p>
<p>The first title was developed by BioWare while the second (<em>Star Wars: Knights of the Old Republic II: The Sith Lords</em>) was done by Obsidian Entertainmenr. Both games were published by LucasArts. The <em>KOTOR</em> series also includes a subsequent new comic book series. Both comic series were published by Dark Horse Comics and act as prequels to the video games.</p>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>My Connection to the <em>KotOR</em> Series</h2>
<p>Even though I had been a <em>Star Wars</em> fan since I was 13 in 2005, I was not aware of the existence of the <em>Knights of the Old Republic</em> series until around 2010. I started playing the first <em>KotOR</em> game in early 2011, immediately followed by <em>KotOR 2</em>, and the series has been one of my special interests ever since.</p>
<p>My investment in the <em>KotOR</em> series has evolved over time, leading to me starting to get into modding the games in the mid-2010s. The very first <em>KotOR</em> mod I created was <a href="https://deadlystream.com/files/file/1012-tsl-improved-party-outfits/" target="_blank">TSL Improved Party Outfits</a> in 2015, while the first KotOR mod I released to the public was <a href="https://deadlystream.com/files/file/968-visas-marr-and-female-exile-romance/" target="_blank">Visas Marr and Female Exile Romance</a> on December 15, 2016.</p>
</section>
<p>I have also joined <a href="https://glitterskies.org/kotor/" target="_blank">Erased Identity</a> and <a href="https://glitterskies.org/kotor2/" target="_blank">Mysteries of Malachor</a>, the fan listings for the two <em>KotOR</em> games.</p>
<section class="content-section">
<h2><em>KotOR</em> Fan Listings</h2>
<p>I have joined <a href="https://glitterskies.org/kotor/" target="_blank">Erased Identity</a> and <a href="https://glitterskies.org/kotor2/" target="_blank">Mysteries of Malachor</a>, the fan listings for the two <em>KotOR</em> games.</p>
<div style="display: flex;">
<a href="https://glitterskies.org/kotor/" target="_blank"><img src="/links/fanlistings/kotor-100x50.png" alt="A website button of a Star Wars: Knights of the Old Republic fanlisting" title="Erased Identity - Star Wars: Knights of the Old Republic fanlisting"></a>
<a href="https://glitterskies.org/kotor2/" target="_blank"><img src="/links/fanlistings/kotor2-100x50.jpg" alt="A website button of a Star Wars: Knights of the Old Republic 2 fanlisting" title="Mysteries of Malachor - Star Wars: Knights of the Old Republic 2: The Sith Lords fanlisting"></a>
</div>
</section>
</div>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,88 +12,87 @@
<meta property="og:description" content="List of Star Wars: Knights of the Old Republic resources I have compiled myself.">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<title>Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<div class="content-container">
<section class="content-section">
<h1><em>Star Wars: Knights of the Old Republic</em> Resources</h1>
<p>Here are resources for the <em>Star Wars: Knights of the Old Republic</em> series I have compiled myself.</p>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>My Mods</h2>
<p>Here are the modifications for the <em>KotOR</em> series I have created.</p>
<ul>
<li><a href="/mymods/kotor1mods/" target="_blank"><em>Star Wars: Knights of the Old Republic</em></a></li>
<li><a href="/mymods/kotor2mods/" target="_blank"><em>Star Wars: Knights of the Old Republic II: The Sith Lords</em></a></li>
</ul>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>My Modder's Resource</h2>
<ul>
<li><a href="https://deadlystream.com/files/file/2249-missing-k1-party-member-ports-for-tsl-modders-resource/" target="_blank">Missing K1 Party Member Ports for TSL</a></li>
</ul>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>My Save Files</h2>
<ul>
<li><a href="https://deadlystream.com/files/file/2180-light-side-female-saves-with-kotor-1-community-patch-and-all-romances/" target="_blank">Light Side Female Saves with KOTOR 1 Community Patch and All Romances</a></li>
<li><a href="https://deadlystream.com/files/file/2213-kotor-2-light-side-female-saves-with-tslrcm-and-partyswap/" target="_blank">KotOR 2 Light Side Female Saves with The Sith Lords Restored Content Mod and PartySwap</a></li>
</ul>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>My Mod Lists</h2>
<ul>
<li><a href="./kotor-same-gender-romance-mods.html">List of Same-Gender Romance Mods for the <em>KotOR</em> Series</a></li>
<li><a href="./kotor2-female-exile-recruit-handmaiden-mods.html">List of <em>KotOR 2</em> Mods that Allow Female Exiles to Recruit the Handmaiden as a Party Member</a></li>
</ul>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>References</h2>
<ul>
<li><a href="./tslrcm-m478ep-modules-music.html">The Sith Lords Restored Content Mod + M4-78 Enhancement Project Modules, Warp Codes & Music Overview</a></li>
</ul>
</div>
</section>
<div class="content-section">
<section class="content-section">
<h2>My Mod Builds</h2>
<p>Lists of modifications for the <em>KotOR</em> games I use for my own playthroughs.</p>
<ul>
<li><a href="https://docs.google.com/document/d/1BTMJ1c-NOjU9q7qNftZac6jkOPluyucILglovcHtiaI/edit" target="_blank">Star Wars: Knights of the Old Republic</a></li>
<li><a href="https://docs.google.com/document/d/15HbD-k-D8WHrp10IjIryAguhq7k2W94pkuGys7Z7xNM/edit" target="_blank">Star Wars: Knights of the Old Republic II: The Sith Lords</a></li>
</ul>
</section>
</div>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,31 +12,33 @@
<meta property="og:description" content="Throughout the years, modders have created same-gender romance mods for the Knights of the Old Republic series. Want to make your KotOR games more gay? This list is for you!">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<title>Same-Gender Romance Mods for KotOR Series | Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
<header-component></header-component>
<main>
<aside class="left-sidebar">
<h3 class="sidebar__toc-title">Contents</h3>
<ul class="sidebar__toc-list">
<li><a href="#KotOR1">For <em>Knights of the Old Republic I</em></a></li>
<li><a href="#KotOR2">For <em>Knights of the Old Republic II: The Sith Lords</em></a></li>
</ul>
</aside>
<main>
<div class="content-section">
<article>
<section class="article-section">
<h1>List of Same-Gender Romance Mods for <em>Star Wars: Knights of the Old Republic</em> Series</h1>
<center><p>[This list is also available on <a href="https://docs.google.com/document/d/1l5cThs2A8PaUR4BlSEnlb2ZS5zrcnS3CeL58psjPfKI/edit" target="_blank">Google Docs</a>]</p></center>
@ -51,9 +53,9 @@
<p><strong>NOTE:</strong> Some listed mods below have overlapping concepts and thus are not compatible with each other. Mods that are hosted exclusively on Gamefront are very old mods that were made in the 2000s, and thus may have compatibility issues with newer mods (not just ones that listed here).</p>
<p><strong>Warning: this list contains spoilers for both KotOR games.</strong></p>
</div>
</section>
<div class="content-section">
<section class="article-section">
<h2 id="KotOR1">For <em>Knights of the Old Republic I</em></h2>
<h3>Bastila & Female Revan (Untold Love Story)</h3>
@ -122,9 +124,9 @@
<li><strong>Download:</strong> <a href="https://deadlystream.com/files/file/2140-carth-onasi-and-male-pc-romance/" target="_blank">Deadly Stream</a> | <a href="https://www.nexusmods.com/kotor/mods/1493" target="_blank">Nexus Mods</a></li>
<li><strong>Mod Description:</strong> Inspired by the aforementioned Bi Carth mod, this is my version of a male Revan and Carth romance mod. The biggest differences between my version and forgetcanon’s are that my mod is installed by patching relevant dialogue files, instead of putting modified dialogue files in the Override folder, and I have also edited Carth’s dialogue and spliced audio files to prevent Carth from referring to male Revan as a woman.</li>
</ul>
</div>
</section>
<div class="content-section">
<section class="article-section">
<h2 id="KotOR2">For <em>Knights of the Old Republic II: The Sith Lords</em></h2>
<h3>Worthy of Note:</h3>
@ -194,22 +196,14 @@
<li><strong>Download:</strong> <a href="https://deadlystream.com/files/file/1400-dahnis-flirt-option-for-female-pc/" target="_blank">Deadly Stream</a> | <a href="https://www.nexusmods.com/kotor2/mods/1036" target="_blank">Nexus Mods</a></li>
<li><strong>Mod Description:</strong> Makes Dahnis, a minor NPC and one of the Pazaak players on Nar Shaddaa, flirt with the player character regardless of gender.</li>
</ul>
</div>
</main>
</section>
</article>
<aside id="rightSidebar">
<div class="sidebar-content">
<h3 class="toc-title">Contents</h3>
<ul class="toc-list">
<li><a href="#KotOR1">For <em>Knights of the Old Republic I</em></a></li>
<li><a href="#KotOR2">For <em>Knights of the Old Republic II: The Sith Lords</em></a></li>
</ul>
</div>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</div>
<footer id="footer"></footer>
</div>
</main>
<footer-component></footer-component>
</body>
</html>

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,31 +12,28 @@
<meta property="og:description" content="Disappointed that female Jedi Exiles cannot recruit the Handmaiden as a party member? Good news! That is what these mods are for!">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<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>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>List of <em>Star Wars: Knights of the Old Republic II: The Sith Lords</em> Mods that Allow Female Exiles to Recruit the Handmaiden as a Party Member</h1>
<p>One of the flaws of <em>Star Wars: Knights of the Old Republic II: The Sith Lords</em> (<em>KotOR 2</em>) I believe everyone, regardless of how much you like the game (or not), will agree on, is that the Handmaiden, real name Brianna, will only join your party if you play as a male Jedi Exile. The idea of a potential party member only joins you based on your player character's gender already makes little to no sense to begin with, and it does not help that <em>Star Wars Legends</em>, the old <em>Star Wars</em> Expanded Universe, established that both Brianna the Handmaiden and Mical the Disciple join the female Exile's crew.</p>
@ -45,32 +42,33 @@
<p>These are the mods that allow female Exiles to recruit Brianna the Handmaiden as a party member:</p>
<h3>Handmaiden Choice for Females by Stoffe</h3>
<h2>Handmaiden Choice for Females by Stoffe</h2>
<p>Released on April 23, 2005, Stoffe's <a href="https://www.gamefront.com/files/handmaiden-choice-for-females/" target="_blank">Handmaiden Choice for Females</a> was the very first mod that gives female Exiles the option to recruit the Handmaiden. However, it is <em>not</em> compatible with <a href="https://deadlystream.com/files/file/578-tsl-restored-content-mod/" target="_blank">The Sith Lords Restored Content Mod (TSLRCM)</a>, as it was created and released years before TSLRCM. In addition, even with this mod, Handmaiden still refers to a female Exile with “he/him” pronouns, which some people (myself included) would find very immersion-breaking</p>
<h3>Handmaiden 4 Females - Disciple 4 Males by Hassat Hunter</h3>
<h2>Handmaiden 4 Females - Disciple 4 Males by Hassat Hunter</h2>
<p>Released on March 14, 2014, Hassat Hunter made <a href="https://www.moddb.com/mods/the-sith-lords-restored-content-mod-tslrcm/addons/handmaiden-4-females-disciple-4-males-183" traget="_blank">Handmaiden 4 Females - Disciple 4 Males</a> based on Stoffe's Handmaiden Choice for Females, so the mod would be compatible with The Sith Lords Restored Content Mod (TSLRCM). However, this version retains the flaw of Handmaiden still referring to a female Exile with “he/him” pronouns. Additioally, the mod is outdated and no longer supported.</p>
<h3>PartySwap by DarthTyren</h3>
<h2>PartySwap by DarthTyren</h2>
<p>This mod fixes any potential gender and pronouns mix-up by adding gender checks to dialogues that references the Exile’s gender, which, however, also prevents female Exiles from getting any dialogue that references any potential romantic feelings between the female Exile and the Handmaiden or Atris (similarly, if you play as a male Exile, you will not get any dialogue that references any potential romance between you and the Disciple). Therefore, if you also want to romance the Handmaiden as a female Exile (or romance the Disciple as a male Exile), I would recommend checking out the below mod as well.</p>
<h3>Handmaiden and Female Exile - Disciple and Male Exile Romance by Leilukin</h3>
<h2>Handmaiden and Female Exile - Disciple and Male Exile Romance by Leilukin</h2>
<p>My mod, released on January 2, 2017. As the mod name suggests, this mod allows you to recruit and romance the Handmaiden as a female Exile, ditto for the Disciple as a male Exile. My mod also requires <a href="https://deadlystream.com/files/file/578-tsl-restored-content-mod/" target="_blank">The Sith Lords Restored Content Mod (TSLRCM)</a> to work.</p>
<p>My mod fixes any potential gender/pronouns mix-up by editing dialogue and splicing audio, so users of my mod can fully enjoy the Handmaiden and the Disciple's romance content without worrying about their Exile getting misgendered.</p>
<p>The default installation option of my mod will make the Handmaiden automatically joins a female Exile, and the Disciple automatically joins a male Exile. That said, my mod also provides an installation option to make my mod compatible with DarthTyren's PartySwap mod.</p>
<h3>Final Note</h3>
<h2>Final Note</h2>
<p>It is very important to note when it comes to installing mods for <em>KotOR 2</em>, <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 <em>KotOR 2</em>. 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>
</div>
</article>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

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

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,31 +12,28 @@
<meta property="og:description" content="A list of all the modules and their music used by The Sith Lords Restored Content Mod and the M4-78 Enhancement Project, including codes for the warp cheat.">
<link rel="stylesheet" href="/shrines/starwarskotor/starwarskotor.css" type="text/css" media="all">
<link rel="icon" type="image/png" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="/shrines/shrine.js" defer></script>
<script src="/shrines/starwarskotor/starwarskotor.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/shrines/starwarskotor/img/kotor-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<title>TSLRCM + M4-78EP Modules, Warp Codes & Music Overview | Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
<script src="/shrines/starwarskotor/components/header.js" defer></script>
<script src="/shrines/starwarskotor/components/navbar.js" defer></script>
<script src="/shrines/starwarskotor/components/sidebar-content.js" defer></script>
<script src="/shrines/starwarskotor/components/footer.js" defer></script>
<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>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
<nav id="navbar">
</nav>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content" id="leftSidebarContent">
</div>
</aside>
<header-component></header-component>
<main>
<div class="content-section">
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>The Sith Lords Restored Content Mod + M4-78 Enhancement Project Modules, Warp Codes & Music Overview</h1>
<center><p>[Originally posted on <a href="https://deadlystream.com/topic/9541-tslrcm-m4-78ep-modules-warp-codes-music-overview/" target="_blank">Deadly Stream forums</a>]</p></center>
@ -52,12 +49,13 @@
<p>All music tracks are listed with their number corresponding to their row in <span class="monospace">ambientmusic.2da</span>, their file name (the music files can be found in the StreamMusic folder) and their track title as identified with their TLK (<span class="monospace">dialog.tlk</span>) StrRef. I have also included previews of the music by linking to YouTube in the spreadsheet.</p>
<p>Hope you will find this spreadsheet helpful. Enjoy!</p>
</div>
</article>
<aside class="right-sidebar">
<right-sidebar-component></right-sidebar-component>
</aside>
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>

736
shrines/starwarskotor/starwarskotor.css
View File

@ -1,18 +1,36 @@
:root {
--header-image: url('./img/swkotor-header.jpg');
--body-color: #fceaff;
--body-bg: #212121;
--content-bg: #000000;
--content: #43256E;
--title-color: #ffc400;
--title-border: #ffe387;
--code-bg: #241445;
--code-border: #e4dbbe;
--body-bg-color: #212121;
/* --body-bg-image: url('/assets/starsforever.gif'); */
--body-font-color: #fceaff;
--content-bg-color: #000000;
--main-heading-color: #ffc400;
--sub-heading-color: #ffc400;
--title-border-color: #ffe387;
--bold-font-color: #ff9933;
--link-color: #bb9671;
--link-hover: #94575a;
--blockquote-bg: #2f2d2d;
--blockquote-border: #4d4385;
--box-bg: #13092D;
--link-hover-color: #94575a;
--quote-bg: #2f2d2d;
--quote-border-color: #4d4385;
--code-bg-color: #241445;
--code-border-color: #e4dbbe;
--link-btn-bg: #873eb5;
--link-btn-text: white;
--link-btn-hover: #241445;
--header-bg-color: black;
--nav-bg: #1c1c1c;
--nav-link: white;
--nav-submenu-active: #111;
--nav-item-hover: #ccc;
--top-btn-bg: #251347;
--top-btn-icon: #d3aad5;
--footer-bg: #1c1c1c;
}
@font-face {
@ -31,106 +49,461 @@
font-style: italic;
}
html,
body {
scroll-behavior: smooth;
}
body {
font-family: 'Nunito', Arial, sans-serif;
font-size: 1rem; /* 16px */
margin: 0;
background-color: var(--body-bg);
background-size: 4rem;
color: var(--body-color);
background-image: var(--body-bg-image);
background-attachment: fixed;
line-height: 1.6;
}
* {
/* CSS RESET */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3 {
color: var(--title-color);
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* STYLING BEGINS */
body {
display: flex;
align-items: center;
flex-direction: column;
font-family: 'Nunito';
color: var(--body-font-color);
background-color: var(--body-bg-color);
background-image: var(--body-bg-image);
background-attachment: fixed;
}
h1 {
color: var(--main-heading-color);
}
h1 {
margin-bottom: 1.2rem;
}
h2, h3 {
color: var(--sub-heading-color);
}
h1 {
font-size: 2.2rem;
border-bottom: 0.18rem solid var(--title-border);
padding-bottom: 0.5rem;
}
h1:not(:first-child) {
padding-top: 30px;
border-bottom: 0.18rem solid var(--title-border-color);
}
h2 {
font-size: 1.7rem;
}
strong {
color: var(--title-color);
article h2,
article h3 {
margin-top: 1.5rem;
}
hr {
width: 75%;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
p {
padding: 0.5rem 0;;
}
strong {
color: var(--bold-font-color);
}
a {
font-weight: 700;
color: var(--link-color);
}
a:hover {
color: var(--link-hover-color);
}
blockquote {
border-left: var(--blockquote-border) 3px solid;
background: var(--blockquote-bg);
padding: 0 0.75rem;
margin: 0 1.5rem;
margin: 1.5rem 0;
padding: 0.5rem 1rem;
border-inline-start: 0.1rem solid var(--main-heading-color);
background-color: var(--quote-bg);
}
.linkBtn {
font: 1.1rem 'Source Sans Pro', Arial, sans-serif;
border: 0.125rem solid var(--link-color);
border-radius: 10px;
padding: 0.75rem 1rem;
margin: 0.25em 0.15em;
pre {
white-space: pre-wrap;
overflow-x: auto;
}
/* HEADER */
header {
width: 100vw;
max-height: 20rem;
background-color: var(--header-bg-color);
/* background: var(--header-img); */
background-repeat: no-repeat;
background-size: auto;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
}
header img {
object-fit: contain;
height: 100%;
}
/* NAVIGATION BAR */
nav {
background: var(--nav-bg);
padding: 0 0.9rem;
width: 100%;
z-index: 999;
}
nav a {
color: var(--nav-link);
text-decoration: none;
cursor: pointer;
}
.nav__menu,
.nav__submenu {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.nav__title {
font-size: 20px;
padding: 0.2rem 0;
}
.nav__item {
padding: 0.6rem;
}
.nav__item a:hover,
.nav__item a:hover::after {
color: var(--nav-item-hover);
}
/* Mobile nav__menu */
.nav__menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.nav__menu li a {
display: block;
padding: 0.9rem 0.8rem;
}
.nav__menu li.nav__subitem a {
padding: 0.9rem;
}
.nav__toggle {
order: 1;
font-size: 1.25rem;
}
.nav__item {
order: 3;
width: 100%;
text-align: center;
display: none;
}
.nav__active .nav__item {
display: block;
}
/* nav__submenu up from mobile screens */
.nav__submenu {
display: none;
}
.nav__submenu-active .nav__submenu {
display: block;
}
.nav__has-submenu i {
font-size: 0.75rem;
}
.nav__has-submenu > a::after {
font-family: "Font Awesome 5 Free";
font-size: 0.75rem;
line-height: 1.6;
font-weight: 900;
content: "\f078";
color: white;
padding-left: 0.3125rem;
}
.nav__subitem a {
padding: 0.625rem 0.9rem;
}
.nav__submenu-active {
background-color: var(--nav-submenu-active);
border-radius: 0.1875rem;
}
/* Added to the navbar with JS when it reaches its scroll position */
.sticky-nav {
position: fixed;
width: 100vw;
top: 0;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky-nav + main {
padding-top: 3.75rem;
}
/* Tablet nav__menu */
@media all and (min-width: 43.75rem) {
.nav__menu {
justify-content: center;
}
.nav__title {
flex: 1;
}
.nav__toggle {
flex: 1;
text-align: right;
order: 2;
}
}
/* Desktop nav__menu */
@media all and (min-width: 60rem) {
.nav__menu {
align-items: flex-start;
flex-wrap: nowrap;
background: none;
color: var(--link-color);
}
.nav__title {
order: 0;
}
.nav__item {
order: 1;
position: relative;
display: block;
width: auto;
}
.nav__submenu-active .nav__submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background: var(--nav-submenu-active);
}
.nav__toggle {
display: none;
}
.nav__submenu-active {
border-radius: 0;
}
}
/* MAIN CONTENT */
main, .content-container {
gap: 0.8rem;
display: flex;
flex-direction: column;
width: 100%;
}
main {
font-size: 1.2rem;
}
article, .content-section {
background-color: var(--content-bg-color);
padding: 1.35rem;
}
.article-section {
padding: 1.25rem 0;
}
aside {
padding: 1rem;
font-size: 0.9rem;
background-color: var(--content-bg-color);
}
article, .content-container {
order: 1;
}
.left-sidebar {
order: 2;
}
.right-sidebar {
order: 3;
}
/* Tablet main content layout */
@media only screen and (min-width: 43.75rem) {
main {
flex-direction: row;
}
aside {
width: 10rem;
}
article, .content-container {
flex: 1;
order: 2;
}
.left-sidebar {
order: 1;
}
.right-sidebar {
order: 3;
}
}
/* Desktop main content layout */
@media only screen and (min-width: 60rem) {
main {
width: 60rem;
display: flex;
flex-direction: row;
justify-content: center;
}
aside {
width: 13rem;
}
}
/* CONTENT ELEMENTS WITH CUSTOM CLASSES */
.inline-code {
font-family: monospace;
border: 0.06rem solid var(--code-border-color);
padding: 0.125rem 0.3rem;
margin-left: 0.125rem;
margin-right: 0.125rem;
background-color: var(--code-bg-color);
}
.code-snippet {
background-color: var(--code-bg-color);
border: 0.08rem solid var(--code-border-color);
display: block;
padding: 0.5em 0.8rem;
overflow-x: auto;
word-break: keep-all;
}
.text-box {
background-color: var(--quote-bg);
border: 0.06rem solid var(--main-heading-color);
padding: 0.625rem;
margin-bottom: 0.8rem;
}
.link-btn {
font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
display: inline-block;
border: 0.15rem solid var(--link-btn-bg);
border-radius: 0.6rem;
padding: 0.75rem 1rem;
background-color: var(--link-btn-bg);
color: var(--link-btn-text);
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
}
.linkBtn:hover {
.link-btn,
.link-btn:hover,
.link-btn:visited {
text-decoration: none;
}
.link-btn:hover {
cursor: pointer;
color: white;
background-color: var(--link-color);
background-color: var(--link-btn-hover);
transition: 0.5s;
}
span.monospace {
font-family: monospace;
border: 1px solid var(--code-border);
padding: 2px;
background-color: var(--code-bg);
}
.code-snippet {
background-color: var(--code-bg);
border: 1px solid var(--code-border);
display: block;
padding: 0.5em;
overflow-x: auto;
word-break: break-all;
}
.box {
background-color: var(--box-bg);
border: 1px solid var(--title-color);
padding: 10px;
}
.full-width-youtube-video {
position: relative;
padding-bottom: 56.25%;
@ -145,211 +518,36 @@ span.monospace {
height: 100%;
}
/* CONTAINER for wrapping the entire website */
#container {
max-width: 1100px;
/* the width of the layout */
/* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
margin: 0 auto;
/* this centers the entire page */
}
/* For all links on your page EXCEPT for the navigation */
#container a {
color: var(--link-color);
font-weight: bold;
}
#container a:hover {
color: var(--link-hover);
}
#header {
width: 100%;
background-color: var(--content-bg);
height: 480px;
background-image: var(--header-image);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
/* NAVIGATION SECTION */
.sticky-nav {
position: fixed;
top: 0;
max-width: 1100px;
}
#navbar {
height: 2.5rem;
background-color: var(--content-bg);
width: 100%;
margin-bottom: 0.625rem;
z-index: 999;
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding-top: 0.625rem;
}
#navbar li a {
color: var(--link-color);
/* navbar text color */
font-weight: 800;
text-decoration: none;
/* this removes the underline */
}
#navbar li a:hover {
color: var(--link-hover);
text-decoration: underline;
}
#flex {
display: flex;
}
/* EXTRAS */
#topBar {
width: 100%;
height: 1.875rem;
padding: 0.625rem;
font-size: smaller;
background-color: var(--box-bg);
}
/* MAIN CONTENT AREA, between the sidebars */
main {
font-size: 1.2rem;
flex: 1;
order: 2;
}
.content-section {
background-color: var(--content-bg);
padding: 1.25rem;
}
.content-section:not(:first-child) {
margin-top: 0.625rem;
}
/* This colors BOTH sidebars
If you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
background-color: var(--content-bg);
width: 12.5rem;
padding: 1.25rem;
font-size: smaller;
/* this makes the sidebar text slightly smaller */
}
aside h1, aside h2, aside h3 {
margin-bottom: 0;
}
aside ul {
margin-top: 0.5rem;
}
aside .box ul {
padding-left: 1.25rem;
}
#leftSidebar {
order: 1;
margin-right: 1.25rem;
}
#rightSidebar {
order: 3;
margin-left: 1.25rem;
}
.sidebar-content {
position: sticky;
top: 40px;
font-size: 0.9rem;
}
/* TABLE OF CONTENTS */
.sidebar__toc {
position: sticky;
top: 5rem;
}
.toc-title {
.sidebar__toc-title {
font-size: 1.3rem;
font-weight: bold;
}
.toc-list {
.sidebar__toc-list {
list-style: none;
margin-left: 0;
padding-left: 0;
font-size: 1rem;
}
.toc-list li {
.sidebar__toc-list li {
margin-bottom: 0.5em;
}
.sidebar__toc-list ul {
padding-left: 1.25rem;
}
/* FOOTER */
footer {
background-color: var(--content-bg);
width: 100%;
height: 2.5rem;
background-color: var(--footer-bg);
width: 100vw;
padding: 0.5rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.25rem;
}
/* MEDIA QUERY STARTS HERE */
/* To keep things responsive,
if you want to change the width of your page,
take your new width of the #container, and then subtrack it by 100.
Use this new number as the "max-width" value below */
@media only screen and (max-width: 1000px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
/* the order of the items is adjusted here for responsiveness.
since the sidebars would be too small on a mobile device. */
main {
order: 1;
}
#leftSidebar {
order: 2;
margin-right: 1.25rem;
}
#rightSidebar {
order: 3;
margin-left: 1.25rem;
}
#navbar ul {
flex-wrap: wrap;
}
}

21
shrines/starwarskotor/starwarskotor.js
View File

@ -1,21 +0,0 @@
/* --- SCRIPT FOR THE NAVIGATION BAR --- */
var navBarHTML = `
<ul>
<li><a href="/shrines/starwarskotor/">Home</a></li>
<li><a href="/shrines/starwarskotor/articles/">Articles</a></li>
<li><a href="/shrines/starwarskotor/guides/">Guides</a></li>
<li><a href="/shrines/starwarskotor/resources/">Resources</a></li>
<li><a href="/home.html">Main Site</a></li>
</ul>
`;
document.querySelector("#navbar").innerHTML = navBarHTML;
/* --- SCRIPT FOR THE RIGHT SIDEBAR --- */
var leftSidebarHTML = `
<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>
`;
document.querySelector("#leftSidebarContent").innerHTML = leftSidebarHTML;

41
sitemap.html
View File

@ -1,43 +1,38 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:url" content="https://leilukin.neocities.org/sitemap.html">
<meta property="og:type" content="website">
<meta property="og:url" content="https://leilukin.neocities.org/sitemap">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:title" content="Site Map | Leilukin's Hub">
<meta property="og:description" content="Site map of Leilukin's Hub">
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="/main.js" defer></script>
<script src="/components/header.js" defer></script>
<script src="/components/navbar.js" defer></script>
<script src="/components/footer.js" defer></script>
<title>Site Map | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="headerArea">
<div id="header"></div>
</div>
<div id="flex">
<aside id="leftSidebar">
<div class="sidebar-content">
<div id="leftSidebarContent"></div>
</div>
</aside>
<header-component></header-component>
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
<article>
<h1>Site Map</h1>
<p>This page lists the links to the pages on my website for easier navigation.</p>
@ -105,12 +100,12 @@
<li><a href="/changelog/layouts/">Layout Archive</a></li>
</ul>
</ul>
</article>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
</div>
<footer id="footer"></footer>
</div>
<footer-component></footer-component>
</body>
</html>