506 lines
17 KiB
HTML
506 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" id="top">
|
|
<head>
|
|
|
|
|
|
<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="author" content="Leilukin">
|
|
<meta name="description" content="About giving my website a new design in light of a new year of 2023.">
|
|
<meta name="generator" content="Eleventy v3.0.0">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://leilukin.com/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.com/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.com/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">
|
|
|
|
<style>.content__nav {
|
|
padding: 1.2em clamp(1em, 5%, 1.5em);
|
|
background-color: var(--clr-content-bg);
|
|
}
|
|
|
|
.content__nav--title {
|
|
font-size: 1.7rem;
|
|
}
|
|
.breadcrumbs {
|
|
list-style-type: "";
|
|
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;
|
|
}
|
|
|
|
.blog__post--pagination {
|
|
padding-top: 1em;
|
|
margin-top: 2.5em;
|
|
border-top: 0.1em solid var(--clr-title-border);
|
|
}
|
|
|
|
.blog__post--nextprev {
|
|
list-style-type: "";
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: 0.7em;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-areas: 'prev next';
|
|
}
|
|
|
|
.blog__post--prev { grid-area: prev; }
|
|
.blog__post--next { grid-area: next; }
|
|
.hero img { filter:
|
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
|
; }
|
|
.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;
|
|
}
|
|
.navbar {
|
|
background: var(--clr-navbar-bg);
|
|
width: 100%;
|
|
z-index: 998;
|
|
position: sticky;
|
|
top: 0;
|
|
padding: 0.6em;
|
|
}
|
|
|
|
.navbar__menu {
|
|
list-style-type: "";
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
gap: 1em;
|
|
flex-wrap: wrap;
|
|
text-align: center;
|
|
}
|
|
|
|
.navbar__menu a {
|
|
color: var(--clr-navbar-link);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
|
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
|
|
|
.navbar__links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.navbar__toggle {
|
|
background-color: inherit;
|
|
color: var(--clr-navbar-link);
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
display: none;
|
|
align-items: center;
|
|
gap: 0.3em;
|
|
}
|
|
|
|
.navbar__toggle svg { fill: currentColor; }
|
|
|
|
.navbar__toggle:focus,
|
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
|
.navbar__toggle:focus,
|
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
|
|
|
.navbar__popover {
|
|
background-color: var(--clr-navbar-bg);
|
|
border: 0.15em solid var(--clr-navbar-link);
|
|
padding: 1.5em;
|
|
max-width: 85%;
|
|
}
|
|
|
|
.navbar__popover::backdrop {
|
|
background-color: black;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@supports selector([popover]) {
|
|
.navbar__toggle { display: flex; }
|
|
.navbar__links { display: none; }
|
|
}
|
|
|
|
/* Tablet screen size */
|
|
@media only screen and (min-width: 43.75rem) {
|
|
.navbar { padding: 1em 0.6em; }
|
|
.navbar__toggle, .navbar__popover { display: none; }
|
|
.navbar__links { display: flex; }
|
|
}
|
|
.top-btn,
|
|
.top-btn:hover {
|
|
color: var(--clr-top-btn-txt);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.top-btn {
|
|
position: fixed;
|
|
bottom: 0.5rem;
|
|
right: 0.5rem;
|
|
z-index: 999;
|
|
|
|
background-color: var(--clr-top-btn-bg);
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 50em;
|
|
padding: 0.3em 0.5em;
|
|
gap: 0.2em;
|
|
}
|
|
|
|
.top-btn:focus {
|
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
|
outline-offset: 0.15em;
|
|
}
|
|
|
|
.top-btn__arrow {
|
|
display: inline-block;
|
|
width: 1em;
|
|
aspect-ratio: 1 / 1;
|
|
stroke-width: 0;
|
|
stroke: currentColor;
|
|
fill: currentColor;
|
|
}
|
|
:root { --footer-gap: 0.5em; }
|
|
|
|
.footer {
|
|
margin-top: auto;
|
|
width: 100%;
|
|
background: var(--clr-main-footer-bg);
|
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
|
text-align: center;
|
|
display: grid;
|
|
gap: var(--footer-gap);
|
|
}
|
|
|
|
.footer__links,
|
|
.footer__shrines {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
column-gap: var(--footer-gap);
|
|
}
|
|
|
|
.footer__links { justify-self: center; }
|
|
.footer__shrines { align-self: center; }</style>
|
|
|
|
|
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
|
<style>
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: 'Lexend';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/assets/fonts/lexend/lexend-v19-latin-regular.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: 'Lexend';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url('/assets/fonts/lexend/lexend-v19-latin-600.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: 'Lexend';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('/assets/fonts/lexend/lexend-v19-latin-700.woff2') format('woff2');
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
|
|
|
|
|
|
<link rel="me" href="mailto:contact@leilukin.com">
|
|
<link rel="me" href="https://mstdn.social/@leilukin">
|
|
<link rel="me" href="https://twitter.com/Leilukin">
|
|
<link rel="me" href="https://github.com/Leilukin">
|
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
|
|
|
|
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
|
|
|
|
|
<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">
|
|
|
|
|
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
|
|
|
|
|
<title>
|
|
2023 New Year Redesign of Leilukin's Hub | Blog | Leilukin's Hub
|
|
</title>
|
|
</head>
|
|
<body>
|
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
|
<header class="hero">
|
|
<div class="hero__top-bar hidden"></div>
|
|
<div class="hero__img">
|
|
|
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
|
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
|
<ul class="navbar__menu 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="/adoptables/">Adoptables</a>
|
|
</li>
|
|
<li>
|
|
<a href="/links/">Links</a>
|
|
</li>
|
|
<li>
|
|
<a href="/guestbook/">Guestbook</a>
|
|
</li>
|
|
</ul>
|
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
|
Navigation
|
|
</button>
|
|
</nav>
|
|
<div popover id="nav-menu" class="navbar__popover">
|
|
<ul class="navbar__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="/adoptables/">Adoptables</a>
|
|
</li>
|
|
<li>
|
|
<a href="/links/">Links</a>
|
|
</li>
|
|
<li>
|
|
<a href="/guestbook/">Guestbook</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<main id="content">
|
|
<header class="main__header">
|
|
|
|
<nav aria-labelledby="breadcrumbs-title">
|
|
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
|
<ol class="breadcrumbs">
|
|
|
|
<li>
|
|
<a href="/blog/">Blog</a>
|
|
</li>
|
|
<li>
|
|
<a href="/blog/posts/">Blog Archive</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
|
|
<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>
|
|
|
|
<content-wrapper>
|
|
|
|
|
|
|
|
|
|
<article class="content">
|
|
<p><img src="/assets/layouts/Leilukins-Hub-layout-2023-01.avif" 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 leilukin.neocities.org, you will be presented with a very simple splash 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>
|
|
|
|
|
|
|
|
<nav class="blog__post--pagination" aria-labelledby="nextprev-title">
|
|
<h2 class="visually-hidden" id="nextprev-title">Next and Previous Blog Posts</h2>
|
|
<ul class="blog__post--nextprev">
|
|
<li class="blog__post--next">
|
|
<p>Next Post:</p>
|
|
<a href="/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">Leilukin's Hub Now has a Blog!</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</article>
|
|
|
|
|
|
<aside class="right-sidebar" aria-label="Right sidebar">
|
|
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
|
|
<h2 class="content__nav--title" id="my-contents-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>
|
|
|
|
|
|
|
|
</content-wrapper>
|
|
</main>
|
|
<footer class="footer">
|
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
|
|
|
|
|
<ul class="inline-nav footer__links">
|
|
<li><a href="/feed.xml">RSS</a></li>
|
|
<li><a
|
|
|
|
href="/sitemap/
|
|
">Site Map</a></li>
|
|
<li><a
|
|
|
|
href="/changelogs/"
|
|
>Changelogs</a></li><li><a
|
|
|
|
href="/accessibility/"
|
|
>Accessibility</a></li><li><a
|
|
|
|
href="/colophon/"
|
|
>Colophon</a></li></ul>
|
|
<p><a href="mailto:contact@leilukin.com">Contact me by email</a></p><div class="h-card hidden">
|
|
<span class="p-name p-nickname">Leilukin</span>
|
|
<a href="/" class="u-url">Home page</a>
|
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
|
<span class="p-country-name">Malaysia</span>
|
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
|
</div><a href="#top" class="top-btn">
|
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
|
</svg>
|
|
Back to Top
|
|
</a>
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |