573 lines
18 KiB
HTML
573 lines
18 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="Onboard the Dracula Daily Hype Train | Blog">
|
|
|
|
<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="I have signed up to join the Dracula Daily hype.">
|
|
<meta name="generator" content="Eleventy v2.0.1">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://leilukin.neocities.org/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/">
|
|
<meta property="og:site_name" content="Leilukin's Hub">
|
|
<meta property="og:locale" content="en_MY">
|
|
<meta property="og:description" content="I have signed up to join the Dracula Daily hype.">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:url" content="https://leilukin.neocities.org/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/">
|
|
<meta name="twitter:description" content="I have signed up to join the Dracula Daily hype.">
|
|
<link rel="canonical" href="https://leilukin.neocities.org/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/assets/css/main.css">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/assets/fonts/noto-sans/noto-sans.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>
|
|
Onboard the Dracula Daily Hype Train | Blog | 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 todayEvent = getTodayEvent();
|
|
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
|
const headerImgEl = document.querySelector(".hero__img");
|
|
|
|
|
|
if (todayEvent != "No event") {
|
|
heroTopBarEl.classList.remove('hidden');
|
|
|
|
if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") {
|
|
heroTopBarEl.innerHTML = getBlurbHtml(todayEvent);
|
|
} else {
|
|
headerImgEl.classList.add(getBanner(todayEvent));
|
|
heroTopBarEl.innerHTML = getBlurbHtml(todayEvent);
|
|
}
|
|
}
|
|
|
|
function getTodayEvent() {
|
|
const date = new Date();
|
|
const month = date.getMonth() + 1;
|
|
const day = date.getDate();
|
|
|
|
if (month == 3 && day == 1)
|
|
return "Zero Discrimination Day";
|
|
else if (month == 3 && day == 31)
|
|
return "Trans Day of Visibility";
|
|
else if (month == 4 && day == 6)
|
|
return "International Asexuality Day";
|
|
else if (month == 4 && day == 26)
|
|
return "Lesbian Visibility Day";
|
|
else if (month == 5 && day == 17)
|
|
return "IDAHOBIT";
|
|
else if (month == 5 && day == 19)
|
|
return "Agender Pride Day";
|
|
else if (month == 5 && day == 25)
|
|
return "Pansexual and Panromantic Awareness & Visibility Day";
|
|
else if (month == 6)
|
|
return "Pride Month";
|
|
else if (month == 7 && day == 14)
|
|
return "Non-Binary People's Day";
|
|
else if (month == 7 && day == 28)
|
|
return "Leilukin's Birthday";
|
|
else if (month == 9 && day == 11)
|
|
return "Leilukin's Hub Anniversary";
|
|
else if (month == 9 && day == 23)
|
|
return "Bi Visibility Day";
|
|
else if (month == 10 && day == 8)
|
|
return "International Lesbian Day";
|
|
else if (month == 10 && day == 11)
|
|
return "National Coming Out Day";
|
|
else if (month == 10 && day == 17)
|
|
return "Genderfluid Visibility Week";
|
|
else if (month == 10 && day == 24)
|
|
return "Ace Week";
|
|
else if (month == 10 && day == 26)
|
|
return "Intersex Awareness Day";
|
|
else
|
|
return "No event";
|
|
}
|
|
|
|
function getBanner(day) {
|
|
switch (day) {
|
|
case "Zero Discrimination Day":
|
|
return "flag-progress-intersex";
|
|
break;
|
|
case "Trans Day of Visibility":
|
|
return "flag-trans";
|
|
break;
|
|
case "International Asexuality Day":
|
|
return "flag-ace";
|
|
break;
|
|
case "Lesbian Visibility Day":
|
|
return "flag-lesbian";
|
|
break;
|
|
case "IDAHOBIT":
|
|
return "flag-progress";
|
|
break;
|
|
case "Agender Pride Day":
|
|
return "flag-agender";
|
|
break;
|
|
case "Pansexual and Panromantic Awareness & Visibility Day":
|
|
return "flag-pan";
|
|
break;
|
|
case "Pride Month":
|
|
return "flag-progress-intersex";
|
|
break;
|
|
case "Non-Binary People's Day":
|
|
return "flag-non-binary";
|
|
break;
|
|
case "Bi Visibility Day":
|
|
return "flag-bi";
|
|
break;
|
|
case "International Lesbian Day":
|
|
return "flag-lesbian";
|
|
break;
|
|
case "National Coming Out Day":
|
|
return "flag-rainbow";
|
|
break;
|
|
case "Genderfluid Visibility Week":
|
|
return "flag-genderfluid";
|
|
break;
|
|
case "Ace Week":
|
|
return "flag-ace";
|
|
break;
|
|
case "Intersex Awareness Day":
|
|
return "flag-intersex";
|
|
break;
|
|
default:
|
|
return "";
|
|
}
|
|
}
|
|
|
|
function getBlurbHtml(day) {
|
|
switch (day) {
|
|
case "Zero Discrimination Day":
|
|
return `
|
|
Today is <a href="https://www.unaids.org/en/zero-discrimination-day" target="_blank">Zero Discrimination Day</a>
|
|
`;
|
|
break;
|
|
case "Trans Day of Visibility":
|
|
return `
|
|
Today is <a href="https://www.manygendersonevoice.org/tdov.html" target="_blank">Trans Day of Visibility</a>
|
|
`;
|
|
break;
|
|
case "International Asexuality Day":
|
|
return `
|
|
Today is <a href="https://internationalasexualityday.org/en" target="_blank">International Asexuality Day</a>
|
|
`;
|
|
break;
|
|
case "Lesbian Visibility Day":
|
|
return `
|
|
Today is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Day</a>
|
|
`;
|
|
break;
|
|
case "IDAHOBIT":
|
|
return `
|
|
Today is <a href="https://may17.org" target="_blank">International Day Against Homophobia, Biphobia and Transphobia</a></span>
|
|
`;
|
|
break;
|
|
case "Agender Pride Day":
|
|
return `
|
|
Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/" target="_blank">Agender Pride Day</a></span>
|
|
`;
|
|
break;
|
|
case "Pansexual and Panromantic Awareness & Visibility Day":
|
|
return `
|
|
Today is <a href="https://genderedintelligence.co.uk/panvisibilityday" target="_blank">Pansexual and Panromantic Visibility Day</a>
|
|
`;
|
|
break;
|
|
case "Pride Month":
|
|
return `
|
|
Happy <a href="https://www.loc.gov/lgbt-pride-month/about/" target="_blank">Pride Month</a>!
|
|
`;
|
|
break;
|
|
case "Non-Binary People's Day":
|
|
return `
|
|
Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html" target="_blank">Non-Binary People's Day</a>
|
|
`;
|
|
break;
|
|
case "Leilukin's Birthday":
|
|
return `
|
|
Today is Leilukin's birthday
|
|
`;
|
|
break;
|
|
case "Leilukin's Hub Anniversary":
|
|
return `
|
|
Today is the anniversary of the launch of Leilukin's Hub
|
|
`;
|
|
break;
|
|
case "Bi Visibility Day":
|
|
return `
|
|
Today is <a href="https://bivisibilityday.com/about" target="_blank">Bi Visibility Day</a>
|
|
`;
|
|
break;
|
|
case "International Lesbian Day":
|
|
return `
|
|
Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2" target="_blank">International Lesbian Day</a>
|
|
`;
|
|
break;
|
|
case "National Coming Out Day":
|
|
return `
|
|
Today is <a href="https://www.hrc.org/resources/national-coming-out-day" target="_blank">National Coming Out Day</a>
|
|
`;
|
|
break;
|
|
case "Genderfluid Visibility Week":
|
|
return `
|
|
Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week" target="_blank">Genderfluid Visibility Week</a>
|
|
`;
|
|
break;
|
|
case "Ace Week":
|
|
return `
|
|
Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week" target="_blank">Ace Week</a>
|
|
`;
|
|
break;
|
|
case "Intersex Awareness Day":
|
|
return `
|
|
Today is <a href="https://interactadvocates.org/intersex-awareness-day" target="_blank">Intersex Awareness Day</a>
|
|
`;
|
|
break;
|
|
default:
|
|
return ``;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<nav class="navbar">
|
|
<ul class="nav__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="/links/">Links</a>
|
|
</li>
|
|
<li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
<style>
|
|
.navbar {
|
|
background: var(--clr-navbar-bg);
|
|
padding: 0 0.6rem;
|
|
width: 100%;
|
|
z-index: 999;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.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;
|
|
outline: 0.15em solid var(--clr-navbar-link);
|
|
}
|
|
|
|
.nav__menu {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
</style>
|
|
|
|
<main>
|
|
<header class="main__header">
|
|
|
|
<ul class="breadcrumbs">
|
|
|
|
<li>
|
|
<a href="/blog/">Blog</a>
|
|
</li>
|
|
<li>
|
|
<a href="/blog/posts/">Blog Archive</a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
|
|
<h1>Onboard the Dracula Daily Hype Train</h1>
|
|
<div class="article__info">
|
|
<p>Posted on 9 May 2023 by Leilukin
|
|
|
|
|
|
<p>Categories:
|
|
|
|
<a href="/categories/dracula-daily">dracula daily</a>
|
|
|
|
</p>
|
|
|
|
<p>🍿 1 min. read</p>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<div class="content__wrapper">
|
|
|
|
|
|
|
|
<article class="article">
|
|
|
|
<p><a href="https://draculadaily.com/">Dracula Daily</a>, the free subscription newsletter that sends Bram Stoker's 1897 novel Dracula to subscribers via email, became an internet sensation, especially on Tumblr. Some of my Tumblr mutuals were also on the hype train, though I missed it.</p>
|
|
<p>Fortunately, Dracula Daily returns in 2023, so I decided to sign up to subscribe to the newsletter and join the hype. This year, <a href="https://redracula.live/">Re: Dracula</a>, the audio drama podcast adaptation of Dracula, also debuts. Like Dracula Daily, Re: Dracula releases new entries in as close to real time as it happens, meaning you can now enjoy Dracula Daily in audio form as well, with excellent voice acting and sound design to enhance the experience.</p>
|
|
<p>Confession: This is actually my first time reading Dracula, so I am looking forward to this serialised way of reading the novel!</p>
|
|
|
|
<ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">Leilukin's Hub Now has a Blog!</a></li><li>Next Post: <a href="/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/">June 2023 Leilukin's Hub Layout Rewrite</a></li>
|
|
</ul>
|
|
|
|
<style>
|
|
.blog__post--nextprev {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
padding-top: 0.8em;
|
|
margin-top: 2.5em;
|
|
border-top: 0.1em solid var(--clr-title-border);
|
|
}
|
|
</style>
|
|
</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;
|
|
background: var(--clr-main-footer-bg);
|
|
padding: 0.8rem;
|
|
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;
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.footer {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</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> |