feat: 调整文章预览卡片 post-meta 对齐方式
- post-preview-layout-2 的 post-meta 改为左对齐 - 与文章详情页的居中样式区分
This commit is contained in:
55
style.css
55
style.css
@@ -4225,9 +4225,11 @@ article.post-preview-layout-2 .post-content {
|
|||||||
}
|
}
|
||||||
|
|
||||||
article.post-preview-layout-2 .post-title {
|
article.post-preview-layout-2 .post-title {
|
||||||
|
|
||||||
max-width: max-content;
|
max-width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
article.post-preview-layout-2 .post-meta {
|
||||||
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
article.post-preview-layout-2 .loading-css-animation {
|
article.post-preview-layout-2 .loading-css-animation {
|
||||||
@@ -11728,19 +11730,9 @@ html.darkmode.amoled-dark #content:after {
|
|||||||
}
|
}
|
||||||
|
|
||||||
html.darkmode #navbar_global .navbar-toggler * {
|
html.darkmode #navbar_global .navbar-toggler * {
|
||||||
|
|
||||||
background: #eee;
|
background: #eee;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html.darkmode .navbar-collapse .navbar-collapse-header {
|
|
||||||
|
|
||||||
/*border-bottom: 1px solid rgba(255,255,255,.1);*/
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*.navbar-brand.navbar-icon {
|
/*.navbar-brand.navbar-icon {
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
@@ -13070,9 +13062,6 @@ html.darkmode .friend-link-card {
|
|||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
html.darkmode .friend-link-card:hover {
|
|
||||||
}
|
|
||||||
|
|
||||||
html.darkmode .friend-link-name {
|
html.darkmode .friend-link-name {
|
||||||
color: var(--font-color);
|
color: var(--font-color);
|
||||||
}
|
}
|
||||||
@@ -13689,18 +13678,12 @@ html.darkmode {
|
|||||||
box-shadow: var(--m3-elevation-1) !important;
|
box-shadow: var(--m3-elevation-1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* M3 文章卡片 */
|
/* M3 文章卡片 */
|
||||||
article.post.card {
|
article.post.card {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
article.post.card:hover {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* M3 按钮样式 */
|
/* M3 按钮样式 */
|
||||||
.btn {
|
.btn {
|
||||||
border-radius: var(--m3-shape-xl) !important;
|
border-radius: var(--m3-shape-xl) !important;
|
||||||
@@ -14053,10 +14036,7 @@ article.post.card:hover {
|
|||||||
transition: all var(--m3-motion-duration-short) var(--m3-motion-standard);
|
transition: all var(--m3-motion-duration-short) var(--m3-motion-standard);
|
||||||
}
|
}
|
||||||
|
|
||||||
.related-post-card:hover {
|
/* M3 代码块 */
|
||||||
}
|
|
||||||
|
|
||||||
/* M3 代码<E4BBA3>?*/
|
|
||||||
article pre:not(.hljs-codeblock) {
|
article pre:not(.hljs-codeblock) {
|
||||||
border-radius: var(--m3-shape-md) !important;
|
border-radius: var(--m3-shape-md) !important;
|
||||||
}
|
}
|
||||||
@@ -14605,13 +14585,7 @@ html.darkmode #leftbar_part2 {
|
|||||||
border-color: var(--themecolor);
|
border-color: var(--themecolor);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 评论区优<EFBFBD>?*/
|
/* 评论项悬浮效果 */
|
||||||
#comments.card,
|
|
||||||
#post_comment.card {
|
|
||||||
/* 使用全局 --color-foreground */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 评论项悬浮效<E6B5AE>?*/
|
|
||||||
.comment-body {
|
.comment-body {
|
||||||
transition: all 0.25s ease;
|
transition: all 0.25s ease;
|
||||||
border-radius: var(--m3-shape-md);
|
border-radius: var(--m3-shape-md);
|
||||||
@@ -14929,13 +14903,6 @@ article.post.card:hover {
|
|||||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
html.darkmode article.post.card:hover {
|
|
||||||
}
|
|
||||||
0 8px 25px rgba(0, 0, 0, 0.3),
|
|
||||||
0 20px 40px rgba(0, 0, 0, 0.2),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 按钮 Apple + Material 3 融合风格 */
|
/* 按钮 Apple + Material 3 融合风格 */
|
||||||
.btn {
|
.btn {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -16265,9 +16232,8 @@ html.darkmode {
|
|||||||
article.post.card {
|
article.post.card {
|
||||||
transition: transform var(--animation-normal) var(--ease-out-expo), box-shadow var(--animation-normal) var(--ease-standard);
|
transition: transform var(--animation-normal) var(--ease-out-expo), box-shadow var(--animation-normal) var(--ease-standard);
|
||||||
}
|
}
|
||||||
article.post.card:hover {
|
|
||||||
}
|
article.post.card .post-thumbnail {
|
||||||
article.post.card .post-thumbnail {
|
|
||||||
transition: transform var(--animation-slow) var(--ease-out-expo);
|
transition: transform var(--animation-slow) var(--ease-out-expo);
|
||||||
}
|
}
|
||||||
article.post.card:hover .post-thumbnail {
|
article.post.card:hover .post-thumbnail {
|
||||||
@@ -16276,8 +16242,6 @@ html.darkmode {
|
|||||||
.card:not(article):not(.no-hover-effect) {
|
.card:not(article):not(.no-hover-effect) {
|
||||||
transition: box-shadow var(--animation-normal) var(--ease-standard);
|
transition: box-shadow var(--animation-normal) var(--ease-standard);
|
||||||
}
|
}
|
||||||
.card:not(article):not(.no-hover-effect):hover {
|
|
||||||
}
|
|
||||||
#leftbar .card, #rightbar .card {
|
#leftbar .card, #rightbar .card {
|
||||||
transition: box-shadow var(--animation-normal) var(--ease-standard), border-color var(--animation-fast) var(--ease-standard);
|
transition: box-shadow var(--animation-normal) var(--ease-standard), border-color var(--animation-fast) var(--ease-standard);
|
||||||
}
|
}
|
||||||
@@ -16298,7 +16262,6 @@ html.darkmode {
|
|||||||
.navbar-nav .nav-link::before { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: currentColor; transition: width var(--animation-normal) var(--ease-out-expo), left var(--animation-normal) var(--ease-out-expo); border-radius: 1px; }
|
.navbar-nav .nav-link::before { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: currentColor; transition: width var(--animation-normal) var(--ease-out-expo), left var(--animation-normal) var(--ease-out-expo); border-radius: 1px; }
|
||||||
.navbar-nav .nav-link:hover::before { width: 100%; left: 0; }
|
.navbar-nav .nav-link:hover::before { width: 100%; left: 0; }
|
||||||
.comment-item { transition: box-shadow var(--animation-normal) var(--ease-standard); }
|
.comment-item { transition: box-shadow var(--animation-normal) var(--ease-standard); }
|
||||||
.comment-item:hover { }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 4. 滚动入场动画 */
|
/* 4. 滚动入场动画 */
|
||||||
@@ -16448,12 +16411,8 @@ article img.loaded, .post-thumbnail img.loaded, article img:not([loading="lazy"]
|
|||||||
|
|
||||||
/* 16. 友链和代码块动画 */
|
/* 16. 友链和代码块动画 */
|
||||||
.friend-link-item { transition: box-shadow var(--animation-normal) var(--ease-standard); }
|
.friend-link-item { transition: box-shadow var(--animation-normal) var(--ease-standard); }
|
||||||
@media (hover: hover) {
|
|
||||||
.friend-link-item:hover { }
|
|
||||||
}
|
|
||||||
.friend-link-avatar { transition: transform var(--animation-normal) var(--ease-spring); }
|
.friend-link-avatar { transition: transform var(--animation-normal) var(--ease-spring); }
|
||||||
.hljs-codeblock { transition: box-shadow var(--animation-normal) var(--ease-standard); }
|
.hljs-codeblock { transition: box-shadow var(--animation-normal) var(--ease-standard); }
|
||||||
@media (hover: hover) { .hljs-codeblock:hover { } }
|
|
||||||
.code-copy-btn { opacity: 0; transition: opacity var(--animation-fast) var(--ease-standard), background var(--animation-fast) var(--ease-standard); }
|
.code-copy-btn { opacity: 0; transition: opacity var(--animation-fast) var(--ease-standard), background var(--animation-fast) var(--ease-standard); }
|
||||||
.hljs-codeblock:hover .code-copy-btn { opacity: 1; }
|
.hljs-codeblock:hover .code-copy-btn { opacity: 1; }
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user