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

feat(css): 优化英文 bio 文本样式及技术标签颜色配置

Browse Source 
- 为英文 bio 文本添加专门的排版样式，包括字体、行高和斜体设置
- 在白天模式下为 .tech-tag 类增加基于 data-theme 的颜色定义
- 将原有的渐变样式限制在夜间模式下应用
- 技术标签颜色方案扩展至 10 种，并区分日夜主题显示效果

fix(js): 设置页面语言属性并调整技术栈索引逻辑

- 页面加载时动态设置 html 根元素的 data-lang 属性值
- 修改技术栈项的 gradientId 计算方式，由名称哈希改为索引取模
- 注释掉旧的哈希计算相关代码以避免干扰
This commit is contained in:
hehh
2025-11-25 00:07:37 +08:00
parent 63407a9216
commit d9433396a0
2 changed files with 114 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
css/about.css
View File

@@ -528,6 +528,15 @@ body {
overflow: hidden;
}
[data-lang="en"] .bio-text.collapsed {
/* 英文渲染友好的格式，字间距行间距 样式*/
font-size: 1rem;
line-height: 1.5;
font-family: 'Noto Serif', serif;
font-style: oblique;
}
.link-btn {
background: none;
border: none;
@@ -1946,36 +1955,127 @@ body {
z-index: 10;
}
/* 白天模式下为 tag-color 类增强可读性 */
[data-theme="day"] .tech-tag-3d.tag-color-1,
[data-theme="day"] .tech-tag-mobile.tag-color-1 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #0ea5e9 !important; /* 蓝色 */
-webkit-text-fill-color: #0ea5e9 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-2,
[data-theme="day"] .tech-tag-mobile.tag-color-2 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #ef4444 !important; /* 红色 */
-webkit-text-fill-color: #ef4444 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-3,
[data-theme="day"] .tech-tag-mobile.tag-color-3 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #10b981 !important; /* 绿色 */
-webkit-text-fill-color: #10b981 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-4,
[data-theme="day"] .tech-tag-mobile.tag-color-4 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #f59e0b !important; /* 黄色 */
-webkit-text-fill-color: #f59e0b !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-5,
[data-theme="day"] .tech-tag-mobile.tag-color-5 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #8b5cf6 !important; /* 紫色 */
-webkit-text-fill-color: #8b5cf6 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-6,
[data-theme="day"] .tech-tag-mobile.tag-color-6 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #ec4899 !important; /* 粉色 */
-webkit-text-fill-color: #ec4899 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-7,
[data-theme="day"] .tech-tag-mobile.tag-color-7 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #06b6d4 !important; /* 青色 */
-webkit-text-fill-color: #06b6d4 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-8,
[data-theme="day"] .tech-tag-mobile.tag-color-8 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #f97316 !important; /* 橙色 */
-webkit-text-fill-color: #f97316 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-9,
[data-theme="day"] .tech-tag-mobile.tag-color-9 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #6b7280 !important; /* 灰色 */
-webkit-text-fill-color: #6b7280 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-10,
[data-theme="day"] .tech-tag-mobile.tag-color-10 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #1f2937 !important; /* 深灰 */
-webkit-text-fill-color: #1f2937 !important;
}
/* 不同颜色的标签 */
.tech-tag-3d.tag-color-1, .tech-tag-mobile.tag-color-1 {
[data-theme="night"] .tech-tag-3d.tag-color-1, .tech-tag-mobile.tag-color-1 {
background: var(--gradient-1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-2, .tech-tag-mobile.tag-color-2 {
[data-theme="night"] .tech-tag-3d.tag-color-2, .tech-tag-mobile.tag-color-2 {
background: var(--gradient-2);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-3, .tech-tag-mobile.tag-color-3 {
[data-theme="night"] .tech-tag-3d.tag-color-3, .tech-tag-mobile.tag-color-3 {
background: var(--gradient-3);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-4, .tech-tag-mobile.tag-color-4 {
[data-theme="night"] .tech-tag-3d.tag-color-4, .tech-tag-mobile.tag-color-4 {
background: var(--gradient-4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-5, .tech-tag-mobile.tag-color-5 {
[data-theme="night"] .tech-tag-3d.tag-color-5, .tech-tag-mobile.tag-color-5 {
background: var(--gradient-5);
-webkit-background-clip: text;
background-clip: text;
@@ -1983,35 +2083,35 @@ body {
}
/* 扩展更多渐变方案 */
.tech-tag-3d.tag-color-6, .tech-tag-mobile.tag-color-6 {
[data-theme="night"] .tech-tag-3d.tag-color-6, .tech-tag-mobile.tag-color-6 {
background: var(--gradient-6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-7, .tech-tag-mobile.tag-color-7 {
[data-theme="night"] .tech-tag-3d.tag-color-7, .tech-tag-mobile.tag-color-7 {
background: var(--gradient-7);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-8, .tech-tag-mobile.tag-color-8 {
[data-theme="night"] .tech-tag-3d.tag-color-8, .tech-tag-mobile.tag-color-8 {
background: var(--gradient-8);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-9, .tech-tag-mobile.tag-color-9 {
[data-theme="night"] .tech-tag-3d.tag-color-9, .tech-tag-mobile.tag-color-9 {
background: var(--gradient-9);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-10, .tech-tag-mobile.tag-color-10 {
[data-theme="night"] .tech-tag-3d.tag-color-10, .tech-tag-mobile.tag-color-10 {
background: var(--gradient-10);
-webkit-background-clip: text;
background-clip: text;

7
js/about.js
View File

@@ -161,6 +161,7 @@ class I18nManager {
apply() {
const t = this.dict[this.lang];
document.documentElement.setAttribute('data-lang', this.lang)
$('[data-i18n]').each(function () {
const k = $(this).data('i18n');
if (t[k]) $(this).text(t[k]);
@@ -661,11 +662,11 @@ class UIManager {
const techStackRaw = window.SiteConfig?.techStack || [];
const techStack = techStackRaw.map((item, idx) => {
const name = item.name || '';
const hash = Array.from(name).reduce((a, c) => a + c.charCodeAt(0), 0);
//const name = item.name || '';
//const hash = Array.from(name).reduce((a, c) => a + c.charCodeAt(0), 0);
const gid = Number(item.gradientId) && Number.isFinite(Number(item.gradientId))
? Math.max(1, Math.min(10, Number(item.gradientId)))
: (hash % 10) + 1;
: (idx % 10) + 1;
return {...item, gradientId: gid};
});