Skip to content

Commit d2bf036

Browse files
CatCodeMeCatCodeMe
committed
调整独立页面的 banner 设计
1 parent e536faa commit d2bf036

8 files changed

Lines changed: 151 additions & 48 deletions

File tree

‎src/assets/cats/banner.png‎

1.79 MB
Loading

‎src/assets/msgboard/board.png‎

3.2 MB
Loading

‎src/assets/shelf/desk.png‎

2.91 MB
Loading

‎src/components/waline/DanmakuComments.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import config from '@/site-config'
66
const serverURL = config.integ.waline.server
77
---
88

9-
<div id='danmaku_container' class='terminal-container my-12 mx-auto'>
9+
<div id='danmaku_container' class='terminal-container my-12'>
1010
<div class='terminal-header'>
1111
<div class='terminal-title'>
1212
<span style='font-family: "ZSFT-e"; font-size: 1.5rem;'>CCMTV</span>
@@ -238,7 +238,7 @@ const serverURL = config.integ.waline.server
238238

239239
.terminal-container {
240240
width: 100%;
241-
max-width: 1000px;
241+
/* max-width: 1000px; */
242242
background: var(--terminal-bg);
243243
border: 1px solid var(--border);
244244
border-radius: 4px;

‎src/pages/cats/index.astro‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { Image } from 'astro:assets'
33
import { Icon } from '@/custom/components/user'
44
import { LightGallery } from 'astro-lightgallery'
5+
import bannerImage from '@/assets/cats/banner.png'
56
67
import GalleryLayout from '@/layouts/GalleryLayout.astro'
78
import { info, photos } from '@/assets/cats/config/data'
@@ -12,8 +13,13 @@ const allCats = Object.entries(info)
1213
<GalleryLayout title='猫咪画廊'>
1314
<!-- Section 1: Cat Roster -->
1415
<section class='cat-roster'>
15-
<h2 class='section-title'>8cats' life</h2>
16-
<p class='section-subtitle'>有了名字的猫再也不孤单 | 喵星远了些, ccm 永远爱你们</p>
16+
<div class="section-header">
17+
<div class="section-header-text">
18+
<h2 class='section-title'>8cats' life</h2>
19+
<p class='section-subtitle'>有了名字的猫再也不孤单 | 喵星远了些, ccm 永远爱你们</p>
20+
</div>
21+
<Image src={bannerImage} alt="Cats banner" class="section-header-image" />
22+
</div>
1723
<div class='roster-controls'>
1824
<button class='roster-control-btn active' data-filter='all'>全部</button>
1925
{
@@ -157,19 +163,51 @@ const allCats = Object.entries(info)
157163
</script>
158164

159165
<style>
166+
.section-header {
167+
display: flex;
168+
align-items: stretch;
169+
margin-bottom: 1.5rem;
170+
background-color: #f7fafc;
171+
border-radius: 8px;
172+
overflow: hidden;
173+
}
174+
.section-header-text {
175+
padding: 2rem;
176+
display: flex;
177+
flex-direction: column;
178+
justify-content: center;
179+
flex: 1;
180+
}
181+
.section-header-image {
182+
width: 40%;
183+
object-fit: cover;
184+
}
185+
186+
@media (max-width: 767px) {
187+
.section-header {
188+
flex-direction: column;
189+
}
190+
.section-header-image {
191+
width: 100%;
192+
height: 150px;
193+
}
194+
.section-header-text {
195+
padding: 1.5rem;
196+
}
197+
}
160198
.section-title {
161199
font-size: 2rem;
162200
font-weight: bold;
163-
margin-bottom: 1.5rem;
201+
margin-bottom: 0;
164202
text-align: left;
165203
color: #2d3748;
166204
}
167205

168206
.section-subtitle {
169207
text-align: left;
170208
color: #718096;
171-
margin-top: -1rem;
172-
margin-bottom: 1.5rem;
209+
margin-top: 0.25rem;
210+
margin-bottom: 0;
173211
}
174212

175213
/* Roster Styles */

‎src/pages/msgboard/index.astro‎

Lines changed: 56 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,72 @@
11
---
22
import { Image } from 'astro:assets'
3-
import MsgboardLayout from '@/layouts/MsgboardLayout.astro'
3+
import PageLayout from '@/layouts/BaseLayout.astro'
44
import DanmakuComments from '@/components/waline/DanmakuComments.astro'
5-
import bannerImage from '@/assets/msgboard/boat.png'
5+
import bannerImage from '@/assets/msgboard/board.png'
66
import { Icon } from '@/custom/components/user'
7+
import { Comment } from '@/components/waline'
78
89
const meta = {
910
title: '留言板',
1011
description: '欢迎分享你的故事与想法, 请友善交流, 尊重彼此.'
1112
}
1213
---
1314

14-
<MsgboardLayout info={{ slug: '/msgboard' }}>
15-
<div
16-
id='content-header'
17-
class='animate relative w-full overflow-hidden rounded-lg shadow-lg mb-8 aspect-[3/1] md:aspect-[4/1]'
18-
>
19-
<!-- Optimized Image as Background -->
20-
<Image
21-
src={bannerImage}
22-
alt='留言板横幅'
23-
class='absolute inset-0 z-0 w-full h-full object-cover object-center'
24-
/>
25-
26-
<!-- Gradient Overlay -->
27-
<div class='absolute inset-0 z-10 bg-gradient-to-r from-black/60 via-black/30 to-transparent'>
15+
<PageLayout meta={meta}>
16+
<main class='mt-6 lg:mt-10'>
17+
<div class="section-header">
18+
<div class="section-header-text">
19+
<div class='flex items-center gap-3'>
20+
<Icon name='msgboard' class='size-8' />
21+
<h1 class='text-3xl font-bold'>{meta.title}</h1>
22+
</div>
23+
<p class='mt-2 text-muted-foreground'>{meta.description}</p>
24+
</div>
25+
<Image src={bannerImage} alt="留言板横幅" class="section-header-image" />
2826
</div>
2927

30-
<!-- Text Content -->
31-
<div class='relative z-20 flex h-full flex-col justify-center p-6 md:p-8 md:w-3/4 lg:w-2/3'>
32-
<div class='flex items-center gap-3'>
33-
<Icon name='msgboard' class='size-8 text-white' />
34-
<h1 class='text-3xl font-bold text-white'>{meta.title}</h1>
28+
<div id='content' class='animate mt-8'>
29+
<DanmakuComments />
30+
<div class="mt-8">
31+
<Comment />
3532
</div>
36-
<p class='mt-2 text-white/80'>
37-
{meta.description}
38-
</p>
3933
</div>
40-
</div>
34+
</main>
35+
</PageLayout>
36+
37+
<style>
38+
.section-header {
39+
display: flex;
40+
align-items: stretch;
41+
margin-bottom: 1.5rem;
42+
background-color: #f7fafc;
43+
border-radius: 8px;
44+
overflow: hidden;
45+
height: 200px;
46+
}
47+
.section-header-text {
48+
padding: 2rem;
49+
display: flex;
50+
flex-direction: column;
51+
justify-content: center;
52+
flex: 1;
53+
}
54+
.section-header-image {
55+
width: 40%;
56+
object-fit: cover;
57+
}
4158

42-
<DanmakuComments />
43-
</MsgboardLayout>
59+
@media (max-width: 767px) {
60+
.section-header {
61+
flex-direction: column;
62+
height: auto;
63+
}
64+
.section-header-image {
65+
width: 100%;
66+
height: 150px;
67+
}
68+
.section-header-text {
69+
padding: 1.5rem;
70+
}
71+
}
72+
</style>

‎src/pages/shelf/index.astro‎

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import bookshelfData from 'public/bookshelf.json';
77
88
import PageLayout from '@/layouts/BaseLayout.astro';
99
import ReadingCard from '@/components/reading/ReadingCard.astro';
10-
import bannerImage from '@/assets/shelf/no_so.png';
10+
import bannerImage from '@/assets/shelf/desk.png';
1111
1212
const meta = {
1313
title: '书架',
@@ -51,21 +51,15 @@ const columns = [
5151

5252
<PageLayout {meta}>
5353
<main class='mt-6 lg:mt-10'>
54-
<div id="content-header" class="animate relative w-full overflow-hidden rounded-lg shadow-lg mb-8 aspect-[4/1] md:aspect-[5/1]">
55-
<!-- Optimized Image as Background -->
56-
<Image src={bannerImage} alt="书架横幅" class="absolute inset-0 z-0 w-full h-full object-cover object-bottom" />
57-
58-
<!-- Gradient Overlay -->
59-
<div class="absolute inset-0 z-10 bg-gradient-to-r from-background/90 via-background/60 to-transparent"></div>
60-
61-
<!-- Text Content -->
62-
<div class="relative z-20 flex h-full flex-col justify-center p-8 md:p-12 md:w-3/5 lg:w-1/2">
54+
<div class="section-header">
55+
<div class="section-header-text">
6356
<div class="flex items-center gap-3">
64-
<Icon name="book" class="size-8 text-foreground" />
57+
<Icon name="book" class="size-8" />
6558
<h1 class="text-4xl font-bold">{meta.title}</h1>
6659
</div>
6760
<p class="border-l-2 border-border pl-3 text-lg text-muted-foreground mt-2">{meta.description}</p>
6861
</div>
62+
<Image src={bannerImage} alt="书架横幅" class="section-header-image" />
6963
</div>
7064

7165
<div id='content' class='animate mt-8'>
@@ -99,3 +93,38 @@ const columns = [
9993
</div>
10094
</main>
10195
</PageLayout>
96+
97+
<style>
98+
.section-header {
99+
display: flex;
100+
align-items: stretch;
101+
margin-bottom: 1.5rem;
102+
background-color: #f7fafc;
103+
border-radius: 8px;
104+
overflow: hidden;
105+
}
106+
.section-header-text {
107+
padding: 2rem;
108+
display: flex;
109+
flex-direction: column;
110+
justify-content: center;
111+
flex: 1;
112+
}
113+
.section-header-image {
114+
width: 40%;
115+
object-fit: cover;
116+
}
117+
118+
@media (max-width: 767px) {
119+
.section-header {
120+
flex-direction: column;
121+
}
122+
.section-header-image {
123+
width: 100%;
124+
height: 150px;
125+
}
126+
.section-header-text {
127+
padding: 1.5rem;
128+
}
129+
}
130+
</style>

‎src/site.config.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
import type { Config, IntegrationUserConfig, ThemeUserConfig } from 'packages/pure/types';
2+
3+
4+
25
import type { CardListData } from 'astro-pure/types';
6+
7+
8+
39
import type { IconName } from '../packages/pure/libs/icons';
410

11+
512
const menu: { title: string; link: string; icon?: IconName; iconImg?: string }[] = [
613
{ title: '文章', link: '/blog', icon: 'document' },
7-
{ title: '书架', link: '/shelf', icon: 'shelf' },
814
{ title: '归档', link: '/archives', icon: 'archive' },
15+
{ title: '书架', link: '/shelf', icon: 'shelf' },
916
// { title: 'Projects', link: '/projects' },
1017
{ title: '留言板', link: '/msgboard', icon: 'msgboard' },
1118
{ title: '关于', link: '/about', icon: 'about' },
12-
{ title: '', link: '/cats', iconImg: '/favicon/favicon-32x32.png' },
13-
];
19+
{ title: '', link: '/cats', iconImg: '/favicon/favicon-32x32.png' }
20+
]
1421

1522
export const theme: ThemeUserConfig = {
1623
// === Basic configuration ===

0 commit comments

Comments
 (0)