Improve blockquote styling (.. hopefully :-) )

It is very hard to find a shade of green that works well in all cases
against the white background and as already established blue and purple
cannot work (and some of those would be hard to work with especially
purple unless very dark maybe). Many possibilities were proposed but
they all seem to be a problem so instead of changing the text to green
there is a border on all sides now (forming a box or if you wish a
'block') and the text colour is black. The box / border is dark green.

The text style is still italic but it is unclear if this is wise. On the
one hand quotes are often in italics but with italics in quotes it means
that any quote with italics will not have those italics stand out.

Tested this change in two different forms: a blockquote where there are
blank lines in between the other lines (it's a dialogue) and a back and
forth dialogue broken up between text that is not a blockquote and it
looks good both in macOS Safari and Safari with an iPhone. This test
involves an entry from 1984 (anonymous) that should have been using
quotes instead of code (and now does but will be committed next) and it
does mean that a quick look over the earlier years for code versus
quotes has to be made but that should not take much effort or time.
This commit is contained in:
Cody Boone Ferguson committed 2024-06-28 05:36:36 -07:00
1 parent 9700f7abf5
commit 95db577489
1 file changed
+16 -7
+16 -7
View File
@@ -725,17 +725,21 @@ transition: all .3s ease;
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 4px solid darkgrey;
border-top: 4px solid darkgreen;
border-left: 4px solid darkgreen;
border-bottom: 4px solid darkgreen;
border-right: 4px solid darkgreen;
font-style: italic;
}
/* This rule makes sure that text in <blockquote><p>..</p></blockquote> is
* coloured right. Note that this MUST BE HERE because otherwise the rule
* '.content p' would override it.
* formatted right. Note that this MUST BE HERE because otherwise the rule
* '.content p' could override it, if the formatting is ever changed there.
*
* The following rationale with the blockquote rule above (in particular
* with italics) and the dark green selection, so that this is understood
* better:
* ## Historical remarks
*
* We tried to change the colour and we went with dark green with the
* following rationale:
*
* 0. Purple should NOT be used as this is being used for visited links.
* 1. Blue should NOT be used as this is being used for non-visited links.
@@ -755,9 +759,14 @@ blockquote {
* Conclusions: dark blue seems to be slightly better but unfortunately the
* headings (h1, h2, ...) is too similar so we use dark green with italics
* as the choice.
*
* ... However, it was hard to find a good shade of green that would stand out
* against the white background and other colours did not do so well. Thus,
* the blockquote border was changed from just on the left side to make it into
* a box and went from grey (or actually dark grey) to dark green.
*/
.content blockquote p, blockquote ol li {
color: darkgreen;
color: black;
font-style: italic;
}