Because my own dumbass forgets what I've done to the website to actually make it function, I decided to try to document it all here for posterity's sake.
A simple article that'll break down how I ended up doing various parts of my website, from the layout to err ... maybe other things in the future; the layout was the thing that I hated the most in trying to figure out and optimize, so it'll be the first and primary one.
This is probably un-optimized as fuck LOL.
My original layout was based off the skyline theme that sadgrl had remade, and you can see the remnants of it lingering about. My current site uses a grid system, with the left sidebar and right sidebar having defined widths, and the middle being set to auto-fill. Aside is the right side column on my main page, .intro is the left side, and main is ... well, main.
:root {
/* SIZES + SPACING */
--blog-size: 1100px;
--grid-gap: 13px;
--left-sidebar-size: 250px;
--right-sidebar-size: 220px;
--border-radius: 5px;
}
.container-grid {
margin-left: 50px;
display: grid;
grid-gap: var(--grid-gap);
width: var(--blog-size);
grid-template-columns:
fit-content(var(--left-sidebar-size))
1fr
fit-content(var(--right-sidebar-size));
margin-bottom: 60px;
}
.intro {
max-width: var(--left-sidebar-size);
min-width: var(--left-sidebar-size);
width: 100%;
margin-top: 20px;
grid-column: 1;
height: fit-content;
position: sticky;
top: 75px;
align-content: center;
}
main {
grid-column: 2;
}
aside {
max-width: var(--right-sidebar-size);
min-width: var(--right-sidebar-size);
width: 100%;
margin-top: 20px;
grid-column: 3;
}
The margin-left is to not have it stick to the left side of the screen, and margin-bottom is just to have spacing between the footer and body content. 1fr fills up the rest of the space for the middle content. Making sure it's 'fit-content' for the side widths, it forces the content to it's full width, while the max-widths and min-widths for aside and intro make sure the items within don't force its size outside of what it's supposed to be.
... sometimes some of the interior content of the articles also forces it to be huge, so I have this calc code to force the max width to not be any bigger. I wish I could give a more thorough explanation for the math behind it, but basically it just takes away the left sidebar width from the full size, and adds the two "grid gaps" that would've existed.
(Ex. The max blog size is 1100px, take away 250px for the sidebar and you have 850px. My grid gaps are set to 13px, so 2 of those would equal to 824px for the max size the main content should be ... or well, that's what it should be automatically on pages that don't have giant content that'd force the shape to change. Man, don't ask me, I had to actually force this page cause the coding chunks were blowing the size of the article page to 1100px which it shouldn't be).
article {
margin-bottom: 20px;
width: auto;
max-width: calc(
var(--blog-size) - (var(--left-sidebar-size) + (calc(var(--grid-gap) * 2)))
); /* literally the px number is just grip-gap x2 */
}
... to be honest, I may have to reconsider revisiting the <article> and
<section> chunks because it makes it kind of useless to the firefox reader
mode (I use article to denote each 'chunk' of the main content, like the website breakdown vs
layout ... but I think it can only read ONE article chunk, not everything).
For pages that don't have a sidebar, I simply don't include the
<aside> in the code, and the middle portion will stretch out to accommodate
since it doesn't have a set size.
For mobile, it's swapped from a grid to a flex layout, since I don't need to maintain
the shape. Both sidebars are hidden with display: none; since they don't
contain vital information (navigation).
.container-grid {
display: flex;
flex: 1fr;
flex-direction: column;
width: auto;
margin-left: 5px;
margin-right: 5px;
}
I use JavaScript to make sure my header, footer, and sidebar are the same across all my pages, outside of the ones that are in folders (I may have to revisit it because the way it's set up, it won't locate image links that aren't on the same folder level; I don't like using absolute file paths but I may need to).
My navigation header is using the WCAG navbar by Nick DJM, I wish I had a better breakdown for it, but I genuinely don't remember how I got it to work. These are the JavaScript items I have in all my pages tied to it:
<script src="js/accessibility/disclosure-menu.iife.js"></script>
<script src="js/accessibility/accessible-menu.js" type="module"></script>
And the HTML related to it in the reusable component.
document.addEventListener("DOMContentLoaded", function () {
// Page has finished loading. Now, do things.
new NavHeader();
// Add any custom JavaScript code here...
var bodyElem = document.querySelector("body");
var fontForm = document.getElementById("fontFamily");
if (!localStorage.getItem("fontFamily")) {
populateStorage();
} else {
setStyles();
}
function populateStorage() {
localStorage.setItem("fontFamily", document.getElementById("fontFamily").value);
setStyles();
}
function setStyles() {
var currentFont = localStorage.getItem("fontFamily");
document.getElementById("fontFamily").value = currentFont;
bodyElem.style.fontFamily = currentFont;
}
fontForm.onchange = populateStorage;
});
const content = `
<header>
<div class="title">aid's small corner</div>
<div class="subtext">a little personal site</div>
</header>
<div class="button-wrapper">
<label for="fontFamily">Font:</label>
<select name="fontFamily" id="fontFamily">
<option value="freepixel">Free Pixel</option>
<option value="atkinson">Atkinson Hyperlegible</option>
<option value="intel one">Intel One Mono</option>
<option value="open dyslexic">Open Dyslexic</option>
<option value="Nunito">Nunito</option>
<option value="Tahoma">Tahoma</option>
<option value="Verdana">Verdana</option>
<option value="Arial">Arial</option>
</select>
</div>
<nav>
<button id="toggle-0" aria-label="Toggle main menu">☰</button>
<ul id="menu-0">
<li id="item-1-0-0"><a id="link-1-0-0" href="/index.html">Home</a></li>
<li id="item-2-0-0"><a id="link-2-0-0" href="/about.html">About</a></li>
<li id="item-3-0-0"><a id="link-2-0-0" href="/gallery.html">Art</a></li>
<li id="item-4-0-0" class="dropdown">
<a id="link-4-0-0" href="#">Personal</a>
<ul id="menu-3">
<li id="item-4-1-0"><a id="link-4-1-0" href="/blog.html">Blog</a></li>
<li id="item-4-2-0"><a id="link-4-2-0" href="/diary/index.html">Diary</a></li>
<li id="item-4-3-0"><a id="link-4-3-0" href="/manifesto.html">Manifesto</a></li>
<li id="item-4-4-0"><a id="link-4-4-0" href="/now.html">Now</a></li>
</ul>
</li>
<li id="item-5-0-0" class="dropdown">
<a id="link-5-0-0" href="#">OCs / Shrines</a>
<ul id="menu-4">
<li id="item-5-1-0"><a id="link-5-1-0" href="/oc/sylvie/index.html">Sylvie</a></li>
<li id="item-5-2-0"><a id="link-5-2-0" href="/oc/yadyra/index.html">Yadyra</a></li>
<li id="item-5-3-0"><a id="link-5-3-0" href="/oc/nameless/index.html">Nameless</a></li>
<li id="item-5-4-0"><a id="link-5-4-0" href="/oc.html">Other OCs</a></li>
<li id="item-5-5-0" class="dropdown">
<a id="link-5-5-0" href="#">Shrines</a>
<ul id="menu-5-5">
<li id="item-5-5-1"><a id="link-5-5-1" href="/shrines/zhongli.html">Zhongli</a></li>
<li id="item-5-5-2"><a id="link-5-5-2" href="/shrines/zhongvie.html">Zhongvie (🌿🔶)</a></li>
<li id="item-5-5-3"><a id="link-5-5-3" href="/shrines/ukitake.html">Jushiro Ukitake</a></li>
</ul>
</li>
</ul>
</li>
<li id="item-6-0-0" class="dropdown">
<a id="link-6-0-0" href="#">Fun Things</a>
<ul id="menu-6">
<li id="item-6-1-0"><a id="link-6-1-0" href="/articles.html">Articles</a></li>
<li id="item-6-2-0"><a id="link-6-2-0" href="/bookmarks.html">Bookmarks</a></li>
<li id="item-6-3-0"><a id="link-6-3-0" href="/media-log.html">Media Log</a></li>
<li id="item-6-4-0"><a id="link-6-4-0" href="/recipes.html">Recipes</a></li>
<li id="item-6-5-0"><a id="link-6-5-0" href="/toybox.html">Toybox</a></li>
</ul>
</li>
<li id="item-7-0-0" class="dropdown">
<a id="link-7-0-0" href="#">Others</a>
<ul id="menu-7">
<li id="item-7-1-0"><a id="link-7-1-0" href="/changelog.html">Changelog</a></li>
<li id="item-7-2-0"><a id="link-7-2-0" href="/credits.html">Credits</a></li>
<li id="item-7-3-0"><a id="link-7-3-0" href="https://asuraid.atabook.org/">Guestbook</a></li>
<li id="item-7-4-0"><a id="link-7-4-0" href="/links.html">Neighbours</a></li>
<li id="item-7-5-0"><a id="link-7-5-0" href="/sitemap.html">Sitemap</a></li>
<li id="item-7-6-0"><a id="link-7-6-0" href="/to-do.html">To-Do List</a></li>
</ul>
</li>
</ul>
</nav>
`;
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
/* FOR MOBILE DO NOT TOUCH OTHERWISE */
function openDropdown() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
class NavHeader extends HTMLElement {
constructor() {
super();
this.innerHTML = content;
}
}
customElements.define("nav-header", NavHeader);
... and the CSS related to the nav:
nav {
background-color: var(--primary-accent);
color: var(--font-on-accent);
position: sticky;
top: 0;
z-index: 2;
margin-bottom: 20px;
padding-left: 50px;
}
nav > button {
min-width: 44px;
min-height: 24px;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
margin-left: auto;
border: 0;
background-color: var(--primary-accent);
color: var(--font-on-accent);
font-size: 2.5rem;
}
nav ul {
display: none;
margin: 0;
padding: 0;
background-color: var(--primary-accent);
color: var(--font-on-accent);
list-style: none;
text-transform: uppercase;
}
nav ul ul {
background-color: var(--article-bg);
box-shadow: rgba(0, 0, 0, 0.5) 0 5px 15px;
color: var(--text-colour);
text-transform: lowercase;
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
nav ul ul a {
color: var(--text-colour);
}
nav ul.show {
display: grid;
grid-auto-flow: row;
grid-auto-rows: max-content;
}
nav a {
min-width: 44px;
min-height: 24px;
display: flex;
align-items: center;
padding: 0.75rem 1.5rem;
transition: background-color 150ms ease-in-out;
color: var(--font-on-accent);
text-decoration: none;
}
nav a:hover {
background-color: var(--secondary-accent);
color: var(--font-on-accent);
}
nav li {
padding: 0.2rem;
}
nav li.dropdown {
position: relative;
}
nav li.dropdown > a::after {
content: "▼";
display: block;
margin-left: 0.5rem;
transition: transform 250ms linear;
font-size: 0.5em;
}
nav li.dropdown > a[aria-expanded="true"]::after {
transform: rotate(-180deg);
}
nav li.dropdown ul a {
padding-left: 1.25rem;
}
nav li.dropdown ul li.dropdown ul a {
padding-left: 2rem;
}
... kinda gross, I know. But it works, and I'm honestly not going to fuck around with it any further.
I'll try to think of other ways I did my website in due time, but this is a start for the layout.
To be fair I'm mostly just using punkwasp's code. Might expand on it later cause I did it in a weirder way.