Skip to content

Commit f73f933

Browse files
LingLambdaLingLambda
committed
美化样式
1 parent 03044aa commit f73f933

File tree

6 files changed

+61
-34
lines changed

6 files changed

+61
-34
lines changed

‎src/components/FriendCard.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const { name, url, description, icon } = Astro.props;
3131
height: 160px;
3232

3333
background-color: white;
34-
border: 2px solid black; /* 添加黑色的边框，宽度为 2px */
34+
border: 1px solid black; /* 添加黑色的边框，宽度为 2px */
3535
border-radius: 40px;
3636
}
3737
.main:hover{

‎src/components/HeadMenu.astro‎

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,65 @@
33
---
44

55
<nav class="menu">
6-
<a href="/" data-astro-prefetch>Ling的小窝</a>
7-
<a href="/blog" data-astro-prefetch>博客</a>
8-
<a href="/time-line" data-astro-prefetch>时线</a>
9-
<a href="/lab" data-astro-prefetch>实验</a>
10-
<a href="/friend-links" data-astro-prefetch>友链</a>
11-
<a href="/about" data-astro-prefetch>关于</a>
6+
<a id="index" href="/" data-astro-prefetch>Ling的小窝</a>
7+
<a id="blog" href="/blog" data-astro-prefetch>博客</a>
8+
<a id="time-line" href="/time-line" data-astro-prefetch>时线</a>
9+
<a id="lab" href="/lab" data-astro-prefetch>实验</a>
10+
<a id="friend-links" href="/friend-links" data-astro-prefetch>友链</a>
11+
<a id="about" href="/about" data-astro-prefetch>关于</a>
1212
</nav>
1313

14+
<script>
15+
const updateSelected = () => {
16+
let pathname = window.location.pathname.substring(1);
17+
pathname = pathname === "" ? "index" : pathname;
18+
const e = document.getElementById(pathname);
19+
if (!e) {
20+
return;
21+
}
22+
e.classList.add("selected");
23+
};
24+
updateSelected();
25+
</script>
26+
1427
<style>
1528
.menu {
1629
display: flex;
1730
align-items: center;
1831
justify-content: space-around;
1932
width: 600px;
2033
height: 55px;
21-
22-
background-color: white;
23-
border: 2px solid black; /* 添加黑色的边框，宽度为 2px */
34+
background-color: rgba(255, 255, 255, 0.1);
35+
backdrop-filter: blur(4px);
36+
border: 1px solid rgba(0, 0, 0, 0.2); /* 添加黑色的边框，宽度为 2px */
2437
border-radius: 40px;
2538
padding: 0 25px; /* 给容器添加左右内边距 */
2639
}
2740

2841
.menu > a {
29-
color: black; /* 文字颜色 */
42+
color: rgba(0, 0, 0, 0.7); /* 文字颜色 */
3043
padding: 7px 15px; /* 内边距 */
3144
text-decoration: none; /* 去除下划线 */
3245
border-radius: 18px; /* 圆角 */
3346
font-size: 19px; /* 字体大小 */
47+
transition:
48+
background-color 0.2s ease-in-out,
49+
color 0.2s ease-in-out;
3450
}
3551

3652
.menu > a:hover {
37-
background-color: #dddddd;
38-
transition: background-color 0.2s ease-in-out;
53+
background-color: rgba(221, 221, 221, 0.4);
54+
}
55+
56+
.menu > a.selected {
57+
transition: none;
58+
background-color: rgba(0, 0, 0, 0.5);
59+
color: rgba(247, 247, 249, 1);
60+
}
61+
62+
.menu > a.selected:hover {
63+
transition:none;
64+
background-color: rgba(0, 0, 0, 0.6);
65+
color: rgba(247, 247, 249, 1);
3966
}
4067
</style>

‎src/components/TitileCard.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const { title, date, wordNum } = Astro.props;
2020
a {
2121
text-decoration: none; /* 去除下划线 */
2222
color: inherit; /* 继承父元素的颜色 */
23+
background: rgba(255, 255, 255, 0.2);
2324
}
2425
.post-card {
2526
display: flex;
@@ -31,12 +32,11 @@ const { title, date, wordNum } = Astro.props;
3132
height: 130px;
3233
margin-top: 20px;
3334
margin-bottom: 10px;
34-
border: 2px solid black; /* 添加黑色的边框，宽度为 2px */
35+
border: 1px solid rgba(0, 0, 0, 0.2); /* 添加黑色的边框，宽度为 2px */
3536
border-radius: 10px;
3637
padding: 10px 25px; /* 给容器添加左右内边距 */
3738
cursor: pointer; /* 悬浮时显示手指 */
38-
transition: box-shadow 0.15s ease-out;
39-
transition: background-color 0.15s ease-out;
39+
transition: box-shadow 0.15s ease-out,background-color 0.15s ease-out;
4040
}
4141

4242
.post-card > * {
@@ -50,7 +50,7 @@ const { title, date, wordNum } = Astro.props;
5050
.post-card:hover {
5151
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
5252
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
53-
background-color: #f4f3f6;
53+
background: rgba(244, 243, 246, 0.4);
5454
}
5555

5656
.card-top {

‎src/layouts/BaseLayout.astro‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
import BaseHead from "../components/HeadMenu.astro";
2+
import HeadMenu from "../components/HeadMenu.astro";
33
import "../styles/global.css";
44
5-
const { description, keywords } = Astro.props;
5+
const { description, keywords ,selected} = Astro.props;
66
---
77

88
<html lang="zh">
@@ -18,14 +18,14 @@ const { description, keywords } = Astro.props;
1818
<body>
1919
<div id="container">
2020
<header id="menu">
21-
<BaseHead />
21+
<HeadMenu/>
2222
</header>
2323
<main>
2424
<section>
2525
<slot />
2626
</section>
2727
</main>
28-
<hr style="width:600px;color:#808080; margin-top: 1rem;" />
28+
<!-- <hr style="width:600px;color:#808080; margin-top: 1rem;" /> -->
2929
<footer>
3030
<!-- <Image src={notByAi} alt="not-by-ai" /> -->
3131
<p>&copy; 2025</p>
@@ -56,7 +56,9 @@ const { description, keywords } = Astro.props;
5656
box-sizing: border-box; /* 确保所有元素的宽高包含 padding 和 border */
5757
}
5858
html {
59-
scrollbar-gutter: stable; /* 防止滚动条导致页面宽度不一致 */
59+
background-color: rgb(250, 252, 254);
60+
/* scrollbar-gutter: stable; */ /* 防止滚动条导致页面宽度不一致 */
61+
overflow-y: scroll; /*总是显示滚动条*/
6062
}
6163
html,
6264
body {
@@ -100,14 +102,16 @@ const { description, keywords } = Astro.props;
100102
}
101103

102104
footer {
105+
margin-top: 30px;
106+
border-top: 1px solid rgb(227, 232, 247); 顶部边框线
103107
height: auto; /* 让 footer 根据内容自适应高度 */
104108
width: 100%;
105-
background-color: white;
109+
background-color: rgb(247, 247, 249);;
106110
color: #808080;
107111
display: flex;
108112
flex-direction: row;
109113
justify-content: center;
110-
padding: 20px;
114+
padding: 15px;
111115
}
112116

113117
footer > * {

‎src/pages/blog.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,6 @@ const blogs = await getCollectionOrderByDate("blog", ({ data }) => {
2020
})
2121
}
2222
</BaseLayout>
23+
24+
<style>
25+
</style>

‎src/pages/lab.astro‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
11
---
22
import BaseLayout from "../layouts/BaseLayout.astro";
3-
4-
53
---
6-
<BaseLayout description='偶尔会在这乱写' keywords="lab,实验,前端">
7-
偶尔会在这乱写
4+
5+
<BaseLayout description="偶尔会在这乱写" keywords="lab,实验,前端">
6+
偶尔会在这乱写
87
</BaseLayout>
98

109
<style>
11-
html{
12-
background-image: url(/lab-background.webp);
13-
background-size: cover;
14-
background-position: center; /* 背景图片居中 */
15-
max-height: 100vh;
16-
}
1710
</style>

0 commit comments

Comments
 (0)