diff --git a/css/about.css b/css/about.css index 15fe7ee..ecedff7 100644 --- a/css/about.css +++ b/css/about.css @@ -2231,6 +2231,18 @@ 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; color: var(--text-primary); @@ -2990,4 +3002,43 @@ body { background-clip: initial !important; -webkit-text-fill-color: initial !important; color: #374151 !important; -} \ No newline at end of file +} +:root { +: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;} } \ No newline at end of file diff --git a/js/about.js b/js/about.js index 8f098d6..3b33a73 100644 --- a/js/about.js +++ b/js/about.js @@ -219,8 +219,8 @@ class DataManager { } init() { - this.fetchGithub(); - this.fetchBlog(); + setTimeout(() => this.fetchGithub(), 0); + setTimeout(() => this.fetchBlog(), 0); } // 优先缓存 -> API -> 默认值 @@ -264,12 +264,24 @@ class DataManager { .slice(0, 12); // 只取前12个 } - // Cache & Render + const slimUser = { + created_at: userData.created_at || (window.SiteConfig?.defaults?.user?.created), + public_repos: userData.public_repos || (window.SiteConfig?.defaults?.user?.repos), + followers: userData.followers || (window.SiteConfig?.defaults?.user?.followers) + }; + const slimRepos = Array.isArray(repoData) ? repoData.map(r => ({ + name: r.name || '', + stargazers_count: (r.stargazers_count !== undefined ? r.stargazers_count : (r.stars || 0)), + forks_count: (r.forks_count !== undefined ? r.forks_count : (r.forks || 0)), + description: r.description || r.desc || '', + html_url: r.html_url || r.url || '#' + })) : []; + localStorage.setItem(cacheKey, JSON.stringify({ - user: userData, repos: repoData, time: now + user: slimUser, repos: slimRepos, time: now })); - this.renderUser(userData); - this.renderRepos(repoData); + this.renderUser(slimUser); + this.renderRepos(slimRepos); } catch (e) { console.warn("GH API Fail", e); @@ -308,7 +320,10 @@ class DataManager {