diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..26d3352
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
diff --git a/.idea/antora-ui.iml b/.idea/antora-ui.iml
new file mode 100644
index 0000000..d6ebd48
--- /dev/null
+++ b/.idea/antora-ui.iml
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..639900d
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..d07e48f
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/css/doc.css b/src/css/doc.css
index 5ecfd53..4cb0150 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -820,3 +820,66 @@ h1.page + aside.toc.embedded {
hyphens: none;
word-wrap: normal;
}
+
+.tabs ul {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ margin: 0 -0.25rem 0 0;
+ padding: 0;
+}
+
+.tabs li {
+ align-items: center;
+ border: 1px solid black;
+ border-bottom: 0;
+ cursor: pointer;
+ display: flex;
+ font-weight: bold;
+ height: 2.5rem;
+ line-height: 1;
+ margin-right: 0.25rem;
+ padding: 0 1.5rem;
+ position: relative;
+}
+
+.tabs.ulist li {
+ margin-bottom: 0;
+}
+
+.tabs li + li {
+ margin-top: 0;
+}
+
+.tabset.is-loading .tabs li:not(:first-child),
+.tabset:not(.is-loading) .tabs li:not(.is-active) {
+ background-color: black;
+ color: white;
+}
+
+.tabset.is-loading .tabs li:first-child::after,
+.tabs li.is-active::after {
+ background-color: white;
+ content: "";
+ display: block;
+ height: 3px; /* Chrome doesn't always paint the line accurately, so add a little extra */
+ position: absolute;
+ bottom: -1.5px;
+ left: 0;
+ right: 0;
+}
+
+.tabset > .content {
+ border: 1px solid gray;
+ padding: 1.25rem;
+}
+
+.tabset.is-loading .tab-pane:not(:first-child),
+.tabset:not(.is-loading) .tab-pane:not(.is-active) {
+ display: none;
+}
+
+.tab-pane > :first-child {
+ margin-top: 0;
+}
+
diff --git a/src/css/vars.css b/src/css/vars.css
index a6f4590..5061d9c 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -16,6 +16,7 @@
--color-jet-70: #222;
--color-jet-80: #191919;
--color-black: #000;
+ --color-orange: #fc6c04
/* fonts */
--rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
--body-font-size: 1.0625em; /* 17px */
@@ -33,9 +34,9 @@
--panel-border-color: var(--color-smoke-90);
--scrollbar-thumb-color: var(--color-gray-10);
/* navbar */
- --navbar-background: var(--color-jet-80);
- --navbar-font-color: var(--color-white);
- --navbar_hover-background: var(--color-black);
+ --navbar-background: var(--color-white);
+ --navbar-font-color: var(--color-orange);
+ --navbar_hover-background: var(--color-gray-10);
--navbar-button-background: var(--color-white);
--navbar-button-border-color: var(--panel-border-color);
--navbar-button-font-color: var(--body-font-color);
diff --git a/src/js/07-tabs-block.js b/src/js/07-tabs-block.js
new file mode 100644
index 0000000..2b88fec
--- /dev/null
+++ b/src/js/07-tabs-block.js
@@ -0,0 +1,50 @@
+;(function () {
+ 'use strict'
+
+ var hash = window.location.hash
+ find('.tabset').forEach(function (tabset) {
+ var active
+ var tabs = tabset.querySelector('.tabs')
+ if (tabs) {
+ var first
+ find('li', tabs).forEach(function (tab, idx) {
+ var id = (tab.querySelector('a[id]') || tab).id
+ if (!id) return
+ var pane = getPane(id, tabset)
+ if (!idx) first = { tab: tab, pane: pane }
+ if (!active && hash === '#' + id && (active = true)) {
+ tab.classList.add('is-active')
+ if (pane) pane.classList.add('is-active')
+ } else if (!idx) {
+ tab.classList.remove('is-active')
+ if (pane) pane.classList.remove('is-active')
+ }
+ tab.addEventListener('click', activateTab.bind({ tabset: tabset, tab: tab, pane: pane }))
+ })
+ if (!active && first) {
+ first.tab.classList.add('is-active')
+ if (first.pane) first.pane.classList.add('is-active')
+ }
+ }
+ tabset.classList.remove('is-loading')
+ })
+
+ function activateTab (e) {
+ var tab = this.tab
+ var pane = this.pane
+ find('.tabs li, .tab-pane', this.tabset).forEach(function (it) {
+ it === tab || it === pane ? it.classList.add('is-active') : it.classList.remove('is-active')
+ })
+ e.preventDefault()
+ }
+
+ function find (selector, from) {
+ return Array.prototype.slice.call((from || document).querySelectorAll(selector))
+ }
+
+ function getPane (id, tabset) {
+ return find('.tab-pane', tabset).find(function (it) {
+ return it.getAttribute('aria-labelledby') === id
+ })
+ }
+})()