Added news for the June 2023 layout rewrite
This commit is contained in:
Helen Chong
parent
2be77d6f2d
commit
0b66ccf2f2
|
|
@ -39,6 +39,11 @@
|
||||||
<p>Archive: <strong>Latest</strong> | <a href="./2022.html">2022</a> | <a href="./layouts.html">Website Layouts</a></p>
|
<p>Archive: <strong>Latest</strong> | <a href="./2022.html">2022</a> | <a href="./layouts.html">Website Layouts</a></p>
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
|
<strong>June 23, 2023:</strong>
|
||||||
|
<ul>
|
||||||
|
<li>The HTML, CSS and JavaScript of entire website has been rewritten to improve the site's layout! See the <a href="./updates/2023-june-layout-rewrite.html">2023 New Year Redesign of Leilukin's Hub</a> for more information!</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<strong>June 15, 2023:</strong>
|
<strong>June 15, 2023:</strong>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Removed unnecessary CSS files.</li>
|
<li>Removed unnecessary CSS files.</li>
|
||||||
|
|
|
||||||
|
|
@ -39,10 +39,13 @@
|
||||||
<p>Archive: <a href="../changelog/">Latest</a> | <a href="./2022.html">2022</a> | <strong>Website Layouts</strong></p>
|
<p>Archive: <a href="../changelog/">Latest</a> | <a href="./2022.html">2022</a> | <strong>Website Layouts</strong></p>
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
<h3>January 26, 2023</h3>
|
<h2>June 23, 2023</h2>
|
||||||
|
<img src="./layouts/Leilukins-Hub-layout-2023-06.png" alt="A screenshot of Leilukin's Hub home page, with its layout design released on January 26, 2023" width="100%">
|
||||||
|
|
||||||
|
<h2>January 26, 2023</h2>
|
||||||
<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%">
|
<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%">
|
||||||
|
|
||||||
<h3>September 11, 2023 (Site Launch)</h3>
|
<h2>September 11, 2023 (Site Launch)</h2>
|
||||||
<img src="./layouts/Leilukins-Hub-layout-2022-index.png" alt="A screenshot of Leilukin's Hub home page, with its layout design released on the site's launch on September 11, 2023" width="100%">
|
<img src="./layouts/Leilukins-Hub-layout-2022-index.png" alt="A screenshot of Leilukin's Hub home page, with its layout design released on the site's launch on September 11, 2023" width="100%">
|
||||||
<img src="./layouts/Leilukins-Hub-layout-2022-page.png" alt="A screenshot of Leilukin's Hub website's My Creation page, with its layout design released on the site's launch on September 11, 2023" width="100%">
|
<img src="./layouts/Leilukins-Hub-layout-2022-page.png" alt="A screenshot of Leilukin's Hub website's My Creation page, with its layout design released on the site's launch on September 11, 2023" width="100%">
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
|
|
@ -0,0 +1,65 @@
|
||||||
|
<!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: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="June 2023 Layout Rewrite">
|
||||||
|
<meta property="og:description" content="The HTML, CSS and JavaScript of my entire website have been rewritten in June 2023 to improve its layout.">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/main.css" type="text/css" media="all">
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
|
||||||
|
|
||||||
|
<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="/components/header.js" defer></script>
|
||||||
|
<script src="/components/navbar.js" defer></script>
|
||||||
|
<script src="/components/footer.js" defer></script>
|
||||||
|
|
||||||
|
<title>June 2023 Layout Rewrite | Leilukin's Hub</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header-component></header-component>
|
||||||
|
<main>
|
||||||
|
<!-- <aside class="left-sidebar">
|
||||||
|
Left sidebar content here
|
||||||
|
</aside> -->
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h1>June 2023 Layout Rewrite</h1>
|
||||||
|
|
||||||
|
<center><p>Published on June 23 26, 2023</p></center>
|
||||||
|
|
||||||
|
<img src="../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" width="100%" height="auto">
|
||||||
|
|
||||||
|
<p>Happy Pride Month! It is always Pride on this literally <a href="https://isaacfish.neocities.org/webring/" target="_blank">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>
|
||||||
|
|
||||||
|
<h2>Highlights of the 2023 New Year redesign of Leilukin's Hub:</h3>
|
||||||
|
<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" target="_blank">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/" target="_blank">Andy Bell's modern CSS reset</a> for the CSS of the entire website.</li>
|
||||||
|
<li>Use <a href="https://www.freecodecamp.org/news/reusable-html-components-how-to-reuse-a-header-and-footer-on-a-website/" target="_blank">custom HTML elements</a> for components that are shared across multiple pages, including the header, navigation bar and footer</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>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- <aside class="right-sidebar">
|
||||||
|
Right sidebar content here
|
||||||
|
</aside> -->
|
||||||
|
</main>
|
||||||
|
<footer-component></footer-component>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -47,7 +47,8 @@
|
||||||
|
|
||||||
<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>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>
|
<h2>Highlights of the 2023 New Year redesign of Leilukin's Hub:</h2>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>Uses purple colour schemes primarily, as purple is one of my favourite colours.</li>
|
<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>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>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ class Footer extends HTMLElement {
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
this.innerHTML = `
|
this.innerHTML = `
|
||||||
<footer>
|
<footer>
|
||||||
Site Launched: September 11, 2022 by Leilukin | <a href="/changelog">Site Changelog</a> | <a href="#page-top">Back to top</a>
|
Site Launched: September 11, 2022 by Leilukin | <a href="/changelog">Website Changelog</a> | <a href="#page-top">Back to top</a>
|
||||||
</footer>
|
</footer>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -42,10 +42,9 @@
|
||||||
<section class="content-section">
|
<section class="content-section">
|
||||||
<h2>Updates</h2>
|
<h2>Updates</h2>
|
||||||
<div class="text-box">
|
<div class="text-box">
|
||||||
<strong>June 15, 2023:</strong>
|
<strong>June 23, 2023:</strong>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Removed unnecessary CSS files.</li>
|
<li>The HTML, CSS and JavaScript of entire website has been rewritten to improve the site's layout! See the <a href="./updates/2023-june-layout-rewrite.html">2023 New Year Redesign of Leilukin's Hub</a> for more information!</li>
|
||||||
<li>Refactored the index page's HTML and CSS.</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<a href="/changelog">View all site changelog</a>
|
<a href="/changelog">View all site changelog</a>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue