diff --git a/public/assets/anniversary/.gitkeep b/public/assets/anniversary/.gitkeep new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/public/assets/anniversary/.gitkeep @@ -0,0 +1 @@ + diff --git a/src/pages/anniversary.astro b/src/pages/anniversary.astro new file mode 100644 index 0000000..bd749d8 --- /dev/null +++ b/src/pages/anniversary.astro @@ -0,0 +1,164 @@ +--- +import "../styles/anniversary.css"; + +const memoryCards = [ + { + kicker: "2021", + title: "把名字写进同一张名单", + text: "从陌生的座位、军训的队列，到第一次一起等铃声响起，班级的故事从那时开始慢慢有了形状。" + }, + { + kicker: "2022", + title: "普通日子也有回声", + text: "网课、考试、活动、晚自习，很多当时只觉得匆忙的片段，后来都变成了可以反复想起的证据。" + }, + { + kicker: "2023", + title: "高三把我们推向同一个方向", + text: "倒计时、试卷、誓师和一次次模拟，把每个人的步伐压得很紧，也把彼此留得更深。" + }, + { + kicker: "2024", + title: "毕业不是散场", + text: "离开校门以后，我们去了不同的地方，但那些一起走过的清晨和黄昏，仍然在这里被好好保存。" + } +]; + +const gallery = [ + "/assets/campus-hero.png", + "/assets/exam/image1.png", + "/assets/exam/image3.jpg", + "/assets/exam/image4.jpeg", + "/assets/exam/image5.jpg", + "/assets/exam/image6.jpg" +]; + +const backgroundMusic = "/assets/anniversary/background-music.mp3"; +const anniversaryVideo = "/assets/anniversary/anniversary-video.mp4"; +const videoPoster = "/assets/campus-hero.png"; +--- + + + + + + + 2024届12班周年专题 + + + +
+
+ 校园记忆 + + +
+

毕业周年专题

+

我们仍在同一段青春里相遇

+

+ 从 2024 年夏天出发，到今天再次回望。这里不急着总结人生，只把一起经过的日子重新点亮。 +

+
+ 开始回望 + 去照片墙 +
+
+ +
+ 2 + 周年纪念 +
+
+ +
+ 铃声响过 + 操场还亮着 + 试卷翻页 + 合照定格 + 名字仍被记得 +
+ +
+
+

Time Slices

+

把三年拆成几束光

+
+
+ { + memoryCards.map((card) => ( +
+ {card.kicker} +

{card.title}

+

{card.text}

+
+ )) + } +
+
+ + + +
+
+

For Us

+

写给毕业后的我们

+

+ 后来的我们会遇见新的城市、新的课程、新的工作和新的自己。可只要有人再次提起那间教室、那次考试、那张合照， + 2024届12班就会短暂地重新集合。 +

+

+ 愿每一次回到这里，都不是为了停在过去，而是确认：那些一起认真生活过的日子，已经成为继续往前走的底气。 +

