diff --git a/about.html b/about.html index aa091e6..eb98642 100644 --- a/about.html +++ b/about.html @@ -246,7 +246,7 @@
- +
diff --git a/css/about.css b/css/about.css index 449cc41..359bb87 100644 --- a/css/about.css +++ b/css/about.css @@ -903,62 +903,82 @@ body { padding: 20px; } -.interest-list { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 15px; - /*height: 100%; */ - margin-top: 1rem; - align-content: center; +@media (min-width: 769px) { + .interest-list { + display: grid; + grid-template-columns: 1fr; + gap: 12px; + margin-top: 1rem; + } + + .interest-item { + background: rgba(128, 128, 128, 0.05); + padding: 12px 16px; + border-radius: 12px; + display: flex; + align-items: center; + gap: 15px; + 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; + } + + .i-text { + display: flex; + flex-direction: column; + min-width: 0; + gap: 4px; + } + + /* 添加 min-width: 0 防止溢出 */ + .i-text strong { + font-size: 1.1rem; + color: var(--text-primary); + /* 为兴趣标签添加渐变色彩 */ + background: var(--gradient-1); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; + white-space: nowrap; + } + + .i-text span:not(.i-emoji) { + font-size: 0.9rem; + color: var(--text-tertiary); + /* 为兴趣描述添加渐变色彩 */ + background: var(--gradient-2); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; + white-space: normal; + } } -.interest-item { - background: rgba(128, 128, 128, 0.05); - padding: 5px; - border-radius: 2px; - display: flex; - align-items: center; - gap: 2px; - transition: background 0.3s; -} - -.interest-item:hover { - background: rgba(128, 128, 128, 0.1); -} - -.i-emoji { - font-size: 1.6rem; - color: var(--text-primary); - -webkit-text-fill-color: initial; -} - -.i-text { - display: flex; - flex-direction: column; - min-width: 0; -} - -/* 添加 min-width: 0 防止溢出 */ -.i-text strong { - font-size: 0.9rem; - color: var(--text-primary); - /* 为兴趣标签添加渐变色彩 */ - background: var(--gradient-1); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - -webkit-text-fill-color: transparent; -} - -.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; +@media (min-width: 769px) and (max-width: 1024px) { + .interest-list { + grid-template-columns: 1fr; + max-height: none; + } + + .i-text { + flex-direction: column; + align-items: flex-start; + gap: 4px; + } + + .i-text strong, .i-text span { + white-space: normal; + } } /* ========================================= @@ -1169,32 +1189,39 @@ body { flex-direction: column; } - /* 修复平板模式下兴趣模块的高度问题 */ .interest-list { - grid-template-columns: 1fr 1fr; - max-height: 150px; /* 限制高度 */ - overflow: hidden; + 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: row; - align-items: center; - gap: 8px; + flex-direction: column; + gap: 4px; } - - .i-text strong, .i-text span { - white-space: nowrap; - } - - /* 兴趣模块文本渐变色彩 */ + .i-text strong { + font-size: 1.1rem; + white-space: nowrap; background: var(--gradient-1); -webkit-background-clip: text; background-clip: text; color: transparent; } - + .i-text span { + font-size: 0.9rem; + white-space: normal; background: var(--gradient-2); -webkit-background-clip: text; background-clip: text; @@ -1524,20 +1551,71 @@ body { .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; + } + + /* 增强移动端社交链接黑夜模式下的发光效果 */ + [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); + } } -@media (max-width: 768px) { - .quote-box p.quote-collapsed { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } +/* 确保在非移动端隐藏 .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; + } } + + .interest-list { grid-auto-rows: minmax(80px, auto); } .interest-item { padding: 14px; border-radius: 12px; gap: 12px; } .i-emoji { font-size: 1.6rem; } .i-text strong { display: block; } + + .i-text span:not(.i-emoji) { display: block; } /* ========================================= @@ -1646,10 +1724,11 @@ body { } .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: 88px; z-index: 1100; } -css -编辑 - /* ========== 全局基础样式（白天 & 黑夜通用） ========== */ + + + + +/* ========== 全局基础样式（白天 & 黑夜通用） ========== */ .fab-main { display: flex; align-items: center; @@ -1686,8 +1765,61 @@ css padding: 8px 12px; border: var(--glass-border); box-shadow: var(--glass-shadow); - opacity: 0.9; - transition: opacity 0.2s; +} + +/* 添加Artalk评论组件的自定义样式 */ +.artalk-comment { + --at-color-main: var(--accent) !important; + --at-color-font: var(--text-primary) !important; + --at-color-meta: var(--text-secondary) !important; + --at-color-border: rgba(128, 128, 128, 0.1) !important; + --at-color-bg: var(--glass-bg) !important; + --at-color-bg-grey: rgba(128, 128, 128, 0.05) !important; + --at-color-bg-hover: rgba(128, 128, 128, 0.1) !important; + --at-color-bg-light: var(--glass-bg) !important; + --at-color-shadow: var(--glass-shadow) !important; +} + +[data-theme="night"] .artalk-comment { + --at-color-font: var(--text-primary) !important; + --at-color-meta: var(--text-secondary) !important; + --at-color-border: rgba(255, 255, 255, 0.08) !important; + --at-color-bg: var(--glass-bg) !important; + --at-color-bg-grey: rgba(255, 255, 255, 0.05) !important; + --at-color-bg-hover: rgba(255, 255, 255, 0.1) !important; + --at-color-bg-light: var(--glass-bg) !important; + --at-color-shadow: var(--glass-shadow) !important; +} + +.artalk-comment .atk-main-editor { + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + border-radius: var(--radius) !important; +} + +.artalk-comment .atk-comment-wrap { + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + border-radius: var(--radius) !important; +} + +/* 确保评论区域适配白天/黑夜模式 */ +#artalk-container { + border-radius: var(--radius); +} + +#artalk-container .atk-main-editor { + background: var(--glass-bg); + border: var(--glass-border); + box-shadow: var(--glass-shadow); +} + +#artalk-container .atk-comment-wrap { + background: var(--glass-bg); + border: var(--glass-border); + box-shadow: var(--glass-shadow); + opacity: 0.9; + transition: opacity 0.2s; } .fab-menu.open { @@ -2402,6 +2534,24 @@ body { color: var(--text-secondary); } +/* --- 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); +} + .mbti-tags .tag { background: none; border: none; @@ -2624,6 +2774,67 @@ body { padding: 20px; } +@media (min-width: 1025px) { + .interest-list { + display: grid; + grid-template-columns: 1fr; + gap: 15px; + margin-top: 1rem; + } + + .interest-item { + background: rgba(128, 128, 128, 0.05); + padding: 15px; + border-radius: 12px; + display: flex; + align-items: center; + gap: 15px; + 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; + } + + .i-text { + display: flex; + flex-direction: column; + min-width: 0; + gap: 5px; + } + + /* 添加 min-width: 0 防止溢出 */ + .i-text strong { + font-size: 1.1rem; + color: var(--text-primary); + /* 为兴趣标签添加渐变色彩 */ + background: var(--gradient-1); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; + white-space: nowrap; + } + + .i-text span:not(.i-emoji) { + font-size: 0.9rem; + color: var(--text-tertiary); + /* 为兴趣描述添加渐变色彩 */ + background: var(--gradient-2); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; + white-space: normal; + } +} + .interest-list { display: grid; grid-template-columns: 1fr 1fr; @@ -2682,6 +2893,11 @@ body { -webkit-text-fill-color: transparent; } +/* 移动端社交链接 */ +.mobile-social { + display: none; +} + /* ========================================= 5. Content Sections (Blog/Github) ========================================= */ @@ -3367,8 +3583,10 @@ body { } .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: 88px; z-index: 1100; } -.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.8; } +.mobile-fab { position: fixed; right: 16px; bottom: 88px; 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; } diff --git a/js/about.js b/js/about.js index 2d4ce6c..b5651c1 100644 --- a/js/about.js +++ b/js/about.js @@ -470,8 +470,8 @@ class UIManager { try { Artalk.init({ el: '#artalk-container', - pageKey: '/about', - pageTitle: 'About Me', + pageKey: '/about.html', + pageTitle: '关于我 - Honesty', server: window.SiteConfig.artalk.server, site: window.SiteConfig.artalk.site, darkMode: document.documentElement.getAttribute('data-theme') === 'night' @@ -485,50 +485,7 @@ class UIManager { } } - initBioToggle() { - const el = document.querySelector('.bio-text'); - const btn = document.getElementById('bio-toggle'); - const qEl = document.querySelector('.quote-box p'); - if (!el || !btn) return; - const assess = () => { - el.classList.add('collapsed'); - if (qEl) qEl.classList.add('quote-collapsed'); - const needsToggle = (el.scrollHeight > el.clientHeight) || (qEl && qEl.scrollHeight > qEl.clientHeight) || (window.innerWidth < 480 && ((el.textContent || '').length + (qEl?.textContent?.length || 0)) > 120); - if (needsToggle) { - btn.style.display = 'inline-block'; - } else { - btn.style.display = 'none'; - el.classList.remove('collapsed'); - if (qEl) qEl.classList.remove('quote-collapsed'); - } - }; - assess(); - window.addEventListener('resize', () => assess(), {passive: true}); - btn.addEventListener('click', () => { - el.classList.toggle('collapsed'); - if (qEl) qEl.classList.toggle('quote-collapsed'); - }); - } - initNavInteraction() { - const nav = document.querySelector('.glass-nav'); - if (!nav) return; - const onScroll = () => { - const y = window.scrollY || document.documentElement.scrollTop; - nav.classList.toggle('nav-scrolled', y > 30); - }; - onScroll(); - window.addEventListener('scroll', onScroll, {passive: true}); - } - - initProfileGradient() { - const name = document.querySelector('.hero-name'); - const role = document.querySelector('.hero-role'); - const loc = document.querySelector('.location-tag'); - if (name) name.classList.add('grad-text-1', 'night-glow', 'glow-cycle'); - if (role) role.classList.add('grad-text-2', 'night-glow', 'glow-cycle'); - if (loc) loc.classList.add('grad-text-3', 'night-glow', 'glow-cycle'); - } initTechCloud() { const container = document.getElementById('tech-container'); @@ -662,11 +619,14 @@ class UIManager { const fTheme = document.getElementById('fab-theme'); const fMusic = document.getElementById('fab-music'); if (!main || !menu || !fLang || !fTheme || !fMusic) return; + + // 添加拖拽功能 + this.initDraggableFab(); + const updateLabels = () => { const lang = getStoredLanguage(); const theme = getStoredTheme(); fLang.querySelector('.fab-text').textContent = lang === 'zh' ? 'English' : '中文'; - console.log('updateLabels >>>>>>> ', theme); fTheme.querySelector('.fab-text').textContent = theme === 'night' ? 'Day' : 'Night'; const playing = (this.audio && !this.audio.paused); fMusic.querySelector('.fab-text').textContent = lang === 'zh' ? (playing ? '暂停' : '播放') : (playing ? 'Pause' : 'Play'); @@ -701,6 +661,104 @@ class UIManager { updateLabels(); } + // 初始化可拖拽悬浮按钮 + initDraggableFab() { + const fab = document.querySelector('.mobile-fab'); + if (!fab) return; + + let isDragging = false; + let currentX; + let currentY; + let initialX; + let initialY; + let xOffset = 0; + let yOffset = 0; + let fabWidth = fab.offsetWidth; + let fabHeight = fab.offsetHeight; + let windowWidth = window.innerWidth; + let windowHeight = window.innerHeight; + + // 设置初始位置为距离底部1/3处 + function setInitialPosition() { + windowWidth = window.innerWidth; + windowHeight = window.innerHeight; + fabWidth = fab.offsetWidth; + fabHeight = fab.offsetHeight; + + // 初始位置：右侧16px，距离底部1/3 + const initialYPos = windowHeight - (windowHeight / 3) - fabHeight / 2; + xOffset = windowWidth - 16 - fabWidth; // 距离右边16px + yOffset = initialYPos; + + setTranslate(xOffset, yOffset, fab); + } + + // 页面加载时设置初始位置 + setInitialPosition(); + + // 窗口大小改变时更新位置 + window.addEventListener('resize', setInitialPosition); + + // 触摸开始事件 + fab.addEventListener('touchstart', dragStart, false); + fab.addEventListener('mousedown', dragStart, false); + + // 拖拽移动事件 + document.addEventListener('touchmove', drag, { passive: false }); + document.addEventListener('mousemove', drag); + + // 拖拽结束事件 + document.addEventListener('touchend', dragEnd, false); + document.addEventListener('mouseup', dragEnd, false); + + function dragStart(e) { + if (e.type === 'touchstart') { + initialX = e.touches[0].clientX - xOffset; + initialY = e.touches[0].clientY - yOffset; + } else { + initialX = e.clientX - xOffset; + initialY = e.clientY - yOffset; + } + + if (e.target === fab || fab.contains(e.target)) { + isDragging = true; + } + } + + function drag(e) { + if (isDragging) { + e.preventDefault(); + + if (e.type === 'touchmove') { + currentX = e.touches[0].clientX - initialX; + currentY = e.touches[0].clientY - initialY; + } else { + currentX = e.clientX - initialX; + currentY = e.clientY - initialY; + } + + xOffset = currentX; + yOffset = currentY; + + // 限制在屏幕范围内 + currentX = Math.max(0, Math.min(currentX, windowWidth - fabWidth)); + currentY = Math.max(0, Math.min(currentY, windowHeight - fabHeight)); + + setTranslate(currentX, currentY, fab); + } + } + + function dragEnd() { + initialX = currentX; + initialY = currentY; + isDragging = false; + } + + function setTranslate(xPos, yPos, el) { + el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)'; + } + } + initAudio() { const el = document.getElementById('site-audio'); if (!el) return;