blog/src/components/atoms/PostContent.module.scss

@import 'variables';
@import 'mixins';

.content {
    h1,
    h2 {
        @include heading-band();
    }

    h1 {
        font-size: $font-size-h2;
    }

    h2 {
        font-size: $font-size-h3;
    }

    h3 {
        font-size: $font-size-h4;
    }

    h4 {
        font-size: $font-size-h5;
    }

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

    .gatsby-resp-image-figure,
    .gatsby-resp-image-wrapper {
        margin-bottom: $spacer;
    }

    figcaption {
        font-size: $font-size-small;
        color: $brand-grey;
        font-style: italic;
        text-align: center;
        margin-top: -$spacer / 2;
    }

    .anchor {
        margin-top: $spacer / 3;
    }

    // Quotes
    /////////////////////////////////////

    q {
        font-style: italic;
    }

    cite {
        font-style: normal;
        text-transform: uppercase;
    }

    // stylelint-disable no-descending-specificity
    blockquote,
    blockquote > p {
        font-style: italic;
        color: $brand-grey;
    }
    // stylelint-enable no-descending-specificity

    blockquote {
        margin: 0 0 $spacer;
        position: relative;
        padding-left: $spacer * 1.5;

        // quotation marks
        &::before {
            content: '“';
            font-size: 300%;
            color: lighten($brand-grey-light, 20%);
            position: absolute;
            left: -10px;
            top: -20px;

            @media (min-width: $screen-xs) {
                left: 0;
            }

            @media (min-width: $screen-lg) {
                top: -30px;
            }
        }
    }
}