From 0351f30147016e491553f43b5e3d2ed2a1b06ed5 Mon Sep 17 00:00:00 2001 From: PARTH-TUSSLE Date: Tue, 23 Jun 2026 13:15:02 +0530 Subject: [PATCH 1/5] align sidebars with consistent styling Signed-off-by: PARTH-TUSSLE --- assets/scss/_sidebar-tree.scss | 15 +++++++++------ assets/scss/_styles_project.scss | 8 +++++--- assets/scss/_variables_project.scss | 15 +++++++++++++++ 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/assets/scss/_sidebar-tree.scss b/assets/scss/_sidebar-tree.scss index a1e224f67b0..72f476fdf29 100644 --- a/assets/scss/_sidebar-tree.scss +++ b/assets/scss/_sidebar-tree.scss @@ -1,6 +1,7 @@ .td-sidebar-nav { $_max-height: calc(100vh - 8.5rem); + padding: 0; padding-right: 0.5rem; margin-right: -15px; margin-left: -15px; @@ -19,7 +20,7 @@ @include media-breakpoint-up(lg) { // There's no search box so add top padding // and adjust max-height: - padding-top: 1rem; + padding-top: 0; @supports (position: sticky) { max-height: calc(#{$_max-height} + 4.5rem); @@ -119,13 +120,14 @@ @include link-decoration; @include media-breakpoint-up(md) { - padding-top: 4rem; + padding-top: 0; background-color: var(--bs-body-tertiary-bg); - padding-right: 1rem; - border-right: 1px solid var(--bs-border-color); + padding-right: var(--sidebar-padding-horizontal); + padding-left: var(--sidebar-padding-horizontal); + border-right: var(--sidebar-border-width) solid var(--sidebar-border-color); } - padding-bottom: 1rem; + padding-bottom: var(--sidebar-padding-vertical); &__toggle { line-height: 1; @@ -134,7 +136,8 @@ } &__search { - padding: 1rem 0; + padding: 0 0; + padding-bottom: 1rem; } &__inner { diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 5a34ccd09be..679c4b9ad88 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -234,7 +234,7 @@ a:not([href]):not([class]):hover { height: calc(100vh - 5.5rem); top: 5.5rem; overflow-y: auto; - padding-top: 1rem; + padding-top: 0rem; margin-top: 0; overflow-x: hidden; &__inner { @@ -335,18 +335,20 @@ a:not([href]):not([class]):hover { .td-sidebar-toc { margin-top: 0rem; line-height: 1.25rem; - border-left: 1px solid $border-color; + border-left: var(--sidebar-border-width) solid var(--sidebar-border-color); background-image: linear-gradient(to top, #1e2117, #1d1912, #18120e, #0f0a09, #000000); + padding-left: var(--sidebar-padding-horizontal); + padding-right: var(--sidebar-padding-horizontal); @supports (position: sticky) { position: sticky; top: 5.5rem; - padding-top: 1rem; + padding-top: var(--sidebar-padding-vertical); height: calc(100vh - 5.5rem); overflow-y: auto; } diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss index 79a27e5ad7b..95001970845 100644 --- a/assets/scss/_variables_project.scss +++ b/assets/scss/_variables_project.scss @@ -49,6 +49,21 @@ $td-sidebar-border-color: $border-color; // Righthand sidebar with intra-page table of contents $td-sidebar-toc-bg-color: rgba($dark, 0.5); +// Variables for Consistent Sidebar Alignment and Styling +:root { + // Spacing + --sidebar-padding-vertical: 1rem; + --sidebar-padding-horizontal: 1rem; + --sidebar-border-width: 1px; + + // Shared border color (matches original left sidebar border) + --sidebar-border-color: rgba(0, 179, 159, 0.33); + + // Interactions + --sidebar-link-transition: color 0.2s ease, background-color 0.2s ease; + --sidebar-link-hover-bg: rgba(0, 211, 169, 0.1); +} + // Background colors for the sections on home page etc. It is a paint by number // system, starting at 0, where the number is taken from the shortcode's ordinal // if not provided by the user. These colors are all part of the theme palette, From 41ea607b5596e5557f974e5f414c6dac71597282 Mon Sep 17 00:00:00 2001 From: PARTH-TUSSLE Date: Tue, 23 Jun 2026 13:29:00 +0530 Subject: [PATCH 2/5] fix sidebar vertical alignment and unify CSS variables Signed-off-by: PARTH-TUSSLE --- assets/scss/_sidebar-tree.scss | 6 +----- assets/scss/_styles_project.scss | 2 +- assets/scss/_variables_project.scss | 8 -------- 3 files changed, 2 insertions(+), 14 deletions(-) diff --git a/assets/scss/_sidebar-tree.scss b/assets/scss/_sidebar-tree.scss index 72f476fdf29..56e3cd32abd 100644 --- a/assets/scss/_sidebar-tree.scss +++ b/assets/scss/_sidebar-tree.scss @@ -18,8 +18,6 @@ // box is displayed regardless of the value of sidebar_search_disable: &.td-sidebar-nav--search-disabled { @include media-breakpoint-up(lg) { - // There's no search box so add top padding - // and adjust max-height: padding-top: 0; @supports (position: sticky) { @@ -120,7 +118,6 @@ @include link-decoration; @include media-breakpoint-up(md) { - padding-top: 0; background-color: var(--bs-body-tertiary-bg); padding-right: var(--sidebar-padding-horizontal); padding-left: var(--sidebar-padding-horizontal); @@ -136,8 +133,7 @@ } &__search { - padding: 0 0; - padding-bottom: 1rem; + padding: 0 0 1rem; } &__inner { diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 679c4b9ad88..67a8f037958 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -234,7 +234,7 @@ a:not([href]):not([class]):hover { height: calc(100vh - 5.5rem); top: 5.5rem; overflow-y: auto; - padding-top: 0rem; + padding-top: 0; margin-top: 0; overflow-x: hidden; &__inner { diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss index 95001970845..d79545915ab 100644 --- a/assets/scss/_variables_project.scss +++ b/assets/scss/_variables_project.scss @@ -49,19 +49,11 @@ $td-sidebar-border-color: $border-color; // Righthand sidebar with intra-page table of contents $td-sidebar-toc-bg-color: rgba($dark, 0.5); -// Variables for Consistent Sidebar Alignment and Styling :root { - // Spacing --sidebar-padding-vertical: 1rem; --sidebar-padding-horizontal: 1rem; --sidebar-border-width: 1px; - - // Shared border color (matches original left sidebar border) --sidebar-border-color: rgba(0, 179, 159, 0.33); - - // Interactions - --sidebar-link-transition: color 0.2s ease, background-color 0.2s ease; - --sidebar-link-hover-bg: rgba(0, 211, 169, 0.1); } // Background colors for the sections on home page etc. It is a paint by number From 42b438271f78edda1db76a1a82dcbca5076cc49c Mon Sep 17 00:00:00 2001 From: PARTH-TUSSLE Date: Thu, 25 Jun 2026 16:55:40 +0530 Subject: [PATCH 3/5] refactor sidebar padding and remove extra code Signed-off-by: PARTH-TUSSLE --- assets/scss/_sidebar-tree.scss | 15 ++++++++------- assets/scss/_styles_project.scss | 20 ++++++++++++++------ assets/scss/_variables_project.scss | 8 ++------ 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/assets/scss/_sidebar-tree.scss b/assets/scss/_sidebar-tree.scss index 56e3cd32abd..a1e224f67b0 100644 --- a/assets/scss/_sidebar-tree.scss +++ b/assets/scss/_sidebar-tree.scss @@ -1,7 +1,6 @@ .td-sidebar-nav { $_max-height: calc(100vh - 8.5rem); - padding: 0; padding-right: 0.5rem; margin-right: -15px; margin-left: -15px; @@ -18,7 +17,9 @@ // box is displayed regardless of the value of sidebar_search_disable: &.td-sidebar-nav--search-disabled { @include media-breakpoint-up(lg) { - padding-top: 0; + // There's no search box so add top padding + // and adjust max-height: + padding-top: 1rem; @supports (position: sticky) { max-height: calc(#{$_max-height} + 4.5rem); @@ -118,13 +119,13 @@ @include link-decoration; @include media-breakpoint-up(md) { + padding-top: 4rem; background-color: var(--bs-body-tertiary-bg); - padding-right: var(--sidebar-padding-horizontal); - padding-left: var(--sidebar-padding-horizontal); - border-right: var(--sidebar-border-width) solid var(--sidebar-border-color); + padding-right: 1rem; + border-right: 1px solid var(--bs-border-color); } - padding-bottom: var(--sidebar-padding-vertical); + padding-bottom: 1rem; &__toggle { line-height: 1; @@ -133,7 +134,7 @@ } &__search { - padding: 0 0 1rem; + padding: 1rem 0; } &__inner { diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index d2dc9a35ce0..786cc825252 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -234,7 +234,9 @@ a:not([href]):not([class]):hover { height: calc(100vh - 5.5rem); top: 5.5rem; overflow-y: auto; - padding-top: 0; + @include media-breakpoint-up(md) { + padding-top: $sidebar-padding-vertical; + } margin-top: 0; overflow-x: hidden; &__inner { @@ -265,7 +267,13 @@ a:not([href]):not([class]):hover { .td-sidebar-nav { max-height: none; overflow: visible; - padding: 0px; + padding: 0; + + &.td-sidebar-nav--search-disabled { + @include media-breakpoint-up(lg) { + padding-top: 0; + } + } &__section-title { a { @@ -335,20 +343,20 @@ a:not([href]):not([class]):hover { .td-sidebar-toc { margin-top: 0rem; line-height: 1.25rem; - border-left: var(--sidebar-border-width) solid var(--sidebar-border-color); + border-left: 1px solid $border-color; background-image: linear-gradient(to top, #1e2117, #1d1912, #18120e, #0f0a09, #000000); - padding-left: var(--sidebar-padding-horizontal); - padding-right: var(--sidebar-padding-horizontal); + padding-left: $sidebar-padding-horizontal; + padding-right: $sidebar-padding-horizontal; @supports (position: sticky) { position: sticky; top: 5.5rem; - padding-top: var(--sidebar-padding-vertical); + padding-top: $sidebar-padding-vertical; height: calc(100vh - 5.5rem); overflow-y: auto; } diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss index d79545915ab..3d20aa8f6e4 100644 --- a/assets/scss/_variables_project.scss +++ b/assets/scss/_variables_project.scss @@ -49,12 +49,8 @@ $td-sidebar-border-color: $border-color; // Righthand sidebar with intra-page table of contents $td-sidebar-toc-bg-color: rgba($dark, 0.5); -:root { - --sidebar-padding-vertical: 1rem; - --sidebar-padding-horizontal: 1rem; - --sidebar-border-width: 1px; - --sidebar-border-color: rgba(0, 179, 159, 0.33); -} +$sidebar-padding-vertical: 1rem; +$sidebar-padding-horizontal: 1rem; // Background colors for the sections on home page etc. It is a paint by number // system, starting at 0, where the number is taken from the shortcode's ordinal From 6d0c942012e3d8126b792726203a64f1bb4fad19 Mon Sep 17 00:00:00 2001 From: Parth Gartan Date: Thu, 25 Jun 2026 20:53:15 +0530 Subject: [PATCH 4/5] Update assets/scss/_styles_project.scss Co-authored-by: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com> Signed-off-by: Parth Gartan --- assets/scss/_styles_project.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 786cc825252..7068a9e9c74 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -289,7 +289,7 @@ a:not([href]):not([class]):hover { } &__section { - margin-top: 1rem; + margin-top: 0.5rem; font-family: "Qanelas Soft", sans-serif, From 4a37d8cf3319dee9995b54d7df1c071795c97942 Mon Sep 17 00:00:00 2001 From: PARTH-TUSSLE Date: Thu, 25 Jun 2026 21:11:35 +0530 Subject: [PATCH 5/5] remove media query Signed-off-by: PARTH-TUSSLE --- assets/scss/_styles_project.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 7068a9e9c74..d6e1b76c3b6 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -234,9 +234,7 @@ a:not([href]):not([class]):hover { height: calc(100vh - 5.5rem); top: 5.5rem; overflow-y: auto; - @include media-breakpoint-up(md) { - padding-top: $sidebar-padding-vertical; - } + padding-top: $sidebar-padding-vertical; margin-top: 0; overflow-x: hidden; &__inner {