From 1f2050d2a63097fca9686280bf3dec0490d0a782 Mon Sep 17 00:00:00 2001 From: Toon Claes Date: Fri, 15 Aug 2025 14:01:59 +0200 Subject: [PATCH 1/4] sidebar: + {{ partial "translations.html" . }} + {{ else if (and (ne $section "documentation") (ne $section "site")) }} +
+ {{ partial "book.html" }} + {{ end }} From 5f368d50cdbcc01c4c960bc7cf5c17a0fd35503f Mon Sep 17 00:00:00 2001 From: Toon Claes Date: Fri, 15 Aug 2025 14:04:26 +0200 Subject: [PATCH 2/4] sidebar: make TOC collapsible with
Use semantic HTML to make the table of contents in the sidebar collapsible. --- layouts/partials/sidebar.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index ec8f2a742d..cef929baba 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -53,15 +53,15 @@ {{ $headings := .Params.headings }} {{ if $headings }} -
    -
  • Table of Contents -
      +
      + Table of Contents +
        {{ range $i, $item := $headings }}
      • {{ .text }}
        • {{ end }}
      -
    +
{{ end }} {{ if (eq .Params.Sidebar "book") }} From bc0c93644d3d1db5b73d229f2b0ecf4b4fcf00da Mon Sep 17 00:00:00 2001 From: Toon Claes Date: Fri, 15 Aug 2025 18:28:07 +0200 Subject: [PATCH 3/4] sidebar.scss: move sidebar styling out of layout.scss Make sidebar.scss the single-source-of-truth and put all the styling related to the sidebar in sidebar.scss. --- assets/sass/layout.scss | 72 --------------------------------------- assets/sass/sidebar.scss | 73 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 72 deletions(-) diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index ee5842f40b..012149df8a 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -26,37 +26,6 @@ body { overflow: visible; } -aside { - width: 218px; - margin-bottom: 35px; - position: sticky; - top: 0; - max-height: 100vh; - overflow-y: auto; - /* align with the top of the content */ - padding-top: 46px; -} - -#toc { - border: 1px solid var(--main-border); - padding: .5em; - margin-top: 1rem; - border-top: 1px solid var(--main-border); - background: var(--sidebar-toc-bg-color); - margin-right: 0.5rem; -} - -#toc ul { - list-style-type: square; -} - -#toc li { - /* use margin instead of line height for spacing because sometimes the - headings wrap onto multiple lines */ - line-height: 1.2em; - margin: 6px 0; -} - #content { width: 702px; } @@ -157,47 +126,6 @@ header { } } -// Navigation -aside nav ul { - margin-bottom: 1.4em; - margin-left: 0; - font-size: 16px; - font-weight: bold; - list-style: none; - - li { - margin-bottom: 0.5em; - - a { - color: var(--nav-link-color); - - &.active, &:hover { - color: var(--orange); - } - } - - ul { - display: none; - margin-top: 0.3em; - margin-left: 20px; - font-size: 13px; - font-weight: normal; - - li { - margin-bottom: 0; - - a.active { - font-weight: bold; - } - } - - &.expanded { - display: block; - } - } - } -} - .bottom-nav { @extend .callout; @include clearfix; diff --git a/assets/sass/sidebar.scss b/assets/sass/sidebar.scss index f9420fe6a3..4a81792995 100644 --- a/assets/sass/sidebar.scss +++ b/assets/sass/sidebar.scss @@ -9,6 +9,37 @@ hr.sidebar { @include background-image-2x($baseurl + "images/sidebar-divider", 218px, 12px); } +aside { + width: 218px; + margin-bottom: 35px; + position: sticky; + top: 0; + max-height: 100vh; + overflow-y: auto; + /* align with the top of the content */ + padding-top: 46px; +} + +#toc { + border: 1px solid var(--main-border); + padding: .5em; + margin-top: 1rem; + border-top: 1px solid var(--main-border); + background: var(--sidebar-toc-bg-color); + margin-right: 0.5rem; +} + +#toc ul { + list-style-type: square; +} + +#toc li { + /* use margin instead of line height for spacing because sometimes the + headings wrap onto multiple lines */ + line-height: 1.2em; + margin: 6px 0; +} + aside.sidebar { font-size: 13px !important; line-height: $base-line-height * 0.75; @@ -29,6 +60,48 @@ aside.sidebar { } } } + +// Navigation +aside nav ul { + margin-bottom: 1.4em; + margin-left: 0; + font-size: 16px; + font-weight: bold; + list-style: none; + + li { + margin-bottom: 0.5em; + + a { + color: var(--nav-link-color); + + &.active, &:hover { + color: var(--orange); + } + } + + ul { + display: none; + margin-top: 0.3em; + margin-left: 20px; + font-size: 13px; + font-weight: normal; + + li { + margin-bottom: 0; + + a.active { + font-weight: bold; + } + } + + &.expanded { + display: block; + } + } + } +} + // Floating sidebar button for tablet and smaller screens aside.sidebar.active { @include responsive-sidebar-ui; From 824d7034ff84325bfc5b7fed5fc565597b551799 Mon Sep 17 00:00:00 2001 From: Toon Claes Date: Fri, 15 Aug 2025 18:38:41 +0200 Subject: [PATCH 4/4] sidebar: flow TOC into the main content Give the sidebar the same background as the main content and make the border wrap around the table of contents. --- assets/sass/sidebar.scss | 41 +++++++++++++++++++++++----------------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/assets/sass/sidebar.scss b/assets/sass/sidebar.scss index 4a81792995..2ee1496e50 100644 --- a/assets/sass/sidebar.scss +++ b/assets/sass/sidebar.scss @@ -12,10 +12,8 @@ hr.sidebar { aside { width: 218px; margin-bottom: 35px; - position: sticky; top: 0; max-height: 100vh; - overflow-y: auto; /* align with the top of the content */ padding-top: 46px; } @@ -23,28 +21,32 @@ aside { #toc { border: 1px solid var(--main-border); padding: .5em; - margin-top: 1rem; - border-top: 1px solid var(--main-border); - background: var(--sidebar-toc-bg-color); - margin-right: 0.5rem; -} + margin: 0 -1px 0 0; /* eat the #main border */ + border-right: none; + z-index: 100; + position: relative; + background: var(--main-bg); -#toc ul { - list-style-type: square; -} + summary { + + } + + ul { + list-style-type: square; -#toc li { - /* use margin instead of line height for spacing because sometimes the - headings wrap onto multiple lines */ - line-height: 1.2em; - margin: 6px 0; + li { + /* use margin instead of line height for spacing because sometimes the + headings wrap onto multiple lines */ + line-height: 1.2em; + margin: 6px 0; + font-size: 0.8em; + } + } } aside.sidebar { - font-size: 13px !important; line-height: $base-line-height * 0.75; p { - font-size: 13px !important; line-height: $base-line-height * 0.75; } @@ -110,6 +112,11 @@ aside.sidebar.active { display: none; } +aside details, +aside nav { + padding: 0 1.5em; +} + // Breakpoint ---------------- @media (max-width: $default) { .sidebar-btn {