升级

src/styles/global.css

@@ -315,6 +315,17 @@ h2 {
   box-shadow: var(--shadow);
 }
 
+.topic-card {
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.topic-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 24px 60px rgba(39, 55, 52, 0.18);
+}
+
 .photo-card:nth-child(4n + 1) {
   --tile-bg: linear-gradient(135deg, #376d5a, #e8a84c);
 }
@@ -357,6 +368,109 @@ h2 {
   align-items: stretch;
 }
 
+.scrapbook-section {
+  padding-top: clamp(48px, 7vw, 92px);
+}
+
+.scrapbook {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: clamp(14px, 2vw, 26px);
+  align-items: start;
+  padding-block: 18px 36px;
+}
+
+.scrap-photo {
+  --rotate: 0deg;
+  --shift: 0px;
+  grid-column: span 4;
+  transform: translateY(var(--shift)) rotate(var(--rotate));
+  transform-origin: center;
+}
+
+.scrap-photo:nth-child(6n + 1) {
+  --rotate: -2.2deg;
+  --shift: 18px;
+  grid-column: span 5;
+}
+
+.scrap-photo:nth-child(6n + 2) {
+  --rotate: 1.6deg;
+  --shift: -8px;
+  grid-column: span 3;
+}
+
+.scrap-photo:nth-child(6n + 3) {
+  --rotate: -0.8deg;
+  --shift: 36px;
+  grid-column: span 4;
+}
+
+.scrap-photo:nth-child(6n + 4) {
+  --rotate: 2.4deg;
+  --shift: -2px;
+  grid-column: span 4;
+}
+
+.scrap-photo:nth-child(6n + 5) {
+  --rotate: -1.4deg;
+  --shift: 28px;
+  grid-column: span 3;
+}
+
+.scrap-photo:nth-child(6n) {
+  --rotate: 1.1deg;
+  --shift: 8px;
+  grid-column: span 5;
+}
+
+.scrap-frame {
+  padding: 10px 10px 16px;
+  border: 1px solid rgba(31, 43, 42, 0.1);
+  border-radius: 4px;
+  background: #fffef9;
+  box-shadow:
+    0 18px 38px rgba(39, 55, 52, 0.14),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
+}
+
+.scrap-image {
+  min-height: clamp(190px, 24vw, 320px);
+  border-radius: 3px;
+  background: var(--scrap-image, linear-gradient(135deg, #376d5a, #e8a84c));
+  background-size: cover;
+  background-position: center;
+}
+
+.scrap-photo:nth-child(4n + 2) .scrap-image {
+  background: var(--scrap-image, linear-gradient(135deg, #456f94, #f0c66d));
+}
+
+.scrap-photo:nth-child(4n + 3) .scrap-image {
+  background: var(--scrap-image, linear-gradient(135deg, #c96452, #f1d9a6));
+}
+
+.scrap-photo:nth-child(4n) .scrap-image {
+  background: var(--scrap-image, linear-gradient(135deg, #263e5c, #7ab28b));
+}
+
+.scrap-copy {
+  padding: 12px 4px 0;
+}
+
+.scrap-copy strong {
+  display: block;
+  font-size: 18px;
+  line-height: 1.35;
+}
+
+.scrap-copy span {
+  display: block;
+  margin-top: 5px;
+  color: var(--muted);
+  font-size: 14px;
+}
+
 .person {
   min-height: 210px;
   padding: 22px;
@@ -475,6 +589,16 @@ footer {
     grid-template-columns: 1fr 1fr;
   }
 
+  .scrapbook {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .scrap-photo,
+  .scrap-photo:nth-child(n) {
+    grid-column: span 3;
+    transform: none;
+  }
+
   .moment {
     grid-template-columns: 1fr;
   }
@@ -500,4 +624,19 @@ footer {
   .photo-card:nth-child(4) {
     min-height: 220px;
   }
+
+  .scrapbook {
+    display: grid;
+    grid-template-columns: 1fr;
+    padding-block: 0;
+  }
+
+  .scrap-photo,
+  .scrap-photo:nth-child(n) {
+    grid-column: auto;
+  }
+
+  .scrap-image {
+    min-height: 220px;
+  }
 }