665 lines
24 KiB
HTML
665 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" dir="ltr" id="page-top">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
|
||
|
||
<meta property="og:title" content="Anti-Harry Potter and Anti-J. K. Rowling Masterlist | Articles">
|
||
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="My masterlist of criticisms of the Harry Potter series and J. K. Rowling.">
|
||
<meta name="generator" content="Eleventy v2.0.1">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://leilukin.neocities.org/articles/anti-harry-potter-jk-rowling-masterlist/">
|
||
<meta property="og:site_name" content="Leilukin's Hub">
|
||
<meta property="og:locale" content="en_MY">
|
||
<meta property="og:description" content="My masterlist of criticisms of the Harry Potter series and J. K. Rowling.">
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:url" content="https://leilukin.neocities.org/articles/anti-harry-potter-jk-rowling-masterlist/">
|
||
<meta name="twitter:description" content="My masterlist of criticisms of the Harry Potter series and J. K. Rowling.">
|
||
<link rel="canonical" href="https://leilukin.neocities.org/articles/anti-harry-potter-jk-rowling-masterlist/">
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/assets/fonts/lexend/lexend.css">
|
||
|
||
|
||
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
||
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
||
|
||
|
||
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||
|
||
|
||
<title>
|
||
Anti-Harry Potter and Anti-J. K. Rowling Masterlist | Articles | Leilukin's Hub
|
||
</title>
|
||
</head>
|
||
<body>
|
||
<header class="hero">
|
||
<div class="hero__top-bar hidden"></div>
|
||
<div class="hero__img">
|
||
|
||
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
||
|
||
</div>
|
||
</header>
|
||
|
||
<style>
|
||
.hero {
|
||
width: 100%;
|
||
background-color: var(--clr-hero-bg);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero__top-bar {
|
||
background-color: var(--clr-navbar-bg);
|
||
width: 100%;
|
||
padding: 0.5em 0.7em;
|
||
}
|
||
|
||
.hero__img {
|
||
display: grid;
|
||
place-content: center;
|
||
}
|
||
|
||
.hero img {
|
||
object-fit: contain;
|
||
overflow: hidden;
|
||
max-height: 16rem;
|
||
|
||
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
||
|
||
}
|
||
</style>
|
||
|
||
<script defer>
|
||
const hero = document.querySelector(".hero");
|
||
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
||
const headerImgEl = document.querySelector(".hero__img");
|
||
|
||
|
||
const todayEvent = getTodayEvent();
|
||
|
||
if (todayEvent) {
|
||
heroTopBarEl.classList.remove('hidden');
|
||
heroTopBarEl.innerHTML = todayEvent.blurb;
|
||
|
||
if (todayEvent.class) {
|
||
headerImgEl.classList.add(todayEvent.class);
|
||
}
|
||
}
|
||
|
||
function getTodayEvent() {
|
||
const date = new Date();
|
||
const month = date.getMonth() + 1;
|
||
const day = date.getDate();
|
||
const year = date.getFullYear();
|
||
const weekOfMonth = Math.ceil(day / 7);
|
||
|
||
const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
|
||
const siteAnniversary = year - leilukinsHubLaunchDate;
|
||
|
||
if (month === 3 && day === 1)
|
||
return {
|
||
blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day">Zero Discrimination Day</a>`,
|
||
class: "flag-progress-intersex",
|
||
};
|
||
else if (month === 3 && day === 8)
|
||
return {
|
||
blurb: `Today is <a href="https://www.internationalwomensday.com/">International Women's Day}</a>`,
|
||
class: "symbol-venus",
|
||
};
|
||
else if (month === 3 && day === 31)
|
||
return {
|
||
blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html">Trans Day of Visibility</a>`,
|
||
class: "flag-trans",
|
||
};
|
||
else if (month === 4 && day === 6)
|
||
return {
|
||
blurb: `Today is <a href="https://internationalasexualityday.org/en">International Asexuality Day</a>`,
|
||
class: "flag-ace",
|
||
};
|
||
else if (month === 4 && day === 26)
|
||
return {
|
||
blurb: `Today is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Day</a>`,
|
||
class: "flag-lesbian",
|
||
};
|
||
else if (month === 4 && weekOfMonth === 4)
|
||
return {
|
||
blurb: `This week is <a href="https://www.lesbianvisibilityweek.com">Lesbian Visibility Week</a>`,
|
||
class: "flag-lesbian",
|
||
};
|
||
else if (month === 5 && day === 17)
|
||
return {
|
||
blurb: `Today is <a href="https://may17.org">International Day Against Homophobia, Biphobia and Transphobia</a>`,
|
||
class: "flag-progress",
|
||
};
|
||
else if (month === 5 && day === 19)
|
||
return {
|
||
blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/">Agender Pride Day</a>`,
|
||
class: "flag-agender",
|
||
};
|
||
else if (month === 5 && day === 25)
|
||
return {
|
||
blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday">Pansexual and Panromantic Awareness and Visibility Day</a>`,
|
||
class: "flag-pan",
|
||
};
|
||
else if (month === 6)
|
||
return {
|
||
blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/">Pride Month</a>!`,
|
||
class: "flag-progress-intersex",
|
||
};
|
||
else if (month === 7 && day === 14)
|
||
return {
|
||
blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html">Non-Binary People's Day</a>`,
|
||
class: "flag-non-binary",
|
||
};
|
||
else if (month === 7 && day === 28)
|
||
return {
|
||
blurb: `Today is Leilukin's Birthday`
|
||
};
|
||
else if (month === 8 && day === 25)
|
||
return {
|
||
blurb: `Today is <a href="https://aromanticspectrumday.net/">Aromantic Spectrum Visibility Day</a>`,
|
||
class: "flag-aro",
|
||
};
|
||
else if (month === 9 && day === 11)
|
||
return {
|
||
blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin's Hub`
|
||
};
|
||
else if (month === 9 && day === 23)
|
||
return {
|
||
blurb: `Today is <a href="https://bivisibilityday.com/about">Bi Visibility Day</a>`,
|
||
class: "flag-bi",
|
||
};
|
||
else if (month === 10 && day === 8)
|
||
return {
|
||
blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2">International Lesbian Day</a>`,
|
||
class: "flag-lesbian",
|
||
};
|
||
else if (month === 10 && day === 11)
|
||
return {
|
||
blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day">National Coming Out Day</a>`,
|
||
class: "flag-rainbow",
|
||
};
|
||
else if (month === 10 && day === 17)
|
||
return {
|
||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week">Genderfluid Visibility Week</a>`,
|
||
class: "flag-genderfluid",
|
||
};
|
||
else if (month === 10 && day === 24)
|
||
return {
|
||
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week">Ace Week</a>`,
|
||
class: "flag-ace",
|
||
};
|
||
else if (month === 10 && day === 26)
|
||
return {
|
||
blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day">Intersex Awareness Day</a>`,
|
||
class: "flag-intersex",
|
||
};
|
||
else if (month === 11 && day === 13)
|
||
return {
|
||
blurb: `Today is the start of <a href="https://glaad.org/transweek/">Transgender Awareness Week</a>`,
|
||
class: "flag-trans",
|
||
};
|
||
else
|
||
return null;
|
||
}
|
||
|
||
</script>
|
||
<nav class="navbar">
|
||
<button class="navbar__toggle" aria-label="Navigation menu toggle">
|
||
<i class="fa-solid fa-bars"></i>
|
||
<h2 class="navbar__title">Navigation</h2>
|
||
</button>
|
||
<ul class="navbar__links">
|
||
|
||
|
||
|
||
<li>
|
||
<a href="/">Home</a>
|
||
</li>
|
||
<li>
|
||
<a href="/about/">About</a>
|
||
</li>
|
||
<li>
|
||
<a href="/now/">Now</a>
|
||
</li>
|
||
<li>
|
||
<a href="/blog/">Blog</a>
|
||
</li>
|
||
<li>
|
||
<a href="/articles/">Articles</a>
|
||
</li>
|
||
<li>
|
||
<a href="/projects/">Projects</a>
|
||
</li>
|
||
<li>
|
||
<a href="/shrines/">Shrines</a>
|
||
</li>
|
||
<li>
|
||
<a href="/links/">Links</a>
|
||
</li>
|
||
<li>
|
||
<a href="/guestbook/">Guestbook</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
<style>
|
||
.navbar {
|
||
background: var(--clr-navbar-bg);
|
||
padding: 0.6em 1em;
|
||
width: 100%;
|
||
z-index: 999;
|
||
position: sticky;
|
||
top: 0;
|
||
}
|
||
|
||
.navbar__toggle,
|
||
.navbar__title {
|
||
color: var(--clr-navbar-link);
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.navbar__toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5em;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
background-color: inherit;
|
||
}
|
||
|
||
.navbar__toggle:focus,
|
||
.navbar a:focus {
|
||
outline: 0.15em solid var(--clr-navbar-link);
|
||
}
|
||
|
||
.navbar a {
|
||
color: var(--clr-navbar-link);
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.navbar a:hover {
|
||
color: var(--clr-link-hover);
|
||
}
|
||
|
||
.navbar a:focus {
|
||
outline-offset: 0.3em;
|
||
}
|
||
|
||
.navbar__links {
|
||
list-style: none;
|
||
display: none;
|
||
gap: 1em;
|
||
padding: 0.5em 1.8em;
|
||
overflow: auto;
|
||
}
|
||
|
||
.navbar__links--show {
|
||
display: grid;
|
||
}
|
||
|
||
/* Tablet screen size */
|
||
@media only screen and (min-width: 43.75rem) {
|
||
.navbar {
|
||
padding: 0 0.6em;
|
||
}
|
||
|
||
.navbar__toggle {
|
||
display: none;
|
||
}
|
||
|
||
.navbar__links {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
gap: 0.5em;
|
||
flex-wrap: wrap;
|
||
padding: 0;
|
||
overflow: unset;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script defer>
|
||
const navbarToggle = document.querySelector('.navbar__toggle');
|
||
const navbarLinks = document.querySelector(".navbar__links");
|
||
|
||
navbarToggle.addEventListener('click', () => {
|
||
navbarLinks.classList.toggle("navbar__links--show");
|
||
});
|
||
</script>
|
||
|
||
<main>
|
||
<header class="main__header">
|
||
|
||
<ul class="breadcrumbs">
|
||
|
||
<li>
|
||
<a href="/articles/">Articles</a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
<h1>Anti-Harry Potter and Anti-J. K. Rowling Masterlist</h1>
|
||
<div class="article__info">
|
||
<p>Posted on 19 March 2023 by Leilukin
|
||
|
||
• Last updated on 21 April 2024</p>
|
||
|
||
|
||
<p>Categories:
|
||
|
||
<a href="/categories/anti-harry-potter">anti harry potter</a>,
|
||
|
||
<a href="/categories/anti-jk-rowling">anti jk rowling</a>
|
||
|
||
</p>
|
||
|
||
<p>🍿 3 min. read</p>
|
||
</div>
|
||
|
||
</header>
|
||
|
||
<div class="content__wrapper">
|
||
|
||
<aside class="left-sidebar">
|
||
<details class="toc__wrapper sidebar--sticky">
|
||
<summary class="toc__heading">
|
||
On This Page
|
||
</summary>
|
||
<nav class="toc">
|
||
<ol>
|
||
|
||
<li><a href="#articles">Articles</a>
|
||
</li>
|
||
|
||
<li><a href="#videos">Videos</a>
|
||
</li>
|
||
|
||
<li><a href="#podcasts">Podcasts</a>
|
||
</li>
|
||
</ol>
|
||
</nav>
|
||
</details>
|
||
</aside>
|
||
|
||
<style>
|
||
.toc__wrapper {
|
||
max-height: 89vh;
|
||
overflow: auto;
|
||
background-color: var(--clr-content-bg);
|
||
padding: 1rem 1.3rem;
|
||
}
|
||
|
||
.toc__heading {
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
color: var(--clr-sub-heading);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.toc ol,
|
||
.toc ol ol {
|
||
display: grid;
|
||
gap: 0.3em;
|
||
}
|
||
|
||
.toc ol {
|
||
border-top: 0.1em solid var(--clr-title-border);
|
||
padding-left: 1.3em;
|
||
padding-top: 1em;
|
||
}
|
||
|
||
.toc ol ol {
|
||
border-top: none;
|
||
list-style-type: disc;
|
||
padding-left: 1em;
|
||
padding-top: 0.3em;
|
||
}
|
||
|
||
.toc ol a {
|
||
font-size: 1.1rem;
|
||
padding-left: 0.3em;
|
||
}
|
||
|
||
.toc ol ol a {
|
||
padding: 0;
|
||
font-size: 1rem;
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
|
||
<article class="article">
|
||
<figure>
|
||
<img src="/assets/banners/harry-potter-free-site.png" alt="An anime girl crossing arms with a sidelong look and a Harry Potter-free message">
|
||
<figcaption>
|
||
This site is Harry Potter free. Lookin [<i>sic</i>] for it? Leave.
|
||
</figcaption>
|
||
</figure>
|
||
<p class="center-text">(Credit to Tumblr user <a href="https://comradesaucegay.tumblr.com/post/621403039459426304">comradesaucegay</a> for this Harry Potter-free website banner)</p>
|
||
<p>Like many millennials, I grew up with the <cite>Harry Potter</cite> series and was a major fan of the series. I had read the original 7 books and watched their film adaptations. The series was a passion of mine during my early- to mid-teen years. While the Harry Potter novels were far from the first books I read, they were the first fantasy novels I read, and the series’ concept of a magical world set in a contemporary setting fascinated teenage me.</p>
|
||
<p>However, even during my <cite>Harry Potter</cite> fixation years, there were things from the series that bothered me, from the idea of house elves being a slave race that naturally love being slaves, to Snape’s unconvincing “redemption” arc. As I got older and became more aware of social issues, I started to notice more problems with the series. In addition, reading more books has also made me realise that even on a technical writing level, the Harry Potter series was mediocre at best. As a result, I had stopped becoming a Harry Potter fan even before J. K. Rowling’s transphobia got mainstream attention.</p>
|
||
<p>Unfortunately, many adults with nostalgia goggles still refuse to let go of <cite>Harry Potter</cite>, and they believe <cite>Harry Potter</cite> can be separated or “reclaimed” by J. K. Rowling, despite how much Rowling’s worldview and prejudice are inextricably linked to her writing.</p>
|
||
<p>Therefore, I am compiling this masterlist by curating various materials that are critical of the <cite>Harry Potter</cite> series and J. K. Rowling. Items are ordered in chronological order. This is far from a comprehensive list of all the pieces that criticise <cite>Harry Potter</cite> and Rowling; this list is my curated list of ones that I have read, watched or listened to, and I personally endorse.</p>
|
||
<div class="heading-wrapper h2">
|
||
<h2 id="articles">Articles</h2>
|
||
<a class="heading-anchor" href="#articles" aria-labelledby="articles"><span hidden>#</span></a></div>
|
||
<ul class="item-list">
|
||
<li><a href="https://alinautrata.medium.com/all-the-things-that-are-fucked-up-about-harry-potter-58267e1bf3ee">Harry Potter and the Universal Declaration of Human Rights</a> by Alina Utrata (28 October 2016)</li>
|
||
<li><a href="https://katymontgomerie.medium.com/addressing-the-claims-in-jk-rowlings-justification-for-transphobia-7b6f761e8f8f">Addressing The Claims In JK Rowling’s Justification For Transphobia</a> by Katy Montgomerie (16 June 2020)</li>
|
||
<li><a href="https://www.themarysue.com/is-hogwarts-legacy-anti-semitic-hogwarts-legacy-anti-semitic-allegations-explained/">The Antisemitism of ‘Harry Potter’ Returns in ‘Hogwarts Legacy’</a> by Jack Doyle (8 February 2023)</li>
|
||
<li><a href="https://www.polygon.com/reviews/23603142/hogwarts-legacy-review-harry-potter-jk-rowling-transphobic-ps5-pc-xbox">Hogwarts Legacy wants to make everyone happy, but Harry Potter gets in the way</a> by by Gita Jackson (17 February 2023)</li>
|
||
<li><a href="https://www.vox.com/culture/23622610/jk-rowling-transphobic-statements-timeline-history-controversy">Is J.K. Rowling transphobic? Let’s let her speak for herself.</a> by Aja Romano (3 March 2023)</li>
|
||
</ul>
|
||
<div class="heading-wrapper h2">
|
||
<h2 id="videos">Videos</h2>
|
||
<a class="heading-anchor" href="#videos" aria-labelledby="videos"><span hidden>#</span></a></div>
|
||
<ul class="item-list">
|
||
<li><a href="https://www.youtube.com/watch?v=wPwWb9z3XSY">Harry Potter is GARBAGE, and Here's Why</a> by satenmadpun (25 August 2020)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=4AziZgoi3q0">We need to talk about Dudley Dursley- Harry Potter and Fatphobia</a> by Ok2BeFat (30 May 2021)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=-1iaJWSwUZs">Harry Potter</a> by Shaun (4 March 2023)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=Ou_xvXJJk7k">JK Rowling's New Friends</a> by Shaun (14 October 2022)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=UBftW7FzOVI">The Consumerist Dystopia of Harry Potter</a> by verilybitchie (21 January 2023)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=_GBUArD51KY">Explaining JK Rowling’s Transphobia</a> by Jessie Gender (27 January 2023)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=K1mHwn6eUUk">Hogwarts Legacy and the Politics of Potter</a> by Wisecrack (11 February 2023)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=uNKyQVsgKLg">Hogwarts: A Legacy Of Hate (The Jimquisition)</a> by James Stephanie Sterling (13 February 2023)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=9ncYTEY7aVk">The ALLEGED Witch Trials of J.K. Rowling (What The Megan Phelps Podcast Won't Tell You)</a> by Caelan Conrad (18 March 2023)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=7xJF4XYarzI">The Harry Potter Villains Were Trans?</a> by Brigitte Empire (3 April 2023)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=2pggtSI_95A">Maybe The Wizard Game Just Wasn't Very Good (The Jimquisition)</a> by James Stephanie Sterling (20 November 2023)</li>
|
||
<li><a href="https://www.youtube.com/watch?v=whJJGqVtkEk">J.K. Rowling & Holocaust Denial</a> by Caelan Conrad (16 March 2024)</li>
|
||
</ul>
|
||
<div class="heading-wrapper h2">
|
||
<h2 id="podcasts">Podcasts</h2>
|
||
<a class="heading-anchor" href="#podcasts" aria-labelledby="podcasts"><span hidden>#</span></a></div>
|
||
<ul>
|
||
<li><a href="https://soundcloud.com/shriekingshack">The Shrieking Shack</a> — A book reading podcast hosted by Xeecee and Liz. Originally a Harry Potter reread podcast made by and for lapsed fans that goes through every chapter of the Harry Potter books and their film adaptations and analyses the writing and politics of the series and J. K. Rowling.</li>
|
||
</ul>
|
||
|
||
</article>
|
||
|
||
|
||
|
||
<aside class="right-sidebar">
|
||
<nav class="content__nav sidebar--sticky">
|
||
<h2 class="content__nav--title">My Contents</h2>
|
||
<ul class="content__nav--links">
|
||
|
||
<li><a href="/archive/">Content Archive</a></li>
|
||
|
||
<li><a href="/categories/">Content Categories</a></li>
|
||
|
||
<li><a href="/articles/">Articles</a></li>
|
||
|
||
<li><a href="/blog/posts/">Blog Archive</a></li>
|
||
|
||
<li><a href="/blog/">Blog Home</a></li>
|
||
|
||
</ul>
|
||
</nav>
|
||
</aside>
|
||
|
||
<style>
|
||
.content__nav {
|
||
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||
background-color: var(--clr-content-bg);
|
||
}
|
||
|
||
.content__nav--title {
|
||
font-size: 1.7rem;
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<style>
|
||
.breadcrumbs {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 0.7em 0;
|
||
display: flex;
|
||
gap: 0.5em;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.breadcrumbs li::after {
|
||
content: '➔';
|
||
padding-left: 0.3em;
|
||
}
|
||
</style>
|
||
</main>
|
||
<footer class="footer">
|
||
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
||
|
||
|
||
<ul class="footer__links">
|
||
<li><a
|
||
|
||
href="/sitemap/
|
||
">Site Map</a></li>
|
||
<li><a
|
||
|
||
href="/changelogs/"
|
||
>Changelogs</a></li>
|
||
<li><a href="/feed.xml">RSS</a></li>
|
||
</ul>
|
||
|
||
</footer>
|
||
|
||
<style>
|
||
.footer {
|
||
margin-top: auto;
|
||
width: 100%;
|
||
background: var(--clr-main-footer-bg);
|
||
padding: 1rem 1rem 3rem 1rem;
|
||
text-align: center;
|
||
display: grid;
|
||
}
|
||
|
||
.footer p {
|
||
padding: 0;
|
||
}
|
||
|
||
.footer__links {
|
||
justify-self: center;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
gap: 0.7em;
|
||
}
|
||
|
||
.footer__links li:not(:last-child)::after {
|
||
content: '|';
|
||
padding-left: 0.6em;
|
||
}
|
||
|
||
/* Screen sizes larger than mobile */
|
||
@media only screen and (min-width: 30rem) {
|
||
.footer {
|
||
padding: 1rem 1rem 2rem 1rem;
|
||
}
|
||
}
|
||
|
||
/* Tablet screen size */
|
||
@media only screen and (min-width: 43.75rem) {
|
||
.footer {
|
||
padding: 1rem;
|
||
}
|
||
}
|
||
</style>
|
||
<button class="top-btn hidden" aria-label="Scroll to top">
|
||
<i class="fa-solid fa-chevron-up"></i>
|
||
</button>
|
||
|
||
<style>
|
||
.top-btn {
|
||
position: fixed;
|
||
margin: 0;
|
||
padding: 0;
|
||
bottom: 0.5rem;
|
||
right: 0.5rem;
|
||
z-index: 999;
|
||
border: none;
|
||
background-color: var(--clr-top-btn-bg);
|
||
color: var(--clr-top-btn-txt);
|
||
border-radius: 50em;
|
||
width: 2rem;
|
||
aspect-ratio: 1 / 1;
|
||
}
|
||
|
||
.top-btn:focus {
|
||
outline: 0.25em solid var(--clr-top-btn-bg);
|
||
outline-offset: 0.15em;
|
||
}
|
||
</style>
|
||
|
||
<script defer>
|
||
const topButton = document.querySelector(".top-btn");
|
||
|
||
window.onscroll = () => {
|
||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||
topButton.classList.remove("hidden");
|
||
} else {
|
||
topButton.classList.add("hidden");
|
||
}
|
||
}
|
||
|
||
topButton.addEventListener('click', () => {
|
||
window.scrollTo({
|
||
top: 0,
|
||
left: 0,
|
||
behavior: "smooth",
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |