73 lines
4.8 KiB
HTML
73 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<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:url" content="https://leilukin.neocities.org/articles/2023-redesign.html">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:site_name" content="Leilukin's Hub">
|
|
<meta property="og:title" content="2023 New Year Redesign of Leilukin's Hub">
|
|
<meta property="og:description" content="About giving my website a new design in light of a new year of 2023.">
|
|
|
|
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
|
|
<link rel="stylesheet" href="changelog.css" type="text/css" media="all">
|
|
|
|
<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="/main.js" defer></script>
|
|
|
|
<title>2023 New Year Redesign of Leilukin's Hub | Leilukin's Hub</title>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container">
|
|
<div id="headerArea">
|
|
<div id="header"></div>
|
|
</div>
|
|
|
|
<div id="flex">
|
|
|
|
<aside id="leftSidebar">
|
|
<div class="sidebar-content">
|
|
<div id="leftSidebarContent"></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main>
|
|
<h1>2023 New Year Redesign of Leilukin's Hub</h1>
|
|
|
|
<img src="./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" width="100%" height="auto">
|
|
|
|
<p>In light of a new year, the Leilukin's Hub website has received a new design on January 26. 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" target="_blank">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/" target="_blank">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>
|
|
|
|
<h3>Highlights of the 2023 New Year redesign of Leilukin's Hub:</h3>
|
|
<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="/changelog/">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>
|
|
</main>
|
|
|
|
</div>
|
|
<footer id="footer"></footer>
|
|
</div>
|
|
</body>
|
|
</html> |