hexo-theme-mengd/source/css/_partial/post.styl

A clean and lightweight Hexo theme

.article-info {
    display: flex;
    align-items: center;
    margin-bottom: 1.667rem;

    .avatar {
        flex: 0 0 auto;
        margin-right: 1rem !important;
        width: 3.333rem;
        height: 3.333rem;
        border-radius: 50% !important;
    }

    .article-meta {
        min-width: 0;
        flex-grow: 1;
        min-height: 43px;

        .author-name {
            height: 2rem;
            font-size: 1.333rem;
            font-weight: 500;
            color: var(--main-color-text);
            line-height: 2rem;
        }

        .article-meta-list {
            display: flex;
            font-size: 1.167rem;
            color: #8a919f;
            margin-top: 2px;
            line-height: 22px;
        }

        time {
            letter-spacing: 1px;
        }

        .article-meta-item-wrap {
            display: flex;
        }

        .article-meta-item {
            display: flex;
            align-items: center;
            margin-left: 1rem;

            span {
                margin-left: 4px;
            }
        }
    }
}

.article-content {
    word-break: break-word;
    line-height: 1.75;
    font-weight: 400;
    font-size: 16px;
    overflow-x: hidden;
}

.toc-wrap.sidebar-block .sidebar-body {
    max-height: unset;
}

.toc-wrap {
    .toc-list {
        overflow-y: auto;
        max-height: 70vh;

        li {
            list-style: none;
            line-height: 30px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            .toc-child {
                padding-left: 1rem;
            }
        }
    }

    .toc, .toc-list>li {
        padding: 0;
    }
}

.toc-btn {
    --size: 2rem;
    display: none;
    width: var(--size);
    height: var(--size);
    opacity: 0.9;
    padding: 0.2rem;
    position: fixed;
    bottom: var(--size);
    right: var(--size);
    border-radius: 50%;
    background: var(--main-color-bg);
    border: 1px solid var(--main-color-border);

    .toc-btn-icon {
        fill: #ff5724;
        margin-top: calc(((var(--size) - 1.6rem) / 2));
        margin-left: calc(((var(--size) - 1.6rem) / 2));
    }
}

@media (max-width: 500px) {
    .article-info .article-meta .article-meta-list {
        flex-direction: column;
    }

    .article-info .article-meta .article-meta-item:first-child {
        margin: 0;
    }
}

@media (max-width: 1000px) {
    .toc-btn {
        display: block;
    }

    .toc-wrap.sidebar-block {
        display: block;
        z-index: 1;
        width: 0;
        height: 0;
        margin: 0 6rem 0 -6rem;
        position: fixed;
        top: unset;
        right: -4rem;
        bottom: 6rem;

        .toc-title, .sidebar-body {
            opacity: 0;
            visibility: hidden;
        }

        &:focus-within {
            width: auto;
            height: auto;
            border: 1px solid var(--main-color-border);
        }

        &:focus-within .toc-title, &:focus-within .sidebar-body {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.2s ease-in;
        }
    }
}

.article-end {
    .article-meta {
        display: flex;

        .article-categories {
            margin-right: 2.67rem;
        }

        .article-categories, .article-tags {
            display: flex;
            font-size: 1.167rem;
            line-height: 2.286;

            .article-categories-name, .article-tags-name {
                flex-shrink: 0;
                margin-right: 8px;
                font-size: 14px;
            }

            .article-categories-item, .article-tags-item {
                display: flex;
                align-items: center;
                margin-right: 0.667rem;
                padding: 0 1rem;
                border-radius: 4px;
                transition: background-color 0.15s linear;
                background-color: #f2f3f5;
                color: var(--main-color-text);
                border-bottom: unset;
            }
        }
    }

    @import '_partial/copyright';
}

@import '_highlight/code_block';