leilukin-site/_site/blog/posts/2023-01-28-leilukins-hub-no.../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="Leilukin&#39;s Hub Now has a Blog! | 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 finally set up a blog on my own website.">
<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-01-28-leilukins-hub-now-has-a-blog/">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:locale" content="en_MY">
<meta property="og:description" content="I have finally set up a blog on my own website.">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://leilukin.neocities.org/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">
<meta name="twitter:description" content="I have finally set up a blog on my own website.">
<link rel="canonical" href="https://leilukin.neocities.org/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">


        <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>
            Leilukin&#39;s Hub Now has a Blog! | 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>Leilukin&#39;s Hub Now has a Blog!</h1>
        <div class="article__info">
            <p>Posted on 28 January 2023 by Leilukin
            
                • Last updated on 16 April 2024</p>
            
            
                <p>Categories:
                    
                        <a href="/categories/site-updates">site updates</a>
                    
                </p>
            
            <p>🍿  1 min. read</p>
        </div>
    
</header>

<div class="content__wrapper">
    

        <article class="article">
            
<p>I finally built a blog on my own website!</p>
<p>After launching this site in September 2022, I had been considering setting up a blog here, as I want a blog that is hosted on my own site, but it was not until I discovered <a href="https://zonelets.net/">Zonelets</a>, a HTML blogging engine created with Neocities in mind, and it was exactly what I was looking for to build a blog on my own Neocities site: it is simple enough for beginners to use, yet also open for more customisation and flexibility for users who have enough knowledge about HTML, CSS and JavaScript.</p>
<p>My site does have an <a href="/articles">articles</a> section, but what makes this blog different from the articles is that the articles are meant to be timeless, sort of like my public statements for certain topics, while posts from this blog are more like journals or reactions to a timely subject.</p>
<p>Welcome to my blog! Hope you enjoy your stay on this blog and my website!</p>
<p><strong>UPDATE on 16 April 2024:</strong>
After discovering the static site generator <a href="https://www.11ty.dev/">Eleventy</a>, I decided to rebuild my entire website, including this blog, with Eleventy. Therefore, I no longer use Zonelets, and now this blog is powered by Eleventy.</p>

        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/">2023 New Year Redesign of Leilukin&#39;s Hub</a></li><li>Next Post: <a href="/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/">Onboard the Dracula Daily Hype Train</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="Leilukin's Hub Now has a Blog! \| 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 finally set up a blog on my own website.">`
			`<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-01-28-leilukins-hub-now-has-a-blog/">`
			`<meta property="og:site_name" content="Leilukin's Hub">`
			`<meta property="og:locale" content="en_MY">`
			`<meta property="og:description" content="I have finally set up a blog on my own website.">`
			`<meta name="twitter:card" content="summary">`
			`<meta name="twitter:url" content="https://leilukin.neocities.org/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">`
			`<meta name="twitter:description" content="I have finally set up a blog on my own website.">`
			`<link rel="canonical" href="https://leilukin.neocities.org/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">`



			`<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>`
			`Leilukin's Hub Now has a Blog! \| 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>Leilukin's Hub Now has a Blog!</h1>`
			`<div class="article__info">`
			`<p>Posted on 28 January 2023 by Leilukin`

			`• Last updated on 16 April 2024</p>`


			`<p>Categories:`

			`<a href="/categories/site-updates">site updates</a>`

			`</p>`

			`<p>🍿 1 min. read</p>`
			`</div>`

			`</header>`

			`<div class="content__wrapper">`



			`<article class="article">`

			`<p>I finally built a blog on my own website!</p>`
			<p>After launching this site in September 2022, I had been considering setting up a blog here, as I want a blog that is hosted on my own site, but it was not until I discovered <a href="https://zonelets.net/">Zonelets</a>, a HTML blogging engine created with Neocities in mind, and it was exactly what I was looking for to build a blog on my own Neocities site: it is simple enough for beginners to use, yet also open for more customisation and flexibility for users who have enough knowledge about HTML, CSS and JavaScript.</p>
			`<p>My site does have an <a href="/articles">articles</a> section, but what makes this blog different from the articles is that the articles are meant to be timeless, sort of like my public statements for certain topics, while posts from this blog are more like journals or reactions to a timely subject.</p>`
			`<p>Welcome to my blog! Hope you enjoy your stay on this blog and my website!</p>`
			`<p><strong>UPDATE on 16 April 2024:</strong>`
Fix capitalisation error in the word "Therefore" 2024-04-21 11:39:17 +00:00			`After discovering the static site generator <a href="https://www.11ty.dev/">Eleventy</a>, I decided to rebuild my entire website, including this blog, with Eleventy. Therefore, I no longer use Zonelets, and now this blog is powered by Eleventy.</p>`
Make site output folder public 2024-04-20 10:10:34 +00:00
			`<ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/">2023 New Year Redesign of Leilukin's Hub</a></li><li>Next Post: <a href="/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/">Onboard the Dracula Daily Hype Train</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>`