修改Mirages主题文章布局

时间:2022-07-22
本文章向大家介绍修改Mirages主题文章布局,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

关键点:修改了自适应中对主要文章内容的最大宽度。同时也把字号和代码的行高整一下,看起来更舒服,把下面的代码写入主题设置的自定义 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>