博客css

/* 1. 初始隐藏评论相关的所有元素 */
.comment-list,
.comment-respond,
.comments-title,
.navigation.comment-navigation {
display: none;
}

/* 首页字体设备大小 */
@media (max-width: 1024px) {
.wp-block-post-title,
.loop-title {
font-size: 25px !important;
}
.wp-block-post-date,
.wp-block-post-terms {
font-size: 15px !important;
}
}

/* 在整个页眉最下方添加一条完整的 1像素 浅灰色横线 */
.site-header {
border-bottom: 1px solid #e5e5e5 !important;
}

/* 全站所有链接鼠标悬停时显示下划线 */
a:hover {
text-decoration: underline !important;
}

/* 3. 按钮美化：居中并符合博客风格 */
.custom-comment-toggle {
text-align: center;
}

#show-comments-btn {
background-color: #575760; /* 纯黑风格，更高端 */
color: #fff;
padding: 15px 28px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 20px;
font-weight: 600;
transition: 0.2s ease-in-out;
}

#show-comments-btn:hover {
background-color: #bc360a;
transform: translateY(-1px); /* 悬停微动效果 */
}

/* 当屏幕小于 1024px (iPad 尺寸) 时，让图片不再靠左浮动，而是全宽显示 /
@media (max-width: 1024px) {
.post-image-aligned-left .featured-column,
.post-image-aligned-left .post-image {
float: none;
margin: 0 0 20px 0; / 增加图片下方的间距 /
max-width: 100%;
text-align: center; / 图片居中 */
}

.post-image-aligned-left .post-image img {
    width: 100%;
    height: auto;
}

}

/* 还原为文字链接样式 /
a.read-more {
display: inline-block !important; / 确保可见并留在原地 /
background: none !important; / 彻底去掉红色背景 /
border: none !important; / 彻底去掉边框 /
color: #bc360a !important; / 仅保留文字颜色（可改） /
padding: 0 !important; / 去掉按钮的内边距 */

font-size: 19px !important;       /* 缩小字号 */

}

/* 悬停时稍微亮一点，不产生色块 /
a.read-more:hover {
color: #e27f17 !important;
text-decoration: underline !important;
background: none !important;
}
/ 1. 消除摘要文字底部的默认间距 /
.entry-summary p {
margin-bottom: 19px !important; / 数值越小越近，可设为 0 */
}

/* 2. 精准控制阅读更多链接的顶部间距 /
a.read-more {
display: inline-block; / 确保间距设置生效 /
margin-top: 0px !important; / 彻底消除链接上方的间距 */
padding-top: 0px !important;
}

e:last-of-type::after {
display: none;
content: none;
}

.text-wave-separator {
text-align: center; /* 居中显示 /
margin: 30px 0; / 上下留白，拉开正文和下一篇的距离 /
color: #bc360a; / 字符颜色，建议用浅灰色比较高级 /
font-size: 22px; / 调整波浪号的大小 /
letter-spacing: 2px; / 调整字符之间的间距 /
user-select: none; / 防止读者误选字符 */
}

.site .wp-block-image,.wp-block-gallery
{
margin-bottom: 20px;
}

/* — 1. 全局圆角设置 (5px) — /
.page-header, .sidebar .widget, .comments-area, .inside-article, .separate-containers,
.author, .breadcrumbs, img, .wp-block-image, .blue-tip, .yellow-note,
.lwptoc_i {
border-radius: 8px !important;
}
.main-navigation {
/ 顺序为：左上, 右上, 右下, 左下 */
border-radius: 0 0 0px 0px !important;
}
.single .entry-content img,
.single .entry-content .wp-block-image,
.single .entry-content .wp-block-image img,
.single .entry-content .wp-block-gallery img,
.single .entry-content figure,
.single .entry-content figure img {
border-radius: 0 !important;
}

/* 按钮与输入框圆角 */
input[type=”submit”], .button, .wp-block-button__link {
border-radius: 8px !important;
}

/* — 3. 元数据 (Meta) 紧凑流式排版 — */

.entry-meta {
display: block !important; /* 放弃 Flex，回归纯文字流动模式 /
line-height: !important; / 充足行高，换行也好看 */
text-align: left !important;
}

/* 让日期、分类、标签组全部变成“流式文字项目” /
.entry-meta > span {
display: inline !important; / 核心：取消块状特性，让它们紧跟其后 /
margin-right: 12px !important; / 项目间的间距 */
}

/* 找回图标并让它与文字保持微距 */
.entry-meta .gp-icon {
display: inline-flex !important;
vertical-align: middle !important;
margin-right: 5px !important;
}

.entry-meta .gp-icon svg {
width: 1.0em;
height: 1.0em;
fill: currentColor;
position: relative;
top: -1px;
}

/* 只针对文章标题紧随其后的 Meta 信息进行修改 */
header .entry-meta,
header .entry-meta * {
font-size: 15px !important;
}

/* 确保文章底部（footer）的 Meta 保持原样或遵循主题默认设置 */
footer.entry-meta,
footer.entry-meta * {
font-size: inherit;
}

/* 1. 加粗放大分页字体 */
.paging-navigation {
font-size: 25px !important;
font-weight: 600;
border-radius: 5px !important;
}

