Skip to content

Commit 8bc6076

Browse files
CatCodeMeCatCodeMe
committed
调整组件适配小屏幕
1 parent 5d64c80 commit 8bc6076

4 files changed

Lines changed: 128 additions & 35 deletions

File tree

‎packages/pure/components/basic/Footer.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const version = pkg.version
8181
target='_blank'
8282
class='underline underline-offset-4 hover:text-primary external-link'
8383
>
84-
Pure theme v{version}
84+
Pure theme
8585
</a>
8686
<span class='inline-flex items-center gap-x-1'>
8787
<Icon name='heart' class='size-4' />

‎packages/pure/components/pages/Copyright.astro‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,38 @@ const showToastStr = showToast.toString()
5858
</div>
5959

6060
{/* common info */}
61-
<div class='flex flex-row flex-wrap justify-start gap-x-5 gap-y-1 sm:gap-x-8'>
62-
<div class='flex items-center gap-x-2 sm:flex-col'>
61+
<div class='flex flex-col gap-y-2 sm:flex-row sm:flex-wrap sm:justify-start sm:gap-x-8 sm:gap-y-1'>
62+
{/* 小屏幕布局：垂直排列 */}
63+
<div class='flex flex-col gap-y-2 sm:hidden'>
64+
{/* 图片 + Author 名称在一行 */}
65+
<div class='flex items-center gap-x-2'>
66+
<Image
67+
src={avatar}
68+
alt={config.author}
69+
class='size-10 rounded-full object-cover border'
70+
loading='lazy'
71+
width={40}
72+
height={40}
73+
/>
74+
<span>Author</span>
75+
<span class='text-sm text-foreground'>{config.author}</span>
76+
</div>
77+
78+
{/* Published at 另起一行 */}
79+
{publishDate && (
80+
<div class='flex items-center gap-x-2'>
81+
<span>Published at</span>
82+
<span class='text-sm text-foreground'>
83+
{getFormattedDate(publishDate, {
84+
month: 'long'
85+
})}
86+
</span>
87+
</div>
88+
)}
89+
</div>
90+
91+
{/* 大屏幕布局：保持原有的图片切换效果 */}
92+
<div class='hidden sm:flex sm:items-center sm:gap-x-2 sm:flex-col'>
6393
<div class='relative group h-12 sm:min-w-16'>
6494
<Image
6595
src={avatar}
@@ -68,7 +98,6 @@ const showToastStr = showToast.toString()
6898
loading='lazy'
6999
width={48}
70100
height={48}
71-
alt='avatar'
72101
/>
73102
<div
74103
class='flex flex-col absolute start-0 -translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-in-out whitespace-nowrap'
@@ -79,11 +108,12 @@ const showToastStr = showToast.toString()
79108
</div>
80109
</div>
81110

