git: 0b24fd8606 - main - Fix problem with an overlap in the Table of Contents
Sergio Carlavilla Delgado <[email protected]>
| Newsgroups | gmane.os.freebsd.devel.cvs.doc |
|---|---|
| Message-ID | <[email protected]> |
The branch main has been updated by carlavilla: URL: https://cgit.FreeBSD.org/doc/commit/?id=0b24fd86066aa501c0371baf74f5b33fd51ae87a commit 0b24fd86066aa501c0371baf74f5b33fd51ae87a Author: Sergio Carlavilla Delgado <[email protected]> AuthorDate: 2021-12-30 16:14:58 +0000 Commit: Sergio Carlavilla Delgado <[email protected]> CommitDate: 2021-12-30 16:14:58 +0000 Fix problem with an overlap in the Table of Contents * Reduce the height used by the toc * Merge style of the toc for articles and books PR: 260577 Submitted by: Graham Perrin <grahamperrin (AT) gmail.com> --- .../beastie/assets/styles/documentation.scss | 258 +++++++-------------- .../themes/beastie/layouts/articles/list.html | 4 +- .../themes/beastie/layouts/articles/single.html | 4 +- .../themes/beastie/layouts/books/list.html | 4 +- .../themes/beastie/layouts/books/single.html | 4 +- 5 files changed, 88 insertions(+), 186 deletions(-) diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss index 292589023c..b537252b4f 100644 --- a/documentation/themes/beastie/assets/styles/documentation.scss +++ b/documentation/themes/beastie/assets/styles/documentation.scss @@ -61,95 +61,6 @@ padding-right: 1.5rem; transition: .2s ease-in-out; } - - .article-toc { - flex: 0 0 16rem; - font-size: .75rem; - - .article-toc-content { - width: 16rem; - position: sticky; - top: var(--header-height); - bottom: 0; - overflow-x: hidden; - overflow-y: auto; - transition: .2s ease-in-out; - - h3 { - border-bottom: none; - } - - #TableOfContents { - overflow-y: auto; - position: sticky; - overflow: auto; - max-height: calc(90vh); - } - - #TableOfContents, .resources { - ul { - list-style: none; - margin: 0; - padding: 0; - - li { - margin: 0; - - a { - color: var(--global-font-color); - display: inline-block; - padding: .25rem 0 .25rem .5rem; - text-decoration: none; - border-left: 1px solid var(--lines-color); - - &:hover { - font-weight: bolder; - } - } - } - } - } - - .resources { - .contents { - i { - margin-right: 5px; - } - } - } - } - } - - .toc-mobile { - h3 { - border-bottom: none; - } - - #TableOfContents, .resources { - ul { - list-style: none; - margin: 0; - padding: 0; - - li { - margin: 0; - - a { - color: var(--global-font-color); - display: inline-block; - padding: .25rem 0 .25rem .5rem; - text-decoration: none; - border-left: 1px solid var(--lines-color); - - &:hover { - font-weight: bolder; - } - } - - } - } - } - } } .main-wrapper-book { @@ -253,6 +164,10 @@ font-weight: 500; padding: 5px; border: 1px solid var(--lines-color); + + i { + padding-right: 5px; + } } } @@ -284,119 +199,115 @@ } } +} - .book-toc { - flex: 0 0 16rem; - font-size: .75rem; - background-color: var(--global-background-color); - - .book-toc-content { - width: 16rem; - position: sticky; - top: var(--header-height); - bottom: 0; - overflow-x: hidden; - overflow-y: auto; - transition: .2s ease-in-out; - - h3 { - border-bottom: none; - margin: 1rem 0; - } - - #TableOfContents { - position: sticky; - overflow: auto; - max-height: calc(90vh); - - ul { - margin: 0; - padding: 0; - - li { - margin: 0; - list-style: none; +.toc { + flex: 0 0 16rem; + font-size: .75rem; + background-color: var(--global-background-color); + + .toc-content { + width: 16rem; + position: sticky; + top: var(--header-height); + bottom: 0; + overflow-x: hidden; + overflow-y: auto; + transition: .2s ease-in-out; - a { - color: var(--global-font-color); - display: inline-block; - padding: .25rem 0 .25rem .5rem; - margin-left: .5rem; - text-decoration: none; - - i { - margin-right: .5rem; - } - - &:hover { - font-weight: 500; - } - } + h3 { + border-bottom: none; + margin: 1rem 0; + } - } - } - } + #TableOfContents { + position: sticky; + overflow: auto; + max-height: 60vh; - .resources { - h3 { - margin: 1rem 0; - } + ul { + margin: 0; + padding: 0; - ul { + li { margin: 0; - padding: 0; - - li { - list-style: none; - margin: 0; + list-style: none; - a { - color: var(--global-font-color); - display: inline-block; - padding: .25rem 0 .25rem .5rem; - } + a { + color: var(--global-font-color); + display: inline-block; + padding: .25rem 0 .25rem .5rem; + margin-left: .5rem; + text-decoration: none; i { - margin-left: 1rem; + margin-right: .5rem; } + &:hover { + font-weight: 500; + } } } } } - } - .toc-mobile { - h3 { - border-bottom: none; - } + .resources { + h3 { + margin: 1rem 0; + } - #TableOfContents, .resources { ul { - list-style: none; margin: 0; padding: 0; li { + list-style: none; margin: 0; a { color: var(--global-font-color); display: inline-block; padding: .25rem 0 .25rem .5rem; - text-decoration: none; - border-left: 1px solid var(--lines-color); - - &:hover { - font-weight: bolder; - } } + i { + margin-left: 1rem; + } } } } } +} + +.toc-mobile { + h3 { + border-bottom: none; + } + + #TableOfContents, .resources { + ul { + list-style: none; + margin: 0; + padding: 0; + li { + margin: 0; + + a { + color: var(--global-font-color); + display: inline-block; + padding: .25rem 0 .25rem .5rem; + text-decoration: none; + border-left: 1px solid var(--lines-color); + + &:hover { + font-weight: bolder; + } + } + } + } + } } .hidden { @@ -412,11 +323,7 @@ input.toggle { } @media (max-width: 55em) { - .article-toc { - display: none; - } - - .book-toc { + .toc { display: none; } @@ -453,15 +360,10 @@ input.toggle { right: 0; } } - } @media (min-width: 55em) { - .toc-mobile { + .toc-mobile, .book-menu-mobile { display: none; } - .book-menu-mobile { - display: none; - } - } diff --git a/documentation/themes/beastie/layouts/articles/list.html b/documentation/themes/beastie/layouts/articles/list.html index 2954accc8b..d79f13bb32 100644 --- a/documentation/themes/beastie/layouts/articles/list.html +++ b/documentation/themes/beastie/layouts/articles/list.html @@ -35,8 +35,8 @@ </div> {{ .Content }} </div> - <aside class="article-toc"> - <div class="article-toc-content"> + <aside class="toc"> + <div class="toc-content"> <h3>{{ i18n "toc" }}</h3> {{ .TableOfContents }} <hr /> diff --git a/documentation/themes/beastie/layouts/articles/single.html b/documentation/themes/beastie/layouts/articles/single.html index 2954accc8b..d79f13bb32 100644 --- a/documentation/themes/beastie/layouts/articles/single.html +++ b/documentation/themes/beastie/layouts/articles/single.html @@ -35,8 +35,8 @@ </div> {{ .Content }} </div> - <aside class="article-toc"> - <div class="article-toc-content"> + <aside class="toc"> + <div class="toc-content"> <h3>{{ i18n "toc" }}</h3> {{ .TableOfContents }} <hr /> diff --git a/documentation/themes/beastie/layouts/books/list.html b/documentation/themes/beastie/layouts/books/list.html index 8694ff66ac..d612387092 100644 --- a/documentation/themes/beastie/layouts/books/list.html +++ b/documentation/themes/beastie/layouts/books/list.html @@ -75,8 +75,8 @@ </div> <label class="hidden book-menu-overlay" for="menu-control"></label> </div> - <aside class="book-toc"> - <div class="book-toc-content"> + <aside class="toc"> + <div class="toc-content"> <h3>{{ i18n "toc" }}</h3> {{ .TableOfContents }} <hr /> diff --git a/documentation/themes/beastie/layouts/books/single.html b/documentation/themes/beastie/layouts/books/single.html index 8694ff66ac..d612387092 100644 --- a/documentation/themes/beastie/layouts/books/single.html +++ b/documentation/themes/beastie/layouts/books/single.html @@ -75,8 +75,8 @@ </div> <label class="hidden book-menu-overlay" for="menu-control"></label> </div> - <aside class="book-toc"> - <div class="book-toc-content"> + <aside class="toc"> + <div class="toc-content"> <h3>{{ i18n "toc" }}</h3> {{ .TableOfContents }} <hr />