WTF am I doing atp

17 files changed, 1070 insertions, 0 deletions

diff --git a/content/README.md b/content/README.md
new file mode 100644
index 0000000..2bf42b0
--- /dev/null
+++ b/content/README.md
@@ -0,0 +1,32 @@
+---
+Title: Welcome
+notoc: true
+---
+
+# Welcome to vosjedev.net
+
+Hi! I am vosjedev. You seem to have found my website!
+
+I am a dutch developer, I write stuff mainly in python, html+css (no js!), and bash. My projects are available on:
+
+- [my git server](https://git.vosjedev.net)
+  this is where all new projects go.
+- [codeberg](https://codeberg.org/vosjedev)
+  here are older projects and 'mirrors'.
+- [github](https://github.com/vosjedev)
+  here are the oldest projects, and collaboration projects before my git server existed.
+
+I'm reachable on multiple locations and for multiple reasons. check [[contact]] for info!
+
+## Spotlight
+Spotlighted projects:
+
+- [Another Custom Issue Tracker (acit)](https://git.vosjedev.net/acit.git/) is an Email-Driven Issue Tracker
+- [webradio](/webradio/) is a simple minimalistic ad-free webpage for listening to dutch radio over the web
+- [mapgame](https://github.com/Vosjedev/mapgame) is my 'first' program (written in bash). it employs some OOP ways of working before I ever heard of OOP, and it's kinda cursed.
+
+## History of this website
+Originally I started with a website hosted on google drive via some website, then later I moved to github pages. Eventually I got a raspberrypi and a domain, and that's what you're looking at now. However, for a long time the website hosted here was just a filelisting with README.md rendering. Now it's actually a fancy website!
+
+## History of me (not interesting)
+Roughly 5 years ago, I started messing around in html+css in VSCode and on a random app on my phone. I learned bash quickly after (more or less accidentally, I was trying to learn _all_ the commands my shell could do - not realising how shells work), and after a few years of getting into cursed levels of bash I started writing python. I did some cursed stuff, learned how to _actually_ write python, and now I've been writing python for 3 years.
diff --git a/content/contact.md b/content/contact.md
new file mode 100644
index 0000000..1eb9a23
--- /dev/null
+++ b/content/contact.md
@@ -0,0 +1,14 @@
+
+# Contact
+Given you are on this page you are seeking contact with me.
+
+I employ different ways of contacting for different purposes.
+
+- If you are looking to contact me for <span class="orange">anything related to this website</span> or another service hosted under the vosjedev.net domain, you should send an email to `vosje+web [at] vosjedev.net`{.orange} (replace the `[at]` with `@`) unless stated otherwise in the service.
+- If you are looking to contact me <span class="orange">for anything else</span>, shoot an email to `vosje [at] vosjedev.net`{.orange} (once again, replace the `[at]` with `@`)
+
+
+- If you are seeking contact <span class="orange">for professional reasons</span>, unless you're a friend, you're probably out of luck right now, but it's still worth a try. Use `vosje [at] vosjedev.net`.
+
+
+- If you are a friend, you have my discord or phone number. Discord is fastest in weekends and holidays, calling on weekdays.
diff --git a/content/projects.md b/content/projects.md
new file mode 100644
index 0000000..ad9b1f0
--- /dev/null
+++ b/content/projects.md
@@ -0,0 +1,4 @@
+
+# Projectlist
+
+This is a list of projects. This page is still a todo.
diff --git a/html/footer.html b/html/footer.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/html/footer.html
diff --git a/html/header.html b/html/header.html
new file mode 100644
index 0000000..fbf07e3
--- /dev/null
+++ b/html/header.html
@@ -0,0 +1,19 @@
+
+<div class="title">
+	<div class="left">
+		<img src="https://static.vosjedev.net/logo/vosjedev-art-64x.png" alt="LOGO">
+		<span><span style="color: var(--brand-colour);">vosjedev</span>.net</span>
+	</div>
+	<div class="right">
+	</div>
+</div>
+
+<nav class="second">
+	<ul>
+	<li><a href="/">Home</a></li>
+	<li><a href="/projects.html">Projects</a></li>
+	<li><a href="/archive.html">Archive</a></li>
+	<li><a href="/contact.html">Contact</a></li>
+	<li><a href="/services.html">Services</a></li>
+	</ul>
+</nav>
diff --git a/html/pagetemplate.html b/html/pagetemplate.html
new file mode 100644
index 0000000..4a312c9
--- /dev/null
+++ b/html/pagetemplate.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>{title} - vosjedev.net</title>
+		<link href="static/style.css" rel="stylesheet">
+	</head>
+	<body>
+		<header>
+			{header}
+		</header>
+
+		<div class="main-layout">
+			<nav>
+			<details open> <summary>Tap to toggle TOC</summary>
+				{toc}
+			</details>
+			</nav>
+
+			<main>
+				{content}
+			</main>
+
+			<div class="filler"></div>
+		</div>
+
+		<div></div>
+
+		<footer>
+			{footer}
+		</footer>
+	
+	</body>
+</html>
diff --git a/out/contact.html b/out/contact.html
new file mode 100644
index 0000000..da88a83
--- /dev/null
+++ b/out/contact.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title><No title> - vosjedev.net</title>
+		<link href="static/style.css" rel="stylesheet">
+	</head>
+	<body>
+		<header>
+			
+<div class="title">
+	<div class="left">
+		<img src="https://static.vosjedev.net/logo/vosjedev-art-64x.png" alt="LOGO">
+		<span><span style="color: var(--brand-colour);">vosjedev</span>.net</span>
+	</div>
+	<div class="right">
+	</div>
+</div>
+
+<nav class="second">
+	<ul>
+	<li><a href="/">Home</a></li>
+	<li><a href="/projects.html">Projects</a></li>
+	<li><a href="/archive.html">Archive</a></li>
+	<li><a href="/contact.html">Contact</a></li>
+	<li><a href="/services.html">Services</a></li>
+	</ul>
+</nav>
+
+		</header>
+
+		<div class="main-layout">
+			<nav>
+			<details open> <summary>Tap to toggle TOC</summary>
+				<div class="toc">
+<ul>
+<li><a href="#contact">Contact</a></li>
+</ul>
+</div>
+
+			</details>
+			</nav>
+
+			<main>
+				<h1 id="contact">Contact</h1>
+<p>Given you are on this page you are seeking contact with me.</p>
+<p>I employ different ways of contacting for different purposes.</p>
+<ul>
+<li>If you are looking to contact me for <span class="orange">anything related to this website</span> or another service hosted under the vosjedev.net domain, you should send an email to <code class="orange">vosje+web [at] vosjedev.net</code> (replace the <code>[at]</code> with <code>@</code>) unless stated otherwise in the service.</li>
+<li>
+<p>If you are looking to contact me <span class="orange">for anything else</span>, shoot an email to <code class="orange">vosje [at] vosjedev.net</code> (once again, replace the <code>[at]</code> with <code>@</code>)</p>
+</li>
+<li>
+<p>If you are seeking contact <span class="orange">for professional reasons</span>, unless you're a friend, you're probably out of luck right now, but it's still worth a try. Use <code>vosje [at] vosjedev.net</code>.</p>
+</li>
+<li>
+<p>If you are a friend, you have my discord or phone number. Discord is fastest in weekends and holidays, calling on weekdays.</p>
+</li>
+</ul>
+			</main>
+
+			<div class="filler"></div>
+		</div>
+
+		<div></div>
+
+		<footer>
+			
+		</footer>
+	
+	</body>
+</html>
diff --git a/out/index.html b/out/index.html
new file mode 100644
index 0000000..c34a9e2
--- /dev/null
+++ b/out/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Welcome - vosjedev.net</title>
+		<link href="static/style.css" rel="stylesheet">
+	</head>
+	<body>
+		<header>
+			
+<div class="title">
+	<div class="left">
+		<img src="https://static.vosjedev.net/logo/vosjedev-art-64x.png" alt="LOGO">
+		<span><span style="color: var(--brand-colour);">vosjedev</span>.net</span>
+	</div>
+	<div class="right">
+	</div>
+</div>
+
+<nav class="second">
+	<ul>
+	<li><a href="/">Home</a></li>
+	<li><a href="/projects.html">Projects</a></li>
+	<li><a href="/archive.html">Archive</a></li>
+	<li><a href="/contact.html">Contact</a></li>
+	<li><a href="/services.html">Services</a></li>
+	</ul>
+</nav>
+
+		</header>
+
+		<div class="main-layout">
+			<nav>
+			<details open> <summary>Tap to toggle TOC</summary>
+				
+			</details>
+			</nav>
+
+			<main>
+				<h1 id="welcome-to-vosjedevnet">Welcome to vosjedev.net</h1>
+<p>Hi! I am vosjedev. You seem to have found my website!</p>
+<p>I am a dutch developer, I write stuff mainly in python, html+css (no js!), and bash. My projects are available on:</p>
+<ul>
+<li><a href="https://git.vosjedev.net">my git server</a><br />
+  this is where all new projects go.</li>
+<li><a href="https://codeberg.org/vosjedev">codeberg</a><br />
+  here are older projects and 'mirrors'.</li>
+<li><a href="https://github.com/vosjedev">github</a><br />
+  here are the oldest projects, and collaboration projects before my git server existed.</li>
+</ul>
+<p>I'm reachable on multiple locations and for multiple reasons. check <a class="wikilink" href="/contact/">contact</a> for info!</p>
+<h2 id="spotlight">Spotlight</h2>
+<p>Spotlighted projects:</p>
+<ul>
+<li><a href="https://git.vosjedev.net/acit.git/">Another Custom Issue Tracker (acit)</a> is an Email-Driven Issue Tracker</li>
+<li><a href="/webradio/">webradio</a> is a simple minimalistic ad-free webpage for listening to dutch radio over the web</li>
+<li><a href="https://github.com/Vosjedev/mapgame">mapgame</a> is my 'first' program (written in bash). it employs some OOP ways of working before I ever heard of OOP, and it's kinda cursed.</li>
+</ul>
+<h2 id="history-of-this-website">History of this website</h2>
+<p>Originally I started with a website hosted on google drive via some website, then later I moved to github pages. Eventually I got a raspberrypi and a domain, and that's what you're looking at now. However, for a long time the website hosted here was just a filelisting with README.md rendering. Now it's actually a fancy website!</p>
+<h2 id="history-of-me-not-interesting">History of me (not interesting)</h2>
+<p>Roughly 5 years ago, I started messing around in html+css in VSCode and on a random app on my phone. I learned bash quickly after (more or less accidentally, I was trying to learn <em>all</em> the commands my shell could do - not realising how shells work), and after a few years of getting into cursed levels of bash I started writing python. I did some cursed stuff, learned how to <em>actually</em> write python, and now I've been writing python for 3 years.</p>
+			</main>
+
+			<div class="filler"></div>
+		</div>
+
+		<div></div>
+
+		<footer>
+			
+		</footer>
+	
+	</body>
+</html>
diff --git a/out/projects.html b/out/projects.html
new file mode 100644
index 0000000..3d6da25
--- /dev/null
+++ b/out/projects.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title><No title> - vosjedev.net</title>
+		<link href="static/style.css" rel="stylesheet">
+	</head>
+	<body>
+		<header>
+			
+<div class="title">
+	<div class="left">
+		<img src="https://static.vosjedev.net/logo/vosjedev-art-64x.png" alt="LOGO">
+		<span><span style="color: var(--brand-colour);">vosjedev</span>.net</span>
+	</div>
+	<div class="right">
+	</div>
+</div>
+
+<nav class="second">
+	<ul>
+	<li><a href="/">Home</a></li>
+	<li><a href="/projects.html">Projects</a></li>
+	<li><a href="/archive.html">Archive</a></li>
+	<li><a href="/contact.html">Contact</a></li>
+	<li><a href="/services.html">Services</a></li>
+	</ul>
+</nav>
+
+		</header>
+
+		<div class="main-layout">
+			<nav>
+			<details open> <summary>Tap to toggle TOC</summary>
+				<div class="toc">
+<ul>
+<li><a href="#projectlist">Projectlist</a></li>
+</ul>
+</div>
+
+			</details>
+			</nav>
+
+			<main>
+				<h1 id="projectlist">Projectlist</h1>
+<p>This is a list of projects. This page is still a todo.</p>
+			</main>
+
+			<div class="filler"></div>
+		</div>
+
+		<div></div>
+
+		<footer>
+			
+		</footer>
+	
+	</body>
+</html>
diff --git a/out/static b/out/static
new file mode 120000
index 0000000..30aba11
--- /dev/null
+++ b/out/static
@@ -0,0 +1 @@
+/SD/workbench/website/static
\ No newline at end of file
diff --git a/static.bak/style.css b/static.bak/style.css
new file mode 100644
index 0000000..04e07d6
--- /dev/null
+++ b/static.bak/style.css
@@ -0,0 +1,256 @@
+
+
+:root {
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+	--colour: #000000;
+	--secondary-colour: #202020;
+
+	--primary-background: #fafafa;
+	--secondary-background: #dadada;
+	--tertiary-background: #bbbbbb;
+
+	--background-inverted: #101010;
+	--colour-inverted: #cacaca;
+
+	--link-colour: #3344dd;
+	--link-colour-visited: #804180;
+
+	--link-colour-secondary: #202FBC; /* link colours for on secondary bg */
+	--link-colour-visited-secondary: #885588;
+
+	--brand-colour: #ff8100;
+	--brand-bg: #b15900;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--colour: #fafafa;
+		--secondary-colour: #acacac;
+
+		--primary-background: #202020;
+		--secondary-background: #404040;
+		--tertiary-background: #5f5f5f;
+
+		--background-inverted: #fafafa;
+		--colour-inverted: #000000;
+
+		--link-colour: #2491FF;
+		--link-colour-visited: #9875FF;
+
+		--link-colour-secondary: #61B0FF;
+		--link-colour-visited-secondary: #B87AB8;
+	}
+}
+
+:root {
+	background-color: var(--primary-background);
+	color: var(--colour);
+}
+
+body {
+    margin: 0px;
+}
+main {
+	margin: 5px;
+}
+
+a {
+	color: var(--link-colour);
+}
+a:visited {
+	color: var(--link-colour-visited);
+}
+
+nav ul {
+	list-style-type: none;
+	margin: 0px;
+	padding: 0px;
+	li {
+		float: left;
+	}
+	a:hover {
+		background-color: var(--brand-bg);
+		color: #fcfcfc;
+	}
+}
+
+header {
+	.title {
+		background-color: var(--brand-colour);
+		color: #000000;
+	}
+
+	background-color: var(--tertiary-background);
+	margin-bottom: 20px;
+
+	.second {
+		background-color: var(--secondary-background);
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+		padding: 2px;
+	}
+	.pathskip {
+		position: absolute;
+		display: inline-block;
+		line-height: 1;
+		transform: translateY(1rem);
+	}
+	.pathskip:not(:focus) {
+		transform: translateY(-4rem);
+	}
+}
+
+footer {
+	.footer-main {
+		padding: 2px;
+		background-color: var(--secondary-background);
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+	}
+
+ 	margin-top: 40px;
+}
+
+
+.dirlist {
+	.dirlist-header {
+		border-bottom: 1px solid;
+		background-color: var(--tertiary-background);
+	}
+	.dirlist-listing:nth-child(2n) {
+		background-color: var(--primary-background)
+	}
+	.dirlist-listing:nth-child(2n+1) {
+		background-color: var(--secondary-background);
+
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+	}
+}
+
+.error-heading {
+	color: #ff2020;
+}
+
+.mediaplayer {
+	display: grid;
+	height: 100%;
+	img, video {
+		max-width: 100%;
+		max-height: 70vh;
+		margin: auto;
+		object-fit: contain;
+	}
+
+	audio {
+		width:90vw;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.media-below {
+		margin: auto;
+		margin-top: 30px;
+		margin-bottom: 0px;
+	}
+
+	#meta {
+		tr, td, th {
+			border: 1px solid var(--colour);
+		}
+		th {
+			border-width: 2px;
+		}
+	}
+}
+
+
+.line {
+	width: 100%;
+	border-bottom: 2px solid var(--colour);
+	margin-top: 5px;
+	margin-bottom: 5px;
+	content: "";
+}
+
+.textviewer {
+	.highlighted {
+		margin: auto;
+		width: calc( 100% - 20px);
+		height: calc( 75vh );
+		overflow: scroll;
+		padding: 5px;
+	}
+	/*.precontent {
+	}*/
+}
+
+.nobullets {
+	list-style: none;
+}
+
+.markdown {
+	.toc ul li a {
+		display: block;
+	}
+	.toc ul {
+		padding-left: 5px;
+		list-style: none;
+	}
+	.toc ul li ul {
+		padding-left: 20px;
+		border-left: 1px solid var(--colour);
+	}
+	.tocparent {
+		background: var(--secondary-background);
+
+		width: 19%;
+		position: fixed;
+
+		overflow: auto;
+
+		height: 100%;
+		margin: 0px;
+
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+	}
+	.main {
+		width: 80%;
+		margin-left: calc(19% + 1%); /* first percentage is same value as .tocparent width */
+	}
+
+	.hidden:not(:focus) { /*TODO: make it actually hide properly, https://www.makethingsaccessible.com/guides/creating-a-skip-to-content-link/ */
+		transform: translateY(-2rem);
+	}
+
+	@media (max-width: 1100px) {
+		.main {
+			width: 70%;
+			margin-left: calc(29% + 1%);
+		}
+		.tocparent {
+			width: 29%;
+		}
+	}
+	@media (max-width: 940px) {
+		.tocparent {
+			width: 100%;
+			position:unset;
+			display:block;
+		}
+		.toc ul li a {
+			display: inline; /* to stop accidentally opening links when tapping in "empty" area*/
+		}
+		.main {
+			width:100%;
+			margin-left: unset;
+		}
+		.hidden:not(:focus) {
+			transform: unset;
+		}
+	}
+}
+
+
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..76bb853
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,303 @@
+
+
+:root {
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+	--colour: #000000;
+	--secondary-colour: #acacac;
+
+	--primary-background: #fafafa;
+	--secondary-background: #404040;
+	--tertiary-background: #5f5f5f;
+
+	--background-inverted: #101010;
+	--colour-inverted: #cacaca;
+
+	--link-colour: #D17300;
+	--link-colour-visited: #D17300;
+
+	--link-colour-secondary: #FF962E;
+	--link-colour-visited-secondary: #FF962E;
+
+	--brand-colour: #ff8100;
+	--brand-bg: #b15900;
+}
+
+:root {
+	background-color: #000000;
+	color: var(--colour);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--colour: #fafafa;
+
+		--primary-background: #202020;
+
+		--background-inverted: #fafafa;
+		--colour-inverted: #000000;
+
+		--link-colour: #ff8100;
+		--link-colour-visited: #ff8100;
+
+		background-color: var(--primary-background);
+	}
+}
+
+body {
+    margin: 0px;
+	 padding: 0px;
+}
+
+.main-layout {
+	margin: 5px;
+	display: flex;
+
+	nav, .filler {
+		width: 20%
+	}
+	main {
+		width: 60%;
+		max-width: 1000px;
+	}
+	.toc ul {
+		padding-left: 25px;
+	}
+	.toc {
+		padding-right: 5px;
+	}
+
+}
+@media (min-width: 780px) {
+	.main-layout nav details summary { display: none; }
+}
+@media (max-width: 1150px) {
+.main-layout {
+	.filler { width: 0px; display: none; }
+	main { width: 80%; }
+}
+}
+@media (max-width: 780px) {
+.main-layout{
+	display: block;
+
+	main {
+		width: 100%;
+	}
+
+	nav {
+		background-color: var(--secondary-background);
+		width: unset;
+		details {
+			padding-top: 10px;
+			padding-bottom: 10px;
+		}
+	}
+}}
+
+
+a {
+	color: var(--link-colour);
+}
+a:visited {
+	color: var(--link-colour-visited);
+}
+
+header {
+	margin-top: 0px;
+
+	.title {
+		background-color: var(--tertiary-background);
+		color: var(--secondary-colour);
+		height: 35px;
+		margin: 7px;
+		border: 2px solid #F86F00;
+		border-radius: 6px;
+
+		img {
+			max-height: 90%;
+			/* -webkit-filter: drop-shadow(1px 1px 1px #222); */
+			/* filter: drop-shadow(1px 1px 1px #222); */
+		}
+	}
+
+	.title > div {
+		display: flex;
+		align-items: center;
+		height: 100%;
+	}
+	.title > div > * {
+		margin-left: 5px;
+		margin-right: 5px;
+	}
+	.title .left {
+		float: left;
+	}
+	.title .right {
+		float: right;
+	}
+
+	.second {
+		background-color: var(--secondary-background);
+		color: var(--secondary-colour);
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+		/* padding: 2px; */
+		padding-left: 10px;
+		padding-right: 10px;
+		border-bottom: 1px solid var(--brand-colour);
+		border-top: 1px solid var(--brand-colour);
+
+		ul {
+			padding: 0;
+			margin: 0;
+			overflow: hidden;
+			list-style-type: none;
+		}
+		ul li {
+			display: block;
+			float: left;
+		}
+
+		ul li a {
+			padding: 2px;
+			text-decoration: none;
+		}
+		ul li:after {
+			content: "|";
+			padding-left: 4px;
+			padding-right: 4px;
+		}
+		ul li:last-child:after {
+			content:""
+		}
+
+		ul li a:hover {
+			background-color: var(--brand-bg);
+			color: #000000;
+		}
+	}
+	.pathskip {
+		position: absolute;
+		display: inline-block;
+		line-height: 1;
+		transform: translateY(1rem);
+	}
+	.pathskip:not(:focus) {
+		transform: translateY(-4rem);
+	}
+}
+
+footer {
+	.footer-main {
+		padding: 2px;
+		background-color: var(--secondary-background);
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+	}
+
+ 	margin-top: 40px;
+}
+
+
+.dirlist {
+	.dirlist-header {
+		border-bottom: 1px solid;
+		background-color: var(--tertiary-background);
+	}
+	.dirlist-listing:nth-child(2n) {
+		background-color: var(--primary-background)
+	}
+	.dirlist-listing:nth-child(2n+1) {
+		background-color: var(--secondary-background);
+
+		--link-colour: var(--link-colour-secondary);
+		--link-colour-visited: var(--link-colour-visited-secondary);
+	}
+}
+
+.error-heading {
+	color: #ff2020;
+}
+
+.mediaplayer {
+	display: grid;
+	height: 100%;
+	img, video {
+		max-width: 100%;
+		max-height: 70vh;
+		margin: auto;
+		object-fit: contain;
+	}
+
+	audio {
+		width:90vw;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.media-below {
+		margin: auto;
+		margin-top: 30px;
+		margin-bottom: 0px;
+	}
+
+	#meta {
+		tr, td, th {
+			border: 1px solid var(--colour);
+		}
+		th {
+			border-width: 2px;
+		}
+	}
+}
+
+
+.line {
+	width: 100%;
+	border-bottom: 2px solid var(--brand-colour);
+	margin-top: 5px;
+	margin-bottom: 5px;
+	content: "";
+}
+
+.highlighted {
+	margin: auto;
+	width: calc( 100% - 20px);
+	height: calc( 75vh );
+	overflow: scroll;
+	padding: 5px;
+}
+/*.precontent {
+}*/
+
+
+.nobullets {
+	list-style: none;
+}
+
+main {
+	ul {
+		padding-left: 25px;
+	}
+}
+@media (prefers-color-scheme: light) {
+	.main-layout {
+		background-color: var(--primary-background);
+	}
+}
+
+code {
+	border: 1px solid var(--brand-colour);
+	border-radius: 5px;
+	padding-left: 2px;
+	padding-right: 2px;
+	@media (prefers-color-scheme: light) {
+		color: var(--colour-inverted);
+		background-color: var(--background-inverted);
+	}
+}
+
+.orange {
+	color: var(--brand-colour);
+}
diff --git a/tools/__pycache__/discord_md.cpython-313.pyc b/tools/__pycache__/discord_md.cpython-313.pyc
new file mode 100644
index 0000000..3650153
--- /dev/null
+++ b/tools/__pycache__/discord_md.cpython-313.pyc
diff --git a/tools/dc_md/__pycache__/simples.cpython-313.pyc b/tools/dc_md/__pycache__/simples.cpython-313.pyc
new file mode 100644
index 0000000..f90b48b
--- /dev/null
+++ b/tools/dc_md/__pycache__/simples.cpython-313.pyc
diff --git a/tools/dc_md/simples.py b/tools/dc_md/simples.py
new file mode 100644
index 0000000..ffae2fb
--- /dev/null
+++ b/tools/dc_md/simples.py
@@ -0,0 +1,88 @@
+
+# literaly the example at https://python-markdown.github.io/extensions/api/#inlineprocessors
+# but modified to use ~~text~~ instead of --text--
+
+from markdown.inlinepatterns import InlineProcessor
+from markdown.blockprocessors import BlockProcessor
+from markdown import util
+from markdown.extensions import Extension
+import xml.etree.ElementTree as etree
+import re
+
+
+class DelInlineProcessor(InlineProcessor):
+    def handleMatch(self, m, data):
+        el = etree.Element('del')
+        el.text = m.group(1)
+        return el, m.start(0), m.end(0)
+
+class DelExtension(Extension):
+    def extendMarkdown(self, md):
+        DEL_PATTERN = r'~~(.*?)~~'  # like ~~del~~
+        md.inlinePatterns.register(DelInlineProcessor(DEL_PATTERN, md), 'del', 175)
+
+
+# once again, but this time for __underlined__
+# works a bit weird with italic-underlined like ___this___. use __*this*__ instead.
+
+class UInlineProcessor(InlineProcessor):
+    def handleMatch(self, m, data):
+        el = etree.Element('u')
+        el.text = m.group(1)
+        return el, m.start(0), m.end(0)
+
+class UExtension(Extension):
+    def extendMarkdown(self, md):
+        U_PATTERN = r'__(.*?)__'  # like __underline__
+        md.inlinePatterns.register(UInlineProcessor(U_PATTERN, md), 'u', 175)
+
+
+# for small text
+# taken from https://github.com/Python-Markdown/markdown/blob/6347c57c8f309dcb0aaaa67b60d0f0039ff44484/markdown/blockprocessors.py#L284
+# and modified to use `-# ` instead of `> `
+class SmallTextProcessor(BlockProcessor):
+    """ Process small text. """
+
+    RE = re.compile(r'(^|\n)[ ]{0,3}-\#[ ]?(.*)')
+
+    def test(self, parent: etree.Element, block: str) -> bool:
+        return bool(self.RE.search(block)) and not util.nearing_recursion_limit()
+
+    def run(self, parent: etree.Element, blocks: list[str]) -> None:
+        block = blocks.pop(0)
+        m = self.RE.search(block)
+        if m:
+            before = block[:m.start()]  # Lines before small
+            # Pass lines before small in recursively for parsing first.
+            self.parser.parseBlocks(parent, [before])
+            # Remove `-# ` from beginning of each line.
+            block = '\n'.join(
+                [self.clean(line) for line in block[m.start():].split('\n')]
+            )
+        sibling = self.lastChild(parent)
+        if sibling is not None and sibling.tag == "small":
+            # Previous block was a small so set that as this blocks parent
+            quote = sibling
+        else:
+            # This is a new small. Create a new parent element.
+            quote = etree.SubElement(parent, 'small')
+        # Recursively parse block with small as parent.
+        # change parser state so smalls embedded in lists use `p` tags
+        self.parser.state.set('small')
+        self.parser.parseChunk(quote, block)
+        self.parser.state.reset()
+
+    def clean(self, line: str) -> str:
+        """ Remove `-#` from beginning of a line. """
+        m = self.RE.match(line)
+        if line.strip() == "-#":
+            return ""
+        elif m:
+            return m.group(2)
+        else:
+            return line
+
+
+class SmallExtension(Extension):
+   def extendMarkdown(self, md):
+       md.parser.blockprocessors.register(SmallTextProcessor(md.parser), 'small', 175)
diff --git a/tools/discord_md.py b/tools/discord_md.py
new file mode 100644
index 0000000..127a9ad
--- /dev/null
+++ b/tools/discord_md.py
@@ -0,0 +1,29 @@
+
+import markdown
+
+# markdown extensions
+
+## new code:
+from dc_md.simples import (
+		DelExtension,
+		UExtension,
+		SmallExtension
+		)
+
+md=markdown.Markdown(extensions=[
+	'meta',
+	'toc',
+	'extra',
+	'codehilite',
+	'nl2br',
+	'wikilinks',
+	DelExtension(),
+	UExtension(),
+	SmallExtension()
+	])
+
+
+if __name__=='__main__':
+	import sys
+	print(convert(sys.stdin.read()).convert())
+
diff --git a/tools/gen.py b/tools/gen.py
new file mode 100644
index 0000000..e2f65e1
--- /dev/null
+++ b/tools/gen.py
@@ -0,0 +1,80 @@
+import os, shutil
+from discord_md import md
+import json
+from collections import UserDict
+
+class IgnoreUnfoundPlaceholders(UserDict):
+	"""Wrapper around dicts for using in str.format()
+	It basically tries to lookup the key it gets, and if the key doesn't exist,
+	it returns ``{keyname}`` where ``keyname`` is the key it got
+	"""
+	def __missing__(self, key):
+		return "{%s}"%str(key)
+
+# with open("conf.json", "r") as fd:
+# 	conf=json.load(fd)
+
+with open("html/footer.html","r") as fd:
+	footer=fd.read()
+
+with open("html/header.html","r") as fd:
+	header=fd.read()
+
+with open("html/pagetemplate.html","r") as fd:
+	template=fd.read()
+
+template=template.format_map(
+	IgnoreUnfoundPlaceholders(header=header, footer=footer)
+)
+
+if os.path.isdir("out"):
+	shutil.rmtree("out")
+
+out=os.path.abspath('out')
+os.makedirs(out)
+os.symlink(os.path.abspath("static"), os.path.join(out,"static"), True)
+#os.chdir("content")
+
+def processdir(path):
+	print("processing",path)
+	os.chdir(path)
+	parent=os.path.dirname(path)
+	for file in os.listdir():
+		if file.endswith(".md"):
+
+			with open(file, "r") as fd:
+				print("| reading",file)
+				text=md.convert(fd.read())
+			
+			meta:dict=md.Meta
+			print("Meta:",meta)
+			section=meta.get("section",[""])[0]
+
+			html=template.format(
+				title=meta.get("title",["<No title>"])[0] + (" - "+section if section else ''),
+				section=section,
+				content=text,
+				toc=md.toc if not meta.get("notoc") else ""
+			)
+
+			newname=file.removesuffix(".md")+".html"
+			newname=newname.replace("README","index")
+			
+			target=os.path.join(out, section)
+			if not os.path.isdir(target):
+				os.makedirs(target)
+
+			with open(os.path.join(out, section, newname), "x") as fd:
+				print("| writing")
+				fd.write(html)
+
+		elif os.path.isdir(file):
+			processdir(os.path.join(path,file))
+		
+		else:
+			shutil.copy2(file, os.path.join(out, os.path.basename(path)))
+	
+	os.chdir(parent)
+
+processdir("./content")
+