fixed layout

public/css/bundle.css

@@ -1,30 +1,30 @@
 /* See https://codeberg.org/lucajunge/css-reset for details */
 @import url(./reset.css);
 
-/* Custom fonts */
 @import url(./fonts.css);
 
-@import url(./margins.css);
-
 @import url(./icons.css);
 
+@import url(./util.css);
+
+@import url(./post.css);
+
 :root {
 	--font-family: "Source Sans 3", -apple-system, system-ui, sans-serif;
 	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono,
 		Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
 		Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
 		Courier, monospace;
-}
-
-:root {
-	--background-color: #121212;
-	--background-color-dark: #080808;
+	--background-color: #242424;
+	--background-color-strong: #080808;
+	--text-color: #f3f3f3;
 	--accent-color: #daa520;
 }
 
 html,
 body {
 	font-family: var(--font-family);
+	color: var(--text-color);
 	background-color: var(--background-color);
 }
 
@@ -40,6 +40,18 @@ h6 {
 	color: var(--accent-color);
 }
 
+h1 {
+	font-size: 1.6em;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin-block: 0.5em 0.7em;
+}
+
 .header {
 	padding: 1rem;
 	display: flex;
@@ -61,9 +73,18 @@ h6 {
 }
 
 .footer div {
-	background-color: #080808;
+	background-color: var(--background-color-strong);
 	border-radius: 4px;
-	padding: 2px 4px 1px 2px;
+	padding: 2px 4px 1px 4px;
+}
+
+.tag {
+	padding: 3px 6px;
+	background-color: var(--background-color-strong);
+	margin-left: 4px;
+	display: inline-block;
+	border-radius: 4px;
+	font-size: 0.8em;
 }
 
 .recent-posts-container {
@@ -120,5 +141,24 @@ h6 {
 	font-weight: bold;
 	border-radius: 4px;
 	padding: 2px 7px 5px 7px;
-	background-color: var(--background-color-dark);
+	background-color: var(--background-color-strong);
+}
+
+/* Light theme */
+@media (prefers-color-scheme: light) {
+	:root {
+		--text-color: #242424;
+		--background-color: #f3f3f3;
+		--background-color-strong: #ababab;
+	}
+}
+
+.home main {
+	display: flex;
+	flex-direction: column;
+	max-width: 786px;
+}
+
+.home main * {
+	max-width: 786px;
 }

public/css/icons.css

@@ -5,6 +5,15 @@
 	font-size: 24px;
 }
 
+.ti-font-size {
+	font-size: 1em;
+}
+
+.ti-xsmall,
+.ti-xtra-small {
+	font-size: 14px;
+}
+
 .ti.small {
 	font-size: 16px;
 }

public/css/margins.css

@@ -1,3 +0,0 @@
-.margin-small {
-	margin: 12px;
-}

public/css/post.css

@@ -0,0 +1,41 @@
+.post main {
+	display: flex;
+	flex-direction: column;
+	max-width: 786px;
+}
+
+.post main * {
+	max-width: 786px;
+}
+
+.post nav a {
+	background-color: var(--background-color-strong);
+	border-radius: 8px;
+	padding: 8px 12px;
+	display: inline-block;
+	text-decoration: none;
+	color: inherit;
+	font-weight: bold;
+	margin-block: 0px 8px;
+}
+
+.post #post-info {
+	display: flex;
+	max-width: 786px;
+	flex-direction: column;
+	justify-content: center;
+	padding-block-end: 0px;
+}
+
+.post h2 {
+	font-size: 1.6em;
+	font-weight: bold;
+}
+
+.post p ~ h2 {
+	margin-block: 2em 0.5em;
+}
+
+.post p ~ h3 {
+	margin-block: 1.5em 0.5em;
+}

public/css/util.css

@@ -0,0 +1,23 @@
+.center {
+	justify-self: center;
+}
+
+.margin-small {
+	margin: 12px;
+}
+
+.margin-right-small {
+	margin-right: 4px;
+}
+
+.margin-left-small {
+	margin-left: 4px;
+}
+
+.padding-small {
+	padding: 12px;
+}
+
+.margin-auto {
+	margin: 0 auto;
+}