more aesthetic changes + code formatting

6 files changed, 258 insertions, 273 deletions

diff --git a/assets/css/highlight.css b/assets/css/highlight.css
index 26571a8..70bf1cf 100644
--- a/assets/css/highlight.css
+++ b/assets/css/highlight.css
@@ -9,7 +9,8 @@ code[class*="language-"],
 pre[class*="language-"] {
 	background: #27212e;
 	color: #ffffff;
-	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; /* this is the default */
+	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+	/* this is the default */
 	/* The following properties are standard, please leave them as they are */
 	font-size: 1em;
 	direction: ltr;
@@ -46,17 +47,21 @@ pre[class*="language-"] ::selection {
 
 /* Properties specific to code blocks */
 pre[class*="language-"] {
-	padding: 1em; /* this is standard */
-	margin: 0.5em 0; /* this is the default */
-	overflow: auto; /* this is standard */
+	padding: 1em;
+	/* this is standard */
+	margin: 0.5em 0;
+	/* this is the default */
+	overflow: auto;
+	/* this is standard */
 	border-radius: 0.5em;
 }
 
 /* Properties specific to inline code */
-:not(pre) > code[class*="language-"] {
+:not(pre)>code[class*="language-"] {
 	padding: 0.2em 0.3em;
 	border-radius: 0.5rem;
-	white-space: normal; /* this is standard */
+	white-space: normal;
+	/* this is standard */
 }
 
 .token.comment,
@@ -130,4 +135,4 @@ pre[class*="language-"] {
 
 .token.namespace {
 	opacity: 0.7;
-}
\ No newline at end of file
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index 4b99331..4102e16 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,247 +1,226 @@
 @import url("./theme.css");
 
 body {
-    background: var(--base);
-    color: var(--text);
-    margin: 0;
-    padding: 0.5rem;
+	color: var(--text);
+	margin: 0;
+	background-color: #040404;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
 }
 
-main > h1 {
+main>h1 {
 	text-align: center;
 }
 
-a {
-    color: var(--text);
-    --brackets-color: var(--accent);
-    padding: 0.2rem;
-    /* clip-path: polygon(0% 0,0% calc(100% - 0.2rem), 0.2rem 100%,100% 100%, 100% 0%); */
-    border-radius: 0rem;
-    text-decoration: none;
-    position: relative;
-    isolation: isolate;
-}
-/*
-a[target="_blank"]::before {
-    content: "";
-    background-color: currentColor;
-    clip-path: polygon(0% 0, 100% 100%, 100% 0%);
-    position: absolute;
-    top: 0;
-    width: 0.4rem;
-    height: 0.4rem;
-    right: 0;
-    z-index: -1;
+div.solidbg {
+	background-color: var(--base);
+	max-width: fit-content;
+	min-width: calc(90ch + 2.8rem);
+	margin-inline: auto;
+	padding: 1rem;
+	min-height: calc(100vh - 1rem);
 }
 
+a {
+	color: var(--text);
+	--brackets-color: var(--accent);
+	padding: 0.2rem;
+	border-radius: 0rem;
+	text-decoration: none;
+	position: relative;
+	isolation: isolate;
+}
 
-a::after {
-    content: "";
-    background-color: var(--text);
-    position: absolute;
-    width: 100%;
-    height: 0.2rem;
-    bottom: 0;
-    border-radius: 0;
-    left: 0;
-    z-index: -1;
-}*/
 a::after,
 a::before {
-    content: "[";
-    color: var(--brackets-color);
+	content: "[";
+	color: var(--brackets-color);
 }
+
 a::after {
-    content: "]";
+	content: "]";
 }
+
 a[target="_blank"]::before {
-    content: "{";
+	content: "{";
 }
+
 a[target="_blank"]::after {
-    content: "}";
+	content: "}";
 }
 
 a.active,
 a:focus,
 a:hover {
-		background: var(--text);
-    color: var(--base);
-    --brackets-color: var(--base-3);
+	background: var(--text);
+	color: var(--base);
+	--brackets-color: var(--base-3);
 }
 
 header {
-    background: repeating-linear-gradient(45deg,var(--base) 0rem,var(--base) 1rem,var(--base-2) 1rem,var(--base-2) 2rem);
-    border: var(--base-2) 1px solid;
-    padding-inline: 0.4rem;
-    max-width: 90ch;
-    height: 4rem;
-    margin-inline: auto;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+	background: repeating-linear-gradient(45deg, var(--base) 0rem, var(--base) 1rem, var(--base-2) 1rem, var(--base-2) 2rem);
+	border: var(--base-2) 1px solid;
+	padding-inline: 0.4rem;
+	max-width: 90ch;
+	height: 4rem;
+	margin-inline: auto;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
+
 header h1 {
-    padding: 0;
-    margin: 0;
+	padding: 0;
+	margin: 0;
 }
+
 header .logo {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding-inline: 0.5rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding-inline: 0.5rem;
 }
 
 header .logo::before,
 header .logo::after {
-    content: none;
+	content: none;
 }
+
 header .logo svg {
-    height: 2rem;
-    width: auto;
+	height: 2rem;
+	width: auto;
 }
 
 nav ul {
-    padding: 0;
-    margin: 0;
-    display: flex;
-    justify-content: right;
-    list-style: none;
-    font-size: large;
-    gap: 0.4rem;
-}
-/*
-header a::after {display: none;}
-header li a::after {
-    display: block;
-    top: 50%; left: -0.2rem; width: 1px; height: 50%; transform: translate(-50%, -50%);
-    opacity: 50%;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	justify-content: right;
+	list-style: none;
+	font-size: large;
+	gap: 0.4rem;
 }
-header li:first-child a::after {display: none;}
-*/
 
 main {
-    max-width: 80ch;
-    margin-inline: auto;
+	max-width: 80ch;
+	margin-inline: auto;
 }
 
 code:not([class*="language-"]) {
-    background-color: var(--code);
-    color: var(--code-text);
-    padding: 0.2rem;
-    border-radius: 0;
-    clip-path: polygon(0% 0,0% calc(100% - 0.4rem), 0.4rem 100%,100% 100%, 100% 0%);
+	background-color: var(--code);
+	color: var(--code-text);
+	padding: 0.2rem;
+	border-radius: 0;
+	clip-path: polygon(0% 0, 0% calc(100% - 0.4rem), 0.4rem 100%, 100% 100%, 100% 0%);
 }
+
 pre[class*="language-"] {
-    position: relative;
-    padding: 1.5rem 1rem;
-    overflow-x: auto;
-    border-radius: 0;
-    clip-path: polygon(0% 0,0% calc(100% - 0.4rem), 0.4rem 100%,100% 100%, 100% 0%);
-    font-family: "JetBrains Mono", monospace;
+	position: relative;
+	padding: 1.5rem 1rem;
+	overflow-x: auto;
+	border-radius: 0;
+	clip-path: polygon(0% 0, 0% calc(100% - 0.4rem), 0.4rem 100%, 100% 100%, 100% 0%);
+	font-family: "JetBrains Mono", monospace;
 }
+
 pre[class*="language-"] * {
-    font-family: "JetBrains Mono", monospace;
+	font-family: "JetBrains Mono", monospace;
 }
 
 footer {
-    max-width: 80ch;
-    margin-inline: auto;
-    margin-top: 4rem;
+	max-width: 80ch;
+	margin-inline: auto;
+	margin-top: 4rem;
 }
+
 footer .social {
-    margin-top: 1rem;
-    max-width: fit-content;
-    display: flex;
-    gap: 0.2rem;
-    margin-inline: auto;
-    flex-wrap: wrap;
-    justify-content: center;
+	margin-top: 1rem;
+	max-width: fit-content;
+	display: flex;
+	gap: 0.2rem;
+	margin-inline: auto;
+	flex-wrap: wrap;
+	justify-content: center;
 }
 
 .my-age {
-    cursor:help;
-}
-
-picture {
-    display: block;
-    text-align: center;
-    max-width: 100%;
-    margin-block: 2rem;
-}
-picture img {
-    max-width: 100%;
+	cursor: help;
 }
 
 @media screen and (max-width: 80ch) {
-    header h1 {
-        font-size: medium;
-    }
+	header h1 {
+		font-size: medium;
+	}
 }
 
 .mobile-menu {
-    display: none;
+	display: none;
 }
 
 @media screen and (max-width: 720px) {
-    nav {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        background-color: var(--base);
-        z-index: 10000;
-        padding: 1.5rem 0.5rem;
-        transform: scale(0%);
-        filter: saturate(0) brightness(0);
-        pointer-events: none;
-        transition: transform steps(8) 200ms 300ms,filter steps(4) 200ms 0ms;
-        overflow-y: auto;
-    }
-    .mobile-menu {
-        display: block;
-        background: none;
-        color: var(--text);
-        border: none;
-        font-weight: bold;
-        padding: 0.8rem;
-    }
-    
-    nav.open {
-        transform: scale(100%);
-        pointer-events: all;
-        filter: saturate(1) brightness(1);
-        transition: transform steps(8) 200ms,filter steps(4) 200ms 300ms;
-    }
-    nav ul {
-        flex-direction: column;
-    }
-    nav .mobile-menu {
-        width: 100%;
-        text-align: right;
-        margin-bottom: 1rem;
-    }
-    nav ul a {
-        display: block;
-        padding: 0.5rem;
-    }
+	nav {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		background-color: var(--base);
+		z-index: 10000;
+		padding: 1.5rem 0.5rem;
+		transform: scale(0%);
+		filter: saturate(0) brightness(0);
+		pointer-events: none;
+		transition: transform steps(8) 200ms 300ms, filter steps(4) 200ms 0ms;
+		overflow-y: auto;
+	}
+
+	.mobile-menu {
+		display: block;
+		background: none;
+		color: var(--text);
+		border: none;
+		font-weight: bold;
+		padding: 0.8rem;
+	}
+
+	nav.open {
+		transform: scale(100%);
+		pointer-events: all;
+		filter: saturate(1) brightness(1);
+		transition: transform steps(8) 200ms, filter steps(4) 200ms 300ms;
+	}
+
+	nav ul {
+		flex-direction: column;
+	}
+
+	nav .mobile-menu {
+		width: 100%;
+		text-align: right;
+		margin-bottom: 1rem;
+	}
+
+	nav ul a {
+		display: block;
+		padding: 0.5rem;
+	}
 }
 
 .split {
-  display: flex;
+	display: flex;
 }
 
 a.blogpost {
-	display:block;
+	display: block;
 }
+
 a.blogpost:after,
 a.blogpost:before {
 	content: "";
 }
 
-a.blogpost > h3 {
-	margin:0;
+a.blogpost>h3 {
+	margin: 0;
 }
 
 blockquote {
diff --git a/assets/css/theme.css b/assets/css/theme.css
index d35448b..5476101 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -1,13 +1,14 @@
 html {
-    --base: #151617;
-    --base-2: #1d2123;
-    --base-3: #2a3039;
-    --text: #d2e7efff;
-    --code: #1d2123;
-    --code-text: #abd1de;
-    --accent: #278db6;
-    font-family: "Kode Mono", monospace;
+	--base: #151617;
+	--base-2: #1d2123;
+	--base-3: #2a3039;
+	--text: #d2e7efff;
+	--code: #1d2123;
+	--code-text: #abd1de;
+	--accent: #278db6;
+	font-family: "Kode Mono", monospace;
 }
+
 * {
-    font-family: "Kode Mono", monospace;
-}
\ No newline at end of file
+	font-family: "Kode Mono", monospace;
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index d32765e..587ee3e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -3,8 +3,8 @@ const menu = document.getElementById("menu");
 const menuClose = document.getElementById("menu-close");
 
 if (menu && menuOpen && menuClose) {
-    menuOpen.addEventListener("click", () => menu.classList.add("open"));
-    menuClose.addEventListener("click", () => menu.classList.remove("open"));
+	menuOpen.addEventListener("click", () => menu.classList.add("open"));
+	menuClose.addEventListener("click", () => menu.classList.remove("open"));
 }
 
 
@@ -12,24 +12,24 @@ const elements = document.querySelectorAll(".my-age")
 
 const specificDate = new Date("2010-05-11T22:50:00");
 const updateAge = () => {
-    const currentDate = new Date();
-    const age = (
-        (currentDate - specificDate) /
-        (1000 * 60 * 60 * 24 * 365.25)
-    ).toFixed(15);
-    let nextBirthday = new Date(specificDate);
-    nextBirthday.setFullYear(currentDate.getFullYear());
-    if (currentDate > nextBirthday) {
-        nextBirthday.setFullYear(currentDate.getFullYear() + 1);
-    }
-    const timeDiff = nextBirthday - currentDate;
-    const daysLeft = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+	const currentDate = new Date();
+	const age = (
+		(currentDate - specificDate) /
+		(1000 * 60 * 60 * 24 * 365.25)
+	).toFixed(15);
+	let nextBirthday = new Date(specificDate);
+	nextBirthday.setFullYear(currentDate.getFullYear());
+	if (currentDate > nextBirthday) {
+		nextBirthday.setFullYear(currentDate.getFullYear() + 1);
+	}
+	const timeDiff = nextBirthday - currentDate;
+	const daysLeft = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
 
-    elements.forEach(e => {
-        e.textContent = `${age}`;
-        e.title = `${daysLeft} days left`;
-    })
-    requestAnimationFrame(updateAge);
+	elements.forEach(e => {
+		e.textContent = `${age}`;
+		e.title = `${daysLeft} days left`;
+	})
+	requestAnimationFrame(updateAge);
 }
 updateAge();
 
diff --git a/assets/js/morph.js b/assets/js/morph.js
index 728ff1f..aea6dff 100644
--- a/assets/js/morph.js
+++ b/assets/js/morph.js
@@ -1,43 +1,43 @@
 const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@._-";
 
 function morph(element, target) {
-    clearInterval(element._timer);
+	clearInterval(element._timer);
 
-    const start = element.textContent;
-    const length = Math.max(start.length, target.length);
+	const start = element.textContent;
+	const length = Math.max(start.length, target.length);
 
-    let progress = 0;
+	let progress = 0;
 
-    element._timer = setInterval(() => {
-        progress += 0.05;
+	element._timer = setInterval(() => {
+		progress += 0.05;
 
-        const currentLength = Math.round(
-            start.length + (target.length - start.length) * progress
-        );
+		const currentLength = Math.round(
+			start.length + (target.length - start.length) * progress
+		);
 
-        let output = "";
+		let output = "";
 
-        for (let i = 0; i < currentLength; i++) {
-            if (progress > i / currentLength + 0.2 && target[i]) {
-                output += target[i];
-            } else {
-                output += CHARS[Math.floor(Math.random() * CHARS.length)];
-            }
-        }
+		for (let i = 0; i < currentLength; i++) {
+			if (progress > i / currentLength + 0.2 && target[i]) {
+				output += target[i];
+			} else {
+				output += CHARS[Math.floor(Math.random() * CHARS.length)];
+			}
+		}
 
-        element.textContent = output;
+		element.textContent = output;
 
-        if (progress >= 1) {
-            clearInterval(element._timer);
-            element.textContent = target;
-        }
-    }, 15);
+		if (progress >= 1) {
+			clearInterval(element._timer);
+			element.textContent = target;
+		}
+	}, 15);
 }
 
 for (const link of document.querySelectorAll(".morph")) {
-    const original = link.textContent;
-    const alternate = link.dataset.alt;
+	const original = link.textContent;
+	const alternate = link.dataset.alt;
 
-    link.addEventListener("mouseenter", () => morph(link, alternate));
-    link.addEventListener("mouseleave", () => morph(link, original));
+	link.addEventListener("mouseenter", () => morph(link, alternate));
+	link.addEventListener("mouseleave", () => morph(link, original));
 }
diff --git a/assets/js/transitions.js b/assets/js/transitions.js
index 3955a67..a8042b8 100644
--- a/assets/js/transitions.js
+++ b/assets/js/transitions.js
@@ -2,61 +2,61 @@ const displacement = document.getElementById("displacement");
 const noise = document.getElementById("noise");
 
 
-var nextFunc = () => {}
+var nextFunc = () => { }
 function transitionOut(callback) {
-    document.body.style.filter = "url(#transition)"
-    const src = new Number(displacement.getAttribute("scale"));
-    noise.setAttribute("seed",Math.random() * 1000)
-    if (src < 100) {
-        displacement.setAttribute("scale", src + 20 + src);
-        nextFunc = () => transitionOut(callback)
-        requestAnimationFrame(nextFunc)
-    } else {
-        setTimeout(() =>{
-            document.body.style.filter = ""
-        },1000);
-        callback()
-    }
+	document.body.style.filter = "url(#transition)"
+	const src = new Number(displacement.getAttribute("scale"));
+	noise.setAttribute("seed", Math.random() * 1000)
+	if (src < 100) {
+		displacement.setAttribute("scale", src + 20 + src);
+		nextFunc = () => transitionOut(callback)
+		requestAnimationFrame(nextFunc)
+	} else {
+		setTimeout(() => {
+			document.body.style.filter = ""
+		}, 1000);
+		callback()
+	}
 }
 
 function transitionIn() {
-    document.body.style.filter = "url(#transition)"
-    const src = new Number(displacement.getAttribute("scale"));
-    noise.setAttribute("seed",Math.random() * 1000)
-    if (src > 0) {
-        displacement.setAttribute("scale", src - 1 - (Math.max(src,1)/4));
-        nextFunc = () => transitionIn();
-        requestAnimationFrame(nextFunc)
-    } else {
-        displacement.setAttribute("scale", 0);
-        document.body.style.filter = ""
-    }
+	document.body.style.filter = "url(#transition)"
+	const src = new Number(displacement.getAttribute("scale"));
+	noise.setAttribute("seed", Math.random() * 1000)
+	if (src > 0) {
+		displacement.setAttribute("scale", src - 1 - (Math.max(src, 1) / 4));
+		nextFunc = () => transitionIn();
+		requestAnimationFrame(nextFunc)
+	} else {
+		displacement.setAttribute("scale", 0);
+		document.body.style.filter = ""
+	}
 }
 
 if (noise && displacement) {
-    displacement.setAttribute("scale", 200);
-    transitionIn()
-    const links = document.querySelectorAll("a");
-    links.forEach(l => {    
-        if (l.hasAttribute("no-transition")) return;
-        if (l.href.startsWith(location.origin)) {
-            l.addEventListener("click", (e)=>{
-                e.preventDefault()
-                displacement.setAttribute("scale", 0);
-                transitionOut(() => {
-                    location.href = l.href
-                });
-            })
-        }
-    })
+	displacement.setAttribute("scale", 200);
+	transitionIn()
+	const links = document.querySelectorAll("a");
+	links.forEach(l => {
+		if (l.hasAttribute("no-transition")) return;
+		if (l.href.startsWith(location.origin)) {
+			l.addEventListener("click", (e) => {
+				e.preventDefault()
+				displacement.setAttribute("scale", 0);
+				transitionOut(() => {
+					location.href = l.href
+				});
+			})
+		}
+	})
 } else {
-    console.log("Can't do transitions!!")
+	console.log("Can't do transitions!!")
 }
 
 // for when going forwards or back
 window.addEventListener("pageshow", (e) => {
-    if (e.persisted) {
-        displacement.setAttribute("scale", 200);
-        transitionIn();
-    }
+	if (e.persisted) {
+		displacement.setAttribute("scale", 200);
+		transitionIn();
+	}
 });