Skip to content

Commit b391d4f

Browse files
ChrungeChrunge
committed
change blog styles
1 parent ba2448e commit b391d4f

File tree

6 files changed

+1042
-1
lines changed

6 files changed

+1042
-1
lines changed

‎quartz/components/Head.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ export default (() => {
4040
<head>
4141
<title>{title}</title>
4242
<meta charSet="utf-8" />
43+
<link rel="preconnect" href="https://fonts.googleapis.com" />
44+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
45+
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Noto+Sans:wght@400;600;700&display=swap" rel="stylesheet" />
46+
4347
{cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && (
4448
<>
4549
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -85,6 +89,9 @@ export default (() => {
8589
<link rel="icon" href={iconPath} />
8690
<meta name="description" content={description} />
8791
<meta name="generator" content="Quartz" />
92+
93+
<meta name="theme-color" content="#d4e4f7" />
94+
<meta name="keywords" content="宫崎骏风格,Quartz,知识库,笔记" />
8895

8996
{css.map((resource) => CSSResourceToStyleElement(resource, true))}
9097
{js

‎quartz/components/SpringBlogHome.jsx‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import React from "react";
2+
3+
export default function SpringBlogHome() {
4+
return (
5+
<div className="min-h-screen p-6 font-serif relative debug-border anime-bg">
6+
<div className="bg-overlay"></div>
7+
8+
<header className="flex flex-col items-center justify-center py-10 relative z-10">
9+
<h1 className="text-4xl md:text-5xl font-bold text-white drop-shadow-md relative">
10+
春风笔记
11+
<span className="absolute -top-6 right-0 w-16 h-16 cherry-blossom opacity-60"></span>
12+
</h1>
13+
<p className="mt-3 text-lg md:text-xl text-gray-100 italic">"像春风般轻柔的思考"</p>
14+
<button className="mt-5 px-5 py-2 text-lg rounded-full shadow-md bg-accent hover:bg-accent-hover text-white transition-all">
15+
探索笔记
16+
</button>
17+
</header>
18+
19+
<main className="grid grid-cols-1 md:grid-cols-3 gap-5 px-3 md:px-12 mt-8 relative z-10">
20+
<div className="bg-white/90 shadow-md rounded-lg p-4 hover:shadow-lg transition-shadow backdrop-blur-sm border-t border-accent/20">
21+
<div className="relative">
22+
<h2 className="text-xl font-semibold text-green-700">读书随想</h2>
23+
<div className="grass-decoration"></div>
24+
</div>
25+
<p className="mt-2 text-gray-700 text-sm">
26+
收集阅读经典与现代作品时的思考，记录那些闪光的瞬间。
27+
</p>
28+
</div>
29+
30+
<div className="bg-white/90 shadow-md rounded-lg p-4 hover:shadow-lg transition-shadow backdrop-blur-sm border-t border-tertiary/20">
31+
<div className="relative">
32+
<h2 className="text-xl font-semibold text-blue-700">技术笔记</h2>
33+
<div className="cloud-decoration"></div>
34+
</div>
35+
<p className="mt-2 text-gray-700 text-sm">
36+
探索各种技术领域的学习心得，从编程到设计的实践记录。
37+
</p>
38+
</div>
39+
40+
<div className="bg-white/90 shadow-md rounded-lg p-4 hover:shadow-lg transition-shadow backdrop-blur-sm border-t border-secondary/20">
41+
<div className="relative">
42+
<h2 className="text-xl font-semibold text-green-700">生活感悟</h2>
43+
<div className="leaf-decoration"></div>
44+
</div>
45+
<p className="mt-2 text-gray-700 text-sm">
46+
捕捉日常中的灵感与感悟，像春风拂过湖面留下的涟漪。
47+
</p>
48+
</div>
49+
</main>
50+
51+
<section className="mt-10 md:mt-16 bg-white/90 rounded-lg p-5 max-w-3xl mx-auto shadow-md backdrop-blur-sm relative z-10">
52+
<h2 className="text-2xl font-semibold text-green-700 mb-3">最近更新</h2>
53+
<div className="space-y-3">
54+
<div className="border-l-2 border-secondary pl-3 hover:bg-green-50/50 transition-colors rounded p-2">
55+
<h3 className="text-lg font-medium text-gray-800">《人类简史》读后感</h3>
56+
<p className="text-sm text-gray-600">对历史长河中人类演变的思考，从狩猎采集到人工智能...</p>
57+
<div className="text-xs text-gray-500 mt-1">2023年4月15日</div>
58+
</div>
59+
60+
<div className="border-l-2 border-tertiary pl-3 hover:bg-blue-50/50 transition-colors rounded p-2">
61+
<h3 className="text-lg font-medium text-gray-800">React Hooks最佳实践</h3>
62+
<p className="text-sm text-gray-600">整理使用React Hooks过程中的经验与技巧...</p>
63+
<div className="text-xs text-gray-500 mt-1">2023年3月28日</div>
64+
</div>
65+
66+
<div className="border-l-2 border-accent pl-3 hover:bg-pink-50/50 transition-colors rounded p-2">
67+
<h3 className="text-lg font-medium text-gray-800">春日小记</h3>
68+
<p className="text-sm text-gray-600">漫步在樱花盛开的小路，思绪如风般自由...</p>
69+
<div className="text-xs text-gray-500 mt-1">2023年3月10日</div>
70+
</div>
71+
</div>
72+
</section>
73+
74+
<footer className="mt-12 text-center text-sm text-white p-4 relative z-10">
75+
<div className="mb-2">© 2023-2025 春风笔记 | 由热爱与思考驱动</div>
76+
<div className="flex justify-center space-x-4 text-xs">
77+
<a href="#" className="hover:text-accent transition-colors">关于</a>
78+
<a href="#" className="hover:text-accent transition-colors">联系</a>
79+
<a href="#" className="hover:text-accent transition-colors">RSS</a>
80+
<a href="#" className="hover:text-accent transition-colors">主题</a>
81+
</div>
82+
</footer>
83+
84+
<style jsx>{`
85+
.debug-border {
86+
border: 4px solid red;
87+
}
88+
89+
.anime-bg {
90+
position: relative;
91+
background: linear-gradient(to bottom, #f1a7a9, #93c5e6); /* 类似于动漫天空的渐变背景 */
92+
overflow: hidden;
93+
}
94+
95+
.anime-bg::before {
96+
content: '';
97+
position: absolute;
98+
top: 0;
99+
left: 0;
100+
right: 0;
101+
bottom: 0;
102+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M30,60 Q50,80 70,60 T90,70 T70,80 T50,70 T30,60' stroke='%23ffffff' stroke-width='1' fill='none' stroke-opacity='0.2'/%3E%3C/svg%3E");
103+
background-size: 200px 200px;
104+
opacity: 0.5;
105+
z-index: 0;
106+
}
107+
108+
.anime-bg::after {
109+
content: '';
110+
position: absolute;
111+
bottom: 0;
112+
left: 0;
113+
right: 0;
114+
height: 200px;
115+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Cpath d='M0,200 L0,150 Q100,100 200,150 Q300,200 400,150 L400,200 Z' fill='%23446b69' fill-opacity='0.3'/%3E%3C/svg%3E");
116+
background-repeat: repeat-x;
117+
background-size: 400px 200px;
118+
z-index: 0;
119+
}
120+
121+
.bg-overlay {
122+
position: absolute;
123+
top: 0;
124+
left: 0;
125+
right: 0;
126+
bottom: 0;
127+
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.3));
128+
z-index: 1;
129+
}
130+
131+
.cherry-blossom {
132+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,30 C60,20 70,20 80,30 C90,40 90,50 80,60 C70,70 60,70 50,60 C40,70 30,70 20,60 C10,50 10,40 20,30 C30,20 40,20 50,30 Z' fill='%23f5a3b3' fill-opacity='0.3'/%3E%3Cpath d='M50,30 C55,35 55,45 50,50 C45,45 45,35 50,30 Z M80,30 C75,35 65,35 60,30 C65,25 75,25 80,30 Z M80,60 C75,55 75,45 80,40 C85,45 85,55 80,60 Z M50,60 C45,55 45,45 50,40 C55,45 55,55 50,60 Z M20,60 C25,55 35,55 40,60 C35,65 25,65 20,60 Z M20,30 C25,35 25,45 20,50 C15,45 15,35 20,30 Z' fill='%23ffffff' fill-opacity='0.6'/%3E%3Ccircle cx='50' cy='50' r='5' fill='%23ffcc88' fill-opacity='0.7'/%3E%3C/svg%3E");
133+
background-size: contain;
134+
background-repeat: no-repeat;
135+
}
136+
137+
.grass-decoration {
138+
position: absolute;
139+
bottom: -5px;
140+
right: -5px;
141+
width: 30px;
142+
height: 20px;
143+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20,100 Q25,70 30,100 M15,100 Q20,60 25,100 M25,100 Q35,75 45,100' stroke='%237db069' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
144+
background-repeat: no-repeat;
145+
opacity: 0.4;
146+
}
147+
148+
.cloud-decoration {
149+
position: absolute;
150+
top: -5px;
151+
right: -5px;
152+
width: 40px;
153+
height: 20px;
154+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50' viewBox='0 0 100 50'%3E%3Cpath d='M10,40 Q20,20 40,30 Q60,10 80,30 Q90,40 95,35' stroke='%2378a4c7' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
155+
background-repeat: no-repeat;
156+
opacity: 0.4;
157+
}
158+
159+
.leaf-decoration {
160+
position: absolute;
161+
top: 0;
162+
right: 0;
163+
width: 25px;
164+
height: 25px;
165+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20,80 Q50,40 80,20 Q60,50 20,80 Z' fill='%237db069' fill-opacity='0.2'/%3E%3C/svg%3E");
166+
background-repeat: no-repeat;
167+
opacity: 0.5;
168+
}
169+
170+
.bg-accent {
171+
background-color: #f5a3b3;
172+
}
173+
174+
.bg-accent-hover {
175+
background-color: #e8919f;
176+
}
177+
178+
.text-accent {
179+
color: #f5a3b3;
180+
}
181+
`}</style>
182+
</div>
183+
);
184+
}

‎quartz/static/images/bg-pattern.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎quartz/static/images/spring-elements.svg‎

Lines changed: 153 additions & 0 deletions
Loading

‎quartz/static/images/the-wind-rises.jpg‎

165 KB
Loading

0 commit comments

Comments
 (0)