FR: Fancy Blockquotes

[brimwats]

Here's a fancy blockquote CSS that I drafted—you may want to tweak it more to make it nicer:

/*--Blockquotes--*/

blockquote p {
    display: block;
}

.markdown-preview-view blockquote p::BEFORE {
    content: "”";
    font-family: "Times";
    font-size: 2.5em;
    font-style: normal;
    line-height: 0;
    color: var(--dark0);
    padding-right: 0.15em;
    vertical-align: -0.4em;
}

.markdown-preview-view blockquote {
    background: var(--background-secondary);
    border-radius: 1px;
    border-width: 1px;
    border-color: var(--dark0);
    border-left: 2px solid var(--dark0);
    color: var(--text-muted);
    margin-inline-start: 24px;
    margin-block-start: 2px;
    margin-block-end: 2px;
    margin-bottom: 16px;
    margin-right: 0;
    text-align: left;
    font-family: var(--font-preview);
    font-style: normal;
    font-size: 1rem;
    line-height: 1.375em;
    letter-spacing: 0px;
    position: relative;
}

.markdown-preview-view blockquote.paraphrase {
    border-left: 0px solid transparent;
}

.markdown-preview-view blockquote.paraphrase:after {
    display: none;
}

cite {
    color: var(--text-muted);
    text-align: end;
    display: block;
}

.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
    border-left: 2em solid transparent;
    border-top: .1em solid transparent;
    border-bottom:  1px solid transparent;
    color: var(--text-muted);
    text-align: left;
    font-family: var(--font-preview);
    font-style: italic;
    font-size: .8em;
    line-height: 1.375em;
    position: relative;
    padding: 8px 2px 2px 2px;
    background: transparent;
}

.cm-line:not(.HyperMD-quote) + .HyperMD-quote::before{
    content:            "”";
    font-family:        "Times";
    color:              var(--dark0);
    font-size:          3em;
    font-style:         normal;
    position:           absolute;   
    left:               0;
    top:                .3em;
}

[mulfok]

Ah very good! I like some block quote madness here and there (the TTRPG design scheme has a fun looking one :) ) looking at it, I see that the expected output looks very good with the default theme! I'll do a little tweaky-tweaky to get it to work well with other themes and such too.

Once I've implemented it, I'd be more than happy to credit—do you have a particular site you might like to redirect to?

Thanks again!

[mulfok]

Added to v2.3.0-beta! I've added a first-of-type to the part that adds a curly quote, so now it'll only show up on the first line of the blockquote.