LoveIt/assets/css/_common/_page/post.scss

/** Post **/

.post-warp {
    position: relative;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding-top: 2rem;

    .post-header h1 {
        margin: 0 !important;
    }

    .post-title {
        font-size: 2em;
        line-height: 1.5em;
    }

    .post-meta {
        color: rgba(85, 85, 85, 0.52941) !important;
        .dark-theme & {
            color: $dark-font-secondary-color !important;
        }

        a {
            color: $light-post-link-color;
            .dark-theme & {
                color: $dark-post-link-color;
            }

            &:hover {
                color: $light-post-link-hover-color;
                .dark-theme & {
                    color: $dark-post-link-hover-color;
                }
            }
        }
    }

    .post-content {
        padding-top: 1rem;

        h2,
        h3,
        h4,
        h5,
        h6 {
            padding-top: .8em;
            padding-bottom: .3em;
        }
        h2::before {
            content: "#";
            margin-right: 5px;
            color: $light-post-link-color;
            .dark-theme & {
                color: $dark-post-link-color;
            }
        }

        h3::before {
            content: "|";
            margin-right: 5px;
            color: $light-post-link-color;

            .dark-theme & {
                color: $dark-post-link-color;
            }
        }

        a {
            color: $light-post-link-color;
            .dark-theme & {
                color: $dark-post-link-color;
            }
        }

        a:hover {
            color: $light-post-link-hover-color;
            .dark-theme &:hover {
                color: $dark-post-link-hover-color;
                font-weight: bold;
                text-decoration: underline;
            }
        }

        code,
        pre {
            padding: 7px;
            font-size: 13px;
            font-family: Consolas, Monaco, Menlo, Consolas, monospace;
            word-break: break-all;
            word-wrap: break-word;
        }

        code:not([class]) {
            padding: 5px 5px;
            background: #fff;
            border: 1px solid #ddd;
            box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd;
            margin-left: 3px;
            margin-right: 3px;

            .dark-theme &:not([class]) {
                background: transparent;
                box-shadow: 1px 1px 0 $dark-font-secondary-color, 2px 2px 0 $dark-font-secondary-color;
            }
        }

        ul {
            padding-left: 2em;
        }

        table {
            max-width: 100%;
            margin: 10px 0;
            border-spacing: 0;
            box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.125);

            th,
            td {
                padding: 5px 15px;
                border: 1px double #ebe9f5;
            }
        }

        figure {
            text-align: center;
            img:hover{
                cursor: zoom-in;
            }
        }

        .image-caption:not(:empty) {
            min-width: 20%;
            max-width: 80%;
            display: inline-block;
            padding: 10px;
            margin: 0 auto;
            border-bottom: 1px solid #d9d9d9;
            font-size: 14px;
            color: #969696;
            line-height: 1.7;
        }

        img {
            display: block;
            max-width: 80%;
            height: auto;
            margin: 0 auto;
            overflow: hidden;
        }

        img[data-action="zoom"] {
            cursor: zoom-in;
        }

        .featured_image {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            margin: 0 !important;
        }

        div.code {
          padding: 6px;
          font-size: 14px;
          font-family: Consolas, Monaco, Menlo, Consolas, monospace;
          font-weight:bold;
          word-break: break-all;

          .code-key {
            color: #D371E3;
          }

          .code-cvar {
            color: #ECBF6F;
          }

          .code-var {
            color: #F16473;
          }

          .code-func {
            color: #41B1F5;
          }

          .code-str {
            color: #8BC56F;
          }

          .code-num {
            color: #DB975C;
          }

          .code-comm {
            color: #7E848F;
          }
        }
    }

    p {
        font-size: 1em;
        margin: .5em 0 .5em 0;
    }

    .post-copyright {
        margin-top: 5rem;
        border-top: 1px solid $light-border-color;
        border-bottom: 1px solid $light-border-color;

        .copyright-item {
            margin: 5px 0;
        }

        .dark-theme & {
            border-top: 1px solid $dark-border-color;
            border-bottom: 1px solid $dark-border-color;
        }
    }

    .post-tags {
        padding: 1rem 0 1rem;
        display: flex;
        justify-content: space-between;

    }


    .post-nav {

        &:before,
        &:after {
            content: " ";
            display: table;
        }

        & a.prev,
        & a.next {
            font-weight: 600;
            font-size: 16px;

            transition-property: transform;
            transition-timing-function: ease-out;
            transition-duration: 0.3s;
        }

        & a.prev {
            float: left;
        }

        & a.prev:hover {
            transform: translateX(-4px);
        }

        & a.next {
            float: right;
        }
        & a.next:hover {
            transform: translateX(4px);
        }
    }

    .tag:not(:last-child) a::after {
        content: " / ";
    }

    .post-comment{
        padding: 3em 0;
    }
}