583 lines
19 KiB
HTML
583 lines
19 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="2023 New Year Redesign of Leilukin's Hub | 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="About giving my website a new design in light of a new year of 2023.">
|
|
<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-26-new-year-leilukins-hub-redesign/">
|
|
<meta property="og:site_name" content="Leilukin's Hub">
|
|
<meta property="og:locale" content="en_MY">
|
|
<meta property="og:description" content="About giving my website a new design in light of a new year of 2023.">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:url" content="https://leilukin.neocities.org/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/">
|
|
<meta name="twitter:description" content="About giving my website a new design in light of a new year of 2023.">
|
|
<link rel="canonical" href="https://leilukin.neocities.org/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/">
|
|
|
|
|
|
|
|
<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>
|
|
2023 New Year Redesign of Leilukin's Hub | 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 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="/blog/">Blog</a>
|
|
</li>
|
|
<li>
|
|
<a href="/blog/posts/">Blog Archive</a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
|
|
<h1>2023 New Year Redesign of Leilukin's Hub</h1>
|
|
<div class="article__info">
|
|
<p>Posted on 26 January 2023 by Leilukin
|
|
|
|
|
|
<p>Categories:
|
|
|
|
<a href="/categories/site-updates">site updates</a>
|
|
|
|
</p>
|
|
|
|
<p>🍿 2 min. read</p>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<div class="content__wrapper">
|
|
|
|
|
|
|
|
<article class="article">
|
|
|
|
<p><img src="/assets/layouts/Leilukins-Hub-layout-2023-01.png" alt="A screenshot of Leilukin's Hub home page, with its layout design released on January 26, 2023"></p>
|
|
<p>In light of a new year, the Leilukin's Hub website has received a new design on 26 January 2023!</p>
|
|
<p>I have wanted to rewrite and redesign this site after learning HTML and CSS more and getting better at writing those languages. With Visual Studio Code and the <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Live Server</a> extension installed, I have also finally found a good workflow for me to write and test HTML and CSS.</p>
|
|
<p>Looking at other Neocities websites have also given me more ideas in enhancing my own website. Special thanks to <a href="https://sadgrl.online/">sadgrl.online</a>, whose various web building resources, including the Layout Builder, have helped tremendously in redesigning this site.</p>
|
|
<p>With this 2023 new year redesign of this website, the index page, which is for when you visit the link <a href="https://leilukin.neocities.org/">leilukin.neocities.org</a>, you will be presented with a very simple page, but when you click the "Enter" button to enter, you will be brought to my website's home page, and can start properly browsing my website, and enjoying the new design!</p>
|
|
<p>Highlights of the 2023 New Year redesign of Leilukin's Hub:</p>
|
|
<ul>
|
|
<li>Uses purple colour schemes primarily, as purple is one of my favourite colours.</li>
|
|
<li>Each page category has their own CSS file, allowing me to give certain pages unique elements. However, the site still has a main CSS file to be imported into CSS files of other pages, saving me time to edit the CSS files one by one just to tweak a certain part of the main layout design.</li>
|
|
<li>Background image added.</li>
|
|
<li>Sidebars added, with the contents being sticky, so you can still see them while scrolling through.</li>
|
|
<li>The navigation links are now on the right sidebar. Previously, the navigation links of my website are in a row placed at the header section.</li>
|
|
<li>The table of contents of some of my pages is now placed on the left sidebar.</li>
|
|
<li>The <a href="/changelogs/">website changelog</a> page adds archives for the layout designs of this site and old changelog.</li>
|
|
<li>My <a href="/mymods">video game mod pages</a> have added a filter function, so you can use buttons to view a specific category of mods.</li>
|
|
</ul>
|
|
<p>After spending many hours on this site redesign, I am very pleased with how it turns out. Hope you enjoy it!</p>
|
|
|
|
<ul class="blog__post--nextprev"><li>Next Post: <a href="/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">Leilukin's Hub Now has a Blog!</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;
|
|
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> |