Plugin Directory: Blockquote styles enhancement

[webdevmattcrom]

Currently, the blockquote styles on the single plugin page are almost invisible. Here's what they are currently:

blockquote {
    background: transparent;
    border: none;
    padding: 0;
    border-left: 2px solid #eee;
    color: #82878c;
    font-style: italic;
    margin: 16px 0;
    margin: 1rem 0;
    padding-left: 16px;
    padding-left: 1rem;
}

I'd like to suggest this instead:

blockquote {
    background: #eee;
    border: none;
    color: #82878c;
    font-style: italic;
    margin: 16px 0;
    margin: 1rem 0;
    padding: 10px 40px;
}

Here's a before image:

Here's an after image:

[ketuchetan]

Hello Guys,

I have added my patch as per the @webdevmattcrom suggestion.

Thanks,

[webdevmattcrom]

Thanks @ketuchetan -- I actually realized I didn't follow the standard padding sizing that the current styles employ. If possible, can you update your patch to this?

blockquote {
    background: #eee;
    border: none;
    color: #82878c;
    font-style: italic;
    margin: 16px 0;
    margin: 1rem 0;
    padding: 10px 40px;
    padding: 0.6em 2.5em;
}

It's just adding that second padding rule.

[ketuchetan]

Hi @webdevmattcrom,

I have updated my patch as per your latest comment.

Thanks,

[joyously]

I don't think blockquote should be italic. Blockquote can have nested HTML, including <em>, which would be indistinguishable. I favor an indent, but not a background color change. After all, blockquote is for quoting an external source, not making something stand out.

[noisysocks]

Attached 2790.3.diff which modifies the source SCSS instead of the compiled CSS.

[noisysocks]

What a blockquote looks like with 2790.3.diff applied

[tellyworth]

In 6166:

Plugin directory theme: better visual separation of blockquote elements. Props @webdevmattcrom and @noisysocks

Uses a different background colour and padding to make blockquotes stand out more.

Fixes #2790

[SergeyBiryukov]

In 6181:

Plugin Directory: Update style.css and style-rtl.css after [6166].

See #2790.