diff --git a/css/about.css b/css/about.css index c73a030..ad3530e 100644 --- a/css/about.css +++ b/css/about.css @@ -1476,23 +1476,33 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info margin-bottom: 1.5rem; line-height: 1.6; font-weight: 500; -} - -/* 项目描述折叠样式 */ -.project-description.collapsible { position: relative; - max-height: 100px; - overflow: hidden; } -.project-description.collapsible::after { +.project-description.collapsible { + max-height: 80px; + overflow: hidden; + position: relative; +} + +.theme-day .project-description.collapsible::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; - height: 40px; - background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, var(--glass-alpha))); + height: 30px; + background: linear-gradient(to bottom, transparent, rgba(248, 249, 250, 0.8)); +} + +.theme-night .project-description.collapsible::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 30px; + background: linear-gradient(to bottom, transparent, rgba(30, 30, 30, 0.8)); } .project-description.expanded { @@ -1503,28 +1513,28 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info display: none; } -.project-description.collapsible { - position: relative; -} - .toggle-description { - background: rgba(255, 255, 255, 0.1); color: var(--text-strong); + background: none; border: none; - padding: 0.5rem 1rem; - border-radius: 20px; cursor: pointer; font-size: 0.9rem; - margin-top: 1rem; - transition: all 0.3s ease; + margin-left: 5px; + vertical-align: baseline; + text-decoration: underline; + padding: 0; + display: inline-flex; + align-items: center; + gap: 3px; } .toggle-description:hover { - background: rgba(255, 255, 255, 0.2); + opacity: 0.8; } -.project-description.collapsible + .toggle-description { - display: inline-block; +.arrow { + font-size: 0.8em; + margin-left: 2px; } .project-stats { diff --git a/js/about.js b/js/about.js index 8bb56bb..68447d7 100644 --- a/js/about.js +++ b/js/about.js @@ -227,7 +227,6 @@ function displayProjects(repos) { var description = repo.description || '暂无描述'; var isLongDescription = description.length > 100; var displayDescription = isLongDescription ? description.substring(0, 100) + '...' : description; - var descriptionClass = isLongDescription ? 'project-description collapsible' : 'project-description'; var starSvg = ''; var forkSvg = ''; @@ -235,8 +234,8 @@ function displayProjects(repos) { '
' + displayDescription + '
' + - (isLongDescription ? '' : '') + + '' + displayDescription + + (isLongDescription ? '' : '') + '
' + '