Redesign class archive visual system with real-photo hero

src/data/site.ts

@@ -10,7 +10,7 @@ export const site = {
   description:
     "高平一中2024届612班纪念网站，收录三年时间线、班级照片、青春刊物和同学近况，保存我们共同走过的高中时光。",
   anniversary: "2024.06 - 2026.06 · 毕业周年纪念",
-  heroImage: "/assets/campus-hero.png",
+  heroImage: "/assets/wechat-archive/wechat-373.webp",
   footer: "高平一中612班纪念网站"
 };
 

src/layouts/BaseLayout.astro

@@ -36,7 +36,7 @@ const buildTime = new Intl.DateTimeFormat("zh-CN", {
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="referrer" content="no-referrer" />
     <SeoHead {title} {description} {image} {noindex} />
-    <meta name="theme-color" content="#156b70" />
+    <meta name="theme-color" content="#3f7fd6" />
     <meta name="application-name" content={site.className} />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />

src/pages/index.astro

@@ -12,17 +12,27 @@ import { articles, featuredArticles } from "../data/articles";
 const previewTimeline = timeline.slice(0, 4);
 const previewPhotoTopics = photoTopics.slice(0, 4);
 const previewPeople = people.slice(0, 6);
+const [heroLead, heroRest] = site.title.split("，");
+const heroRestLead = heroRest.slice(0, 4);
+const heroRestTail = heroRest.slice(4);
 ---
 
 <BaseLayout title={site.name} description={site.description}>
   <section
     id="top"
     class="hero"
-    style={`--hero-image: url("${site.heroImage}")`}
   >
     <div class="hero-content">
+      <div class="archive-index" aria-label="班级档案编号">
+        <span>ARCHIVE NO. 612</span>
+        <span>{site.cohort} · 高平一中</span>
+      </div>
       <p class="eyebrow">{site.anniversary}</p>
-      <h1>{site.title}</h1>
+      <h1>
+        <span>{heroLead}，</span>
+        <span>{heroRestLead}</span>
+        <span>{heroRestTail}</span>
+      </h1>
       <p>{site.subtitle}</p>
       <div class="hero-actions">
         <a class="button primary" href="/timeline/">翻开回忆</a>
@@ -30,6 +40,21 @@ const previewPeople = people.slice(0, 6);
         <a class="button" href="/messages/">写一句话</a>
       </div>
     </div>
+
+    <figure class="hero-photo">
+      <img
+        src={site.heroImage}
+        alt="夕阳照进612班教室，同学们正在低头自习"
+        width="1080"
+        height="810"
+        loading="eager"
+        fetchpriority="high"
+      />
+      <figcaption>
+        <span>高三教室 · 夕阳自习</span>
+        <span>一张真正属于 612 班的照片</span>
+      </figcaption>
+    </figure>
   </section>
 
   <aside class="stats" aria-label="纪念数据">

src/styles/global.css

@@ -4413,3 +4413,843 @@ textarea:focus-visible {
     background: rgba(18, 101, 111, 0.98);
   }
 }
+
+/* 612 class archive — real-photo, school-record visual system */
+:root {
+  --ink: #18324a;
+  --muted: #617387;
+  --line: #b9cedd;
+  --paper: #f7fbff;
+  --surface: #ffffff;
+  --soft: #e5f3ff;
+  --green: #23966f;
+  --green-deep: #3f7fd6;
+  --blue: #2868c7;
+  --sun: #f6c54c;
+  --coral: #f05a47;
+  --shadow: none;
+  --shadow-soft: none;
+  --radius: 0;
+  --radius-large: 0;
+  --display-font: "Arial Narrow", "DIN Condensed", "Noto Sans SC", "Microsoft YaHei", sans-serif;
+  --body-font: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
+  --utility-font: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+body {
+  background: var(--paper);
+  font-family: var(--body-font);
+}
+
+.site-header {
+  position: sticky;
+  padding: 11px clamp(16px, 3vw, 40px);
+  color: var(--ink);
+  border: 0;
+  border-bottom: 1px solid var(--ink);
+  background: rgba(247, 251, 255, 0.96);
+  box-shadow: none;
+  backdrop-filter: blur(14px);
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: 0;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.brand::before {
+  content: "612";
+  display: grid;
+  width: 38px;
+  height: 30px;
+  place-items: center;
+  color: #fff;
+  background: var(--coral);
+  font: 800 13px/1 var(--utility-font);
+  letter-spacing: 0.04em;
+}
+
+.nav {
+  gap: clamp(5px, 1.2vw, 16px);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.nav a {
+  position: relative;
+  padding: 8px 2px 6px;
+  border-radius: 0;
+  opacity: 0.72;
+}
+
+.nav a:not(.nav-icon-only) .nav-item-icon {
+  display: none;
+}
+
+.nav a::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 1px;
+  left: 0;
+  height: 2px;
+  background: var(--coral);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 160ms ease;
+}
+
+.nav a:hover,
+.nav a:focus-visible {
+  color: var(--ink);
+  background: transparent;
+  opacity: 1;
+}
+
+.nav a:hover::after,
+.nav a:focus-visible::after {
+  transform: scaleX(1);
+}
+
+.nav-toggle {
+  border-color: var(--ink);
+  border-radius: 0;
+  background: transparent;
+  color: var(--ink);
+  backdrop-filter: none;
+}
+
+.nav-toggle span {
+  border-radius: 0;
+}
+
+.hero {
+  min-height: min(860px, calc(100vh - 53px));
+  display: grid;
+  grid-template-columns: minmax(340px, 0.88fr) minmax(460px, 1.12fr);
+  align-items: stretch;
+  padding: 0;
+  color: #f7faf8;
+  background: var(--green-deep);
+}
+
+.hero::before {
+  content: none;
+}
+
+.hero-content {
+  width: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: clamp(58px, 7vw, 112px) clamp(30px, 6vw, 94px);
+}
+
+.archive-index {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: clamp(52px, 8vh, 92px);
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(247, 250, 248, 0.42);
+  color: rgba(247, 250, 248, 0.68);
+  font: 700 11px/1.4 var(--utility-font);
+  letter-spacing: 0.08em;
+}
+
+.archive-index span:first-child {
+  color: #fff;
+}
+
+.hero .eyebrow {
+  margin-bottom: 18px;
+  color: #f0c758;
+  font: 700 12px/1.5 var(--utility-font);
+  letter-spacing: 0.06em;
+  text-transform: none;
+}
+
+.hero h1 {
+  max-width: 8em;
+  font-family: var(--display-font);
+  font-size: clamp(50px, 6.6vw, 94px);
+  font-weight: 950;
+  line-height: 0.98;
+  letter-spacing: -0.055em;
+  text-wrap: balance;
+}
+
+.hero h1 span {
+  display: block;
+}
+
+.hero h1::after {
+  content: "";
+  display: block;
+  width: 68px;
+  height: 8px;
+  margin-top: 26px;
+  background: var(--coral);
+}
+
+.hero p:not(.eyebrow) {
+  max-width: 35em;
+  margin-top: 26px;
+  color: rgba(247, 250, 248, 0.76);
+  font-size: clamp(15px, 1.5vw, 18px);
+  line-height: 1.85;
+}
+
+.hero-actions {
+  gap: 9px;
+  margin-top: 34px;
+}
+
+.button,
+.back-link,
+.section-link {
+  min-height: 42px;
+  padding: 9px 15px;
+  border-radius: 0;
+  box-shadow: none;
+  font-size: 14px;
+  transition:
+    color 150ms ease,
+    background 150ms ease,
+    border-color 150ms ease,
+    transform 150ms ease;
+}
+
+.button:hover,
+.back-link:hover,
+.section-link:hover {
+  transform: translateX(3px);
+  box-shadow: none;
+}
+
+.button.primary {
+  border-color: var(--sun);
+  background: var(--sun);
+  color: var(--ink);
+  box-shadow: none;
+}
+
+.button.primary:hover {
+  border-color: #ffffff;
+  background: #ffffff;
+  box-shadow: none;
+}
+
+.hero-photo {
+  position: relative;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  background: #c7d1d5;
+}
+
+.hero-photo::before {
+  content: "612";
+  position: absolute;
+  z-index: 1;
+  top: 24px;
+  right: 26px;
+  color: rgba(255, 255, 255, 0.82);
+  font: 900 clamp(54px, 8vw, 122px)/0.8 var(--display-font);
+  letter-spacing: -0.08em;
+  mix-blend-mode: overlay;
+}
+
+.hero-photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% center;
+  filter: saturate(1.06) contrast(1.02);
+}
+
+.hero-photo figcaption {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 13px 18px;
+  color: var(--ink);
+  background: rgba(247, 251, 255, 0.94);
+  font: 700 11px/1.5 var(--utility-font);
+}
+
+.hero-photo figcaption span:last-child {
+  color: var(--muted);
+  text-align: right;
+}
+
+.stats {
+  border-top: 1px solid var(--ink);
+  border-bottom: 1px solid var(--ink);
+  background: var(--ink);
+}
+
+.stat {
+  min-height: 120px;
+  padding: 26px clamp(20px, 4vw, 48px);
+  background: var(--surface);
+}
+
+.stat:nth-child(1) {
+  border-top: 6px solid var(--blue);
+}
+
+.stat:nth-child(2) {
+  border-top: 6px solid var(--coral);
+}
+
+.stat:nth-child(3) {
+  border-top: 6px solid var(--green);
+}
+
+.stat:nth-child(1) strong {
+  color: var(--blue);
+}
+
+.stat:nth-child(2) strong {
+  color: var(--coral);
+}
+
+.stat:nth-child(3) strong {
+  color: var(--green);
+}
+
+.stat strong {
+  color: var(--ink);
+  font: 900 clamp(30px, 4vw, 46px)/1 var(--display-font);
+  letter-spacing: -0.04em;
+}
+
+.stat span {
+  margin-top: 12px;
+  font-size: 13px;
+}
+
+section {
+  padding: clamp(72px, 9vw, 112px) clamp(18px, 6vw, 80px);
+}
+
+.section-inner {
+  width: min(1180px, 100%);
+}
+
+.section-title {
+  grid-template-columns: minmax(0, 0.75fr) minmax(280px, 1fr);
+  align-items: start;
+  gap: clamp(28px, 7vw, 94px);
+  margin-bottom: clamp(38px, 6vw, 64px);
+  padding-top: 18px;
+  border-top: 2px solid var(--ink);
+}
+
+h2,
+.section-title h2 {
+  font-family: var(--display-font);
+  font-weight: 900;
+  letter-spacing: -0.035em;
+}
+
+.section-title h2::after {
+  content: none;
+}
+
+.section-title p {
+  max-width: 48em;
+  line-height: 1.9;
+}
+
+.on-this-day-band {
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.on-this-day-band::after {
+  content: none;
+}
+
+.memory-calendar,
+.memory-card,
+.memory-empty {
+  border-radius: 0;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.memory-calendar {
+  border: 1px solid var(--line);
+  border-top: 5px solid var(--blue);
+  background: var(--paper);
+}
+
+.memory-card {
+  border-color: var(--line);
+  background: var(--surface);
+}
+
+.memory-card:hover {
+  border-color: var(--ink);
+  box-shadow: none;
+  transform: translateY(-2px);
+}
+
+.timeline {
+  gap: 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.moment {
+  grid-template-columns: minmax(130px, 180px) 1fr;
+  gap: clamp(22px, 4vw, 52px);
+  padding: 27px 0;
+  border: 0;
+  border-top: 1px solid var(--line);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.moment-link {
+  padding-right: 70px;
+}
+
+.moment-link::after {
+  top: 28px;
+  right: 2px;
+  content: "打开 →";
+  color: var(--coral);
+  font: 700 12px/1 var(--utility-font);
+}
+
+.moment-link:hover {
+  border-color: var(--ink);
+  box-shadow: none;
+  transform: translateX(5px);
+}
+
+.moment time {
+  color: var(--blue);
+  font: 800 13px/1.5 var(--utility-font);
+}
+
+.gallery-band {
+  background: var(--soft);
+}
+
+.photo-grid {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.photo-card,
+.photo-card:nth-child(n) {
+  position: relative;
+  grid-column: span 6;
+  min-height: 360px;
+  padding: 0;
+  border: 1px solid var(--ink);
+  border-radius: 0;
+  background-image: var(--photo-image, var(--tile-bg));
+  box-shadow: none;
+  filter: saturate(1.02);
+}
+
+.photo-card:nth-child(1),
+.photo-card:nth-child(4) {
+  grid-column: span 5;
+}
+
+.photo-card:nth-child(2),
+.photo-card:nth-child(3) {
+  grid-column: span 7;
+}
+
+.photo-card:nth-child(2),
+.photo-card:nth-child(3) {
+  min-height: 430px;
+}
+
+.photo-card > div {
+  width: 100%;
+  padding: 14px 16px 15px;
+  color: var(--ink);
+  border-top: 1px solid var(--ink);
+  background: rgba(251, 252, 250, 0.96);
+}
+
+.photo-card span {
+  color: var(--muted);
+}
+
+.topic-card:hover {
+  border-color: var(--coral);
+  box-shadow: none;
+  filter: saturate(1);
+  transform: translateY(-3px);
+}
+
+.people-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 32px;
+  border-bottom: 1px solid var(--line);
+}
+
+.person,
+.person-link {
+  min-height: 176px;
+  border: 0;
+  border-top: 1px solid var(--line);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.person-link {
+  display: grid;
+  grid-template-columns: 118px minmax(0, 1fr);
+}
+
+.person-link:hover {
+  border-color: var(--ink);
+  background: rgba(255, 255, 255, 0.42);
+  box-shadow: none;
+  transform: none;
+}
+
+.person-photo {
+  min-height: 100%;
+  border-right: 1px solid var(--line);
+  background: var(--person-photo, var(--accent)) center / cover no-repeat;
+  filter: saturate(0.96);
+}
+
+.person-photo span {
+  border-radius: 0;
+  backdrop-filter: none;
+}
+
+.person-body {
+  padding: 19px 20px;
+}
+
+.person-meta span,
+.keyword-row span {
+  min-height: 26px;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  color: var(--blue);
+  background: transparent;
+  font: 700 11px/1 var(--utility-font);
+}
+
+.message,
+.detail-panel,
+.search-app,
+.search-config-note,
+.search-result-card,
+.article-card,
+.archive-card,
+.profile-card {
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.message.featured {
+  background: var(--green-deep);
+}
+
+.message cite {
+  color: var(--sun);
+  font-family: var(--utility-font);
+}
+
+.publication-band {
+  color: #f7faf8;
+  background: var(--green-deep);
+}
+
+.article-card {
+  border: 0;
+  border-top: 1px solid rgba(247, 250, 248, 0.38);
+  background: transparent;
+}
+
+.article-card:hover {
+  border-color: var(--sun);
+  background: rgba(255, 255, 255, 0.04);
+  transform: translateY(-2px);
+}
+
+.article-cover,
+.article-card-featured .article-cover {
+  border-radius: 0;
+  filter: saturate(0.84);
+}
+
+.page-hero {
+  position: relative;
+  isolation: isolate;
+  padding-top: clamp(68px, 9vw, 112px);
+  padding-bottom: clamp(62px, 8vw, 96px);
+  overflow: hidden;
+  background: var(--green-deep);
+}
+
+.page-hero:not(.map-hero)::after {
+  content: "612";
+  position: absolute;
+  z-index: -1;
+  right: clamp(18px, 6vw, 84px);
+  bottom: -0.08em;
+  color: rgba(247, 250, 248, 0.055);
+  font: 950 clamp(140px, 28vw, 400px)/0.78 var(--display-font);
+  letter-spacing: -0.08em;
+}
+
+.page-hero h1 {
+  font-family: var(--display-font);
+  font-weight: 950;
+  line-height: 1;
+  letter-spacing: -0.05em;
+}
+
+.page-hero .eyebrow,
+.hero-inline-link,
+.article-copy time,
+.read-more {
+  color: var(--sun);
+}
+
+.map-hero {
+  background: var(--green-deep);
+}
+
+.map-hero::after {
+  border-color: rgba(247, 250, 248, 0.18);
+  box-shadow: none;
+}
+
+.section-link {
+  border: 1px solid var(--ink);
+  color: var(--ink);
+  background: transparent;
+}
+
+.section-link:hover {
+  border-color: var(--coral);
+  color: #fff;
+  background: var(--coral);
+}
+
+.publication-link {
+  border-color: rgba(247, 250, 248, 0.62);
+  color: #f7faf8;
+}
+
+.ending {
+  color: var(--ink);
+  border-top: 1px solid var(--ink);
+  background: #fff1b8;
+}
+
+.ending h2 {
+  max-width: 12em;
+  color: var(--ink);
+}
+
+.ending p {
+  color: var(--muted);
+}
+
+.site-footer {
+  border-top: 0;
+  background: var(--ink);
+}
+
+.search-input-row input,
+.search-filters select,
+.memory-calendar-jump input,
+.memory-calendar-jump select {
+  border-radius: 0;
+}
+
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline-color: var(--coral);
+}
+
+@media (max-width: 1040px) {
+  .hero {
+    grid-template-columns: minmax(330px, 0.95fr) minmax(390px, 1.05fr);
+  }
+
+  .hero-content {
+    padding-inline: clamp(26px, 5vw, 56px);
+  }
+
+  .nav {
+    gap: 7px;
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 820px) {
+  .site-header,
+  .site-header.is-open {
+    color: var(--ink);
+    border-color: var(--ink);
+    background: rgba(247, 251, 255, 0.98);
+  }
+
+  .nav {
+    color: #f7faf8;
+    border-color: rgba(247, 250, 248, 0.2);
+    background: var(--green-deep);
+  }
+
+  .nav a {
+    border-radius: 0;
+    color: #f7faf8;
+    opacity: 0.92;
+  }
+
+  .nav a:not(.nav-icon-only) .nav-item-icon {
+    display: inline-block;
+  }
+
+  .nav a:hover,
+  .nav a:focus-visible {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.08);
+    opacity: 1;
+  }
+
+  .nav a.nav-icon-only {
+    justify-content: flex-start;
+  }
+
+  .nav a.nav-icon-only::before {
+    content: "搜索";
+    order: 2;
+  }
+
+  .hero {
+    min-height: 0;
+    grid-template-columns: 1fr;
+  }
+
+  .hero-content {
+    min-height: 610px;
+  }
+
+  .hero-photo {
+    min-height: 68vw;
+    max-height: 620px;
+  }
+
+  .archive-index {
+    margin-bottom: 56px;
+  }
+
+  .section-title {
+    grid-template-columns: 1fr;
+    gap: 18px;
+  }
+
+  .people-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 560px) {
+  .hero-content {
+    min-height: 560px;
+    padding: 48px 20px 52px;
+  }
+
+  .archive-index {
+    margin-bottom: 44px;
+  }
+
+  .archive-index span:last-child {
+    text-align: right;
+  }
+
+  .hero h1 {
+    font-size: clamp(48px, 16vw, 70px);
+  }
+
+  .hero-photo {
+    min-height: 78vw;
+  }
+
+  .hero-photo figcaption {
+    display: block;
+  }
+
+  .hero-photo figcaption span {
+    display: block;
+  }
+
+  .hero-photo figcaption span:last-child {
+    margin-top: 4px;
+    text-align: left;
+  }
+
+  .stats {
+    grid-template-columns: 1fr;
+  }
+
+  .stat {
+    min-height: 0;
+    display: grid;
+    grid-template-columns: minmax(90px, 0.6fr) 1fr;
+    align-items: center;
+    gap: 18px;
+  }
+
+  .stat span {
+    margin-top: 0;
+  }
+
+  .photo-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .photo-card,
+  .photo-card:nth-child(n) {
+    grid-column: auto;
+    min-height: 300px;
+  }
+
+  .person-link {
+    grid-template-columns: 92px minmax(0, 1fr);
+  }
+
+  .moment,
+  .moment-link {
+    grid-template-columns: 1fr;
+    padding-right: 0;
+  }
+
+  .moment-link::after {
+    position: static;
+    margin-top: 12px;
+  }
+}