+ 留下新的近况 +
+
+
+ + diff --git a/src/styles/anniversary.css b/src/styles/anniversary.css new file mode 100644 index 0000000..d49a4cc --- /dev/null +++ b/src/styles/anniversary.css @@ -0,0 +1,575 @@ +:root { + color: #24170f; + background: #f7efe3; + font-family: + "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, + sans-serif; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + min-width: 320px; + background: + linear-gradient(90deg, rgba(36, 23, 15, 0.05) 1px, transparent 1px), + linear-gradient(180deg, rgba(36, 23, 15, 0.05) 1px, transparent 1px), + #f7efe3; + background-size: 42px 42px; +} + +a { + color: inherit; + text-decoration: none; +} + +.anniversary-page { + overflow: hidden; +} + +.hero { + position: relative; + min-height: 92vh; + display: grid; + align-items: end; + padding: 28px clamp(18px, 5vw, 72px) 64px; + color: #fff9ed; + isolation: isolate; +} + +.hero-media, +.hero-shade { + position: absolute; + inset: 0; + z-index: -2; +} + +.hero-media { + width: 100%; + height: 100%; + object-fit: cover; + filter: saturate(0.96) contrast(1.04); +} + +.hero-shade { + z-index: -1; + background: + linear-gradient(90deg, rgba(22, 12, 7, 0.86), rgba(22, 12, 7, 0.34) 58%, rgba(22, 12, 7, 0.52)), + linear-gradient(0deg, rgba(22, 12, 7, 0.9), transparent 44%); +} + +.topbar { + position: absolute; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: space-between; + gap: 24px; + align-items: center; + padding: 24px clamp(18px, 5vw, 72px); +} + +.home-link, +.topbar-links a { + border: 1px solid rgba(255, 249, 237, 0.42); + background: rgba(255, 249, 237, 0.1); + backdrop-filter: blur(14px); +} + +.home-link { + padding: 12px 16px; + font-weight: 800; +} + +.topbar-links { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + gap: 8px; +} + +.topbar-links a { + padding: 10px 13px; + font-size: 14px; +} + +.hero-content { + width: min(900px, 100%); + padding-top: 96px; +} + +.eyebrow { + margin: 0 0 14px; + color: #c75f2a; + font-size: 13px; + font-weight: 900; + letter-spacing: 0; + text-transform: uppercase; +} + +.hero .eyebrow { + color: #ffd36c; +} + +h1, +h2, +h3, +p { + margin-top: 0; +} + +h1 { + max-width: 980px; + margin-bottom: 22px; + font-size: clamp(46px, 8vw, 118px); + line-height: 0.96; + letter-spacing: 0; + text-wrap: balance; +} + +.hero-copy { + max-width: 720px; + margin-bottom: 32px; + color: rgba(255, 249, 237, 0.84); + font-size: clamp(18px, 2vw, 24px); + line-height: 1.7; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.primary-action, +.secondary-action, +.letter-panel a { + display: inline-flex; + min-height: 48px; + align-items: center; + justify-content: center; + padding: 0 22px; + font-weight: 900; +} + +.primary-action, +.letter-panel a { + background: #ffd36c; + color: #24170f; +} + +.secondary-action { + border: 1px solid rgba(255, 249, 237, 0.5); + color: #fff9ed; +} + +.music-player { + position: fixed; + right: clamp(14px, 3vw, 34px); + bottom: clamp(14px, 3vw, 34px); + z-index: 20; + width: min(420px, calc(100vw - 28px)); + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 12px 14px; + align-items: center; + padding: 14px; + border: 1px solid rgba(255, 249, 237, 0.34); + background: rgba(20, 35, 29, 0.46); + backdrop-filter: blur(18px); + box-shadow: 0 18px 50px rgba(22, 12, 7, 0.24); +} + +.music-mark { + display: grid; + place-items: center; + width: 42px; + aspect-ratio: 1; + border-radius: 50%; + background: #ffd36c; + color: #24170f; + font-size: 24px; + font-weight: 900; +} + +.music-copy { + display: grid; + gap: 3px; + min-width: 0; +} + +.music-copy strong, +.music-copy span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.music-copy strong { + font-size: 15px; +} + +.music-copy span { + color: rgba(255, 249, 237, 0.66); + font-size: 12px; +} + +.music-player audio { + grid-column: 1 / -1; + width: 100%; + height: 38px; +} + +.hero-count { + position: absolute; + right: clamp(18px, 5vw, 72px); + bottom: 42px; + display: grid; + place-items: center; + width: clamp(108px, 14vw, 172px); + aspect-ratio: 1; + border: 1px solid rgba(255, 249, 237, 0.4); + border-radius: 50%; + background: rgba(255, 249, 237, 0.12); + backdrop-filter: blur(16px); +} + +.hero-count strong { + font-size: clamp(42px, 7vw, 82px); + line-height: 0.9; +} + +.hero-count span { + font-size: 13px; + font-weight: 800; +} + +.ticker { + display: flex; + gap: 12px; + overflow-x: auto; + padding: 18px clamp(18px, 5vw, 72px); + color: #fff9ed; + background: #24170f; + scrollbar-width: none; +} + +.ticker span { + flex: 0 0 auto; + padding: 8px 16px; + border: 1px solid rgba(255, 249, 237, 0.25); + border-radius: 999px; + color: rgba(255, 249, 237, 0.82); + font-size: 14px; +} + +.memory-section, +.gallery-section, +.letter-section { + padding: clamp(64px, 9vw, 120px) clamp(18px, 5vw, 72px); +} + +.section-heading { + display: grid; + grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); + gap: 28px; + align-items: end; + margin-bottom: 34px; +} + +.section-heading h2, +.letter-panel h2 { + margin-bottom: 0; + color: #24170f; + font-size: clamp(34px, 5vw, 72px); + line-height: 1.04; + letter-spacing: 0; +} + +.memory-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + border: 1px solid #24170f; + background: #24170f; + gap: 1px; +} + +.memory-card { + min-height: 360px; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 24px; + background: #f7efe3; +} + +.memory-card span { + color: #c75f2a; + font-size: 46px; + font-weight: 950; + line-height: 1; +} + +.memory-card h3 { + margin-bottom: 16px; + font-size: 25px; + line-height: 1.18; + letter-spacing: 0; +} + +.memory-card p, +.letter-panel p { + color: rgba(36, 23, 15, 0.72); + font-size: 16px; + line-height: 1.9; +} + +.gallery-section { + color: #fff9ed; + background: #14231d; +} + +.gallery-section .section-heading h2 { + color: #fff9ed; +} + +.video-feature { + display: grid; + grid-template-columns: minmax(0, 0.68fr) minmax(260px, 0.32fr); + gap: clamp(18px, 4vw, 42px); + align-items: end; + margin-bottom: clamp(28px, 5vw, 58px); +} + +.video-frame { + position: relative; + overflow: hidden; + aspect-ratio: 16 / 9; + border: 1px solid rgba(255, 249, 237, 0.18); + background: + linear-gradient(135deg, rgba(255, 211, 108, 0.22), transparent), + rgba(255, 249, 237, 0.08); +} + +.video-frame video { + width: 100%; + height: 100%; + display: block; + object-fit: cover; +} + +.video-caption { + padding-bottom: 10px; +} + +.video-caption h3 { + margin-bottom: 14px; + color: #fff9ed; + font-size: clamp(28px, 4vw, 52px); + line-height: 1.08; +} + +.video-caption p:last-child { + margin-bottom: 0; + color: rgba(255, 249, 237, 0.7); + font-size: 16px; + line-height: 1.8; +} + +.photo-strip { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-auto-rows: 86px; + gap: 14px; +} + +.photo-card { + margin: 0; + min-height: 180px; + overflow: hidden; + background: rgba(255, 249, 237, 0.1); +} + +.photo-card img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; +} + +.photo-card-1 { + grid-column: span 5; + grid-row: span 5; +} + +.photo-card-2 { + grid-column: span 3; + grid-row: span 3; +} + +.photo-card-3 { + grid-column: span 4; + grid-row: span 4; +} + +.photo-card-4 { + grid-column: span 4; + grid-row: span 3; +} + +.photo-card-5 { + grid-column: span 3; + grid-row: span 4; +} + +.photo-card-6 { + grid-column: span 5; + grid-row: span 3; +} + +.letter-section { + display: grid; + min-height: 76vh; + align-items: center; + background: + linear-gradient(135deg, rgba(199, 95, 42, 0.16), transparent 36%), + #f7efe3; +} + +.letter-panel { + width: min(820px, 100%); + margin-inline: auto; + border-left: 6px solid #c75f2a; + padding: 12px 0 12px clamp(24px, 5vw, 56px); +} + +.letter-panel h2 { + margin-bottom: 24px; +} + +.letter-panel a { + margin-top: 14px; +} + +@media (max-width: 900px) { + .hero { + min-height: 88vh; + padding-bottom: 42px; + } + + .topbar { + align-items: flex-start; + } + + .topbar-links { + max-width: 190px; + } + + .hero-count { + position: static; + margin-top: 38px; + } + + .music-player { + width: min(420px, calc(100vw - 28px)); + } + + .section-heading { + grid-template-columns: 1fr; + gap: 8px; + } + + .memory-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .photo-strip { + grid-template-columns: repeat(6, 1fr); + grid-auto-rows: 72px; + } + + .video-feature { + grid-template-columns: 1fr; + } + + .photo-card-1, + .photo-card-3, + .photo-card-6 { + grid-column: span 6; + } + + .photo-card-2, + .photo-card-4, + .photo-card-5 { + grid-column: span 3; + } +} + +@media (max-width: 560px) { + .topbar { + position: relative; + padding: 0 0 42px; + flex-direction: column; + } + + .topbar-links { + max-width: none; + justify-content: flex-start; + } + + .hero { + min-height: auto; + padding-top: 18px; + } + + h1 { + font-size: 44px; + } + + .hero-copy { + font-size: 17px; + } + + .music-player { + grid-template-columns: auto minmax(0, 1fr); + padding: 12px; + } + + .music-mark { + width: 38px; + } + + .music-copy span { + display: none; + } + + .memory-grid { + grid-template-columns: 1fr; + } + + .memory-card { + min-height: 280px; + } + + .photo-strip { + display: flex; + overflow-x: auto; + padding-bottom: 10px; + } + + .photo-card { + flex: 0 0 78%; + height: 320px; + } + + .letter-panel { + border-left-width: 4px; + } +}