From 95db577489ede4dc5e7d388c9b02b0d8b82dfaf2 Mon Sep 17 00:00:00 2001 From: Cody Boone Ferguson <53008573+xexyl@users.noreply.github.com> Date: Fri, 28 Jun 2024 05:36:36 -0700 Subject: [PATCH] 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. --- ioccc.css | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/ioccc.css b/ioccc.css index e30f122b2..d0800bf91 100644 --- a/ioccc.css +++ b/ioccc.css @@ -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

..

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; }