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

@@ -16,10 +16,12 @@ body {
   --second-color: #34495e;
   --title-color: #e67e22;
   --box-size: 3.6rem;
+  --carousel-width: min(80vw, 32rem);
 }
 
 body {
   color: var(--global-color);
+  background-color: var(--bg-color);
 }
 
 .h2-title,
@@ -34,18 +36,13 @@ a {
   text-decoration: none;
 }
 
-body {
-  background-color: var(--bg-color);
-}
-
-
 .wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding-block-start: 4rem;
+  padding-block: 4rem;
   color: var(--global-color);
 
   & .text {
@@ -148,4 +145,48 @@ 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: var(--carousel-width);
+  overflow: hidden;
+  position: relative;
+}
+
+.photos-box {
+  display: flex;
+}
+
+.photos-box img {
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+@keyframes carousel {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  25% {
+    transform: translateX(calc(var(--carousel-width) * -1));
+  }
+
+  50% {
+    transform: translateX(calc(var(--carousel-width) * -2));
+  }
+
+  75% {
+    transform: translateX(calc(var(--carousel-width) * -3));
+  }
+}
+
+.photos-box {
+  animation: carousel 15s infinite;
 }

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>