Honesty/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(about): 优化关于页面样式与交互体验

Browse Source 
- 新增渐变文字与发光文字样式类
- 引入 Google Fonts 字体资源提升视觉效果
- 重构英雄区域布局结构，支持响应式网格排列
- 更新 GitHub 统计模块 UI，采用卡片式设计展示数据
- 调整配色方案，新增主题相关变量定义
- 优化移动端显示效果，改进原有媒体查询逻辑
- 完善夜间模式下的文字与背景适配
- 移除旧版提交统计图表，替换为简洁数字展示形式
This commit is contained in:
hehh
2025-11-21 11:45:20 +08:00
parent 0c0b2f820e
commit a7b7166fef
3 changed files with 299 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
css/about.css
View File

@@ -34,6 +34,8 @@
--text-soft: var(--day-text-secondary);
--glass-alpha: 0.25; /* 增加毛玻璃效果 */
--glass-border: rgba(0, 0, 0, 0.08);
--accent-b: #8adbd0;
--accent-coral: #ff887a;
}
:root.theme-night {
@@ -43,6 +45,8 @@
--text-soft: rgba(248, 249, 250, 0.85);
--glass-alpha: 0.18;
--glass-border: rgba(255, 255, 255, 0.12);
--accent-b: #36e4cf;
--accent-coral: #ff6b6b;
}
@@ -290,6 +294,46 @@ body {
background-attachment: fixed;
}
.gradient-text {
color: var(--text-strong);
background: none;
-webkit-text-fill-color: initial;
filter: none;
display: inline;
}
.glow-text {
background: linear-gradient(45deg, var(--accent-coral), var(--accent-b));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 12px rgba(78, 205, 196, 0.35);
}
.theme-day .gradient-text {
color: var(--day-text-primary);
background: none;
-webkit-text-fill-color: initial;
}
@supports (-webkit-background-clip: text) {
.theme-night .gradient-text {
background: linear-gradient(90deg, #a5b4fc, #67e8f9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.theme-day .glow-text {
background: linear-gradient(45deg, #2a2d34, #3b3f46);
-webkit-text-fill-color: transparent;
text-shadow: none;
}
.theme-night .glow-text {
background: linear-gradient(45deg, var(--accent-coral), var(--accent-b));
}
/* 动态背景 */
body::before {
content: '';
@@ -386,6 +430,7 @@ a:hover {
/*color: var(--text-strong); !* 使用主题文字颜色 *!*/
line-height: 1.7;
font-size: 1.1rem;
font-family: 'Playfair Display', 'Noto Serif SC', serif;
}
/* 链接下划线动画 */
@@ -687,7 +732,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-columns: 0.9fr 2.1fr;
gap: 4rem;
align-items: center;
}
@@ -803,12 +848,14 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
font-size: 0.9rem;
}
.hero-right {
padding-left: 2rem;
}
.hero-right { padding-left: 2rem; }
.hero-right-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-auto-rows: min-content; gap: 2rem; }
.hero-right-grid .intro-content { grid-column: 1 / 2; }
.hero-right-grid .personality-section { grid-column: 2 / 3; }
.hero-right-grid .hero-stats { grid-column: 2 / 3; }
.intro-content h2 {
font-size: 2.5rem;
font-size: 2.6rem;
font-weight: 800;
color: #fff;
margin-bottom: 1.5rem;
@@ -816,6 +863,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Playfair Display', 'Inter', 'PingFang SC', 'Microsoft YaHei', serif;
}
.intro-text p {
@@ -889,6 +937,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titleGlow 3s ease-in-out infinite alternate;
font-family: 'Playfair Display', 'Inter', 'PingFang SC', 'Microsoft YaHei', serif;
}
@@ -945,6 +994,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
margin-bottom: 2rem;
font-weight: 300;
opacity: 0.8;
font-family: 'Inter', 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.personality-badge {
@@ -1015,6 +1065,8 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
margin-bottom: 1rem;
position: relative;
display: inline-block;
font-family: 'Playfair Display', 'Inter', 'PingFang SC', 'Microsoft YaHei', serif;
text-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
}
.section-subtitle {
@@ -2168,11 +2220,12 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-container { grid-template-columns: 1.2fr 0.8fr; gap: 2.5rem; }
.hero-right { padding-left: 0; }
.hero-right-grid { grid-template-columns: 1fr; grid-auto-rows: min-content; }
.hero-right-grid .intro-content { grid-column: 1 / -1; }
.hero-right-grid .personality-section { grid-column: 1 / -1; }
.hero-right-grid .hero-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.social-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -2686,3 +2739,19 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
/* 文件末尾 */
.hero-container { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
.hero-right { padding-left: 0; }
.hero-right-grid { display: block; }
.theme-day .nav-logo {
color: var(--day-text-primary);
background: none;
-webkit-text-fill-color: initial;
}
.theme-day .section-title,
.theme-day .hero-title,
.theme-day .view-all-link {
color: var(--day-text-primary);
background: none;
-webkit-text-fill-color: initial;
}