From d3ffefbd3d9de2378b564e4c6f965c03a5a06113 Mon Sep 17 00:00:00 2001
From: SayaAndy <montferrat@tuta.io>
Date: Wed, 15 Oct 2025 23:23:27 +0700
Subject: feat: adapt layout for phone screens (especially small ones)

---
 views/pages/blog-page.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'views/pages/blog-page.html')

diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index cd7aeba..aadebac 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -17,10 +17,14 @@
 
 {{ define "body" }}
 <div class="bg-background-light flex flex-col inset-shadow px-8 py-4 overflow-y-auto">
+    <p class="xs:hidden font-spectral text-2xl font-bold italic text-main-dark tracking-[.0125rem] mb-1">{{ .Title }}</p>
+    <p class="xs:hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Published }}: {{ .PublishedDate }}</p>
+    <p class="xs:hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Action }}: {{ .ActionDate }}</p>
+    <hr class="xs:hidden border-t-2 border-dotted border-main-dark mt-1 mb-2 w-full ml-auto mr-auto">
     {{ .ParsedMarkdown }}
 {{- if .MapLocationX }}
     <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
-    <div id="map-container" class="relative p-1 flex-none ml-auto mr-auto w-[60%] ar-lt-1.1:w-[80%] h-[40dvh] ar-lt-1.1:h-[30dvh]"></div>
+    <div id="map-container" class="relative p-1 flex-none ml-auto mr-auto w-[60%] ar-lt-0.8:w-[80%] h-[40dvh] ar-lt-0.8:h-[30dvh]"></div>
     <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
 
     <script>
-- 
cgit v1.3.1+13