增加页
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
export const messagesIntro = {
|
||||
title: "留言墙",
|
||||
text: "可以把收集来的留言放在这里。老师寄语、同学短句、匿名祝福都很适合。"
|
||||
};
|
||||
|
||||
export const featuredMessage = {
|
||||
text: "后来我们去了不同的地方，但那间教室像一个坐标，提醒我们曾经一起出发。",
|
||||
author: "写给高三 X 班"
|
||||
};
|
||||
|
||||
export const messages = [
|
||||
{
|
||||
title: "给一年后的自己",
|
||||
text: "不要忘记当时为什么出发，也不要害怕路上偶尔慢一点。"
|
||||
},
|
||||
{
|
||||
title: "给老同学",
|
||||
text: "愿你打开这个页面的时候，刚好想起一个很好的下午。"
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,43 @@
|
||||
export const peopleIntro = {
|
||||
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: "希望我们都成为更好的自己，也永远记得曾经一起努力过的样子。"
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,27 @@
|
||||
export const galleryIntro = {
|
||||
title: "照片墙",
|
||||
text: "后续可以把这些色块换成真实照片。建议每类选 6 到 12 张，少一点反而更有纪念册的质感。"
|
||||
};
|
||||
|
||||
export const photos = [
|
||||
{
|
||||
title: "教室日常",
|
||||
text: "黑板、课桌、窗边、试卷",
|
||||
image: ""
|
||||
},
|
||||
{
|
||||
title: "班级活动",
|
||||
text: "运动会、晚会、春游、比赛",
|
||||
image: ""
|
||||
},
|
||||
{
|
||||
title: "毕业那天",
|
||||
text: "合照、签名、花束、校门",
|
||||
image: ""
|
||||
},
|
||||
{
|
||||
title: "没被摆拍的瞬间",
|
||||
text: "走廊、食堂、晚霞和笑场",
|
||||
image: ""
|
||||
}
|
||||
];
|
||||
+5
-102
@@ -9,10 +9,11 @@ export const site = {
|
||||
};
|
||||
|
||||
export const navItems = [
|
||||
{ label: "三年时间线", href: "#timeline" },
|
||||
{ label: "照片墙", href: "#gallery" },
|
||||
{ label: "一年后的我们", href: "#people" },
|
||||
{ label: "留言墙", href: "#messages" }
|
||||
{ label: "首页", href: "/" },
|
||||
{ label: "三年时间线", href: "/timeline/" },
|
||||
{ label: "照片墙", href: "/gallery/" },
|
||||
{ label: "一年后的我们", href: "/people/" },
|
||||
{ label: "留言墙", href: "/messages/" }
|
||||
];
|
||||
|
||||
export const stats = [
|
||||
@@ -20,101 +21,3 @@ export const stats = [
|
||||
{ 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: "愿你打开这个页面的时候，刚好想起一个很好的下午。"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
export const timelineIntro = {
|
||||
title: "从第一节课，到最后一次回头",
|
||||
text: "把班级大事按时间放在这里。现在是示例内容，之后可以替换成军训、运动会、成人礼、百日誓师、毕业照等真实节点。"
|
||||
};
|
||||
|
||||
export const timeline = [
|
||||
{
|
||||
date: "高一 · 九月",
|
||||
title: "第一次点名",
|
||||
text: "很多名字还对不上脸，但同一间教室已经开始收藏我们的吵闹、紧张和新鲜感。"
|
||||
},
|
||||
{
|
||||
date: "高二 · 秋天",
|
||||
title: "运动会和晚自习后的风",
|
||||
text: "有人在跑道上冲线，有人在看台上喊到嗓子哑。那天的风，后来吹进了很多照片里。"
|
||||
},
|
||||
{
|
||||
date: "高三 · 春天",
|
||||
title: "倒计时牌越来越小",
|
||||
text: "黑板角落的数字每天少一点，我们一边嫌累，一边悄悄把彼此记得更牢。"
|
||||
},
|
||||
{
|
||||
date: "毕业 · 六月",
|
||||
title: "合照里的那个下午",
|
||||
text: "校服、签名、拥抱和没说完的话，都被按下快门，留在了那一年最亮的地方。"
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,31 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
import { navItems, site } from "../data/site";
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const { title = site.title } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header" aria-label="网站导航">
|
||||
<a class="brand" href="/">{site.className}</a>
|
||||
<nav class="nav">
|
||||
{navItems.map((item) => <a href={item.href}>{item.label}</a>)}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<slot />
|
||||
|
||||
<footer>{site.footer}</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import { galleryIntro, photos } from "../data/photos";
|
||||
import { site } from "../data/site";
|
||||
---
|
||||
|
||||
<BaseLayout title={`${galleryIntro.title} · ${site.className}`}>
|
||||
<main class="page-main">
|
||||
<section class="page-hero">
|
||||
<div class="section-inner">
|
||||
<a class="back-link" href="/">返回首页</a>
|
||||
<p class="eyebrow">Gallery</p>
|
||||
<h1>{galleryIntro.title}</h1>
|
||||
<p>{galleryIntro.text}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="gallery-band">
|
||||
<div class="section-inner">
|
||||
<div class="photo-grid page-grid">
|
||||
{
|
||||
photos.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>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
+42
-54
@@ -1,31 +1,17 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
import {
|
||||
gallery,
|
||||
messages,
|
||||
navItems,
|
||||
people,
|
||||
site,
|
||||
stats,
|
||||
timeline
|
||||
} from "../data/site";
|
||||
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);
|
||||
---
|
||||
|
||||
<!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>
|
||||
|
||||
<BaseLayout title={site.title}>
|
||||
<section
|
||||
id="top"
|
||||
class="hero"
|
||||
@@ -36,8 +22,8 @@ import {
|
||||
<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>
|
||||
<a class="button primary" href="/timeline/">翻开回忆</a>
|
||||
<a class="button" href="/messages/">写一句话</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -57,15 +43,13 @@ import {
|
||||
<section id="timeline">
|
||||
<div class="section-inner">
|
||||
<div class="section-title">
|
||||
<h2>从第一节课，到最后一次回头</h2>
|
||||
<p>
|
||||
把班级大事按时间放在这里。现在是示例内容，之后可以替换成军训、运动会、成人礼、百日誓师、毕业照等真实节点。
|
||||
</p>
|
||||
<h2>{timelineIntro.title}</h2>
|
||||
<p>{timelineIntro.text}</p>
|
||||
</div>
|
||||
|
||||
<div class="timeline">
|
||||
{
|
||||
timeline.map((moment) => (
|
||||
previewTimeline.map((moment) => (
|
||||
<article class="moment">
|
||||
<time>{moment.date}</time>
|
||||
<div>
|
||||
@@ -76,45 +60,48 @@ import {
|
||||
))
|
||||
}
|
||||
</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>照片墙先留四个位置</h2>
|
||||
<p>
|
||||
后续可以把这些色块换成真实照片。建议每类选 6 到 12 张，少一点反而更有纪念册的质感。
|
||||
</p>
|
||||
<h2>{galleryIntro.title}</h2>
|
||||
<p>{galleryIntro.text}</p>
|
||||
</div>
|
||||
|
||||
<div class="photo-grid">
|
||||
{
|
||||
gallery.map((item) => (
|
||||
<article class="photo-card">
|
||||
previewPhotos.map((photo) => (
|
||||
<article
|
||||
class="photo-card"
|
||||
style={photo.image ? `--photo-image: url("${photo.image}")` : ""}
|
||||
>
|
||||
<div>
|
||||
<strong>{item.title}</strong>
|
||||
<span>{item.text}</span>
|
||||
<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>一年后的我们</h2>
|
||||
<p>
|
||||
这里可以做成同学卡片：姓名、所在城市、学校或方向，以及一句想对大家说的话。
|
||||
</p>
|
||||
<h2>{peopleIntro.title}</h2>
|
||||
<p>{peopleIntro.text}</p>
|
||||
</div>
|
||||
|
||||
<div class="people-grid">
|
||||
{
|
||||
people.map((person) => (
|
||||
previewPeople.map((person) => (
|
||||
<article class="person">
|
||||
<div class="avatar">{person.initial}</div>
|
||||
<h3>
|
||||
@@ -125,24 +112,26 @@ import {
|
||||
))
|
||||
}
|
||||
</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>留言墙</h2>
|
||||
<p>可以把收集来的留言放在这里。老师寄语、同学短句、匿名祝福都很适合。</p>
|
||||
<h2>{messagesIntro.title}</h2>
|
||||
<p>{messagesIntro.text}</p>
|
||||
</div>
|
||||
|
||||
<div class="message-wall">
|
||||
<article class="message featured">
|
||||
<p>“{messages.featured.text}”</p>
|
||||
<cite>{messages.featured.author}</cite>
|
||||
<p>“{featuredMessage.text}”</p>
|
||||
<cite>{featuredMessage.author}</cite>
|
||||
</article>
|
||||
<div class="small-messages">
|
||||
{
|
||||
messages.items.map((message) => (
|
||||
messages.slice(0, 2).map((message) => (
|
||||
<article class="message">
|
||||
<h3>{message.title}</h3>
|
||||
<p>{message.text}</p>
|
||||
@@ -151,6 +140,8 @@ import {
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="section-link" href="/messages/">查看全部留言</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -163,7 +154,4 @@ import {
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>{site.footer}</footer>
|
||||
</body>
|
||||
</html>
|
||||
</BaseLayout>
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import { featuredMessage, messages, messagesIntro } from "../data/messages";
|
||||
import { site } from "../data/site";
|
||||
---
|
||||
|
||||
<BaseLayout title={`${messagesIntro.title} · ${site.className}`}>
|
||||
<main class="page-main">
|
||||
<section class="page-hero">
|
||||
<div class="section-inner">
|
||||
<a class="back-link" href="/">返回首页</a>
|
||||
<p class="eyebrow">Messages</p>
|
||||
<h1>{messagesIntro.title}</h1>
|
||||
<p>{messagesIntro.text}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="gallery-band">
|
||||
<div class="section-inner">
|
||||
<div class="message-wall">
|
||||
<article class="message featured">
|
||||
<p>“{featuredMessage.text}”</p>
|
||||
<cite>{featuredMessage.author}</cite>
|
||||
</article>
|
||||
<div class="small-messages">
|
||||
{
|
||||
messages.map((message) => (
|
||||
<article class="message">
|
||||
<h3>{message.title}</h3>
|
||||
<p>{message.text}</p>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import { people, peopleIntro } from "../data/people";
|
||||
import { site } from "../data/site";
|
||||
---
|
||||
|
||||
<BaseLayout title={`${peopleIntro.title} · ${site.className}`}>
|
||||
<main class="page-main">
|
||||
<section class="page-hero">
|
||||
<div class="section-inner">
|
||||
<a class="back-link" href="/">返回首页</a>
|
||||
<p class="eyebrow">Classmates</p>
|
||||
<h1>{peopleIntro.title}</h1>
|
||||
<p>{peopleIntro.text}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-inner">
|
||||
<div class="people-grid page-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>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import { site } from "../data/site";
|
||||
import { timeline, timelineIntro } from "../data/timeline";
|
||||
---
|
||||
|
||||
<BaseLayout title={`${timelineIntro.title} · ${site.className}`}>
|
||||
<main class="page-main">
|
||||
<section class="page-hero">
|
||||
<div class="section-inner">
|
||||
<a class="back-link" href="/">返回首页</a>
|
||||
<p class="eyebrow">Timeline</p>
|
||||
<h1>{timelineIntro.title}</h1>
|
||||
<p>{timelineIntro.text}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-inner">
|
||||
<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>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
+60
-7
@@ -245,6 +245,55 @@ h2 {
|
||||
background: var(--soft);
|
||||
}
|
||||
|
||||
.page-main {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
padding-top: 132px;
|
||||
padding-bottom: 70px;
|
||||
color: #fffdf7;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(31, 43, 42, 0.96), rgba(55, 109, 90, 0.88)),
|
||||
#1f2b2a;
|
||||
}
|
||||
|
||||
.page-hero h1 {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.page-hero p:not(.eyebrow) {
|
||||
max-width: 680px;
|
||||
margin: 22px 0 0;
|
||||
color: rgba(255, 253, 247, 0.82);
|
||||
font-size: clamp(17px, 2vw, 21px);
|
||||
}
|
||||
|
||||
.back-link,
|
||||
.section-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 42px;
|
||||
padding: 9px 15px;
|
||||
border-radius: 8px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
margin-bottom: 28px;
|
||||
border: 1px solid rgba(255, 253, 247, 0.38);
|
||||
color: #fffdf7;
|
||||
background: rgba(255, 253, 247, 0.12);
|
||||
}
|
||||
|
||||
.section-link {
|
||||
margin-top: 26px;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--green);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
@@ -260,30 +309,30 @@ h2 {
|
||||
color: #fff;
|
||||
background:
|
||||
linear-gradient(0deg, rgba(26, 35, 34, 0.76), rgba(26, 35, 34, 0.08)),
|
||||
var(--tile-bg);
|
||||
var(--photo-image, var(--tile-bg));
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.photo-card:nth-child(1) {
|
||||
.photo-card:nth-child(4n + 1) {
|
||||
--tile-bg: linear-gradient(135deg, #376d5a, #e8a84c);
|
||||
}
|
||||
|
||||
.photo-card:nth-child(2) {
|
||||
.photo-card:nth-child(4n + 2) {
|
||||
--tile-bg: linear-gradient(135deg, #456f94, #f0c66d);
|
||||
}
|
||||
|
||||
.photo-card:nth-child(3) {
|
||||
.photo-card:nth-child(4n + 3) {
|
||||
--tile-bg: linear-gradient(135deg, #c96452, #f1d9a6);
|
||||
}
|
||||
|
||||
.photo-card:nth-child(4) {
|
||||
.photo-card:nth-child(4n) {
|
||||
--tile-bg: linear-gradient(135deg, #263e5c, #7ab28b);
|
||||
}
|
||||
|
||||
.photo-card:nth-child(2),
|
||||
.photo-card:nth-child(4) {
|
||||
.photo-card:nth-child(4n + 2),
|
||||
.photo-card:nth-child(4n) {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
@@ -304,6 +353,10 @@ h2 {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-grid {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.person {
|
||||
min-height: 210px;
|
||||
padding: 22px;
|
||||
|
||||
Reference in New Issue
Block a user