本次更新修复首页文章卡片缩略图下方露白问题,并使用渐变遮罩增强图片上标题和文章信息的可读性。
评论区同步做第一版论坛化视觉优化,保留现有评论提交、回复、Markdown、邮件提醒和悄悄话逻辑。
修改源码
/* Home post preview image cover fix. */
.article-list-home article.post-preview:has(.post-header-with-thumbnail){padding:0!important;overflow:hidden}
.article-list-home article.post-preview:has(.post-header-with-thumbnail)>.post-header.post-header-with-thumbnail{margin:0!important;min-height:clamp(260px,32vw,390px)}
.article-list-home article.post-preview:has(.post-header-with-thumbnail) .post-thumbnail{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none!important;min-height:0!important}
.article-list-home article.post-preview:has(.post-header-with-thumbnail) .post-header-text-container{inset:0;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.48) 42%,rgba(0,0,0,.08) 100%)}
/* Forum-like comment visual layer. */
#comments.comments-area{overflow:hidden;border:1px solid rgba(31,41,55,.1);border-radius:8px}
#comments .comment-list .comment-body{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;border:1px solid rgba(31,41,55,.1);border-radius:8px}
#comments .children{margin-left:22px;padding-left:18px;border-left:2px solid rgba(47,91,234,.16)}
#post_comment{border-radius:8px;border:1px solid rgba(31,41,55,.1)}
评论测试1
编辑1
评论测试2
111