leilukin-site/_site/blog/posts/2023-05-09-onboard-the-drac.../index.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 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 currentYear = date.getFullYear();
        const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
        const leilukinsHubAnniversary = currentYear - leilukinsHubLaunchDate;

        if (month === 3 && day === 1)
            return {
                blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day" target="_blank">Zero Discrimination Day</a>`,
                class: "flag-progress-intersex",
            };
        else if (month === 3 && day === 8)
            return {
                blurb: `Today is <a href="https://www.internationalwomensday.com/" target="_blank">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" target="_blank">Trans Day of Visibility</a>`,
                class: "flag-trans",
            };
        else if (month === 4 && day === 6)
            return {
                blurb: `Today is <a href="https://internationalasexualityday.org/en" target="_blank">International Asexuality Day</a>`,
                class: "flag-ace",
            };
        else if (month === 4 && day === 26)
            return {
                blurb: `Today is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Day</a>`,
                class: "flag-lesbian",
            };
        else if (month === 5 && day === 17)
            return {
                blurb: `Today is <a href="https://may17.org" target="_blank">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/" target="_blank">Agender Pride Day</a>`,
                class: "flag-agender",
            };
        else if (month === 5 && day === 25)
            return {
                blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday" target="_blank">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/" target="_blank">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" target="_blank">Non-Binary People's Day</a>`,
                class: "flag-nonbinary",
            };
        else if (month === 7 && day === 28)
            return {
                blurb: `Today is Leilukin's Birthday`
            };
        else if (month === 9 && day === 11)
            return {
                blurb: `Today is the ${leilukinsHubAnniversary}-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" target="_blank">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" target="_blank">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" target="_blank">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" target="_blank">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" target="_blank">Ace Week</a>`,
                class: "flag-ace",
            };
        else if (month === 10 && day === 26)
            return {
                blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day" target="_blank">Intersex Awareness Day</a>`,
                class: "flag-intersex",
            };
        else
            return null;
    }

</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&#39;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&#39;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>
Make site output folder public 2024-04-20 10:10:34 +00:00			`<!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">`

Remove width and height setting from hero image 2024-04-20 12:00:02 +00:00			`<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">`
Make site output folder public 2024-04-20 10:10:34 +00:00
			`</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%;`
Adjust hero top bar paddings 2024-04-23 07:57:54 +00:00			`padding: 0.5em 0.7em;`
Make site output folder public 2024-04-20 10:10:34 +00:00			`}`

			`.hero__img {`
			`display: grid;`
			`place-content: center;`
			`}`

			`.hero img {`
Set max height of hero image to 16rem 2024-04-20 11:43:13 +00:00			`object-fit: contain;`
Make site output folder public 2024-04-20 10:10:34 +00:00			`overflow: hidden;`
Set max height of hero image to 16rem 2024-04-20 11:43:13 +00:00			`max-height: 16rem;`
Set hero image drop shadow only on the main hero template 2024-04-26 16:12:13 +00:00
			`filter: drop-shadow(0.1rem 0.1rem 0.2rem black);`

Make site output folder public 2024-04-20 10:10:34 +00:00			`}`
			`</style>`

			`<script defer>`
			`const hero = document.querySelector(".hero");`
			`const heroTopBarEl = document.querySelector(".hero__top-bar");`
			`const headerImgEl = document.querySelector(".hero__img");`


Move today event variable to individual hero templates 2024-04-29 03:16:44 +00:00			`const todayEvent = getTodayEvent();`

Refactor main hero header events 2024-04-29 05:07:49 +00:00			`if (todayEvent) {`
Make site output folder public 2024-04-20 10:10:34 +00:00			`heroTopBarEl.classList.remove('hidden');`
Refactor main hero header events 2024-04-29 05:07:49 +00:00			`heroTopBarEl.innerHTML = todayEvent.blurb;`
Make site output folder public 2024-04-20 10:10:34 +00:00
Refactor main hero header events 2024-04-29 05:07:49 +00:00			`if (todayEvent.class) {`
			`headerImgEl.classList.add(todayEvent.class);`