111+
{/* 大屏幕的 Published at */}
82112
{
83113
publishDate && (
84-
<div class='flex gap-x-2 sm:min-w-16 sm:flex-col'>
114+
<div class='hidden sm:flex sm:gap-x-2 sm:min-w-16 sm:flex-col'>
85115
<span>Published at</span>
86-
<span class='text-sm text-foreground max-sm:place-self-center'>
116+
<span class='text-sm text-foreground'>
87117
{getFormattedDate(publishDate, {
88118
month: 'long'
89119
})}

‎packages/pure/components/pages/Paper.astro‎

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,10 @@ const starCount = data.star ? Math.min(Math.max(data.star, 0), 5) : 0
4141
className
4242
)}
4343
>
44-
{/* Star 评分 - 右上角 + 编号 */}
44+
{/* Star 评分 - 右上角 + 编号 (仅在大屏幕显示) */}
4545
{
4646
(starCount > 0 || typeof paper.index === 'number') && (
47-
<div class='absolute top-4 right-4 flex items-center gap-1 z-20'>
47+
<div class='absolute top-4 right-4 items-center gap-1 z-20 hidden md:flex top-right-rating'>
4848
{starCount > 0 && (
4949
<div class='flex gap-0.5'>
5050
{Array.from({ length: 5 }).map((_, i) => (
@@ -67,8 +67,8 @@ const starCount = data.star ? Math.min(Math.max(data.star, 0), 5) : 0
6767
)
6868
}
6969

70-
{/* 右下角倾斜卡片，仅主图标和链接 */}
71-
<div class='paper-card-icon-preview'>
70+
{/* 右下角倾斜卡片，仅主图标和链接 (仅在大屏幕显示) */}
71+
<div class='paper-card-icon-preview hidden md:block'>
7272
<div class='paper-preview-container'>
7373
<Icon name={data.isbn ? 'paper_book' : 'paper_article'} class='paper-icon' />
7474
{
@@ -166,6 +166,54 @@ const starCount = data.star ? Math.min(Math.max(data.star, 0), 5) : 0
166166
</div>
167167
)
168168
}
169+
170+
{/* 小屏幕底部信息行 */}
171+
<div class='mt-4 pt-3 border-t border-zinc-100 dark:border-zinc-800 flex items-center justify-between md:hidden'>
172+
<div class='flex items-center gap-3'>
173+
{/* 论文类型图标 */}
174+
<div class='flex items-center gap-1 text-sm text-zinc-500 dark:text-zinc-400'>
175+
<Icon name={data.isbn ? 'paper_book' : 'paper_article'} class='size-4' />
176+
<span class='text-xs'>{data.isbn ? 'Book' : 'Article'}</span>
177+
</div>
178+
{/* 论文链接 */}
179+
{
180+
data.paperUrl && (
181+
<a
182+
href={data.paperUrl}
183+
target='_blank'
184+
rel='noopener noreferrer'
185+
class='text-xs text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors'
186+
>
187+
View &gt;&gt;
188+
</a>
189+
)
190+
}
191+
</div>
192+
193+
{/* 评分和编号 */}
194+
<div class='flex items-center gap-2'>
195+
{/* 编号 */}
196+
{typeof paper.index === 'number' && (
197+
<span class='text-xs text-zinc-400 dark:text-zinc-500 font-mono select-none'>
198+
No.{String(paper.index).padStart(2, '0')}
199+
</span>
200+
)}
201+
{/* 评分 */}
202+
{starCount > 0 && (
203+
<div class='flex gap-0.5'>
204+
{Array.from({ length: 5 }).map((_, i) => (
205+
<Icon
206+
name='star'
207+
class={cn(
208+
'size-3',
209+
i < starCount ? 'text-yellow-400' : 'text-zinc-200 dark:text-zinc-700'
210+
)}
211+
/>
212+
))}
213+
</div>
214+
)}
215+
</div>
216+
</div>
169217
</div>
170218
</Tag>
171219

@@ -240,6 +288,13 @@ const starCount = data.star ? Math.min(Math.max(data.star, 0), 5) : 0
240288
letter-spacing: 0.04em;
241289
font-weight: 500;
242290
}
291+
/* 确保小屏幕隐藏右上角评分和编号 */
292+
@media (max-width: 767px) {
293+
.top-right-rating {
294+
display: none !important;
295+
}
296+
}
297+
243298
@media (max-width: 640px) {
244299
.paper-card-icon-preview {
245300
right: 0.3rem;

‎src/pages/index.astro‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
4646
<div class='relative z-10 flex min-h-screen items-start px-4 pt-32'>
4747
<div class='mx-auto w-full max-w-7xl'>
4848
<!-- 个人信息 -->
49-
<div class='flex items-center gap-16'>
49+
<div class='flex flex-col items-center gap-16 lg:flex-row lg:items-center'>
5050
<!-- 左侧大头像 -->
5151
<div class='avatar-container relative shrink-0'>
5252
<!-- 装饰星星 -->
@@ -69,7 +69,7 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
6969
<Image
7070
src={avatar}
7171
alt='profile'
72-
class='size-64 rounded-full border-2 border-border object-cover shadow-lg transition-all duration-300 hover:grayscale'
72+
class='size-64 rounded-full border-2 border-border object-cover shadow-lg transition-all duration-300 lg:hover:grayscale'
7373
loading='eager'
7474
/>
7575
<div class='avatar-message'>
@@ -83,9 +83,9 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
8383
</div>
8484

8585
<!-- 右侧内容 -->
86-
<div class='flex flex-col gap-8'>
86+
<div class='flex flex-col gap-8 text-left'>
8787
<!-- 标题区域 -->
88-
<div class='flex items-center gap-3'>
88+
<div class='flex items-center gap-3 justify-start'>
8989
<h1 class='text-3xl font-bold'>
9090
Welcome to my blog, this is <span
9191
class='author-name cursor-help'
@@ -115,7 +115,7 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
115115
</div>
116116

117117
<!-- 社交媒体图标 -->
118-
<div class='flex gap-4'>
118+
<div class='flex gap-4 justify-start'>
119119
<Label
120120
title='GitHub'
121121
as='a'
@@ -146,7 +146,7 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
146146
</div>
147147

148148
<!-- 按钮组 -->
149-
<div class='flex gap-4'>
149+
<div class='flex flex-col gap-4 sm:flex-row sm:justify-start'>
150150
<Button title='About Me' href='/about' style='ahead' />
151151
<Button title='View Blog' href='/blog' style='ahead' />
152152
</div>
@@ -155,25 +155,6 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
155155
</div>
156156
</div>
157157

158-
<!-- 格言 - 调整位置到内容下方 -->
159-
<div class='absolute bottom-[30%] left-1/2 -translate-x-1/2'>
160-
<div
161-
class='flex items-center gap-x-3 rounded-full border bg-background/80 px-4 py-2 text-sm shadow-sm backdrop-blur transition-shadow hover:shadow-md'
162-
>
163-
<span class='relative flex items-center justify-center'>
164-
<span
165-
class='absolute size-2 animate-ping rounded-full border border-green-400 bg-green-400 opacity-75'
166-
></span>
167-
<span class='size-2 rounded-full bg-green-400'></span>
168-
</span>
169-
<p class='font-medium text-muted-foreground'>五帝三皇神圣事，骗了无涯过客</p>
170-
</div>
171-
</div>
172-
173-
<!-- 向下滚动指示器 - 调整位置并加强动画 -->
174-
<div class='absolute bottom-[15%] left-1/2 -translate-x-1/2'>
175-
<span class='inline-block animate-bounce text-3xl text-muted-foreground'>⌄</span>
176-
</div>
177158
</section>
178159

179160
<!-- 第二屏：博客文章和技能 -->
@@ -217,6 +198,21 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
217198
loading='lazy'
218199
/>
219200
</Section>
201+
202+
<!-- 格言 - 页面底部 -->
203+
<div class='mt-5 flex justify-center'>
204+
<div
205+
class='inline-flex items-center gap-x-2 sm:gap-x-3 rounded-full border bg-background/80 px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm shadow-sm backdrop-blur transition-shadow hover:shadow-md'
206+
>
207+
<span class='relative flex items-center justify-center shrink-0'>
208+
<span
209+
class='absolute size-1.5 sm:size-2 animate-ping rounded-full border border-green-400 bg-green-400 opacity-75'
210+
></span>
211+
<span class='size-1.5 sm:size-2 rounded-full bg-green-400'></span>
212+
</span>
213+
<p class='font-medium text-muted-foreground whitespace-nowrap'>五帝三皇神圣事，骗了无涯过客</p>
214+
</div>
215+
</div>
220216
</div>
221217
</section>
222218
</main>
@@ -481,4 +477,16 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
481477
.avatar-wrapper:hover .avatar-message {
482478
opacity: 1;
483479
}
480+
481+
/* 在小屏幕上禁用头像 hover 效果 */
482+
@media (max-width: 1023px) {
483+
.avatar-wrapper:hover .avatar-message {
484+
opacity: 0;
485+
}
486+
487+
/* 在小屏幕上禁用头像点击交互 */
488+
.avatar-wrapper {
489+
pointer-events: none;
490+
}
491+
}
484492
</style>

0 commit comments

Comments
 (0)