{% if page.layout == 'home' %}
{{- site.data.locales[include.lang].title | default: site.title -}}
+ {% elsif page.layout == 'post' and site.toc and page.toc %}
+
+ Contents
+
+
{% elsif page.collection == 'tabs' or page.layout == 'page' %}
{%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
{{- site.data.locales[include.lang].tabs[tab_key] | default: page.title -}}
diff --git a/_javascript/modules/components/overlay.js b/_javascript/modules/components/overlay.js
new file mode 100644
index 00000000000..c538a07832e
--- /dev/null
+++ b/_javascript/modules/components/overlay.js
@@ -0,0 +1,39 @@
+const body = document.body;
+const overlay = document.getElementById('overlay');
+const overlayContent = document.getElementById('overlay-content');
+const overlayTrigger = document.getElementById('overlay-trigger');
+
+function showOverlay() {
+ body.classList.add('noscroll');
+ overlay.classList.add('d-block');
+}
+
+function hideOverlay() {
+ body.classList.remove('noscroll');
+ overlay.classList.remove('d-block');
+}
+
+function addTocToOverlay() {
+ const toc = document.getElementById('toc-wrapper');
+ const clonedToc = toc.cloneNode(true);
+ clearOverlayContent();
+ overlayContent.appendChild(clonedToc);
+}
+
+function clearOverlayContent() {
+ while (overlayContent.firstChild) {
+ overlayContent.removeChild(overlayContent.firstChild);
+ }
+}
+
+overlay.addEventListener('click', () => {
+ clearOverlayContent();
+ hideOverlay();
+});
+
+overlayTrigger.addEventListener('click', () => {
+ addTocToOverlay();
+ showOverlay();
+});
+
+export { showOverlay, hideOverlay };
diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js
index 56ce26fac50..358ab144b92 100644
--- a/_javascript/modules/components/toc.js
+++ b/_javascript/modules/components/toc.js
@@ -1,3 +1,5 @@
+import { showOverlay } from './overlay';
+
export function toc() {
if (document.querySelector('main h2, main h3')) {
// see: https://github.com/tscanlin/tocbot#usage
diff --git a/_layouts/default.html b/_layouts/default.html
index ea438fe7abb..b601d4b894d 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,7 +1,6 @@
---
layout: compress
---
-
{% include origin-type.html %}
@@ -74,6 +73,8 @@
{% include_cached notification.html lang=lang %}
{% endif %}
+ {% include overlay.html %}
+
{% include js-selector.html lang=lang %}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index e2a0e6154b5..c01d439bc0c 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -35,6 +35,10 @@ body {
font-family: $font-family-base;
}
+.noscroll {
+ overflow: hidden;
+}
+
/* --- Typography --- */
@for $i from 1 through 5 {
@@ -972,6 +976,19 @@ $btn-mb: 0.5rem;
@include placeholder-focus;
}
+#overlay {
+ position: fixed;
+ overflow-y: scroll;
+ display: none;
+ width: 100%;
+ height: 100%;
+ inset: 0;
+ background-color: rgba(0, 0, 0, 0.95);
+ z-index: 3;
+ cursor: pointer;
+ padding: 1rem 0;
+}
+
search {
display: flex;
width: 100%;
@@ -988,7 +1005,8 @@ search {
}
#sidebar-trigger,
-#search-trigger {
+#search-trigger,
+#overlay-trigger {
display: none;
}
@@ -1094,6 +1112,11 @@ search {
white-space: nowrap;
}
+#contents-title {
+ display: inline-flex;
+ align-items: baseline;
+}
+
#mask {
display: none;
position: fixed;
@@ -1320,7 +1343,10 @@ search {
#topbar-wrapper {
@include slide(top 0.2s ease);
+ position: sticky;
+ top: 0;
left: 0;
+ z-index: 1;
}
main,
@@ -1330,7 +1356,8 @@ search {
#topbar-title,
#sidebar-trigger,
- #search-trigger {
+ #search-trigger,
+ #overlay-trigger {
display: block;
}
@@ -1368,6 +1395,10 @@ search {
}
}
+ #overlay {
+ display: none !important;
+ }
+
#search-hints {
display: none;
}
diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss
index 12427ec494a..b8a9296822a 100644
--- a/_sass/colors/typography-dark.scss
+++ b/_sass/colors/typography-dark.scss
@@ -47,7 +47,7 @@
--avatar-border-color: rgb(206, 206, 206, 0.9);
/* Topbar */
- --topbar-bg: rgb(27, 27, 30, 0.64);
+ --topbar-bg: rgb(27, 27, 30, 1);
--topbar-text-color: var(--text-color);
--search-border-color: rgb(55, 55, 55);
--search-icon-color: rgb(100, 102, 105);
diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss
index 78000746925..9b699337df7 100644
--- a/_sass/colors/typography-light.scss
+++ b/_sass/colors/typography-light.scss
@@ -50,7 +50,7 @@
--avatar-border-color: white;
/* Topbar */
- --topbar-bg: rgb(255, 255, 255, 0.7);
+ --topbar-bg: rgb(255, 255, 255, 1);
--topbar-text-color: rgb(78, 78, 78);
--search-border-color: rgb(240, 240, 240);
--search-icon-color: #c2c6cc;