From 1d9a0bc1148fd6f56624343eb24de3d55d4d438a Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Mon, 6 Oct 2025 16:35:56 -0700 Subject: [PATCH 1/5] Increase list spacing for readability --- sass/_vars.scss | 2 ++ sass/elements/_li.scss | 12 ++++++++++++ sass/site.scss | 1 + 3 files changed, 15 insertions(+) create mode 100644 sass/elements/_li.scss diff --git a/sass/_vars.scss b/sass/_vars.scss index f12282b1a1..f83fd245e9 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -55,6 +55,8 @@ $color-white: #fff; --font-family-sans: "Fira Sans", sans-serif; --font-family-mono: "Fira Mono", monospace; + --list-spacing: 0.625em; + // Neutrals by lightness --color-neutral-11: #1b1b1b; --color-neutral-13: #1e1e22; diff --git a/sass/elements/_li.scss b/sass/elements/_li.scss new file mode 100644 index 0000000000..cfce06d1e3 --- /dev/null +++ b/sass/elements/_li.scss @@ -0,0 +1,12 @@ +li { + margin-bottom: var(--list-spacing); + + > ul,ol { + margin-top: var(--list-spacing); + } +} + +nav li, .page-with-menu__menu li { + + margin: 0px; +} diff --git a/sass/site.scss b/sass/site.scss index e4cd932ae8..c521222490 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -18,6 +18,7 @@ @import "elements/button"; @import "elements/details"; @import "elements/kbd"; +@import "elements/li"; // CSS utility classes @import "utils"; From b741e955aef255de12dbf78c269401c8db0c9527 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Mon, 6 Oct 2025 16:38:48 -0700 Subject: [PATCH 2/5] Decrease content list padding --- sass/pages/_content.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/pages/_content.scss b/sass/pages/_content.scss index e072626473..7aab406f48 100644 --- a/sass/pages/_content.scss +++ b/sass/pages/_content.scss @@ -91,7 +91,7 @@ $content-font-size: 1.22rem; ol, ul { - padding-left: 2.5rem; + padding-left: 1.6rem; } a.button { From 0ce995129916e4b07187156c388ce9de08a128e4 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Mon, 6 Oct 2025 16:55:56 -0700 Subject: [PATCH 3/5] Switch to flexbox based solution --- sass/components/_main-menu.scss | 2 ++ sass/components/_tree-menu.scss | 1 + sass/elements/_li.scss | 12 ------------ sass/elements/_ul_and_ol.scss | 5 +++++ sass/site.scss | 2 +- 5 files changed, 9 insertions(+), 13 deletions(-) delete mode 100644 sass/elements/_li.scss create mode 100644 sass/elements/_ul_and_ol.scss diff --git a/sass/components/_main-menu.scss b/sass/components/_main-menu.scss index e425775fbb..9c5fd784f6 100644 --- a/sass/components/_main-menu.scss +++ b/sass/components/_main-menu.scss @@ -3,6 +3,8 @@ display: flex; margin: 0; padding: 0; + flex-direction: row; + gap: 0; } &__entry { diff --git a/sass/components/_tree-menu.scss b/sass/components/_tree-menu.scss index c9dacbb5da..b3fe3e02e6 100644 --- a/sass/components/_tree-menu.scss +++ b/sass/components/_tree-menu.scss @@ -6,6 +6,7 @@ margin: 0; padding: 0; position: relative; + gap: 0; &__state { display: none; diff --git a/sass/elements/_li.scss b/sass/elements/_li.scss deleted file mode 100644 index cfce06d1e3..0000000000 --- a/sass/elements/_li.scss +++ /dev/null @@ -1,12 +0,0 @@ -li { - margin-bottom: var(--list-spacing); - - > ul,ol { - margin-top: var(--list-spacing); - } -} - -nav li, .page-with-menu__menu li { - - margin: 0px; -} diff --git a/sass/elements/_ul_and_ol.scss b/sass/elements/_ul_and_ol.scss new file mode 100644 index 0000000000..d910dbd883 --- /dev/null +++ b/sass/elements/_ul_and_ol.scss @@ -0,0 +1,5 @@ +ul, ol { + display: flex; + flex-direction: column; + gap: var(--list-spacing); +} diff --git a/sass/site.scss b/sass/site.scss index c521222490..573a04f29b 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -18,7 +18,7 @@ @import "elements/button"; @import "elements/details"; @import "elements/kbd"; -@import "elements/li"; +@import "elements/ul_and_ol"; // CSS utility classes @import "utils"; From cad6d983eebf6031ea26eb1537ee4f9ca518a9be Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Mon, 6 Oct 2025 17:27:36 -0700 Subject: [PATCH 4/5] Remove unnecessary display: flex Its now included in all ul and ols at the element level. --- sass/components/_main-menu.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/sass/components/_main-menu.scss b/sass/components/_main-menu.scss index 9c5fd784f6..2fd0c48b06 100644 --- a/sass/components/_main-menu.scss +++ b/sass/components/_main-menu.scss @@ -1,6 +1,5 @@ .main-menu { &__menu { - display: flex; margin: 0; padding: 0; flex-direction: row; From c806584e352e96724f16bfd790bc32329b74374b Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Mon, 6 Oct 2025 17:42:12 -0700 Subject: [PATCH 5/5] Move the list padding to the element as the sensible default. --- sass/elements/_ul_and_ol.scss | 1 + sass/pages/_content.scss | 5 ----- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/sass/elements/_ul_and_ol.scss b/sass/elements/_ul_and_ol.scss index d910dbd883..6548e415bb 100644 --- a/sass/elements/_ul_and_ol.scss +++ b/sass/elements/_ul_and_ol.scss @@ -2,4 +2,5 @@ ul, ol { display: flex; flex-direction: column; gap: var(--list-spacing); + padding-left: 1.6rem; } diff --git a/sass/pages/_content.scss b/sass/pages/_content.scss index 7aab406f48..770688dc4b 100644 --- a/sass/pages/_content.scss +++ b/sass/pages/_content.scss @@ -89,11 +89,6 @@ $content-font-size: 1.22rem; margin-bottom: 0px; } - ol, - ul { - padding-left: 1.6rem; - } - a.button { color: var(--media-content-button-text-color); }