update photos wall for favourite

Author: fwqaaq

deno.jsonc

@@ -30,7 +30,7 @@
     "rehype-stringify": "https://esm.sh/[email protected]",
     "rehype-slug": "https://esm.sh/[email protected]",
     "rehype-autolink-headings": "https://esm.sh/[email protected]",
-    "@shikijs/rehype": "https://esm.sh/@shikijs/rehype@1.11.1",
+    "@shikijs/rehype": "https://esm.sh/@shikijs/rehype@1.12.0",
     "remark-gfm": "https://esm.sh/[email protected]",
     "yaml": "https://deno.land/[email protected]/yaml/mod.ts",
     "Command": "https://deno.land/x/[email protected]/command/mod.ts",

public/favourite/index.css

@@ -45,7 +45,7 @@ body {
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding-block-start: 4rem;
+  padding-block: 4rem;
   color: var(--global-color);
 
   & .text {
@@ -148,4 +148,50 @@ dialog::backdrop {
   text-decoration-thickness: 0.2rem;
   text-decoration-color: var(--global-color);
   text-underline-offset: 0.5rem;
+}
+
+.photos-container {
+  display: flex;
+  justify-content: center;
+  width: min(80vw, 32rem);
+  overflow: hidden;
+  position: relative;
+}
+
+.photos-box {
+  display: flex;
+  transition: transform 0.5s ease;
+}
+
+.photos-box img {
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+@keyframes carousel {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  33.33% {
+    transform: translateX(min(-80vw, -32rem));
+  }
+
+  66.66% {
+    transform: translateX(min(-160vw, -64rem));
+  }
+}
+
+.photos-box {
+  animation: carousel 15s infinite;
+}
+
+/* 可选：悬停时暂停动画 */
+.photos-container:hover .photos-box {
+  animation-play-state: paused;
 }

public/favourite/index.html

@@ -68,6 +68,14 @@ <h2 class="h2-title animate__animated animate__backInDown">❤️记录我和小
     </div>
     <div class="container" id="photos-wall">
       <p class="text animate__animated animate__swing animate__infinite" id="hidden-button">我有好多话想对你说，你愿意听吗</p>
+      <div class="photos-container">
+        <div class="photos-box">
+          <img src="https://remain.fwqaq.us/xiaochen_admission.jpg" alt="陈录取通知书">
+          <img src="https://remain.fwqaq.us/sfo.jpg" alt="张 sfo">
+          <img src="https://remain.fwqaq.us/chen_cat.jpg" alt="猫咪">
+          <img src="https://remain.fwqaq.us/chen_heian.jpg" alt="黑暗料理">
+        </div>
+      </div>
 
       <dialog close id="x-dialog">
         <p class="text">我有好多话想对你说，你愿意听吗</p>