MENU

修改Mirages主题文章布局

• June 3, 2020 • Read: 80 • Note,CSS,Typecho

继上次修改了主题的底部字体大小之后,今天我又把内容布局给整宽一些了,个人感觉这样对阅读体验更佳。

效果直接参考本博客即可。

关键点:修改了自适应中对主要文章内容的最大宽度。同时也把字号和代码的行高整一下,看起来更舒服,把下面的代码写入主题设置的自定义 HTML 元素拓展 - 标签: head 尾部

<style type="text/css" >
    #footer {
        font-size: 0.9rem;
        line-height: 30px;
    }

    .post-content,
    .post-content ul li{
        font-size: 1.2em !important;
    }

    .post-content code {
        font-size: 0.9em !important;
    }

    .comment-content pre code ul {
        font-size: 1.03em !important;
    }

    .post-content pre {
        line-height: 1.97em !important;
    }


    @media screen and (min-width: 768px) and (max-width: 1250px) {
        .container {
            max-width: 740px
        }
    }

    @media screen and (min-width: 1251px) and (max-width: 1599px) {
        .container {
            max-width: 985px;
        }

    }

    @media screen and (min-width: 1600px) and (max-width: 1799px) {
        .container {
            max-width: 1400px
        }
    }

    @media screen and (min-width: 1800px) and (max-width: 1919px) {
        .container {
            max-width: 1500px
        }
    }

    @media screen and (min-width: 1920px) and (max-width: 2399px) {
        .container {
            max-width: 1600px
        }
    }

    @media screen and (min-width: 2400px) {
        .container {
            max-width: 1900px
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1301px) {

        body.serif-fonts .container,
        body.content-lang-en .container {
            max-width: 900px
        }
    }
</style>

本站所有未注明转载的文章均为原创,并采用CC BY-NV-SA 4.0 授权协议,转载请注明来源。

Last Modified: June 5, 2020
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment

已有 1 条评论
  1. wxsa wxsa

    最低仅要0.2元一单,收发货地址匹配全国任意地区,快递代发 快递单号网www.kuaidi5u.com