git: 0b24fd8606 - main - Fix problem with an overlap in the Table of Contents
- Go to: [ bottom of page ] [ top of archives ] [ this month ]
Date: Thu, 30 Dec 2021 16:17:06 UTC
The branch main has been updated by carlavilla:
URL: https://cgit.FreeBSD.org/doc/commit/?id=0b24fd86066aa501c0371baf74f5b33fd51ae87a
commit 0b24fd86066aa501c0371baf74f5b33fd51ae87a
Author: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
AuthorDate: 2021-12-30 16:14:58 +0000
Commit: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
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 />