博客园CodingLife模板手机样式优化

Posted 2020-09-08 stumpx

博客园CodingLife模板手机样式优化：用博客园写笔记也有一段时间了，当我用手机浏览我的文章时感觉样式不太完美，主要是个人首页和文章详情的头部宽度太大，原本大屏右侧的模块放在文章下面后宽度和位置不太合适，刚好今天看到设置中可以上传自定义样式，于是写了一些样式来优化CodingLife模板，等下次有时间再继续优化，感兴趣的园友可以复制以下样式到你的页面定制CSS代码中，

/*author stumpx*/

#navigator {
    min-width: 1200px;
}

@media (max-width: 768px) {
    #navigator {
        min-width: auto;
    }
    body {
        background-size: auto 197px;
    }
    #blogTitle {
        width: 100%;
        background-size: 800px;
        background-position: 0px 20px;
        height: 197px;
    }
    #blogTitle h1 {
        width: 300px;
        left: 0;
        top: 33px;
    }
    #blogTitle h2 {
        display: none;
    }
    #navList {
        width: 100%;
    }
    #mainContent .day {
        border-left: none;
        border-right: none;
    }
    #mainContent .topicListFooter {
        height: auto;
        line-height: 0;
        font-size: 16px;
        margin: 20px 0;
        padding: 0 20px;
    }
    #sideBar {
        width: 100%;
        margin-left: 0;
    }
    #blog-calendar {
        /*display: none !important;*/
        padding: 10px 15px;
        border: 1px solid #dedede;
        border-left: none;
        border-right: none;
        background-color: white;
    }
    #profile_block,
    #widget_my_zzk,
    #widget_my_google,
    .div_my_zzk {
        border-left: none;
        border-right: none;
    }
    #blog-calendar .CalTitle td,
    #blog-calendar .CalTitle td a {
        text-align: center;
        line-height: 30px;
        background-color: white;
        color: black;
    }
    #sidebar_search_box input[type=text] {
        width: 188px !important;
        width: calc(100% - 115px) !important;
    }
    #sideBar .sidebar-block ul {
        border: none;
    }
    #sideBar .sidebar-block ul li {
        padding: 10px 20px;
    }
    #comment_form_container {
        border-left: none;
        border-right: none;
    }
    div.commentform input.author,
    div.commentform input.email,
    div.commentform input.url {
        width: 244px;
        width: calc(100% - 35px);
    }
    div.commentform textarea.comment_textarea {
        width: 100%;
    }
    #under_post_news {
        width: 100%;
        height: auto;
        padding: 15px 0;
        border-left: none;
        border-right: none;
        margin-top: 20px;
    }
    #cnblogs_c1 {
        padding: 0;
    }
    #cnblogs_c1 a,
    #cnblogs_c1 img,
    #cnblogs_c2 a,
    #cnblogs_c2 img {
        display: block;
        max-width: 100%!important;
        width: 100%!important;
        height: auto!important;
    }
    #under_post_kb {
        border-left: none;
        border-right: none;
    }
    #ad_t2 {
        margin-top: 20px;
        padding: 0 20px;
    }
    .c_ad_block {
        margin-top: 15px;
        padding: 0 15px;
    }
    #commentbox_opt .comment_btn {
        width: 50%;
        border: none;
        display: inline-block;
        line-height: 30px;
        text-align: center;
    }
    #commentbox_opt a {
        width: 45%;
        display: inline-block;
        padding-left: 0;
        text-align: center;
    }
    #comment_nav {
        padding: 5px 20px;
    }
    #green_channel {
        width: 100% !important;
        padding-left: 2px;
    }
    #green_channel a {
        margin-right: 4px;
    }
    #green_channel a:last-child {
        margin-right: 0;
    }
    #div_digg {
        margin-right: 0;
        width: 100%;
    }
    #div_digg .buryit {
        margin-left: 0;
        margin-right: 20px;
    }
    #div_digg .diggit {
        margin-left: 0;
        margin-left: 20px;
    }
    .sidebar-block h3 {
        font-size: 16px;
    }
    #cnblogs_post_body img {
        max-width: 100% !important;
    }
    .day .postTitle {
        font-size: 18px;
        line-height: 31px;
    }
    #topics .postTitle {
        font-size: 20px;
    }
    #myposts {
        margin-left: 0;
    }
    #myposts .myposts_title {
        font-size: 20px !important;
        padding: 0 20px;
    }
    #myposts .pager {
        margin-left: 10px;
    }
    #myposts .PostList {
        border-left: none;
        border-right: none;
    }
    #kb_block {
        padding: 0;
    }
    .c_ad_block a {
        border-bottom: 1px dashed #dedede;
    }
    #mainContent {
        margin-bottom: 20px;
    }
    #myposts .pager:empty {
        height: 0;
    }
    #blogCalendar :not(.CalTitle) a {
        display: block;
        background: #ff5e52;
        color: white;
    }
    #post_next_prev a.p_n_p_prefix {
        display: none;
    }
}


/*author stumpx*/