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

style(about): 调整卡片标题布局并优化兴趣项结构

Browse Source 
- 修改 .card-header 样式，添加弹性布局实现标题与副标题对齐
- 新增 .card-subtitle 类用于副标题样式定义
- 调整兴趣项 HTML 结构，将 emoji 移出文本容器以优化显示效果
- 更新兴趣项描述文本内容，增强语义表达
This commit is contained in:
hehh
2025-11-23 21:51:55 +08:00
parent a002fcc5d6
commit 557666403d
2 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
about.html
View File

@@ -159,29 +159,29 @@
</div> </div>
<div class="interest-list"> <div class="interest-list">
<div class="interest-item"> <div class="interest-item">
<div class="i-text">
<span class="i-emoji">🚴‍♂️</span> <span class="i-emoji">🚴‍♂️</span>
<div class="i-text">
<!-- <strong data-i18n="interest.cycling">Cycling</strong>--> <!-- <strong data-i18n="interest.cycling">Cycling</strong>-->
<span data-i18n="interest.cycling_desc">Measuring the world</span> <span data-i18n="interest.cycling_desc">Measuring the world</span>
</div> </div>
</div> </div>
<div class="interest-item"> <div class="interest-item">
<div class="i-text">
<span class="i-emoji">📚</span> <span class="i-emoji">📚</span>
<div class="i-text">
<!-- <strong data-i18n="interest.reading">Reading</strong>--> <!-- <strong data-i18n="interest.reading">Reading</strong>-->
<span data-i18n="interest.reading_desc">Thinking tracks</span> <span data-i18n="interest.reading_desc">Thinking tracks</span>
</div> </div>
</div> </div>
<div class="interest-item"> <div class="interest-item">
<div class="i-text">
<span class="i-emoji">🔍</span> <span class="i-emoji">🔍</span>
<div class="i-text">
<!-- <strong data-i18n="interest.opensource">Open Source</strong>--> <!-- <strong data-i18n="interest.opensource">Open Source</strong>-->
<span data-i18n="interest.opensource_desc">Sharing power</span> <span data-i18n="interest.opensource_desc">Sharing power</span>
</div> </div>
</div> </div>
<div class="interest-item"> <div class="interest-item">
<div class="i-text">
<span class="i-emoji">💡</span> <span class="i-emoji">💡</span>
<div class="i-text">
<!-- <strong data-i18n="interest.learning">Learning</strong>--> <!-- <strong data-i18n="interest.learning">Learning</strong>-->
<span data-i18n="interest.learning_desc">Always curious</span> <span data-i18n="interest.learning_desc">Always curious</span>
</div> </div>

10
css/about.css
View File

@@ -668,16 +668,18 @@ body {
.card-header { .card-header {
padding: 20px 25px; padding: 20px 25px;
border-bottom: 1px solid rgba(128,128,128,0.1); border-bottom: 1px solid rgba(128,128,128,0.1);
display: flex;
justify-content: space-between;
align-items: center;
} }
.card-header h3 { .card-header h3 {
font-size: 1.1rem; font-size: 1.1rem;
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
} }
.card-subtitle {
.card-header h3 { font-size: 0.8rem;
background: var(--gradient-2); background: var(--gradient-3);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
color: transparent; color: transparent;