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(-)
(limited to 'src')
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