584 lines
19 KiB
HTML
584 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="June 2023 Leilukin's Hub Layout Rewrite | 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="The HTML, CSS and JavaScript of my entire website have been rewritten in June 2023 to improve its layout.">
|
|
<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-06-23-june-2023-leilukins-hub-layout-rewrite/">
|
|
<meta property="og:site_name" content="Leilukin's Hub">
|
|
<meta property="og:locale" content="en_MY">
|
|
<meta property="og:description" content="The HTML, CSS and JavaScript of my entire website have been rewritten in June 2023 to improve its layout.">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:url" content="https://leilukin.neocities.org/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/">
|
|
<meta name="twitter:description" content="The HTML, CSS and JavaScript of my entire website have been rewritten in June 2023 to improve its layout.">
|
|
<link rel="canonical" href="https://leilukin.neocities.org/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/">
|
|
|
|
|
|
|
|
<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>
|
|
June 2023 Leilukin's Hub Layout Rewrite | 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" 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 === 4 && weekOfMonth === 4)
|
|
return {
|
|
blurb: `This week is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Week</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-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/" target="_blank">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" 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 if (month === 11 && day === 13)
|
|
return {
|
|
blurb: `Today is the start of <a href="https://glaad.org/transweek/" target="_blank">Transgender Awareness Week</a>`,
|
|
class: "flag-trans",
|
|
};
|
|
else
|
|
return null;
|
|
}
|
|
|
|
</script>
|
|
<nav class="navbar">
|
|
<div class="navbar__header">
|
|
<button class="navbar__toggle" aria-label="Navigation menu toggle">
|
|
<i class="fa-solid fa-bars"></i>
|
|
</button>
|
|
<h2 class="navbar__title">Navigation</h2>
|
|
</div>
|
|
<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="https://leilukin.123guestbook.com/">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__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8em;
|
|
}
|
|
|
|
.navbar__toggle {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 1.3rem;
|
|
background-color: inherit;
|
|
color: var(--clr-navbar-link);
|
|
}
|
|
|
|
.navbar__toggle:focus,
|
|
.navbar a:focus {
|
|
outline: 0.15em solid var(--clr-navbar-link);
|
|
}
|
|
|
|
.navbar__title {
|
|
font-size: 1.3rem;
|
|
color: 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 2em;
|
|
overflow: auto;
|
|
}
|
|
|
|
.navbar__links--show {
|
|
display: grid;
|
|
}
|
|
|
|
/* Tablet screen size */
|
|
@media only screen and (min-width: 43.75rem) {
|
|
.navbar {
|
|
padding: 0 0.6em;
|
|
}
|
|
|
|
.navbar__header {
|
|
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>June 2023 Leilukin's Hub Layout Rewrite</h1>
|
|
<div class="article__info">
|
|
<p>Posted on 23 June 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-06.png" alt="A screenshot of Leilukin's Hub home page, with its new layout released on June 23, 2023"></p>
|
|
<p>Happy Pride Month! It is always Pride on this literally <a href="https://isaacfish.neocities.org/webring/">queer-coded</a> (as in, literally coded by a queer person) website, so Leilukin's Hub decided to celebrate Pride Month with a major update — rewriting the entire website's layout!</p>
|
|
<p>This new layout remains the same colour scheme as the previous one, which went live in January this year. The most noticeable change you would see in this new layout is the sticky navigation bar, a feature that previously only existed in <a href="/shrines/">my shrines</a>. However, under the hood the HTML, CSS and JavaScript all have been rewritten from the ground up to optimise the site's layout.</p>
|
|
<p>Highlights of the June 2023 layout rewrite of Leilukin's Hub:</p>
|
|
<ul>
|
|
<li>A new navigation bar throughout the entire website, instead of putting links to this site's pages on the sidebar. The design of this navigation bar is inspired by the dropdown menu bar at the end of this article: <a href="https://webdesign.tutsplus.com/articles/best-practices-for-responsive-dropdown-menus--cms-35212">6 Best Practices for Building Responsive Dropdown Menus</a>.</li>
|
|
<li>Rewrite the HTML elements to improve the website's layout.</li>
|
|
<li>Use a mobile-first workflow to rewrite the CSS of this website to make the website more responsive to various screen sizes (mobile, tablet and desktop).</li>
|
|
<li>Streamline the CSS of the main parts of the site into one CSS file. The only pages that also have their own CSS due to unique elements with custom classes exclusive to the pages are <a href="/mymods/">my mod pages</a>. The shrines still have their own CSS files, however.</li>
|
|
<li>Use <a href="https://andy-bell.co.uk/a-modern-css-reset/">Andy Bell's modern CSS reset</a> for the CSS of the entire website.</li>
|
|
<li>The header, navigation bar and footer have their own scripts to dynamically render the content of these elements with JavaScript's <a href="https://www.javascripttutorial.net/javascript-dom/javascript-innerhtml/"><code>innerHTML</code></a> property.</li>
|
|
<li>Add a "Back to top" link to the footer to quickly scroll back to the top of the page you are viewing</li>
|
|
</ul>
|
|
<p>Rewriting the layout of this entire website has taken me many hours on this site redesign. Nevertheless, I am very pleased with how it turns out. Enjoy!</p>
|
|
|
|
<ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/">Onboard the Dracula Daily Hype Train</a></li><li>Next Post: <a href="/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/">My First Birthday After the Launch of Leilukin's Hub</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> |