From adec305bc5603ad4f19eeb7390b4c88977836326 Mon Sep 17 00:00:00 2001
From: Ivan Reshetnikov <ordinarydev@protonmail.com>
Date: Wed, 18 Oct 2023 22:05:51 +0500
Subject: [PATCH] Optimize main page for mobile devices

---
 src/components/Note.astro | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/Note.astro b/src/components/Note.astro
index 2bfb070..7186002 100644
--- a/src/components/Note.astro
+++ b/src/components/Note.astro
@@ -9,13 +9,30 @@ const { date, title, href } = Astro.props
 ---
 
 <div class="note">
-  <div>{ date }</div> — <a href={href}>{ title }</a>
+  <div class="date">{ date }</div>
+  <div class="dash">—</div>
+  <a href={href}>{ title }</a>
 </div>
 
 <style>
   .note {
-    display: flex;
-    gap: 6px;
-    margin-bottom: 5px;
+    margin-bottom: 15px;
+  }
+  .dash {
+    display: none;
+  }
+
+  @media screen and (min-width: 600px) {
+    .note {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 5px;
+    }
+    .date {
+      min-width: 121px;
+    }
+    .dash {
+      display: block;
+    }
   }
 </style>