From e34a73ee41738c3107aa4b7568b4cd62aa98d30b Mon Sep 17 00:00:00 2001
From: Thomas Voss <mail@thomasvoss.com>
Date: Mon, 23 Sep 2024 07:16:13 +0200
Subject: Improve layout on mobile

---
 src/style.css | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/style.css b/src/style.css
index 62e3db5..23feff9 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,6 +4,7 @@
 
 :root {
 	color-scheme: light dark;
+	--ref-offset: 2ch;
 }
 
 @media (prefers-color-scheme: light) {
@@ -30,6 +31,41 @@
 	}
 }
 
+@media (max-width: 750px) {
+	h1 { font-size: 2.0rem; }
+	h2 { font-size: 1.5rem; }
+
+	li.article {
+		flex-direction: column;
+
+		time {
+			font-size: 0.9rem;
+		}
+
+		& + & {
+			margin-block-start: 1ch;
+		}
+	}
+
+	aside {
+		width: calc(100% - var(--ref-offset));
+		margin-inline-start: var(--ref-offset);
+	}
+
+	div.head {
+		flex-direction: column;
+		align-items: flex-start !important;
+
+		menu {
+			margin-block: 0;
+		}
+	}
+}
+
+h1, h2 {
+	text-wrap: balance;
+}
+
 body {
 	text-align: justify;
 	width: min(800px, 90%);
@@ -147,7 +183,7 @@ aside {
 	&[data-ref]::before {
 		font-style: normal;
 		position: absolute;
-		margin-inline-start: -2ch;
+		margin-inline-start: calc(-1 * var(--ref-offset));
 		content: attr(data-ref);
 	}
 }
-- 
cgit v1.2.3