专栏首页MyTechnology修改Mirages主题文章布局

修改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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • mybatis 返回结果只有一条

    开发项目中遇到了一个情况,明明查询结果是好几条的,不过用mybatis测试后只显示了最后一次查询的结果。

    乐心湖
  • 主题hondsome折腾,css修改

    乐心湖
  • CSS3圆角边框和盒子阴影

    效果图矩形的圆角(即第二个图), 就不要用百分比,因为百分比会是表示高度和宽度的一半。 而我们这里矩形就只用高度的一半就好了。精确单位。

    乐心湖
  • 前端开发必会的HTML/CSS硬知识 (二)

    山月
  • Hibernate的关联映射

    首先我们了解一个名词ORM,全称是(Object Relational Mapping),即对象关系映射。ORM的实现思想就是将关系型数据库中表的数据映射成对象...

    nnngu
  • 利用PHP实现404页自动更换图片 附api

    只拿来做404页背景图或许有点太单调了,实际上也可以用来写广告位banner随机图片,单个图标ico随机(效果会太花里胡哨)。甚至文章缩略图也能指定图片随机显示...

    AlexTao
  • jq获取滚动条距离

    最近开学了,也在写新的项目,很多实例都用到了滚动条的距离,判断距离显示指定的内容(主要用于顶部导航的固定)

    十月梦想
  • JVM性能调优-Java内存区域程序计算器

    cwl_java
  • vue 获取跳转上一页组件信息

    项目中有一需求,需要根据不同的页面路径url跳转进行不同的操作,首先需要获得上一页面的url,利用 beforeRouteEnter 这个钩子中的from参数获...

    honey缘木鱼
  • boostrap 里的media的图片为什么会看不见

    img { /* make images responsive */ max-width: 100%; }

    lilugirl

扫码关注云+社区

领取腾讯云代金券