First init
This commit is contained in:
@@ -0,0 +1,4 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
.astro/
|
||||||
|
*.log
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { defineConfig } from "astro/config";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
site: "https://example.com"
|
||||||
|
});
|
||||||
Generated
+6423
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "class-anniversary",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/check": "^0.9.4",
|
||||||
|
"astro": "^4.16.18",
|
||||||
|
"typescript": "^5.6.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
@@ -0,0 +1,120 @@
|
|||||||
|
export const site = {
|
||||||
|
className: "高三 X 班",
|
||||||
|
title: "毕业一年后，我们依然在场",
|
||||||
|
subtitle:
|
||||||
|
"把散落在相册、聊天记录和心里的瞬间放回同一个地方。这里先留给高中的三年，也留给一年后的我们。",
|
||||||
|
anniversary: "2025.06 - 2026.06 · 毕业一周年纪念",
|
||||||
|
heroImage: "/assets/campus-hero.png",
|
||||||
|
footer: "高三 X 班毕业一周年纪念网站 · 初版"
|
||||||
|
};
|
||||||
|
|
||||||
|
export const navItems = [
|
||||||
|
{ label: "三年时间线", href: "#timeline" },
|
||||||
|
{ label: "照片墙", href: "#gallery" },
|
||||||
|
{ label: "一年后的我们", href: "#people" },
|
||||||
|
{ label: "留言墙", href: "#messages" }
|
||||||
|
];
|
||||||
|
|
||||||
|
export const stats = [
|
||||||
|
{ value: "1095+", label: "一起经过的高中日子" },
|
||||||
|
{ value: "365", label: "离开校园后的第一年" },
|
||||||
|
{ value: "∞", label: "还会被想起的瞬间" }
|
||||||
|
];
|
||||||
|
|
||||||
|
export const timeline = [
|
||||||
|
{
|
||||||
|
date: "高一 · 九月",
|
||||||
|
title: "第一次点名",
|
||||||
|
text: "很多名字还对不上脸，但同一间教室已经开始收藏我们的吵闹、紧张和新鲜感。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "高二 · 秋天",
|
||||||
|
title: "运动会和晚自习后的风",
|
||||||
|
text: "有人在跑道上冲线，有人在看台上喊到嗓子哑。那天的风，后来吹进了很多照片里。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "高三 · 春天",
|
||||||
|
title: "倒计时牌越来越小",
|
||||||
|
text: "黑板角落的数字每天少一点，我们一边嫌累，一边悄悄把彼此记得更牢。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "毕业 · 六月",
|
||||||
|
title: "合照里的那个下午",
|
||||||
|
text: "校服、签名、拥抱和没说完的话，都被按下快门，留在了那一年最亮的地方。"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const gallery = [
|
||||||
|
{
|
||||||
|
title: "教室日常",
|
||||||
|
text: "黑板、课桌、窗边、试卷"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "班级活动",
|
||||||
|
text: "运动会、晚会、春游、比赛"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "毕业那天",
|
||||||
|
text: "合照、签名、花束、校门"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "没被摆拍的瞬间",
|
||||||
|
text: "走廊、食堂、晚霞和笑场"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const people = [
|
||||||
|
{
|
||||||
|
initial: "A",
|
||||||
|
name: "同学 A",
|
||||||
|
location: "北京",
|
||||||
|
text: "这一年的关键词：开始、独立、想念。想和大家说：下次见面一定要拍一张新的合照。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
initial: "B",
|
||||||
|
name: "同学 B",
|
||||||
|
location: "上海",
|
||||||
|
text: "偶尔还是会梦到上课铃。高中最珍贵的是：有人陪你一起把普通日子过得很亮。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
initial: "C",
|
||||||
|
name: "同学 C",
|
||||||
|
location: "广州",
|
||||||
|
text: "现在比以前更忙，也更懂得珍惜。希望大家都在自己的路上慢慢发光。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
initial: "D",
|
||||||
|
name: "同学 D",
|
||||||
|
location: "成都",
|
||||||
|
text: "想念晚自习后的小卖部，也想念那些不用解释就能笑出来的人。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
initial: "E",
|
||||||
|
name: "同学 E",
|
||||||
|
location: "武汉",
|
||||||
|
text: "一年过去，很多事情都变了，但听到班级群消息还是会立刻点开。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
initial: "F",
|
||||||
|
name: "同学 F",
|
||||||
|
location: "南京",
|
||||||
|
text: "希望我们都成为更好的自己，也永远记得曾经一起努力过的样子。"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const messages = {
|
||||||
|
featured: {
|
||||||
|
text: "后来我们去了不同的地方，但那间教室像一个坐标，提醒我们曾经一起出发。",
|
||||||
|
author: "写给高三 X 班"
|
||||||
|
},
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "给一年后的自己",
|
||||||
|
text: "不要忘记当时为什么出发，也不要害怕路上偶尔慢一点。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "给老同学",
|
||||||
|
text: "愿你打开这个页面的时候，刚好想起一个很好的下午。"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
/// <reference path="../.astro/types.d.ts" />
|
||||||
@@ -0,0 +1,169 @@
|
|||||||
|
---
|
||||||
|
import "../styles/global.css";
|
||||||
|
import {
|
||||||
|
gallery,
|
||||||
|
messages,
|
||||||
|
navItems,
|
||||||
|
people,
|
||||||
|
site,
|
||||||
|
stats,
|
||||||
|
timeline
|
||||||
|
} from "../data/site";
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>{site.title}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="site-header" aria-label="网站导航">
|
||||||
|
<a class="brand" href="#top">{site.className}</a>
|
||||||
|
<nav class="nav">
|
||||||
|
{navItems.map((item) => <a href={item.href}>{item.label}</a>)}
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<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>从第一节课，到最后一次回头</h2>
|
||||||
|
<p>
|
||||||
|
把班级大事按时间放在这里。现在是示例内容，之后可以替换成军训、运动会、成人礼、百日誓师、毕业照等真实节点。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline">
|
||||||
|
{
|
||||||
|
timeline.map((moment) => (
|
||||||
|
<article class="moment">
|
||||||
|
<time>{moment.date}</time>
|
||||||
|
<div>
|
||||||
|
<h3>{moment.title}</h3>
|
||||||
|
<p>{moment.text}</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="gallery" class="gallery-band">
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-title">
|
||||||
|
<h2>照片墙先留四个位置</h2>
|
||||||
|
<p>
|
||||||
|
后续可以把这些色块换成真实照片。建议每类选 6 到 12 张，少一点反而更有纪念册的质感。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="photo-grid">
|
||||||
|
{
|
||||||
|
gallery.map((item) => (
|
||||||
|
<article class="photo-card">
|
||||||
|
<div>
|
||||||
|
<strong>{item.title}</strong>
|
||||||
|
<span>{item.text}</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="people">
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-title">
|
||||||
|
<h2>一年后的我们</h2>
|
||||||
|
<p>
|
||||||
|
这里可以做成同学卡片：姓名、所在城市、学校或方向，以及一句想对大家说的话。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="people-grid">
|
||||||
|
{
|
||||||
|
people.map((person) => (
|
||||||
|
<article class="person">
|
||||||
|
<div class="avatar">{person.initial}</div>
|
||||||
|
<h3>
|
||||||
|
{person.name} · {person.location}
|
||||||
|
</h3>
|
||||||
|
<p>{person.text}</p>
|
||||||
|
</article>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="messages" class="gallery-band">
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-title">
|
||||||
|
<h2>留言墙</h2>
|
||||||
|
<p>可以把收集来的留言放在这里。老师寄语、同学短句、匿名祝福都很适合。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="message-wall">
|
||||||
|
<article class="message featured">
|
||||||
|
<p>“{messages.featured.text}”</p>
|
||||||
|
<cite>{messages.featured.author}</cite>
|
||||||
|
</article>
|
||||||
|
<div class="small-messages">
|
||||||
|
{
|
||||||
|
messages.items.map((message) => (
|
||||||
|
<article class="message">
|
||||||
|
<h3>{message.title}</h3>
|
||||||
|
<p>{message.text}</p>
|
||||||
|
</article>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="ending">
|
||||||
|
<div class="section-inner">
|
||||||
|
<h2>下一次见面，我们再补一张合照</h2>
|
||||||
|
<p>
|
||||||
|
这个网站会继续长大：添上真实照片、真实名字、真实留言，然后成为属于我们班的一本电子纪念册。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>{site.footer}</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,450 @@
|
|||||||
|
:root {
|
||||||
|
color-scheme: light;
|
||||||
|
--ink: #1f2b2a;
|
||||||
|
--muted: #62706f;
|
||||||
|
--line: rgba(31, 43, 42, 0.14);
|
||||||
|
--paper: #fffdf7;
|
||||||
|
--soft: #f4f7ee;
|
||||||
|
--green: #376d5a;
|
||||||
|
--blue: #456f94;
|
||||||
|
--sun: #e8a84c;
|
||||||
|
--coral: #c96452;
|
||||||
|
--shadow: 0 18px 50px rgba(39, 55, 52, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--ink);
|
||||||
|
background: var(--paper);
|
||||||
|
font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 20;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 16px clamp(18px, 4vw, 48px);
|
||||||
|
color: #fffdf7;
|
||||||
|
background: linear-gradient(180deg, rgba(22, 30, 29, 0.58), rgba(22, 30, 29, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
gap: clamp(12px, 2vw, 26px);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
opacity: 0.88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
min-height: 92vh;
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
align-items: end;
|
||||||
|
overflow: hidden;
|
||||||
|
isolation: isolate;
|
||||||
|
padding: 120px clamp(20px, 6vw, 80px) 56px;
|
||||||
|
color: #fffdf7;
|
||||||
|
background: #26332e var(--hero-image) center / cover no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -1;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg, rgba(21, 29, 27, 0.78), rgba(21, 29, 27, 0.34) 48%, rgba(21, 29, 27, 0.18)),
|
||||||
|
linear-gradient(0deg, rgba(21, 29, 27, 0.72), rgba(21, 29, 27, 0.06) 55%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
width: min(780px, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
margin: 0 0 14px;
|
||||||
|
color: #f3cf8b;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
max-width: 720px;
|
||||||
|
font-size: clamp(42px, 7vw, 86px);
|
||||||
|
line-height: 1.08;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
max-width: 620px;
|
||||||
|
margin: 24px 0 0;
|
||||||
|
color: rgba(255, 253, 247, 0.88);
|
||||||
|
font-size: clamp(17px, 2vw, 21px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 44px;
|
||||||
|
padding: 10px 18px;
|
||||||
|
border: 1px solid rgba(255, 253, 247, 0.45);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 253, 247, 0.12);
|
||||||
|
color: #fffdf7;
|
||||||
|
font-weight: 700;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.primary {
|
||||||
|
border-color: #f1c979;
|
||||||
|
background: #f1c979;
|
||||||
|
color: #21312d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 1px;
|
||||||
|
background: var(--line);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
min-height: 112px;
|
||||||
|
padding: 24px clamp(18px, 4vw, 42px);
|
||||||
|
background: #fffdf7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat strong {
|
||||||
|
display: block;
|
||||||
|
color: var(--green);
|
||||||
|
font-size: clamp(26px, 4vw, 42px);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: clamp(58px, 8vw, 104px) clamp(20px, 6vw, 80px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-inner {
|
||||||
|
width: min(1120px, 100%);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1fr);
|
||||||
|
gap: clamp(24px, 6vw, 72px);
|
||||||
|
align-items: end;
|
||||||
|
margin-bottom: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(30px, 4vw, 52px);
|
||||||
|
line-height: 1.16;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moment {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 140px 1fr;
|
||||||
|
gap: 22px;
|
||||||
|
padding: 22px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 8px 28px rgba(39, 55, 52, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.moment time {
|
||||||
|
color: var(--blue);
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moment h3,
|
||||||
|
.person h3 {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moment p,
|
||||||
|
.person p,
|
||||||
|
.message p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-band {
|
||||||
|
background: var(--soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-card {
|
||||||
|
min-height: 230px;
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
padding: 18px;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #fff;
|
||||||
|
background:
|
||||||
|
linear-gradient(0deg, rgba(26, 35, 34, 0.76), rgba(26, 35, 34, 0.08)),
|
||||||
|
var(--tile-bg);
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-card:nth-child(1) {
|
||||||
|
--tile-bg: linear-gradient(135deg, #376d5a, #e8a84c);
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-card:nth-child(2) {
|
||||||
|
--tile-bg: linear-gradient(135deg, #456f94, #f0c66d);
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-card:nth-child(3) {
|
||||||
|
--tile-bg: linear-gradient(135deg, #c96452, #f1d9a6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-card:nth-child(4) {
|
||||||
|
--tile-bg: linear-gradient(135deg, #263e5c, #7ab28b);
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-card:nth-child(2),
|
||||||
|
.photo-card:nth-child(4) {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-card strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-card span {
|
||||||
|
display: block;
|
||||||
|
color: rgba(255, 255, 255, 0.82);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.people-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.person {
|
||||||
|
min-height: 210px;
|
||||||
|
padding: 22px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 54px;
|
||||||
|
height: 54px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: color-mix(in srgb, var(--accent), white 72%);
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.person:nth-child(1) { --accent: var(--green); }
|
||||||
|
.person:nth-child(2) { --accent: var(--blue); }
|
||||||
|
.person:nth-child(3) { --accent: var(--coral); }
|
||||||
|
.person:nth-child(4) { --accent: #7b6b3a; }
|
||||||
|
.person:nth-child(5) { --accent: #4d796d; }
|
||||||
|
.person:nth-child(6) { --accent: #755c86; }
|
||||||
|
|
||||||
|
.message-wall {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.1fr 0.9fr;
|
||||||
|
gap: 18px;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
min-height: 160px;
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.featured {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #24443a;
|
||||||
|
color: #fffdf7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.featured p {
|
||||||
|
color: rgba(255, 253, 247, 0.86);
|
||||||
|
font-size: clamp(20px, 3vw, 32px);
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message cite {
|
||||||
|
display: block;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: var(--sun);
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-messages {
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ending {
|
||||||
|
text-align: center;
|
||||||
|
background: #1f2b2a;
|
||||||
|
color: #fffdf7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ending .section-inner {
|
||||||
|
max-width: 780px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ending p {
|
||||||
|
margin: 20px auto 0;
|
||||||
|
color: rgba(255, 253, 247, 0.78);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 24px;
|
||||||
|
color: rgba(255, 253, 247, 0.58);
|
||||||
|
background: #1f2b2a;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.site-header {
|
||||||
|
align-items: flex-start;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
min-height: 88vh;
|
||||||
|
padding-top: 92px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats,
|
||||||
|
.section-title,
|
||||||
|
.message-wall {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-grid,
|
||||||
|
.people-grid {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moment {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.hero-actions {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats,
|
||||||
|
.photo-grid,
|
||||||
|
.people-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-card,
|
||||||
|
.photo-card:nth-child(2),
|
||||||
|
.photo-card:nth-child(4) {
|
||||||
|
min-height: 220px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "."
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user