@mixin m-header {
    .header {
        .nav {
            box-sizing: border-box;
            width: $m-nav-size;
            height: $m-nav-size;
            line-height: $m-nav-size;
            margin-top: ($m-header-height - $m-nav-size) / 2;
            text-align: center;

            &.active {
                .menu {
                    max-height: 500px;

                    &:before {
                        height: 100%;
                    }
                }
            }

            .switch {
                cursor: pointer;
                display: block;
                margin: 0;
                font-size: 30px;
            }

            .menu {
                position: absolute;
                top: $m-header-height;
                right: 0;
                background-color: $header-bg-color;
                padding: 0;
                width: 100%;
                max-height: 0;
                overflow: hidden;

                &:before {
                    transition: all .5s;
                    content: "";
                    position: fixed;
                    width: 100%;
                    height: 0;
                    top: $m-header-height;
                    background: rgba(0,0,0,0.2);
                    left: 0;
                    right: 0;
                    z-index: -1;
                }
            }

            .menu-item {
                float: none;
                line-height: normal;
                border-top: 1px solid #eee;
                margin: 0;

                a {
                    padding: 12px 0;
                    display: block;
                    text-align: center;
                }
            }
        }
    }
}

@media screen and (max-width: $wrapper-width) {
    .content-wrapper {
        width: 100%;
    }

    .scroll-top {
        right: 0;
    }
}

@media screen and (max-width: $comment-dialog-width) {
    .comment-container.fixed {
        .comment-tool {
            bottom: 0;
            width: 100%;
            box-sizing: border-box;
            border-radius: 0;
            margin-left: 0;
            transform: translateX(0);
            margin-top: $m-header-height;
        }
    }
}

@media screen and (max-width: $wrapper-width + $sidebar-width) {
    .sidebar-open {
        .content-wrapper {
            width: 100%;
        }
    }
}

@media screen and (max-width: $m-max-width + $sidebar-width) {
    .sidebar-open {
        @include m-header;
    }
}

@media screen and (max-width: $m-max-width) {
    @include m-header;

    .main {
        padding-top: $m-header-height;
    }

    .sidebar {
        width: 100%;
        left: -100%;

        .sidebar-op {
            position: fixed;
            left: 0;
        }
    }

    .header {
        height: $m-header-height;

        .logo {
            width: $m-header-height * 0.7;
            height: $m-header-height * 0.7;
            margin-top: $m-header-height * 0.15;
        }

        .title {
            display: inline-block;
            margin: 0 0 0 20px;
            font-size: 14px;
            line-height: $m-header-height;
            color: #555;
            float: left;
        }
    }

    .sidebar-open {
        padding-left: 0;

        .header {
            left: 0;
        }
    }

    .post-box {
        .post-tags, .post-vote {
            float: none;
        }

        .post-vote {
            margin-top: 10px;
        }

        .post-header {
            h2{
                font-size: 24px;
            }
        }
    }

    .message {
        width: 80%;
    }

    
    // 评论模块
    .comment-info {
        .comment-list {
            &-child {
                padding-left: 1em;
            }
        }
    }
}