From b6623e935b3fecd3145151a9e5f395c54e1e94c4 Mon Sep 17 00:00:00 2001 From: David Oliver Date: Fri, 24 Oct 2025 22:50:30 +0200 Subject: [PATCH 1/8] Better differentiate headings/sections in top/extra content --- assets/css/content/general.css | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/assets/css/content/general.css b/assets/css/content/general.css index e7083205d..b736fc4d9 100644 --- a/assets/css/content/general.css +++ b/assets/css/content/general.css @@ -90,6 +90,34 @@ margin: 1em 0 0.5em; } +:is(.page-module, .page-extra) .content-inner #top-content { + & > h2.section-heading { + font-size: 1.75rem; + padding-top: 0; + margin-top: 1.75em; + } + + & > h3.section-heading { + font-size: 1.45rem; + margin-top: 1.5em; + margin-bottom: 0.5em; + } + + & > :is(h4, h5, h6) { + font-size: 1.15rem; + margin-top: 1.25em; + margin-bottom: 0.5em; + } + + & > :is(h5, h6) { + font-weight: normal; + } + + & > h6 { + font-size: 1rem; + } +} + .content-inner li + li { margin-top: 0.25em; } From 980cb7b48c690930622bec6825627be3314569cf Mon Sep 17 00:00:00 2001 From: David Oliver Date: Mon, 27 Oct 2025 20:51:12 +0100 Subject: [PATCH 2/8] Improve Replace h2 padding-top with margin-top: avoids too-large spaces above. Additionally target page-task content. Add explanatory note. --- assets/css/content/general.css | 53 ++++++++++++++++++++-------------- 1 file changed, 31 insertions(+), 22 deletions(-) diff --git a/assets/css/content/general.css b/assets/css/content/general.css index b736fc4d9..2c5ccdb5d 100644 --- a/assets/css/content/general.css +++ b/assets/css/content/general.css @@ -81,7 +81,7 @@ .content-inner h2 { font-size: 1.6em; - padding-top: 1em; + margin-top: 1em; margin-bottom: 0.5em; } @@ -90,31 +90,40 @@ margin: 1em 0 0.5em; } -:is(.page-module, .page-extra) .content-inner #top-content { - & > h2.section-heading { - font-size: 1.75rem; - padding-top: 0; - margin-top: 1.75em; - } +/* Apply more generous sizes and spacing to main/"top content" headings in order +to differentiate between levels. +Note: headings in various contexts, such as the module "Summary" section and +cheatsheets, currently depend on previously-declared sizes and spacing. Here, +we intend to target only headings of author content. At some point, we should +probably make all heading styles more concrete/less dependent on the cascade +so that more straightforward control is possible. */ - & > h3.section-heading { - font-size: 1.45rem; - margin-top: 1.5em; - margin-bottom: 0.5em; - } +:is(.page-module, .page-task, .page-extra) { + :is(#top-content, #moduledoc) { + & > h2.section-heading { + font-size: 1.75rem; + margin-top: 1.75em; + } - & > :is(h4, h5, h6) { - font-size: 1.15rem; - margin-top: 1.25em; - margin-bottom: 0.5em; - } + & > h3.section-heading { + font-size: 1.45rem; + margin-top: 1.5em; + margin-bottom: 0.5em; + } - & > :is(h5, h6) { - font-weight: normal; - } + & > :is(h4, h5, h6) { + font-size: 1.15rem; + margin-top: 1.25em; + margin-bottom: 0.5em; + } - & > h6 { - font-size: 1rem; + & > :is(h5, h6) { + font-weight: normal; + } + + & > h6 { + font-size: 1rem; + } } } From 0020833f1f44fd6e032cfb40592bcad9289a413e Mon Sep 17 00:00:00 2001 From: David Oliver Date: Tue, 28 Oct 2025 15:29:55 +0100 Subject: [PATCH 3/8] Avoid confusing tools with implicit & in CSS --- assets/css/content/general.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/content/general.css b/assets/css/content/general.css index 2c5ccdb5d..f9aaf72ff 100644 --- a/assets/css/content/general.css +++ b/assets/css/content/general.css @@ -99,7 +99,7 @@ probably make all heading styles more concrete/less dependent on the cascade so that more straightforward control is possible. */ :is(.page-module, .page-task, .page-extra) { - :is(#top-content, #moduledoc) { + & :is(#top-content, #moduledoc) { & > h2.section-heading { font-size: 1.75rem; margin-top: 1.75em; From 92f15b477f916df71a6600293dbfae201a0cd013 Mon Sep 17 00:00:00 2001 From: David Oliver Date: Tue, 28 Oct 2025 15:48:15 +0100 Subject: [PATCH 4/8] Switch to treating cheatsheet and admonition headings as the special cases --- assets/css/content/cheatsheet.css | 3 ++ assets/css/content/general.css | 89 ++++++++++++++----------------- assets/css/tooltips.css | 1 + 3 files changed, 43 insertions(+), 50 deletions(-) diff --git a/assets/css/content/cheatsheet.css b/assets/css/content/cheatsheet.css index e27d94d8d..d5cd67c5c 100644 --- a/assets/css/content/cheatsheet.css +++ b/assets/css/content/cheatsheet.css @@ -23,6 +23,7 @@ /* h2 */ .page-cheatmd .content-inner h2 { + font-size: 1.6rem; margin: var(--vertical-space) 0; column-span: all; color: var(--gray700); @@ -36,6 +37,7 @@ /* h3 */ .page-cheatmd .content-inner h3 { + font-size: 1.375rem; margin: 0 0 1em; font-weight: 400; } @@ -66,6 +68,7 @@ /* h4 */ .page-cheatmd .content-inner h4 { + font-size: 1rem; display: block; margin: 0; padding: 0.25em var(--horizontal-space); diff --git a/assets/css/content/general.css b/assets/css/content/general.css index f9aaf72ff..926b79032 100644 --- a/assets/css/content/general.css +++ b/assets/css/content/general.css @@ -62,15 +62,6 @@ color: var(--textHeaders); } -.content-inner h1 { - font-size: 2em; - margin: 0.5em 0; -} - -.content-inner h1.section-heading { - margin: 1.5em 0 0.5em; -} - .content-inner div.group-description { margin: 0 0 3em; } @@ -79,51 +70,37 @@ font-weight: 400; } -.content-inner h2 { - font-size: 1.6em; - margin-top: 1em; - margin-bottom: 0.5em; -} - -.content-inner h3 { - font-size: 1.375em; - margin: 1em 0 0.5em; -} - -/* Apply more generous sizes and spacing to main/"top content" headings in order -to differentiate between levels. -Note: headings in various contexts, such as the module "Summary" section and -cheatsheets, currently depend on previously-declared sizes and spacing. Here, -we intend to target only headings of author content. At some point, we should -probably make all heading styles more concrete/less dependent on the cascade -so that more straightforward control is possible. */ +.content-inner { + & h1 { + font-size: 2rem; + margin-top: 1.75em; + } -:is(.page-module, .page-task, .page-extra) { - & :is(#top-content, #moduledoc) { - & > h2.section-heading { - font-size: 1.75rem; - margin-top: 1.75em; - } + & h2, + & .summary h1 { + font-size: 1.75rem; + margin-top: 1.5em; + } - & > h3.section-heading { - font-size: 1.45rem; - margin-top: 1.5em; - margin-bottom: 0.5em; - } + & h3, + & .summary h2 { + font-size: 1.45rem; + margin-top: 1.5em; + margin-bottom: 0.5em; + } - & > :is(h4, h5, h6) { - font-size: 1.15rem; - margin-top: 1.25em; - margin-bottom: 0.5em; - } + & :is(h4, h5, h6) { + font-size: 1.15rem; + margin-top: 1.25em; + margin-bottom: 0.5em; + } - & > :is(h5, h6) { - font-weight: normal; - } + & :is(h5, h6) { + font-weight: normal; + } - & > h6 { - font-size: 1rem; - } + & h6 { + font-size: 1rem; } } @@ -177,6 +154,18 @@ so that more straightforward control is possible. */ overflow: auto; border-radius: var(--borderRadius-base); + & :is(h1, h2, h3, h4, h5, h6) { + margin: 1.25rem 0; + } + + & :is(h1, h2, h3) { + font-size: 1.375rem; + } + + & :is(h4, h5, h6) { + font-size: 1rem; + } + & :is(code, pre code) { background-color: var(--admCodeBackground); border: 1px solid var(--admCodeBorder); @@ -188,7 +177,7 @@ so that more straightforward control is possible. */ } & :is(h1, h2, h3, h4, h5, h6):first-child { - padding-bottom: 1em; + padding-bottom: 1rem; border-bottom: 2px solid hsl(from currentColor h s l / 15%); } diff --git a/assets/css/tooltips.css b/assets/css/tooltips.css index c5fa721a0..d2342b8c2 100644 --- a/assets/css/tooltips.css +++ b/assets/css/tooltips.css @@ -37,6 +37,7 @@ as it has absolute positioning, so doesn't impact the layout and click events pa min-width: 320px; width: 100%; line-height: 1em; + margin: .75em 0; } .tooltip .tooltip-body .detail-header { From 760e79b6332c3384ca63d9e25fa3fdcbae8f05bc Mon Sep 17 00:00:00 2001 From: David Oliver Date: Tue, 28 Oct 2025 17:20:06 +0100 Subject: [PATCH 5/8] Add Module details list h1s to those presented with h2 styles --- assets/css/content/general.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/css/content/general.css b/assets/css/content/general.css index 926b79032..9d3680481 100644 --- a/assets/css/content/general.css +++ b/assets/css/content/general.css @@ -77,7 +77,8 @@ } & h2, - & .summary h1 { + & #summary h1, + .details-list h1 { font-size: 1.75rem; margin-top: 1.5em; } From 06bb36112f1c73ef95477bf40888727c2559ce6b Mon Sep 17 00:00:00 2001 From: David Oliver Date: Tue, 28 Oct 2025 17:21:59 +0100 Subject: [PATCH 6/8] Fix on-page signature margin --- assets/css/content/functions.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/css/content/functions.css b/assets/css/content/functions.css index c5c00d3e5..218599870 100644 --- a/assets/css/content/functions.css +++ b/assets/css/content/functions.css @@ -30,6 +30,7 @@ font-size: 13px; font-weight: 700; line-height: 2em; + margin: 0; } .content-inner .detail-header:hover a.detail-link, From e173957cf1fb7f9c867c5a8d513c41ce1124e547 Mon Sep 17 00:00:00 2001 From: David Oliver Date: Wed, 29 Oct 2025 16:49:43 +0100 Subject: [PATCH 7/8] Add explicit & --- assets/css/content/general.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/content/general.css b/assets/css/content/general.css index 9d3680481..964722cb0 100644 --- a/assets/css/content/general.css +++ b/assets/css/content/general.css @@ -78,7 +78,7 @@ & h2, & #summary h1, - .details-list h1 { + & .details-list h1 { font-size: 1.75rem; margin-top: 1.5em; } From a1a9363767ffcde6ca34ad5b8f25dd965bf917f8 Mon Sep 17 00:00:00 2001 From: David Oliver Date: Wed, 29 Oct 2025 17:03:35 +0100 Subject: [PATCH 8/8] More accurately target sections that require alt hx styling --- assets/css/_html.css | 2 +- assets/css/content/functions.css | 8 +++++--- assets/css/content/general.css | 10 +++++++--- assets/css/tooltips.css | 5 +++-- 4 files changed, 16 insertions(+), 9 deletions(-) diff --git a/assets/css/_html.css b/assets/css/_html.css index 34dd11f2d..4fa3a53f0 100644 --- a/assets/css/_html.css +++ b/assets/css/_html.css @@ -25,7 +25,7 @@ @import "keyboard-shortcuts.css"; @import "quick-switch.css"; @import "autocomplete.css"; -@import "tooltips.css"; +@import "tooltips.css"; /* must remain below functions */ @import "copy-button.css"; @import "settings.css"; @import "toast.css"; diff --git a/assets/css/content/functions.css b/assets/css/content/functions.css index 218599870..152398614 100644 --- a/assets/css/content/functions.css +++ b/assets/css/content/functions.css @@ -25,12 +25,14 @@ position: relative; } +/* !important used in order to beat main heading styles (which use #id selectors), +in both HTML and ePub. */ .content-inner .detail-header .signature { font-family: var(--monoFontFamily); - font-size: 13px; font-weight: 700; - line-height: 2em; - margin: 0; + font-size: 13px !important; + line-height: 2em !important; + margin: 0 !important; } .content-inner .detail-header:hover a.detail-link, diff --git a/assets/css/content/general.css b/assets/css/content/general.css index 964722cb0..99d9431c6 100644 --- a/assets/css/content/general.css +++ b/assets/css/content/general.css @@ -70,6 +70,10 @@ font-weight: 400; } +/* Headings +Summary, Callbacks and Functions sections output h1 and h2, +which we style as h2 and h3. */ + .content-inner { & h1 { font-size: 2rem; @@ -77,14 +81,14 @@ } & h2, - & #summary h1, - & .details-list h1 { + & :is(#summary, #callbacks, #functions) h1 { font-size: 1.75rem; margin-top: 1.5em; + margin-bottom: 0.5em; } & h3, - & .summary h2 { + & :is(#summary, #callbacks, #functions) h2 { font-size: 1.45rem; margin-top: 1.5em; margin-bottom: 0.5em; diff --git a/assets/css/tooltips.css b/assets/css/tooltips.css index d2342b8c2..355d975a0 100644 --- a/assets/css/tooltips.css +++ b/assets/css/tooltips.css @@ -33,11 +33,12 @@ as it has absolute positioning, so doesn't impact the layout and click events pa overflow: auto; } +/* !important used in order to beat main heading and functions signature styles. */ .tooltip .tooltip-body .signature { min-width: 320px; width: 100%; - line-height: 1em; - margin: .75em 0; + line-height: 1em !important; + margin: .75em 0 !important; } .tooltip .tooltip-body .detail-header {