hexo-theme-nexmoe/source/css/_index/list.styl

🔥 A special hexo theme.

.nexmoe-posts {
    position: relative;

    .nexmoe-post {
        width: 100%;
        margin-bottom: 40px;

        article p:first-child {
            margin-top: 0;
        }

        article p:last-child {
            margin-bottom: 0;
        }
    }

    .nexmoe-post:last-child {
        margin-bottom: $gutter;
    }
}

.nexmoe-post {
    .nexmoe-post-cover {
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 16px;
        min-height: 95px;
        background-color: #eee;
        padding-top: 20%;

        img {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

        h1 {
            position: relative;
            color: #fff;
            font-size: 2.5rem;
            margin-top: 10px;
            width: 100%;
            box-sizing: border-box;
            text-transform: none;
            margin: 0;
            padding: $gutter;
            z-index: 1;
            text-shadow: 0 1px 3px #00000040;
        }

        h1:after {
            background-image: -moz-linear-gradient(to top, rgba(16, 16, 16, 0.35) 25%, rgba(16, 16, 16, 0) 100%);
            background-image: -webkit-linear-gradient(to top, rgba(16, 16, 16, 0.35) 25%, rgba(16, 16, 16, 0) 100%);
            background-image: -ms-linear-gradient(to top, rgba(16, 16, 16, 0.35) 25%, rgba(16, 16, 16, 0) 100%);
            background-image: linear-gradient(to top, rgba(16, 16, 16, 0.35) 25%, rgba(16, 16, 16, 0) 100%);
            -moz-pointer-events: none;
            -webkit-pointer-events: none;
            -ms-pointer-events: none;
            pointer-events: none;
            background-size: cover;
            content: '';
            display: block;
            height: 100%;
            left: 0;
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: -1;
        }
    }

    .nexmoe-post-cover.absolute {
        h1 {
            position: absolute;
            bottom: 0;
            z-index: 1;
        }
    }

    .nexmoe-post-meta {
        margin: 10px 0px;
        font-size: 0;

        div {
            display: inline-block;
        }

        a {
            border-radius: 20px;
            padding: 10px 18px;
            font-size: 14px;
            display: inline-block;
            margin-bottom: 5px;
            margin-right: 10px;
            text-decoration: none;

            .nexmoefont {
                font-size: 14px;
            }
        }

        a:before {
            margin-right: 5px;
        }

        .wechat {
            background-color: rgba(42, 174, 103, 20%);
            color: #2aae67;
        }

        .zhihu {
            background-color: rgba(5, 109, 232, 20%);
            color: #056de8;
        }

        .bilibili {
            background-color: rgba(251, 114, 153, 20%);
            color: #fb7299;
        }

        .sspai {
            background-color: rgba(218, 40, 42, 20%);
            color: #da282a;
        }
    }

    .nexmoe-post-copyright {
        margin: 0 -25px;
        margin-bottom: 25px;
        padding: 25px;
        color: #191919;
        background-color: #fafafa;
        line-height: 1.5em;
        position: relative;
        overflow: hidden;

        a {
            color: var(--color-primary);
        }
    }

    .nexmoe-post-copyright:after {
        position: absolute;
        background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='%234a4a4a' d='M245.8 214.9l-33.2 17.3c-9.4-19.6-25.2-20-27.4-20-22.2 0-33.3 14.6-33.3 43.9 0 23.5 9.2 43.8 33.3 43.8 14.4 0 24.6-7 30.5-21.3l30.6 15.5a73.2 73.2 0 01-65.1 39c-22.6 0-74-10.3-74-77 0-58.7 43-77 72.6-77 30.8-.1 52.7 11.9 66 35.8zm143 0l-32.7 17.3c-9.5-19.8-25.7-20-27.9-20-22.1 0-33.2 14.6-33.2 43.9 0 23.5 9.2 43.8 33.2 43.8 14.5 0 24.7-7 30.5-21.3l31 15.5c-2 3.8-21.3 39-65 39-22.7 0-74-9.9-74-77 0-58.7 43-77 72.6-77C354 179 376 191 389 214.8zM247.7 8C104.7 8 0 123 0 256c0 138.4 113.6 248 247.6 248C377.5 504 496 403 496 256 496 118 389.4 8 247.6 8zm.8 450.8c-112.5 0-203.7-93-203.7-202.8 0-105.5 85.5-203.3 203.8-203.3A201.7 201.7 0 01451.3 256c0 121.7-99.7 202.9-202.9 202.9z'/%3E%3C/svg%3E");
        content: ' ';
        height: 160px;
        width: 160px;
        right: -30px;
        top: -45px;
        opacity: 0.1;
    }
}

.nexmoe-post-footer {
    background-color: #f5f6f5;
    padding: $gutter;
    margin: -($gutter);
    margin-top: 0;
}