fix: 移动适配

Author: Rinai-R

src/components/Navbar.astro

@@ -8,8 +8,8 @@ import LightDarkSwitch from "./LightDarkSwitch.svelte";
 import Search from "./Search.svelte";
 import DisplaySettings from "./widget/DisplaySettings.svelte";
 import DropdownMenu from "./widget/DropdownMenu.astro";
-import TranslateButton from "./widget/TranslateButton.svelte";
 import NavMenuPanel from "./widget/NavMenuPanel.astro";
+import TranslateButton from "./widget/TranslateButton.svelte";
 
 const className = Astro.props.class;
 

src/components/NoteList.astro

@@ -376,27 +376,46 @@ const notes = await Promise.all(
     );
 }
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
     .note-timeline__item {
-        grid-template-columns: minmax(3.25rem, auto) 1.75rem minmax(0, 1fr);
-        column-gap: 1rem;
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: auto 1fr;
+        row-gap: 0.75rem;
+        padding: 0.5rem 0;
     }
 
     .note-timeline__time {
+        position: relative;
         align-items: center;
-        text-align: center;
+        justify-content: flex-start;
+        text-align: left;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.85rem;
+        background: color-mix(in srgb, var(--note-timeline-accent) 18%, transparent);
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--note-timeline-accent) 25%, transparent);
+        gap: 0.4rem;
     }
 
-    .note-timeline__month {
-        font-size: 0.85rem;
+    .note-timeline__day {
+        font-size: 1.55rem;
+        letter-spacing: 0.03em;
     }
 
+    .note-timeline__month,
     .note-timeline__year {
-        font-size: 0.6rem;
+        font-size: 0.8rem;
+        line-height: 1.1rem;
+    }
+
+    .note-timeline__axis {
+        display: none;
     }
 
     .note-timeline__card {
-        padding: clamp(1rem, 3.2vw, 1.45rem) clamp(1rem, 4vw, 1.85rem);
+        grid-row: 2 / 3;
+        padding: clamp(1rem, 4vw, 1.6rem) clamp(1rem, 5vw, 1.9rem);
+        border: 1px solid color-mix(in srgb, var(--note-timeline-accent) 25%, transparent);
+        box-shadow: 0 15px 45px rgb(7 15 28 / 0.08);
     }
 }