Make site output folder public 2024-04-20 10:10:34 +00:00			`}`
			`}`

			`function getTodayEvent() {`
			`const date = new Date();`
			`const month = date.getMonth() + 1;`
			`const day = date.getDate();`

Refactor main hero header events 2024-04-29 05:07:49 +00:00			`const currentYear = date.getFullYear();`
			`const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();`
			`const leilukinsHubAnniversary = currentYear - leilukinsHubLaunchDate;`

			`if (month === 3 && day === 1)`
			`return {`
			blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day" target="_blank">Zero Discrimination Day</a>`,
			`class: "flag-progress-intersex",`
			`};`
			`else if (month === 3 && day === 8)`
			`return {`
			blurb: `Today is <a href="https://www.internationalwomensday.com/" target="_blank">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" target="_blank">Trans Day of Visibility</a>`,
			`class: "flag-trans",`
			`};`
			`else if (month === 4 && day === 6)`
			`return {`
			blurb: `Today is <a href="https://internationalasexualityday.org/en" target="_blank">International Asexuality Day</a>`,
			`class: "flag-ace",`
			`};`
			`else if (month === 4 && day === 26)`
			`return {`
			blurb: `Today is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Day</a>`,
			`class: "flag-lesbian",`
			`};`
			`else if (month === 5 && day === 17)`
			`return {`
			blurb: `Today is <a href="https://may17.org" target="_blank">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/" target="_blank">Agender Pride Day</a>`,
			`class: "flag-agender",`
			`};`
			`else if (month === 5 && day === 25)`
			`return {`
			blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday" target="_blank">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/" target="_blank">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" target="_blank">Non-Binary People's Day</a>`,
			`class: "flag-nonbinary",`
			`};`
			`else if (month === 7 && day === 28)`
			`return {`
			blurb: `Today is Leilukin's Birthday`
			`};`
			`else if (month === 9 && day === 11)`
			`return {`
			blurb: `Today is the ${leilukinsHubAnniversary}-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" target="_blank">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" target="_blank">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" target="_blank">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" target="_blank">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" target="_blank">Ace Week</a>`,
			`class: "flag-ace",`
			`};`
			`else if (month === 10 && day === 26)`
			`return {`
			blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day" target="_blank">Intersex Awareness Day</a>`,
			`class: "flag-intersex",`
			`};`
Make site output folder public 2024-04-20 10:10:34 +00:00			`else`
Refactor main hero header events 2024-04-29 05:07:49 +00:00			`return null;`
Make site output folder public 2024-04-20 10:10:34 +00:00			`}`

			`</script>`
			`<nav class="navbar">`
			`<ul class="nav__menu">`



			`<li>`
Use Eleventy Navigation plugin to render main site nav bar 2024-04-24 16:43:39 +00:00			`<a href="/">Home</a>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</li>`
			`<li>`
Use Eleventy Navigation plugin to render main site nav bar 2024-04-24 16:43:39 +00:00			`<a href="/about/">About</a>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</li>`
			`<li>`
Use Eleventy Navigation plugin to render main site nav bar 2024-04-24 16:43:39 +00:00			`<a href="/now/">Now</a>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</li>`
			`<li>`
Use Eleventy Navigation plugin to render main site nav bar 2024-04-24 16:43:39 +00:00			`<a href="/blog/">Blog</a>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</li>`
			`<li>`
Use Eleventy Navigation plugin to render main site nav bar 2024-04-24 16:43:39 +00:00			`<a href="/articles/">Articles</a>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</li>`
			`<li>`
Use Eleventy Navigation plugin to render main site nav bar 2024-04-24 16:43:39 +00:00			`<a href="/projects/">Projects</a>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</li>`
			`<li>`
Use Eleventy Navigation plugin to render main site nav bar 2024-04-24 16:43:39 +00:00			`<a href="/shrines/">Shrines</a>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</li>`
			`<li>`
