Remove _site output folder from repository
This commit is contained in:
Helen Chong
parent
61650c9196
commit
fddfc451c2
|
|
@ -1,7 +1,12 @@
|
|||
# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
|
||||
|
||||
# Working files for my website
|
||||
__Source
|
||||
|
||||
__Source/
|
||||
|
||||
# Eleventy site output folder
|
||||
|
||||
_site/
|
||||
|
||||
# Logs
|
||||
|
||||
|
|
|
|||
|
|
@ -1,629 +0,0 @@
|
|||
<!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:title" content="About">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="About this website and its owner.">
|
||||
<meta name="generator" content="Eleventy v2.0.1">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://leilukin.neocities.org/about/">
|
||||
<meta property="og:site_name" content="Leilukin's Hub">
|
||||
<meta property="og:locale" content="en_MY">
|
||||
<meta property="og:description" content="About this website and its owner.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content="https://leilukin.neocities.org/about/">
|
||||
<meta name="twitter:description" content="About this website and its owner.">
|
||||
<link rel="canonical" href="https://leilukin.neocities.org/about/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts/lexend/lexend.css">
|
||||
|
||||
|
||||
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<title>
|
||||
About | Leilukin's Hub
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="hero__top-bar hidden"></div>
|
||||
<div class="hero__img">
|
||||
|
||||
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
width: 100%;
|
||||
background-color: var(--clr-hero-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero__top-bar {
|
||||
background-color: var(--clr-navbar-bg);
|
||||
width: 100%;
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
max-height: 16rem;
|
||||
|
||||
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const hero = document.querySelector(".hero");
|
||||
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
||||
const headerImgEl = document.querySelector(".hero__img");
|
||||
|
||||
|
||||
const todayEvent = getTodayEvent();
|
||||
|
||||
if (todayEvent) {
|
||||
heroTopBarEl.classList.remove('hidden');
|
||||
heroTopBarEl.innerHTML = todayEvent.blurb;
|
||||
|
||||
if (todayEvent.class) {
|
||||
headerImgEl.classList.add(todayEvent.class);
|
||||
}
|
||||
}
|
||||
|
||||
function getTodayEvent() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const year = date.getFullYear();
|
||||
const weekOfMonth = Math.ceil(day / 7);
|
||||
|
||||
const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
|
||||
const siteAnniversary = year - leilukinsHubLaunchDate;
|
||||
|
||||
if (month === 3 && day === 1)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day">Zero Discrimination Day</a>`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 3 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.internationalwomensday.com/">International Women's Day}</a>`,
|
||||
class: "symbol-venus",
|
||||
};
|
||||
else if (month === 3 && day === 31)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html">Trans Day of Visibility</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else if (month === 4 && day === 6)
|
||||
return {
|
||||
blurb: `Today is <a href="https://internationalasexualityday.org/en">International Asexuality Day</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 4 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 4 && weekOfMonth === 4)
|
||||
return {
|
||||
blurb: `This week is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Week</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 5 && day === 17)
|
||||
return {
|
||||
blurb: `Today is <a href="https://may17.org">International Day Against Homophobia, Biphobia and Transphobia</a>`,
|
||||
class: "flag-progress",
|
||||
};
|
||||
else if (month === 5 && day === 19)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/">Agender Pride Day</a>`,
|
||||
class: "flag-agender",
|
||||
};
|
||||
else if (month === 5 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday">Pansexual and Panromantic Awareness and Visibility Day</a>`,
|
||||
class: "flag-pan",
|
||||
};
|
||||
else if (month === 6)
|
||||
return {
|
||||
blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/">Pride Month</a>!`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 7 && day === 14)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html">Non-Binary People's Day</a>`,
|
||||
class: "flag-non-binary",
|
||||
};
|
||||
else if (month === 7 && day === 28)
|
||||
return {
|
||||
blurb: `Today is Leilukin's Birthday`
|
||||
};
|
||||
else if (month === 8 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://aromanticspectrumday.net/">Aromantic Spectrum Visibility Day</a>`,
|
||||
class: "flag-aro",
|
||||
};
|
||||
else if (month === 9 && day === 11)
|
||||
return {
|
||||
blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin's Hub`
|
||||
};
|
||||
else if (month === 9 && day === 23)
|
||||
return {
|
||||
blurb: `Today is <a href="https://bivisibilityday.com/about">Bi Visibility Day</a>`,
|
||||
class: "flag-bi",
|
||||
};
|
||||
else if (month === 10 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2">International Lesbian Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 10 && day === 11)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day">National Coming Out Day</a>`,
|
||||
class: "flag-rainbow",
|
||||
};
|
||||
else if (month === 10 && day === 17)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week">Genderfluid Visibility Week</a>`,
|
||||
class: "flag-genderfluid",
|
||||
};
|
||||
else if (month === 10 && day === 24)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week">Ace Week</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 10 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day">Intersex Awareness Day</a>`,
|
||||
class: "flag-intersex",
|
||||
};
|
||||
else if (month === 11 && day === 13)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://glaad.org/transweek/">Transgender Awareness Week</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
</script>
|
||||
<nav class="navbar">
|
||||
<button class="navbar__toggle" aria-label="Navigation menu toggle">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
<h2 class="navbar__title">Navigation</h2>
|
||||
</button>
|
||||
<ul class="navbar__links">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a aria-current="page" href="/about/">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/now/">Now</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/projects/">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/shrines/">Shrines</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/links/">Links</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/guestbook/">Guestbook</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
background: var(--clr-navbar-bg);
|
||||
padding: 0.6em 1em;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar__toggle,
|
||||
.navbar__title {
|
||||
color: var(--clr-navbar-link);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.navbar__toggle:focus,
|
||||
.navbar a:focus {
|
||||
outline: 0.15em solid var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--clr-navbar-link);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: var(--clr-link-hover);
|
||||
}
|
||||
|
||||
.navbar a:focus {
|
||||
outline-offset: 0.3em;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
list-style: none;
|
||||
display: none;
|
||||
gap: 1em;
|
||||
padding: 0.5em 1.8em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.navbar__links--show {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.navbar {
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const navbarToggle = document.querySelector('.navbar__toggle');
|
||||
const navbarLinks = document.querySelector(".navbar__links");
|
||||
|
||||
navbarToggle.addEventListener('click', () => {
|
||||
navbarLinks.classList.toggle("navbar__links--show");
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<header class="main__header">
|
||||
|
||||
|
||||
|
||||
<h1>About</h1>
|
||||
|
||||
<p>About this website and its owner.</p>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content__wrapper">
|
||||
|
||||
|
||||
|
||||
<div class="content content--divided">
|
||||
|
||||
<section class="content__section">
|
||||
<h2>The Site</h2>
|
||||
|
||||
<p>This website serves as a personal hub for my interests and self-expression, as well as my own corner on the internet outside social media platforms.</p>
|
||||
|
||||
<p>On this site, you can find various stuff and resources I have created or compiled, as well as articles dedicated to my interests.</p>
|
||||
|
||||
<p>While the primary purpose of this website is my own space of self-expression, I also want my website to be accessible to viewers. Therefore, I strive to design this website to be mobile-friendly and accessible to provide the best user experience.</p>
|
||||
|
||||
<p>Feel free to drop a message and say hi on <a href="/guestbook">my guestbook</a>!</p>
|
||||
|
||||
<p>You can link to my website with this button:</p>
|
||||
|
||||
<div class="site-btn__container">
|
||||
<div>
|
||||
<a href="https://leilukin.neocities.org/"><img src="/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a>
|
||||
</div>
|
||||
<textarea aria-label="HTML of Leilukin's Hub website button" class="site-btn__textarea textarea-for-copy" rows="4"><a href="https://leilukin.neocities.org/"><img src="https://leilukin.neocities.org/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a></textarea>
|
||||
<button class="copy-txt-btn">Copy HTML</button>
|
||||
</div>
|
||||
|
||||
<p>Credit to <a href="https://github.com/hekate2">hekate2</a> for their <a href="https://hekate2.github.io/buttonmaker/">88x31 Web Button Maker</a>!</p>
|
||||
|
||||
<style>
|
||||
.site-btn__container {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.site-btn__textarea {
|
||||
width: 10rem;
|
||||
height: 4rem;
|
||||
font-size: 0.75rem;
|
||||
background-color:black;
|
||||
color: var(--clr-body-txt);
|
||||
}
|
||||
|
||||
.copy-txt-btn {
|
||||
border: none;
|
||||
background: var(--clr-link-btn-bg);
|
||||
color: var(--clr-body-txt);
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.copy-txt-btn:hover {
|
||||
background: var(--clr-link-hover);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
document.querySelector(".copy-txt-btn").onclick = () => {
|
||||
document.querySelector(".textarea-for-copy").select();
|
||||
document.execCommand('copy');
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<p>If you also have a Neocities account, you can follow this site through its <a href="https://neocities.org/site/leilukin">Neocities profile</a>.</p>
|
||||
|
||||
<img src="/assets/banners/hosted-by-neocities.png" alt="A website button with Penelope the cat, the mascot of Neocities, and the text 'hosted by neocities'" title="Hosted by Neocities" style="margin-top: 0.5em;">
|
||||
|
||||
<h3>Technical Information</h3>
|
||||
|
||||
<p>This website is built with the static site generator <a href="https://www.11ty.dev/">Eleventy</a>. Nunjucks and Markdown are the templating languages used for creating pages of this site.</p>
|
||||
|
||||
<p>This website is deployed to Neocities from a GitHub repository through the GitHub action <a href="https://deploy-to-neocities.neocities.org/">deploy-to-neocities</a>.</p>
|
||||
</section>
|
||||
|
||||
<sectioin class="content__section">
|
||||
<h2>The Site Owner</h2>
|
||||
|
||||
<img src="/assets/leilukin/leilukin-bee.png" alt="Avatar of a drawing of Leilukin bee" style="border-radius: 50%; width: 15rem; margin: 0.5em auto;">
|
||||
|
||||
<p>You can call me Leilukin. I am a Malaysian Chinese, queer, non-binary lesbian born in the early 90s. My pronouns are they/she/他/她.</p>
|
||||
|
||||
<p>I speak Mandarin, English, Cantonese and Malay, though I am most fluent in Mandarin and English.</p>
|
||||
|
||||
<p>I am also autistic, so I use this website as a platform to catalogue my interests.</p>
|
||||
|
||||
<p>Social media platforms you can find me on:<br>
|
||||
<i class="fa-brands fa-tumblr"></i> <a href="https://lesbiannova.tumblr.com/">Tumblr</a> |
|
||||
<i class="fa-brands fa-youtube"></i> <a href="https://www.youtube.com/Leilukin">YouTube</a> |
|
||||
<i class="fa-brands fa-twitter"></i> <a href="https://twitter.com/Leilukin">Twitter</a> |
|
||||
<i class="fa-brands fa-mastodon"></i> <a href="https://mstdn.social/@leilukin">Mastodon</a> |
|
||||
<i class="fa-brands fa-mastodon"></i> <a href="https://elekk.xyz/@leilukin">Mastodon (for gaming)</a> |
|
||||
<i class="fa-brands fa-bluesky"></i> <a href="https://bsky.app/profile/leilukin.bsky.social">Bluesky</a> |
|
||||
<i class="fa-brands fa-instagram"></i> <a href="https://www.instagram.com/leilukin">Instagram</a>
|
||||
</p>
|
||||
|
||||
<p>However, I am most active on Tumblr, so if you want to interact with me on a social media platform, Tumblr would be the best option.</p>
|
||||
|
||||
<p>I also have media catalogues online on the following platforms:<br>
|
||||
<i class="fa-brands fa-steam-symbol"></i> <a href="https://steamcommunity.com/id/leilukin/">Steam</a> |
|
||||
<i class="fa-solid fa-book-open"></i> <a href="https://app.thestorygraph.com/profile/leilukin">The StoryGraph</a>
|
||||
</p>
|
||||
|
||||
<p>You can contact me via email: <a href="mailto:leilukin@outlook.com">leilukin@outlook.com</a>.</p>
|
||||
|
||||
<p><a href="/now">Check out my Now page</a> to learn what I am doing right now.</p>
|
||||
|
||||
<p>If you enjoy my work, you can support me on Ko-Fi or Buy Me a Coffee:</p>
|
||||
<div class="support-me">
|
||||
<!-- Ko-Fi button -->
|
||||
<script webc:keep webc:bucket="defer" type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script>
|
||||
<script webc:keep webc:bucket="defer" type='text/javascript'>kofiwidget2.init('Support Me on Ko-fi', '#7A37A3', 'A1042UH4');kofiwidget2.draw();</script>
|
||||
<!-- Buy Me a Coffee button -->
|
||||
<script webc:keep 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>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.support-me {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
</style>
|
||||
</sectioin>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.7em 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.breadcrumbs li::after {
|
||||
content: '➔';
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
||||
|
||||
|
||||
<ul class="footer__links">
|
||||
<li><a
|
||||
|
||||
href="/sitemap/
|
||||
">Site Map</a></li>
|
||||
<li><a
|
||||
|
||||
href="/changelogs/"
|
||||
>Changelogs</a></li>
|
||||
<li><a href="/feed.xml">RSS</a></li>
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
background: var(--clr-main-footer-bg);
|
||||
padding: 1rem 1rem 3rem 1rem;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.footer__links li:not(:last-child)::after {
|
||||
content: '|';
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
/* Screen sizes larger than mobile */
|
||||
@media only screen and (min-width: 30rem) {
|
||||
.footer {
|
||||
padding: 1rem 1rem 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button class="top-btn hidden" aria-label="Scroll to top">
|
||||
<i class="fa-solid fa-chevron-up"></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: var(--clr-top-btn-bg);
|
||||
color: var(--clr-top-btn-txt);
|
||||
border-radius: 50em;
|
||||
width: 2rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.top-btn:focus {
|
||||
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const topButton = document.querySelector(".top-btn");
|
||||
|
||||
window.onscroll = () => {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
topButton.classList.remove("hidden");
|
||||
} else {
|
||||
topButton.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
topButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,863 +0,0 @@
|
|||
<!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:title" content="Content Archive">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="All contents published on Leilukin's Hub.">
|
||||
<meta name="generator" content="Eleventy v2.0.1">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://leilukin.neocities.org/archive/">
|
||||
<meta property="og:site_name" content="Leilukin's Hub">
|
||||
<meta property="og:locale" content="en_MY">
|
||||
<meta property="og:description" content="All contents published on Leilukin's Hub.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content="https://leilukin.neocities.org/archive/">
|
||||
<meta name="twitter:description" content="All contents published on Leilukin's Hub.">
|
||||
<link rel="canonical" href="https://leilukin.neocities.org/archive/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts/lexend/lexend.css">
|
||||
|
||||
|
||||
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<title>
|
||||
Content Archive | Leilukin's Hub
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="hero__top-bar hidden"></div>
|
||||
<div class="hero__img">
|
||||
|
||||
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
width: 100%;
|
||||
background-color: var(--clr-hero-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero__top-bar {
|
||||
background-color: var(--clr-navbar-bg);
|
||||
width: 100%;
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
max-height: 16rem;
|
||||
|
||||
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const hero = document.querySelector(".hero");
|
||||
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
||||
const headerImgEl = document.querySelector(".hero__img");
|
||||
|
||||
|
||||
const todayEvent = getTodayEvent();
|
||||
|
||||
if (todayEvent) {
|
||||
heroTopBarEl.classList.remove('hidden');
|
||||
heroTopBarEl.innerHTML = todayEvent.blurb;
|
||||
|
||||
if (todayEvent.class) {
|
||||
headerImgEl.classList.add(todayEvent.class);
|
||||
}
|
||||
}
|
||||
|
||||
function getTodayEvent() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const year = date.getFullYear();
|
||||
const weekOfMonth = Math.ceil(day / 7);
|
||||
|
||||
const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
|
||||
const siteAnniversary = year - leilukinsHubLaunchDate;
|
||||
|
||||
if (month === 3 && day === 1)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day">Zero Discrimination Day</a>`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 3 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.internationalwomensday.com/">International Women's Day}</a>`,
|
||||
class: "symbol-venus",
|
||||
};
|
||||
else if (month === 3 && day === 31)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html">Trans Day of Visibility</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else if (month === 4 && day === 6)
|
||||
return {
|
||||
blurb: `Today is <a href="https://internationalasexualityday.org/en">International Asexuality Day</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 4 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 4 && weekOfMonth === 4)
|
||||
return {
|
||||
blurb: `This week is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Week</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 5 && day === 17)
|
||||
return {
|
||||
blurb: `Today is <a href="https://may17.org">International Day Against Homophobia, Biphobia and Transphobia</a>`,
|
||||
class: "flag-progress",
|
||||
};
|
||||
else if (month === 5 && day === 19)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/">Agender Pride Day</a>`,
|
||||
class: "flag-agender",
|
||||
};
|
||||
else if (month === 5 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday">Pansexual and Panromantic Awareness and Visibility Day</a>`,
|
||||
class: "flag-pan",
|
||||
};
|
||||
else if (month === 6)
|
||||
return {
|
||||
blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/">Pride Month</a>!`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 7 && day === 14)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html">Non-Binary People's Day</a>`,
|
||||
class: "flag-non-binary",
|
||||
};
|
||||
else if (month === 7 && day === 28)
|
||||
return {
|
||||
blurb: `Today is Leilukin's Birthday`
|
||||
};
|
||||
else if (month === 8 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://aromanticspectrumday.net/">Aromantic Spectrum Visibility Day</a>`,
|
||||
class: "flag-aro",
|
||||
};
|
||||
else if (month === 9 && day === 11)
|
||||
return {
|
||||
blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin's Hub`
|
||||
};
|
||||
else if (month === 9 && day === 23)
|
||||
return {
|
||||
blurb: `Today is <a href="https://bivisibilityday.com/about">Bi Visibility Day</a>`,
|
||||
class: "flag-bi",
|
||||
};
|
||||
else if (month === 10 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2">International Lesbian Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 10 && day === 11)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day">National Coming Out Day</a>`,
|
||||
class: "flag-rainbow",
|
||||
};
|
||||
else if (month === 10 && day === 17)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week">Genderfluid Visibility Week</a>`,
|
||||
class: "flag-genderfluid",
|
||||
};
|
||||
else if (month === 10 && day === 24)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week">Ace Week</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 10 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day">Intersex Awareness Day</a>`,
|
||||
class: "flag-intersex",
|
||||
};
|
||||
else if (month === 11 && day === 13)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://glaad.org/transweek/">Transgender Awareness Week</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
</script>
|
||||
<nav class="navbar">
|
||||
<button class="navbar__toggle" aria-label="Navigation menu toggle">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
<h2 class="navbar__title">Navigation</h2>
|
||||
</button>
|
||||
<ul class="navbar__links">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/now/">Now</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/projects/">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/shrines/">Shrines</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/links/">Links</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/guestbook/">Guestbook</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
background: var(--clr-navbar-bg);
|
||||
padding: 0.6em 1em;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar__toggle,
|
||||
.navbar__title {
|
||||
color: var(--clr-navbar-link);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.navbar__toggle:focus,
|
||||
.navbar a:focus {
|
||||
outline: 0.15em solid var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--clr-navbar-link);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: var(--clr-link-hover);
|
||||
}
|
||||
|
||||
.navbar a:focus {
|
||||
outline-offset: 0.3em;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
list-style: none;
|
||||
display: none;
|
||||
gap: 1em;
|
||||
padding: 0.5em 1.8em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.navbar__links--show {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.navbar {
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const navbarToggle = document.querySelector('.navbar__toggle');
|
||||
const navbarLinks = document.querySelector(".navbar__links");
|
||||
|
||||
navbarToggle.addEventListener('click', () => {
|
||||
navbarLinks.classList.toggle("navbar__links--show");
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<header class="main__header">
|
||||
|
||||
|
||||
|
||||
<h1>Content Archive</h1>
|
||||
|
||||
<p>All contents published on Leilukin's Hub.</p>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content__wrapper">
|
||||
|
||||
|
||||
|
||||
<div class="content ">
|
||||
|
||||
|
||||
<ul class="item-list">
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2024-05-14-james-somerton-my-vide-game-footage/">
|
||||
James Somerton Used My Video Game Footage Without Credit or Permission | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>14 May 2024</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/">
|
||||
List of Star Wars: Knights of the Old Republic II Mods that Allow Female Exiles to Recruit the Handmaiden as a Party Member | Resources
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>7 May 2024</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/">
|
||||
Happy Lesbian Visibility Day and 1-Year Anniversary of Cassette Beasts | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>27 April 2024</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">
|
||||
April 2024 Leilukin's Hub Overhaul with Eleventy | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>21 April 2024</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/">
|
||||
The Sith Lords Restored Content Mod + M4-78 Enhancement Project Modules, Warp Codes & Music Overview | Resources
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>20 April 2024</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/">
|
||||
List of Same-Gender Romance Mods for Star Wars: Knights of the Old Republic Series | Resources
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>20 April 2024</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/">
|
||||
I Received a Lifetime Premium Membership on Nexus Mods for Free | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>6 March 2024</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/">
|
||||
Finally Beat A Bug's Life The Video Game — 24 Years Later | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>20 November 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/">
|
||||
I Can Finally Game on a Solid-State Drive | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>19 November 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/">
|
||||
Support for My Steam Review of A Summer’s End — Hong Kong 1986 | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>30 October 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/">
|
||||
My Cassette Beasts Pombomb Plushie Arrived! | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>13 October 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/">
|
||||
Happy 1st Anniversary to Leilukin's Hub | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>11 September 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/articles/tslrcm-first-kotor2-playthrough/">
|
||||
Should You Use The Sith Lords Restored Content Mod in Your First Star Wars: KotOR 2 Playthrough? | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>30 August 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/cassettebeasts/articles/cassette-beasts-more-than-a-pokemon-clone/">
|
||||
How Cassette Beasts is Much More than a Pokémon Clone | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>26 August 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/articles/designated-lesbian-syndrome-fandom/">
|
||||
Designated Lesbian Syndrome in Fandom | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>18 August 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/articles/my-dislike-of-shipping-culture/">
|
||||
My Disinterest in Shipping and Dislike of Shipping Culture | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>14 August 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/">
|
||||
My First Birthday After the Launch of Leilukin's Hub | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>28 July 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/articles/partyswap-management-takeover/">
|
||||
On Me Taking Over the Management and Development of DarthTyren's PartySwap Mod | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>12 July 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/articles/keep-juhani-a-lesbian/">
|
||||
Keep Juhani a Lesbian and Keep Juhani's Romance Exclusive to Female Characters | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>28 June 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/">
|
||||
June 2023 Leilukin's Hub Layout Rewrite | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>23 June 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/">
|
||||
Onboard the Dracula Daily Hype Train | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>9 May 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/articles/anti-harry-potter-jk-rowling-masterlist/">
|
||||
Anti-Harry Potter and Anti-J. K. Rowling Masterlist | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>19 March 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">
|
||||
Leilukin's Hub Now has a Blog! | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>28 January 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/">
|
||||
2023 New Year Redesign of Leilukin's Hub | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>26 January 2023</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/articles/juhani-hostility-towards-canderous/">
|
||||
How to Access Juhani's Conversaion about Canderous without Restoration Mods | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>11 October 2022</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/articles/lgbtq-booklet-interview-misi-bawang/">
|
||||
Floating in a Sky Full of Pride: LGBTQ+ Booklet Artist Interview from MISI:Bawang | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>11 September 2022</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/articles/kotor2-modder-interview-ars-technica/">
|
||||
The modders who spent 15 years fixing Knights of the Old Republic 2 @ Ars Technica | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>11 September 2022</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/articles/faq-same-gender-romance-mods/">
|
||||
Frequently Asked Questions (FAQ) for My Star Wars: KotOR Same-Gender Romance Mods | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>25 September 2021</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/articles/arren-kae-kreia-theory/">
|
||||
Why I Personally Do Not Subscribe to the “Arren Kae is Kreia” Theory | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>27 January 2021</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/articles/handmaiden-sisters-mother/">
|
||||
Where is the Mother of the Handmaiden's Sisters? | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>19 February 2020</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide/">
|
||||
Sandral-Matale Feud Ending Guide | Guides
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>22 September 2018</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/">
|
||||
Redeeming Bastila Guide | Guides
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>16 September 2018</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/articles/juhani-lesbian-evidence/">
|
||||
Evidence of Juhani being a Lesbian from Star Wars: Knights of the Old Republic's Game Files | Articles
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>15 July 2017</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="item-list__title">
|
||||
<a href="/shrines/starwarskotor/guides/kotor-juhani-romance-guide/">
|
||||
Juhani Romance Guide | Guides
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>5 March 2016</time>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
.item-list {
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.item-list__title {
|
||||
font-size: clamp(1.55rem, 1rem + 3vw, 1.2rem);
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.7em 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.breadcrumbs li::after {
|
||||
content: '➔';
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
||||
|
||||
|
||||
<ul class="footer__links">
|
||||
<li><a
|
||||
|
||||
href="/sitemap/
|
||||
">Site Map</a></li>
|
||||
<li><a
|
||||
|
||||
href="/changelogs/"
|
||||
>Changelogs</a></li>
|
||||
<li><a href="/feed.xml">RSS</a></li>
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
background: var(--clr-main-footer-bg);
|
||||
padding: 1rem 1rem 3rem 1rem;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.footer__links li:not(:last-child)::after {
|
||||
content: '|';
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
/* Screen sizes larger than mobile */
|
||||
@media only screen and (min-width: 30rem) {
|
||||
.footer {
|
||||
padding: 1rem 1rem 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button class="top-btn hidden" aria-label="Scroll to top">
|
||||
<i class="fa-solid fa-chevron-up"></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: var(--clr-top-btn-bg);
|
||||
color: var(--clr-top-btn-txt);
|
||||
border-radius: 50em;
|
||||
width: 2rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.top-btn:focus {
|
||||
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const topButton = document.querySelector(".top-btn");
|
||||
|
||||
window.onscroll = () => {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
topButton.classList.remove("hidden");
|
||||
} else {
|
||||
topButton.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
topButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,665 +0,0 @@
|
|||
<!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:title" content="Anti-Harry Potter and Anti-J. K. Rowling Masterlist | Articles">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="My masterlist of criticisms of the Harry Potter series and J. K. Rowling.">
|
||||
<meta name="generator" content="Eleventy v2.0.1">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://leilukin.neocities.org/articles/anti-harry-potter-jk-rowling-masterlist/">
|
||||
<meta property="og:site_name" content="Leilukin's Hub">
|
||||
<meta property="og:locale" content="en_MY">
|
||||
<meta property="og:description" content="My masterlist of criticisms of the Harry Potter series and J. K. Rowling.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content="https://leilukin.neocities.org/articles/anti-harry-potter-jk-rowling-masterlist/">
|
||||
<meta name="twitter:description" content="My masterlist of criticisms of the Harry Potter series and J. K. Rowling.">
|
||||
<link rel="canonical" href="https://leilukin.neocities.org/articles/anti-harry-potter-jk-rowling-masterlist/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts/lexend/lexend.css">
|
||||
|
||||
|
||||
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<title>
|
||||
Anti-Harry Potter and Anti-J. K. Rowling Masterlist | Articles | Leilukin's Hub
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="hero__top-bar hidden"></div>
|
||||
<div class="hero__img">
|
||||
|
||||
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
width: 100%;
|
||||
background-color: var(--clr-hero-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero__top-bar {
|
||||
background-color: var(--clr-navbar-bg);
|
||||
width: 100%;
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
max-height: 16rem;
|
||||
|
||||
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const hero = document.querySelector(".hero");
|
||||
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
||||
const headerImgEl = document.querySelector(".hero__img");
|
||||
|
||||
|
||||
const todayEvent = getTodayEvent();
|
||||
|
||||
if (todayEvent) {
|
||||
heroTopBarEl.classList.remove('hidden');
|
||||
heroTopBarEl.innerHTML = todayEvent.blurb;
|
||||
|
||||
if (todayEvent.class) {
|
||||
headerImgEl.classList.add(todayEvent.class);
|
||||
}
|
||||
}
|
||||
|
||||
function getTodayEvent() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const year = date.getFullYear();
|
||||
const weekOfMonth = Math.ceil(day / 7);
|
||||
|
||||
const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
|
||||
const siteAnniversary = year - leilukinsHubLaunchDate;
|
||||
|
||||
if (month === 3 && day === 1)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day">Zero Discrimination Day</a>`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 3 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.internationalwomensday.com/">International Women's Day}</a>`,
|
||||
class: "symbol-venus",
|
||||
};
|
||||
else if (month === 3 && day === 31)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html">Trans Day of Visibility</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else if (month === 4 && day === 6)
|
||||
return {
|
||||
blurb: `Today is <a href="https://internationalasexualityday.org/en">International Asexuality Day</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 4 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 4 && weekOfMonth === 4)
|
||||
return {
|
||||
blurb: `This week is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Week</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 5 && day === 17)
|
||||
return {
|
||||
blurb: `Today is <a href="https://may17.org">International Day Against Homophobia, Biphobia and Transphobia</a>`,
|
||||
class: "flag-progress",
|
||||
};
|
||||
else if (month === 5 && day === 19)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/">Agender Pride Day</a>`,
|
||||
class: "flag-agender",
|
||||
};
|
||||
else if (month === 5 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday">Pansexual and Panromantic Awareness and Visibility Day</a>`,
|
||||
class: "flag-pan",
|
||||
};
|
||||
else if (month === 6)
|
||||
return {
|
||||
blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/">Pride Month</a>!`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 7 && day === 14)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html">Non-Binary People's Day</a>`,
|
||||
class: "flag-non-binary",
|
||||
};
|
||||
else if (month === 7 && day === 28)
|
||||
return {
|
||||
blurb: `Today is Leilukin's Birthday`
|
||||
};
|
||||
else if (month === 8 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://aromanticspectrumday.net/">Aromantic Spectrum Visibility Day</a>`,
|
||||
class: "flag-aro",
|
||||
};
|
||||
else if (month === 9 && day === 11)
|
||||
return {
|
||||
blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin's Hub`
|
||||
};
|
||||
else if (month === 9 && day === 23)
|
||||
return {
|
||||
blurb: `Today is <a href="https://bivisibilityday.com/about">Bi Visibility Day</a>`,
|
||||
class: "flag-bi",
|
||||
};
|
||||
else if (month === 10 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2">International Lesbian Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 10 && day === 11)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day">National Coming Out Day</a>`,
|
||||
class: "flag-rainbow",
|
||||
};
|
||||
else if (month === 10 && day === 17)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week">Genderfluid Visibility Week</a>`,
|
||||
class: "flag-genderfluid",
|
||||
};
|
||||
else if (month === 10 && day === 24)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week">Ace Week</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 10 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day">Intersex Awareness Day</a>`,
|
||||
class: "flag-intersex",
|
||||
};
|
||||
else if (month === 11 && day === 13)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://glaad.org/transweek/">Transgender Awareness Week</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
</script>
|
||||
<nav class="navbar">
|
||||
<button class="navbar__toggle" aria-label="Navigation menu toggle">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
<h2 class="navbar__title">Navigation</h2>
|
||||
</button>
|
||||
<ul class="navbar__links">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/now/">Now</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/projects/">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/shrines/">Shrines</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/links/">Links</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/guestbook/">Guestbook</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
background: var(--clr-navbar-bg);
|
||||
padding: 0.6em 1em;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar__toggle,
|
||||
.navbar__title {
|
||||
color: var(--clr-navbar-link);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.navbar__toggle:focus,
|
||||
.navbar a:focus {
|
||||
outline: 0.15em solid var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--clr-navbar-link);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: var(--clr-link-hover);
|
||||
}
|
||||
|
||||
.navbar a:focus {
|
||||
outline-offset: 0.3em;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
list-style: none;
|
||||
display: none;
|
||||
gap: 1em;
|
||||
padding: 0.5em 1.8em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.navbar__links--show {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.navbar {
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const navbarToggle = document.querySelector('.navbar__toggle');
|
||||
const navbarLinks = document.querySelector(".navbar__links");
|
||||
|
||||
navbarToggle.addEventListener('click', () => {
|
||||
navbarLinks.classList.toggle("navbar__links--show");
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<header class="main__header">
|
||||
|
||||
<ul class="breadcrumbs">
|
||||
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h1>Anti-Harry Potter and Anti-J. K. Rowling Masterlist</h1>
|
||||
<div class="article__info">
|
||||
<p>Posted on 19 March 2023 by Leilukin
|
||||
|
||||
• Last updated on 21 April 2024</p>
|
||||
|
||||
|
||||
<p>Categories:
|
||||
|
||||
<a href="/categories/anti-harry-potter">anti harry potter</a>,
|
||||
|
||||
<a href="/categories/anti-jk-rowling">anti jk rowling</a>
|
||||
|
||||
</p>
|
||||
|
||||
<p>🍿 3 min. read</p>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content__wrapper">
|
||||
|
||||
<aside class="left-sidebar">
|
||||
<details class="toc__wrapper sidebar--sticky">
|
||||
<summary class="toc__heading">
|
||||
On This Page
|
||||
</summary>
|
||||
<nav class="toc">
|
||||
<ol>
|
||||
|
||||
<li><a href="#articles">Articles</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#videos">Videos</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#podcasts">Podcasts</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.toc__wrapper {
|
||||
max-height: 89vh;
|
||||
overflow: auto;
|
||||
background-color: var(--clr-content-bg);
|
||||
padding: 1rem 1.3rem;
|
||||
}
|
||||
|
||||
.toc__heading {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: var(--clr-sub-heading);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toc ol,
|
||||
.toc ol ol {
|
||||
display: grid;
|
||||
gap: 0.3em;
|
||||
}
|
||||
|
||||
.toc ol {
|
||||
border-top: 0.1em solid var(--clr-title-border);
|
||||
padding-left: 1.3em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.toc ol ol {
|
||||
border-top: none;
|
||||
list-style-type: disc;
|
||||
padding-left: 1em;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
|
||||
.toc ol a {
|
||||
font-size: 1.1rem;
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
|
||||
.toc ol ol a {
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<article class="article">
|
||||
<figure>
|
||||
<img src="/assets/banners/harry-potter-free-site.png" alt="An anime girl crossing arms with a sidelong look and a Harry Potter-free message">
|
||||
<figcaption>
|
||||
This site is Harry Potter free. Lookin [<i>sic</i>] for it? Leave.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p class="center-text">(Credit to Tumblr user <a href="https://comradesaucegay.tumblr.com/post/621403039459426304">comradesaucegay</a> for this Harry Potter-free website banner)</p>
|
||||
<p>Like many millennials, I grew up with the <cite>Harry Potter</cite> series and was a major fan of the series. I had read the original 7 books and watched their film adaptations. The series was a passion of mine during my early- to mid-teen years. While the Harry Potter novels were far from the first books I read, they were the first fantasy novels I read, and the series’ concept of a magical world set in a contemporary setting fascinated teenage me.</p>
|
||||
<p>However, even during my <cite>Harry Potter</cite> fixation years, there were things from the series that bothered me, from the idea of house elves being a slave race that naturally love being slaves, to Snape’s unconvincing “redemption” arc. As I got older and became more aware of social issues, I started to notice more problems with the series. In addition, reading more books has also made me realise that even on a technical writing level, the Harry Potter series was mediocre at best. As a result, I had stopped becoming a Harry Potter fan even before J. K. Rowling’s transphobia got mainstream attention.</p>
|
||||
<p>Unfortunately, many adults with nostalgia goggles still refuse to let go of <cite>Harry Potter</cite>, and they believe <cite>Harry Potter</cite> can be separated or “reclaimed” by J. K. Rowling, despite how much Rowling’s worldview and prejudice are inextricably linked to her writing.</p>
|
||||
<p>Therefore, I am compiling this masterlist by curating various materials that are critical of the <cite>Harry Potter</cite> series and J. K. Rowling. Items are ordered in chronological order. This is far from a comprehensive list of all the pieces that criticise <cite>Harry Potter</cite> and Rowling; this list is my curated list of ones that I have read, watched or listened to, and I personally endorse.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="articles">Articles</h2>
|
||||
<a class="heading-anchor" href="#articles" aria-labelledby="articles"><span hidden>#</span></a></div>
|
||||
<ul class="item-list">
|
||||
<li><a href="https://alinautrata.medium.com/all-the-things-that-are-fucked-up-about-harry-potter-58267e1bf3ee">Harry Potter and the Universal Declaration of Human Rights</a> by Alina Utrata (28 October 2016)</li>
|
||||
<li><a href="https://katymontgomerie.medium.com/addressing-the-claims-in-jk-rowlings-justification-for-transphobia-7b6f761e8f8f">Addressing The Claims In JK Rowling’s Justification For Transphobia</a> by Katy Montgomerie (16 June 2020)</li>
|
||||
<li><a href="https://www.themarysue.com/is-hogwarts-legacy-anti-semitic-hogwarts-legacy-anti-semitic-allegations-explained/">The Antisemitism of ‘Harry Potter’ Returns in ‘Hogwarts Legacy’</a> by Jack Doyle (8 February 2023)</li>
|
||||
<li><a href="https://www.polygon.com/reviews/23603142/hogwarts-legacy-review-harry-potter-jk-rowling-transphobic-ps5-pc-xbox">Hogwarts Legacy wants to make everyone happy, but Harry Potter gets in the way</a> by by Gita Jackson (17 February 2023)</li>
|
||||
<li><a href="https://www.vox.com/culture/23622610/jk-rowling-transphobic-statements-timeline-history-controversy">Is J.K. Rowling transphobic? Let’s let her speak for herself.</a> by Aja Romano (3 March 2023)</li>
|
||||
</ul>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="videos">Videos</h2>
|
||||
<a class="heading-anchor" href="#videos" aria-labelledby="videos"><span hidden>#</span></a></div>
|
||||
<ul class="item-list">
|
||||
<li><a href="https://www.youtube.com/watch?v=wPwWb9z3XSY">Harry Potter is GARBAGE, and Here's Why</a> by satenmadpun (25 August 2020)</li>
|
||||
<li><a href="https://www.youtube.com/watch?v=4AziZgoi3q0">We need to talk about Dudley Dursley- Harry Potter and Fatphobia</a> by Ok2BeFat (30 May 2021)</li>
|
||||
<li><a href="https://www.youtube.com/watch?v=-1iaJWSwUZs">Harry Potter</a> by Shaun (4 March 2023)</li>
|
||||
<li><a href="https://www.youtube.com/watch?v=Ou_xvXJJk7k">JK Rowling's New Friends</a> by Shaun (14 October 2022)</li>
|
||||
<li><a href="https://www.youtube.com/watch?v=UBftW7FzOVI">The Consumerist Dystopia of Harry Potter</a> by verilybitchie (21 January 2023)</li>
|
||||
<li><a href="https://www.youtube.com/watch?v=_GBUArD51KY">Explaining JK Rowling’s Transphobia</a> by Jessie Gender (27 January 2023)</li>
|
||||
<li><a href="https://www.youtube.com/watch?v=K1mHwn6eUUk">Hogwarts Legacy and the Politics of Potter</a> by Wisecrack (11 February 2023)</li>
|
||||
<li><a href="https://www.youtube.com/watch?v=uNKyQVsgKLg">Hogwarts: A Legacy Of Hate (The Jimquisition)</a> by James Stephanie Sterling (13 February 2023)</li>
|
||||
<li><a href="https://www.youtube.com/watch?v=9ncYTEY7aVk">The ALLEGED Witch Trials of J.K. Rowling (What The Megan Phelps Podcast Won't Tell You)</a> by Caelan Conrad (18 March 2023)</li>
|
||||
<li><a href="https://www.youtube.com/watch?v=7xJF4XYarzI">The Harry Potter Villains Were Trans?</a> by Brigitte Empire (3 April 2023)</li>
|
||||
<li><a href="https://www.youtube.com/watch?v=2pggtSI_95A">Maybe The Wizard Game Just Wasn't Very Good (The Jimquisition)</a> by James Stephanie Sterling (20 November 2023)</li>
|
||||
<li><a href="https://www.youtube.com/watch?v=whJJGqVtkEk">J.K. Rowling & Holocaust Denial</a> by Caelan Conrad (16 March 2024)</li>
|
||||
</ul>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="podcasts">Podcasts</h2>
|
||||
<a class="heading-anchor" href="#podcasts" aria-labelledby="podcasts"><span hidden>#</span></a></div>
|
||||
<ul>
|
||||
<li><a href="https://soundcloud.com/shriekingshack">The Shrieking Shack</a> — A book reading podcast hosted by Xeecee and Liz. Originally a Harry Potter reread podcast made by and for lapsed fans that goes through every chapter of the Harry Potter books and their film adaptations and analyses the writing and politics of the series and J. K. Rowling.</li>
|
||||
</ul>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<aside class="right-sidebar">
|
||||
<nav class="content__nav sidebar--sticky">
|
||||
<h2 class="content__nav--title">My Contents</h2>
|
||||
<ul class="content__nav--links">
|
||||
|
||||
<li><a href="/archive/">Content Archive</a></li>
|
||||
|
||||
<li><a href="/categories/">Content Categories</a></li>
|
||||
|
||||
<li><a href="/articles/">Articles</a></li>
|
||||
|
||||
<li><a href="/blog/posts/">Blog Archive</a></li>
|
||||
|
||||
<li><a href="/blog/">Blog Home</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.content__nav {
|
||||
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||
background-color: var(--clr-content-bg);
|
||||
}
|
||||
|
||||
.content__nav--title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.7em 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.breadcrumbs li::after {
|
||||
content: '➔';
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
||||
|
||||
|
||||
<ul class="footer__links">
|
||||
<li><a
|
||||
|
||||
href="/sitemap/
|
||||
">Site Map</a></li>
|
||||
<li><a
|
||||
|
||||
href="/changelogs/"
|
||||
>Changelogs</a></li>
|
||||
<li><a href="/feed.xml">RSS</a></li>
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
background: var(--clr-main-footer-bg);
|
||||
padding: 1rem 1rem 3rem 1rem;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.footer__links li:not(:last-child)::after {
|
||||
content: '|';
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
/* Screen sizes larger than mobile */
|
||||
@media only screen and (min-width: 30rem) {
|
||||
.footer {
|
||||
padding: 1rem 1rem 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button class="top-btn hidden" aria-label="Scroll to top">
|
||||
<i class="fa-solid fa-chevron-up"></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: var(--clr-top-btn-bg);
|
||||
color: var(--clr-top-btn-txt);
|
||||
border-radius: 50em;
|
||||
width: 2rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.top-btn:focus {
|
||||
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const topButton = document.querySelector(".top-btn");
|
||||
|
||||
window.onscroll = () => {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
topButton.classList.remove("hidden");
|
||||
} else {
|
||||
topButton.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
topButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,562 +0,0 @@
|
|||
<!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:title" content="Designated Lesbian Syndrome in Fandom | Articles">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="On fandom's tokenisation of lesbians, and how I hate it as a lesbian myself.">
|
||||
<meta name="generator" content="Eleventy v2.0.1">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://leilukin.neocities.org/articles/designated-lesbian-syndrome-fandom/">
|
||||
<meta property="og:site_name" content="Leilukin's Hub">
|
||||
<meta property="og:locale" content="en_MY">
|
||||
<meta property="og:description" content="On fandom's tokenisation of lesbians, and how I hate it as a lesbian myself.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content="https://leilukin.neocities.org/articles/designated-lesbian-syndrome-fandom/">
|
||||
<meta name="twitter:description" content="On fandom's tokenisation of lesbians, and how I hate it as a lesbian myself.">
|
||||
<link rel="canonical" href="https://leilukin.neocities.org/articles/designated-lesbian-syndrome-fandom/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts/lexend/lexend.css">
|
||||
|
||||
|
||||
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<title>
|
||||
Designated Lesbian Syndrome in Fandom | Articles | Leilukin's Hub
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="hero__top-bar hidden"></div>
|
||||
<div class="hero__img">
|
||||
|
||||
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
width: 100%;
|
||||
background-color: var(--clr-hero-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero__top-bar {
|
||||
background-color: var(--clr-navbar-bg);
|
||||
width: 100%;
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
max-height: 16rem;
|
||||
|
||||
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const hero = document.querySelector(".hero");
|
||||
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
||||
const headerImgEl = document.querySelector(".hero__img");
|
||||
|
||||
|
||||
const todayEvent = getTodayEvent();
|
||||
|
||||
if (todayEvent) {
|
||||
heroTopBarEl.classList.remove('hidden');
|
||||
heroTopBarEl.innerHTML = todayEvent.blurb;
|
||||
|
||||
if (todayEvent.class) {
|
||||
headerImgEl.classList.add(todayEvent.class);
|
||||
}
|
||||
}
|
||||
|
||||
function getTodayEvent() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const year = date.getFullYear();
|
||||
const weekOfMonth = Math.ceil(day / 7);
|
||||
|
||||
const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
|
||||
const siteAnniversary = year - leilukinsHubLaunchDate;
|
||||
|
||||
if (month === 3 && day === 1)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day">Zero Discrimination Day</a>`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 3 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.internationalwomensday.com/">International Women's Day}</a>`,
|
||||
class: "symbol-venus",
|
||||
};
|
||||
else if (month === 3 && day === 31)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html">Trans Day of Visibility</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else if (month === 4 && day === 6)
|
||||
return {
|
||||
blurb: `Today is <a href="https://internationalasexualityday.org/en">International Asexuality Day</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 4 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 4 && weekOfMonth === 4)
|
||||
return {
|
||||
blurb: `This week is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Week</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 5 && day === 17)
|
||||
return {
|
||||
blurb: `Today is <a href="https://may17.org">International Day Against Homophobia, Biphobia and Transphobia</a>`,
|
||||
class: "flag-progress",
|
||||
};
|
||||
else if (month === 5 && day === 19)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/">Agender Pride Day</a>`,
|
||||
class: "flag-agender",
|
||||
};
|
||||
else if (month === 5 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday">Pansexual and Panromantic Awareness and Visibility Day</a>`,
|
||||
class: "flag-pan",
|
||||
};
|
||||
else if (month === 6)
|
||||
return {
|
||||
blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/">Pride Month</a>!`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 7 && day === 14)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html">Non-Binary People's Day</a>`,
|
||||
class: "flag-non-binary",
|
||||
};
|
||||
else if (month === 7 && day === 28)
|
||||
return {
|
||||
blurb: `Today is Leilukin's Birthday`
|
||||
};
|
||||
else if (month === 8 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://aromanticspectrumday.net/">Aromantic Spectrum Visibility Day</a>`,
|
||||
class: "flag-aro",
|
||||
};
|
||||
else if (month === 9 && day === 11)
|
||||
return {
|
||||
blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin's Hub`
|
||||
};
|
||||
else if (month === 9 && day === 23)
|
||||
return {
|
||||
blurb: `Today is <a href="https://bivisibilityday.com/about">Bi Visibility Day</a>`,
|
||||
class: "flag-bi",
|
||||
};
|
||||
else if (month === 10 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2">International Lesbian Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 10 && day === 11)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day">National Coming Out Day</a>`,
|
||||
class: "flag-rainbow",
|
||||
};
|
||||
else if (month === 10 && day === 17)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week">Genderfluid Visibility Week</a>`,
|
||||
class: "flag-genderfluid",
|
||||
};
|
||||
else if (month === 10 && day === 24)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week">Ace Week</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 10 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day">Intersex Awareness Day</a>`,
|
||||
class: "flag-intersex",
|
||||
};
|
||||
else if (month === 11 && day === 13)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://glaad.org/transweek/">Transgender Awareness Week</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
</script>
|
||||
<nav class="navbar">
|
||||
<button class="navbar__toggle" aria-label="Navigation menu toggle">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
<h2 class="navbar__title">Navigation</h2>
|
||||
</button>
|
||||
<ul class="navbar__links">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/now/">Now</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/projects/">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/shrines/">Shrines</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/links/">Links</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/guestbook/">Guestbook</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
background: var(--clr-navbar-bg);
|
||||
padding: 0.6em 1em;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar__toggle,
|
||||
.navbar__title {
|
||||
color: var(--clr-navbar-link);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.navbar__toggle:focus,
|
||||
.navbar a:focus {
|
||||
outline: 0.15em solid var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--clr-navbar-link);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: var(--clr-link-hover);
|
||||
}
|
||||
|
||||
.navbar a:focus {
|
||||
outline-offset: 0.3em;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
list-style: none;
|
||||
display: none;
|
||||
gap: 1em;
|
||||
padding: 0.5em 1.8em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.navbar__links--show {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.navbar {
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const navbarToggle = document.querySelector('.navbar__toggle');
|
||||
const navbarLinks = document.querySelector(".navbar__links");
|
||||
|
||||
navbarToggle.addEventListener('click', () => {
|
||||
navbarLinks.classList.toggle("navbar__links--show");
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<header class="main__header">
|
||||
|
||||
<ul class="breadcrumbs">
|
||||
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h1>Designated Lesbian Syndrome in Fandom</h1>
|
||||
<div class="article__info">
|
||||
<p>Posted on 18 August 2023 by Leilukin
|
||||
|
||||
|
||||
<p>Categories:
|
||||
|
||||
<a href="/categories/fandom-culture">fandom culture</a>
|
||||
|
||||
</p>
|
||||
|
||||
<p>🍿 3 min. read</p>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content__wrapper">
|
||||
|
||||
|
||||
|
||||
<article class="article">
|
||||
<p>Over the years of interacting with and observing fandom, I have come to <a href="../my-dislike-of-shipping-culture">dislike fandom and shipping culture</a> for many reasons. One major reason I want to talk about here is the "Designated Lesbian Syndrome" phenomenon.</p>
|
||||
<p>I first encountered this term from <a href="https://desolationlesbian.tumblr.com/post/662432767484870656/designated-lesbian-syndrome-n-when-fans-of-a">Tumblr user desolationlesbian's post</a>:</p>
|
||||
<blockquote>
|
||||
<p>Designated Lesbian Syndrome (n.): When fans of a piece of media pick two female characters and pair them together as the token F/F ship and put them in everything, but do not bother to engage with their dynamic in any way more substantive than having them hold hands in the background. Everyone agrees it’s a good ship and it has nothing but their full support, yet this never materializes into real effort or content creation.</p>
|
||||
<p>Most common with works that have little-to-no narratively important women, but in rare cases can even happen to major and complex characters who are then reduced to token background lesbians as everyone hones in on the boys.</p>
|
||||
</blockquote>
|
||||
<p>The example I am most familiar with is the fandom of Grand Admiral Thrawn and the Chiss from <cite>Star Wars</cite> — specifically, some shippers of Thrawn/Eli Vanto, also known as Thranto, pair Ar'alani and Karyn Faro as their token "pair-the-spares" femslash ship. However, while Thranto shippers have create fan content about the Ar'alani/Karyn Faro ship, they do not do it with even a fraction of the interest and enthusiasm as they do Thranto. This is evident in the difference between the amount of fan works these two pairings have received on Archive On Our Own (AO3): as of this writing, the <a href="https://archiveofourown.org/tags/Thrawn%20%7C%20Mitth'raw'nuruodo*s*Eli%20Vanto/works">Thrawn | Mitth'raw'nuruodo/Eli Vanto</a> tag contains 1,358 works, while the <a href="https://archiveofourown.org/tags/Ar'alani*s*Karyn%20Faro/works">Ar'alani/Karyn Faro</a> tag contains 34 works only. It is also worth noting that if you use the tag page's filter function, you will notice that out of these 34 Ar'alani/Faro works, 23 of them are also tagged with Thrawn/Eli Vanto, proving the significant overlap between Thranto and Ar'alani/Faro shippers.</p>
|
||||
<p>Part of the Designated Lesbian Syndrome also involves shippers headcanonning the female characters who could be considered "threats" to their favourite ship that involved male characters as lesbians. It does not matter if the female characters are actually romantically involved with the male characters' in the source material or not. Thrawn never has a canon love interest in both Legends and the Disney continuities, but the fact that Ar'alani and Faro are close to Thrawn as his long-time friend and protégée respectively is enough to make them the go-to candidates for lesbian headcanons from shippers who ship Thrawn with anyone else. Lesbian Ar'alani and Faro headcanons are most common among Thrawn/Eli shippers, but I had seen at least one Thrawn/Governor Pryce (a pairing that I cannot stand at all) shipper literally headcanons Ar'alani as a lesbian so Pryce does not need to worry about Ar'alani fighting with Pryce over Thrawn.</p>
|
||||
<p>Ar'alani and Karyn Faro are unfortunately perfect examples of the above post by desolationlesbian of major female characters who are reduced to token background lesbians by shippers. As a huge fan of both Ar'alani and Faro as characters, I find it immensely frustrating, to the extent that the Thrawn shipping fandom has utterly turned me off on both Thranto and Ar'alani/Faro ships.</p>
|
||||
<p>As a lesbian myself, I loathe the Designated Lesbian Syndrome with a passion, because this phenomenon is literally tokenism, specifically tokenisation of lesbians. As a consequence, I have reached the point where when it comes to fandoms with big Male/Male (M/M) ships that are not canon, I only trust lesbian headcanons from fellow lesbians. Yes, this means I do not trust lesbian Ar'alani and Karyn Faro headcanons from people who are not lesbians.</p>
|
||||
<p>I really hate that it comes to this because as a lesbian, in theory I am in favour of lesbian headcanons for female characters who are cishet-coded or who do not have a canon sexuality. Unfortunately, lesbian headcanons have been used as a progressive way to get female characters out of the way of Male/Male ships (and occasionally Male/Female ships as well, though this phenomenon is more common in fandoms of M/M ships), not because these shippers actually care about lesbians and the female characters.</p>
|
||||
<p>These shippers rarely put as much energy in talking about or creating fan content for the female characters they headcanon as lesbians as they do the male characters from their ships. These shippers can pretend they care about lesbians all they want, but my lesbian ass can see through their performative bullshit, and recognise their lesbian headcanons are nothing more than tokenism.</p>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<aside class="right-sidebar">
|
||||
<nav class="content__nav sidebar--sticky">
|
||||
<h2 class="content__nav--title">My Contents</h2>
|
||||
<ul class="content__nav--links">
|
||||
|
||||
<li><a href="/archive/">Content Archive</a></li>
|
||||
|
||||
<li><a href="/categories/">Content Categories</a></li>
|
||||
|
||||
<li><a href="/articles/">Articles</a></li>
|
||||
|
||||
<li><a href="/blog/posts/">Blog Archive</a></li>
|
||||
|
||||
<li><a href="/blog/">Blog Home</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.content__nav {
|
||||
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||
background-color: var(--clr-content-bg);
|
||||
}
|
||||
|
||||
.content__nav--title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.7em 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.breadcrumbs li::after {
|
||||
content: '➔';
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
||||
|
||||
|
||||
<ul class="footer__links">
|
||||
<li><a
|
||||
|
||||
href="/sitemap/
|
||||
">Site Map</a></li>
|
||||
<li><a
|
||||
|
||||
href="/changelogs/"
|
||||
>Changelogs</a></li>
|
||||
<li><a href="/feed.xml">RSS</a></li>
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
background: var(--clr-main-footer-bg);
|
||||
padding: 1rem 1rem 3rem 1rem;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.footer__links li:not(:last-child)::after {
|
||||
content: '|';
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
/* Screen sizes larger than mobile */
|
||||
@media only screen and (min-width: 30rem) {
|
||||
.footer {
|
||||
padding: 1rem 1rem 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button class="top-btn hidden" aria-label="Scroll to top">
|
||||
<i class="fa-solid fa-chevron-up"></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: var(--clr-top-btn-bg);
|
||||
color: var(--clr-top-btn-txt);
|
||||
border-radius: 50em;
|
||||
width: 2rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.top-btn:focus {
|
||||
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const topButton = document.querySelector(".top-btn");
|
||||
|
||||
window.onscroll = () => {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
topButton.classList.remove("hidden");
|
||||
} else {
|
||||
topButton.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
topButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,633 +0,0 @@
|
|||
<!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:title" content="Articles">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="List of articles published on my website.">
|
||||
<meta name="generator" content="Eleventy v2.0.1">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://leilukin.neocities.org/articles/">
|
||||
<meta property="og:site_name" content="Leilukin's Hub">
|
||||
<meta property="og:locale" content="en_MY">
|
||||
<meta property="og:description" content="List of articles published on my website.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content="https://leilukin.neocities.org/articles/">
|
||||
<meta name="twitter:description" content="List of articles published on my website.">
|
||||
<link rel="canonical" href="https://leilukin.neocities.org/articles/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts/lexend/lexend.css">
|
||||
|
||||
|
||||
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<title>
|
||||
Articles | Leilukin's Hub
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="hero__top-bar hidden"></div>
|
||||
<div class="hero__img">
|
||||
|
||||
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
width: 100%;
|
||||
background-color: var(--clr-hero-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero__top-bar {
|
||||
background-color: var(--clr-navbar-bg);
|
||||
width: 100%;
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
max-height: 16rem;
|
||||
|
||||
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const hero = document.querySelector(".hero");
|
||||
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
||||
const headerImgEl = document.querySelector(".hero__img");
|
||||
|
||||
|
||||
const todayEvent = getTodayEvent();
|
||||
|
||||
if (todayEvent) {
|
||||
heroTopBarEl.classList.remove('hidden');
|
||||
heroTopBarEl.innerHTML = todayEvent.blurb;
|
||||
|
||||
if (todayEvent.class) {
|
||||
headerImgEl.classList.add(todayEvent.class);
|
||||
}
|
||||
}
|
||||
|
||||
function getTodayEvent() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const year = date.getFullYear();
|
||||
const weekOfMonth = Math.ceil(day / 7);
|
||||
|
||||
const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
|
||||
const siteAnniversary = year - leilukinsHubLaunchDate;
|
||||
|
||||
if (month === 3 && day === 1)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day">Zero Discrimination Day</a>`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 3 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.internationalwomensday.com/">International Women's Day}</a>`,
|
||||
class: "symbol-venus",
|
||||
};
|
||||
else if (month === 3 && day === 31)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html">Trans Day of Visibility</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else if (month === 4 && day === 6)
|
||||
return {
|
||||
blurb: `Today is <a href="https://internationalasexualityday.org/en">International Asexuality Day</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 4 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 4 && weekOfMonth === 4)
|
||||
return {
|
||||
blurb: `This week is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Week</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 5 && day === 17)
|
||||
return {
|
||||
blurb: `Today is <a href="https://may17.org">International Day Against Homophobia, Biphobia and Transphobia</a>`,
|
||||
class: "flag-progress",
|
||||
};
|
||||
else if (month === 5 && day === 19)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/">Agender Pride Day</a>`,
|
||||
class: "flag-agender",
|
||||
};
|
||||
else if (month === 5 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday">Pansexual and Panromantic Awareness and Visibility Day</a>`,
|
||||
class: "flag-pan",
|
||||
};
|
||||
else if (month === 6)
|
||||
return {
|
||||
blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/">Pride Month</a>!`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 7 && day === 14)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html">Non-Binary People's Day</a>`,
|
||||
class: "flag-non-binary",
|
||||
};
|
||||
else if (month === 7 && day === 28)
|
||||
return {
|
||||
blurb: `Today is Leilukin's Birthday`
|
||||
};
|
||||
else if (month === 8 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://aromanticspectrumday.net/">Aromantic Spectrum Visibility Day</a>`,
|
||||
class: "flag-aro",
|
||||
};
|
||||
else if (month === 9 && day === 11)
|
||||
return {
|
||||
blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin's Hub`
|
||||
};
|
||||
else if (month === 9 && day === 23)
|
||||
return {
|
||||
blurb: `Today is <a href="https://bivisibilityday.com/about">Bi Visibility Day</a>`,
|
||||
class: "flag-bi",
|
||||
};
|
||||
else if (month === 10 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2">International Lesbian Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 10 && day === 11)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day">National Coming Out Day</a>`,
|
||||
class: "flag-rainbow",
|
||||
};
|
||||
else if (month === 10 && day === 17)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week">Genderfluid Visibility Week</a>`,
|
||||
class: "flag-genderfluid",
|
||||
};
|
||||
else if (month === 10 && day === 24)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week">Ace Week</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 10 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day">Intersex Awareness Day</a>`,
|
||||
class: "flag-intersex",
|
||||
};
|
||||
else if (month === 11 && day === 13)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://glaad.org/transweek/">Transgender Awareness Week</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
</script>
|
||||
<nav class="navbar">
|
||||
<button class="navbar__toggle" aria-label="Navigation menu toggle">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
<h2 class="navbar__title">Navigation</h2>
|
||||
</button>
|
||||
<ul class="navbar__links">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/now/">Now</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a aria-current="page" href="/articles/">Articles</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/projects/">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/shrines/">Shrines</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/links/">Links</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/guestbook/">Guestbook</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
background: var(--clr-navbar-bg);
|
||||
padding: 0.6em 1em;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar__toggle,
|
||||
.navbar__title {
|
||||
color: var(--clr-navbar-link);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.navbar__toggle:focus,
|
||||
.navbar a:focus {
|
||||
outline: 0.15em solid var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--clr-navbar-link);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: var(--clr-link-hover);
|
||||
}
|
||||
|
||||
.navbar a:focus {
|
||||
outline-offset: 0.3em;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
list-style: none;
|
||||
display: none;
|
||||
gap: 1em;
|
||||
padding: 0.5em 1.8em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.navbar__links--show {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.navbar {
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const navbarToggle = document.querySelector('.navbar__toggle');
|
||||
const navbarLinks = document.querySelector(".navbar__links");
|
||||
|
||||
navbarToggle.addEventListener('click', () => {
|
||||
navbarLinks.classList.toggle("navbar__links--show");
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<header class="main__header">
|
||||
|
||||
|
||||
|
||||
<h1>Articles</h1>
|
||||
|
||||
<p>List of articles published on my website.</p>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content__wrapper">
|
||||
|
||||
<aside class="left-sidebar">
|
||||
<details class="toc__wrapper sidebar--sticky">
|
||||
<summary class="toc__heading">
|
||||
On This Page
|
||||
</summary>
|
||||
<nav class="toc">
|
||||
<ol>
|
||||
|
||||
<li><a href="#my-articles">My Articles</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#my-articles-for-video-games-with-their-own-pages">My Articles for Video Games with Their Own Pages</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#featured-articles">Featured Articles</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.toc__wrapper {
|
||||
max-height: 89vh;
|
||||
overflow: auto;
|
||||
background-color: var(--clr-content-bg);
|
||||
padding: 1rem 1.3rem;
|
||||
}
|
||||
|
||||
.toc__heading {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: var(--clr-sub-heading);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toc ol,
|
||||
.toc ol ol {
|
||||
display: grid;
|
||||
gap: 0.3em;
|
||||
}
|
||||
|
||||
.toc ol {
|
||||
border-top: 0.1em solid var(--clr-title-border);
|
||||
padding-left: 1.3em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.toc ol ol {
|
||||
border-top: none;
|
||||
list-style-type: disc;
|
||||
padding-left: 1em;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
|
||||
.toc ol a {
|
||||
font-size: 1.1rem;
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
|
||||
.toc ol ol a {
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="content ">
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="my-articles">My Articles</h2>
|
||||
<a class="heading-anchor" href="#my-articles" aria-labelledby="my-articles"><span hidden>#</span></a></div>
|
||||
<p>Articles I have written.</p>
|
||||
<ul class="item-list"><li>
|
||||
<p><a href="/articles/anti-harry-potter-jk-rowling-masterlist/">Anti-Harry Potter and Anti-J. K. Rowling Masterlist</a></p>
|
||||
<time>19 March 2023</time>
|
||||
</li><li>
|
||||
<p><a href="/articles/my-dislike-of-shipping-culture/">My Disinterest in Shipping and Dislike of Shipping Culture</a></p>
|
||||
<time>14 August 2023</time>
|
||||
</li><li>
|
||||
<p><a href="/articles/designated-lesbian-syndrome-fandom/">Designated Lesbian Syndrome in Fandom</a></p>
|
||||
<time>18 August 2023</time>
|
||||
</li></ul>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="my-articles-for-video-games-with-their-own-pages">My Articles for Video Games with Their Own Pages</h2>
|
||||
<a class="heading-anchor" href="#my-articles-for-video-games-with-their-own-pages" aria-labelledby="my-articles-for-video-games-with-their-own-pages"><span hidden>#</span></a></div>
|
||||
<ul class="item-list">
|
||||
<li>My <cite>Cassette Beasts</cite> shrine <a href="/shrines/cassettebeasts/articles/">Articles</a> page</li>
|
||||
<li>My <cite>Star Wars: Knights of the Old Republic</cite> shrine <a href="/shrines/starwarskotor/articles/">Articles</a> page</li>
|
||||
</ul>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="featured-articles">Featured Articles</h2>
|
||||
<a class="heading-anchor" href="#featured-articles" aria-labelledby="featured-articles"><span hidden>#</span></a></div>
|
||||
<p>Articles featuring other people's interview with me.</p>
|
||||
<ul class="item-list"><li>
|
||||
<p><a href="/articles/kotor2-modder-interview-ars-technica/">The modders who spent 15 years fixing Knights of the Old Republic 2 @ Ars Technica</a></p>
|
||||
<time>11 September 2022</time>
|
||||
</li><li>
|
||||
<p><a href="/articles/lgbtq-booklet-interview-misi-bawang/">Floating in a Sky Full of Pride: LGBTQ+ Booklet Artist Interview from MISI:Bawang</a></p>
|
||||
<time>11 September 2022</time>
|
||||
</li></ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<aside class="right-sidebar">
|
||||
<nav class="content__nav sidebar--sticky">
|
||||
<h2 class="content__nav--title">My Contents</h2>
|
||||
<ul class="content__nav--links">
|
||||
|
||||
<li><a href="/archive/">Content Archive</a></li>
|
||||
|
||||
<li><a href="/categories/">Content Categories</a></li>
|
||||
|
||||
<li><a href="/articles/">Articles</a></li>
|
||||
|
||||
<li><a href="/blog/posts/">Blog Archive</a></li>
|
||||
|
||||
<li><a href="/blog/">Blog Home</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.content__nav {
|
||||
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||
background-color: var(--clr-content-bg);
|
||||
}
|
||||
|
||||
.content__nav--title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.7em 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.breadcrumbs li::after {
|
||||
content: '➔';
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
||||
|
||||
|
||||
<ul class="footer__links">
|
||||
<li><a
|
||||
|
||||
href="/sitemap/
|
||||
">Site Map</a></li>
|
||||
<li><a
|
||||
|
||||
href="/changelogs/"
|
||||
>Changelogs</a></li>
|
||||
<li><a href="/feed.xml">RSS</a></li>
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
background: var(--clr-main-footer-bg);
|
||||
padding: 1rem 1rem 3rem 1rem;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.footer__links li:not(:last-child)::after {
|
||||
content: '|';
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
/* Screen sizes larger than mobile */
|
||||
@media only screen and (min-width: 30rem) {
|
||||
.footer {
|
||||
padding: 1rem 1rem 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button class="top-btn hidden" aria-label="Scroll to top">
|
||||
<i class="fa-solid fa-chevron-up"></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: var(--clr-top-btn-bg);
|
||||
color: var(--clr-top-btn-txt);
|
||||
border-radius: 50em;
|
||||
width: 2rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.top-btn:focus {
|
||||
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const topButton = document.querySelector(".top-btn");
|
||||
|
||||
window.onscroll = () => {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
topButton.classList.remove("hidden");
|
||||
} else {
|
||||
topButton.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
topButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,563 +0,0 @@
|
|||
<!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:title" content="The modders who spent 15 years fixing Knights of the Old Republic 2 @ Ars Technica | Articles">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="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.">
|
||||
<meta name="generator" content="Eleventy v2.0.1">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://leilukin.neocities.org/articles/kotor2-modder-interview-ars-technica/">
|
||||
<meta property="og:site_name" content="Leilukin's Hub">
|
||||
<meta property="og:locale" content="en_MY">
|
||||
<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.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content="https://leilukin.neocities.org/articles/kotor2-modder-interview-ars-technica/">
|
||||
<meta name="twitter: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="canonical" href="https://leilukin.neocities.org/articles/kotor2-modder-interview-ars-technica/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts/lexend/lexend.css">
|
||||
|
||||
|
||||
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<title>
|
||||
The modders who spent 15 years fixing Knights of the Old Republic 2 @ Ars Technica | Articles | Leilukin's Hub
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="hero__top-bar hidden"></div>
|
||||
<div class="hero__img">
|
||||
|
||||
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
width: 100%;
|
||||
background-color: var(--clr-hero-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero__top-bar {
|
||||
background-color: var(--clr-navbar-bg);
|
||||
width: 100%;
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
max-height: 16rem;
|
||||
|
||||
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const hero = document.querySelector(".hero");
|
||||
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
||||
const headerImgEl = document.querySelector(".hero__img");
|
||||
|
||||
|
||||
const todayEvent = getTodayEvent();
|
||||
|
||||
if (todayEvent) {
|
||||
heroTopBarEl.classList.remove('hidden');
|
||||
heroTopBarEl.innerHTML = todayEvent.blurb;
|
||||
|
||||
if (todayEvent.class) {
|
||||
headerImgEl.classList.add(todayEvent.class);
|
||||
}
|
||||
}
|
||||
|
||||
function getTodayEvent() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const year = date.getFullYear();
|
||||
const weekOfMonth = Math.ceil(day / 7);
|
||||
|
||||
const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
|
||||
const siteAnniversary = year - leilukinsHubLaunchDate;
|
||||
|
||||
if (month === 3 && day === 1)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day">Zero Discrimination Day</a>`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 3 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.internationalwomensday.com/">International Women's Day}</a>`,
|
||||
class: "symbol-venus",
|
||||
};
|
||||
else if (month === 3 && day === 31)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html">Trans Day of Visibility</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else if (month === 4 && day === 6)
|
||||
return {
|
||||
blurb: `Today is <a href="https://internationalasexualityday.org/en">International Asexuality Day</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 4 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 4 && weekOfMonth === 4)
|
||||
return {
|
||||
blurb: `This week is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Week</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 5 && day === 17)
|
||||
return {
|
||||
blurb: `Today is <a href="https://may17.org">International Day Against Homophobia, Biphobia and Transphobia</a>`,
|
||||
class: "flag-progress",
|
||||
};
|
||||
else if (month === 5 && day === 19)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/">Agender Pride Day</a>`,
|
||||
class: "flag-agender",
|
||||
};
|
||||
else if (month === 5 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday">Pansexual and Panromantic Awareness and Visibility Day</a>`,
|
||||
class: "flag-pan",
|
||||
};
|
||||
else if (month === 6)
|
||||
return {
|
||||
blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/">Pride Month</a>!`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 7 && day === 14)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html">Non-Binary People's Day</a>`,
|
||||
class: "flag-non-binary",
|
||||
};
|
||||
else if (month === 7 && day === 28)
|
||||
return {
|
||||
blurb: `Today is Leilukin's Birthday`
|
||||
};
|
||||
else if (month === 8 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://aromanticspectrumday.net/">Aromantic Spectrum Visibility Day</a>`,
|
||||
class: "flag-aro",
|
||||
};
|
||||
else if (month === 9 && day === 11)
|
||||
return {
|
||||
blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin's Hub`
|
||||
};
|
||||
else if (month === 9 && day === 23)
|
||||
return {
|
||||
blurb: `Today is <a href="https://bivisibilityday.com/about">Bi Visibility Day</a>`,
|
||||
class: "flag-bi",
|
||||
};
|
||||
else if (month === 10 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2">International Lesbian Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 10 && day === 11)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day">National Coming Out Day</a>`,
|
||||
class: "flag-rainbow",
|
||||
};
|
||||
else if (month === 10 && day === 17)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week">Genderfluid Visibility Week</a>`,
|
||||
class: "flag-genderfluid",
|
||||
};
|
||||
else if (month === 10 && day === 24)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week">Ace Week</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 10 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day">Intersex Awareness Day</a>`,
|
||||
class: "flag-intersex",
|
||||
};
|
||||
else if (month === 11 && day === 13)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://glaad.org/transweek/">Transgender Awareness Week</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
</script>
|
||||
<nav class="navbar">
|
||||
<button class="navbar__toggle" aria-label="Navigation menu toggle">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
<h2 class="navbar__title">Navigation</h2>
|
||||
</button>
|
||||
<ul class="navbar__links">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/now/">Now</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/projects/">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/shrines/">Shrines</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/links/">Links</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/guestbook/">Guestbook</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
background: var(--clr-navbar-bg);
|
||||
padding: 0.6em 1em;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar__toggle,
|
||||
.navbar__title {
|
||||
color: var(--clr-navbar-link);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.navbar__toggle:focus,
|
||||
.navbar a:focus {
|
||||
outline: 0.15em solid var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--clr-navbar-link);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: var(--clr-link-hover);
|
||||
}
|
||||
|
||||
.navbar a:focus {
|
||||
outline-offset: 0.3em;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
list-style: none;
|
||||
display: none;
|
||||
gap: 1em;
|
||||
padding: 0.5em 1.8em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.navbar__links--show {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.navbar {
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const navbarToggle = document.querySelector('.navbar__toggle');
|
||||
const navbarLinks = document.querySelector(".navbar__links");
|
||||
|
||||
navbarToggle.addEventListener('click', () => {
|
||||
navbarLinks.classList.toggle("navbar__links--show");
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<header class="main__header">
|
||||
|
||||
<ul class="breadcrumbs">
|
||||
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h1>The modders who spent 15 years fixing Knights of the Old Republic 2 @ Ars Technica</h1>
|
||||
<div class="article__info">
|
||||
<p>Posted on 11 September 2022 by Leilukin
|
||||
|
||||
|
||||
<p>Categories:
|
||||
|
||||
<a href="/categories/my-interviews">my interviews</a>
|
||||
|
||||
</p>
|
||||
|
||||
<p>🍿 2 min. read</p>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content__wrapper">
|
||||
|
||||
|
||||
|
||||
<article class="article">
|
||||
<p>On 6 December 2019, to celebrate the 15th anniversary of <cite>Star Wars: Knights of the Old Republic 2</cite>, 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/">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 <cite>KotOR 2</cite>.</p>
|
||||
<blockquote>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="romance-yes-please">Romance? Yes, Please</h3>
|
||||
<a class="heading-anchor" href="#romance-yes-please" aria-labelledby="romance-yes-please"><span hidden>#</span></a></div>
|
||||
<p><a href="https://starwars.fandom.com/wiki/Juhani">Unlike the first KOTOR</a>, there are no same-gender romance options in Obsidian’s sequel. Leilukin, a modder on the Nexus Forums, has focused much of her modding work since 2016 on <a href="https://www.nexusmods.com/kotor2/mods/927">fixing that oversight.</a></p>
|
||||
<p>“As much as I love KOTOR2, I have always been frustrated by the fact that the romance content with the companions and certain NPCs… are all heterosexual,” she said.</p>
|
||||
<p>Some of these fixes are relatively simple. In vanilla KOTOR2, for instance, only male characters can recruit The Handmaiden upon leaving Telos, while female characters are the only ones who can recruit The Disciple during the main quest on Dantooine. By default, Leiluken’s mod simply flips that gender check, so only male characters can recruit the Disciple and only females can recruit The Handmaiden.</p>
|
||||
<p>But Leiluken’s mod goes further than that. The most challenging part, she said, was finding every reference to the Exile’s gender throughout the game spoken by gender-specific party members, then “add[ing] extra dialogue that replaces the pronouns and splic[ing] voiceover files myself.”</p>
|
||||
<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/">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:
|
||||
<a href="https://arstechnica.com/gaming/2019/12/the-modders-that-spent-15-years-fixing-knights-of-the-old-republic-2/">The modders who spent 15 years fixing Knights of the Old Republic 2</a></p>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<aside class="right-sidebar">
|
||||
<nav class="content__nav sidebar--sticky">
|
||||
<h2 class="content__nav--title">My Contents</h2>
|
||||
<ul class="content__nav--links">
|
||||
|
||||
<li><a href="/archive/">Content Archive</a></li>
|
||||
|
||||
<li><a href="/categories/">Content Categories</a></li>
|
||||
|
||||
<li><a href="/articles/">Articles</a></li>
|
||||
|
||||
<li><a href="/blog/posts/">Blog Archive</a></li>
|
||||
|
||||
<li><a href="/blog/">Blog Home</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.content__nav {
|
||||
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||
background-color: var(--clr-content-bg);
|
||||
}
|
||||
|
||||
.content__nav--title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.7em 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.breadcrumbs li::after {
|
||||
content: '➔';
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
||||
|
||||
|
||||
<ul class="footer__links">
|
||||
<li><a
|
||||
|
||||
href="/sitemap/
|
||||
">Site Map</a></li>
|
||||
<li><a
|
||||
|
||||
href="/changelogs/"
|
||||
>Changelogs</a></li>
|
||||
<li><a href="/feed.xml">RSS</a></li>
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
background: var(--clr-main-footer-bg);
|
||||
padding: 1rem 1rem 3rem 1rem;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.footer__links li:not(:last-child)::after {
|
||||
content: '|';
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
/* Screen sizes larger than mobile */
|
||||
@media only screen and (min-width: 30rem) {
|
||||
.footer {
|
||||
padding: 1rem 1rem 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button class="top-btn hidden" aria-label="Scroll to top">
|
||||
<i class="fa-solid fa-chevron-up"></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: var(--clr-top-btn-bg);
|
||||
color: var(--clr-top-btn-txt);
|
||||
border-radius: 50em;
|
||||
width: 2rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.top-btn:focus {
|
||||
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const topButton = document.querySelector(".top-btn");
|
||||
|
||||
window.onscroll = () => {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
topButton.classList.remove("hidden");
|
||||
} else {
|
||||
topButton.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
topButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,579 +0,0 @@
|
|||
<!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:title" content="Floating in a Sky Full of Pride: LGBTQ+ Booklet Artist Interview from MISI:Bawang | Articles">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="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.">
|
||||
<meta name="generator" content="Eleventy v2.0.1">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://leilukin.neocities.org/articles/lgbtq-booklet-interview-misi-bawang/">
|
||||
<meta property="og:site_name" content="Leilukin's Hub">
|
||||
<meta property="og:locale" content="en_MY">
|
||||
<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.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content="https://leilukin.neocities.org/articles/lgbtq-booklet-interview-misi-bawang/">
|
||||
<meta name="twitter: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="canonical" href="https://leilukin.neocities.org/articles/lgbtq-booklet-interview-misi-bawang/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts/lexend/lexend.css">
|
||||
|
||||
|
||||
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<title>
|
||||
Floating in a Sky Full of Pride: LGBTQ+ Booklet Artist Interview from MISI:Bawang | Articles | Leilukin's Hub
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="hero__top-bar hidden"></div>
|
||||
<div class="hero__img">
|
||||
|
||||
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
width: 100%;
|
||||
background-color: var(--clr-hero-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero__top-bar {
|
||||
background-color: var(--clr-navbar-bg);
|
||||
width: 100%;
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
max-height: 16rem;
|
||||
|
||||
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const hero = document.querySelector(".hero");
|
||||
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
||||
const headerImgEl = document.querySelector(".hero__img");
|
||||
|
||||
|
||||
const todayEvent = getTodayEvent();
|
||||
|
||||
if (todayEvent) {
|
||||
heroTopBarEl.classList.remove('hidden');
|
||||
heroTopBarEl.innerHTML = todayEvent.blurb;
|
||||
|
||||
if (todayEvent.class) {
|
||||
headerImgEl.classList.add(todayEvent.class);
|
||||
}
|
||||
}
|
||||
|
||||
function getTodayEvent() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const year = date.getFullYear();
|
||||
const weekOfMonth = Math.ceil(day / 7);
|
||||
|
||||
const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
|
||||
const siteAnniversary = year - leilukinsHubLaunchDate;
|
||||
|
||||
if (month === 3 && day === 1)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day">Zero Discrimination Day</a>`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 3 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.internationalwomensday.com/">International Women's Day}</a>`,
|
||||
class: "symbol-venus",
|
||||
};
|
||||
else if (month === 3 && day === 31)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html">Trans Day of Visibility</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else if (month === 4 && day === 6)
|
||||
return {
|
||||
blurb: `Today is <a href="https://internationalasexualityday.org/en">International Asexuality Day</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 4 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 4 && weekOfMonth === 4)
|
||||
return {
|
||||
blurb: `This week is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Week</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 5 && day === 17)
|
||||
return {
|
||||
blurb: `Today is <a href="https://may17.org">International Day Against Homophobia, Biphobia and Transphobia</a>`,
|
||||
class: "flag-progress",
|
||||
};
|
||||
else if (month === 5 && day === 19)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/">Agender Pride Day</a>`,
|
||||
class: "flag-agender",
|
||||
};
|
||||
else if (month === 5 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday">Pansexual and Panromantic Awareness and Visibility Day</a>`,
|
||||
class: "flag-pan",
|
||||
};
|
||||
else if (month === 6)
|
||||
return {
|
||||
blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/">Pride Month</a>!`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 7 && day === 14)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html">Non-Binary People's Day</a>`,
|
||||
class: "flag-non-binary",
|
||||
};
|
||||
else if (month === 7 && day === 28)
|
||||
return {
|
||||
blurb: `Today is Leilukin's Birthday`
|
||||
};
|
||||
else if (month === 8 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://aromanticspectrumday.net/">Aromantic Spectrum Visibility Day</a>`,
|
||||
class: "flag-aro",
|
||||
};
|
||||
else if (month === 9 && day === 11)
|
||||
return {
|
||||
blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin's Hub`
|
||||
};
|
||||
else if (month === 9 && day === 23)
|
||||
return {
|
||||
blurb: `Today is <a href="https://bivisibilityday.com/about">Bi Visibility Day</a>`,
|
||||
class: "flag-bi",
|
||||
};
|
||||
else if (month === 10 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2">International Lesbian Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 10 && day === 11)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day">National Coming Out Day</a>`,
|
||||
class: "flag-rainbow",
|
||||
};
|
||||
else if (month === 10 && day === 17)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week">Genderfluid Visibility Week</a>`,
|
||||
class: "flag-genderfluid",
|
||||
};
|
||||
else if (month === 10 && day === 24)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week">Ace Week</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 10 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day">Intersex Awareness Day</a>`,
|
||||
class: "flag-intersex",
|
||||
};
|
||||
else if (month === 11 && day === 13)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://glaad.org/transweek/">Transgender Awareness Week</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
</script>
|
||||
<nav class="navbar">
|
||||
<button class="navbar__toggle" aria-label="Navigation menu toggle">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
<h2 class="navbar__title">Navigation</h2>
|
||||
</button>
|
||||
<ul class="navbar__links">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/now/">Now</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/projects/">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/shrines/">Shrines</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/links/">Links</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/guestbook/">Guestbook</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
background: var(--clr-navbar-bg);
|
||||
padding: 0.6em 1em;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar__toggle,
|
||||
.navbar__title {
|
||||
color: var(--clr-navbar-link);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.navbar__toggle:focus,
|
||||
.navbar a:focus {
|
||||
outline: 0.15em solid var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--clr-navbar-link);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: var(--clr-link-hover);
|
||||
}
|
||||
|
||||
.navbar a:focus {
|
||||
outline-offset: 0.3em;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
list-style: none;
|
||||
display: none;
|
||||
gap: 1em;
|
||||
padding: 0.5em 1.8em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.navbar__links--show {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.navbar {
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const navbarToggle = document.querySelector('.navbar__toggle');
|
||||
const navbarLinks = document.querySelector(".navbar__links");
|
||||
|
||||
navbarToggle.addEventListener('click', () => {
|
||||
navbarLinks.classList.toggle("navbar__links--show");
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<header class="main__header">
|
||||
|
||||
<ul class="breadcrumbs">
|
||||
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h1>Floating in a Sky Full of Pride: LGBTQ+ Booklet Artist Interview from MISI:Bawang</h1>
|
||||
<div class="article__info">
|
||||
<p>Posted on 11 September 2022 by Leilukin
|
||||
|
||||
|
||||
<p>Categories:
|
||||
|
||||
<a href="/categories/my-interviews">my interviews</a>
|
||||
|
||||
</p>
|
||||
|
||||
<p>🍿 3 min. read</p>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content__wrapper">
|
||||
|
||||
|
||||
|
||||
<article class="article">
|
||||
<p class="center-text"><i>(This article is also available on <a href="https://leilukinart.tumblr.com/post/676165415142031360/misibawang-a-malaysian-digital-booklet-project">my art blog on Tumblr</a>)</i></p>
|
||||
<p><a href="https://bawangqueerbooklet.msolidariti.org/">Floating in a Sky Full of Pride</a>, the LGBTQ+ booklet of <a href="https://misibawang.msolidariti.org/">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>
|
||||
<p><img src="/assets/images/articles/lgbtq-booklet-interview-misi-bawang/Bawang-Booklet-Interview-Leilukin-1.jpg" alt="First slide of MISI:Bawang's interview with me for their LGBTQ+ booklet"></p>
|
||||
<p><img src="/assets/images/articles/lgbtq-booklet-interview-misi-bawang/Bawang-Booklet-Interview-Leilukin-2.jpg" alt="Second slide of MISI:Bawang's interview with me for their LGBTQ+ booklet"></p>
|
||||
<p><img src="/assets/images/articles/lgbtq-booklet-interview-misi-bawang/Bawang-Booklet-Interview-Leilukin-3.jpg" alt="Third slide of MISI:Bawang's interview with me for their LGBTQ+ booklet"></p>
|
||||
<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">Twitter thread</a> and <a href="https://www.instagram.com/p/CXSlIbsJXsM/">Instagram post</a> that include my interview.</p>
|
||||
<p>Text version of my interview below:</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="what-was-your-experience-discovering-your-lgbtq-identity"><strong>“What was your experience discovering your LGBTQ+ identity?”</strong></h2>
|
||||
<a class="heading-anchor" href="#what-was-your-experience-discovering-your-lgbtq-identity" aria-labelledby="what-was-your-experience-discovering-your-lgbtq-identity"><span hidden>#</span></a></div>
|
||||
<blockquote>
|
||||
<p>The first clear signs of my attraction to women I was aware of started from my secondary school days. However, due to lack of knowledge and awareness of same-gender attraction and identities, I brushed it off as a teenage phase.</p>
|
||||
<p>However, that changed as I started becoming active on Tumblr since I was 19. At first, I joined Tumblr to connect with people who share my interest in Star Wars and BioWare games. This led me to get to know LGBTQ+ from different parts of the world, which is especially helped by the fact that BioWare games are known for LGBTQ+ representation, therefore LGBTQ+ people are visible in BioWare player communities. This started my journey of questioning my sexuality and gender.</p>
|
||||
<p>As I continue to stay on Tumblr, my engagement with LGBTQ+ people on Tumblr had gone beyond shared interest in entertainment media. Through Tumblr, I discovered many LGBTQ+ resources that helped me figure out my identity. As a result, at the age of 22, I eventually realised that I am a non-binary lesbian.</p>
|
||||
</blockquote>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="are-there-any-lgbtq-related-art-books-films-etc-that-gives-you-comfort-inspiration-and-strength-if-so-tell-us-about-them"><strong>“Are there any LGBTQ+ related art (books, films, etc) that gives you comfort, inspiration, and strength? If so, tell us about them!”</strong></h2>
|
||||
<a class="heading-anchor" href="#are-there-any-lgbtq-related-art-books-films-etc-that-gives-you-comfort-inspiration-and-strength-if-so-tell-us-about-them" aria-labelledby="are-there-any-lgbtq-related-art-books-films-etc-that-gives-you-comfort-inspiration-and-strength-if-so-tell-us-about-them"><span hidden>#</span></a></div>
|
||||
<blockquote>
|
||||
<p>A Summer’s End - Hong Kong 1986 is the LGBTQ+ art that gives me comfort, inspiration and strength the most. It is an indie visual novel developed by the Asian Canadian studio Oracle and Bone. The story is about a lesbian romance that takes place in Hong Kong in the year of 1986.</p>
|
||||
<p>A Summer’s End is the LGBTQ+ art I relate to most because it strongly resonates with my identity as a Cantonese-speaking Chinese lesbian who has grown up with Hong Kong media. I relate to both the protagonists, Michelle and Sam, as their characters represent different parts of my life as a Chinese lesbian. I also relate to the story’s theme of hoping for the future of our homeland despite the political uncertainties.</p>
|
||||
</blockquote>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="do-you-have-a-message-to-lgbtq-community-living-in-malaysia"><strong>“Do you have a message to LGBTQ+ community living in Malaysia?”</strong></h2>
|
||||
<a class="heading-anchor" href="#do-you-have-a-message-to-lgbtq-community-living-in-malaysia" aria-labelledby="do-you-have-a-message-to-lgbtq-community-living-in-malaysia"><span hidden>#</span></a></div>
|
||||
<blockquote>
|
||||
<p>First and foremost, you are not alone. LGBTQ+ Malaysians have a community that continues to survive despite the hardship we have to face due to society’s bigotry and misunderstanding of LGBTQ+ people and identities.</p>
|
||||
<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>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<aside class="right-sidebar">
|
||||
<nav class="content__nav sidebar--sticky">
|
||||
<h2 class="content__nav--title">My Contents</h2>
|
||||
<ul class="content__nav--links">
|
||||
|
||||
<li><a href="/archive/">Content Archive</a></li>
|
||||
|
||||
<li><a href="/categories/">Content Categories</a></li>
|
||||
|
||||
<li><a href="/articles/">Articles</a></li>
|
||||
|
||||
<li><a href="/blog/posts/">Blog Archive</a></li>
|
||||
|
||||
<li><a href="/blog/">Blog Home</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.content__nav {
|
||||
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||
background-color: var(--clr-content-bg);
|
||||
}
|
||||
|
||||
.content__nav--title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.7em 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.breadcrumbs li::after {
|
||||
content: '➔';
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
||||
|
||||
|
||||
<ul class="footer__links">
|
||||
<li><a
|
||||
|
||||
href="/sitemap/
|
||||
">Site Map</a></li>
|
||||
<li><a
|
||||
|
||||
href="/changelogs/"
|
||||
>Changelogs</a></li>
|
||||
<li><a href="/feed.xml">RSS</a></li>
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
background: var(--clr-main-footer-bg);
|
||||
padding: 1rem 1rem 3rem 1rem;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.footer__links li:not(:last-child)::after {
|
||||
content: '|';
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
/* Screen sizes larger than mobile */
|
||||
@media only screen and (min-width: 30rem) {
|
||||
.footer {
|
||||
padding: 1rem 1rem 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button class="top-btn hidden" aria-label="Scroll to top">
|
||||
<i class="fa-solid fa-chevron-up"></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: var(--clr-top-btn-bg);
|
||||
color: var(--clr-top-btn-txt);
|
||||
border-radius: 50em;
|
||||
width: 2rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.top-btn:focus {
|
||||
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const topButton = document.querySelector(".top-btn");
|
||||
|
||||
window.onscroll = () => {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
topButton.classList.remove("hidden");
|
||||
} else {
|
||||
topButton.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
topButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,556 +0,0 @@
|
|||
<!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:title" content="My Disinterest in Shipping and Dislike of Shipping Culture | Articles">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="About my lack of interest in shipping and dislike of shipping culture in fandom, and why.">
|
||||
<meta name="generator" content="Eleventy v2.0.1">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://leilukin.neocities.org/articles/my-dislike-of-shipping-culture/">
|
||||
<meta property="og:site_name" content="Leilukin's Hub">
|
||||
<meta property="og:locale" content="en_MY">
|
||||
<meta property="og:description" content="About my lack of interest in shipping and dislike of shipping culture in fandom, and why.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content="https://leilukin.neocities.org/articles/my-dislike-of-shipping-culture/">
|
||||
<meta name="twitter:description" content="About my lack of interest in shipping and dislike of shipping culture in fandom, and why.">
|
||||
<link rel="canonical" href="https://leilukin.neocities.org/articles/my-dislike-of-shipping-culture/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts/lexend/lexend.css">
|
||||
|
||||
|
||||
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<title>
|
||||
My Disinterest in Shipping and Dislike of Shipping Culture | Articles | Leilukin's Hub
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="hero__top-bar hidden"></div>
|
||||
<div class="hero__img">
|
||||
|
||||
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
width: 100%;
|
||||
background-color: var(--clr-hero-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero__top-bar {
|
||||
background-color: var(--clr-navbar-bg);
|
||||
width: 100%;
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
max-height: 16rem;
|
||||
|
||||
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const hero = document.querySelector(".hero");
|
||||
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
||||
const headerImgEl = document.querySelector(".hero__img");
|
||||
|
||||
|
||||
const todayEvent = getTodayEvent();
|
||||
|
||||
if (todayEvent) {
|
||||
heroTopBarEl.classList.remove('hidden');
|
||||
heroTopBarEl.innerHTML = todayEvent.blurb;
|
||||
|
||||
if (todayEvent.class) {
|
||||
headerImgEl.classList.add(todayEvent.class);
|
||||
}
|
||||
}
|
||||
|
||||
function getTodayEvent() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const year = date.getFullYear();
|
||||
const weekOfMonth = Math.ceil(day / 7);
|
||||
|
||||
const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
|
||||
const siteAnniversary = year - leilukinsHubLaunchDate;
|
||||
|
||||
if (month === 3 && day === 1)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day">Zero Discrimination Day</a>`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 3 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.internationalwomensday.com/">International Women's Day}</a>`,
|
||||
class: "symbol-venus",
|
||||
};
|
||||
else if (month === 3 && day === 31)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html">Trans Day of Visibility</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else if (month === 4 && day === 6)
|
||||
return {
|
||||
blurb: `Today is <a href="https://internationalasexualityday.org/en">International Asexuality Day</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 4 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 4 && weekOfMonth === 4)
|
||||
return {
|
||||
blurb: `This week is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Week</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 5 && day === 17)
|
||||
return {
|
||||
blurb: `Today is <a href="https://may17.org">International Day Against Homophobia, Biphobia and Transphobia</a>`,
|
||||
class: "flag-progress",
|
||||
};
|
||||
else if (month === 5 && day === 19)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/">Agender Pride Day</a>`,
|
||||
class: "flag-agender",
|
||||
};
|
||||
else if (month === 5 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday">Pansexual and Panromantic Awareness and Visibility Day</a>`,
|
||||
class: "flag-pan",
|
||||
};
|
||||
else if (month === 6)
|
||||
return {
|
||||
blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/">Pride Month</a>!`,
|
||||
class: "flag-progress-intersex",
|
||||
};
|
||||
else if (month === 7 && day === 14)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html">Non-Binary People's Day</a>`,
|
||||
class: "flag-non-binary",
|
||||
};
|
||||
else if (month === 7 && day === 28)
|
||||
return {
|
||||
blurb: `Today is Leilukin's Birthday`
|
||||
};
|
||||
else if (month === 8 && day === 25)
|
||||
return {
|
||||
blurb: `Today is <a href="https://aromanticspectrumday.net/">Aromantic Spectrum Visibility Day</a>`,
|
||||
class: "flag-aro",
|
||||
};
|
||||
else if (month === 9 && day === 11)
|
||||
return {
|
||||
blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin's Hub`
|
||||
};
|
||||
else if (month === 9 && day === 23)
|
||||
return {
|
||||
blurb: `Today is <a href="https://bivisibilityday.com/about">Bi Visibility Day</a>`,
|
||||
class: "flag-bi",
|
||||
};
|
||||
else if (month === 10 && day === 8)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2">International Lesbian Day</a>`,
|
||||
class: "flag-lesbian",
|
||||
};
|
||||
else if (month === 10 && day === 11)
|
||||
return {
|
||||
blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day">National Coming Out Day</a>`,
|
||||
class: "flag-rainbow",
|
||||
};
|
||||
else if (month === 10 && day === 17)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week">Genderfluid Visibility Week</a>`,
|
||||
class: "flag-genderfluid",
|
||||
};
|
||||
else if (month === 10 && day === 24)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week">Ace Week</a>`,
|
||||
class: "flag-ace",
|
||||
};
|
||||
else if (month === 10 && day === 26)
|
||||
return {
|
||||
blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day">Intersex Awareness Day</a>`,
|
||||
class: "flag-intersex",
|
||||
};
|
||||
else if (month === 11 && day === 13)
|
||||
return {
|
||||
blurb: `Today is the start of <a href="https://glaad.org/transweek/">Transgender Awareness Week</a>`,
|
||||
class: "flag-trans",
|
||||
};
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
</script>
|
||||
<nav class="navbar">
|
||||
<button class="navbar__toggle" aria-label="Navigation menu toggle">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
<h2 class="navbar__title">Navigation</h2>
|
||||
</button>
|
||||
<ul class="navbar__links">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/now/">Now</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/projects/">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/shrines/">Shrines</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/links/">Links</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/guestbook/">Guestbook</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
background: var(--clr-navbar-bg);
|
||||
padding: 0.6em 1em;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar__toggle,
|
||||
.navbar__title {
|
||||
color: var(--clr-navbar-link);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.navbar__toggle:focus,
|
||||
.navbar a:focus {
|
||||
outline: 0.15em solid var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--clr-navbar-link);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: var(--clr-link-hover);
|
||||
}
|
||||
|
||||
.navbar a:focus {
|
||||
outline-offset: 0.3em;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
list-style: none;
|
||||
display: none;
|
||||
gap: 1em;
|
||||
padding: 0.5em 1.8em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.navbar__links--show {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.navbar {
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__links {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const navbarToggle = document.querySelector('.navbar__toggle');
|
||||
const navbarLinks = document.querySelector(".navbar__links");
|
||||
|
||||
navbarToggle.addEventListener('click', () => {
|
||||
navbarLinks.classList.toggle("navbar__links--show");
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<header class="main__header">
|
||||
|
||||
<ul class="breadcrumbs">
|
||||
|
||||
<li>
|
||||
<a href="/articles/">Articles</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h1>My Disinterest in Shipping and Dislike of Shipping Culture</h1>
|
||||
<div class="article__info">
|
||||
<p>Posted on 14 August 2023 by Leilukin
|
||||
|
||||
|
||||
<p>Categories:
|
||||
|
||||
<a href="/categories/fandom-culture">fandom culture</a>
|
||||
|
||||
</p>
|
||||
|
||||
<p>🍿 2 min. read</p>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content__wrapper">
|
||||
|
||||
|
||||
|
||||
<article class="article">
|
||||
<p class="center-text"><em>(Note: The original version of this writing was posted on my Tumblr blog on 3 May 2021)</em></p>
|
||||
<p>I feel that the older I get, the less interested I am in shipping in general, and the less I can understand grown adults in late 20s or older who build their personality around shipping and cannot engage with any fiction without shipping something (before I remade my Tumblr account in 2015, I used to follow a 30-something-year-old fandom blogger who was literally like this).</p>
|
||||
<p>I have also come to actually dislike shipping culture, especially the mindset of engaging with media primarily through a shipping lens at the expense of the characterisation, non-romantic relationships, themes, and general content of a piece of media. Throughout my years of experience with various fandoms, I have witnessed so many incredible characters and non-romantic relationships get ignored or underappreciated by the fandom because they’re not part of a popular ship. On the other hand, there are also many amazing characters get mischaracterised to make a fanon ship work, or get reduced to a handful of tropes as shippers Flanderise them in their shipping fan works.</p>
|
||||
<p>Do not even get me started on the shippers who will complain about not being able to enjoy a piece of media just because “there’s no couple to ship”. For example, I’ve literally seen people on Tumblr make such complaints about the film <cite>Parasite</cite>, as if a profound piece of art that brutally critiques the class system does not matter if it does not provide any shipping material. It’s honestly very infuriating to see shippers like these are so willing to ignore art with meaningful story, characters and themes just because it lacks shipping fodder for them to project fanon onto.</p>
|
||||
<p>Speaking of fanon, I really hate it when shippers, particularly shippers of popular non-canon pairings, expect anyone who is a fan of the same piece of media or any of the characters involved in the pairing to care about ships and treat the popular fanon ships as canon. These shippers also tend to act like their fanon and headcanons are universal, using languages like “the fandom has decided–” and “everyone has agreed that–”. And these shippers wonder why others who do not engage with that piece of media for shipping get sick and tired of shipping taking over discussions about said piece of media.</p>
|
||||
<p>If you are so invested in shipping to the point that you are willing to disregard a piece of media just because you cannot find anything to ship, or you treat it as a personal attack when people talk about being sick and tired of shipping culture as well as how shipping dominates discussions about a piece of media, maybe you need to consider taking a step back from shipping and learning to take your shipping goggles off when you interact with a piece of media.</p>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<aside class="right-sidebar">
|
||||
<nav class="content__nav sidebar--sticky">
|
||||
<h2 class="content__nav--title">My Contents</h2>
|
||||
<ul class="content__nav--links">
|
||||
|
||||
<li><a href="/archive/">Content Archive</a></li>
|
||||
|
||||
<li><a href="/categories/">Content Categories</a></li>
|
||||
|
||||
<li><a href="/articles/">Articles</a></li>
|
||||
|
||||
<li><a href="/blog/posts/">Blog Archive</a></li>
|
||||
|
||||
<li><a href="/blog/">Blog Home</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.content__nav {
|
||||
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||
background-color: var(--clr-content-bg);
|
||||
}
|
||||
|
||||
.content__nav--title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.7em 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.breadcrumbs li::after {
|
||||
content: '➔';
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
||||
|
||||
|
||||
<ul class="footer__links">
|
||||
<li><a
|
||||
|
||||
href="/sitemap/
|
||||
">Site Map</a></li>
|
||||
<li><a
|
||||
|
||||
href="/changelogs/"
|
||||
>Changelogs</a></li>
|
||||
<li><a href="/feed.xml">RSS</a></li>
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
background: var(--clr-main-footer-bg);
|
||||
padding: 1rem 1rem 3rem 1rem;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.footer__links li:not(:last-child)::after {
|
||||
content: '|';
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
/* Screen sizes larger than mobile */
|
||||
@media only screen and (min-width: 30rem) {
|
||||
.footer {
|
||||
padding: 1rem 1rem 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
.footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button class="top-btn hidden" aria-label="Scroll to top">
|
||||
<i class="fa-solid fa-chevron-up"></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: var(--clr-top-btn-bg);
|
||||
color: var(--clr-top-btn-txt);
|
||||
border-radius: 50em;
|
||||
width: 2rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.top-btn:focus {
|
||||
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const topButton = document.querySelector(".top-btn");
|
||||
|
||||
window.onscroll = () => {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
topButton.classList.remove("hidden");
|
||||
} else {
|
||||
topButton.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
topButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 684 B |
Binary file not shown.
|
Before Width: | Height: | Size: 243 B |
Binary file not shown.
|
Before Width: | Height: | Size: 649 B |
Binary file not shown.
|
Before Width: | Height: | Size: 260 B |
Binary file not shown.
|
Before Width: | Height: | Size: 258 B |
Binary file not shown.
|
Before Width: | Height: | Size: 247 B |
Binary file not shown.
|
Before Width: | Height: | Size: 438 B |
Binary file not shown.
|
Before Width: | Height: | Size: 567 B |
|
|
@ -1,32 +0,0 @@
|
|||
:root {
|
||||
--clr-body-bg: #1f0033;
|
||||
--img-body-bg: none;
|
||||
--clr-body-txt: #fceaff;
|
||||
--clr-content-bg: #101010;
|
||||
|
||||
--clr-top-btn-bg: #ff50df;
|
||||
--clr-top-btn-txt: #101010;
|
||||
|
||||
--clr-main-heading: #FF29D8;
|
||||
--clr-sub-heading: #FF29D8;
|
||||
--clr-title-border: #d3aad5;
|
||||
--clr-bold-txt: #ff9933;
|
||||
--clr-link: #d270ff;
|
||||
--clr-link-hover: #7E4197;
|
||||
--clr-quote-bg: #222121;
|
||||
--clr-quote-border: #4d4385;
|
||||
|
||||
--clr-code-bg: #241445;
|
||||
--clr-code-border: #82668f;
|
||||
--clr-dates: rgb(158, 203, 255);
|
||||
|
||||
--clr-link-btn-bg: #873eb5;
|
||||
--clr-link-btn-txt: white;
|
||||
--clr-link-btn-hover: #241445;
|
||||
|
||||
--clr-hero-bg: #101010;
|
||||
--clr-navbar-bg: #181818;
|
||||
--clr-navbar-link: white;
|
||||
|
||||
--clr-main-footer-bg: #181818;
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
:root {
|
||||
--clr-body-bg: #e4e3e3;
|
||||
--clr-body-txt: #141414;
|
||||
--clr-content-bg: #ffffff;
|
||||
|
||||
--clr-top-btn-bg: #AB75E8;
|
||||
--clr-top-btn-txt: #ffffff;
|
||||
|
||||
--clr-main-heading: #171717;
|
||||
--clr-sub-heading: #111111;
|
||||
--clr-title-border: #7629db;
|
||||
--clr-bold-txt: #da4500;
|
||||
--clr-link: #7629db;
|
||||
--clr-link-hover: #270e48;
|
||||
--clr-quote-bg: #f3f2f2;
|
||||
--clr-quote-border: #414141;
|
||||
|
||||
--clr-code-bg: #f3f2f2;
|
||||
--clr-code-border: #414141;
|
||||
--clr-dates: rgb(58, 150, 255);
|
||||
|
||||
--clr-link-btn-bg: #873eb5;
|
||||
--clr-link-btn-txt: white;
|
||||
--clr-link-btn-hover: #241445;
|
||||
|
||||
--clr-hero-bg: #7944B6;
|
||||
--clr-navbar-bg: #9b59b6;
|
||||
--clr-navbar-link: white;
|
||||
|
||||
--clr-main-footer-bg: #9b59b6;
|
||||
}
|
||||
|
||||
.hero__top-bar {
|
||||
color: var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: var(--clr-navbar-link);
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
/* SPECIAL COMPONENTS */
|
||||
.text-box {
|
||||
background: var(--clr-quote-bg);
|
||||
border: 0.1em solid var(--clr-main-heading);
|
||||
padding: 0.8em;
|
||||
margin: 0.5em 0;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.mod-entry,
|
||||
.mod-entry__downloads {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mod-entry {
|
||||
gap: 1em;
|
||||
background: var(--clr-mod-entry-bg);
|
||||
margin: 1em 0;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.mod-entry__downloads {
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 37.5rem) {
|
||||
.mod-entry__downloads {
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Link button */
|
||||
.link-btn {
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border: 0.15em solid var(--clr-link-btn-bg);
|
||||
border-radius: 0.6em;
|
||||
padding: 0.5em 1em;
|
||||
background: var(--clr-link-btn-bg);
|
||||
color: var(--clr-link-btn-txt);
|
||||
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: var(--clr-link-btn-hover);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.link-btn:focus {
|
||||
outline: 0.15em solid var(--clr-link-btn-txt);
|
||||
outline-offset: -0.25em;
|
||||
}
|
||||
|
||||
/* Spoiler Accordion */
|
||||
* + .spoiler-accordion {
|
||||
margin-top: var(--sz-paragraph-margin);
|
||||
}
|
||||
|
||||
.spoiler-accordion {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.spoiler-accordion__hint {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.spoiler-accordion__spoiler {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.spoiler-accordion__spoiler p + p {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/* Web button lists */
|
||||
.web-btn-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
/* MAIN CONTENT */
|
||||
main,
|
||||
.content__wrapper,
|
||||
.content--divided {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
main,
|
||||
.content__wrapper {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content__wrapper,
|
||||
.content--divided {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.content__wrapper {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.article,
|
||||
.content:not(.content--divided),
|
||||
.content__section {
|
||||
padding: 1.5rem var(--sz-main-padding);
|
||||
}
|
||||
|
||||
.main__header {
|
||||
padding: 2.5rem var(--sz-main-padding);
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.article,
|
||||
.content:not(.content--divided),
|
||||
.content__section {
|
||||
background-color: var(--clr-content-bg);
|
||||
}
|
||||
|
||||
.article__info {
|
||||
text-align: center;
|
||||
display: grid;
|
||||
gap: 0.2em;
|
||||
}
|
||||
|
||||
.content > * + .h2,
|
||||
.content__section > * + .h2,
|
||||
.article > * + .h2 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.content > * + :not([class]),
|
||||
.content__section > * + :not([class]),
|
||||
.article > * + :not([class]) {
|
||||
margin-top: var(--sz-paragraph-margin);
|
||||
}
|
||||
|
||||
.sidebar--sticky {
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
}
|
||||
|
||||
/* Desktop main content layout */
|
||||
@media only screen and (min-width: 60rem) {
|
||||
.content__wrapper {
|
||||
padding: 0 var(--sz-main-padding);
|
||||
grid-template-areas: 'leftbar article rightbar';
|
||||
grid-template-columns: minmax(0, 20%) minmax(0, 2.5fr) minmax(0, 20%);
|
||||
}
|
||||
|
||||
.article,
|
||||
.content {
|
||||
grid-area: article;
|
||||
}
|
||||
|
||||
.left-sidebar {
|
||||
grid-area: leftbar;
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
grid-area: rightbar;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
/* GENERAL STYLES */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-family: var(--ff-primary), system-ui, sans-serif;
|
||||
color: var(--clr-body-txt);
|
||||
background-color: var(--clr-body-bg);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--clr-main-heading);
|
||||
font-size: var(--sz-h1);
|
||||
border-bottom: 0.18rem solid var(--clr-title-border);
|
||||
padding-bottom: 0.3em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
color: var(--clr-sub-heading);
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
font-size: var(--sz-h2);
|
||||
}
|
||||
|
||||
h3, .h3 {
|
||||
font-size: var(--sz-h3);
|
||||
}
|
||||
|
||||
h2:has(+ *[class]:not(.heading-anchor)), .h2:has(+ *[class]),
|
||||
h3:has(+ *[class]:not(.heading-anchor)), .h3:has(+ *[class]) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0.05rem solid var(--clr-title-border);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--clr-bold-txt);
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0.15em solid var(--clr-body-txt);
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
color: var(--clr-link);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--clr-link-hover);
|
||||
}
|
||||
|
||||
a:not([class]):focus {
|
||||
outline: 0.15rem solid var(--clr-link);
|
||||
}
|
||||
|
||||
a:focus img {
|
||||
outline: 0.2em solid var(--clr-body-txt);
|
||||
}
|
||||
|
||||
:not(.c-blockquote) > blockquote,
|
||||
.c-blockquote {
|
||||
padding: 1em 1.4em 1.4em;
|
||||
border-inline-start: 0.1em solid var(--clr-main-heading);
|
||||
background-color: var(--clr-quote-bg);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
blockquote > * + :not([class]),
|
||||
* + blockquote,
|
||||
* + .c-blockquote,
|
||||
.c-blockquote__attribution {
|
||||
margin-top: var(--sz-paragraph-margin);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
details:focus {
|
||||
outline-offset: 0.2em;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-bottom: var(--sz-paragraph-margin);
|
||||
display: grid;
|
||||
place-content: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
color: var(--clr-bold-txt);
|
||||
padding: 0 0.15em;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0.07em solid var(--clr-code-border);
|
||||
background: var(--clr-code-bg);
|
||||
max-width: 90vw;
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
/* ------------------- */
|
||||
/* Custom Properties */
|
||||
/* ------------------- */
|
||||
:root {
|
||||
--clr-body-bg: #08031A;
|
||||
--clr-body-txt: #fceaff;
|
||||
--clr-content-bg: #3d2163;
|
||||
|
||||
--clr-top-btn-bg: #FFD05A;
|
||||
--clr-top-btn-txt: #08031A;
|
||||
|
||||
--clr-main-heading: #ED64F5;
|
||||
--clr-sub-heading: #e8b86f;
|
||||
--clr-title-border: #d3aad5;
|
||||
--clr-bold-txt: #ff9933;
|
||||
--clr-link: #ED64F5;
|
||||
--clr-link-hover: #c355c9;
|
||||
--clr-quote-bg: #13092D;
|
||||
--clr-quote-border: #999999;
|
||||
|
||||
--clr-code-bg: #241445;
|
||||
--clr-code-border: #82668f;
|
||||
--clr-dates: rgb(121, 184, 255);
|
||||
|
||||
--clr-link-btn-bg: #873eb5;
|
||||
--clr-link-btn-txt: white;
|
||||
--clr-link-btn-hover: #241445;
|
||||
|
||||
--clr-hero-bg: black;
|
||||
--clr-navbar-bg: #222;
|
||||
--clr-navbar-link: white;
|
||||
|
||||
--clr-main-footer-bg: #13092D;
|
||||
|
||||
--clr-mod-entry-bg: #241445;
|
||||
|
||||
--ff-primary: 'Lexend';
|
||||
|
||||
--sz-h1: clamp(2rem, 1rem + 5vw, 3rem);
|
||||
--sz-h2: clamp(1.55rem, 1rem + 3vw, 2.15rem);
|
||||
--sz-h3: clamp(1.55rem, 1rem + 3vw, 1.8rem);
|
||||
--sz-paragraph-margin: 1.15em;
|
||||
--sz-main-padding: clamp(1rem, 5%, 4rem);
|
||||
}
|
||||
|
||||
/* ------------------- */
|
||||
/* CSS Reset */
|
||||
/* ------------------- */
|
||||
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Prevent font size inflation */
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Remove default margin in favour of better control in authored CSS */
|
||||
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 body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Set shorter line heights on headings and interactive elements */
|
||||
h1, h2, h3, h4,
|
||||
button, input, label {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Balance text wrapping on headings */
|
||||
h1, h2,
|
||||
h3, h4 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny */
|
||||
textarea:not([rows]) {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
/* Anything that has been anchored to should have extra scroll margin */
|
||||
:target {
|
||||
scroll-margin-block: 5ex;
|
||||
}
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
/* ------------------- */
|
||||
/* Custom Properties */
|
||||
/* ------------------- */
|
||||
:root {
|
||||
--clr-body-bg: #000000;
|
||||
--clr-body-txt: #ffffff;
|
||||
--clr-h1: #BA6FE8;
|
||||
--clr-link-btn-bg: #7A37A3;
|
||||
--clr-link-btn-hover: #BA6FE8;
|
||||
|
||||
--ff-default: 'Noto Sans';
|
||||
|
||||
--fs-h1: 3.1rem;
|
||||
--fs-body: 1rem;
|
||||
--fs-link-btn: 2rem;
|
||||
|
||||
--fw-reg: 400;
|
||||
--fw-link-btn: 600;
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (min-width: 43.75rem) {
|
||||
:root {
|
||||
--fs-h1: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------- */
|
||||
/* CSS Reset */
|
||||
/* ------------------- */
|
||||
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Prevent font size inflation */
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Remove default margin in favour of better control in authored CSS */
|
||||
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 body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Set shorter line heights on headings and interactive elements */
|
||||
h1, h2, h3, h4,
|
||||
button, input, label {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Balance text wrapping on headings */
|
||||
h1, h2,
|
||||
h3, h4 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny */
|
||||
textarea:not([rows]) {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
/* Anything that has been anchored to should have extra scroll margin */
|
||||
:target {
|
||||
scroll-margin-block: 5ex;
|
||||
}
|
||||
|
||||
/* ------------------- */
|
||||
/* STYLING BEGINS */
|
||||
/* ------------------- */
|
||||
|
||||
body {
|
||||
font-size: var(--clr-body-bg);
|
||||
font-family: var(--ff-default), Arial, Helvetica, sans-serif;
|
||||
color: #FFFFFF;
|
||||
background: var(--clr-body-bg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body,
|
||||
main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--fs-h1);
|
||||
color: var(--clr-h1);
|
||||
font-weight: var(--fw-reg);
|
||||
letter-spacing: 0.08em;
|
||||
margin: 2rem 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.index__btn-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.index__link {
|
||||
text-decoration: none;
|
||||
font-size: var(--fs-link-btn);
|
||||
font-weight: var(--fw-link-btn);
|
||||
border: none;
|
||||
border-radius: 0.6rem;
|
||||
padding: 1rem 1.25rem;
|
||||
margin: 0.5rem;
|
||||
background: var(--clr-link-btn-bg);
|
||||
color: var(--clr-body-txt);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.index__link:hover {
|
||||
cursor: pointer;
|
||||
background: var(--clr-link-btn-hover);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.index__link:focus {
|
||||
outline-offset: 0.15em;
|
||||
outline: 0.1em solid var(--clr-body-txt);
|
||||
}
|
||||
|
||||
a:focus img {
|
||||
outline: 0.2em solid var(--clr-body-txt);
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
/* HEADING WRAPPER AND ANCHOR */
|
||||
.heading-wrapper {
|
||||
display: flex;
|
||||
gap: 0.3em;
|
||||
margin-top: 1.8em;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.heading-anchor {
|
||||
line-height: 1;
|
||||
opacity: 0.8;
|
||||
order: -1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.heading-anchor:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.1em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.heading-anchor:focus {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
|
||||
.heading-anchor [hidden] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* BLOCKQUOTES With CITATIONS */
|
||||
.c-blockquote__attribution {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.c-blockquote__attribution::before {
|
||||
content: "—";
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
/* FOOTNOTES */
|
||||
.footnote-ref {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
margin-top: 3em;
|
||||
border-top: 0.15em solid var(--clr-title-border);
|
||||
}
|
||||
|
||||
.footnotes-list {
|
||||
display: grid;
|
||||
gap: 0.3em;
|
||||
}
|
||||
|
||||
.footnotes-list :target {
|
||||
background-color: var(--clr-quote-bg);
|
||||
outline: 0.1em dashed var(--clr-title-border);
|
||||
}
|
||||
|
|
@ -1,199 +0,0 @@
|
|||
/* Pride flag backgrounds */
|
||||
.flag-rainbow {
|
||||
background: linear-gradient(
|
||||
#e40303 0 16.67%,
|
||||
#ff8c00 0 33.33%,
|
||||
#ffed00 0 50%,
|
||||
#008026 0 66.67%,
|
||||
#004dff 0 83.33%,
|
||||
#750787 0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.flag-lesbian {
|
||||
background: linear-gradient(
|
||||
#d52d00 0 14.29%,
|
||||
#ef7627 0 28.57%,
|
||||
#ff9a56 0 42.86%,
|
||||
#ffffff 0 57.14%,
|
||||
#d362a4 0 71.43%,
|
||||
#b85490 0 86.71%,
|
||||
#a30262 0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.flag-bi {
|
||||
background: linear-gradient(
|
||||
#d60270 0 40%,
|
||||
#9b4f97 0 60%,
|
||||
#0038a7 0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.flag-trans {
|
||||
background: linear-gradient(
|
||||
#5bcefa 0 20%,
|
||||
#f5a9b8 0 40%,
|
||||
#ffffff 0 60%,
|
||||
#f5a9b8 0 80%,
|
||||
#5bcefa 0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.flag-intersex {
|
||||
background: radial-gradient(closest-side circle at center,
|
||||
#ffd800 44%,
|
||||
#7902aa 44%,
|
||||
#7902aa 56%,
|
||||
#ffd800 56%
|
||||
);
|
||||
}
|
||||
|
||||
.flag-ace {
|
||||
background: linear-gradient(
|
||||
#000000 0 25%,
|
||||
#a3a3a3 0 50%,
|
||||
#ffffff 0 75%,
|
||||
#800080 0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.flag-aro {
|
||||
background: linear-gradient(
|
||||
#0a2 20%,
|
||||
#7d6 0 40%,
|
||||
white 0 60%,
|
||||
darkgray 0 80%,
|
||||
black 0
|
||||
);
|
||||
}
|
||||
|
||||
.flag-non-binary {
|
||||
background: linear-gradient(
|
||||
#fff430 0 25%,
|
||||
#ffffff 0 50%,
|
||||
#9c59d1 0 75%,
|
||||
#000000 0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.flag-pan {
|
||||
background: linear-gradient(
|
||||
#ff218c 0 33.33%,
|
||||
#ffd800 0 66.67%,
|
||||
#21b1ff 0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.flag-genderfluid {
|
||||
background: linear-gradient(
|
||||
#ff76a4 0 20%,
|
||||
#ffffff 0 40%,
|
||||
#c011d7 0 60%,
|
||||
#000000 0 80%,
|
||||
#2f3cbe 0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.flag-agender {
|
||||
background: linear-gradient(
|
||||
black 0 14.28%,
|
||||
silver 0 28.57%,
|
||||
white 0 42.85%,
|
||||
#a3fa73 0 57.14%,
|
||||
white 0 71.42%,
|
||||
silver 0 85.71%,
|
||||
black 0
|
||||
);
|
||||
}
|
||||
|
||||
.flag-demigirl {
|
||||
background: linear-gradient(
|
||||
#7F7F7F 0 14.28%,
|
||||
#C4C4C4 0 28.57%,
|
||||
#FDADC8 0 42.85%,
|
||||
white 0 57.14%,
|
||||
#FDADC8 0 71.42%,
|
||||
#C4C4C4 0 85.71%,
|
||||
#7F7F7F 0
|
||||
);
|
||||
}
|
||||
|
||||
.flag-bigender {
|
||||
background: linear-gradient(
|
||||
#d074a2 0 14.28%,
|
||||
#f8a1cd 0 28.57%,
|
||||
#d9c6ea 0 42.85%,
|
||||
white 0 57.14%,
|
||||
#d9c6ea 0 71.42%,
|
||||
#90c8ec 0 85.71%,
|
||||
#6583d5 0
|
||||
);
|
||||
}
|
||||
|
||||
.flag-gilbert-baker {
|
||||
background: linear-gradient(
|
||||
#FF6599 12.5%,
|
||||
#e40303 0 25%,
|
||||
#ff8c00 0 37.5%,
|
||||
#ffed00 0 50%,
|
||||
#008026 0 62.5%,
|
||||
#00C0C0 0 75%,
|
||||
#004dff 0 87.5%,
|
||||
#750787 0
|
||||
);
|
||||
}
|
||||
|
||||
.flag-gilbert-baker-2017 {
|
||||
background: linear-gradient(
|
||||
#CD66FF 11.1%,
|
||||
#FF6599 0 22.2%,
|
||||
#e40303 0 33.3%,
|
||||
#ff8c00 0 44.4%,
|
||||
#ffed00 0 55.5%,
|
||||
#008026 0 66.6%,
|
||||
#00C0C0 0 77.7%,
|
||||
#004dff 0 88.8%,
|
||||
#750787 0
|
||||
);
|
||||
}
|
||||
|
||||
.flag-progress {
|
||||
background:
|
||||
conic-gradient(at 14% 50%, #0000 221.25deg, #ffffff 222deg 318deg, #0000 318.25deg),
|
||||
conic-gradient(at 23% 50%, #0000 221.25deg, #f5a9b8 222deg 318deg, #0000 318.25deg),
|
||||
conic-gradient(at 32% 50%, #0000 221.25deg, #5bcefa 222deg 318deg, #0000 318.25deg),
|
||||
conic-gradient(at 41% 50%, #0000 221.25deg, #784F17 222deg 318deg, #0000 318.25deg),
|
||||
conic-gradient(at 50% 50%, #0000 221.25deg, black 222deg 318deg, #0000 318.25deg),
|
||||
linear-gradient(#e40303 0 16.66%, #ff8c00 0 33.33%, #ffed00 0 50%, #008026 0 66.66%, #004dff 0 83.33%, #750787 0);
|
||||
}
|
||||
|
||||
.flag-progress-intersex {
|
||||
background:
|
||||
radial-gradient(circle at 9.75% 50%, #0000 6.66%, #7902aa 6.7% 8.33%, #0000 8.4%),
|
||||
conic-gradient(at 26.66% 50%, #0000 222.75deg, #ffd800 0 317.25deg, #0000 0),
|
||||
conic-gradient(at 33% 50%, #0000 222.75deg, #ffffff 0 317.25deg, #0000 0),
|
||||
conic-gradient(at 39% 50%, #0000 222.75deg, #f5a9b8 0 317.25deg, #0000 0),
|
||||
conic-gradient(at 45.66% 50%, #0000 222.75deg, #5bcefa 0 317.25deg, #0000 0),
|
||||
conic-gradient(at 52% 50%, #0000 222.75deg, #753000 0 317.25deg, #0000 0),
|
||||
conic-gradient(at 58.33% 50%, #0000 222.75deg, #000 0 317.25deg, #0000 0),
|
||||
linear-gradient(#e40303 0 16.66%, #ff8c00 0 33.33%, #ffed00 0 50%, #008026 0 66.66%, #004dff 0 83.33%, #750787 0);
|
||||
}
|
||||
|
||||
.flag-progress-intersex-lesbian {
|
||||
background:
|
||||
radial-gradient(circle at 9.75% 50%, #0000 6.66%, #7902aa 6.7% 8.33%, #0000 8.4%),
|
||||
conic-gradient(at 26.66% 50%, #0000 222.75deg, #ffd800 0 317.25deg, #0000 0),
|
||||
conic-gradient(at 33% 50%, #0000 222.75deg, #ffffff 0 317.25deg, #0000 0),
|
||||
conic-gradient(at 39% 50%, #0000 222.75deg, #f5a9b8 0 317.25deg, #0000 0),
|
||||
conic-gradient(at 45.66% 50%, #0000 222.75deg, #5bcefa 0 317.25deg, #0000 0),
|
||||
conic-gradient(at 52% 50%, #0000 222.75deg, #753000 0 317.25deg, #0000 0),
|
||||
conic-gradient(at 58.33% 50%, #0000 222.75deg, #000 0 317.25deg, #0000 0),
|
||||
linear-gradient(#d52d00 0 14.29%, #ef7627 0 28.57%, #ff9a56 0 42.86%, #ffffff 0 57.14%, #d362a4 0 71.43%, #b85490 0 86.71%, #a30262 0 100%);
|
||||
}
|
||||
|
||||
.symbol-venus {
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12pt' height='12pt' viewBox='0 0 12 12' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style='fill:none;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(35.15%25,0%25,64.85%25);stroke-opacity:1;stroke-miterlimit:10;' d='M 85 85 C 85 98.789062 73.789062 110 60 110 C 46.210938 110 35 98.789062 35 85 C 35 71.210938 46.210938 60 60 60 C 73.789062 60 85 71.210938 85 85 Z M 85 85 ' transform='matrix(0.1,0,0,-0.1,0,12)'/%3E%3Cpath style='fill:none;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(35.15%25,0%25,64.85%25);stroke-opacity:1;stroke-miterlimit:10;' d='M 60 10 L 60 60 ' transform='matrix(0.1,0,0,-0.1,0,12)'/%3E%3Cpath style='fill:none;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(35.15%25,0%25,64.85%25);stroke-opacity:1;stroke-miterlimit:10;' d='M 35 35 L 85 35 ' transform='matrix(0.1,0,0,-0.1,0,12)'/%3E%3C/g%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
:root {
|
||||
--clr-body-bg: #212121;
|
||||
--img-body-bg: none;
|
||||
--clr-body-txt: #fceaff;
|
||||
--clr-content-bg: #000000;
|
||||
|
||||
--clr-top-btn-bg: #FFD05A;
|
||||
--clr-top-btn-txt: #000000;
|
||||
|
||||
--clr-main-heading: #ffae00;
|
||||
--clr-sub-heading: #ffae00;
|
||||
--clr-title-border: #ffe387;
|
||||
--clr-bold-txt: #ff9933;
|
||||
--clr-link: #bb9671;
|
||||
--clr-link-hover: #94575a;
|
||||
--clr-quote-bg: #2f2d2d;
|
||||
--clr-quote-border: #4d4385;
|
||||
|
||||
--clr-code-bg: #241445;
|
||||
--clr-code-border: #e4dbbe;
|
||||
--clr-dates: rgb(158, 203, 255);
|
||||
|
||||
--clr-link-btn-bg: #873eb5;
|
||||
--clr-link-btn-txt: white;
|
||||
--clr-link-btn-hover: #241445;
|
||||
|
||||
--clr-hero-bg: black;
|
||||
--clr-navbar-bg: #171717;
|
||||
--clr-navbar-link: white;
|
||||
|
||||
--clr-main-footer-bg: #171717;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.juhani-history {
|
||||
font-weight: 700;
|
||||
color: rgb(213, 98, 255);
|
||||
}
|
||||
|
||||
.juhani-personal {
|
||||
font-weight: 700;
|
||||
color: rgb(255, 122, 206);
|
||||
}
|
||||
|
||||
.info-field {
|
||||
font-weight: 700;
|
||||
color: rgb(213, 98, 255);
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
/* UTILITY CLASSES */
|
||||
.bold-text {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.center-el {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.center-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.indent-text {
|
||||
padding: 1em 0 1em 2em;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.date-style {
|
||||
font-weight: 700;
|
||||
color: var(--clr-dates);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
display: grid;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
outline-offset: 0;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 723 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"name": "Leilukin's Hub",
|
||||
"short_name": "Leilukin's Hub",
|
||||
"icons":
|
||||
[
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#7A37A3",
|
||||
"background_color": "#000000",
|
||||
"display": "standalone"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,19 +0,0 @@
|
|||
/*!
|
||||
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-classic: 'Font Awesome 6 Free';
|
||||
--fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
|
||||
|
||||
.far,
|
||||
.fa-regular {
|
||||
font-weight: 400; }
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/*!
|
||||
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/*!
|
||||
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-classic: 'Font Awesome 6 Free';
|
||||
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
|
||||
|
||||
.fas,
|
||||
.fa-solid {
|
||||
font-weight: 900; }
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/*!
|
||||
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}
|
||||
|
|
@ -1,640 +0,0 @@
|
|||
/*!
|
||||
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Solid';
|
||||
--fa-font-regular: normal 400 1em/1 'Font Awesome 6 Regular';
|
||||
--fa-font-light: normal 300 1em/1 'Font Awesome 6 Light';
|
||||
--fa-font-thin: normal 100 1em/1 'Font Awesome 6 Thin';
|
||||
--fa-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
|
||||
--fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-light: normal 300 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-thin: normal 100 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; }
|
||||
|
||||
svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
|
||||
overflow: visible;
|
||||
box-sizing: content-box; }
|
||||
|
||||
.svg-inline--fa {
|
||||
display: var(--fa-display, inline-block);
|
||||
height: 1em;
|
||||
overflow: visible;
|
||||
vertical-align: -.125em; }
|
||||
.svg-inline--fa.fa-2xs {
|
||||
vertical-align: 0.1em; }
|
||||
.svg-inline--fa.fa-xs {
|
||||
vertical-align: 0em; }
|
||||
.svg-inline--fa.fa-sm {
|
||||
vertical-align: -0.07143em; }
|
||||
.svg-inline--fa.fa-lg {
|
||||
vertical-align: -0.2em; }
|
||||
.svg-inline--fa.fa-xl {
|
||||
vertical-align: -0.25em; }
|
||||
.svg-inline--fa.fa-2xl {
|
||||
vertical-align: -0.3125em; }
|
||||
.svg-inline--fa.fa-pull-left {
|
||||
margin-right: var(--fa-pull-margin, 0.3em);
|
||||
width: auto; }
|
||||
.svg-inline--fa.fa-pull-right {
|
||||
margin-left: var(--fa-pull-margin, 0.3em);
|
||||
width: auto; }
|
||||
.svg-inline--fa.fa-li {
|
||||
width: var(--fa-li-width, 2em);
|
||||
top: 0.25em; }
|
||||
.svg-inline--fa.fa-fw {
|
||||
width: var(--fa-fw-width, 1.25em); }
|
||||
|
||||
.fa-layers svg.svg-inline--fa {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0; }
|
||||
|
||||
.fa-layers-text, .fa-layers-counter {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
text-align: center; }
|
||||
|
||||
.fa-layers {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: -.125em;
|
||||
width: 1em; }
|
||||
.fa-layers svg.svg-inline--fa {
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center; }
|
||||
|
||||
.fa-layers-text {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center; }
|
||||
|
||||
.fa-layers-counter {
|
||||
background-color: var(--fa-counter-background-color, #ff253a);
|
||||
border-radius: var(--fa-counter-border-radius, 1em);
|
||||
box-sizing: border-box;
|
||||
color: var(--fa-inverse, #fff);
|
||||
line-height: var(--fa-counter-line-height, 1);
|
||||
max-width: var(--fa-counter-max-width, 5em);
|
||||
min-width: var(--fa-counter-min-width, 1.5em);
|
||||
overflow: hidden;
|
||||
padding: var(--fa-counter-padding, 0.25em 0.5em);
|
||||
right: var(--fa-right, 0);
|
||||
text-overflow: ellipsis;
|
||||
top: var(--fa-top, 0);
|
||||
-webkit-transform: scale(var(--fa-counter-scale, 0.25));
|
||||
transform: scale(var(--fa-counter-scale, 0.25));
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right; }
|
||||
|
||||
.fa-layers-bottom-right {
|
||||
bottom: var(--fa-bottom, 0);
|
||||
right: var(--fa-right, 0);
|
||||
top: auto;
|
||||
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
-webkit-transform-origin: bottom right;
|
||||
transform-origin: bottom right; }
|
||||
|
||||
.fa-layers-bottom-left {
|
||||
bottom: var(--fa-bottom, 0);
|
||||
left: var(--fa-left, 0);
|
||||
right: auto;
|
||||
top: auto;
|
||||
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left; }
|
||||
|
||||
.fa-layers-top-right {
|
||||
top: var(--fa-top, 0);
|
||||
right: var(--fa-right, 0);
|
||||
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right; }
|
||||
|
||||
.fa-layers-top-left {
|
||||
left: var(--fa-left, 0);
|
||||
right: auto;
|
||||
top: var(--fa-top, 0);
|
||||
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
-webkit-transform-origin: top left;
|
||||
transform-origin: top left; }
|
||||
|
||||
.fa-1x {
|
||||
font-size: 1em; }
|
||||
|
||||
.fa-2x {
|
||||
font-size: 2em; }
|
||||
|
||||
.fa-3x {
|
||||
font-size: 3em; }
|
||||
|
||||
.fa-4x {
|
||||
font-size: 4em; }
|
||||
|
||||
.fa-5x {
|
||||
font-size: 5em; }
|
||||
|
||||
.fa-6x {
|
||||
font-size: 6em; }
|
||||
|
||||
.fa-7x {
|
||||
font-size: 7em; }
|
||||
|
||||
.fa-8x {
|
||||
font-size: 8em; }
|
||||
|
||||
.fa-9x {
|
||||
font-size: 9em; }
|
||||
|
||||
.fa-10x {
|
||||
font-size: 10em; }
|
||||
|
||||
.fa-2xs {
|
||||
font-size: 0.625em;
|
||||
line-height: 0.1em;
|
||||
vertical-align: 0.225em; }
|
||||
|
||||
.fa-xs {
|
||||
font-size: 0.75em;
|
||||
line-height: 0.08333em;
|
||||
vertical-align: 0.125em; }
|
||||
|
||||
.fa-sm {
|
||||
font-size: 0.875em;
|
||||
line-height: 0.07143em;
|
||||
vertical-align: 0.05357em; }
|
||||
|
||||
.fa-lg {
|
||||
font-size: 1.25em;
|
||||
line-height: 0.05em;
|
||||
vertical-align: -0.075em; }
|
||||
|
||||
.fa-xl {
|
||||
font-size: 1.5em;
|
||||
line-height: 0.04167em;
|
||||
vertical-align: -0.125em; }
|
||||
|
||||
.fa-2xl {
|
||||
font-size: 2em;
|
||||
line-height: 0.03125em;
|
||||
vertical-align: -0.1875em; }
|
||||
|
||||
.fa-fw {
|
||||
text-align: center;
|
||||
width: 1.25em; }
|
||||
|
||||
.fa-ul {
|
||||
list-style-type: none;
|
||||
margin-left: var(--fa-li-margin, 2.5em);
|
||||
padding-left: 0; }
|
||||
.fa-ul > li {
|
||||
position: relative; }
|
||||
|
||||
.fa-li {
|
||||
left: calc(var(--fa-li-width, 2em) * -1);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: var(--fa-li-width, 2em);
|
||||
line-height: inherit; }
|
||||
|
||||
.fa-border {
|
||||
border-color: var(--fa-border-color, #eee);
|
||||
border-radius: var(--fa-border-radius, 0.1em);
|
||||
border-style: var(--fa-border-style, solid);
|
||||
border-width: var(--fa-border-width, 0.08em);
|
||||
padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }
|
||||
|
||||
.fa-pull-left {
|
||||
float: left;
|
||||
margin-right: var(--fa-pull-margin, 0.3em); }
|
||||
|
||||
.fa-pull-right {
|
||||
float: right;
|
||||
margin-left: var(--fa-pull-margin, 0.3em); }
|
||||
|
||||
.fa-beat {
|
||||
-webkit-animation-name: fa-beat;
|
||||
animation-name: fa-beat;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
|
||||
animation-timing-function: var(--fa-animation-timing, ease-in-out); }
|
||||
|
||||
.fa-bounce {
|
||||
-webkit-animation-name: fa-bounce;
|
||||
animation-name: fa-bounce;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }
|
||||
|
||||
.fa-fade {
|
||||
-webkit-animation-name: fa-fade;
|
||||
animation-name: fa-fade;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
|
||||
|
||||
.fa-beat-fade {
|
||||
-webkit-animation-name: fa-beat-fade;
|
||||
animation-name: fa-beat-fade;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
|
||||
|
||||
.fa-flip {
|
||||
-webkit-animation-name: fa-flip;
|
||||
animation-name: fa-flip;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
|
||||
animation-timing-function: var(--fa-animation-timing, ease-in-out); }
|
||||
|
||||
.fa-shake {
|
||||
-webkit-animation-name: fa-shake;
|
||||
animation-name: fa-shake;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, linear);
|
||||
animation-timing-function: var(--fa-animation-timing, linear); }
|
||||
|
||||
.fa-spin {
|
||||
-webkit-animation-name: fa-spin;
|
||||
animation-name: fa-spin;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 2s);
|
||||
animation-duration: var(--fa-animation-duration, 2s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, linear);
|
||||
animation-timing-function: var(--fa-animation-timing, linear); }
|
||||
|
||||
.fa-spin-reverse {
|
||||
--fa-animation-direction: reverse; }
|
||||
|
||||
.fa-pulse,
|
||||
.fa-spin-pulse {
|
||||
-webkit-animation-name: fa-spin;
|
||||
animation-name: fa-spin;
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
|
||||
animation-timing-function: var(--fa-animation-timing, steps(8)); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fa-beat,
|
||||
.fa-bounce,
|
||||
.fa-fade,
|
||||
.fa-beat-fade,
|
||||
.fa-flip,
|
||||
.fa-pulse,
|
||||
.fa-shake,
|
||||
.fa-spin,
|
||||
.fa-spin-pulse {
|
||||
-webkit-animation-delay: -1ms;
|
||||
animation-delay: -1ms;
|
||||
-webkit-animation-duration: 1ms;
|
||||
animation-duration: 1ms;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
-webkit-transition-delay: 0s;
|
||||
transition-delay: 0s;
|
||||
-webkit-transition-duration: 0s;
|
||||
transition-duration: 0s; } }
|
||||
|
||||
@-webkit-keyframes fa-beat {
|
||||
0%, 90% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
45% {
|
||||
-webkit-transform: scale(var(--fa-beat-scale, 1.25));
|
||||
transform: scale(var(--fa-beat-scale, 1.25)); } }
|
||||
|
||||
@keyframes fa-beat {
|
||||
0%, 90% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
45% {
|
||||
-webkit-transform: scale(var(--fa-beat-scale, 1.25));
|
||||
transform: scale(var(--fa-beat-scale, 1.25)); } }
|
||||
|
||||
@-webkit-keyframes fa-bounce {
|
||||
0% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); }
|
||||
10% {
|
||||
-webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
|
||||
transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
|
||||
30% {
|
||||
-webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
|
||||
transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
|
||||
50% {
|
||||
-webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
|
||||
transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
|
||||
57% {
|
||||
-webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
|
||||
transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
|
||||
64% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); }
|
||||
100% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); } }
|
||||
|
||||
@keyframes fa-bounce {
|
||||
0% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); }
|
||||
10% {
|
||||
-webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
|
||||
transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
|
||||
30% {
|
||||
-webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
|
||||
transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
|
||||
50% {
|
||||
-webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
|
||||
transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
|
||||
57% {
|
||||
-webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
|
||||
transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
|
||||
64% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); }
|
||||
100% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); } }
|
||||
|
||||
@-webkit-keyframes fa-fade {
|
||||
50% {
|
||||
opacity: var(--fa-fade-opacity, 0.4); } }
|
||||
|
||||
@keyframes fa-fade {
|
||||
50% {
|
||||
opacity: var(--fa-fade-opacity, 0.4); } }
|
||||
|
||||
@-webkit-keyframes fa-beat-fade {
|
||||
0%, 100% {
|
||||
opacity: var(--fa-beat-fade-opacity, 0.4);
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
50% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
|
||||
transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
|
||||
|
||||
@keyframes fa-beat-fade {
|
||||
0%, 100% {
|
||||
opacity: var(--fa-beat-fade-opacity, 0.4);
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
50% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
|
||||
transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
|
||||
|
||||
@-webkit-keyframes fa-flip {
|
||||
50% {
|
||||
-webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
|
||||
transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
|
||||
|
||||
@keyframes fa-flip {
|
||||
50% {
|
||||
-webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
|
||||
transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
|
||||
|
||||
@-webkit-keyframes fa-shake {
|
||||
0% {
|
||||
-webkit-transform: rotate(-15deg);
|
||||
transform: rotate(-15deg); }
|
||||
4% {
|
||||
-webkit-transform: rotate(15deg);
|
||||
transform: rotate(15deg); }
|
||||
8%, 24% {
|
||||
-webkit-transform: rotate(-18deg);
|
||||
transform: rotate(-18deg); }
|
||||
12%, 28% {
|
||||
-webkit-transform: rotate(18deg);
|
||||
transform: rotate(18deg); }
|
||||
16% {
|
||||
-webkit-transform: rotate(-22deg);
|
||||
transform: rotate(-22deg); }
|
||||
20% {
|
||||
-webkit-transform: rotate(22deg);
|
||||
transform: rotate(22deg); }
|
||||
32% {
|
||||
-webkit-transform: rotate(-12deg);
|
||||
transform: rotate(-12deg); }
|
||||
36% {
|
||||
-webkit-transform: rotate(12deg);
|
||||
transform: rotate(12deg); }
|
||||
40%, 100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); } }
|
||||
|
||||
@keyframes fa-shake {
|
||||
0% {
|
||||
-webkit-transform: rotate(-15deg);
|
||||
transform: rotate(-15deg); }
|
||||
4% {
|
||||
-webkit-transform: rotate(15deg);
|
||||
transform: rotate(15deg); }
|
||||
8%, 24% {
|
||||
-webkit-transform: rotate(-18deg);
|
||||
transform: rotate(-18deg); }
|
||||
12%, 28% {
|
||||
-webkit-transform: rotate(18deg);
|
||||
transform: rotate(18deg); }
|
||||
16% {
|
||||
-webkit-transform: rotate(-22deg);
|
||||
transform: rotate(-22deg); }
|
||||
20% {
|
||||
-webkit-transform: rotate(22deg);
|
||||
transform: rotate(22deg); }
|
||||
32% {
|
||||
-webkit-transform: rotate(-12deg);
|
||||
transform: rotate(-12deg); }
|
||||
36% {
|
||||
-webkit-transform: rotate(12deg);
|
||||
transform: rotate(12deg); }
|
||||
40%, 100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); } }
|
||||
|
||||
@-webkit-keyframes fa-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@keyframes fa-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
.fa-rotate-90 {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg); }
|
||||
|
||||
.fa-rotate-180 {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg); }
|
||||
|
||||
.fa-rotate-270 {
|
||||
-webkit-transform: rotate(270deg);
|
||||
transform: rotate(270deg); }
|
||||
|
||||
.fa-flip-horizontal {
|
||||
-webkit-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1); }
|
||||
|
||||
.fa-flip-vertical {
|
||||
-webkit-transform: scale(1, -1);
|
||||
transform: scale(1, -1); }
|
||||
|
||||
.fa-flip-both,
|
||||
.fa-flip-horizontal.fa-flip-vertical {
|
||||
-webkit-transform: scale(-1, -1);
|
||||
transform: scale(-1, -1); }
|
||||
|
||||
.fa-rotate-by {
|
||||
-webkit-transform: rotate(var(--fa-rotate-angle, 0));
|
||||
transform: rotate(var(--fa-rotate-angle, 0)); }
|
||||
|
||||
.fa-stack {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 2em;
|
||||
position: relative;
|
||||
width: 2.5em; }
|
||||
|
||||
.fa-stack-1x,
|
||||
.fa-stack-2x {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: var(--fa-stack-z-index, auto); }
|
||||
|
||||
.svg-inline--fa.fa-stack-1x {
|
||||
height: 1em;
|
||||
width: 1.25em; }
|
||||
|
||||
.svg-inline--fa.fa-stack-2x {
|
||||
height: 2em;
|
||||
width: 2.5em; }
|
||||
|
||||
.fa-inverse {
|
||||
color: var(--fa-inverse, #fff); }
|
||||
|
||||
.sr-only,
|
||||
.fa-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0; }
|
||||
|
||||
.sr-only-focusable:not(:focus),
|
||||
.fa-sr-only-focusable:not(:focus) {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0; }
|
||||
|
||||
.svg-inline--fa .fa-primary {
|
||||
fill: var(--fa-primary-color, currentColor);
|
||||
opacity: var(--fa-primary-opacity, 1); }
|
||||
|
||||
.svg-inline--fa .fa-secondary {
|
||||
fill: var(--fa-secondary-color, currentColor);
|
||||
opacity: var(--fa-secondary-opacity, 0.4); }
|
||||
|
||||
.svg-inline--fa.fa-swap-opacity .fa-primary {
|
||||
opacity: var(--fa-secondary-opacity, 0.4); }
|
||||
|
||||
.svg-inline--fa.fa-swap-opacity .fa-secondary {
|
||||
opacity: var(--fa-primary-opacity, 1); }
|
||||
|
||||
.svg-inline--fa mask .fa-primary,
|
||||
.svg-inline--fa mask .fa-secondary {
|
||||
fill: black; }
|
||||
|
||||
.fad.fa-inverse,
|
||||
.fa-duotone.fa-inverse {
|
||||
color: var(--fa-inverse, #fff); }
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,26 +0,0 @@
|
|||
/*!
|
||||
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype");
|
||||
unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype");
|
||||
unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F27A; }
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/*!
|
||||
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,22 +0,0 @@
|
|||
/*!
|
||||
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Brands';
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-display: block;
|
||||
font-weight: 900;
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/*!
|
||||
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,80 +0,0 @@
|
|||
/* lexend-100 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Lexend';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
src: url('/assets/fonts/lexend/lexend-v19-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* lexend-200 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Lexend';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: url('/assets/fonts/lexend/lexend-v19-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* lexend-300 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Lexend';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('/assets/fonts/lexend/lexend-v19-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* lexend-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Lexend';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('/assets/fonts/lexend/lexend-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* lexend-500 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Lexend';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url('/assets/fonts/lexend/lexend-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* lexend-600 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Lexend';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url('/assets/fonts/lexend/lexend-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* lexend-700 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Lexend';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('/assets/fonts/lexend/lexend-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* lexend-800 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Lexend';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url('/assets/fonts/lexend/lexend-v19-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* lexend-900 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Lexend';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url('/assets/fonts/lexend/lexend-v19-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
|
|
@ -1,125 +0,0 @@
|
|||
// Import Firebase
|
||||
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js'
|
||||
import { getDatabase, ref, push, onValue, update } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-database.js'
|
||||
|
||||
// Set up Firebase database
|
||||
const appSettings = {
|
||||
databaseURL: 'https://leilukin-s-hub-guestbook-default-rtdb.asia-southeast1.firebasedatabase.app/'
|
||||
};
|
||||
const app = initializeApp(appSettings);
|
||||
const database = getDatabase(app);
|
||||
const guestbookInDB = ref(database, "guestbook");
|
||||
|
||||
// Get DOM elements
|
||||
const formEl = document.querySelector('.gb__form');
|
||||
const nameInputEl = document.querySelector('#name-input');
|
||||
const emailInputEl = document.querySelector('#email-input');
|
||||
const websiteInputEl = document.querySelector('#website-input');
|
||||
const msgInputEl = document.querySelector('#message-input');
|
||||
const messageListEl = document.querySelector('.gb__message--list');
|
||||
|
||||
// Initiate guestbook message object
|
||||
let messageObj = {
|
||||
name: '',
|
||||
email: '',
|
||||
website: '',
|
||||
message: '',
|
||||
timestamp: '',
|
||||
};
|
||||
|
||||
// Form submission event
|
||||
formEl.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
addMessage();
|
||||
clearInputEl();
|
||||
});
|
||||
|
||||
const formatDate = () => {
|
||||
const formatter = new Intl.DateTimeFormat("en-GB", {
|
||||
dateStyle: "full",
|
||||
timeStyle: "full",
|
||||
});
|
||||
const now = new Date();
|
||||
const formattedDate = formatter.format(now);
|
||||
return formattedDate;
|
||||
};
|
||||
|
||||
const addMessage = () => {
|
||||
messageObj = {
|
||||
...messageObj,
|
||||
name: nameInputEl.value,
|
||||
email: emailInputEl.value,
|
||||
website: websiteInputEl.value,
|
||||
timestamp: formatDate(),
|
||||
message: msgInputEl.value
|
||||
}
|
||||
push(guestbookInDB, messageObj);
|
||||
};
|
||||
|
||||
// Clear input fields
|
||||
const clearInputEl = () => {
|
||||
nameInputEl.value = '';
|
||||
emailInputEl.value = '';
|
||||
websiteInputEl.value = '';
|
||||
msgInputEl.value = '';
|
||||
};
|
||||
|
||||
// Load data from the Firebase database
|
||||
onValue(guestbookInDB, (snapshot) => {
|
||||
if (snapshot.exists()) {
|
||||
let messagesArr = Object.entries(snapshot.val()).reverse();
|
||||
|
||||
clearMessageListEl();
|
||||
|
||||
messagesArr.forEach((item) => {
|
||||
renderMessage(item);
|
||||
});
|
||||
} else {
|
||||
messageListEl.textContent = 'No messages here... yet. Be the first!';
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent rendering any message more than once
|
||||
const clearMessageListEl = () => {
|
||||
messageListEl.innerHTML = '';
|
||||
};
|
||||
|
||||
// Render each message
|
||||
const renderMessage = (item) => {
|
||||
const itemID = item[0];
|
||||
const itemValue = item[1];
|
||||
|
||||
const newThreadDiv = document.createElement('div');
|
||||
newThreadDiv.classList.add('gb__thread');
|
||||
newThreadDiv.id = `thread-${itemID}`;
|
||||
|
||||
const newMessageDiv = document.createElement('div');
|
||||
newMessageDiv.classList.add('gb__message');
|
||||
newMessageDiv.id = `msg-${itemID}`;
|
||||
|
||||
const newMessageName = document.createElement('p');
|
||||
newMessageName.classList.add('gb__message--name');
|
||||
newMessageName.textContent = `${itemValue.name} said:`;
|
||||
|
||||
if (itemValue.website !== null && itemValue.website !== '') {
|
||||
newMessageName.innerHTML = `
|
||||
<a href="${itemValue.website}">${itemValue.name}</a> said:
|
||||
`;
|
||||
}
|
||||
|
||||
const newMessageMsg = document.createElement('p');
|
||||
newMessageMsg.classList.add('gb__message--msg');
|
||||
newMessageMsg.textContent = itemValue.message;
|
||||
|
||||
const newMessageTime = document.createElement('time');
|
||||
newMessageTime.classList.add('gb__message--time');
|
||||
newMessageTime.textContent = itemValue.timestamp;
|
||||
|
||||
const messageReplyBtn = document.createElement('button');
|
||||
messageReplyBtn.classList.add('gb__message--reply-btn');
|
||||
messageReplyBtn.textContent = 'Reply';
|
||||
|
||||
messageListEl.append(newThreadDiv);
|
||||
newThreadDiv.append(newMessageDiv);
|
||||
newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime, messageReplyBtn);
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 339 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 341 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 303 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 369 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 209 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 273 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue