Skip to content

Commit 1913bce

Browse files
ExquisiteCoreExquisiteCore
committed
style: 优化首页的响应式布局和样式
调整了页面的间距、字体大小和按钮尺寸，使其在不同屏幕尺寸下表现更一致。使用 Tailwind 的响应式类来提升用户体验。
1 parent 556a6ed commit 1913bce

1 file changed

Lines changed: 13 additions & 11 deletions

File tree

‎blog-web/src/pages/index.astro‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,32 @@ import Layout from "@/layouts/Layout.astro";
55
<Layout title="ExquisiteCore - 个人博客">
66
<!-- Hero Section -->
77
<section
8-
class="hero min-h-[85vh] flex items-center justify-center py-4 px-6"
8+
class="hero min-h-[85vh] flex items-center justify-center py-4 px-4 sm:px-6"
99
>
10-
<div class="hero-content text-left max-w-3xl">
10+
<div class="hero-content text-left w-full max-w-3xl">
1111
<div>
12-
<h1 class="text-6xl font-bold mb-4">
12+
<h1
13+
class="text-4xl sm:text-5xl md:text-6xl font-bold mb-2 sm:mb-4"
14+
>
1315
你好，<br />我是 ExquisiteCore。
1416
</h1>
15-
<p class="text-xl py-6 opacity-80">
17+
<p class="text-lg sm:text-xl py-4 sm:py-6 opacity-80">
1618
全栈开发者 / 业余游戏开发者。<br />
1719
目前是一名学生。<br />
1820
我喜欢做有趣的项目。
1921
</p>
20-
<div class="flex flex-wrap gap-3 mt-6">
22+
<div class="flex flex-wrap gap-2 sm:gap-3 mt-4 sm:mt-6">
2123
<a
2224
href="https://github.com/ExquisiteCore"
23-
class="btn btn-outline"
25+
class="btn btn-outline btn-sm sm:btn-md"
2426
target="_blank"
2527
rel="noopener noreferrer"
2628
>
2729
<svg
2830
xmlns="http://www.w3.org/2000/svg"
2931
viewBox="0 0 24 24"
3032
fill="currentColor"
31-
class="w-5 h-5"
33+
class="w-4 h-4 sm:w-5 sm:h-5"
3234
>
3335
<path
3436
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
@@ -38,28 +40,28 @@ import Layout from "@/layouts/Layout.astro";
3840
</a>
3941
<a
4042
href="https://space.bilibili.com/453875890"
41-
class="btn btn-outline"
43+
class="btn btn-outline btn-sm sm:btn-md"
4244
target="_blank"
4345
rel="noopener noreferrer"
4446
>
4547
<svg
4648
xmlns="http://www.w3.org/2000/svg"
4749
viewBox="0 0 24 24"
4850
fill="currentColor"
49-
class="w-5 h-5"
51+
class="w-4 h-4 sm:w-5 sm:h-5"
5052
>
5153
<path
5254
d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906L17.813 4.653zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773H5.333zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373z"
5355
></path>
5456
</svg>
5557
<span>哔哩哔哩</span>
5658
</a>
57-
<a href="/blog" class="btn btn-outline">
59+
<a href="/blog" class="btn btn-outline btn-sm sm:btn-md">
5860
<svg
5961
xmlns="http://www.w3.org/2000/svg"
6062
viewBox="0 0 24 24"
6163
fill="currentColor"
62-
class="w-5 h-5"
64+
class="w-4 h-4 sm:w-5 sm:h-5"
6365
>
6466
<path
6567
d="M19.498 3h-15c-1.381 0-2.5 1.12-2.5 2.5v13c0 1.38 1.119 2.5 2.5 2.5h15c1.381 0 2.5-1.12 2.5-2.5v-13c0-1.38-1.119-2.5-2.5-2.5zm-3.502 12h-2v-1h2v1zm0-3h-2v-1h2v1zm-8.996 3h-2v-7h2v7zm2.996-3h-2v-1h2v1zm0 3h-2v-1h2v1zm4-3h-2v-1h2v1zm4-3h-10v-1h10v1z"

0 commit comments

Comments
 (0)