Better aesthetic

11 files changed, 100 insertions, 30 deletions

diff --git a/Shakefile b/Shakefile
index e88208b..530bc5a 100644
--- a/Shakefile
+++ b/Shakefile
@@ -3,12 +3,12 @@ shake_minimum_version "0.1"
 shake_doc build
 build() {
 	echo "Building..."
-	python3 build.py3
+	shake_try python3 build.py3
 }
 
 shake_doc sync
 sync() {
-	build
+	shake_try build
 	echo "Syncing..."
 	tar -C "target" -cz "." | ssh botahamec@botahamec.dev tar -C /var/www/botahamec.dev -xz
 	echo "Done!"
diff --git a/base.kuht b/base.kuht
deleted file mode 100755
index bafbfe6..0000000
--- a/base.kuht
+++ /dev/null
@@ -1,21 +0,0 @@
-<head>
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-
-	<link href="/style.css" rel="stylesheet" />
-	<link href="/style-light.css" rel="stylesheet" title="Default Style" />
-	<link href="/style-dark.css" rel="alternate stylesheet" title="Dark Mode" />
-</head>
-
-<block "navbar">
-	<header class="nav">
-		<a class="nav__button screen-reader-focusable" href="#article">Skip Navigation</a>
-		<h1 class="nav__title">Botahamec</h1>
-		<nav class="nav__menu">
-			<menu class="nav__menu">
-				<li class="nav__item"><a class="nav__button" href="/">Home</a></li>
-				<li class="nav__item"><a class="nav__button" href="/blog">Blog</a></li>
-				<li class="nav__item"><a class="nav__button" href="/projects">Projects</a></li>
-			</menu>
-		</nav>
-	</header>
-</block>
diff --git a/build.py3 b/build.py3
index 8adc039..2a9e529 100755
--- a/build.py3
+++ b/build.py3
@@ -3,6 +3,7 @@
 import gzip
 import os
 import shutil
+import sys
 
 import brotli
 
@@ -21,7 +22,10 @@ def compile_all(path: str, target: str):
 			os.mkdir(os.path.join(target, file))
 			compile_all(src, os.path.join(target, file))
 		elif ext == '.kuht':
-			os.system(f"kuht {src} src/base.kuht -o {target}/{base}.html")
+			print(f"Building {src}")
+			exit_code = os.system(f"kuht {src} src/base.kuht -o {target}/{base}.html")
+			if exit_code != 0:
+				sys.exit(exit_code)
 
 
 def move_css(path: str):
diff --git a/src/base.kuht b/src/base.kuht
index f87ea8f..cfb61b5 100755
--- a/src/base.kuht
+++ b/src/base.kuht
@@ -5,6 +5,10 @@
 	<link href="/style.css" rel="stylesheet" />
 	<link href="/style-light.css" rel="stylesheet" title="Default Style" />
 	<link href="/style-dark.css" rel="alternate stylesheet" title="Dark Mode" />
+
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+	<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet" />
 </head>
 
 <block "navbar">
diff --git a/src/blog/color-spaces.kuht b/src/blog/color-spaces.kuht
index ee668b5..20ec846 100644
--- a/src/blog/color-spaces.kuht
+++ b/src/blog/color-spaces.kuht
@@ -42,7 +42,10 @@
 
 <h2>LAB</h2>
 
-The problem with HSL is that is is not perceptually uniform. According to HSL, all of these colors are the same lightness.
+<p>
+	The problem with HSL is that is is not perceptually uniform. According to HSL,
+	all of these colors are the same lightness.
+</p>
 
 <img
 	alt="The HSL color space at 60% lightness. Some parts are clearly lighter than others"
@@ -125,6 +128,7 @@ The problem with HSL is that is is not perceptually uniform. According to HSL, a
 		<li>
 			<a href="https://codepen.io/eeeps/pen/oNmERrJ">https://codepen.io/eeeps/pen/oNmERrJ</a>
 			<a class="return" href="#af-2">return</a>
+		</li>
 	</ol>
 </footer>
-</body
+</body>
diff --git a/src/blog/datetime.kuht b/src/blog/datetime.kuht
index 38bceff..352708b 100644
--- a/src/blog/datetime.kuht
+++ b/src/blog/datetime.kuht
@@ -289,7 +289,7 @@ since midnight.
 Fortunately, in .NET 6, we got the
 <a href="https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-10.0"><code>DateOnly</code></a>
 and
-<a href="https://learn.microsoft.com/en-us/dotnet/api/system.timeonly?view=net-10.0"<code>TimeOnly</code></a>
+<a href="https://learn.microsoft.com/en-us/dotnet/api/system.timeonly?view=net-10.0"><code>TimeOnly</code></a>
 structs. These do exactly what you think they would do.
 </p>
 
diff --git a/src/blog/git-plugins.kuht b/src/blog/git-plugins.kuht
index b26648a..e12006e 100644
--- a/src/blog/git-plugins.kuht
+++ b/src/blog/git-plugins.kuht
@@ -69,3 +69,6 @@ git push --set-upstream origin $BRANCH
 	sillier project would be too long for this blog post, but it'd be cool to see
 	someone make an MMO using Git as the database. The sky is the limit.
 </p>
+
+</article>
+</body>
diff --git a/src/blog/linking.kuht b/src/blog/linking.kuht
index f994765..1a7ea6d 100644
--- a/src/blog/linking.kuht
+++ b/src/blog/linking.kuht
@@ -243,3 +243,6 @@ system.autoUpgrade = {
   the ideas that NixOS provides could provide major benefits for stability.
   It's just about choosing the right compromises.
 </p>
+
+</article>
+</body>
diff --git a/src/blog/named-optional-args.kuht b/src/blog/named-optional-args.kuht
index 874ea57..3721263 100644
--- a/src/blog/named-optional-args.kuht
+++ b/src/blog/named-optional-args.kuht
@@ -784,7 +784,7 @@ spawn(
 	env_clear: true,
 	envs: &filtered_env
 ).expect("printenv failed to start");
-</pre
+</pre>
 
 <p>
 	Bon also provides utilities for emulating named arguments in functions, but
diff --git a/style-light.css b/style-light.css
index a081c3c..8d28d65 100755
--- a/style-light.css
+++ b/style-light.css
@@ -11,6 +11,10 @@ a.return {
 	color: var(--dark-green);
 }
 
+pre,code {
+	background-color: var(--dark-white);
+}
+
 .nav {
 	border-color: var(--dark-white);
 }
diff --git a/style.css b/style.css
index bfb0b2a..8ec8400 100755
--- a/style.css
+++ b/style.css
@@ -1,8 +1,15 @@
 body {
-	max-width: 800px;
+	max-width: 70ch;
 	margin: auto;
 	padding-left: 20px;
 	padding-right: 20px;
+	line-height: 1.5;
+
+	font-display: swap;
+	font-size: 12pt;
+	font-family: "Lato", sans-serif;
+	font-weight: 400;
+	font-feature-settings: "liga";
 
 	--dark-red: #623a46;
 	--red: #8f6370;
@@ -43,9 +50,71 @@ body {
 	--black: #0c0a0f;
 }
 
+h1 {
+	font-size: 2.0rem;
+	font-weight: 700;
+}
+
+h2 {
+	font-size: 1.5rem;
+	font-weight: 600;
+}
+
+h3 {
+	font-size: 1.25rem;
+	font-weight: 600;
+}
+
+h4 {
+	font-size: 1.125rem;
+	font-weight: 600;
+}
+
+h5 {
+	font-size: 1rem;
+	font-weight: 600;
+}
+
+h5 {
+	font-size: 0.875rem;
+	font-weight: 600;
+}
+
+h1,h2,h3,h4,h5,h6 {
+	margin-block-start: 1.5em;
+	margin-block-end: 0.5em;
+	line-height: 1.2;
+}
+
+p {
+	margin-block-end: 1em;
+}
+
+code {
+	font-size: 85%;
+	padding-block: 2px;
+	padding-inline: 3pt;
+	border-radius: 4px;
+	font-family: "Fira Code", monospace;
+	white-space: break-spaces;
+}
+
 pre {
-	margin-left: 25px;
+	margin-inline: 1rem;
+	padding: 0.5rem;
+	border-radius: 8px;
 	overflow-x: auto;
+
+	font-size: 10pt;
+	font-family: "Fira Code", monospace;
+}
+
+ul,ol {
+	margin-block-end: 1em;
+}
+
+li {
+	margin-block-end: 0.25em;
 }
 
 .nav {