/* 找回圆形头像：排除全局 5px 圆角的干扰 */
.avatar,
.author-avatar img,
.comment-author img {
border-radius: 50% !important;
}

@media (min-width: 769px) {
/* 1. 开启等高布局，为悬浮提供轨道 */
.site-content {
display: flex !important;
align-items: stretch !important;
}

/* 2. 侧边栏容器设置 */
.inside-right-sidebar {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0 !important;
    padding-bottom: 30px !important;
    box-sizing: border-box !important;
}

/* 3. 精准锁定最后一个小工具悬浮 */
.inside-right-sidebar .widget:last-child {
    position: -webkit-sticky !important;
    position: sticky !important;
    /* 如果有导航栏，建议设为 60px-80px；若无，设为 20px */
    top: 15px !important; 
    z-index: 100 !important;
    margin-bottom: 0 !important;
}

}

/* 融入式面包屑样式 /
.integrated-breadcrumbs {
font-size: 15px; / 字号不用太大，做配角 /
color: #888888; / 灰色文字，不抢眼 /
margin-bottom: 10px; / 关键：给它和下方的文章标题留出 10px 的呼吸空间 */
line-height: 1.5;
}

/* 链接颜色 */
.integrated-breadcrumbs a {
color: #888888;
text-decoration: none;
transition: 0.2s;
}

/* 鼠标悬停 /
.integrated-breadcrumbs a:hover {
color: #bc360a; / 悬停高亮色，可换成你的主题色 /
text-decoration: underline;
}
/ 1. 强制隐藏面包屑里的最后一项（也就是重复的文章标题） */
.integrated-breadcrumbs > span:last-child {
display: none !important;
}

/* 2. 隐藏标题前面那个多余的分隔符 /
/ 注意：因为我们刚才把标题藏了，它前面的斜杠可能还会悬在那里，所以要把它也藏掉 /
.integrated-breadcrumbs > span:nth-last-child(2) {
display: none !important;
}
/ 在面包屑最前面加一个修饰性的前缀 /
.integrated-breadcrumbs:before {
content: “当前位置：”; / 你可以改这里的内容 */
}

/* — 智能时间显示逻辑 — */

/* 1. 默认情况：显示更新时间 (GeneratePress默认是隐藏的，这里我们把它显示出来) */
.posted-on .updated {
display: inline-block;
}

/* 2. 逻辑判断：如果存在更新时间，就隐藏原本的发布时间 /
/ 原理：HTML里更新时间在发布时间前面，如果更新时间显示了，紧接着的发布时间就隐藏 */
.posted-on .updated + .entry-date {
display: none;
}

/* 3. 视觉优化：在时间前面加上“更新于”三个字，让用户和爬虫更清楚 */
.posted-on .updated:before {
content: “更新于 “;
}

/* 4. (可选) 如果没有更新，发布时间前不加字，或者你可以加“发布于” /
/ .posted-on .entry-date:before { content: “发布于 “; } */

.author-box {
border-radius: 5px;
padding: 3%;
padding-bottom: 10px;
margin-top: 30px;
font-size: 0.9em;
background-color: #f7f5e7;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;

}
.author-box .avatar {
width: 200px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
h5.author-title {
margin-bottom: 0.1em;
font-weight: 600;
}
.author-description {
line-height: 1.6em
}
.author-links a {
margin-top: -1.5em;
font-size: 1em;
line-height: 2em;
float: left;
}
@media (max-width: 768px) {
.author-box {
padding: 20px;
padding-bottom: 25px;
margin-top: 60px;
flex-direction: column;
text-align: center;
}
.author-box .avatar {
margin-right: 0;
width: 100%;
margin-top: -25px;
}
.author-box .avatar img {
max-width: 100px;
}
.author-links a {
float: none;
display: flex;
margin-right: auto;
margin-left: 0;
}
.author-description {
margin-bottom: -0.1em;
}
}
/* 在文章列表（首页、归档页、搜索结果页）的文章之间添加浅灰色分割线 /
.blog article:not(:last-child),
.archive article:not(:last-child),
.search-results article:not(:last-child) {
border-bottom: 1px solid #E5E7EB; / 横线的粗细和颜色 /
padding-bottom: 40px; / 横线距离上方文章的距离 /
margin-bottom: 40px; / 横线距离下方文章的距离 */
}

/* 强制将文章标题下的 Meta 链接平时显示为灰色 /
.entry-meta a,
.entry-meta a:visited {
color: #888888 !important; / 你可以根据喜好修改这个灰色代码 */
}

/* 鼠标放上去（悬停）时变成蓝色，给予点击反馈 /
.entry-meta a:hover {
color: #bc360a !important; / 悬停时调回你的品牌蓝色 /
text-decoration: underline; / 悬停时加下划线（可选） */
}

/* 优化搜索结果和归档页面的大标题间距 /
.search-results .page-header,
.archive .page-header {
margin-bottom: 50px; / 增加大标题与第一篇文章标题之间的距离，数值可根据喜好调整 /
padding-bottom: 20px; / 在大标题下方增加一些内边距 /
border-bottom: 2px solid #F3F4F6; / 可选：给大标题下方加一条极淡的装饰线，让结构更清晰 */
}