From cfbc1d2a2212bb0c01265783360768a150b8dda7 Mon Sep 17 00:00:00 2001 From: Daniel Bachler Date: Fri, 15 Nov 2024 12:19:29 +0100 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20override=20some=20of=20the?= =?UTF-8?q?=20worst=20non-collapsing=20margin=20offenders?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/css/content.scss | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/site/css/content.scss b/site/css/content.scss index cc78dc62e44..774bbed15b0 100644 --- a/site/css/content.scss +++ b/site/css/content.scss @@ -269,3 +269,29 @@ figure[data-explorer-src] { code { white-space: pre-wrap; // make sure long code lines do not overflow } + +/******************************************************************************* + * Grid margin collapse quickfixes + * We should probably consider solving this another way but for now we + * fix the most common cases with these quickfixes. + */ + +.grid .article-block__text + .h2-bold { + margin-top: calc(48px - 16px); +} + +.grid .article-block__list + .h2-bold { + margin-top: calc(48px - 16px); +} + +.grid .article-block__text + .h3-bold { + margin-top: calc(48px - 16px); +} + +.grid .article-block__list + .h3-bold { + margin-top: calc(48px - 16px); +} + +.grid .h3-bold + .article-block__image { + margin-top: 0px; +} From 736ec6b01b29db7f65e7c20a32ebb00fc9072fb8 Mon Sep 17 00:00:00 2001 From: Daniel Bachler Date: Fri, 15 Nov 2024 12:21:36 +0100 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20tidy=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/css/content.scss | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/site/css/content.scss b/site/css/content.scss index 774bbed15b0..398ab7bb90e 100644 --- a/site/css/content.scss +++ b/site/css/content.scss @@ -276,22 +276,17 @@ code { * fix the most common cases with these quickfixes. */ -.grid .article-block__text + .h2-bold { - margin-top: calc(48px - 16px); -} - -.grid .article-block__list + .h2-bold { - margin-top: calc(48px - 16px); -} - -.grid .article-block__text + .h3-bold { - margin-top: calc(48px - 16px); -} - +.grid .article-block__text + .h2-bold, +.grid .article-block__list + .h2-bold, +.grid .article-block__text + .h3-bold, .grid .article-block__list + .h3-bold { + // take the default margin-top of h2/3 and subtract the default margin of the p element above margin-top: calc(48px - 16px); } +// Images directly under headings have enough space with just the +// margin-bottom of the heading. +.grid .h2-bold + .article-block__image, .grid .h3-bold + .article-block__image { margin-top: 0px; }