style(css): 调整about页面样式细节

- 修改.hero-left在不同断点下的顶部边距
- 注释掉白天主题下项目描述的渐变伪元素
- 移除.article-excerpt中的注释标记
- 微调玻璃态卡片的圆角、内边距和阴影效果
- 设置社交信息容器宽度为100%
- 优化社交信息段落的排版和文本截断显示
- 调整移动端社交网格布局列数和间距
- 减小导航链接及其内部元素的内边距和字体大小
- 调整项目和文章卡片的内边距及标题样式
This commit is contained in:
hehh
2025-11-21 12:25:31 +08:00
parent 26b74372e0
commit b5b0beb9a9

View File

@@ -756,6 +756,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.hero-left { .hero-left {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 1rem;
} }
.profile-card { .profile-card {
@@ -1636,15 +1637,15 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
position: relative; position: relative;
} }
.theme-day .project-description.collapsible::after { /*.theme-day .project-description.collapsible::after {*/
content: ""; /* content: "";*/
position: absolute; /* position: absolute;*/
bottom: 0; /* bottom: 0;*/
left: 0; /* left: 0;*/
right: 0; /* right: 0;*/
height: 30px; /* height: 30px;*/
background: linear-gradient(to bottom, transparent, rgba(248, 249, 250, 0.8)); /* background: linear-gradient(to bottom, transparent, rgba(248, 249, 250, 0.8));*/
} /*}*/
.theme-night .project-description.collapsible::after { .theme-night .project-description.collapsible::after {
content: ""; content: "";
@@ -1804,7 +1805,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
} }
.article-excerpt { .article-excerpt {
color: var(--text-soft); /* 使用主题文字颜色 */ color: var(--text-soft);
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.6; line-height: 1.6;
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -1904,26 +1905,28 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
border-radius: 25px; border-radius: 24px;
padding: 1rem; padding: 16px;
text-decoration: none; text-decoration: none;
color: var(--text-strong); /* 使用主题文字颜色 */ color: var(--text-strong);
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.5rem; gap: 8px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
overflow: visible; /* 修改为visible确保图标不会被遮挡 */ overflow: hidden;
width: 110px; width: 140px;
height: 110px; height: auto;
min-height: 140px;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
transform-origin: center; transform-origin: center;
z-index: 1; z-index: 1;
box-sizing: border-box;
} }
@keyframes orbit { @keyframes orbit {
@@ -1971,9 +1974,10 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
color: #fff; color: #fff;
font-size: 1.2rem; font-size: 1.2rem;
flex-shrink: 0; flex-shrink: 0;
margin-bottom: 0.5rem; margin-bottom: 8px;
} }
.social-info { width: 100%; }
.social-info h3 { .social-info h3 {
margin: 0; margin: 0;
font-size: 0.9rem; font-size: 0.9rem;
@@ -1983,8 +1987,14 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.social-info p { .social-info p {
margin: 0; margin: 0;
font-size: 0.7rem; font-size: 0.75rem;
color: var(--text-soft); /* 使用主题文字颜色 */ line-height: 1.4;
color: var(--text-soft);
word-break: break-word;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
/* 轨道围绕动画 - 每个卡片不同的轨道路径,优化避免碰撞 */ /* 轨道围绕动画 - 每个卡片不同的轨道路径,优化避免碰撞 */
@@ -2391,6 +2401,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.hero-left { .hero-left {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 1rem;
} }
.hero-right { .hero-right {
@@ -2480,8 +2491,8 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
} }
.social-grid { .social-grid {
grid-template-columns: 1fr; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem; gap: 12px;
} }
.footer-content { .footer-content {
@@ -2495,12 +2506,12 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
} }
.nav-links { .nav-links {
padding: 0.5rem 1rem; padding: 0.1rem 0.3rem;
} }
.nav-links a { .nav-links a {
padding: 0.3rem 0.6rem; padding: 0.1rem 0.3rem;
font-size: 0.9rem; font-size: 0.7rem;
} }
.hero-section { .hero-section {
@@ -2565,7 +2576,19 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.project-card, .project-card,
.article-card { .article-card {
padding: 1rem; padding: 0.2rem;
}
.article-excerpt {
font-size: 0.7rem;
line-height: 1.2;
margin-bottom: 1rem;
font-weight: 700;
}
.article-title {
font-size: 1.3rem;
font-weight: 100;
margin-bottom: 0.2rem;
line-height: 1;
} }
.modal-content { .modal-content {