Build: (33f509f) Correct build folder name
This commit is contained in:
helenclx
commit
335473cdba
|
|
@ -0,0 +1,79 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:title" content="404: Page Not Found">
|
||||||
|
<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="author" content="Leilukin">
|
||||||
|
<meta name="generator" content="Eleventy v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/404.html">
|
||||||
|
<meta property="og:site_name" content="Leilukin's Hub">
|
||||||
|
<meta property="og:locale" content="en_MY">
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:url" content="https://leilukin.com/404.html">
|
||||||
|
<link rel="canonical" href="https://leilukin.com/404.html">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/css/misc.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
<title> 404: Page Not Found | Leilukin's Hub</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<img src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Leilukin's Hub website banner">
|
||||||
|
<h1>404: Page Not Found</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Oops! Either the page you are looking for does not exist, or it has been moved to a diffrent part of this site.</p>
|
||||||
|
|
||||||
|
<section class="index__btn-wrapper">
|
||||||
|
<a href="/" class="index__link">🏠 Back to Home</a>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,493 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<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="author" content="Leilukin">
|
||||||
|
<meta name="description" content="About this website and its webmaster.">
|
||||||
|
<meta name="generator" content="Eleventy v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/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 webmaster.">
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:url" content="https://leilukin.com/about/">
|
||||||
|
<meta name="twitter:description" content="About this website and its webmaster.">
|
||||||
|
<link rel="canonical" href="https://leilukin.com/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">
|
||||||
|
|
||||||
|
<style>.support-me {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1em;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.7em;
|
||||||
|
}
|
||||||
|
.breadcrumbs {
|
||||||
|
list-style-type: "";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--pagination {
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--nextprev {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7em;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: 'prev next';
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--prev { grid-area: prev; }
|
||||||
|
.blog__post--next { grid-area: next; }
|
||||||
|
.hero img { filter:
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
; }
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background: var(--clr-navbar-bg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 998;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a {
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
|
.navbar__links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle {
|
||||||
|
background-color: inherit;
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle svg { fill: currentColor; }
|
||||||
|
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.navbar__popover {
|
||||||
|
background-color: var(--clr-navbar-bg);
|
||||||
|
border: 0.15em solid var(--clr-navbar-link);
|
||||||
|
padding: 1.5em;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__popover::backdrop {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet screen size */
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.navbar { padding: 1em 0.6em; }
|
||||||
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
|
.navbar__links { display: flex; }
|
||||||
|
}
|
||||||
|
.top-btn,
|
||||||
|
.top-btn:hover {
|
||||||
|
color: var(--clr-top-btn-txt);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background-color: var(--clr-top-btn-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50em;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn:focus {
|
||||||
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
:root { --footer-gap: 0.5em; }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--clr-main-footer-bg);
|
||||||
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
||||||
|
text-align: center;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links,
|
||||||
|
.footer__shrines {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links { justify-self: center; }
|
||||||
|
.footer__shrines { align-self: center; }</style>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="me" href="mailto:contact@leilukin.com">
|
||||||
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
||||||
|
<link rel="me" href="https://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
About | Leilukin's Hub
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero__top-bar hidden"></div>
|
||||||
|
<div class="hero__img">
|
||||||
|
|
||||||
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
||||||
|
<ul class="navbar__menu 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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||||
|
Navigation
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div popover id="nav-menu" class="navbar__popover">
|
||||||
|
<ul class="navbar__menu">
|
||||||
|
|
||||||
|
|
||||||
|
<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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<main id="content">
|
||||||
|
<header class="main__header">
|
||||||
|
|
||||||
|
|
||||||
|
<h1>About</h1>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<p>About this website and its webmaster.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="content content--divided">
|
||||||
|
<article class="content__section"><div class="heading-wrapper h2">
|
||||||
|
<h2 id="the-website">The Website</h2>
|
||||||
|
<a class="heading-anchor" href="#the-website" aria-labelledby="the-website"><span hidden>#</span></a></div>
|
||||||
|
<p>Leilukin's Hub is a literal queer-coded website (as in, this website is coded by a queer person) that 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 I have created or curated.</p>
|
||||||
|
<p>This website is mostly safe for work, but since I am an adult, I made my website with an adult audience in mind. I add content warnings for not safe for work and adult content.</p>
|
||||||
|
<p>Feel free to drop a message and say hi on <a href="/guestbook">my guestbook</a>!</p>
|
||||||
|
<p><code>leilukin.com</code> is hosted on <a href="https://www.netlify.com/">Netlify</a>.</p>
|
||||||
|
<p>Originally, Leilukin's Hub was hosted on <a href="https://neocities.org/">Neocities</a>. Now visiting <code>leilukin.neocities.org</code> will redirect you to <code>leilukin.com</code>. That said, I still post about updates to Leilukin's Hub on my Neocities profile, so if you also have a Neocities account, you can still follow me through <a href="https://neocities.org/site/leilukin">my Neocities profile</a>.</p>
|
||||||
|
<p>More information about this site can be found on the following pages:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/accessibility">Accessibility statement</a> for accessibility information</li>
|
||||||
|
<li><a href="/colophon">Colophon page</a> for technical information</li>
|
||||||
|
</ul>
|
||||||
|
<div class="heading-wrapper h3">
|
||||||
|
<h3 id="link-to-this-site">Link to This Site</h3>
|
||||||
|
<a class="heading-anchor" href="#link-to-this-site" aria-labelledby="link-to-this-site"><span hidden>#</span></a></div>
|
||||||
|
<p>You can link to my website with the following button. I strongly recommend you to upload my site button to your own website instead of hotlinking the button.</p>
|
||||||
|
<img src="/assets/leilukin/Leilukins-Hub-button.png" alt="Leilukin's Hub website button" width="88" height="31" loading="lazy">
|
||||||
|
<p>(I created this site button myself with Adobe Photoshop CS5)</p>
|
||||||
|
</article>
|
||||||
|
<article class="content__section"><div class="heading-wrapper h2">
|
||||||
|
<h2 id="the-webmaster">The Webmaster</h2>
|
||||||
|
<a class="heading-anchor" href="#the-webmaster" aria-labelledby="the-webmaster"><span hidden>#</span></a></div>
|
||||||
|
<p><img src="/assets/leilukin/leilukin-bee.avif" alt="Avatar of a drawing of Leilukin bee" loading="lazy" style="border-radius: 50%; width: 15rem; margin: 0.5em auto;"></p>
|
||||||
|
<p>You can call me Leilukin. I am a Malaysian Chinese, queer, non-binary lesbian born in the early 90s. My pronouns are they/them and she/her in English, <span lang="zh">他</span> and <span lang="zh">她</span> in Chinese.</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>Leilukin is not my real name, but it is an internet pseudonym that I have used since I was a teenager, so the name has become my online identity, and I prefer to go by Leilukin in informal online spaces.</p>
|
||||||
|
<p>You can contact me via email: <a href="mailto:contact@leilukin.com">contact@leilukin.com</a>. Using <a href="https://useplaintext.email/">plain text email</a> is encouraged.</p>
|
||||||
|
<p><a href="/now">Check out my Now page</a> to learn what I am doing right now.</p>
|
||||||
|
<p>Social media platforms you can find me on:</p>
|
||||||
|
<ul>
|
||||||
|
<li><svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1 .8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5 .9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"/></svg> <a href="https://lesbiannova.tumblr.com/">Tumblr</a></li>
|
||||||
|
<li><svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg> <a href="https://www.youtube.com/Leilukin">YouTube</a></li>
|
||||||
|
<li><svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg> <a href="https://twitter.com/Leilukin">Twitter</a></li>
|
||||||
|
<li><svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/></svg> <a href="https://mstdn.social/@leilukin">Mastodon</a></li>
|
||||||
|
<li><svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"/></svg> <a href="https://bsky.app/profile/leilukin.com" class="external-link">Bluesky</a></li>
|
||||||
|
</ul>
|
||||||
|
<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:</p>
|
||||||
|
<ul>
|
||||||
|
<li><svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M395.5 177.5c0 33.8-27.5 61-61 61-33.8 0-61-27.3-61-61s27.3-61 61-61c33.5 0 61 27.2 61 61zm52.5 .2c0 63-51 113.8-113.7 113.8L225 371.3c-4 43-40.5 76.8-84.5 76.8-40.5 0-74.7-28.8-83-67L0 358V250.7L97.2 290c15.1-9.2 32.2-13.3 52-11.5l71-101.7c.5-62.3 51.5-112.8 114-112.8C397 64 448 115 448 177.7zM203 363c0-34.7-27.8-62.5-62.5-62.5-4.5 0-9 .5-13.5 1.5l26 10.5c25.5 10.2 38 39 27.7 64.5-10.2 25.5-39.2 38-64.7 27.5-10.2-4-20.5-8.3-30.7-12.2 10.5 19.7 31.2 33.2 55.2 33.2 34.7 0 62.5-27.8 62.5-62.5zm207.5-185.3c0-42-34.3-76.2-76.2-76.2-42.3 0-76.5 34.2-76.5 76.2 0 42.2 34.3 76.2 76.5 76.2 41.9 .1 76.2-33.9 76.2-76.2z"/></svg> <a href="https://steamcommunity.com/id/leilukin/">Steam</a></li>
|
||||||
|
<li><a href="https://app.thestorygraph.com/profile/leilukin">The StoryGraph</a></li>
|
||||||
|
</ul>
|
||||||
|
<p>If you enjoy my work, you can support me on <a href="https://ko-fi.com/leilukin">Ko-Fi</a>.</p>
|
||||||
|
<div class="support-me">
|
||||||
|
<!-- Ko-Fi button -->
|
||||||
|
<a href="https://ko-fi.com/A1042UH4"><img height="36" src="/assets/buttons/misc/ko-fi.webp" border="0" alt="Buy Me a Coffee at ko-fi.com" loading="lazy"></a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</content-wrapper>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="inline-nav footer__links">
|
||||||
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/sitemap/
|
||||||
|
">Site Map</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/changelogs/"
|
||||||
|
>Changelogs</a></li><li><a
|
||||||
|
|
||||||
|
href="/accessibility/"
|
||||||
|
>Accessibility</a></li><li><a
|
||||||
|
|
||||||
|
href="/colophon/"
|
||||||
|
>Colophon</a></li></ul>
|
||||||
|
<div class="h-card hidden">
|
||||||
|
<span class="p-name p-nickname">Leilukin</span>
|
||||||
|
<a href="/" class="u-url">Home page</a>
|
||||||
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
||||||
|
<span class="p-country-name">Malaysia</span>
|
||||||
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
||||||
|
</div><a href="#top" class="top-btn">
|
||||||
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
||||||
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
||||||
|
</svg>
|
||||||
|
Back to Top
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,474 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:title" content="Accessibility">
|
||||||
|
|
||||||
|
<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="author" content="Leilukin">
|
||||||
|
<meta name="description" content="Leilukin's Hub's accessibility statement.">
|
||||||
|
<meta name="generator" content="Eleventy v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/accessibility/">
|
||||||
|
<meta property="og:site_name" content="Leilukin's Hub">
|
||||||
|
<meta property="og:locale" content="en_MY">
|
||||||
|
<meta property="og:description" content="Leilukin's Hub's accessibility statement.">
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:url" content="https://leilukin.com/accessibility/">
|
||||||
|
<meta name="twitter:description" content="Leilukin's Hub's accessibility statement.">
|
||||||
|
<link rel="canonical" href="https://leilukin.com/accessibility/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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">
|
||||||
|
|
||||||
|
<style>.breadcrumbs {
|
||||||
|
list-style-type: "";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--pagination {
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--nextprev {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7em;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: 'prev next';
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--prev { grid-area: prev; }
|
||||||
|
.blog__post--next { grid-area: next; }
|
||||||
|
.hero img { filter:
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
; }
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background: var(--clr-navbar-bg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 998;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a {
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
|
.navbar__links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle {
|
||||||
|
background-color: inherit;
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle svg { fill: currentColor; }
|
||||||
|
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.navbar__popover {
|
||||||
|
background-color: var(--clr-navbar-bg);
|
||||||
|
border: 0.15em solid var(--clr-navbar-link);
|
||||||
|
padding: 1.5em;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__popover::backdrop {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet screen size */
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.navbar { padding: 1em 0.6em; }
|
||||||
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
|
.navbar__links { display: flex; }
|
||||||
|
}
|
||||||
|
.top-btn,
|
||||||
|
.top-btn:hover {
|
||||||
|
color: var(--clr-top-btn-txt);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background-color: var(--clr-top-btn-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50em;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn:focus {
|
||||||
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
:root { --footer-gap: 0.5em; }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--clr-main-footer-bg);
|
||||||
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
||||||
|
text-align: center;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links,
|
||||||
|
.footer__shrines {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links { justify-self: center; }
|
||||||
|
.footer__shrines { align-self: center; }</style>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="me" href="mailto:contact@leilukin.com">
|
||||||
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
||||||
|
<link rel="me" href="https://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
Accessibility | Leilukin's Hub
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero__top-bar hidden"></div>
|
||||||
|
<div class="hero__img">
|
||||||
|
|
||||||
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
||||||
|
<ul class="navbar__menu 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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||||
|
Navigation
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div popover id="nav-menu" class="navbar__popover">
|
||||||
|
<ul class="navbar__menu">
|
||||||
|
|
||||||
|
|
||||||
|
<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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<main id="content">
|
||||||
|
<header class="main__header">
|
||||||
|
|
||||||
|
|
||||||
|
<h1>Accessibility</h1>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<p>Leilukin's Hub's accessibility statement.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="content">
|
||||||
|
|
||||||
|
<p>Even though this website is primarily meant to be my own space of self-expression, I also want every visitor to my website to have the best possible experience of browsing my website. Accessibility is also relevant to me as a disabled and neurodivergent person.</p>
|
||||||
|
<p>Therefore, I strive to design my website to be accessible, including to fellow disabled and neurodivergent people, by aiming to meet <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) 2.2</a> Level AA standards.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="accessibility-features">Accessibility Features</h2>
|
||||||
|
<a class="heading-anchor" href="#accessibility-features" aria-labelledby="accessibility-features"><span hidden>#</span></a></div>
|
||||||
|
<p>High-level overview of the accessibility features of this site:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Responsive design and mobile-friendly layout</li>
|
||||||
|
<li>Semantic HTML, enhanced by Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA)</li>
|
||||||
|
<li>Sufficient colour contrast between text and background colours</li>
|
||||||
|
<li>Alt text for all non-decorative images, occasionally accompanied with longer image descriptions</li>
|
||||||
|
<li>Keyboard navigation-friendly: Every interactive element can be focused and interacted with keyboard buttons, with visible outline when focused</li>
|
||||||
|
<li>Logical content and heading flow</li>
|
||||||
|
<li>Links to skip to the main content or the top of the page</li>
|
||||||
|
<li>Sufficient font size that can be enlarged without breaking the site layout</li>
|
||||||
|
<li>No autoplaying audio or video</li>
|
||||||
|
</ul>
|
||||||
|
<p>This site uses the <a href="https://www.lexend.com/">Lexend</a> font family as the default font and <a href="https://www.intel.com/content/www/us/en/company-overview/one-monospace-font.html">Intel One Mono</a> as the monospaced font to improve text readability.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="testing">Testing</h2>
|
||||||
|
<a class="heading-anchor" href="#testing" aria-labelledby="testing"><span hidden>#</span></a></div>
|
||||||
|
<p>I use the following tools to test my site for accessibility:</p>
|
||||||
|
<ul>
|
||||||
|
<li>WebAIM's <a href="https://wave.webaim.org/extension/">WAVE Browser Extension</a></li>
|
||||||
|
<li><a href="https://www.deque.com/axe/browser-extensions/">axe DevTools - Web Accessibility Testing</a> browser extension</li>
|
||||||
|
<li><a href="https://www.ssa.gov/accessibility/andi/help/install.html">ANDI Accessibility Testing Tool</a></li>
|
||||||
|
<li><a href="https://colourcontrast.cc/">Alex Clapperton's Colour Contrast Checker</a></li>
|
||||||
|
<li><a href="https://www.nvaccess.org/about-nvda/">NVDA</a> screen reader for Windows</li>
|
||||||
|
<li>TalkBack screen reader for Android</li>
|
||||||
|
<li>VoiceOver screen reader for iOS</li>
|
||||||
|
</ul>
|
||||||
|
<p>In addition, I test the accessibility of my website manually by navigating with keyboard alone.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="feedback">Feedback</h2>
|
||||||
|
<a class="heading-anchor" href="#feedback" aria-labelledby="feedback"><span hidden>#</span></a></div>
|
||||||
|
<p>Feedback from disabled and neurodivergent people are welcome. You can <a href="mailto:contact@leilukin.com">contact me via email</a> for feedbacks and suggestions for improving the accessibility of this site.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<p>(This accessibility statement was last updated on 14 July 2024)</p>
|
||||||
|
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</content-wrapper>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="inline-nav footer__links">
|
||||||
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/sitemap/
|
||||||
|
">Site Map</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/changelogs/"
|
||||||
|
>Changelogs</a></li><li><a
|
||||||
|
|
||||||
|
href="/accessibility/"
|
||||||
|
>Accessibility</a></li><li><a
|
||||||
|
|
||||||
|
href="/colophon/"
|
||||||
|
>Colophon</a></li></ul>
|
||||||
|
<div class="h-card hidden">
|
||||||
|
<span class="p-name p-nickname">Leilukin</span>
|
||||||
|
<a href="/" class="u-url">Home page</a>
|
||||||
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
||||||
|
<span class="p-country-name">Malaysia</span>
|
||||||
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
||||||
|
</div><a href="#top" class="top-btn">
|
||||||
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
||||||
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
||||||
|
</svg>
|
||||||
|
Back to Top
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,617 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:title" content="Adoptables">
|
||||||
|
|
||||||
|
<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="author" content="Leilukin">
|
||||||
|
<meta name="description" content="A collection of stuff I have adopted from other websites.">
|
||||||
|
<meta name="generator" content="Eleventy v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/adoptables/">
|
||||||
|
<meta property="og:site_name" content="Leilukin's Hub">
|
||||||
|
<meta property="og:locale" content="en_MY">
|
||||||
|
<meta property="og:description" content="A collection of stuff I have adopted from other websites.">
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:url" content="https://leilukin.com/adoptables/">
|
||||||
|
<meta name="twitter:description" content="A collection of stuff I have adopted from other websites.">
|
||||||
|
<link rel="canonical" href="https://leilukin.com/adoptables/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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/css/tooltips.css">
|
||||||
|
|
||||||
|
<style>.breadcrumbs {
|
||||||
|
list-style-type: "";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--pagination {
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--nextprev {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7em;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: 'prev next';
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--prev { grid-area: prev; }
|
||||||
|
.blog__post--next { grid-area: next; }
|
||||||
|
.hero img { filter:
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
; }
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background: var(--clr-navbar-bg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 998;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a {
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
|
.navbar__links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle {
|
||||||
|
background-color: inherit;
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle svg { fill: currentColor; }
|
||||||
|
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.navbar__popover {
|
||||||
|
background-color: var(--clr-navbar-bg);
|
||||||
|
border: 0.15em solid var(--clr-navbar-link);
|
||||||
|
padding: 1.5em;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__popover::backdrop {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet screen size */
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.navbar { padding: 1em 0.6em; }
|
||||||
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
|
.navbar__links { display: flex; }
|
||||||
|
}
|
||||||
|
.top-btn,
|
||||||
|
.top-btn:hover {
|
||||||
|
color: var(--clr-top-btn-txt);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background-color: var(--clr-top-btn-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50em;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn:focus {
|
||||||
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
:root { --footer-gap: 0.5em; }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--clr-main-footer-bg);
|
||||||
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
||||||
|
text-align: center;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links,
|
||||||
|
.footer__shrines {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links { justify-self: center; }
|
||||||
|
.footer__shrines { align-self: center; }</style>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="me" href="mailto:contact@leilukin.com">
|
||||||
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
||||||
|
<link rel="me" href="https://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
Adoptables | Leilukin's Hub
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero__top-bar hidden"></div>
|
||||||
|
<div class="hero__img">
|
||||||
|
|
||||||
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
||||||
|
<ul class="navbar__menu 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 aria-current="page" href="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||||
|
Navigation
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div popover id="nav-menu" class="navbar__popover">
|
||||||
|
<ul class="navbar__menu">
|
||||||
|
|
||||||
|
|
||||||
|
<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 aria-current="page" href="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<main id="content">
|
||||||
|
<header class="main__header">
|
||||||
|
|
||||||
|
|
||||||
|
<h1>Adoptables</h1>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<p>A collection of stuff I have adopted from other websites.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="content content--divided">
|
||||||
|
<section class="content__section">
|
||||||
|
<p>(This page was last updated on 22 July 2024)</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content__section">
|
||||||
|
<h2>Virtual Pets</h2>
|
||||||
|
<p>Feel free to check out my virtual pets and feed them!</p>
|
||||||
|
<ul class="adoptables">
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://tamanotchi.world/13150c" data-tooltip-trigger title="Tam, my tamaNOTchi"><img src="https://tamanotchi.world/i2/13150" alt="Tam, my tamaNOTchi" loading="lazy"></a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://wobble.town/visit/2042" data-tooltip-trigger title="Shelly, my Wobble"><img src="https://wobble.town/visit/2042/wobble.gif" alt="Shelly, my Wobble" loading="lazy"></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content__section">
|
||||||
|
<h2>Personal Website Adoptables</h2>
|
||||||
|
<p>These are adopted from other personal websites.</p>
|
||||||
|
|
||||||
|
<ul class="adoptables">
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://xandra.cc/" data-tooltip-trigger title="Diddles the raccoon by Alexandra">
|
||||||
|
<img src="/assets/adoptables/alexandra-diddles.png" alt="Diddles the raccoon by Alexandra" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://lostletters.neocities.org/" data-tooltip-trigger title="Moomin pixel art by Lost Letters">
|
||||||
|
<img src="/assets/adoptables/lostletters-moomin.png" alt="Moomin pixel art by Lost Letters" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://pixels.elfwink.net/" data-tooltip-trigger title="Green frog by Lou">
|
||||||
|
<img src="/assets/adoptables/lou-frog.gif" alt="Green frog by Lou" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://pixels.elfwink.net/" data-tooltip-trigger title="Green kao-ani by Lou">
|
||||||
|
<img src="/assets/adoptables/lou-greenkaoani.gif" alt="Green kao-ani by Lou" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://pixels.elfwink.net/" data-tooltip-trigger title="Maneki neko (beckoning cat) by Lou">
|
||||||
|
<img src="/assets/adoptables/lou-maneki-neko.png" alt="Maneki neko (beckoning cat) by Lou" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://pixels.elfwink.net/" data-tooltip-trigger title="Tamagotchi pixel art by Lou">
|
||||||
|
<img src="/assets/adoptables/lou-tamagotchi.gif" alt="Tamagotchi pixel art by Lou" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://pixel.wings.nu/" data-tooltip-trigger title="Dolphin classic by Rin">
|
||||||
|
<img src="/assets/adoptables/wings-dolphinclassic.gif" alt="Dolphin classic by Rin" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://pixel.wings.nu/" data-tooltip-trigger title="Rainbow moon by Rin">
|
||||||
|
<img src="/assets/adoptables/wings-rainbowmoon.png" alt="Rainbow moon by Rin" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content__section">
|
||||||
|
<h2>Pixel Cliques</h2>
|
||||||
|
|
||||||
|
<h3>The Apple</h3>
|
||||||
|
<a href="https://pixelrevival.xyz/apple/"><img src="/assets/adoptables/pixelcliques/theapple.gif" alt="The Apple pixel clique" loading="lazy"></a>
|
||||||
|
|
||||||
|
<h3>Made by a Girl</h3>
|
||||||
|
<a href="https://lovesick.cafe/grrrl"><img src="/assets/adoptables/pixelcliques/madebyagirl.png" alt="Made by a Girl pixel clique" loading="lazy"></a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content__section">
|
||||||
|
<h2>Kitty Friends Pixel Club</h2>
|
||||||
|
<p>An old pixel club about cats, revived by <a href="https://divergentrays.com/kitty">Divergent Rays</a>.</p>
|
||||||
|
|
||||||
|
<h3>My Kitty Friends</h3>
|
||||||
|
<ul class="adoptables">
|
||||||
|
<li data-tooltip>
|
||||||
|
<img src="/assets/adoptables/kittyfriends/leilukin-blackkitty.png" alt="Leilukin's black kitty friend" data-tooltip-trigger title="Leilukin's black kitty friend" loading="lazy" tabindex="0">
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<img src="/assets/adoptables/kittyfriends/leilukin-purplekitty.png" alt="Leilukin's purple kitty friend" data-tooltip-trigger title="Leilukin's purple kitty friend" loading="lazy" tabindex="0">
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>Created on 21 July 2024. If you want to adopt any of my kitty friends, please link back to my website and do not hotlink the images.</p>
|
||||||
|
|
||||||
|
<h3>Adopted Kitty Friends</h3>
|
||||||
|
<ul class="adoptables">
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://artwork.neocities.org/cliques" data-tooltip-trigger title="artwork's bat kitty">
|
||||||
|
<img src="/assets/adoptables/kittyfriends/artwork-bat.gif" alt="artwork's bat kitty" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://artwork.neocities.org/cliques" data-tooltip-trigger title="artwork's pumpkin kitty">
|
||||||
|
<img src="/assets/adoptables/kittyfriends/artwork-pumpkin.gif" alt="artwork's pumpkin kitty" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://artwork.neocities.org/cliques" data-tooltip-trigger title="artwork's vampire kitty">
|
||||||
|
<img src="/assets/adoptables/kittyfriends/artwork-vampire.gif" alt="artwork's vampire kitty" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://artwork.neocities.org/cliques" data-tooltip-trigger title="artwork's witch kitty">
|
||||||
|
<img src="/assets/adoptables/kittyfriends/artwork-witch.gif" alt="artwork's witch kitty" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://sanguineroyal.com/com/pixelcliques/" data-tooltip-trigger title="Krish's kitty friend">
|
||||||
|
<img src="/assets/adoptables/kittyfriends/krish.png" alt="Krish's kitty friend" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://owlsroost.xyz/" data-tooltip-trigger title="It's an owl! It's a cat! It's an owlcat! Made by Owl">
|
||||||
|
<img src="/assets/adoptables/kittyfriends/owl-small-owlcat.gif" alt="Owl's small owlcat" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://hillhouse.neocities.org/pixels" data-tooltip-trigger title="rosemary's ghost cat">
|
||||||
|
<img src="/assets/adoptables/kittyfriends/rosemary-ghostcat.gif" alt="rosemary's ghost cat" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://sakuradreams.neocities.org/" data-tooltip-trigger title="Sakura Dream's Simba">
|
||||||
|
<img src="/assets/adoptables/kittyfriends/sakuradreams-Simba.gif" alt="Sakura Dream's Simba" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://solaria.neocities.org/" data-tooltip-trigger title="Solaria's Garfield art">
|
||||||
|
<img src="/assets/adoptables/kittyfriends/solaria-garfield.gif" alt="Solaria's Garfield art" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content__section">
|
||||||
|
<h2>Salad Magazine</h2>
|
||||||
|
<p><a href="https://zine.kalechips.net/index">Salad Magazine</a> is a web-based zine for creative works run by <a href="https://kalechips.net/">Kalechips</a>.</p>
|
||||||
|
|
||||||
|
<h3>Ink Snail and Sparkle Snail</h3>
|
||||||
|
<div class="adoptables">
|
||||||
|
<img src="/assets/adoptables/salad-magazine/semper-inksnail-black.png" alt="Black ink snail pixel art by Semper" loading="lazy">
|
||||||
|
<img src="/assets/adoptables/salad-magazine/semper-inksnail-sparkle.png" alt="Sparkle snail pixel art by Semper" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<p>These snails were made by <a href="https://mycorrhiza.space/">Semper</a> as part of the <a href="https://zine.kalechips.net/issues/3/semper/index.html">Sparkle Snails</a> entry for <a href="https://zine.kalechips.net/issues/3/">Issue 3</a>.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content__section">
|
||||||
|
<h2>32-Bit Cafe Code Jam: Destination Vacation</h2>
|
||||||
|
<p>Stuff I collected from <a href="https://tilde.32bit.cafe/~ribose/events/destination/map.html">32-Bit Cafe's Community Code Jam #4: Destination Vacation</a> in June 2024, including a passport with stamps from the code jam entries, and extra goodies from some of the participants.</p>
|
||||||
|
<ul class="adoptables">
|
||||||
|
<li>
|
||||||
|
<img src="/assets/adoptables/32bitcafe-vacation/passport.png" alt="32-Bit Cafe's Destination Vacation code jam passport with stamps" loading="lazy">
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://xandra.cc/codejam/vacation/" data-tooltip-trigger title="Alexandra's stamp">
|
||||||
|
<img src="/assets/adoptables/32bitcafe-vacation/alexandra-stamp.png" alt="Alexandra's stamp" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-tooltip>
|
||||||
|
<a href="https://ribo.zone/sunday/fish/" data-tooltip-trigger title="Ribose's fishing button">
|
||||||
|
<img src="/assets/adoptables/32bitcafe-vacation/ribose-riverfish.png" alt="Ribose's fishing button" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</content-wrapper>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="inline-nav footer__links">
|
||||||
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/sitemap/
|
||||||
|
">Site Map</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/changelogs/"
|
||||||
|
>Changelogs</a></li><li><a
|
||||||
|
|
||||||
|
href="/accessibility/"
|
||||||
|
>Accessibility</a></li><li><a
|
||||||
|
|
||||||
|
href="/colophon/"
|
||||||
|
>Colophon</a></li></ul>
|
||||||
|
<div class="h-card hidden">
|
||||||
|
<span class="p-name p-nickname">Leilukin</span>
|
||||||
|
<a href="/" class="u-url">Home page</a>
|
||||||
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
||||||
|
<span class="p-country-name">Malaysia</span>
|
||||||
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
||||||
|
</div><a href="#top" class="top-btn">
|
||||||
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
||||||
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
||||||
|
</svg>
|
||||||
|
Back to Top
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/tooltips.js"></script>
|
||||||
|
<script>
|
||||||
|
var selector = '[data-tooltip]';
|
||||||
|
var els = document.querySelectorAll(selector);
|
||||||
|
|
||||||
|
for ( var i = 0; i < els.length; i++ ) {
|
||||||
|
var dm = new ARIAtip( els[i] );
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,910 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<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="author" content="Leilukin">
|
||||||
|
<meta name="description" content="All contents published on Leilukin's Hub.">
|
||||||
|
<meta name="generator" content="Eleventy v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/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.com/archive/">
|
||||||
|
<meta name="twitter:description" content="All contents published on Leilukin's Hub.">
|
||||||
|
<link rel="canonical" href="https://leilukin.com/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">
|
||||||
|
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
.breadcrumbs {
|
||||||
|
list-style-type: "";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--pagination {
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--nextprev {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7em;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: 'prev next';
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--prev { grid-area: prev; }
|
||||||
|
.blog__post--next { grid-area: next; }
|
||||||
|
.hero img { filter:
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
; }
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background: var(--clr-navbar-bg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 998;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a {
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
|
.navbar__links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle {
|
||||||
|
background-color: inherit;
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle svg { fill: currentColor; }
|
||||||
|
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.navbar__popover {
|
||||||
|
background-color: var(--clr-navbar-bg);
|
||||||
|
border: 0.15em solid var(--clr-navbar-link);
|
||||||
|
padding: 1.5em;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__popover::backdrop {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet screen size */
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.navbar { padding: 1em 0.6em; }
|
||||||
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
|
.navbar__links { display: flex; }
|
||||||
|
}
|
||||||
|
.top-btn,
|
||||||
|
.top-btn:hover {
|
||||||
|
color: var(--clr-top-btn-txt);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background-color: var(--clr-top-btn-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50em;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn:focus {
|
||||||
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
:root { --footer-gap: 0.5em; }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--clr-main-footer-bg);
|
||||||
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
||||||
|
text-align: center;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links,
|
||||||
|
.footer__shrines {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links { justify-self: center; }
|
||||||
|
.footer__shrines { align-self: center; }</style>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="me" href="mailto:contact@leilukin.com">
|
||||||
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
||||||
|
<link rel="me" href="https://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
Content Archive | Leilukin's Hub
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero__top-bar hidden"></div>
|
||||||
|
<div class="hero__img">
|
||||||
|
|
||||||
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
||||||
|
<ul class="navbar__menu 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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||||
|
Navigation
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div popover id="nav-menu" class="navbar__popover">
|
||||||
|
<ul class="navbar__menu">
|
||||||
|
|
||||||
|
|
||||||
|
<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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<main id="content">
|
||||||
|
<header class="main__header">
|
||||||
|
|
||||||
|
|
||||||
|
<h1>Content Archive</h1>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<p>All contents published on Leilukin's Hub.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<p>25 July 2024</p>
|
||||||
|
</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>
|
||||||
|
<p>25 July 2024</p>
|
||||||
|
</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>
|
||||||
|
<p>25 July 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/blog/posts/2024-07-02-fanlisting-collective-launch/">
|
||||||
|
Cassette Beasts Fanlisting and My Fanlisting Collective Launched | Blog
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>2 July 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/">
|
||||||
|
My Cassette Beasts Fanlisting Application has been Approved | Blog
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>24 June 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/">
|
||||||
|
Leilukin's Hub Tumbleblog Launched | Blog
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>21 June 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/articles/palestine-masterlist/">
|
||||||
|
Palestine Masterlist | Articles
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>19 June 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/blog/posts/2024-06-12-performance-improvement-leilukins-hub/">
|
||||||
|
Improving Site Performance of Leilukin's Hub | Blog
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>12 June 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/">
|
||||||
|
Custom Domain Name and Hosting Change for Leilukin's Hub | Blog
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>31 May 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/blog/posts/2024-05-29-new-guestbook-leilukins-hub/">
|
||||||
|
The Search for a Guestbook Solution for Leilukin's Hub | Blog
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>29 May 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/blog/posts/2024-05-14-james-somerton-my-video-game-footage/">
|
||||||
|
James Somerton Used My Video Game Footage Without Credit or Permission | Blog
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>14 May 2024</p>
|
||||||
|
</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>
|
||||||
|
<p>27 April 2024</p>
|
||||||
|
</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>
|
||||||
|
<p>21 April 2024</p>
|
||||||
|
</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>
|
||||||
|
<p>6 March 2024</p>
|
||||||
|
</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>
|
||||||
|
<p>20 November 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>19 November 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>30 October 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>13 October 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>11 September 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>30 August 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>26 August 2023</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/articles/designated-lesbian-syndrome-fandom/">
|
||||||
|
Designated Lesbian Syndrome in Fandom | Articles
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>18 August 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>14 August 2023</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/shrines/cassettebeasts/">
|
||||||
|
Cassette Beasts Shrine
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>3 August 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>28 July 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>12 July 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>28 June 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>23 June 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>9 May 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>19 March 2023</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/shrines/starwarskotor/">
|
||||||
|
Star Wars: Knights of the Old Republic Shrine
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>17 February 2023</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/shrines/asummersend/">
|
||||||
|
A Summer’s End — Hong Kong 1986 Shrine
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>16 February 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>28 January 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>26 January 2023</p>
|
||||||
|
</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>
|
||||||
|
<p>11 October 2022</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/projects/videogamemods/kotor2/">
|
||||||
|
My Mods for Star Wars: Knights of the Old Republic II: The Sith Lords
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>11 September 2022</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/projects/videogamemods/kotor1/">
|
||||||
|
My Mods for Star Wars: Knights of the Old Republic
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>11 September 2022</p>
|
||||||
|
</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>
|
||||||
|
<p>11 September 2022</p>
|
||||||
|
</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>
|
||||||
|
<p>11 September 2022</p>
|
||||||
|
</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>
|
||||||
|
<p>25 September 2021</p>
|
||||||
|
</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>
|
||||||
|
<p>27 January 2021</p>
|
||||||
|
</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>
|
||||||
|
<p>19 February 2020</p>
|
||||||
|
</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>
|
||||||
|
<p>22 September 2018</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/">
|
||||||
|
Redeeming Bastila Guide | Guides
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>16 September 2018</p>
|
||||||
|
</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>
|
||||||
|
<p>15 July 2017</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/shrines/starwarskotor/guides/kotor-juhani-romance-guide/">
|
||||||
|
Juhani Romance Guide | Guides
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>5 March 2016</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</content-wrapper>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="inline-nav footer__links">
|
||||||
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/sitemap/
|
||||||
|
">Site Map</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/changelogs/"
|
||||||
|
>Changelogs</a></li><li><a
|
||||||
|
|
||||||
|
href="/accessibility/"
|
||||||
|
>Accessibility</a></li><li><a
|
||||||
|
|
||||||
|
href="/colophon/"
|
||||||
|
>Colophon</a></li></ul>
|
||||||
|
<div class="h-card hidden">
|
||||||
|
<span class="p-name p-nickname">Leilukin</span>
|
||||||
|
<a href="/" class="u-url">Home page</a>
|
||||||
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
||||||
|
<span class="p-country-name">Malaysia</span>
|
||||||
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
||||||
|
</div><a href="#top" class="top-btn">
|
||||||
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
||||||
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
||||||
|
</svg>
|
||||||
|
Back to Top
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,589 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<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="author" content="Leilukin">
|
||||||
|
<meta name="description" content="My masterlist of criticisms of the Harry Potter series and J. K. Rowling.">
|
||||||
|
<meta name="generator" content="Eleventy v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/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.com/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.com/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">
|
||||||
|
|
||||||
|
<style>.toc__wrapper {
|
||||||
|
max-height: 89vh;
|
||||||
|
overflow-x: 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;
|
||||||
|
}
|
||||||
|
.content__nav {
|
||||||
|
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||||
|
background-color: var(--clr-content-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content__nav--title {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
.breadcrumbs {
|
||||||
|
list-style-type: "";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--pagination {
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--nextprev {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7em;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: 'prev next';
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--prev { grid-area: prev; }
|
||||||
|
.blog__post--next { grid-area: next; }
|
||||||
|
.hero img { filter:
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
; }
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background: var(--clr-navbar-bg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 998;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a {
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
|
.navbar__links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle {
|
||||||
|
background-color: inherit;
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle svg { fill: currentColor; }
|
||||||
|
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.navbar__popover {
|
||||||
|
background-color: var(--clr-navbar-bg);
|
||||||
|
border: 0.15em solid var(--clr-navbar-link);
|
||||||
|
padding: 1.5em;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__popover::backdrop {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet screen size */
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.navbar { padding: 1em 0.6em; }
|
||||||
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
|
.navbar__links { display: flex; }
|
||||||
|
}
|
||||||
|
.top-btn,
|
||||||
|
.top-btn:hover {
|
||||||
|
color: var(--clr-top-btn-txt);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background-color: var(--clr-top-btn-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50em;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn:focus {
|
||||||
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
:root { --footer-gap: 0.5em; }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--clr-main-footer-bg);
|
||||||
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
||||||
|
text-align: center;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links,
|
||||||
|
.footer__shrines {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links { justify-self: center; }
|
||||||
|
.footer__shrines { align-self: center; }</style>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="me" href="mailto:contact@leilukin.com">
|
||||||
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
||||||
|
<link rel="me" href="https://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
<script src="/assets/js/details-utils.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
Anti-Harry Potter and Anti-J. K. Rowling Masterlist | Articles | Leilukin's Hub
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero__top-bar hidden"></div>
|
||||||
|
<div class="hero__img">
|
||||||
|
|
||||||
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
||||||
|
<ul class="navbar__menu 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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||||
|
Navigation
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div popover id="nav-menu" class="navbar__popover">
|
||||||
|
<ul class="navbar__menu">
|
||||||
|
|
||||||
|
|
||||||
|
<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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<main id="content">
|
||||||
|
<header class="main__header">
|
||||||
|
|
||||||
|
<nav aria-labelledby="breadcrumbs-title">
|
||||||
|
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
||||||
|
<ol class="breadcrumbs">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="/articles/">Articles</a>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<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 19 June 2024</p>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Categories:
|
||||||
|
|
||||||
|
<a href="/categories/harry-potter">harry potter</a>,
|
||||||
|
|
||||||
|
<a href="/categories/jk-rowling">jk rowling</a>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>🍿 3 min. read</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
<aside class="left-sidebar" aria-label="Left sidebar">
|
||||||
|
<details-utils force-open="(min-width: 60rem)" force-restore>
|
||||||
|
<details class="toc__wrapper sidebar--sticky">
|
||||||
|
<summary class="toc__heading" id="toc-heading">
|
||||||
|
Table of Contents
|
||||||
|
</summary>
|
||||||
|
<nav class="toc" aria-labelledby="toc-heading"><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>
|
||||||
|
</details-utils>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="content">
|
||||||
|
<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" loading="lazy">
|
||||||
|
<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 <cite>Harry Potter</cite> 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 <cite>Harry Potter</cite> series was mediocre at best. As a result, I had stopped becoming a <cite>Harry Potter</cite> 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>
|
||||||
|
<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>
|
||||||
|
<li><a href="https://starbreaker.org/blog/entertainment/talking-shit-about-harry-potter/index.html">Talking Shit About Harry Potter</a> by Matthew Graybosch (19 June 2024) — This post was prompted by this very masterlist and our email exchange about the topic.</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>
|
||||||
|
<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>
|
||||||
|
<li><a href="https://www.youtube.com/watch?v=Cmx_YSPcujE">Did J.K. Rowling STEAL Harry Potter (Rip-off? Plagiarism?!)</a> by Caelan Conrad (3 June 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" aria-label="Right sidebar">
|
||||||
|
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
|
||||||
|
<h2 class="content__nav--title" id="my-contents-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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</content-wrapper>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="inline-nav footer__links">
|
||||||
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/sitemap/
|
||||||
|
">Site Map</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/changelogs/"
|
||||||
|
>Changelogs</a></li><li><a
|
||||||
|
|
||||||
|
href="/accessibility/"
|
||||||
|
>Accessibility</a></li><li><a
|
||||||
|
|
||||||
|
href="/colophon/"
|
||||||
|
>Colophon</a></li></ul>
|
||||||
|
<div class="h-card hidden">
|
||||||
|
<span class="p-name p-nickname">Leilukin</span>
|
||||||
|
<a href="/" class="u-url">Home page</a>
|
||||||
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
||||||
|
<span class="p-country-name">Malaysia</span>
|
||||||
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
||||||
|
</div><a href="#top" class="top-btn">
|
||||||
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
||||||
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
||||||
|
</svg>
|
||||||
|
Back to Top
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,493 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<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="author" content="Leilukin">
|
||||||
|
<meta name="description" content="On fandom's tokenisation of lesbians, and how I hate it as a lesbian myself.">
|
||||||
|
<meta name="generator" content="Eleventy v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/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.com/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.com/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">
|
||||||
|
|
||||||
|
<style>.content__nav {
|
||||||
|
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||||
|
background-color: var(--clr-content-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content__nav--title {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
.breadcrumbs {
|
||||||
|
list-style-type: "";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--pagination {
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--nextprev {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7em;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: 'prev next';
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--prev { grid-area: prev; }
|
||||||
|
.blog__post--next { grid-area: next; }
|
||||||
|
.hero img { filter:
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
; }
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background: var(--clr-navbar-bg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 998;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a {
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
|
.navbar__links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle {
|
||||||
|
background-color: inherit;
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle svg { fill: currentColor; }
|
||||||
|
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.navbar__popover {
|
||||||
|
background-color: var(--clr-navbar-bg);
|
||||||
|
border: 0.15em solid var(--clr-navbar-link);
|
||||||
|
padding: 1.5em;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__popover::backdrop {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet screen size */
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.navbar { padding: 1em 0.6em; }
|
||||||
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
|
.navbar__links { display: flex; }
|
||||||
|
}
|
||||||
|
.top-btn,
|
||||||
|
.top-btn:hover {
|
||||||
|
color: var(--clr-top-btn-txt);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background-color: var(--clr-top-btn-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50em;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn:focus {
|
||||||
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
:root { --footer-gap: 0.5em; }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--clr-main-footer-bg);
|
||||||
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
||||||
|
text-align: center;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links,
|
||||||
|
.footer__shrines {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links { justify-self: center; }
|
||||||
|
.footer__shrines { align-self: center; }</style>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="me" href="mailto:contact@leilukin.com">
|
||||||
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
||||||
|
<link rel="me" href="https://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
Designated Lesbian Syndrome in Fandom | Articles | Leilukin's Hub
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero__top-bar hidden"></div>
|
||||||
|
<div class="hero__img">
|
||||||
|
|
||||||
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
||||||
|
<ul class="navbar__menu 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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||||
|
Navigation
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div popover id="nav-menu" class="navbar__popover">
|
||||||
|
<ul class="navbar__menu">
|
||||||
|
|
||||||
|
|
||||||
|
<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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<main id="content">
|
||||||
|
<header class="main__header">
|
||||||
|
|
||||||
|
<nav aria-labelledby="breadcrumbs-title">
|
||||||
|
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
||||||
|
<ol class="breadcrumbs">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="/articles/">Articles</a>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="content">
|
||||||
|
<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" aria-label="Right sidebar">
|
||||||
|
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
|
||||||
|
<h2 class="content__nav--title" id="my-contents-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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</content-wrapper>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="inline-nav footer__links">
|
||||||
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/sitemap/
|
||||||
|
">Site Map</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/changelogs/"
|
||||||
|
>Changelogs</a></li><li><a
|
||||||
|
|
||||||
|
href="/accessibility/"
|
||||||
|
>Accessibility</a></li><li><a
|
||||||
|
|
||||||
|
href="/colophon/"
|
||||||
|
>Colophon</a></li></ul>
|
||||||
|
<div class="h-card hidden">
|
||||||
|
<span class="p-name p-nickname">Leilukin</span>
|
||||||
|
<a href="/" class="u-url">Home page</a>
|
||||||
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
||||||
|
<span class="p-country-name">Malaysia</span>
|
||||||
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
||||||
|
</div><a href="#top" class="top-btn">
|
||||||
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
||||||
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
||||||
|
</svg>
|
||||||
|
Back to Top
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,555 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<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="author" content="Leilukin">
|
||||||
|
<meta name="description" content="List of articles published on my website.">
|
||||||
|
<meta name="generator" content="Eleventy v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/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.com/articles/">
|
||||||
|
<meta name="twitter:description" content="List of articles published on my website.">
|
||||||
|
<link rel="canonical" href="https://leilukin.com/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">
|
||||||
|
|
||||||
|
<style>.toc__wrapper {
|
||||||
|
max-height: 89vh;
|
||||||
|
overflow-x: 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;
|
||||||
|
}
|
||||||
|
.content__nav {
|
||||||
|
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||||
|
background-color: var(--clr-content-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content__nav--title {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
.breadcrumbs {
|
||||||
|
list-style-type: "";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--pagination {
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--nextprev {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7em;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: 'prev next';
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--prev { grid-area: prev; }
|
||||||
|
.blog__post--next { grid-area: next; }
|
||||||
|
.hero img { filter:
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
; }
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background: var(--clr-navbar-bg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 998;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a {
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
|
.navbar__links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle {
|
||||||
|
background-color: inherit;
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle svg { fill: currentColor; }
|
||||||
|
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.navbar__popover {
|
||||||
|
background-color: var(--clr-navbar-bg);
|
||||||
|
border: 0.15em solid var(--clr-navbar-link);
|
||||||
|
padding: 1.5em;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__popover::backdrop {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet screen size */
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.navbar { padding: 1em 0.6em; }
|
||||||
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
|
.navbar__links { display: flex; }
|
||||||
|
}
|
||||||
|
.top-btn,
|
||||||
|
.top-btn:hover {
|
||||||
|
color: var(--clr-top-btn-txt);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background-color: var(--clr-top-btn-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50em;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn:focus {
|
||||||
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
:root { --footer-gap: 0.5em; }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--clr-main-footer-bg);
|
||||||
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
||||||
|
text-align: center;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links,
|
||||||
|
.footer__shrines {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links { justify-self: center; }
|
||||||
|
.footer__shrines { align-self: center; }</style>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="me" href="mailto:contact@leilukin.com">
|
||||||
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
||||||
|
<link rel="me" href="https://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
<script src="/assets/js/details-utils.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
Articles | Leilukin's Hub
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero__top-bar hidden"></div>
|
||||||
|
<div class="hero__img">
|
||||||
|
|
||||||
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
||||||
|
<ul class="navbar__menu 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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||||
|
Navigation
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div popover id="nav-menu" class="navbar__popover">
|
||||||
|
<ul class="navbar__menu">
|
||||||
|
|
||||||
|
|
||||||
|
<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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<main id="content">
|
||||||
|
<header class="main__header">
|
||||||
|
|
||||||
|
|
||||||
|
<h1>Articles</h1>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<p>List of articles published on my website.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
<aside class="left-sidebar" aria-label="Left sidebar">
|
||||||
|
<details-utils force-open="(min-width: 60rem)" force-restore>
|
||||||
|
<details class="toc__wrapper sidebar--sticky">
|
||||||
|
<summary class="toc__heading" id="toc-heading">
|
||||||
|
Table of Contents
|
||||||
|
</summary>
|
||||||
|
<nav class="toc" aria-labelledby="toc-heading"><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>
|
||||||
|
</details-utils>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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><li>
|
||||||
|
<p><a href="/articles/anti-harry-potter-jk-rowling-masterlist/">Anti-Harry Potter and Anti-J. K. Rowling Masterlist</a></p>
|
||||||
|
<p>19 March 2023</p>
|
||||||
|
</li><li>
|
||||||
|
<p><a href="/articles/my-dislike-of-shipping-culture/">My Disinterest in Shipping and Dislike of Shipping Culture</a></p>
|
||||||
|
<p>14 August 2023</p>
|
||||||
|
</li><li>
|
||||||
|
<p><a href="/articles/designated-lesbian-syndrome-fandom/">Designated Lesbian Syndrome in Fandom</a></p>
|
||||||
|
<p>18 August 2023</p>
|
||||||
|
</li><li>
|
||||||
|
<p><a href="/articles/palestine-masterlist/">Palestine Masterlist</a></p>
|
||||||
|
<p>19 June 2024</p>
|
||||||
|
</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>
|
||||||
|
<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><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>
|
||||||
|
<p>11 September 2022</p>
|
||||||
|
</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>
|
||||||
|
<p>11 September 2022</p>
|
||||||
|
</li></ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<aside class="right-sidebar" aria-label="Right sidebar">
|
||||||
|
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
|
||||||
|
<h2 class="content__nav--title" id="my-contents-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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</content-wrapper>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="inline-nav footer__links">
|
||||||
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/sitemap/
|
||||||
|
">Site Map</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/changelogs/"
|
||||||
|
>Changelogs</a></li><li><a
|
||||||
|
|
||||||
|
href="/accessibility/"
|
||||||
|
>Accessibility</a></li><li><a
|
||||||
|
|
||||||
|
href="/colophon/"
|
||||||
|
>Colophon</a></li></ul>
|
||||||
|
<div class="h-card hidden">
|
||||||
|
<span class="p-name p-nickname">Leilukin</span>
|
||||||
|
<a href="/" class="u-url">Home page</a>
|
||||||
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
||||||
|
<span class="p-country-name">Malaysia</span>
|
||||||
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
||||||
|
</div><a href="#top" class="top-btn">
|
||||||
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
||||||
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
||||||
|
</svg>
|
||||||
|
Back to Top
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,498 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<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="author" content="Leilukin">
|
||||||
|
<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 v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/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.com/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.com/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">
|
||||||
|
|
||||||
|
<style>.content__nav {
|
||||||
|
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||||
|
background-color: var(--clr-content-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content__nav--title {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
.breadcrumbs {
|
||||||
|
list-style-type: "";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--pagination {
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--nextprev {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7em;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: 'prev next';
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--prev { grid-area: prev; }
|
||||||
|
.blog__post--next { grid-area: next; }
|
||||||
|
.hero img { filter:
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
; }
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background: var(--clr-navbar-bg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 998;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a {
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
|
.navbar__links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle {
|
||||||
|
background-color: inherit;
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle svg { fill: currentColor; }
|
||||||
|
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.navbar__popover {
|
||||||
|
background-color: var(--clr-navbar-bg);
|
||||||
|
border: 0.15em solid var(--clr-navbar-link);
|
||||||
|
padding: 1.5em;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__popover::backdrop {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet screen size */
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.navbar { padding: 1em 0.6em; }
|
||||||
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
|
.navbar__links { display: flex; }
|
||||||
|
}
|
||||||
|
.top-btn,
|
||||||
|
.top-btn:hover {
|
||||||
|
color: var(--clr-top-btn-txt);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background-color: var(--clr-top-btn-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50em;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn:focus {
|
||||||
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
:root { --footer-gap: 0.5em; }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--clr-main-footer-bg);
|
||||||
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
||||||
|
text-align: center;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links,
|
||||||
|
.footer__shrines {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links { justify-self: center; }
|
||||||
|
.footer__shrines { align-self: center; }</style>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="me" href="mailto:contact@leilukin.com">
|
||||||
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
||||||
|
<link rel="me" href="https://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
The modders who spent 15 years fixing Knights of the Old Republic 2 @ Ars Technica | Articles | Leilukin's Hub
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero__top-bar hidden"></div>
|
||||||
|
<div class="hero__img">
|
||||||
|
|
||||||
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
||||||
|
<ul class="navbar__menu 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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||||
|
Navigation
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div popover id="nav-menu" class="navbar__popover">
|
||||||
|
<ul class="navbar__menu">
|
||||||
|
|
||||||
|
|
||||||
|
<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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<main id="content">
|
||||||
|
<header class="main__header">
|
||||||
|
|
||||||
|
<nav aria-labelledby="breadcrumbs-title">
|
||||||
|
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
||||||
|
<ol class="breadcrumbs">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="/articles/">Articles</a>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<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>,
|
||||||
|
|
||||||
|
<a href="/categories/star-wars-kotor-2">star wars kotor 2</a>,
|
||||||
|
|
||||||
|
<a href="/categories/video-game-mods">video game mods</a>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>🍿 2 min. read</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="content">
|
||||||
|
<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/videogamemods/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" aria-label="Right sidebar">
|
||||||
|
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
|
||||||
|
<h2 class="content__nav--title" id="my-contents-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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</content-wrapper>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="inline-nav footer__links">
|
||||||
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/sitemap/
|
||||||
|
">Site Map</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/changelogs/"
|
||||||
|
>Changelogs</a></li><li><a
|
||||||
|
|
||||||
|
href="/accessibility/"
|
||||||
|
>Accessibility</a></li><li><a
|
||||||
|
|
||||||
|
href="/colophon/"
|
||||||
|
>Colophon</a></li></ul>
|
||||||
|
<div class="h-card hidden">
|
||||||
|
<span class="p-name p-nickname">Leilukin</span>
|
||||||
|
<a href="/" class="u-url">Home page</a>
|
||||||
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
||||||
|
<span class="p-country-name">Malaysia</span>
|
||||||
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
||||||
|
</div><a href="#top" class="top-btn">
|
||||||
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
||||||
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
||||||
|
</svg>
|
||||||
|
Back to Top
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,516 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<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="author" content="Leilukin">
|
||||||
|
<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 v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/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.com/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.com/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">
|
||||||
|
|
||||||
|
<style>.content__nav {
|
||||||
|
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||||
|
background-color: var(--clr-content-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content__nav--title {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
.breadcrumbs {
|
||||||
|
list-style-type: "";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--pagination {
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--nextprev {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7em;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: 'prev next';
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--prev { grid-area: prev; }
|
||||||
|
.blog__post--next { grid-area: next; }
|
||||||
|
.hero img { filter:
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
; }
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background: var(--clr-navbar-bg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 998;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a {
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
|
.navbar__links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle {
|
||||||
|
background-color: inherit;
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle svg { fill: currentColor; }
|
||||||
|
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.navbar__popover {
|
||||||
|
background-color: var(--clr-navbar-bg);
|
||||||
|
border: 0.15em solid var(--clr-navbar-link);
|
||||||
|
padding: 1.5em;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__popover::backdrop {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet screen size */
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.navbar { padding: 1em 0.6em; }
|
||||||
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
|
.navbar__links { display: flex; }
|
||||||
|
}
|
||||||
|
.top-btn,
|
||||||
|
.top-btn:hover {
|
||||||
|
color: var(--clr-top-btn-txt);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background-color: var(--clr-top-btn-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50em;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn:focus {
|
||||||
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
:root { --footer-gap: 0.5em; }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--clr-main-footer-bg);
|
||||||
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
||||||
|
text-align: center;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links,
|
||||||
|
.footer__shrines {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links { justify-self: center; }
|
||||||
|
.footer__shrines { align-self: center; }</style>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="me" href="mailto:contact@leilukin.com">
|
||||||
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
||||||
|
<link rel="me" href="https://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
Floating in a Sky Full of Pride: LGBTQ+ Booklet Artist Interview from MISI:Bawang | Articles | Leilukin's Hub
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero__top-bar hidden"></div>
|
||||||
|
<div class="hero__img">
|
||||||
|
|
||||||
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
||||||
|
<ul class="navbar__menu 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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||||
|
Navigation
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div popover id="nav-menu" class="navbar__popover">
|
||||||
|
<ul class="navbar__menu">
|
||||||
|
|
||||||
|
|
||||||
|
<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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<main id="content">
|
||||||
|
<header class="main__header">
|
||||||
|
|
||||||
|
<nav aria-labelledby="breadcrumbs-title">
|
||||||
|
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
||||||
|
<ol class="breadcrumbs">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="/articles/">Articles</a>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<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>,
|
||||||
|
|
||||||
|
<a href="/categories/lgbtq">lgbtq+</a>,
|
||||||
|
|
||||||
|
<a href="/categories/malaysia">malaysia</a>,
|
||||||
|
|
||||||
|
<a href="/categories/a-summers-end">a summer's end</a>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>🍿 3 min. read</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="content">
|
||||||
|
<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.avif" 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.avif" 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.avif" 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" aria-label="Right sidebar">
|
||||||
|
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
|
||||||
|
<h2 class="content__nav--title" id="my-contents-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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</content-wrapper>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="inline-nav footer__links">
|
||||||
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/sitemap/
|
||||||
|
">Site Map</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/changelogs/"
|
||||||
|
>Changelogs</a></li><li><a
|
||||||
|
|
||||||
|
href="/accessibility/"
|
||||||
|
>Accessibility</a></li><li><a
|
||||||
|
|
||||||
|
href="/colophon/"
|
||||||
|
>Colophon</a></li></ul>
|
||||||
|
<div class="h-card hidden">
|
||||||
|
<span class="p-name p-nickname">Leilukin</span>
|
||||||
|
<a href="/" class="u-url">Home page</a>
|
||||||
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
||||||
|
<span class="p-country-name">Malaysia</span>
|
||||||
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
||||||
|
</div><a href="#top" class="top-btn">
|
||||||
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
||||||
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
||||||
|
</svg>
|
||||||
|
Back to Top
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,487 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<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="author" content="Leilukin">
|
||||||
|
<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 v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/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.com/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.com/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">
|
||||||
|
|
||||||
|
<style>.content__nav {
|
||||||
|
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||||
|
background-color: var(--clr-content-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content__nav--title {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
.breadcrumbs {
|
||||||
|
list-style-type: "";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--pagination {
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--nextprev {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7em;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: 'prev next';
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--prev { grid-area: prev; }
|
||||||
|
.blog__post--next { grid-area: next; }
|
||||||
|
.hero img { filter:
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
; }
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background: var(--clr-navbar-bg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 998;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a {
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
|
.navbar__links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle {
|
||||||
|
background-color: inherit;
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle svg { fill: currentColor; }
|
||||||
|
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.navbar__popover {
|
||||||
|
background-color: var(--clr-navbar-bg);
|
||||||
|
border: 0.15em solid var(--clr-navbar-link);
|
||||||
|
padding: 1.5em;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__popover::backdrop {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet screen size */
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.navbar { padding: 1em 0.6em; }
|
||||||
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
|
.navbar__links { display: flex; }
|
||||||
|
}
|
||||||
|
.top-btn,
|
||||||
|
.top-btn:hover {
|
||||||
|
color: var(--clr-top-btn-txt);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background-color: var(--clr-top-btn-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50em;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn:focus {
|
||||||
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
:root { --footer-gap: 0.5em; }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--clr-main-footer-bg);
|
||||||
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
||||||
|
text-align: center;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links,
|
||||||
|
.footer__shrines {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links { justify-self: center; }
|
||||||
|
.footer__shrines { align-self: center; }</style>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="me" href="mailto:contact@leilukin.com">
|
||||||
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
||||||
|
<link rel="me" href="https://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
My Disinterest in Shipping and Dislike of Shipping Culture | Articles | Leilukin's Hub
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero__top-bar hidden"></div>
|
||||||
|
<div class="hero__img">
|
||||||
|
|
||||||
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
||||||
|
<ul class="navbar__menu 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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||||
|
Navigation
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div popover id="nav-menu" class="navbar__popover">
|
||||||
|
<ul class="navbar__menu">
|
||||||
|
|
||||||
|
|
||||||
|
<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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<main id="content">
|
||||||
|
<header class="main__header">
|
||||||
|
|
||||||
|
<nav aria-labelledby="breadcrumbs-title">
|
||||||
|
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
||||||
|
<ol class="breadcrumbs">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="/articles/">Articles</a>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="content">
|
||||||
|
<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" aria-label="Right sidebar">
|
||||||
|
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
|
||||||
|
<h2 class="content__nav--title" id="my-contents-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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</content-wrapper>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="inline-nav footer__links">
|
||||||
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/sitemap/
|
||||||
|
">Site Map</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/changelogs/"
|
||||||
|
>Changelogs</a></li><li><a
|
||||||
|
|
||||||
|
href="/accessibility/"
|
||||||
|
>Accessibility</a></li><li><a
|
||||||
|
|
||||||
|
href="/colophon/"
|
||||||
|
>Colophon</a></li></ul>
|
||||||
|
<div class="h-card hidden">
|
||||||
|
<span class="p-name p-nickname">Leilukin</span>
|
||||||
|
<a href="/" class="u-url">Home page</a>
|
||||||
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
||||||
|
<span class="p-country-name">Malaysia</span>
|
||||||
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
||||||
|
</div><a href="#top" class="top-btn">
|
||||||
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
||||||
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
||||||
|
</svg>
|
||||||
|
Back to Top
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,557 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:title" content="Palestine 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="author" content="Leilukin">
|
||||||
|
<meta name="description" content="My masterlist of resources related to Palestine.">
|
||||||
|
<meta name="generator" content="Eleventy v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/articles/palestine-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 resources related to Palestine.">
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:url" content="https://leilukin.com/articles/palestine-masterlist/">
|
||||||
|
<meta name="twitter:description" content="My masterlist of resources related to Palestine.">
|
||||||
|
<link rel="canonical" href="https://leilukin.com/articles/palestine-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">
|
||||||
|
|
||||||
|
<style>.content__nav {
|
||||||
|
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||||
|
background-color: var(--clr-content-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content__nav--title {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
.breadcrumbs {
|
||||||
|
list-style-type: "";
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--pagination {
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-top: 2.5em;
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--nextprev {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7em;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: 'prev next';
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__post--prev { grid-area: prev; }
|
||||||
|
.blog__post--next { grid-area: next; }
|
||||||
|
.hero img { filter:
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
||||||
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
; }
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background: var(--clr-navbar-bg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 998;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a {
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
||||||
|
|
||||||
|
.navbar__links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle {
|
||||||
|
background-color: inherit;
|
||||||
|
color: var(--clr-navbar-link);
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__toggle svg { fill: currentColor; }
|
||||||
|
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
||||||
|
.navbar__toggle:focus,
|
||||||
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.navbar__popover {
|
||||||
|
background-color: var(--clr-navbar-bg);
|
||||||
|
border: 0.15em solid var(--clr-navbar-link);
|
||||||
|
padding: 1.5em;
|
||||||
|
max-width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__popover::backdrop {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports selector([popover]) {
|
||||||
|
.navbar__toggle { display: flex; }
|
||||||
|
.navbar__links { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet screen size */
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.navbar { padding: 1em 0.6em; }
|
||||||
|
.navbar__toggle, .navbar__popover { display: none; }
|
||||||
|
.navbar__links { display: flex; }
|
||||||
|
}
|
||||||
|
.top-btn,
|
||||||
|
.top-btn:hover {
|
||||||
|
color: var(--clr-top-btn-txt);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
background-color: var(--clr-top-btn-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50em;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn:focus {
|
||||||
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-btn__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
:root { --footer-gap: 0.5em; }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--clr-main-footer-bg);
|
||||||
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
||||||
|
text-align: center;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links,
|
||||||
|
.footer__shrines {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: var(--footer-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__links { justify-self: center; }
|
||||||
|
.footer__shrines { align-self: center; }</style>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 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-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+ */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="me" href="mailto:contact@leilukin.com">
|
||||||
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
||||||
|
<link rel="me" href="https://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
Palestine Masterlist | Articles | Leilukin's Hub
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="hero__top-bar hidden"></div>
|
||||||
|
<div class="hero__img">
|
||||||
|
|
||||||
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
||||||
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
||||||
|
<ul class="navbar__menu 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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||||
|
Navigation
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div popover id="nav-menu" class="navbar__popover">
|
||||||
|
<ul class="navbar__menu">
|
||||||
|
|
||||||
|
|
||||||
|
<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="/adoptables/">Adoptables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/links/">Links</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/guestbook/">Guestbook</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<main id="content">
|
||||||
|
<header class="main__header">
|
||||||
|
|
||||||
|
<nav aria-labelledby="breadcrumbs-title">
|
||||||
|
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
||||||
|
<ol class="breadcrumbs">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="/articles/">Articles</a>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<h1>Palestine Masterlist</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="article__info">
|
||||||
|
<p>Posted on 19 June 2024 by Leilukin
|
||||||
|
|
||||||
|
• Last updated on 25 July 2024</p>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Categories:
|
||||||
|
|
||||||
|
<a href="/categories/palestine">palestine</a>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>🍿 3 min. read</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="content">
|
||||||
|
<p><img src="/assets/buttons/misc/standwithpalestine.png" alt="Stand with Palestine"></p>
|
||||||
|
<p>(Credit to <a href="https://hillhouse.neocities.org/journal/notes/palestine">rosemary</a> for the Stand with Palestine button)</p>
|
||||||
|
<p>From the river to the sea, Palestine will be free.</p>
|
||||||
|
<p>Here, I am compiling a list of resources related to Palestine. This list is not comprehensive by any means, but I still want to do my part in using my platform to support an important cause.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="educate-yourself">Educate Yourself</h2>
|
||||||
|
<a class="heading-anchor" href="#educate-yourself" aria-labelledby="educate-yourself"><span hidden>#</span></a></div>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://decolonizepalestine.com/">Decolonize Palestine</a></li>
|
||||||
|
<li>Haymarket's <a href="https://www.haymarketbooks.org/blogs/495-free-ebooks-for-a-free-palestine">Free Ebooks for a Free Palestine</a></li>
|
||||||
|
<li><a href="https://today.visualizingpalestine.org/">Palestine, Today: Explore how Palestine has been transformed since the Nakba</a></li>
|
||||||
|
<li><a href="https://palopenmaps.org/">Palestine Open Maps</a></li>
|
||||||
|
<li><a href="https://www.palestineremembered.com/">Palestine Remembered</a></li>
|
||||||
|
</ul>
|
||||||
|
<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>
|
||||||
|
<li><a href="https://medium.com/@thegriefwitch/what-is-the-ethical-way-to-climb-out-of-hell-8ed51bdc327b">What is the Ethical Way to Climb Out of Hell?</a> by The Grief Witch (17 October 2023)</li>
|
||||||
|
</ul>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="donations-and-charities">Donations and Charities</h2>
|
||||||
|
<a class="heading-anchor" href="#donations-and-charities" aria-labelledby="donations-and-charities"><span hidden>#</span></a></div>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://arab.org/click-to-help/palestine/">Daily click to help Palestine on arab.org</a></li>
|
||||||
|
<li><a href="https://www.pcrf.net/">Palestine Children's Relief Fund</a></li>
|
||||||
|
<li><a href="https://gazaesims.com/">eSims for Gaza</a></li>
|
||||||
|
<li><a href="https://gazafunds.com">Gaza Funds</a></li>
|
||||||
|
<li><a href="https://docs.google.com/spreadsheets/d/1yYkNp5U3ANwILl2MknJi9G7ArY4uVTEEQ1CVfzR8Ioo/edit?gid=0#gid=0">verified Gaza Evacuation Fundraiser List</a></li>
|
||||||
|
<li><a href="https://docs.google.com/spreadsheets/d/1vtMLLOzuc6GpkFySyVtKQOY2j-Vvg0UsChMCFst_WLA/htmlview">Operation Olive Branch</a></li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/helping-the-people-of-gaza-mutual-aid-fund">Helping the People of Gaza - Mutual Aid Fund</a></li>
|
||||||
|
<li><a href="https://x.com/careforgaza">Care for Gaza</a></li>
|
||||||
|
<li><a href="https://x.com/GazaDirectAid">Direct Aid for Gaza</a></li>
|
||||||
|
<li><a href="https://gaza-city.ensany.com/campaign/6737?lang=en">Life For Gaza</a></li>
|
||||||
|
<li><a href="https://www.taawon.org/en/content/gaza-needs-us-now">Taawon</a></li>
|
||||||
|
<li><a href="https://www.wfp.org/emergencies/palestine-emergency">World Food Programme (WFP)</a></li>
|
||||||
|
<li><a href="https://www.map.org.uk/">Medical Aid for Palestinians</a></li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/urgent-help-dribrahem-to-treat-the-pateints-homeless-people">Help Dr. Ibrahem to treat the pateints homeless people</a></li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/support-for-marginalized-refugees-in-jordan">Support for Tents in Gaza</a></li>
|
||||||
|
<li><a href="https://gaza-city.ensany.com/campaign/6737?lang=EN">Gaza Municipality's water project</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="boycotts">Boycotts</h2>
|
||||||
|
<a class="heading-anchor" href="#boycotts" aria-labelledby="boycotts"><span hidden>#</span></a></div>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://bdsmovement.net/">BDS Movement</a></li>
|
||||||
|
<li>Attention to website owners: <a href="https://boycottwix.org/">Boycott Wix</a> — The BDS movement has <a href="https://bdsmovement.net/Act-Now-Against-These-Companies-Profiting-From-Genocide">listed Wix as an organic boycott target</a>, meaning the BDS movement did not initiate this grassroots boycott campaign, but supports it due to the boycotted brand's complicity in Israel's genocide and apartheid against Palestinians.</li>
|
||||||
|
</ul>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="spotlight-crowdfunding-campaigns">Spotlight Crowdfunding Campaigns</h2>
|
||||||
|
<a class="heading-anchor" href="#spotlight-crowdfunding-campaigns" aria-labelledby="spotlight-crowdfunding-campaigns"><span hidden>#</span></a></div>
|
||||||
|
<p>There have been Palestinians who reached out to me on Tumblr to ask for help with sharing their fundraising campaigns, so I am using my platform to share these campaigns. These campaigns have been verified by other Palestinians on Tumblr, so I encourage you to help to donate and share.</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://www.gofundme.com/f/ne9gzx-help-them-to-survive">Help...Save a Pregnant Mother's Life and Support Her Family</a> (verified by <a href="https://www.tumblr.com/nabulsi/751944563232587777">nabulsi</a> and <a href="https://www.tumblr.com/90-ghost/752304563682476032">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/help-sahar-and-her-family-to-evacuate-gaza">Help Sahar and Her Family to Evacuate Gaza</a> (verified by <a href="https://www.tumblr.com/el-shab-hussein/749777880017502208/another-fundraiser-i-trust">el-shab-hussein</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/help-us-escape-gaza-a-mothers-plea-for-safety">Help Us Escape Gaza: A Mother's Plea for Safety</a> (verified by <a href="https://docs.google.com/spreadsheets/d/1yYkNp5U3ANwILl2MknJi9G7ArY4uVTEEQ1CVfzR8Ioo/edit?pli=1&gid=0#gid=0&range=B186">el-shab-hussein and nabulsi</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/from-war-to-education-abdelrahmans-resilient-journey">From War to Education: Abdelrahman Resilient Journey</a> (verified by <a href="https://www.tumblr.com/nabulsi/753544070688915456">nabulsi</a> and <a href="https://www.tumblr.com/90-ghost/753258782216404992">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/i-have-nothing-left-my-home-and-workplace-have-be">Please Help Tahani save her children and husband</a> (verified by <a href="https://www.tumblr.com/el-shab-hussein/748756401076207616/list-of-fundraisers-for-direct-contacts-from">el-shab-hussein</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/please-help-shamaly-family-start-a-new-life">Please help Shamaly family SURVIVE Gaza & start a new life!</a> (verified by <a href="https://www.tumblr.com/nabulsi/753715707609530368">nabulsi</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/reunite-us-with-our-beloved-4-kids-stuck-in-gaza">Help us reunite with our kids who are stuck in Gaza</a> (verified by <a href="https://www.tumblr.com/90-ghost/754096091530723328/donate-to-help-us-reunite-with-our-kids-who-are">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/help-alaa-family-to-survive-the-war-in-gaza">Urgent ! Save kids life .</a> (verified by <a href="https://www.tumblr.com/90-ghost/751443466082484224">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/wyuehr-trapped-family-in-gaza-appeals-for-help-to-survive">Trapped Family in Gaza Appeals for Help to Survive</a> (verified by <a href="https://www.tumblr.com/nabulsi/753363183754952704">nabulsi</a>, <a href="https://www.tumblr.com/fairuzfan/752928036559749120">fairuzfan</a> and <a href="https://www.tumblr.com/90-ghost/752026987709825024">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/help-ahmed-family-to-travel">Help Ahmed family to travel to a save place</a> (veridied by <a href="https://www.tumblr.com/nabulsi/752576616277868544/hello-how-are-you-my-name-is-ahmed-im-from">nabulsi</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/byt93-help-my-family-escape-gaza">Help my family escape Gaza</a> (verified by <a href="https://www.tumblr.com/nabulsi/754296720770383872/donate-to-help-my-family-escape-gaza-organized-by">nabulsi</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/hope-for-gaza-support-ashrafs-family-rebuild-their-lives">Hope for Gaza: Support Ashraf's Family Rebuild Their Lives</a> (verified by <a href="https://www.tumblr.com/90-ghost/754535164856664064/legit-fundraiser">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/help-sara-and-her-family-to-evacuate-gaza">Help Zaen and Yehya to get out of Gaza</a> (verified by <a href="https://www.tumblr.com/90-ghost/754093176508268544">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/btuqqt-save-my-familys-life">A Father's Plea: Help Save My Family</a> (verified by <a href="https://www.tumblr.com/el-shab-hussein/754087744556449792/vetted-family-fundraiser-masterpost-3">el-shab-hussein</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/help-moamen-majed-rebuild-his-life-after-the-war">Help Moamen Majed rebuild his life after the war</a> (verified by <a href="https://www.tumblr.com/90-ghost/755355718664830976/moamenmajed-gaza-are-they-a-vetted-fundraiser">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/save-gaza-a-brighter-future-for-aya-and-her-family">Save Gaza: A Brighter Future for Aya and Her Family</a> (verified by <a href="https://www.tumblr.com/90-ghost/754992024939347968">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/emergency-help-my-relatives-evacuate-to-safety">EMERGENCY: help my relatives evacuate to safety</a> (verified by <a href="https://www.tumblr.com/90-ghost/756556584649424896">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/support-safaas-quest-to-get-her-family-to-safety">Support Safaa's Quest To Get Her Family To Safety</a> (verified by <a href="https://www.tumblr.com/90-ghost/756556669674274816">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/help-doaa-rebuild-her-sewing-business">Help Doaa Rebuild Her Sewing Business</a> (verified by <a href="https://www.tumblr.com/90-ghost/756556522290626560">90-ghost</a>)</li>
|
||||||
|
<li><a href="https://www.gofundme.com/f/help-the-munna-tashmali-family-rebuild-their-home-and-future">Help the Munna Tashmali Family Rebuild Their Home and Future</a> (verified by <a href="https://www.tumblr.com/nabulsi/754393532315353089/donate-to-help-the-munna-tashmali-family-rebuild">nabulsi</a>)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<aside class="right-sidebar" aria-label="Right sidebar">
|
||||||
|
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
|
||||||
|
<h2 class="content__nav--title" id="my-contents-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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</content-wrapper>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="inline-nav footer__links">
|
||||||
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/sitemap/
|
||||||
|
">Site Map</a></li>
|
||||||
|
<li><a
|
||||||
|
|
||||||
|
href="/changelogs/"
|
||||||
|
>Changelogs</a></li><li><a
|
||||||
|
|
||||||
|
href="/accessibility/"
|
||||||
|
>Accessibility</a></li><li><a
|
||||||
|
|
||||||
|
href="/colophon/"
|
||||||
|
>Colophon</a></li></ul>
|
||||||
|
<div class="h-card hidden">
|
||||||
|
<span class="p-name p-nickname">Leilukin</span>
|
||||||
|
<a href="/" class="u-url">Home page</a>
|
||||||
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
||||||
|
<span class="p-country-name">Malaysia</span>
|
||||||
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
||||||
|
</div><a href="#top" class="top-btn">
|
||||||
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
||||||
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
||||||
|
</svg>
|
||||||
|
Back to Top
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 741 B |
Binary file not shown.
|
After Width: | Height: | Size: 956 B |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 507 B |
Binary file not shown.
|
After Width: | Height: | Size: 381 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 658 B |
Binary file not shown.
|
After Width: | Height: | Size: 999 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 877 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 594 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 684 B |
Binary file not shown.
|
After Width: | Height: | Size: 243 B |
Binary file not shown.
|
After Width: | Height: | Size: 649 B |
Binary file not shown.
|
After Width: | Height: | Size: 260 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 258 B |
Binary file not shown.
|
After Width: | Height: | Size: 247 B |
Binary file not shown.
|
After Width: | Height: | Size: 438 B |
Binary file not shown.
|
After Width: | Height: | Size: 832 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 241 B |
Binary file not shown.
|
After Width: | Height: | Size: 781 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 984 B |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 781 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 360 B |
Binary file not shown.
|
After Width: | Height: | Size: 360 B |
Binary file not shown.
|
After Width: | Height: | Size: 754 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 303 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,32 @@
|
||||||
|
:root {
|
||||||
|
--clr-body-bg: #1f0033;
|
||||||
|
--img-body-bg: none;
|
||||||
|
--clr-body-txt: #fceaff;
|
||||||
|
--clr-content-bg: #101010;
|
||||||
|
|
||||||
|
--clr-top-btn-bg: #fd60e1;
|
||||||
|
--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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
:root {
|
||||||
|
--clr-body-bg: #e4e3e3;
|
||||||
|
--clr-body-txt: #141414;
|
||||||
|
--clr-content-bg: #ffffff;
|
||||||
|
|
||||||
|
--clr-top-btn-bg: #552190;
|
||||||
|
--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-cw-hover: rgb(250, 229, 229);
|
||||||
|
|
||||||
|
--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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--clr-body-bg: #141414;
|
||||||
|
--clr-body-txt: #fff;
|
||||||
|
--clr-content-bg: #242424;
|
||||||
|
|
||||||
|
--clr-top-btn-bg: #552190;
|
||||||
|
|
||||||
|
--clr-main-heading: #daaced;
|
||||||
|
--clr-sub-heading: #fff;
|
||||||
|
--clr-title-border: #9964de;
|
||||||
|
--clr-bold-txt: #ff9869;
|
||||||
|
--clr-link: #ce97ff;
|
||||||
|
--clr-link-hover: #b366f7;
|
||||||
|
--clr-quote-bg: #141414;
|
||||||
|
--clr-quote-border: #f3f2f2;
|
||||||
|
|
||||||
|
--clr-navbar-bg: #3a0873;
|
||||||
|
--clr-main-footer-bg: #3a0873;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__top-bar,
|
||||||
|
.footer,
|
||||||
|
.footer a { color: var(--clr-navbar-link); }
|
||||||
|
|
||||||
|
.footer a:focus { outline-color: var(--clr-navbar-link); }
|
||||||
|
|
@ -0,0 +1,225 @@
|
||||||
|
/* Text Box */
|
||||||
|
.text-box {
|
||||||
|
background: var(--clr-quote-bg);
|
||||||
|
border: 0.1em solid var(--clr-main-heading);
|
||||||
|
padding: 0.8em;
|
||||||
|
margin: 1em 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline Navigation */
|
||||||
|
.inline-nav {
|
||||||
|
--inline-nav-gap: 0.5em;
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25em var(--inline-nav-gap);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-nav li:not(:last-child)::after {
|
||||||
|
content: '•';
|
||||||
|
padding-left: var(--inline-nav-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mod Entry */
|
||||||
|
.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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Skip to content button */
|
||||||
|
.skip-btn a {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
left: 0;
|
||||||
|
top: -1000px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: top 0.5s ease;
|
||||||
|
background: var(--clr-content-bg);
|
||||||
|
font-size: 1.25rem;
|
||||||
|
z-index: 1000;
|
||||||
|
padding: 0.3em 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-btn a:focus {
|
||||||
|
top: 0;
|
||||||
|
transition: top 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Link button */
|
||||||
|
.link-btn--wrapper {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-btn {
|
||||||
|
--btn-right-padding: 0.8em;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
border: 0.1em solid var(--clr-link-btn-bg);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
padding: 0.4em var(--btn-right-padding);
|
||||||
|
background: var(--clr-link-btn-bg);
|
||||||
|
color: var(--clr-link-btn-txt);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-btn,
|
||||||
|
.link-btn:hover,
|
||||||
|
.link-btn:visited { text-decoration: none; }
|
||||||
|
|
||||||
|
.link-btn:hover {
|
||||||
|
background: var(--clr-link-btn-hover);
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-btn:focus {
|
||||||
|
outline: 0.15em solid var(--clr-link-btn-txt);
|
||||||
|
outline-offset: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.link-btn[href^="http"]:not([href*="leilukin.com"]) { padding-right: calc(var(--btn-right-padding) + var(--sz-external-link)); }
|
||||||
|
|
||||||
|
/* Content Accordion */
|
||||||
|
* + .content-accordion { margin-top: var(--sz-paragraph-margin); }
|
||||||
|
.content-accordion { padding: 0.5em 0; }
|
||||||
|
.content-accordion__summary { font-weight: 700; }
|
||||||
|
.content-accordion__content { padding: 0.5em 1em; }
|
||||||
|
.content-accordion__content p + p { margin-top: 1em; }
|
||||||
|
|
||||||
|
/* Content warning accordion */
|
||||||
|
* + .contnet-warning { margin-top: var(--sz-paragraph-margin); }
|
||||||
|
|
||||||
|
.contnet-warning {
|
||||||
|
border: 0.1em solid var(--clr-title-border);
|
||||||
|
border-radius: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contnet-warning__warning {
|
||||||
|
padding: 0.8em;
|
||||||
|
--stripe-color: var(--clr-quote-bg);
|
||||||
|
background-image: repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
transparent,
|
||||||
|
transparent 0.5em,
|
||||||
|
var(--stripe-color) 0.5em,
|
||||||
|
var(--stripe-color) 1em
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contnet-warning__warning:hover,
|
||||||
|
.contnet-warning__warning:focus { --stripe-color: var(--clr-cw-hover); }
|
||||||
|
|
||||||
|
.contnet-warning__content { padding: 1em; }
|
||||||
|
|
||||||
|
/* Adoptables wrapper */
|
||||||
|
.adoptables {
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 0.5em;
|
||||||
|
overflow-x: clip;
|
||||||
|
overflow-clip-margin: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p + .adoptables { margin-top: 1em; }
|
||||||
|
|
||||||
|
/* Web button lists */
|
||||||
|
.web-btn-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5em;
|
||||||
|
align-items: center;
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow-x: clip;
|
||||||
|
overflow-clip-margin: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabs */
|
||||||
|
.tabwrap section { display: none; }
|
||||||
|
|
||||||
|
.tabwrap section:target,
|
||||||
|
.tabwrap section:has(*:target) { display: block; }
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab__btn {
|
||||||
|
display: inline-block;
|
||||||
|
color: var(--clr-code-bg);
|
||||||
|
background-color: var(--clr-title-border);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.4em 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab__btn:hover { background-color: #d5c2d6; }
|
||||||
|
|
||||||
|
.tab__btn:focus {
|
||||||
|
outline: 0.2em solid var(--clr-title-border);
|
||||||
|
outline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Web ring */
|
||||||
|
.webring {
|
||||||
|
border: 0.08em outset;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webring__name {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.2em 0.5em;
|
||||||
|
border: 0.08em solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webring__links {
|
||||||
|
list-style-type: "";
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 !important;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webring__link {
|
||||||
|
flex: 1;
|
||||||
|
border: 0.08em solid;
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove external link icon from Website Carbon badge */
|
||||||
|
#wcb_a::after { all: revert; }
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
/* MAIN CONTENT */
|
||||||
|
content-wrapper,
|
||||||
|
.content--divided { display: grid; }
|
||||||
|
|
||||||
|
content-wrapper,
|
||||||
|
.content--divided { gap: 1rem; }
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 { margin-top: 2em; }
|
||||||
|
|
||||||
|
.content > * + :not([class]),
|
||||||
|
.content__section > * + :not([class]) { margin-top: var(--sz-paragraph-margin); }
|
||||||
|
|
||||||
|
.content ul:not([class]), .content ol:not([class]) {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--sz-content-list-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content ul ul, .content ol ol,
|
||||||
|
.content ul ol, .content ol ul { margin-top: var(--sz-content-list-gap); }
|
||||||
|
|
||||||
|
.sidebar--sticky {
|
||||||
|
position: sticky;
|
||||||
|
top: var(--sz-navbar-ht);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Desktop main content layout */
|
||||||
|
@media only screen and (min-width: 60rem) {
|
||||||
|
content-wrapper {
|
||||||
|
padding: 0 var(--sz-main-padding);
|
||||||
|
grid-template-areas: 'leftbar content rightbar';
|
||||||
|
grid-template-columns: minmax(0, 18vw) minmax(min(60ch, 40vw), 2.5fr) minmax(0, 18vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content { grid-area: content; }
|
||||||
|
.left-sidebar { grid-area: leftbar; }
|
||||||
|
.right-sidebar { grid-area: rightbar; }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
/* GENERAL STYLES */
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
font-family: var(--ff-default), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
color: var(--clr-body-txt);
|
||||||
|
background-color: var(--clr-body-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
font-size: var(--fs-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: var(--clr-main-heading);
|
||||||
|
font-size: var(--fs-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(--fs-h2); }
|
||||||
|
h3, .h3 { font-size: var(--fs-h3); }
|
||||||
|
|
||||||
|
h2:has(+ *[class]:not(.heading-anchor)), .h2:has(+ *[class]),
|
||||||
|
h3:has(+ *[class]:not(.heading-anchor)), .h3:has(+ *[class]) { margin-bottom: 0.5em; }
|
||||||
|
|
||||||
|
h4, .h4 { font-size: var(--fs-h4); }
|
||||||
|
|
||||||
|
strong { color: var(--clr-bold-txt); }
|
||||||
|
|
||||||
|
:focus { outline: 0.15em solid currentColor; }
|
||||||
|
|
||||||
|
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:hover img, a:focus img { outline: 0.2em solid currentColor; }
|
||||||
|
|
||||||
|
a[href^="http"]:not([href*="leilukin.com"]):not(:has(img, svg, picture)),
|
||||||
|
.external-link { padding-right: var(--sz-external-link); }
|
||||||
|
|
||||||
|
a[href^="http"]:not([href*="leilukin.com"]):not(:has(img, svg, picture))::after,
|
||||||
|
.external-link::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
margin-left: 0.3em;
|
||||||
|
background-color: currentColor;
|
||||||
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
mask-size: 90%;
|
||||||
|
transform: translateY(0.25em);
|
||||||
|
}
|
||||||
|
|
||||||
|
: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; }
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: var(--ff-monospace), ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre) > code { padding: 0.125em 0.25em; }
|
||||||
|
:not(pre) > code,
|
||||||
|
pre { background-color: var(--clr-code-bg); }
|
||||||
|
|
||||||
|
pre {
|
||||||
|
border: 0.1em solid var(--clr-code-border);
|
||||||
|
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: 700; }
|
||||||
|
dd {grid-column-start: 2; }
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
/* ------------------- */
|
||||||
|
/* 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-cw-hover: rgb(58, 0, 0);
|
||||||
|
|
||||||
|
--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-default: 'Lexend';
|
||||||
|
--ff-monospace: 'Inter One Mono';
|
||||||
|
|
||||||
|
--fs-main: 1.2rem;
|
||||||
|
--fs-h1: clamp(2rem, 1rem + 5vw, 3rem);
|
||||||
|
--fs-h2: clamp(1.55rem, 1rem + 3vw, 2.15rem);
|
||||||
|
--fs-h3: clamp(1.55rem, 1rem + 3vw, 1.8rem);
|
||||||
|
--fs-h4: clamp(1.4rem, 1rem + 3vw, 1.6rem);
|
||||||
|
|
||||||
|
--sz-paragraph-margin: 1.15em;
|
||||||
|
--sz-main-padding: clamp(1rem, 5%, 4rem);
|
||||||
|
--sz-navbar-ht: 4rem;
|
||||||
|
--sz-external-link: 1.25em;
|
||||||
|
--sz-content-list-gap: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------- */
|
||||||
|
/* 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-type: ""; }
|
||||||
|
|
||||||
|
/* 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; }
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
/* ------------------- */
|
||||||
|
/* Custom Properties */
|
||||||
|
/* ------------------- */
|
||||||
|
:root {
|
||||||
|
--clr-body-bg: #08031A;
|
||||||
|
--clr-body-txt: #fceaff;
|
||||||
|
--clr-h1: #BA6FE8;
|
||||||
|
--clr-link-btn-bg: #7A37A3;
|
||||||
|
--clr-link-btn-hover: #BA6FE8;
|
||||||
|
|
||||||
|
--ff-default: 'Lexend';
|
||||||
|
|
||||||
|
--fs-h1: clamp(2rem, 1.5rem + 5vw, 3.5rem);
|
||||||
|
--fs-p: 1.25rem;
|
||||||
|
--fs-link-btn: clamp(1.55rem, 1rem + 3vw, 2.15rem);
|
||||||
|
|
||||||
|
--fw-reg: 400;
|
||||||
|
--fw-link-btn: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------- */
|
||||||
|
/* 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-type: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
color: var(--clr-body-txt);
|
||||||
|
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: var(--fs-p); }
|
||||||
|
|
||||||
|
.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.4em;
|
||||||
|
padding: 0.4em 0.75em;
|
||||||
|
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.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index__link:focus {
|
||||||
|
outline: 0.1em solid var(--clr-body-txt);
|
||||||
|
outline-offset: -0.15em;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
/* HEADING WRAPPER AND ANCHOR */
|
||||||
|
.heading-wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.3em;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
* + .heading-wrapper { margin-top: 1.8em; }
|
||||||
|
|
||||||
|
.heading-anchor {
|
||||||
|
order: -1;
|
||||||
|
text-underline-offset: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-anchor:focus {
|
||||||
|
outline: 0.13em solid currentColor;
|
||||||
|
outline-offset: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
.footnote-ref a:target { scroll-margin-block: calc(var(--sz-navbar-ht) + 5ex); }
|
||||||
|
|
||||||
|
.footnotes {
|
||||||
|
margin-top: 3em;
|
||||||
|
border-top: 0.15em solid var(--clr-title-border);
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnotes-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnotes-list :target {
|
||||||
|
background-color: var(--clr-quote-bg);
|
||||||
|
outline: 0.1em dashed var(--clr-title-border);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,207 @@
|
||||||
|
/* 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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flag-disability {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='651.83' height='300' viewBox='-90.33 0 651.83 300'%3E%3Cpath fill='%233BB07D' stroke='%233BB07D' stroke-miterlimit='10' stroke-width='.351' d='M561.5 300 162.902.664h-50.634L510.867 300z'/%3E%3Cpath fill='%237BC2E0' stroke='%237BC2E0' stroke-miterlimit='10' stroke-width='.351' d='M510.711 300 112.113.664H61.478L460.078 300z'/%3E%3Cpath fill='%23E8E8E8' stroke='%23E8E8E8' stroke-miterlimit='10' stroke-width='.351' d='M460.077 300 61.478.664H8.094L406.693 300z'/%3E%3Cpath fill='%23EEDE77' stroke='%23EEDE77' stroke-miterlimit='10' stroke-width='.351' d='M406.692 300 8.095.664h-49.111L357.584 300z'/%3E%3Cpath fill='%23CF7280' stroke='%23CF7280' stroke-miterlimit='10' stroke-width='.351' d='M357.378 300-41.22.664h-49.11L308.27 300z'/%3E%3C/svg%3E");
|
||||||
|
background-color: #595959;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: auto 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
/* ARIA Tooltips by Scott O'Hara: https://github.com/scottaohara/a11y_tooltips */
|
||||||
|
|
||||||
|
[data-tooltip] {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip-block] { display: block; }
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
font-size: .825rem;
|
||||||
|
left: 0;
|
||||||
|
min-width: 20ch;
|
||||||
|
max-width: 44ch;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-up .tooltip {
|
||||||
|
bottom: 100%;
|
||||||
|
top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-right .tooltip {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip__content {
|
||||||
|
background-color: var(--clr-quote-bg);
|
||||||
|
border: 0.15em solid var(--clr-main-heading);
|
||||||
|
display: inline-block;
|
||||||
|
opacity: 0;
|
||||||
|
padding: .625em;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip__content > * { margin: .5em 0; }
|
||||||
|
.tooltip__content :last-child { margin-bottom: 0; }
|
||||||
|
.tooltip__content :first-child { margin-top: 0; }
|
||||||
|
|
||||||
|
.tooltip--show .tooltip__content {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
transition: opacity .1s ease-in;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue