自定义博客样式

/source/_data/styles.styl

update @Sun Aug 18 13:31:05 CST 2024

// Custom styles.
html, body, span, p, h1, h2, h3, h4, h5, h6 {
    // color: #2e405b;
    // color: #222222;
    color: #2f2f2f;
}

body {
    background-color: #f3f5f8;
    // background-color: #fffffe;
    // background-image: url('https://picture.zwc365.com/getbing.jpg');
    // background-repeat: repeat;
    // background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
    font-size: 11pt;
}

.post-toc .nav {
    font-size: 14px;
}

// Artalk评论预览时的表情包样式
.atk-editor-plug-preview img {
    display: inline;
}

// Artalk评论中的表情包样式
.atk-comment>.atk-main>.atk-body img {
    display: inline;
}

footer .powered-by {
    color: #555;
    font-size: 14px;
}

.beian {
    margin: 15px 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

// 取消显示图片的名称
.fancybox .image-caption {
    display: none;
}

.post-block {
    padding: 10px 40px 15px 40px;
}

.posts-expand .post-header {
    margin-bottom: 15px;
}

// 文章元数据（meta）留白更改
.posts-expand .post-meta {
    margin: 15px 0px 10px 0px;
}

.site-description {
    margin: 15px 0 6px 0;
}
.posts-expand .post-title-link::before {
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

.post-description {
    color: #777777;
}

.menu .menu-item a {
    color: #464646;
}

.site-state-item-count {
    color: #464646;
}

.site-state-item-name {
    color: #554a55;
}

.site-nav {
    font-size: 20px;
}

.copyright {
    display: none;
    color: #555;
    font-size: 14px;
}

.back-to-top {
    font-size: 13px;
    color: #000;
    background: rgb(232, 232, 232);
    border: 1px solid #222;
}
.back-to-top.back-to-top-on {
    bottom: 30px;
    left: auto;
    right: 25px;
}

// 分割线的风格 “---”
hr {
    background-image: repeating-linear-gradient(-45deg, #2f3f5b, #2f3f5b 4px, transparent 4px, transparent 7px);
    height: 1.5px;
}

// 在移动设备上隐藏sidebar
+tablet-mobile() {
    .sidebar-toggle, .sidebar {
        display: none;
    }
}

.site-author-name {
    margin-top: 9px;
}

// 网站描述文字的字体颜色和到边缘的距离
.site-description {
    color: #696969;
    margin-top: 15px;
}

// 修改网站头部颜色
.headband {
    height: 1.5px;
    background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
}

// 站点名背景
.brand {
    background-color: rgba(0, 0, 0, 0);
    margin-top: 18px;
    padding: 0px;
}

// 站点名字体
.site-title {
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    letter-spacing: 3px;
}

// 菜单
.menu {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 5px;
}

// 菜单超链接字体大小
.menu .menu-item a {
    font-size: 14px;
}

// 菜单各项边距
.menu .menu-item {
    margin: 5px 15px;
}

// 菜单超链接样式
.menu .menu-item a:hover {
    border-bottom-color: rgba(161, 102, 171, 0);
}

.menu a {
    background-color: rgba(0, 0, 0, 0);
}

// 页面顶部行高
.header {
    line-height: 1.5;
}

// 表格每一行鼠标经过时的颜色
table>tbody>tr {
    &:hover {
        background-color: #eeeeee;
    }
}

// 表格的单元格
table td, table th {
    border-right: 1px solid #DEDDDD;
}

// 文章内链接文本样式
.post-body p a {
    color: #4078f2;
    border-bottom: none;
    border-bottom: 1px solid #4078f2;

    &:hover {
        color: #fc6423;
        border-bottom: none;
        border-bottom: 1px solid #fc6423;
    }
}

// 代码块 styles.
code {
    color: #CD5C5C;
    // background: #f0ffff;
    background: #eeeeee;
    font-weight: 500;
    margin: 4px;
}

blockquote {
    margin: 6px 0;
    color: #2e405b;
    border-left: 2px solid #2f3f5b;
    background-color: #eeeeee;
    margin-bottom: 20px;
}

// 文章标题字体
.posts-expand .post-title {
    color: #555;
    font-size: 24px;
    font-weight: 700;
}

// 文章内标题样式（左边的竖线）
.post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
    border-left: 3px solid #f27c8d;
    margin-left: -40px;
    padding-left: 20px;
    border-bottom: none;
}

// 二级标题(正常显示器分辨率)
// 其实要在左下角和右下角加上一个折角、翻折的效果（一个三角形）
.post-body h2 {
    padding-left: 1.7%;
    position: relative;
}

// 三级标题
.post-body h3 {
    border-bottom: 1px solid #cfd8dc;
    padding-bottom: 0.3em;
    position: relative;
}

.post-body h4 {
    color: #555;
    position: relative;
}

// 二级标题(移动终端分辨率)
@media (min-width: 768px) and (max-width: 991px) {
    .main .post-body h2 {
        margin: 20px -23px 15px -28px;
    }
}

@media (max-width: 767px) {
    .main .post-body h2 {
        margin: 20px -15px 15px -18px;
    }
}

// 文章底部的tags
.posts-expand .post-tags a {
    border-bottom: none;
    margin-right: 0px;
    font-size: 16px;
    padding: 0px 5px;
    border-radius: 3px;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

.posts-expand .post-tags a:hover {
    background: transparent;
}

// // 文章底部页面跳转
.post-nav-item a {
    color: #4078f2;
}

.post-nav-item a:hover {
    color: #fc6423;
    font-weight: bold;
}

.pagination .prev, .pagination .next, .pagination .page-number {
    border: none;
}

.pagination .prev:hover, .pagination .next:hover, .pagination .page-number:hover {
    background: #ccc;
    border-top-color: #fff;
}

.page-archive .posts-collapse .archive-move-on {
    top: 10px;
    opacity: 1;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

.posts-collapse .post-header {
    border-bottom: none;
}

.posts-collapse .collection-title::before {
    opacity: 1;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 1px 1px #bdbdbd;
}

// 标签云页面
.tag-cloud-tags a {
    border-bottom: 2px solid;
    color: #1c1c1c;
}

// 自定义的数字块
span#inline-toc {
    display: inline-block;
    border-radius: 80% 100% 90% 20%;
    background-color: rgb(227, 242, 253);
    color: #555;
    padding: 0.05em 0.4em;
    margin: 2px 5px 2px 0px;
    line-height: 1.5;
}

// 浏览器滚动条
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: #333333;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}