From b179431aaa85554c5832421b9fdcd443318fc8ca Mon Sep 17 00:00:00 2001 From: hehh Date: Sun, 30 Nov 2025 02:13:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(about):=20=E4=BC=98=E5=8C=96=E6=8A=80?= =?UTF-8?q?=E6=9C=AF=E6=A0=87=E7=AD=BE=E4=BA=91=E6=B8=B2=E6=9F=93=E4=B8=8E?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 引入 sessionStorage 缓存技术标签云状态，提升页面切换性能 - 区分移动端与桌面端渲染逻辑，实现响应式适配 - 抽离 3D 球体动画初始化方法，增强代码可维护性 - 添加窗口大小变化监听器，动态调整渲染内容 - 实现标签云生成与状态保存功能，避免重复计算 - 优化动画性能，使用 requestAnimationFrame 处理鼠标交互 --- css/about.css | 3363 +++++++++++++++++-------------------------------- js/about.js | 315 +++-- 2 files changed, 1350 insertions(+), 2328 deletions(-) diff --git a/css/about.css b/css/about.css index 49b157c..fb0efb4 100644 --- a/css/about.css +++ b/css/about.css @@ -1,6 +1,5 @@ /* about.css - Aurora Nexus v2.0 */ - /* ========================================= 1. Design Tokens (Variables) ========================================= */ @@ -53,17 +52,19 @@ --glass-border: 1px solid rgba(255, 255, 255, 0.15); --glass-shadow: 0 18px 60px rgba(0, 0, 0, 0.65); - --text-primary: #ffffff; /* 使用更明亮的白色提高对比度 */ - --text-secondary: #e0e0e0; /* 提高二级文本亮度 */ - --text-tertiary: #b0b0b0; /* 提高三级文本亮度 */ + --text-primary: #ffffff; + --text-secondary: #e0e0e0; + --text-tertiary: #b0b0b0; --accent: #00cec9; --accent-glow: rgba(0, 206, 201, 0.4); - --dock-bg: rgba(30, 30, 35, 0.95); /* 提高底层面板不透明度 */ + --dock-bg: rgba(30, 30, 35, 0.95); } -/* Global Reset */ +/* ========================================= + 2. Global Reset & Base Styles + ========================================= */ * { box-sizing: border-box; margin: 0; @@ -72,7 +73,9 @@ -webkit-tap-highlight-color: transparent; } -html { font-size: 16px; } +html { + font-size: 16px; +} body { font-family: var(--font-main); @@ -87,18 +90,44 @@ body { } /* Ambient Background */ -.aurora-canvas { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } -.glow-spot { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; animation: float 20s infinite alternate; } -.spot-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--bg-grad-1); } -.spot-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: var(--bg-grad-2); animation-delay: -5s; } -.noise-layer { position: absolute; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } -@keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, 50px); } } - - - +.aurora-canvas { + position: fixed; + inset: 0; + z-index: -1; + overflow: hidden; + pointer-events: none; +} +.glow-spot { + position: absolute; + border-radius: 50%; + filter: blur(80px); + opacity: 0.5; + animation: float 20s infinite alternate; +} +.spot-1 { + top: -10%; + left: -10%; + width: 50vw; + height: 50vw; + background: var(--bg-grad-1); +} +.spot-2 { + bottom: -10%; + right: -10%; + width: 60vw; + height: 60vw; + background: var(--bg-grad-2); + animation-delay: -5s; +} +.noise-layer { + position: absolute; + inset: 0; + opacity: 0.03; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg '%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); +} /* ========================================= - 2. Universal Glass Components + 3. Universal Glass Components ========================================= */ .glass-nav, .bento-card, .glass-panel, .modal-glass { background: var(--glass-bg); @@ -116,7 +145,7 @@ body { border-color: var(--accent); } -/* Typography Effects */ +/* Typography Effects & Animations */ .gradient-text { background: linear-gradient(135deg, var(--text-primary), var(--accent)); -webkit-background-clip: text; @@ -124,43 +153,150 @@ body { color: transparent; } -[data-theme="night"] .gradient-text { - text-shadow: 0 0 20px var(--accent-glow); -} - -[data-theme="night"] .tech-tag-3d { - text-shadow: 0 0 6px rgba(255, 255, 255, 0.12), 0 0 12px var(--accent-glow); -} - -[data-theme="night"] .tech-tag-mobile { - text-shadow: 0 0 6px rgba(255, 255, 255, 0.12), 0 0 12px var(--accent-glow); -} - .neon-font { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); } +.grad-text-1 { + background: var(--gradient-1); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +.grad-text-2 { + background: var(--gradient-2); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +.grad-text-3 { + background: var(--gradient-3); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.night-glow { + text-shadow: 0 0 10px var(--accent-glow); +} +.glow-cycle { + animation: hueCycle 8s linear infinite; +} +.animated-gradient { + background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + animation: gradientShift 6s linear infinite; + text-shadow: 0 0 8px rgba(108, 92, 231, 0.2); +} + +/* Animation Definitions */ +@keyframes float { + 0% { transform: translate(0, 0); } + 100% { transform: translate(30px, 50px); } +} +@keyframes hueCycle { + 0% { filter: hue-rotate(0deg); } + 100% { filter: hue-rotate(360deg); } +} +@keyframes gradientShift { + 0% { background-position: 0% 50%; } + 100% { background-position: 200% 50%; } +} +@keyframes waveGlow { + 0% { background-position: 0% 50%; } + 100% { background-position: 200% 50%; } +} +@keyframes breatheGlowAdvanced { + 0% { + box-shadow: + 0 0 15px rgba(100, 200, 255, 0.4), + 0 0 30px rgba(100, 200, 255, 0.2), + inset 0 0 10px rgba(60, 180, 255, 0.15); + } + 25% { + box-shadow: + 0 0 25px rgba(130, 220, 255, 0.6), + 0 0 45px rgba(70, 190, 255, 0.35), + inset 0 0 15px rgba(50, 170, 255, 0.25); + } + 50% { + box-shadow: + 0 0 35px rgba(180, 100, 255, 0.7), + 0 0 60px rgba(150, 80, 255, 0.5), + inset 0 0 20px rgba(120, 60, 220, 0.3); + } + 75% { + box-shadow: + 0 0 25px rgba(100, 255, 200, 0.6), + 0 0 50px rgba(80, 230, 180, 0.4), + inset 0 0 15px rgba(60, 200, 160, 0.25); + } + 100% { + box-shadow: + 0 0 15px rgba(100, 200, 255, 0.4), + 0 0 30px rgba(100, 200, 255, 0.2), + inset 0 0 10px rgba(60, 180, 255, 0.15); + } +} +@keyframes pulse { + 0% { opacity: 0.6; } + 50% { opacity: 1; } + 100% { opacity: 0.6; } +} +@keyframes fadeIn { + from { opacity: 0; transform: translateY(2px); } + to { opacity: 1; transform: none; } +} +@keyframes rowMarquee { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} +.icon-moon { + transition: opacity 3s ease; +} +/* Theme-Specific Typography Styles */ +[data-theme="night"] .gradient-text { + text-shadow: 0 0 20px var(--accent-glow); +} +[data-theme="night"] .tech-tag-3d, +[data-theme="night"] .tech-tag-mobile { + text-shadow: 0 0 6px rgba(255, 255, 255, 0.12), 0 0 12px var(--accent-glow); +} [data-theme="night"] .neon-font { color: #ffffff; text-shadow: 0 0 15px var(--accent), 0 0 25px var(--accent); font-weight: bold; } - [data-theme="day"] .icon-sun { - display: none; + color: #ffa500; + font-size: 1.3rem; } - [data-theme="night"] .icon-moon { - display: none; + color: #8b5cf6; + font-size: 1.3rem; } +.nav-menu .action-btn.is-active .icon-sun { + opacity: 0; +} +.nav-menu .action-btn.is-active .icon-moon { + opacity: 1; +} +.nav-menu .action-btn:not(.is-active) .icon-sun { + opacity: 1; +} +.nav-menu .action-btn:not(.is-active) .icon-moon { + opacity: 0; +} /* ========================================= - 3. Navigation + 4. Navigation ========================================= */ -/* Desktop Nav */ +/* Desktop Nav (≥769px) */ @media (min-width: 769px) { .glass-nav { position: fixed; @@ -231,7 +367,7 @@ body { opacity: 0.3; } - /* 增强主题和语言切换按钮样式 */ + /* Action Buttons (Theme/Language) */ .action-btn { display: flex; align-items: center; @@ -261,8 +397,111 @@ body { } } +/* Mobile Nav (<=768px) */ +@media (max-width: 768px) { + .glass-nav { + position: fixed; + top: auto; + bottom: 0; + left: 0; + width: 100%; + height: auto; + border-radius: 0; + background: var(--dock-bg); + backdrop-filter: blur(12px) saturate(120%); + -webkit-backdrop-filter: blur(12px) saturate(120%); + border-top: 1px solid rgba(128, 128, 128, 0.1); + padding-bottom: env(safe-area-inset-bottom); + z-index: 1000; + } + + .logo-brand, .nav-divider { + display: none; + } + + .nav-menu { + position: fixed; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + z-index: 1000; + display: flex; + align-items: center; + gap: 8px; + padding: 3px; + border-radius: 32px; + background: var(--glass-bg); + border: var(--glass-border); + box-shadow: var(--glass-shadow); + backdrop-filter: blur(12px); + width: calc(100% - 40px); + max-width: 400px; + } + + .nav-menu .nav-item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 12px 8px; + border-radius: 20px; + color: var(--text-secondary); + text-decoration: none; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + } + + /* Active状态高亮 */ + .nav-menu .nav-item.active { + background: var(--accent-light); + color: var(--accent); + box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.2); + } + /* 图标+文字适配 */ + .nav-menu .nav-item i { + font-size: 1.2rem; + margin-bottom: 4px; + } + .nav-menu .nav-label { + font-size: 0.7rem; + font-weight: 500; + } + /* 分割线适配 */ + .nav-menu .nav-divider { + width: 1px; + height: 30px; + background: var(--text-tertiary); + opacity: 0.3; + margin: 0 4px; + } + + .action-btn { + display: none; + } + + .action-btn .btn-text { + display: none; + } + + [data-theme="night"] .nav-menu { + background: rgba(20, 20, 30, 0.85); + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); + } + [data-theme="night"] .nav-menu .nav-item.active, + [data-theme="night"] .nav-menu .action-btn.is-active { + text-shadow: 0 0 6px rgba(161, 196, 253, 0.4); + } + [data-theme="night"] .nav-menu .nav-item:hover:not(.active) { + color: #fff; + background: rgba(255, 255, 255, 0.1); + } +} + /* ========================================= - 4. Layout: Bento Grid (Responsive) + 5. Layout: Bento Grid (Responsive) ========================================= */ .main-container { max-width: 1200px; @@ -270,10 +509,10 @@ body { padding: 0 30px; } +/* Desktop Grid (≥1025px) */ .bento-grid { display: grid; gap: 24px; - /* PC: 3 Col, 2 Row Main */ grid-template-columns: 320px 1fr 260px; grid-template-rows: 240px 220px auto; grid-template-areas: @@ -282,37 +521,46 @@ body { "tech tech interests"; } -/* --- Areas --- */ -.area-profile { - grid-area: profile; +/* Tablet Grid (769px-1024px) */ +@media (min-width: 769px) and (max-width: 1024px) { + .bento-grid { + grid-template-columns: 1fr 1fr; + grid-template-areas: + "profile stats" + "profile mbti" + "bio bio" + "tech tech" + "interests interests"; + grid-template-rows: auto; + } } -.area-bio { - grid-area: bio; +/* Mobile Grid (<=768px) */ +@media (max-width: 768px) { + .main-container { + margin: 20px auto 100px; + padding: 0 16px; + } + + .bento-grid { + display: flex; + flex-direction: column; + gap: 16px; + } } -.area-stats { - grid-area: stats; -} +/* Grid Areas Definition */ +.area-profile { grid-area: profile; } +.area-bio { grid-area: bio; } +.area-stats { grid-area: stats; } +.area-mbti { grid-area: mbti; } +.area-tech { grid-area: tech; } +.area-interests { grid-area: interests; } -.area-mbti { - grid-area: mbti; -} - -.area-tech { - grid-area: tech; -} - -.area-interests { - grid-area: interests; -} -/* music module removed */ - -.mobile-social { - display: none; -} - -/* --- Profile Card --- */ +/* ========================================= + 6. Section Styles + ========================================= */ +/* Profile Card */ .area-profile { padding: 30px; display: flex; @@ -320,20 +568,11 @@ body { justify-content: space-between; align-items: center; text-align: center; - /* 确保不继承任何可能影响文字的滤镜或动画 */ - filter: none; - animation: none; + isolation: isolate; contain: layout style; } -/* 黑夜模式下个人卡片发光效果 */ -[data-theme="night"] .area-profile { - /* 减少发光强度以避免影响文字可读性 */ - box-shadow: 0 0 10px var(--accent-glow); - /* 明确禁用可能影响文字的滤镜动画 */ - filter: none; - animation: none; -} + .avatar-ring { position: relative; @@ -369,89 +608,14 @@ body { margin: 15px 0 5px; font-weight: 800; color: var(--text-primary); - /* 使用固定颜色而不是渐变，确保可读性 */ - position: relative; - z-index: 1; + isolation: isolate; } - .hero-role { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 10px; - /* 使用固定颜色而不是渐变，确保可读性 */ - position: relative; - z-index: 1; -} - -/* 黑夜模式：使用高对比实色文字 + 轻微发光 */ -/* 黑夜模式：强化渐变文字 + 强发光 */ -[data-theme="night"] .hero-name { - background: linear-gradient( - 90deg, - #ff7eb3, /* 粉红 */ - #ff758c, /* 洋红 */ - #ff6b6b, /* 亮红 */ - #ff9a8b /* 柔橙 */ - ) !important; - -webkit-background-clip: text !important; - 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); - transform: translateZ(0); - /* 可选：加极细描边作为最后兜底（兼容性有限但有用） */ - -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.3); -} - -[data-theme="night"] .hero-role { - background: linear-gradient( - 90deg, - #4facfe, /* 天蓝 */ - #00f2fe, /* 青蓝 */ - #43e97b, /* 霓虹绿 */ - #38f9d7 /* 薄荷青 */ - ) !important; - -webkit-background-clip: text !important; - background-clip: text !important; - color: transparent !important; - text-shadow: - 0 0 8px rgba(79, 172, 254, 0.7), - 0 0 16px rgba(0, 242, 254, 0.6), - 0 0 24px rgba(67, 233, 123, 0.5), - 0 0 32px rgba(56, 249, 215, 0.4); - transform: translateZ(0); - -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.2); -} - - -.grad-text-1 { background: var(--gradient-1); -webkit-background-clip: text; background-clip: text; color: transparent; } -.grad-text-2 { background: var(--gradient-2); -webkit-background-clip: text; background-clip: text; color: transparent; } -.grad-text-3 { background: var(--gradient-3); -webkit-background-clip: text; background-clip: text; color: transparent; } -.night-glow { text-shadow: 0 0 10px var(--accent-glow); } -.glow-cycle { animation: hueCycle 8s linear infinite; } -@keyframes hueCycle { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } - -.animated-gradient { - background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary)); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - animation: gradientShift 6s linear infinite; - text-shadow: 0 0 8px rgba(108, 92, 231, 0.2); -} - -@keyframes gradientShift { - 0% { - background-position: 0% 50%; - } - 100% { - background-position: 200% 50%; - } + isolation: isolate; } .location-tag { @@ -462,526 +626,16 @@ body { justify-content: center; gap: 4px; } - -.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); } -[data-theme="night"] .s-icon { box-shadow: 0 0 10px var(--accent-glow); } -[data-theme="night"] .s-icon i { text-shadow: 0 0 25px var(--accent-glow); } -[data-theme="night"] .social-dock .s-icon { filter: hue-rotate(0deg); animation: hueCycle 10s linear infinite; } - -/* --- Bio Card --- */ -.area-bio { - padding: 35px; - display: flex; - flex-direction: column; - justify-content: center; - position: relative; -} - -.card-label { - font-size: 0.75rem; - text-transform: uppercase; - letter-spacing: 2px; - color: var(--text-tertiary); - margin-bottom: 15px; -} - -[data-theme="night"] .card-label { - background: linear-gradient(90deg, #4facfe 0%, #6c5ce7 50%, #4facfe 100%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - -.bio-text { - display: -webkit-box; - -webkit-line-clamp: 7; - -webkit-box-orient: vertical; - overflow: hidden; - font-size: 1rem; - color: var(--text-primary); - margin-bottom: 20px; - text-align: justify; -} - -[data-lang="en"] .bio-text { - /* 英文渲染友好的格式，字间距行间距 样式*/ - font-size: 1rem; - line-height: 1.5; - font-family: 'Noto Serif', serif; - font-style: oblique; -} - - -[data-theme="night"] .bio-text { - /* 时间窗口的波浪形渐变发光文字 */ - background: linear-gradient(90deg, #4facfe 0%, #6c5ce7 50%, #4facfe 100%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - text-shadow: - 0 0 10px rgba(108, 92, 231, 0.7), - 0 0 20px rgba(79, 172, 254, 0.5), - 0 0 30px rgba(108, 92, 231, 0.3); - background-size: 200% auto; - animation: waveGlow 3s linear infinite; -} - -@keyframes waveGlow { - 0% { - background-position: 0% 50%; - } - 100% { - background-position: 200% 50%; - } -} - - - - -.link-btn { - background: none; - border: none; - color: var(--accent); - cursor: pointer; - font-size: 0.85rem; -} - -.quote-box { - border-left: 3px solid var(--accent); - padding-left: 15px; - font-style: italic; - color: var(--text-secondary); - font-size: 0.9rem; -} - -/* --- Stats --- */ -.area-stats { - display: flex; - flex-direction: column; - justify-content: space-around; - padding: 20px 30px; -} - -.stat-item { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid rgba(128, 128, 128, 0.1); - padding: 10px 0; -} - -.stat-item:last-child { - border-bottom: none; -} - -.stat-val { - font-size: 1.5rem; -} - - -/* --- MBTI --- */ -.area-mbti { - padding: 3px; - display: flex; - align-items: center; -} - -.mbti-inner { - width: 100%; -} - -.mbti-head { - margin-left: 20px; - display: flex; - align-items: baseline; - gap: 10px; - margin-bottom: 10px; -} - -.mbti-code { - font-size: 2.2rem; - font-weight: 900; - font-family: var(--font-mono); -} - -.mbti-name { - font-weight: 600; - color: var(--text-secondary); -} - -.mbti-icon { - font-size: 1.5rem; -} - -.mbti-desc { - margin-left: 15px; - font-size: 0.7rem; - color: var(--text-secondary); - margin-bottom: 15px; - line-height: 1.3; - font-style: italic -} - -[data-theme="day"] .mbti-desc { - background: linear-gradient(90deg, #6c5ce7 0%, #3b82f6 50%, #0ea5e9 100%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - -[data-theme="night"] .mbti-desc { - background: linear-gradient(90deg, #a162e8 0%, #8b5cf6 50%, #6c5ce7 100%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - -.mbti-tags { - display: grid; - gap: 1px; - grid-template-columns: 1fr 1fr; - flex-wrap: wrap; - flex-direction: row; - justify-content: flex-start; - -} - -.tag { - font-size: 0.75rem; - padding: 4px 10px; - border-radius: 6px; - color: var(--text-secondary); -} - -.mbti-tags .tag { - background: none; - border: none; - -webkit-background-clip: text; - background-clip: text; - color: transparent; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; -} - - -/* --- Tech Stack (PC) --- */ -.area-tech { - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - contain: layout style; -} - - - -/* --- Interests --- */ -.area-interests { - padding: 20px; - contain: layout style; -} - - - -/* ========================================= - 5. Content Sections (Blog/Github) - ========================================= */ -.content-section { - display: flex; - flex-direction: column; - gap: 24px; - margin-top: 40px; -} - -.col-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; -} - - -.more-link { - font-size: 0.9rem; - color: var(--accent); - font-weight: 600; - text-decoration: none; -} - -.glass-panel { - padding: 20px; - min-height: 300px; -} - -/* Github Lists */ -.projects-list { - margin-top: 15px; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); - gap: 14px; -} - -.repo-card { - padding: 14px; - background: rgba(128, 128, 128, 0.05); - border-radius: 12px; - cursor: pointer; - border: 1px solid transparent; - transition: border 0.3s, transform 0.2s ease; -} - -.repo-card:hover { - border-color: var(--accent); - transform: translateY(-2px); -} - -.repo-head { - display: flex; - justify-content: space-between; - font-weight: 700; - color: var(--text-primary); - font-size: 0.95rem; -} - -.repo-desc { - font-size: 0.8rem; - color: var(--text-secondary); - margin-top: 8px; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Blog List */ -.blog-list { - display: flex; - flex-direction: column; - gap: 12px; -} - -.blog-item { - padding: 12px 16px; - border-radius: 12px; - background: rgba(128, 128, 128, 0.03); - display: flex; - justify-content: space-between; - align-items: center; - cursor: pointer; - transition: background 0.3s; -} - -.blog-item:hover { - background: rgba(128, 128, 128, 0.08); -} - -.b-info { - flex: 1; - min-width: 0; - margin-right: 15px; -} - - - -/* Loading Skeleton */ - -/* Comments */ -.comments-wrapper { - margin: 40px 0 80px; -} - -.comment-box { - padding: 30px; -} - -/* ========================================= - 6. Tablet Adaptive (768px - 1024px) - ========================================= */ +/* Tablet Profile Layout */ @media (min-width: 769px) and (max-width: 1024px) { - .bento-grid { - grid-template-columns: 1fr 1fr; - grid-template-areas: - "profile stats" - "profile mbti" - "bio bio" - "tech tech" - "interests interests"; - grid-template-rows: auto; - } - .area-profile { flex-direction: row; gap: 20px; } - - .content-section { - display: flex; - flex-direction: column; - } - - .interest-list { - grid-template-columns: 1fr; - gap: 12px; - max-height: none; - } - - .interest-item { - padding: 12px 16px; - border-radius: 12px; - gap: 15px; - } - - .i-emoji { - font-size: 2rem; - } - - .i-text { - flex-direction: column; - gap: 4px; - } - - .i-text strong { - font-size: 1.1rem; - white-space: nowrap; - background: none; - -webkit-background-clip: initial; - background-clip: initial; - color: var(--text-primary); - } - - .i-text span { - font-size: 0.9rem; - white-space: normal; - background: none; - -webkit-background-clip: initial; - background-clip: initial; - color: var(--text-tertiary); - } - - .comment-box { - padding: 24px; - } } -/* ========================================= - 7. Mobile Layout (< 768px) - ========================================= */ +/* Mobile Profile Layout */ @media (max-width: 768px) { - .main-container { - margin: 20px auto 100px; - padding: 0 16px; - } - .mbti-tags { - margin-left: 20px; - } - - /* Bottom Dock */ - .glass-nav { - position: fixed; - top: auto; - bottom: 0; - left: 0; - width: 100%; - height: auto; - border-radius: 0; - background: var(--dock-bg); - backdrop-filter: blur(12px) saturate(120%); - -webkit-backdrop-filter: blur(12px) saturate(120%); - border-top: 1px solid rgba(128, 128, 128, 0.1); - padding-bottom: env(safe-area-inset-bottom); - z-index: 1000; - } - - .logo-brand, .nav-divider { - display: none; - } - - .nav-menu { - width: 100%; - justify-content: space-around; - padding: 10px 0; - display: flex; - } - - .nav-item { - flex-direction: column; - gap: 2px; - font-size: 0.7rem; - padding: 8px 0; - color: var(--text-secondary); - } - - .nav-item i { - font-size: 1.4rem; - } - - .nav-label { - font-size: 10px; - color: var(--text-primary); - } - - .nav-item.active { - color: var(--text-primary); - } - .nav-item:active { - color: var(--text-primary); - background: rgba(108, 92, 231, 0.15); - } - - .action-btn .btn-text { - display: none; - } - - .action-btn { - display: none; - } - - .action-btn.is-active { - background: rgba(108, 92, 231, 0.25); - color: #fff; - } - - /* Stacking Bento */ - .bento-grid { - display: flex; - flex-direction: column; - gap: 16px; - } - - /* Profile Mobile */ .area-profile { padding: 20px; flex-direction: row; @@ -1023,679 +677,43 @@ body { .desktop-social { display: none; } - - /* Mobile Stats */ - .area-stats { - flex-direction: row; - padding: 15px; - } - - .stat-item { - flex-direction: column; - border-bottom: none; - border-right: 1px solid rgba(128, 128, 128, 0.1); - padding: 0 10px; - flex: 1; - text-align: center; - } - - .stat-item:last-child { - border-right: none; - } - - .stat-val { - font-size: 1.2rem; - } - - /* Mobile Tech Scroll (Horizontal) */ - .area-tech { - height: auto; - } - - .tech-wrapper { - display: none; - } - - /* Hide PC wrapper */ - .tech-wrapper.mobile-scroll { - display: grid; - height: auto; - min-height: 120px; - grid-template-rows: repeat(3, 30px); /* 三行，每行30px */ - grid-auto-flow: column; - gap: 10px; - overflow-x: auto; - padding: 10px 0 20px; - scroll-snap-type: x mandatory; - /* 添加淡入淡出效果 */ - mask-image: linear-gradient( - to right, - transparent 0%, - black 10%, - black 90%, - transparent 100% - ); - -webkit-mask-image: linear-gradient( - to right, - transparent 0%, - black 10%, - black 90%, - transparent 100% - ); - /* 行内滚动动画由 .tech-row 控制 */ - } - .tech-row { - display: flex; - gap: 10px; - align-items: center; - white-space: nowrap; - will-change: transform; - animation: rowMarquee var(--row-speed) linear infinite; - } - .row-1 { --row-speed: 24s; } - .row-2 { --row-speed: 28s; } - .row-3 { --row-speed: 32s; } - @keyframes rowMarquee { - 0% { transform: translateX(0); } - 100% { transform: translateX(-50%); } - } - - - /* Mobile Social */ - .mobile-social { - display: flex; - justify-content: space-around; - padding: 20px; - } - - .ms-btn { - width: 40px; - height: 40px; - border-radius: 50%; - background: rgba(128, 128, 128, 0.1); - display: flex; - align-items: center; - justify-content: center; - color: var(--text-secondary); - font-size: 1.4rem; - } - - .content-section { - display: flex; - flex-direction: column; - } - - /* 修复兴趣模块在移动端的溢出问题 */ - .interest-list { - grid-template-columns: 1fr; - max-height: none; - } - - .interest-item { - min-width: 0; - } - - .i-text { - min-width: 0; - } - - /* 修复移动端兴趣模块标签和描述在同一行 */ - .i-text { - flex-direction: row; - align-items: center; - gap: 8px; - overflow: hidden; - /** 超出宽度换行显示 */ - word-break: break-all; - text-overflow: ellipsis; - white-space: nowrap; - } - - .i-text strong, .i-text span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .interest-item { - padding: 12px; - } - - .i-emoji { - flex-shrink: 0; - } - - .i-text { - min-width: 0; - } - - /* 兴趣模块文本渐变色彩 */ - .i-text strong { - background: var(--gradient-1); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - } - - .i-text span { - background: var(--gradient-2); - -webkit-background-clip: text; - background-clip: text; - } - - .comment-box { - padding: 16px; - } - .interest-item { padding: 12px; } - .i-text { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; } - .i-emoji { flex: 0 0 auto; margin-right: 6px; } - .i-text strong { flex: 0 1 auto; white-space: nowrap; } - .i-text span:not(.i-emoji) { flex: 1 1 100%; white-space: normal; } } -@media (max-width: 768px) { - .quote-box p.quote-collapsed { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - - /* 增强移动端社交链接黑夜模式下的发光效果 */ - [data-theme="night"] .ms-btn:nth-child(1) { - box-shadow: 0 0 20px rgba(132, 250, 176, 0.8); - } - - [data-theme="night"] .ms-btn:nth-child(2) { - box-shadow: 0 0 20px rgba(246, 211, 101, 0.8); - } - - [data-theme="night"] .ms-btn:nth-child(3) { - box-shadow: 0 0 20px rgba(255, 154, 158, 0.8); - } - - [data-theme="night"] .ms-btn:nth-child(4) { - box-shadow: 0 0 20px rgba(168, 237, 234, 0.8); - } - - [data-theme="night"] .ms-btn:nth-child(5) { - box-shadow: 0 0 20px rgba(210, 153, 194, 0.8); - } - - [data-theme="night"] .ms-btn:nth-child(6) { - box-shadow: 0 0 20px rgba(161, 196, 253, 0.8); - } -} - -/* 确保在非移动端隐藏 .mobile-social */ -@media (min-width: 769px) { - .mobile-social { - 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; - } -} - - - - -/* ========================================= - 8. Modal & Footer - ========================================= */ -.modal-overlay { - position: fixed; - inset: 0; - z-index: 2000; - background: rgba(0, 0, 0, 0.6); - backdrop-filter: blur(8px); - display: none; - align-items: center; - justify-content: center; -} - -.modal-glass { - width: 300px; - padding: 30px; - text-align: center; - position: relative; -} - -.modal-close { - position: absolute; - top: 15px; - right: 15px; - font-size: 1.5rem; - color: var(--text-secondary); -} - -.qr-box { - margin: 20px 0; -} - -.qr-box img { - width: 100%; - border-radius: 12px; -} - -.qr-fallback { - padding: 40px; - background: #eee; - border-radius: 12px; - font-size: 0.8rem; -} - -.site-footer { - text-align: center; - color: var(--text-tertiary); - font-size: 0.75rem; - padding-bottom: 100px; -} -.site-footer a { - color: var(--text-tertiary); -} - - -.social-dock .s-icon { color: var(--text-primary); } -.social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; } - - - - -/* ========== 全局基础样式（白天 & 黑夜通用） ========== */ -.fab-main { - display: flex; - align-items: center; - gap: 6px; - background: var(--glass-bg); /* 白天玻璃背景 */ - color: var(--text-primary); /* 白天深色文字 */ - border: none; - border-radius: 22px; - padding: 10px 14px; - box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); - opacity: 0.95; - transition: opacity 0.2s, transform 0.2s; -} - -.fab-label { - font-size: 12px; - font-weight: 500; -} - -.fab-menu { - display: none; - flex-direction: column; - gap: 10px; - margin-top: 10px; -} - -.fab-item { - display: flex; - align-items: center; - gap: 6px; - background: var(--glass-bg); - color: var(--text-primary); - border-radius: 18px; - padding: 8px 12px; - border: var(--glass-border); - box-shadow: var(--glass-shadow); -} - -.fab-menu.open { - display: flex; -} - -/* ========== 黑夜模式增强 ========== */ -[data-theme="night"] .fab-main { - /* 按钮背景：鲜艳渐变 */ - background: linear-gradient(135deg, #a1c4fd, #6c5ce7); - /* 文字：白色 + 发光（关键！不要 transparent） */ - color: white; - text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 16px rgba(108, 92, 231, 0.5); - /* 增强外发光 */ - box-shadow: - 0 8px 18px rgba(0, 0, 0, 0.3), - 0 0 15px rgba(108, 92, 231, 0.4); - opacity: 1; -} - -[data-theme="night"] .fab-item { - /* 各按钮独立背景色 */ - color: white; - text-shadow: 0 0 6px rgba(255, 255, 255, 0.5); - opacity: 1; -} - -/* 为不同功能按钮设置不同背景色（仅背景，不影响文字） */ -[data-theme="night"] #fab-lang { - background: linear-gradient(135deg, #a1c4fd, #6c5ce7); /* 蓝紫 */ - box-shadow: var(--glass-shadow), 0 0 12px rgba(108, 92, 231, 0.4); -} - -[data-theme="night"] #fab-theme { - background: linear-gradient(135deg, #c2e9fb, #00cec9); /* 青色 */ - box-shadow: var(--glass-shadow), 0 0 12px rgba(0, 206, 201, 0.4); -} - -[data-theme="night"] #fab-music { - background: linear-gradient(135deg, #ff9a9e, #f093fb); /* 粉色 */ - box-shadow: var(--glass-shadow), 0 0 12px rgba(240, 147, 251, 0.4); -} -.site-audio { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; display: none; } -/* music module removed *//* about.css - Aurora Nexus v2.0 */ - - - - - - -/* ========================================= - 3. Navigation - ========================================= */ -/* Desktop Nav */ -@media (min-width: 769px) { - .glass-nav { - position: fixed; - top: 20px; - left: 50%; - transform: translateX(-50%); - width: 90%; - max-width: 1200px; - height: 68px; - padding: 0 30px; - z-index: 1000; - border-radius: 100px; - } - - .nav-inner { - display: flex; - justify-content: space-between; - align-items: center; - height: 100%; - } - - .logo-brand { - font-family: var(--font-serif); - font-size: 1.5rem; - font-weight: 700; - color: var(--text-primary); - text-decoration: none; - } - - .logo-accent { - color: var(--accent); - font-size: 2rem; - line-height: 0; - } - - .nav-menu { - display: flex; - align-items: center; - gap: 24px; - } - - .nav-item { - display: flex; - align-items: center; - gap: 6px; - color: var(--text-secondary); - text-decoration: none; - font-weight: 500; - font-size: 0.95rem; - transition: color 0.3s; - padding: 8px 16px; - border-radius: 20px; - } - - .nav-item:hover, .nav-item.active { - color: var(--text-primary); - background: rgba(108, 92, 231, 0.1); - } - - .nav-item i { - font-size: 1.2rem; - } - - .nav-divider { - width: 1px; - height: 20px; - background: var(--text-tertiary); - opacity: 0.3; - } - - /* 增强主题和语言切换按钮样式 */ - .action-btn { - display: flex; - align-items: center; - gap: 4px; - color: var(--text-primary); - font-size: 0.9rem; - opacity: 0.8; - transition: all 0.3s; - padding: 8px 16px; - border-radius: 20px; - background: rgba(128, 128, 128, 0.1); - border: none; - cursor: pointer; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - } - - .action-btn:hover { - opacity: 1; - background: var(--accent); - color: white; - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3); - } - - .action-btn:active { - transform: translateY(0); - } -} - -/* ========================================= - 4. Layout: Bento Grid (Responsive) - ========================================= */ -.main-container { - max-width: 1200px; - margin: 120px auto 60px; - padding: 0 30px; -} - -.bento-grid { - display: grid; - gap: 24px; - /* PC: 3 Col, 2 Row Main */ - grid-template-columns: 320px 1fr 260px; - grid-template-rows: 240px 220px auto; - grid-template-areas: - "profile bio stats" - "profile bio mbti" - "tech tech interests"; -} - -/* --- Areas --- */ -.area-profile { - grid-area: profile; -} - -.area-bio { - grid-area: bio; -} - -.area-stats { - grid-area: stats; -} - -.area-mbti { - grid-area: mbti; -} - -.area-tech { - grid-area: tech; -} - -.area-interests { - grid-area: interests; -} -/* music module removed */ - -.mobile-social { - display: none; -} - -/* --- Profile Card --- */ -.area-profile { - padding: 30px; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - text-align: center; - /* 创建独立的层叠上下文，防止动画影响子元素 */ - isolation: isolate; - contain: layout style; -} - -/* 增强版呼吸动画：多层光晕 + 色彩流动 */ -@keyframes breatheGlowAdvanced { - 0% { - box-shadow: - 0 0 15px rgba(100, 200, 255, 0.4), - 0 0 30px rgba(100, 200, 255, 0.2), - inset 0 0 10px rgba(60, 180, 255, 0.15); - } - 25% { - box-shadow: - 0 0 25px rgba(130, 220, 255, 0.6), - 0 0 45px rgba(70, 190, 255, 0.35), - inset 0 0 15px rgba(50, 170, 255, 0.25); - } - 50% { - box-shadow: - 0 0 35px rgba(180, 100, 255, 0.7), /* 紫色光晕介入 */ - 0 0 60px rgba(150, 80, 255, 0.5), - inset 0 0 20px rgba(120, 60, 220, 0.3); - } - 75% { - box-shadow: - 0 0 25px rgba(100, 255, 200, 0.6), /* 青绿色光晕 */ - 0 0 50px rgba(80, 230, 180, 0.4), - inset 0 0 15px rgba(60, 200, 160, 0.25); - } - 100% { - box-shadow: - 0 0 15px rgba(100, 200, 255, 0.4), - 0 0 30px rgba(100, 200, 255, 0.2), - inset 0 0 10px rgba(60, 180, 255, 0.15); - } -} - -/* 黑夜模式下个人卡片发光效果 */ +/* Night Theme Profile Styles */ [data-theme="night"] .area-profile { position: relative; z-index: 2; - /* 启用硬件加速 */ transform: translateZ(0); - /* 关键：开启呼吸动画 */ animation: breatheGlowAdvanced 6s ease-in-out infinite alternate; } - -.avatar-ring { - position: relative; - width: 120px; - height: 120px; - border-radius: 50%; - padding: 4px; - border: 1px solid var(--text-tertiary); -} - -.avatar-img { - width: 100%; - height: 100%; - border-radius: 50%; - object-fit: cover; -} - -.status-dot { - position: absolute; - bottom: 0; - right: 0; - background: #2ecc71; - color: #fff; - font-size: 0.65rem; - padding: 2px 8px; - border-radius: 10px; - border: 2px solid var(--bg-base); -} - -.hero-name { - font-size: 2rem; - font-family: var(--font-serif); - margin: 15px 0 5px; - font-weight: 800; - color: var(--text-primary); - /* 创建独立的层叠上下文 */ - isolation: isolate; -} - - -.hero-role { - font-size: 0.9rem; - color: var(--text-secondary); - margin-bottom: 10px; - /* 创建独立的层叠上下文 */ - isolation: isolate; -} - - -.grad-text-1 { background: var(--gradient-1); -webkit-background-clip: text; background-clip: text; color: transparent; } -.grad-text-2 { background: var(--gradient-2); -webkit-background-clip: text; background-clip: text; color: transparent; } -.grad-text-3 { background: var(--gradient-3); -webkit-background-clip: text; background-clip: text; color: transparent; } -.night-glow { text-shadow: 0 0 10px var(--accent-glow); } -.glow-cycle { animation: hueCycle 8s linear infinite; } -@keyframes hueCycle { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } - -.animated-gradient { - background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary)); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - animation: gradientShift 6s linear infinite; - text-shadow: 0 0 8px rgba(108, 92, 231, 0.2); -} - -@keyframes gradientShift { - 0% { - background-position: 0% 50%; - } - 100% { - background-position: 200% 50%; - } -} - -.location-tag { - font-size: 0.85rem; - color: var(--text-tertiary); - display: flex; - align-items: center; - justify-content: center; - gap: 4px; +[data-theme="night"] .hero-name { + background: linear-gradient(90deg, #ff7eb3, #ff758c, #ff6b6b, #ff9a8b) !important; + -webkit-background-clip: text !important; + 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); + transform: translateZ(0); + -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.3); +} +[data-theme="night"] .hero-role { + background: linear-gradient(90deg, #4facfe, #00f2fe, #43e97b, #38f9d7) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + text-shadow: + 0 0 8px rgba(79, 172, 254, 0.7), + 0 0 16px rgba(0, 242, 254, 0.6), + 0 0 24px rgba(67, 233, 123, 0.5), + 0 0 32px rgba(56, 249, 215, 0.4); + transform: translateZ(0); + -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.2); } +/* Social Links */ .social-dock { display: flex; gap: 12px; @@ -1720,19 +738,95 @@ body { 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: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); } -[data-theme="night"] .s-icon { box-shadow: 0 0 10px var(--accent-glow); } -[data-theme="night"] .s-icon i { text-shadow: 0 0 25px var(--accent-glow); } -[data-theme="night"] .social-dock .s-icon { filter: hue-rotate(0deg); animation: hueCycle 10s linear infinite; } -/* --- Bio Card --- */ +/* Night Theme Social Styles */ +[data-theme="night"] .s-icon { + box-shadow: 0 0 10px var(--accent-glow); +} +[data-theme="night"] .s-icon i { + text-shadow: 0 0 25px var(--accent-glow); +} +[data-theme="night"] .social-dock .s-icon { + filter: hue-rotate(0deg); + animation: hueCycle 10s linear infinite; +} + +/* Desktop Social Layout */ +@media (min-width: 769px) { + .mobile-social { + 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; } +} + +/* Mobile Social Layout */ +.mobile-social { + display: none; +} + +@media (max-width: 768px) { + .mobile-social { + display: flex; + justify-content: space-around; + padding: 20px; + } + .desktop-social { + display: none; + } + .ms-btn { + width: 40px; + height: 40px; + border-radius: 50%; + background: rgba(128, 128, 128, 0.1); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-secondary); + font-size: 1.4rem; + } + + /* Night Theme Mobile Social Glow */ + [data-theme="night"] .ms-btn:nth-child(1) { box-shadow: 0 0 20px rgba(132, 250, 176, 0.8); } + [data-theme="night"] .ms-btn:nth-child(2) { box-shadow: 0 0 20px rgba(246, 211, 101, 0.8); } + [data-theme="night"] .ms-btn:nth-child(3) { box-shadow: 0 0 20px rgba(255, 154, 158, 0.8); } + [data-theme="night"] .ms-btn:nth-child(4) { box-shadow: 0 0 20px rgba(168, 237, 234, 0.8); } + [data-theme="night"] .ms-btn:nth-child(5) { box-shadow: 0 0 20px rgba(210, 153, 194, 0.8); } + [data-theme="night"] .ms-btn:nth-child(6) { box-shadow: 0 0 20px rgba(161, 196, 253, 0.8); } +} + +/* Social Icon Color Reset */ +.social-dock .s-icon { + color: var(--text-primary); +} +.social-dock .s-icon i { + background: none !important; + -webkit-background-clip: initial !important; + background-clip: initial !important; + -webkit-text-fill-color: initial !important; + color: currentColor !important; + text-shadow: none !important; +} + +/* Bio Card */ .area-bio { padding: 35px; display: flex; @@ -1750,13 +844,15 @@ body { margin-bottom: 15px; } - -.link-btn { - background: none; - border: none; - color: var(--accent); - cursor: pointer; - font-size: 0.85rem; +.bio-text { + display: -webkit-box; + -webkit-line-clamp: 7; + -webkit-box-orient: vertical; + overflow: hidden; + font-size: 1rem; + color: var(--text-primary); + margin-bottom: 20px; + text-align: justify; } .quote-box { @@ -1767,7 +863,58 @@ body { font-size: 0.9rem; } -/* --- Stats --- */ +.link-btn { + background: none; + border: none; + color: var(--accent); + cursor: pointer; + font-size: 0.85rem; +} + +/* Language-Specific Bio Styles */ +[data-lang="en"] .bio-text { + font-size: 1rem; + line-height: 1.5; + font-family: 'Noto Serif', serif; + font-style: oblique; +} + +/* Night Theme Bio Styles */ +[data-theme="night"] .card-label { + background: linear-gradient(90deg, #4facfe 0%, #6c5ce7 50%, #4facfe 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +[data-theme="night"] .bio-text { + background: linear-gradient(90deg, #4facfe 0%, #6c5ce7 50%, #4facfe 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + background-size: 200% auto; + animation: waveGlow 3s linear infinite; +} +/* 引用文本（技术追求描述）- 黑夜模式渐变 */ +[data-theme="night"] .area-bio .quote-box p { + background: linear-gradient(120deg, #a1c4fd, #6c5ce7) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + -webkit-text-fill-color: transparent !important; + color: transparent !important; + text-shadow: 0 0 2px rgba(161, 196, 253, 0.3) !important; /* 轻微发光不模糊 */ +} + +/* Mobile Quote Collapse */ +@media (max-width: 768px) { + .quote-box p.quote-collapsed { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } +} + +/* Stats Card */ .area-stats { display: grid; grid-template-columns: repeat(5, 1fr); @@ -1820,47 +967,41 @@ body { text-overflow: ellipsis; } -/* 黑夜模式样式增强 */ +/* Night Theme Stats Styles */ [data-theme="night"] .area-stats { - background: rgba(30, 30, 35, 0.85); /* 提高统计区域背景不透明度 */ + background: rgba(30, 30, 35, 0.85); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } - [data-theme="night"] .area-stats:hover { border-color: var(--accent); box-shadow: 0 0 15px var(--accent-glow); } - [data-theme="night"] .stat-item { - background: rgba(255, 255, 255, 0.15); /* 提高统计项目背景不透明度 */ + background: rgba(255, 255, 255, 0.15); } - [data-theme="night"] .stat-item:hover { - background: rgba(108, 92, 231, 0.3); /* 提高悬停时的背景不透明度 */ + background: rgba(108, 92, 231, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } - [data-theme="night"] .stat-val { color: #fff; text-shadow: 0 0 10px var(--accent-glow); } - - [data-theme="night"] .stat-key { color: var(--text-secondary); text-shadow: 0 0 5px rgba(255, 255, 255, 0.1); } -/* PC端统计区域响应式布局 */ -@media (min-width: 1446px) { +/* Responsive Stats Layout */ +@media (min-width: 1025px) and (max-width: 1445px), (min-width: 1201px) { .area-stats { - grid-template-columns: repeat(5, 1fr); - gap: 8px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 12px; } } -/* 平板端统计区域布局 */ @media (min-width: 769px) and (max-width: 1024px) { .area-stats { grid-template-columns: repeat(5, 1fr); @@ -1880,28 +1021,6 @@ body { } } -/* PC端统计区域响应式布局 */ -@media (min-width: 1025px) and (max-width: 1445px) { - .area-stats { - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(2, 1fr); - gap: 12px; - } - - [data-lang="en"] .stat-key { - font-size: 6px !important; - } -} - -@media (min-width: 1201px) { - .area-stats { - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(2, 1fr); - gap: 12px; - } -} - -/* 移动端统计区域布局 */ @media (max-width: 768px) { .area-stats { grid-template-columns: repeat(5, 1fr); @@ -1923,30 +1042,84 @@ body { } } -/* --- Mobile Social --- */ -.mobile-social { - display: flex; - justify-content: space-around; - padding: 20px; +@media (min-width: 1446px) { + .area-stats { + grid-template-columns: repeat(5, 1fr); + gap: 8px; + } } -.ms-btn { - width: 40px; - height: 40px; - border-radius: 50%; - background: rgba(128, 128, 128, 0.1); +/* MBTI Card */ +.area-mbti { + padding: 3px; display: flex; align-items: center; - justify-content: center; +} + +.mbti-inner { + width: 100%; +} + +.mbti-head { + margin-left: 20px; + display: flex; + align-items: baseline; + gap: 10px; + margin-bottom: 10px; +} + +.mbti-code { + font-size: 2.2rem; + font-weight: 900; + font-family: var(--font-mono); +} + +.mbti-name { + font-weight: 600; color: var(--text-secondary); } +.mbti-icon { + font-size: 1.5rem; +} + +.mbti-desc { + margin-left: 15px; + font-size: 0.7rem; + color: var(--text-secondary); + margin-bottom: 15px; + line-height: 1.3; + font-style: italic; +} + +.mbti-tags { + display: grid; + gap: 1px; + grid-template-columns: 1fr 1fr; + flex-wrap: wrap; + flex-direction: row; + justify-content: flex-start; +} + +@media (max-width: 768px) { + .mbti-tags { + margin-left: 20px; + } +} + + + .mbti-tags .tag { - background: none; - border: none; - -webkit-background-clip: text; - background-clip: text; - color: transparent; + font-size: 0.75rem; + padding: 4px 10px; + border-radius: 6px; + background: none !important; + border: none !important; + background-color: transparent !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + -webkit-text-fill-color: transparent !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -1954,34 +1127,44 @@ body { } .mbti-tags .tag.tag-color-1 { - background: var(--gradient-1); - -webkit-background-clip: text; - background-clip: text; - color: transparent; + background: var(--gradient-1) !important; + -webkit-background-clip: text !important; + background-clip: text !important; } - .mbti-tags .tag.tag-color-2 { - background: var(--gradient-2); - -webkit-background-clip: text; - background-clip: text; - color: transparent; + background: var(--gradient-2) !important; + -webkit-background-clip: text !important; + background-clip: text !important; } - .mbti-tags .tag.tag-color-3 { - background: var(--gradient-3); - -webkit-background-clip: text; - background-clip: text; - color: transparent; + background: var(--gradient-3) !important; + -webkit-background-clip: text !important; + background-clip: text !important; } - .mbti-tags .tag.tag-color-4 { - background: var(--gradient-4); + background: var(--gradient-4) !important; + -webkit-background-clip: text !important; + background-clip: text !important; +} + +/* Theme-Specific MBTI Styles */ +[data-theme="day"] .mbti-desc { + background: linear-gradient(90deg, #6c5ce7 0%, #3b82f6 50%, #0ea5e9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } +[data-theme="night"] .mbti-desc { + background: linear-gradient(90deg, #a162e8 0%, #8b5cf6 50%, #6c5ce7 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + border-radius: 8px; + padding: 8px 12px; +} -/* --- Tech Stack (PC) --- */ + +/* Tech Stack Card */ .area-tech { display: flex; flex-direction: column; @@ -1992,7 +1175,7 @@ body { .card-header { 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; @@ -2001,6 +1184,12 @@ body { font-size: 1.1rem; color: var(--text-primary); margin: 0; + background: var(--gradient-2); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + font-style: inherit; + font-weight: 700; } .card-subtitle { font-size: 0.8rem; @@ -2010,20 +1199,7 @@ body { color: transparent; } -[data-theme="night"] .card-header h3 { - text-shadow: 0 0 10px var(--accent-glow); -} - -.card-header h3 { - background: var(--gradient-2); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - font-style: inherit; - font-weight: 700; -} - -/* PC 3D Container */ +/* Desktop Tech 3D Layout */ .tech-wrapper { flex: 1; position: relative; @@ -2052,290 +1228,238 @@ body { color: transparent; -webkit-text-fill-color: transparent; text-decoration: none; - pointer-events: none; /* 禁用鼠标事件避免干扰 */ + pointer-events: none; z-index: 10; contain: layout style; } -/* 白天模式下为 tag-color 类增强可读性 */ +/* Mobile Tech Scroll Layout */ +@media (max-width: 768px) { + .area-tech { + height: auto; + } + + .tech-wrapper { + display: none; + } + + .tech-wrapper.mobile-scroll { + display: grid; + height: auto; + min-height: 120px; + grid-template-rows: repeat(3, 30px); + grid-auto-flow: column; + gap: 10px; + overflow-x: auto; + padding: 10px 0 20px; + scroll-snap-type: x mandatory; + mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%); + -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%); + } + + .tech-row { + display: flex; + gap: 10px; + align-items: center; + white-space: nowrap; + will-change: transform; + animation: rowMarquee var(--row-speed) linear infinite; + } + + .row-1 { --row-speed: 24s; } + .row-2 { --row-speed: 28s; } + .row-3 { --row-speed: 32s; } + + .tech-tag-mobile { + scroll-snap-align: start; + padding: 6px 12px; + border-radius: 20px; + font-size: 0.8rem; + font-family: var(--font-mono); + white-space: nowrap; + border: none; + outline: none; + box-shadow: none; + background-color: transparent !important; + font-weight: bold; + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; + text-decoration: none; + pointer-events: none; + z-index: 10; + contain: layout style; + } +} + +/* Tech Tag Color Definitions */ +/* Day Theme */ [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; /* 蓝色 */ + 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-mobile.tag-color-2 { 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-mobile.tag-color-3 { 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-mobile.tag-color-4 { 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-mobile.tag-color-5 { 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-mobile.tag-color-6 { 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-mobile.tag-color-7 { 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-mobile.tag-color-8 { 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-mobile.tag-color-9 { 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; -} +[data-theme="day"] .tech-tag-mobile.tag-color-10 { color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important; } -/* 不同颜色的标签 */ -[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; +/* Night Theme */ +[data-theme="night"] .tech-tag-3d.tag-color-1, +[data-theme="night"] .tech-tag-mobile.tag-color-1 { + background: var(--gradient-1) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; } - -[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; +[data-theme="night"] .tech-tag-3d.tag-color-2, +[data-theme="night"] .tech-tag-mobile.tag-color-2 { + background: var(--gradient-2) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; } - -[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; +[data-theme="night"] .tech-tag-3d.tag-color-3, +[data-theme="night"] .tech-tag-mobile.tag-color-3 { + background: var(--gradient-3) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; } - -[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; +[data-theme="night"] .tech-tag-3d.tag-color-4, +[data-theme="night"] .tech-tag-mobile.tag-color-4 { + background: var(--gradient-4) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; } - -[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; - color: transparent; +[data-theme="night"] .tech-tag-3d.tag-color-5, +[data-theme="night"] .tech-tag-mobile.tag-color-5 { + background: var(--gradient-5) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; } - -/* 扩展更多渐变方案 */ -[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; +[data-theme="night"] .tech-tag-3d.tag-color-6, +[data-theme="night"] .tech-tag-mobile.tag-color-6 { + background: var(--gradient-6) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; } - -[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; +[data-theme="night"] .tech-tag-3d.tag-color-7, +[data-theme="night"] .tech-tag-mobile.tag-color-7 { + background: var(--gradient-7) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; } - -[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; +[data-theme="night"] .tech-tag-3d.tag-color-8, +[data-theme="night"] .tech-tag-mobile.tag-color-8 { + background: var(--gradient-8) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; } - -[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; +[data-theme="night"] .tech-tag-3d.tag-color-9, +[data-theme="night"] .tech-tag-mobile.tag-color-9 { + background: var(--gradient-9) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; } - -[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; - color: transparent; +[data-theme="night"] .tech-tag-3d.tag-color-10, +[data-theme="night"] .tech-tag-mobile.tag-color-10 { + background: var(--gradient-10) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; } - -/* 渐变文字兼容处理：支持时启用文字渐变，不支持时使用纯色 */ +/* Gradient Fallback for Unsupported Browsers */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { - .tech-tag-3d, - .tech-tag-mobile { + .tech-tag-3d, .tech-tag-mobile { background: none !important; color: var(--text-primary) !important; } - - .tech-tag-3d.tag-color-1, - .tech-tag-3d.tag-color-2, - .tech-tag-3d.tag-color-3, - .tech-tag-3d.tag-color-4, - .tech-tag-3d.tag-color-5, - .tech-tag-3d.tag-color-6, - .tech-tag-3d.tag-color-7, - .tech-tag-3d.tag-color-8, - .tech-tag-3d.tag-color-9, - .tech-tag-3d.tag-color-10, - .tech-tag-mobile.tag-color-1, - .tech-tag-mobile.tag-color-2, - .tech-tag-mobile.tag-color-3, - .tech-tag-mobile.tag-color-4, - .tech-tag-mobile.tag-color-5, - .tech-tag-mobile.tag-color-6, - .tech-tag-mobile.tag-color-7, - .tech-tag-mobile.tag-color-8, - .tech-tag-mobile.tag-color-9, - .tech-tag-mobile.tag-color-10 { + .tech-tag-3d[class*="tag-color-"], .tech-tag-mobile[class*="tag-color-"] { background: none !important; color: var(--text-primary) !important; } } -/* --- Interests --- */ +/* Theme-Specific Card Header Styles */ +[data-theme="night"] .card-header h3 { + text-shadow: 0 0 10px var(--accent-glow); +} +:not([data-theme="night"]) .glow-title, +:not([data-theme="night"]) .card-header h3 { + background: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; +} + +/* Interests Card */ .area-interests { padding: 20px; + contain: layout style; } -@media (min-width: 1025px) { - .interest-list { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 15px; - margin-top: 1rem; - } -} - -.interest-item { - background: rgba(128, 128, 128, 0.05); - padding: 15px; - border-radius: 12px; - display: flex; - align-items: flex-start; - flex-direction: column; - gap: 10px; - transition: background 0.3s; -} - -.interest-item:hover { - background: rgba(128, 128, 128, 0.1); -} - -.i-emoji { - font-size: 2rem; - color: var(--text-primary); - -webkit-text-fill-color: initial; - margin-bottom: 6px; -} - -.i-text { - display: flex; - flex-direction: column; - min-width: 0; - gap: 6px; -} - -/* 添加 min-width: 0 防止溢出 */ -.i-text strong { - font-size: 1.1rem; - color: var(--text-primary); - background: none; - -webkit-background-clip: initial; - background-clip: initial; - -webkit-text-fill-color: initial; - white-space: nowrap; -} - -.i-text span:not(.i-emoji) { - font-size: 0.9rem; - color: var(--text-tertiary); - background: none; - -webkit-background-clip: initial; - background-clip: initial; - -webkit-text-fill-color: initial; - white-space: normal; -} - - .interest-list { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, 1fr); /* 关键：2列布局 */ gap: 15px; margin-top: 1rem; align-content: center; } .interest-item { - background: rgba(255, 255, 255, 0.65); - padding: 12px; + padding: 15px; border-radius: 12px; display: flex; - align-items: center; - gap: 10px; - transition: background 0.25s, box-shadow 0.25s, border-color 0.25s; - border: 1px solid rgba(128, 128, 128, 0.12); - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); + flex-direction: column; /* 关键：垂直排列（原错误是row） */ + align-items: center; /* 内容居中 */ + gap: 10px; /* emoji与文字的间距 */ + transition: background 0.25s; } .interest-item:hover { @@ -2344,61 +1468,144 @@ body { border-color: rgba(108, 92, 231, 0.25); } -[data-theme="night"] .interest-item { - background: rgba(30, 30, 35, 0.35); - border-color: rgba(255, 255, 255, 0.08); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); -} - -[data-theme="night"] .interest-item:hover { - background: rgba(30, 30, 35, 0.5); - border-color: var(--accent); - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); -} - .i-emoji { - font-size: 1.6rem; + font-size: 2rem; color: var(--text-primary); -webkit-text-fill-color: initial; + flex-shrink: 0; } .i-text { display: flex; - flex-direction: column; + text-align: center; min-width: 0; + gap: 4px; } -/* 添加 min-width: 0 防止溢出 */ .i-text strong { font-size: 0.9rem; - color: var(--text-primary); - /* 为兴趣标签添加渐变色彩 */ + font-weight: 600; + white-space: nowrap; background: var(--gradient-1); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; - font-weight: 600; } .i-text span:not(.i-emoji) { font-size: 0.75rem; - color: var(--text-tertiary); - /* 为兴趣描述添加渐变色彩 */ - background: var(--gradient-2); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - -webkit-text-fill-color: transparent; + line-height: 1.6; } -/* 移动端社交链接 */ -.mobile-social { - display: none; +/* Night Theme Interests Styles */ +/* 修复黑夜模式下Interest模块模糊问题 */ +[data-theme="night"] .interest-item { + background: rgba(30, 30, 35, 0.5); /* 提高背景不透明度，增强对比度 */ + border-color: rgba(255, 255, 255, 0.2); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); /* 降低阴影模糊，减少干扰 */ + isolation: isolate; /* 避免父容器模糊影响内部内容 */ +} +[data-theme="night"] .interest-item:hover { + background: rgba(30, 30, 35, 0.7); + border-color: var(--accent); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); +} + +/* 简化文字阴影，降低模糊程度，提高对比度 */ +[data-theme="night"] .i-text strong { + background: var(--gradient-1) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + -webkit-text-fill-color: transparent !important; + color: transparent !important; + /* 减少阴影层数+降低模糊半径，只保留轻微发光 */ + text-shadow: 0 0 4px var(--accent-glow); +} +[data-theme="night"] .i-text span:not(.i-emoji) { + background: var(--gradient-2) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + -webkit-text-fill-color: transparent !important; + color: transparent !important; + text-shadow: 0 0 3px var(--accent-glow); +} + +/* Responsive Interests Layout */ +@media (min-width: 1025px) { + .interest-list { + grid-template-columns: 1fr 1fr; + gap: 15px; + } +} + +@media (min-width: 769px) and (max-width: 1024px) { + .interest-list { + grid-template-columns: 1fr 1fr; + overflow: hidden; + } + .interest-item { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + min-width: 0; + padding: 15px; + } + .i-emoji { + margin-bottom: 6px; + } + .i-text { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + min-width: 0; + width: 100%; + } + .i-text strong, .i-text span { + white-space: normal; + word-break: break-word; + overflow-wrap: break-word; + } +} + +@media (max-width: 768px) { + .interest-list { + grid-template-columns: 1fr; + max-height: none; + } + .interest-item { + min-width: 0; + padding: 12px; + } + .i-text { + min-width: 0; + flex-direction: row; + align-items: center; + gap: 8px; + overflow: hidden; + word-break: break-all; + text-overflow: ellipsis; + white-space: nowrap; + flex-wrap: wrap; + } + .i-text strong, .i-text span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .i-text strong { + flex: 0 1 auto; + } + .i-text span:not(.i-emoji) { + flex: 1 1 100%; + white-space: normal; + } } /* ========================================= - 5. Content Sections (Blog/Github) + 7. Content Sections (Blog/Github) ========================================= */ .content-section { display: flex; @@ -2437,7 +1644,7 @@ body { min-height: 300px; } -/* Github Lists */ +/* Github Projects List */ .projects-list { margin-top: 15px; display: grid; @@ -2512,22 +1719,63 @@ body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + background: var(--gradient-3); + -webkit-background-clip: text; + background-clip: text; + color: transparent; } .b-date { font-size: 0.75rem; color: var(--text-tertiary); + background: var(--gradient-5); + -webkit-background-clip: text; + background-clip: text; + color: transparent; } .b-cat { font-size: 0.75rem; color: var(--accent); + background: var(--gradient-4); + -webkit-background-clip: text; + background-clip: text; + color: transparent; background: none; padding: 0; border-radius: 0; white-space: nowrap; } +/* Blog Container Readability Fix */ +#blog-container .b-title { + background: none !important; + -webkit-background-clip: initial; + background-clip: initial; + color: var(--text-primary) !important; + -webkit-text-fill-color: initial; +} +#blog-container .b-cat { + background: none !important; + -webkit-background-clip: initial; + background-clip: initial; + color: var(--text-secondary) !important; + -webkit-text-fill-color: initial; +} +#blog-container .b-date { + background: none !important; + -webkit-background-clip: initial; + background-clip: initial; + color: var(--text-tertiary) !important; + -webkit-text-fill-color: initial; +} + +/* Night Theme Blog Styles */ +[data-theme="night"] .b-title, +[data-theme="night"] .b-cat, +[data-theme="night"] .b-date { + text-shadow: 0 0 8px var(--accent-glow); +} /* Loading Skeleton */ .skeleton-card { @@ -2537,19 +1785,7 @@ body { animation: pulse 1.5s infinite; } -@keyframes pulse { - 0% { - opacity: 0.6; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0.6; - } -} - -/* Comments */ +/* Comments Section */ .comments-wrapper { margin: 40px 0 80px; } @@ -2558,414 +1794,168 @@ body { padding: 30px; } -/* ========================================= - 6. Tablet Adaptive (768px - 1024px) - ========================================= */ +/* Responsive Comment Box */ @media (min-width: 769px) and (max-width: 1024px) { - .bento-grid { - grid-template-columns: 1fr 1fr; - grid-template-areas: - "profile stats" - "profile mbti" - "bio bio" - "tech tech" - "interests interests"; - grid-template-rows: auto; - } - - .area-profile { - flex-direction: row; - gap: 20px; - } - - .content-section { - display: flex; - flex-direction: column; - } - - .interest-list { - grid-template-columns: 1fr 1fr; - overflow: hidden; - } - .interest-item { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 10px; - min-width: 0; - } - .i-emoji { margin-bottom: 6px; } - - .i-text { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 6px; - min-width: 0; - width: 100%; - } - - .i-text strong, .i-text span { - white-space: normal; - word-break: break-word; - overflow-wrap: break-word; - } - - /* 兴趣模块文本渐变色彩 */ - .i-text strong { - background: var(--gradient-1); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - word-break: break-word; - overflow-wrap: break-word; - } - - .i-text span { - background: var(--gradient-2); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - word-break: break-word; - overflow-wrap: break-word; - } - .comment-box { padding: 24px; } } -/* ========================================= - 7. Mobile Layout (< 768px) - ========================================= */ @media (max-width: 768px) { - .main-container { - margin: 20px auto 100px; - padding: 0 16px; - } - .mbti-tags { - margin-left: 20px; - } - - /* Bottom Dock */ - .glass-nav { - position: fixed; - top: auto; - bottom: 0; - left: 0; - width: 100%; - height: auto; - border-radius: 0; - background: var(--dock-bg); - backdrop-filter: blur(12px) saturate(120%); - -webkit-backdrop-filter: blur(12px) saturate(120%); - border-top: 1px solid rgba(128, 128, 128, 0.1); - padding-bottom: env(safe-area-inset-bottom); - z-index: 1000; - } - - .logo-brand, .nav-divider { - display: none; - } - - .nav-menu { - width: 100%; - justify-content: space-around; - padding: 10px 0; - display: flex; - } - - .nav-item { - flex-direction: column; - gap: 2px; - font-size: 0.7rem; - padding: 8px 0; - color: var(--text-secondary); - } - - .nav-item i { - font-size: 1.4rem; - } - - .nav-label { - font-size: 10px; - color: var(--text-primary); - } - - .nav-item.active { - color: var(--text-primary); - } - .nav-item:active { - color: var(--text-primary); - background: rgba(108, 92, 231, 0.15); - } - - .action-btn .btn-text { - display: none; - } - - .action-btn { - display: none; - } - - .action-btn.is-active { - background: rgba(108, 92, 231, 0.25); - color: #fff; - } - - /* Stacking Bento */ - .bento-grid { - display: flex; - flex-direction: column; - gap: 16px; - } - - /* Profile Mobile */ - .area-profile { - padding: 20px; - flex-direction: row; - gap: 15px; - align-items: center; - text-align: left; - } - - .avatar-ring { - width: 80px; - height: 80px; - padding: 2px; - margin: 0; - } - - .status-dot { - right: 0; - bottom: 0; - width: 12px; - height: 12px; - font-size: 0; - padding: 0; - } - - .hero-name { - margin: 0 0 4px; - font-size: 1.5rem; - } - - .hero-role { - font-size: 0.8rem; - margin-bottom: 6px; - } - - .location-tag { - justify-content: flex-start; - } - - .desktop-social { - display: none; - } - - /* Mobile Stats */ - .area-stats { - flex-direction: row; - padding: 15px; - } - - .stat-item { - flex-direction: column; - border-bottom: none; - border-right: 1px solid rgba(128, 128, 128, 0.1); - padding: 0 10px; - flex: 1; - text-align: center; - } - - .stat-item:last-child { - border-right: none; - } - - .stat-val { - font-size: 1.2rem; - } - - /* Mobile Tech Scroll (Horizontal) */ - .area-tech { - height: auto; - } - - .tech-wrapper { - display: none; - } - - /* Hide PC wrapper */ - .tech-wrapper.mobile-scroll { - display: grid; - height: auto; - min-height: 120px; - grid-template-rows: repeat(3, 30px); /* 三行，每行30px */ - grid-auto-flow: column; - gap: 10px; - overflow-x: auto; - padding: 10px 0 20px; - scroll-snap-type: x mandatory; - /* 添加淡入淡出效果 */ - mask-image: linear-gradient( - to right, - transparent 0%, - black 10%, - black 90%, - transparent 100% - ); - -webkit-mask-image: linear-gradient( - to right, - transparent 0%, - black 20%, - black 80%, - transparent 100% - ); - } - .tech-row { - display: flex; - gap: 10px; - align-items: center; - white-space: nowrap; - will-change: transform; - animation: rowMarquee var(--row-speed) linear infinite; - } - .row-1 { --row-speed: 24s; } - .row-2 { --row-speed: 28s; } - .row-3 { --row-speed: 32s; } - @keyframes rowMarquee { - 0% { transform: translateX(0); } - 100% { transform: translateX(-50%); } - } - - .tech-tag-mobile { - scroll-snap-align: start; - padding: 6px 12px; - border-radius: 20px; - font-size: 0.8rem; - font-family: var(--font-mono); - white-space: nowrap; - border: none; - outline: none; - box-shadow: none; - background-color: transparent !important; - font-weight: bold; - /* 渐变由 tag-color-* 提供 */ - -webkit-background-clip: text; - background-clip: text; - color: transparent; - -webkit-text-fill-color: transparent; - text-decoration: none; - pointer-events: none; - z-index: 10; - contain: layout style; - } - - /* Mobile Social */ - .mobile-social { - display: flex; - justify-content: space-around; - padding: 20px; - } - - .ms-btn { - width: 40px; - height: 40px; - border-radius: 50%; - background: rgba(128, 128, 128, 0.1); - display: flex; - align-items: center; - justify-content: center; - color: var(--text-secondary); - font-size: 1.4rem; - } - - .content-section { - display: flex; - flex-direction: column; - } - - /* 修复兴趣模块在移动端的溢出问题 */ - .interest-list { - grid-template-columns: 1fr; - max-height: none; - } - - .interest-item { - min-width: 0; - } - - .i-text { - min-width: 0; - } - - /* 修复移动端兴趣模块标签和描述在同一行 */ - .i-text { - flex-direction: row; - align-items: center; - gap: 8px; - overflow: hidden; - /** 超出宽度换行显示 */ - word-break: break-all; - text-overflow: ellipsis; - white-space: nowrap; - } - - .i-text strong, .i-text span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .interest-item { - padding: 12px; - } - - .i-emoji { - flex-shrink: 0; - } - - .i-text { - min-width: 0; - } - - /* 兴趣模块文本渐变色彩 */ - .i-text strong { - background: var(--gradient-1); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - } - - .i-text span { - background: var(--gradient-2); - -webkit-background-clip: text; - background-clip: text; - } - .comment-box { padding: 16px; } - .interest-item { padding: 12px; } - .i-text { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; } - .i-emoji { flex: 0 0 auto; margin-right: 6px; } - .i-text strong { flex: 0 1 auto; white-space: nowrap; } - .i-text span:not(.i-emoji) { flex: 1 1 100%; white-space: normal; } } -@media (min-width: 769px) { - .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; } -} - -@media (max-width: 768px) { - .quote-box p.quote-collapsed { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } -} - - /* ========================================= - 8. Modal & Footer + 8. Floating Action Button (FAB) + ========================================= */ +.mobile-fab { + position: fixed; + right: 16px; + bottom: 33vh; + z-index: 1100; + cursor: move; + user-select: none; + display: block !important; +} + +.fab-main { + display: flex; + align-items: center; + gap: 6px; + background: var(--accent); + color: #fff; + border: none; + border-radius: 22px; + padding: 10px 14px; + box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); + opacity: 0.9; + transition: all 0.3s ease; +} + +.fab-main:hover { + opacity: 1; + transform: scale(1.05); +} + +.fab-main:active { + transform: scale(0.95); +} + +.fab-label { + font-size: 12px; + font-weight: 500; +} + +.fab-menu { + display: none; + flex-direction: column; + gap: 10px; + margin-top: 10px; +} + +.fab-item { + display: flex; + align-items: center; + gap: 6px; + background: var(--glass-bg); + color: var(--text-primary); + border-radius: 18px; + padding: 8px 12px; + border: var(--glass-border); + box-shadow: var(--glass-shadow); + opacity: 0.8; +} + +.fab-menu.open { + display: flex; + animation: fadeIn 0.3s ease both; +} + +/* FAB Global Base Styles (Day/Night Common) */ +.fab-main { + display: flex; + align-items: center; + gap: 6px; + color: var(--text-primary); + border: none; + border-radius: 22px; + padding: 10px 14px; + box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); + opacity: 0.95; + transition: opacity 0.2s, transform 0.2s; +} + +.fab-label { + font-size: 12px; + font-weight: 500; +} + +.fab-menu { + display: none; + flex-direction: column; + gap: 10px; + margin-top: 10px; +} + +.fab-item { + display: flex; + align-items: center; + gap: 6px; + background: var(--glass-bg); + color: var(--text-primary); + border-radius: 18px; + padding: 8px 12px; + border: var(--glass-border); + box-shadow: var(--glass-shadow); +} + +/* Night Theme FAB Styles */ +[data-theme="night"] .fab-main { + background: linear-gradient(135deg, #a1c4fd, #6c5ce7); + color: white; + text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 16px rgba(108, 92, 231, 0.5); + box-shadow: + 0 8px 18px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(108, 92, 231, 0.4); + opacity: 1; +} + +[data-theme="night"] .fab-item { + color: white; + text-shadow: 0 0 6px rgba(255, 255, 255, 0.5); + opacity: 1; +} + +[data-theme="night"] #fab-lang { + background: linear-gradient(135deg, #a1c4fd, #6c5ce7); + box-shadow: var(--glass-shadow), 0 0 12px rgba(108, 92, 231, 0.4); +} + +[data-theme="night"] #fab-theme { + background: linear-gradient(135deg, #c2e9fb, #00cec9); + box-shadow: var(--glass-shadow), 0 0 12px rgba(0, 206, 201, 0.4); +} + +[data-theme="night"] #fab-music { + background: linear-gradient(135deg, #ff9a9e, #f093fb); + box-shadow: var(--glass-shadow), 0 0 12px rgba(240, 147, 251, 0.4); +} + +/* Music Module Hidden (As Per Original Comment) */ +.site-audio { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + opacity: 0; + pointer-events: none; + display: none; +} + +/* ========================================= + 9. Modal & Footer ========================================= */ .modal-overlay { position: fixed; @@ -2991,6 +1981,12 @@ body { right: 15px; font-size: 1.5rem; color: var(--text-secondary); + cursor: pointer; + transition: color 0.3s; +} + +.modal-close:hover { + color: var(--accent); } .qr-box { @@ -3000,6 +1996,7 @@ body { .qr-box img { width: 100%; border-radius: 12px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .qr-fallback { @@ -3007,6 +2004,7 @@ body { background: #eee; border-radius: 12px; font-size: 0.8rem; + color: var(--text-tertiary); } .site-footer { @@ -3014,136 +2012,91 @@ body { color: var(--text-tertiary); font-size: 0.75rem; padding-bottom: 100px; + margin-top: 40px; } + .site-footer a { color: var(--text-tertiary); + text-decoration: none; + transition: color 0.3s; } -.b-title { - background: var(--gradient-3); - -webkit-background-clip: text; - background-clip: text; - color: transparent; +.site-footer a:hover { + color: var(--accent); + text-decoration: underline; } -.b-cat { - background: var(--gradient-4); - -webkit-background-clip: text; - background-clip: text; - color: transparent; +/* ========================================= + 10. Responsive Adjustments (Final Tweaks) + ========================================= */ +/* Ensure Mobile Social Stays Hidden on Desktop */ +@media (min-width: 769px) { + .mobile-social { + display: none !important; + } } -.b-date { - background: var(--gradient-5); - -webkit-background-clip: text; - background-clip: text; - color: transparent; +/* Fade-In Animation for Dynamic Content */ +.fade-in { + animation: fadeIn 0.3s ease both; } -[data-theme="night"] .b-title, [data-theme="night"] .b-cat, [data-theme="night"] .b-date { - text-shadow: 0 0 8px var(--accent-glow); +/* Fix Tech Tag Marquee on Mobile */ +@media (max-width: 768px) { + .tech-wrapper.mobile-scroll { + mask-image: linear-gradient( + to right, + transparent 0%, + black 10%, + black 90%, + transparent 100% + ); + -webkit-mask-image: linear-gradient( + to right, + transparent 0%, + black 10%, + black 90%, + transparent 100% + ); + } } -/* 阅读友好：blog-container 内文本使用常规颜色覆盖渐变 */ -#blog-container .b-title { - background: none !important; - -webkit-background-clip: initial; - background-clip: initial; - color: var(--text-primary) !important; - -webkit-text-fill-color: initial; +/* Ensure Consistent Font Smoothing */ +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -#blog-container .b-cat { - background: none !important; - -webkit-background-clip: initial; - background-clip: initial; - color: var(--text-secondary) !important; - -webkit-text-fill-color: initial; +/* Prevent Horizontal Scroll on Small Screens */ +html, body { + overflow-x: hidden; } -#blog-container .b-date { - background: none !important; - -webkit-background-clip: initial; - background-clip: initial; - color: var(--text-tertiary) !important; - -webkit-text-fill-color: initial; +/* Fix Stat Key Font Size on English Mobile */ +@media (max-width: 768px) { + [data-lang="en"] .stat-key { + font-size: 6px !important; } -.social-dock .s-icon { color: var(--text-primary); } -.social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; } -.mobile-fab { position: fixed; right: 16px; bottom: 33vh; z-index: 1100; cursor: move; user-select: none; display: block !important; } -.fab-main { display: flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 22px; padding: 10px 14px; box-shadow: 0 8px 18px rgba(0,0,0,0.25); opacity: 0.9; transition: all 0.3s ease; } -.fab-main:hover { opacity: 1; transform: scale(1.05); } -.fab-main:active { transform: scale(0.95); } -.fab-label { font-size: 12px; } -.fab-menu { display: none; flex-direction: column; gap: 10px; margin-top: 10px; } -.fab-item { display: flex; align-items: center; gap: 6px; background: var(--glass-bg); border-radius: 18px; padding: 8px 12px; border: var(--glass-border); box-shadow: var(--glass-shadow); opacity: 0.8; } -.fab-menu.open { display: flex; } -/* Day-only: keep subtle gradient on titles, solid body text */ -:not([data-theme="night"]) .glow-title { - background: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary)); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - -webkit-text-fill-color: transparent; } -:not([data-theme="night"]) .card-header h3 { - background: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary)); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - -webkit-text-fill-color: transparent; +/* Final Theme Consistency Checks */ +[data-theme="night"] { + color-scheme: dark; } -/* Day-only: strengthen contrast for INFJ tags */ -:not([data-theme="night"]) .mbti-tags .tag { - background: none !important; - -webkit-background-clip: initial !important; - background-clip: initial !important; - -webkit-text-fill-color: initial !important; - color: var(--text-secondary) !important; +/* Ensure Glass Effects Work on All Browsers */ +@supports not (backdrop-filter: blur(8px)) { + .glass-nav, .bento-card, .glass-panel, .modal-glass, .fab-main, .fab-item { + background: var(--bg-base); + opacity: 0.98; + } + [data-theme="night"] .glass-nav, + [data-theme="night"] .bento-card, + [data-theme="night"] .glass-panel, + [data-theme="night"] .modal-glass, + [data-theme="night"] .fab-main, + [data-theme="night"] .fab-item { + background: var(--bg-base); + opacity: 0.95; + } } -:not([data-theme="night"]) .mbti-tags .tag.tag-color-1 { color: var(--day-tag-1) !important; } -:not([data-theme="night"]) .mbti-tags .tag.tag-color-2 { color: var(--day-tag-2) !important; } -:not([data-theme="night"]) .mbti-tags .tag.tag-color-3 { color: var(--day-tag-3) !important; } -:not([data-theme="night"]) .mbti-tags .tag.tag-color-4 { color: var(--day-tag-4) !important; } - -/* Day-only: strengthen contrast for Interests */ -:not([data-theme="night"]) .i-text strong { - background: none !important; - -webkit-background-clip: initial !important; - background-clip: initial !important; - -webkit-text-fill-color: initial !important; - color: #111827 !important; -} -:not([data-theme="night"]) .i-text span:not(.i-emoji) { - background: none !important; - -webkit-background-clip: initial !important; - background-clip: initial !important; - -webkit-text-fill-color: initial !important; - color: #374151 !important; -} - -[data-theme="night"] .i-text strong { - background: var(--gradient-1) !important; - -webkit-background-clip: text !important; - background-clip: text !important; - -webkit-text-fill-color: transparent !important; - color: transparent !important; - text-shadow: 0 0 10px var(--accent-glow); -} -[data-theme="night"] .i-text span:not(.i-emoji) { - background: var(--gradient-2) !important; - -webkit-background-clip: text !important; - background-clip: text !important; - -webkit-text-fill-color: transparent !important; - color: transparent !important; - text-shadow: 0 0 8px var(--accent-glow); -} -/* Loading Skeleton */ -.skeleton-card { height: 60px; background: rgba(128,128,128,0.1); border-radius: 10px; animation: pulse 1.5s infinite; } -@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } - -/* Loading Transition */ -.fade-in { animation: fadeIn 0.3s ease both; } -@keyframes fadeIn { from { opacity: 0; transform: translateY(2px);} to { opacity: 1; transform: none;} } diff --git a/js/about.js b/js/about.js index d8b5580..88511ab 100644 --- a/js/about.js +++ b/js/about.js @@ -839,10 +839,50 @@ class UIManager { return {...item, gradientId: gid}; }); - const isMobile = window.matchMedia('(max-width: 768px)').matches; - container.innerHTML = ''; + const currentState = window.matchMedia('(max-width: 768px)').matches ? 'mobile' : 'desktop'; + // 检查是否已保存状态到 sessionStorage + const savedState = sessionStorage.getItem('techCloudState_' + currentState); - if (isMobile) { + + if (savedState) { + const parsedState = JSON.parse(savedState); + // 如果当前状态与保存的状态一致，直接使用保存的内容 + if (parsedState.type === currentState) { + container.innerHTML = parsedState.html; + if (currentState === 'mobile') { + container.classList.add('mobile-scroll'); + } + if (currentState === 'desktop') { + container.classList.remove('mobile-scroll'); + // 重新初始化3D球体动画 + this.init3DSphereAnimation(container, techStack); + } + // 监听窗口大小变化 + this.setupResizeListener(container, techStack, currentState); + return; + } + } + + // 清空容器并重新生成 + this.generateTechCloud(container, techStack, currentState); + + // 监听窗口大小变化 + this.setupResizeListener(container, techStack, currentState); + } + + // 保存技术标签云状态到 sessionStorage + saveTechCloudState(container, type) { + const state = { + type: type, + html: container.innerHTML + }; + sessionStorage.setItem('techCloudState_' + type, JSON.stringify(state)); + } + + // 生成技术标签云 + generateTechCloud(container, techStack, type) { + container.innerHTML = ''; + if (type === 'mobile') { // Mobile: 3-row seamless marquee container.classList.add('mobile-scroll'); const rows = 3; @@ -872,129 +912,158 @@ class UIManager { } else { // PC: 3D Sphere container.classList.remove('mobile-scroll'); - - // 使用防抖优化尺寸计算 - let resizeTimeout; - const updateContainerSize = () => { - if (resizeTimeout) { - clearTimeout(resizeTimeout); - } - resizeTimeout = setTimeout(() => { - init3DSphere(); - }, 100); - }; - - // 初始化3D球体 - const init3DSphere = () => { - // 清除之前的动画 - if (container.__animToken) { - cancelAnimationFrame(container.__animToken); - } - - // 清空容器 - container.innerHTML = ''; - - const tags = []; - - techStack.forEach((item, index) => { - const el = document.createElement('a'); - el.className = 'tech-tag-3d'; - const colorClass = `tag-color-${item.gradientId || ((index % 10) + 1)}`; - el.classList.add(colorClass); - el.innerText = item.name; - el.style.border = 'none'; - container.appendChild(el); - tags.push({el, x: 0, y: 0, z: 0}); - }); - - // 动态半径，避免容器溢出，使用防抖优化 - let radius = Math.max(160, Math.min(container.offsetWidth, container.offsetHeight) / 2 - 24); - const dtr = Math.PI / 180; - let lasta = 1, lastb = 1; - let active = false, mouseX = 0, mouseY = 0; - - // 初始化位置 - tags.forEach((tag, i) => { - let phi = Math.acos(-1 + (2 * i + 1) / tags.length); - let theta = Math.sqrt(tags.length * Math.PI) * phi; - tag.x = radius * Math.cos(theta) * Math.sin(phi); - tag.y = radius * Math.sin(theta) * Math.sin(phi); - tag.z = radius * Math.cos(phi); - }); - - container.onmouseover = () => active = true; - container.onmouseout = () => active = false; - container.onmousemove = (e) => { - // 使用requestAnimationFrame处理鼠标移动事件，避免强制重排 - requestAnimationFrame(() => { - let rect = container.getBoundingClientRect(); - mouseX = (e.clientX - (rect.left + rect.width / 2)) / 5; - mouseY = (e.clientY - (rect.top + rect.height / 2)) / 5; - }); - }; - - const update = () => { - let a, b; - if (active) { - a = (-Math.min(Math.max(-mouseY, -200), 200) / radius) * 2; - b = (Math.min(Math.max(-mouseX, -200), 200) / radius) * 2; - } else { - a = lasta * 0.98; // Auto rotate - b = lastb * 0.98; - } - lasta = a; - lastb = b; - - if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01 && !active) a = 0.5; // Keep spinning slowly - - let sa = Math.sin(a * dtr), ca = Math.cos(a * dtr); - let sb = Math.sin(b * dtr), cb = Math.cos(b * dtr); - - // 批量更新样式以减少重排 - // 先收集所有需要更新的样式信息 - const updates = []; - tags.forEach(tag => { - let rx1 = tag.x, ry1 = tag.y * ca - tag.z * sa, rz1 = tag.y * sa + tag.z * ca; - let ry2 = ry1, rz2 = rx1 * -sb + rz1 * cb; - tag.x = rx1 * cb + rz1 * sb; - tag.y = ry2; - tag.z = rz2; - - let scale = (tag.z + radius) / (2 * radius) + 0.45; - scale = Math.min(Math.max(scale, 0.7), 1.15); - const opacity = (tag.z + radius) / (2 * radius) + 0.2; - const zIndex = parseInt(scale * 100); - const left = tag.x + container.offsetWidth / 2 - tag.el.offsetWidth / 2; - const top = tag.y + container.offsetHeight / 2 - tag.el.offsetHeight / 2; - - updates.push({ - el: tag.el, - transform: `translate(${left}px, ${top}px) scale(${scale})`, - opacity: opacity, - zIndex: zIndex - }); - }); - - updates.forEach(update => { - update.el.style.transform = update.transform; - update.el.style.opacity = update.opacity; - update.el.style.zIndex = update.zIndex; - }); - - container.__animToken = requestAnimationFrame(update); - }; - - container.__animToken = requestAnimationFrame(update); - }; - - // 初始化3D球体 - init3DSphere(); - - // 监听窗口大小变化 - window.addEventListener('resize', updateContainerSize); + this.init3DSphereAnimation(container, techStack); } + + // 保存当前状态 + this.saveTechCloudState(container, type); } + // 初始化3D球体动画 + init3DSphereAnimation(container, techStack) { + // 清除之前的动画 + if (container.__animToken) { + cancelAnimationFrame(container.__animToken); + } + + // 清空容器 + container.innerHTML = ''; + + const tags = []; + + techStack.forEach((item, index) => { + const el = document.createElement('a'); + el.className = 'tech-tag-3d'; + const colorClass = `tag-color-${item.gradientId || ((index % 10) + 1)}`; + el.classList.add(colorClass); + el.innerText = item.name; + el.style.border = 'none'; + container.appendChild(el); + tags.push({el, x: 0, y: 0, z: 0}); + }); + + // 动态半径，避免容器溢出，使用防抖优化 + let radius = Math.max(160, Math.min(container.offsetWidth, container.offsetHeight) / 2 - 24); + const dtr = Math.PI / 180; + let lasta = 1, lastb = 1; + let active = false, mouseX = 0, mouseY = 0; + + // 初始化位置 + tags.forEach((tag, i) => { + let phi = Math.acos(-1 + (2 * i + 1) / tags.length); + let theta = Math.sqrt(tags.length * Math.PI) * phi; + tag.x = radius * Math.cos(theta) * Math.sin(phi); + tag.y = radius * Math.sin(theta) * Math.sin(phi); + tag.z = radius * Math.cos(phi); + }); + + container.onmouseover = () => active = true; + container.onmouseout = () => active = false; + container.onmousemove = (e) => { + // 使用requestAnimationFrame处理鼠标移动事件，避免强制重排 + requestAnimationFrame(() => { + let rect = container.getBoundingClientRect(); + mouseX = (e.clientX - (rect.left + rect.width / 2)) / 5; + mouseY = (e.clientY - (rect.top + rect.height / 2)) / 5; + }); + }; + + const update = () => { + let a, b; + if (active) { + a = (-Math.min(Math.max(-mouseY, -200), 200) / radius) * 2; + b = (Math.min(Math.max(-mouseX, -200), 200) / radius) * 2; + } else { + a = lasta * 0.98; // Auto rotate + b = lastb * 0.98; + } + lasta = a; + lastb = b; + + if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01 && !active) a = 0.5; // Keep spinning slowly + + let sa = Math.sin(a * dtr), ca = Math.cos(a * dtr); + let sb = Math.sin(b * dtr), cb = Math.cos(b * dtr); + + // 批量更新样式以减少重排 + // 先收集所有需要更新的样式信息 + const updates = []; + tags.forEach(tag => { + let rx1 = tag.x, ry1 = tag.y * ca - tag.z * sa, rz1 = tag.y * sa + tag.z * ca; + let ry2 = ry1, rz2 = rx1 * -sb + rz1 * cb; + tag.x = rx1 * cb + rz1 * sb; + tag.y = ry2; + tag.z = rz2; + + let scale = (tag.z + radius) / (2 * radius) + 0.45; + scale = Math.min(Math.max(scale, 0.7), 1.15); + const opacity = (tag.z + radius) / (2 * radius) + 0.2; + const zIndex = parseInt(scale * 100); + const left = tag.x + container.offsetWidth / 2 - tag.el.offsetWidth / 2; + const top = tag.y + container.offsetHeight / 2 - tag.el.offsetHeight / 2; + + updates.push({ + el: tag.el, + transform: `translate(${left}px, ${top}px) scale(${scale})`, + opacity: opacity, + zIndex: zIndex + }); + }); + + updates.forEach(update => { + update.el.style.transform = update.transform; + update.el.style.opacity = update.opacity; + update.el.style.zIndex = update.zIndex; + }); + + container.__animToken = requestAnimationFrame(update); + }; + + container.__animToken = requestAnimationFrame(update); + } + + // 设置窗口大小变化监听器 + setupResizeListener(container, techStack, currentType) { + // 使用防抖优化尺寸计算 + let resizeTimeout; + let windowRef = currentType; + const handleResize = () => { + if (resizeTimeout) { + clearTimeout(resizeTimeout); + } + resizeTimeout = setTimeout(() => { + const isMobile = window.matchMedia('(max-width: 768px)').matches; + const currentState = isMobile ? 'mobile' : 'desktop'; + if (windowRef === currentState) { + console.log('Tech Cloud: Skipping resize, same state:', windowRef, currentState); + return + } + windowRef = currentState; + + // 检查 sessionStorage 中是否有对应状态的内容 + const savedState = sessionStorage.getItem('techCloudState_' + currentState); + if (savedState) { + // 直接使用保存的内容 + const parsedState = JSON.parse(savedState); + container.innerHTML = parsedState.html; + if (currentState === 'mobile') { + container.classList.add('mobile-scroll'); + } + if (currentState === 'desktop') { + container.classList.remove('mobile-scroll'); + this.init3DSphereAnimation(container, techStack); + } + } else { + // 重新生成 + container.innerHTML = ''; + this.generateTechCloud(container, techStack, currentState); + } + }, 100); + }; + + // 监听窗口大小变化 + window.addEventListener('resize', handleResize); + } initFab() { const main = document.getElementById('fab-main');