Improve layout on mobile

1 files changed, 37 insertions, 1 deletions

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);
 	}
 }