158 lines
4.4 KiB
Plaintext
158 lines
4.4 KiB
Plaintext
---
|
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
import { galleryIntro, photos } from "../data/photos";
|
|
import { featuredMessage, messages, messagesIntro } from "../data/messages";
|
|
import { people, peopleIntro } from "../data/people";
|
|
import { site, stats } from "../data/site";
|
|
import { timeline, timelineIntro } from "../data/timeline";
|
|
|
|
const previewTimeline = timeline.slice(0, 4);
|
|
const previewPhotos = photos.slice(0, 4);
|
|
const previewPeople = people.slice(0, 6);
|
|
---
|
|
|
|
<BaseLayout title={site.title}>
|
|
<section
|
|
id="top"
|
|
class="hero"
|
|
style={`--hero-image: url("${site.heroImage}")`}
|
|
>
|
|
<div class="hero-content">
|
|
<p class="eyebrow">{site.anniversary}</p>
|
|
<h1>{site.title}</h1>
|
|
<p>{site.subtitle}</p>
|
|
<div class="hero-actions">
|
|
<a class="button primary" href="/timeline/">翻开回忆</a>
|
|
<a class="button" href="/messages/">写一句话</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="stats" aria-label="纪念数据">
|
|
{
|
|
stats.map((item) => (
|
|
<div class="stat">
|
|
<strong>{item.value}</strong>
|
|
<span>{item.label}</span>
|
|
</div>
|
|
))
|
|
}
|
|
</aside>
|
|
|
|
<main>
|
|
<section id="timeline">
|
|
<div class="section-inner">
|
|
<div class="section-title">
|
|
<h2>{timelineIntro.title}</h2>
|
|
<p>{timelineIntro.text}</p>
|
|
</div>
|
|
|
|
<div class="timeline">
|
|
{
|
|
previewTimeline.map((moment) => (
|
|
<article class="moment">
|
|
<time>{moment.date}</time>
|
|
<div>
|
|
<h3>{moment.title}</h3>
|
|
<p>{moment.text}</p>
|
|
</div>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<a class="section-link" href="/timeline/">查看完整时间线</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="gallery" class="gallery-band">
|
|
<div class="section-inner">
|
|
<div class="section-title">
|
|
<h2>{galleryIntro.title}</h2>
|
|
<p>{galleryIntro.text}</p>
|
|
</div>
|
|
|
|
<div class="photo-grid">
|
|
{
|
|
previewPhotos.map((photo) => (
|
|
<article
|
|
class="photo-card"
|
|
style={photo.image ? `--photo-image: url("${photo.image}")` : ""}
|
|
>
|
|
<div>
|
|
<strong>{photo.title}</strong>
|
|
<span>{photo.text}</span>
|
|
</div>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<a class="section-link" href="/gallery/">查看全部照片</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="people">
|
|
<div class="section-inner">
|
|
<div class="section-title">
|
|
<h2>{peopleIntro.title}</h2>
|
|
<p>{peopleIntro.text}</p>
|
|
</div>
|
|
|
|
<div class="people-grid">
|
|
{
|
|
previewPeople.map((person) => (
|
|
<article class="person">
|
|
<div class="avatar">{person.initial}</div>
|
|
<h3>
|
|
{person.name} · {person.location}
|
|
</h3>
|
|
<p>{person.text}</p>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<a class="section-link" href="/people/">查看所有同学</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="messages" class="gallery-band">
|
|
<div class="section-inner">
|
|
<div class="section-title">
|
|
<h2>{messagesIntro.title}</h2>
|
|
<p>{messagesIntro.text}</p>
|
|
</div>
|
|
|
|
<div class="message-wall">
|
|
<article class="message featured">
|
|
<p>“{featuredMessage.text}”</p>
|
|
<cite>{featuredMessage.author}</cite>
|
|
</article>
|
|
<div class="small-messages">
|
|
{
|
|
messages.slice(0, 2).map((message) => (
|
|
<article class="message">
|
|
<h3>{message.title}</h3>
|
|
<p>{message.text}</p>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<a class="section-link" href="/messages/">查看全部留言</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="ending">
|
|
<div class="section-inner">
|
|
<h2>下一次见面，我们再补一张合照</h2>
|
|
<p>
|
|
这个网站会继续长大：添上真实照片、真实名字、真实留言，然后成为属于我们班的一本电子纪念册。
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</BaseLayout>
|