scss WordPress WYSIWYG布局模板

Posted 2021-05-17

// ex. $sp-width: 768px
@import 'param';

.entry-block {
    /**
     * Hyeading
     */
    h2, h3, h4, h5, h6 {
        margin: 1.4em 0 .5em;
        font-weight: bold;
    }
    h2 {
        font-size: 1.8em;
    }
    h3 {
        font-size: 1.6em;
    }
    h4 {
        font-size: 1.4em;
    }
    h5 {
        font-size: 1.2em;
    }

    /**
     * Image
     */
    img {
        vertical-align: top;
        max-width: 100%;

        &.aligncenter {
            display: block;
            margin: 0 auto 1.5em;
        }
        &.alignleft {
            float: left;
            margin: 0 1.5em 1.5em 0;
        }
        &.alignright {
            float: right;
            margin: 0 0 1.5em 1.5em;
        }
    }

    /**
     * Table
     */
    table {
        margin: 1.4em 0;
        th {
            padding: .5em;
            background: #eee;
            border: 1px solid #ccc;
        }
        td {
            padding: .5em;
            border: 1px solid #ccc;
        }
    }

    /**
     * Paragraph
     */
    p {
        margin: 1.4em 0;
    }

    pre {
        margin: 1.4em 0;
        font-family: monospace;
        padding: 5px;
        white-space: pre;
        overflow: auto;
        background: #333;
        color: #fff;
        line-height: 1.2;
    }

    blockquote {
        margin: 1.4em 0;
        border-left: 5px solid #eee;
        padding: 0 0 0 1.4em;
    }

    /**
     * List
     */
    ul, ol, dl {
        margin: 1.4em 0;
        li {
            margin-left: 1.4em;
            list-style: disc outside;
        }
    }
    ol {
        li {
            list-style: decimal outside;
        }
    }
    dl {
        dt {
            font-weight: bold;
        }
        dd {
            padding-left: 2em;
        }
    }
}

/**
 * For SP Layout
 */
@media screen and (max-width: $sp-width) {
    .entry-block {

        img {
            height: auto;
            &.aligncenter,
            &.alignleft,
            &.alignright {
                display: block;
                float: none;
                margin: 0 auto 1.5em;
            }
        }
    }
}