feat(about): 添加推荐分享模块和社交链接样式优化
- 新增推荐分享模块，包含动画效果和夜间模式适配 - 优化社交图标样式，统一设计风格 - 调整移动端社交布局，提升用户体验 - 修复夜间模式下文字阴影显示问题 - 移除重复的桌面端社交样式定义
This commit is contained in:
hehh
@@ -129,6 +129,15 @@
|
||||
<a href="javascript:void(0);" onclick="toggleWechat()" class="s-icon" aria-label="WeChat QR code" tabindex="0"><i class="ri-wechat-fill"></i></a>
|
||||
<a href="https://juejin.cn/user/3659591622878503" target="_blank" class="s-icon" aria-label="Juejin profile" tabindex="0"><i class="ri-code-box-line"></i></a>
|
||||
</div>
|
||||
<!-- 推荐分享模块 TRAE 链接：https://www.trae.ai/s/8HSXCa -->
|
||||
<div class="recommend-share-module">
|
||||
<a href="https://www.trae.ai/s/8HSXCa" target="_blank" class="share-link" aria-label="推荐分享">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18" class="share-icon">
|
||||
<path stroke="#32F08C" stroke-width="1.35" d="M3.75 9H3V6h12v3h-.75M3.75 9v6h10.5V9M3.75 9h10.5M9 6V4.75M9 6H7.75a2.5 2.5 0 0 1-2.5-2.5c0-.69.56-1.25 1.25-1.25A2.5 2.5 0 0 1 9 4.75M9 6h1.25a2.5 2.5 0 0 0 2.5-2.5c0-.69-.56-1.25-1.25-1.25A2.5 2.5 0 0 0 9 4.75M9 6v9"></path>
|
||||
</svg>
|
||||
<span class="badge-dot"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
188
css/about.css
188
css/about.css
@@ -584,8 +584,6 @@ body {
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.avatar-ring {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
@@ -638,6 +636,48 @@ body {
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
/* Social Links */
|
||||
.social-dock {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.s-icon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 50%;
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.s-icon:hover {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.s-icon:hover i {
|
||||
color: transparent !important;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.s-icon i {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.s-icon[href*="github.com"] i { background: var(--gradient-7); }
|
||||
.s-icon[href^="mailto:"] i { background: var(--gradient-6); }
|
||||
.s-icon[href*="blog.hehouhui.cn"] i { background: var(--gradient-3); }
|
||||
.s-icon[href*="zhihu.com"] i { background: var(--gradient-4); }
|
||||
.s-icon[href*="juejin.cn"] i { background: var(--gradient-1); }
|
||||
.s-icon[onclick*="toggleWechat"] i { background: var(--gradient-5); }
|
||||
|
||||
/* Tablet Profile Layout */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.area-profile {
|
||||
@@ -689,6 +729,40 @@ body {
|
||||
.desktop-social {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 移动端推荐分享模块调整 */
|
||||
.recommend-share-module {
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
animation: shareModuleFadeIn 0.5s ease-out 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes shareModuleFadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.share-link {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.share-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Night Theme Profile Styles */
|
||||
@@ -704,10 +778,10 @@ body {
|
||||
background-clip: text !important;
|
||||
color: transparent !important;
|
||||
text-shadow:
|
||||
0 0 10px rgba(255, 126, 179, 0.8),
|
||||
0 0 20px rgba(255, 117, 140, 0.7),
|
||||
0 0 30px rgba(255, 107, 107, 0.6),
|
||||
0 0 40px rgba(255, 154, 139, 0.5);
|
||||
0 0 2px rgba(255, 126, 179, 0.3),
|
||||
0 0 6px rgba(255, 117, 140, 0.1),
|
||||
0 0 32px rgba(255, 107, 107, 0.4),
|
||||
0 0 10px rgba(255, 154, 139, 0.5);
|
||||
transform: translateZ(0);
|
||||
-webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@@ -725,16 +799,29 @@ body {
|
||||
-webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Social Links */
|
||||
.social-dock {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
|
||||
|
||||
/* 推荐分享模块 */
|
||||
.recommend-share-module {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
animation: shareModuleFadeIn 0.5s ease-out 0.5s forwards;
|
||||
}
|
||||
|
||||
.s-icon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
@keyframes shareModuleFadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.share-link {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
display: flex;
|
||||
@@ -743,29 +830,51 @@ body {
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.s-icon:hover {
|
||||
.share-link:hover {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.s-icon:hover i {
|
||||
color: transparent !important;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
.share-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.s-icon i {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
.share-icon path {
|
||||
stroke: #32F08C;
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ff4757;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--bg-base);
|
||||
}
|
||||
|
||||
/* 夜间模式下的推荐分享模块 */
|
||||
[data-theme="night"] .share-link {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="night"] .share-link:hover {
|
||||
box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
|
||||
}
|
||||
|
||||
/* 夜间模式下的SVG图标 */
|
||||
[data-theme="night"] .share-icon path {
|
||||
stroke: #32F08C;
|
||||
filter: drop-shadow(0 0 4px rgba(50, 240, 140, 0.4));
|
||||
}
|
||||
.s-icon[href*="github.com"] i { background: var(--gradient-7); }
|
||||
.s-icon[href^="mailto:"] i { background: var(--gradient-6); }
|
||||
.s-icon[href*="blog.hehouhui.cn"] i { background: var(--gradient-3); }
|
||||
.s-icon[href*="zhihu.com"] i { background: var(--gradient-4); }
|
||||
.s-icon[href*="juejin.cn"] i { background: var(--gradient-1); }
|
||||
.s-icon[onclick*="toggleWechat"] i { background: var(--gradient-5); }
|
||||
|
||||
/* Night Theme Social Styles */
|
||||
[data-theme="night"] .s-icon {
|
||||
@@ -785,9 +894,19 @@ body {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.social-dock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; justify-items: center; }
|
||||
.s-icon { width: 42px; height: 42px; }
|
||||
.s-icon i { font-size: 1.6rem; }
|
||||
.social-dock {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
justify-items: center;
|
||||
}
|
||||
.s-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
.s-icon i {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Social Layout */
|
||||
@@ -801,9 +920,8 @@ body {
|
||||
justify-content: space-around;
|
||||
padding: 20px;
|
||||
}
|
||||
.desktop-social {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.ms-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
Reference in New Issue
Block a user