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 {
+    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>