Optimize main page for mobile devices

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>