Use Eleventy Navigation plugin to render main site nav bar 2024-04-24 16:43:39 +00:00			`<a href="/links/">Links</a>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</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>`
Remove unused breadcrumb class 2024-04-24 17:42:28 +00:00			`<a href="/blog/">Blog</a>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</li>`
			`<li>`
Remove unused breadcrumb class 2024-04-24 17:42:28 +00:00			`<a href="/blog/posts/">Blog Archive</a>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</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">`

Rename archive title to content archive 2024-04-21 11:12:20 +00:00			`<li><a href="/archive/">Content Archive</a></li>`
Make site output folder public 2024-04-20 10:10:34 +00:00
Remove lazy loading of pride buttons 2024-04-20 10:28:35 +00:00			`<li><a href="/categories/">Content Categories</a></li>`

Make site output folder public 2024-04-20 10:10:34 +00:00			`<li><a href="/articles/">Articles</a></li>`

			`<li><a href="/blog/posts/">Blog Archive</a></li>`

Use Eleventy Navigation plugin to render main site nav bar 2024-04-24 16:43:39 +00:00			`<li><a href="/blog/">Blog Home</a></li>`

Make site output folder public 2024-04-20 10:10:34 +00:00			`</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;`
			`}`
Make breadcrumbs arrow ::after selecter content 2024-04-24 17:31:54 +00:00
			`.breadcrumbs li::after {`
			`content: '➔';`
			`padding-left: 0.3em;`
			`}`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</style>`
			`</main>`
			`<footer class="footer">`
			`<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>`


			`<ul class="footer__links">`
Move the link separtor in list elements to ::after selector 2024-04-20 10:59:51 +00:00			`<li><a`

			`href="/sitemap/`
			`">Site Map</a></li>`
			`<li><a`

			`href="/changelogs/"`
			`>Changelogs</a></li>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`<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;`
			`}`

Move the link separtor in list elements to ::after selector 2024-04-20 10:59:51 +00:00			`.footer__links li:not(:last-child)::after {`
			`content: '\|';`
			`padding-left: 0.6em;`
			`}`

Make site output folder public 2024-04-20 10:10:34 +00:00			`@media only screen and (min-width: 600px) {`
			`.footer {`
			`width: 100%;`
			`}`
			`}`
			`</style>`
Use Font Awesome icons for scroll-to-top button 2024-04-21 19:05:20 +00:00			`<button class="top-btn hidden" aria-label="Scroll to top">`
			`<i class="fa-solid fa-chevron-up"></i>`
Make site output folder public 2024-04-20 10:10:34 +00:00			`</button>`

			`<style>`
			`.top-btn {`
			`position: fixed;`
Use Font Awesome icons for scroll-to-top button 2024-04-21 19:05:20 +00:00			`margin: 0;`
			`padding: 0;`
Enlarge scroll-to-top button 2024-04-21 19:08:40 +00:00			`bottom: 0.5rem;`
			`right: 0.5rem;`
Make site output folder public 2024-04-20 10:10:34 +00:00			`z-index: 999;`
			`border: none;`
Use Font Awesome icons for scroll-to-top button 2024-04-21 19:05:20 +00:00			`background-color: var(--clr-top-btn-bg);`
			`color: var(--clr-top-btn-txt);`
Make site output folder public 2024-04-20 10:10:34 +00:00			`border-radius: 50em;`
Enlarge scroll-to-top button 2024-04-21 19:08:40 +00:00			`width: 2rem;`
Use Font Awesome icons for scroll-to-top button 2024-04-21 19:05:20 +00:00			`aspect-ratio: 1 / 1;`
Make site output folder public 2024-04-20 10:10:34 +00:00			`}`

			`.top-btn:focus {`
Use Font Awesome icons for scroll-to-top button 2024-04-21 19:05:20 +00:00			`outline: 0.25em solid var(--clr-top-btn-bg);`
Make site output folder public 2024-04-20 10:10:34 +00:00			`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>`