diff --git a/source/_static/img/anchor-link.svg b/source/_static/img/anchor-link.svg deleted file mode 100644 index cd932206..00000000 --- a/source/_static/img/anchor-link.svg +++ /dev/null @@ -1 +0,0 @@ -Add link_icon \ No newline at end of file diff --git a/source/_static/img/icons/anchor-dark.svg b/source/_static/img/icons/anchor-dark.svg new file mode 100644 index 00000000..d537a351 --- /dev/null +++ b/source/_static/img/icons/anchor-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/anchor.svg b/source/_static/img/icons/anchor.svg new file mode 100644 index 00000000..def5d48e --- /dev/null +++ b/source/_static/img/icons/anchor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/arrow-back.svg b/source/_static/img/icons/arrow-back.svg index d38846f6..dc7e6322 100644 --- a/source/_static/img/icons/arrow-back.svg +++ b/source/_static/img/icons/arrow-back.svg @@ -1,9 +1 @@ - - - Group 5 - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/source/_static/img/icons/baremetal.svg b/source/_static/img/icons/baremetal.svg index bc77e991..f3673db6 100644 --- a/source/_static/img/icons/baremetal.svg +++ b/source/_static/img/icons/baremetal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/_static/img/icons/chevron-down-dark.svg b/source/_static/img/icons/chevron-down-dark.svg new file mode 100644 index 00000000..fc0c4216 --- /dev/null +++ b/source/_static/img/icons/chevron-down-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/chevron-down.svg b/source/_static/img/icons/chevron-down.svg new file mode 100644 index 00000000..6b38ed75 --- /dev/null +++ b/source/_static/img/icons/chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/close-circle.svg b/source/_static/img/icons/close-circle.svg deleted file mode 100644 index 65f86977..00000000 --- a/source/_static/img/icons/close-circle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/_static/img/icons/dark-mode-active.svg b/source/_static/img/icons/dark-mode-active.svg new file mode 100644 index 00000000..85906168 --- /dev/null +++ b/source/_static/img/icons/dark-mode-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/dark-mode.svg b/source/_static/img/icons/dark-mode.svg new file mode 100644 index 00000000..387304ab --- /dev/null +++ b/source/_static/img/icons/dark-mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/docker-inactive.svg b/source/_static/img/icons/docker-inactive.svg new file mode 100644 index 00000000..624670a3 --- /dev/null +++ b/source/_static/img/icons/docker-inactive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/docker.svg b/source/_static/img/icons/docker.svg new file mode 100644 index 00000000..aefcd246 --- /dev/null +++ b/source/_static/img/icons/docker.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/docs.svg b/source/_static/img/icons/docs.svg index e1e98271..4eaa74c3 100644 --- a/source/_static/img/icons/docs.svg +++ b/source/_static/img/icons/docs.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/_static/img/icons/erasure-code-calculator.svg b/source/_static/img/icons/erasure-code-calculator.svg index 6e38a659..80092d61 100644 --- a/source/_static/img/icons/erasure-code-calculator.svg +++ b/source/_static/img/icons/erasure-code-calculator.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/_static/img/icons/hybrid-cloud.svg b/source/_static/img/icons/hybrid-cloud.svg index 429a8385..1e9b204a 100644 --- a/source/_static/img/icons/hybrid-cloud.svg +++ b/source/_static/img/icons/hybrid-cloud.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/_static/img/icons/kubernetes-inactive.svg b/source/_static/img/icons/kubernetes-inactive.svg new file mode 100644 index 00000000..e886a755 --- /dev/null +++ b/source/_static/img/icons/kubernetes-inactive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/kubernetes.svg b/source/_static/img/icons/kubernetes.svg new file mode 100644 index 00000000..846f6ab4 --- /dev/null +++ b/source/_static/img/icons/kubernetes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/linux-inactive.svg b/source/_static/img/icons/linux-inactive.svg new file mode 100644 index 00000000..85f306b3 --- /dev/null +++ b/source/_static/img/icons/linux-inactive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/linux.svg b/source/_static/img/icons/linux.svg new file mode 100644 index 00000000..d9c6f17a --- /dev/null +++ b/source/_static/img/icons/linux.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/macos-inactive.svg b/source/_static/img/icons/macos-inactive.svg new file mode 100644 index 00000000..cc8a5e22 --- /dev/null +++ b/source/_static/img/icons/macos-inactive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/macos.svg b/source/_static/img/icons/macos.svg new file mode 100644 index 00000000..48cc166c --- /dev/null +++ b/source/_static/img/icons/macos.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/menu.svg b/source/_static/img/icons/menu.svg index 205f0121..de2768db 100644 --- a/source/_static/img/icons/menu.svg +++ b/source/_static/img/icons/menu.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/_static/img/icons/nav-arrow-dark.svg b/source/_static/img/icons/nav-arrow-dark.svg new file mode 100644 index 00000000..537ee796 --- /dev/null +++ b/source/_static/img/icons/nav-arrow-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav-arrow.svg b/source/_static/img/icons/nav-arrow.svg index f85b9c4b..0fcd333a 100644 --- a/source/_static/img/icons/nav-arrow.svg +++ b/source/_static/img/icons/nav-arrow.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/_static/img/icons/reading-mode-active.svg b/source/_static/img/icons/reading-mode-active.svg new file mode 100644 index 00000000..6dffeb17 --- /dev/null +++ b/source/_static/img/icons/reading-mode-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/reading-mode.svg b/source/_static/img/icons/reading-mode.svg new file mode 100644 index 00000000..b87bd435 --- /dev/null +++ b/source/_static/img/icons/reading-mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/ref-hardware.svg b/source/_static/img/icons/ref-hardware.svg index 61f92427..b7fa79af 100644 --- a/source/_static/img/icons/ref-hardware.svg +++ b/source/_static/img/icons/ref-hardware.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/_static/img/icons/search-dark.svg b/source/_static/img/icons/search-dark.svg new file mode 100644 index 00000000..e3f653e8 --- /dev/null +++ b/source/_static/img/icons/search-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/search.svg b/source/_static/img/icons/search.svg index a78524e6..d05bc384 100644 --- a/source/_static/img/icons/search.svg +++ b/source/_static/img/icons/search.svg @@ -1,9 +1 @@ - - - Group 5 - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/source/_static/img/icons/windows-inactive.svg b/source/_static/img/icons/windows-inactive.svg new file mode 100644 index 00000000..297dde0b --- /dev/null +++ b/source/_static/img/icons/windows-inactive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/windows.svg b/source/_static/img/icons/windows.svg new file mode 100644 index 00000000..72babfd9 --- /dev/null +++ b/source/_static/img/icons/windows.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/js/main.js b/source/_static/js/main.js index 63ee9c11..f201ef10 100644 --- a/source/_static/js/main.js +++ b/source/_static/js/main.js @@ -1,85 +1,337 @@ window.addEventListener("DOMContentLoaded", (event) => { - // Detect parent iframe. - // This is required to hide the navigation links when viewed via PathFactory for analytics purposes - if (window.location !== window.parent.location) { - document.body.classList.add('inside-iframe'); - } - - // Table of contents - var topic = document.getElementById("table-of-contents"); - if (topic != null) { - document - .getElementById("localtoc") - .appendChild(document.getElementById("table-of-contents")); - } - - var l3 = document.getElementsByClassName("toctree-l3 current") - var l2 = document.getElementsByClassName("toctree-l2 current") - var l1 = document.getElementsByClassName("toctree-l1 current") - - if (l3.length > 0) { - l3[0].classList.add("active"); - l2[0].classList.add("active-parent"); - l1[0].classList.add("active-parent"); - } - else if (l2.length > 0 ) { - l2[0].classList.add("active"); - l1[0].classList.add("active-parent"); - } - else if (l1.length > 0 ) { - l1[0].classList.add("active"); - } - - // Toggle Sidebars - $('body').on('click', '[data-toggle]', function() { - var target = $(this).attr('data-toggle'); - target === 'sidebar' ? $('body').removeClass('nav-active') : $('body').removeClass('sidebar-active'); - $('body').toggleClass(target + '-active'); - }); - - renderPersonas(); + const tocMenuEl = document.querySelector(".content__toc__inner > ul"); + var readModeLs = localStorage.getItem("read-mode"); + + // -------------------------------------------------- + // Detect macOS + // -------------------------------------------------- + function isMac() { + return navigator.platform.toUpperCase().indexOf('MAC') >= 0; + } -}); + // -------------------------------------------------- + // Read mode + // -------------------------------------------------- + (function () { + const readModeEl = document.getElementById("read-mode-toggle"); + const headerEl = document.querySelector(".header"); + + // Check if the read mode in enabled in user's local storage + if (readModeLs === "true") { + document.documentElement.classList.add("read-mode"); + readModeEl.classList.add("active"); + } -function renderPersonas() { - // This inserts the personas into the left-hand nav + // Make header visible after the page is loaded and read-mode is decided. + // This is to prevent the flickering of the header on page load. + headerEl.classList.remove("inactive"); + + // Toggle read mode on icon click + readModeEl.addEventListener("click", (event) => { + document.documentElement.classList.toggle("read-mode"); - let operationPersona = document.createElement("span"); - operationPersona.innerHTML = "Operations"; - operationPersona.id = "operationsPersona"; - operationPersona.className = "persona"; + if (document.documentElement.classList.contains("read-mode")) { + localStorage.setItem("read-mode", "true"); + } else { + localStorage.setItem("read-mode", "false"); + } + }); - let administrationPersona = document.createElement("span"); - administrationPersona.innerHTML = "Administration"; - administrationPersona.id = "administrationPersona"; - administrationPersona.className = "persona"; + // Turn on read mode on smaller screen size. + // Kinda like the responsive design. + function resize() { + readModeLs = localStorage.getItem("read-mode"); - let developerPersona = document.createElement("span"); - developerPersona.innerHTML = "Developers"; - developerPersona.id = "developerPersona"; - developerPersona.className = "persona"; + if (window.innerWidth < 1280) { + if (readModeLs == null || readModeLs == "false") { + document.documentElement.classList.add("read-mode"); + } + } else { + if (readModeLs == "false") { + document.documentElement.classList.remove("read-mode"); + } + } + } - let referencePersona = document.createElement("span"); - referencePersona.innerHTML = "Reference"; - referencePersona.id = "referencePersona"; - referencePersona.className = "persona"; + var resizeTimer; + window.addEventListener("resize", function () { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(function () { + resize(); + }, 50); + }); - list = document.getElementsByClassName("toctree-l1"); + resize(); + })(); - for (i=0; i { + document.documentElement.classList.toggle("dark-mode"); + + if (document.documentElement.classList.contains("dark-mode")) { + localStorage.setItem("dark-mode", "true"); + } else { + localStorage.setItem("dark-mode", "false"); + } + }); + })(); + + + // -------------------------------------------------- + // Detect parent iframe. + // This is required to hide the navigation links when viewed via PathFactory for analytics purposes + // -------------------------------------------------- + (function () { + if (window.location !== window.parent.location) { + document.body.classList.add("inside-iframe"); + } + })(); + + + // -------------------------------------------------- + // Get meta key based on the OS + // -------------------------------------------------- + (function () { + const metaKeyEl = document.getElementById("search-meta-key"); + + if(metaKeyEl) { + if(isMac()) { + metaKeyEl.innerHTML = "⌘"; + } + else { + metaKeyEl.classList.add("ctrl"); + metaKeyEl.innerHTML = "Ctrl"; + } + } + })(); + + + // -------------------------------------------------- + // Cookie banner + // -------------------------------------------------- + (function () { + var cookieLs = localStorage.getItem("set-cookie"); + const cookieBanner = document.getElementById("cookie"); + if (cookieLs == null) { + cookieBanner.classList.add("show"); + } + + cookieBanner.addEventListener("click", (event) => { + localStorage.setItem("set-cookie", "true"); + cookieBanner.classList.remove("show"); + }); + })(); + + + // -------------------------------------------------- + // Content Nav + // -------------------------------------------------- + (function () { + const contentNav = document.querySelectorAll("[data-content-nav]"); + contentNav.forEach((nav) => { + nav.addEventListener("click", (event) => { + event.preventDefault(); + var target = nav.getAttribute("data-content-nav"); + + document + .querySelector(".content__nav__inner a.active") + .classList.remove("active"); + document + .querySelector(".content__nav__dropdown nav.active") + .classList.remove("active"); + document.getElementById(target).classList.add("active"); + nav.classList.add("active"); + }); + }); + })(); + + + // -------------------------------------------------- + // Search + // -------------------------------------------------- + (function () { + const searchToggleEl = document.querySelectorAll(".search-toggle"); + const searchParentEl = document.querySelector(".header__hero"); + const searchInputEl = document.querySelector(".search__text"); + const searchCloseEl = document.getElementById("search-close"); + const searchDocEL = document.getElementById("search-documentation") + + if(searchInputEl) { + // Open + searchToggleEl.forEach((item) => { + item.addEventListener("click", (event) => { + // Hide opened toc menu on mobile + if(tocMenuEl) { + tocMenuEl.closest(".content__toc").classList.remove("active"); + } + + // Toggle search + searchParentEl.classList.add("active"); + searchInputEl.focus(); + }); + }); + + // Close + searchCloseEl.addEventListener("click", (event) => { + searchParentEl.classList.remove("active"); + searchInputEl.value = ""; + }); + } + + // Add ID to search result page + if(searchDocEL) { + document.documentElement.classList.add("search-doc"); + } + })(); + + + // -------------------------------------------------- + // Asides: Sidebar and Nav + // -------------------------------------------------- + (function () { + const asideToggleEls = document.querySelectorAll("[data-aside-toggle]"); + const sidebarEl = document.querySelector(".sidebar"); + const navEl = document.querySelector(".nav"); + const asideHideEls = document.querySelectorAll(".hide-aside"); + + function hideAside() { + document.querySelector(".aside-backdrop").remove(); + document.documentElement.classList.remove("doc-active", "nav-active"); + } + + asideToggleEls.forEach((item) => { + item.addEventListener("click", (event) => { + event.preventDefault(); + var target = item.getAttribute("data-aside-toggle"); + + document.documentElement.classList.add(target + "-active"); + + var backdrop = document.createElement("div"); + backdrop.classList.add("aside-backdrop"); + backdrop.onclick = function () { + document.documentElement.classList.remove(target + "-active"); + backdrop.remove(); + } + + if(target == "doc") { + sidebarEl.insertAdjacentElement("afterend", backdrop); + } + else { + navEl.insertAdjacentElement("afterend", backdrop); + } + }); + }); + + asideHideEls.forEach(item => { + item.addEventListener("click", (event) => { + event.preventDefault(); + hideAside(); + }); + }); + })(); + + + // -------------------------------------------------- + // TOC in mobile + // -------------------------------------------------- + (function () { + const tocToggleEl = document.querySelector(".content__toc__inner > h3 > a"); + + if(tocToggleEl) { + tocToggleEl.addEventListener("click", (event) => { + event.preventDefault(); + tocMenuEl.closest(".content__toc").classList.toggle("active"); + }); + } + })(); + + + // -------------------------------------------------- + // Icon switches + // e.g Read mode and Dark mode buttons + // -------------------------------------------------- + (function () { + const iconSwitchesEls = document.querySelectorAll(".icon--switch"); + iconSwitchesEls.forEach((item) => { + item.addEventListener("click", (event) => { + event.preventDefault(); + item.classList.toggle("active"); + }); + }); + })(); + + + // -------------------------------------------------- + // Focus search input on key combination + // -------------------------------------------------- + (function () { + const root = document.documentElement; + + document.addEventListener("keydown", (event) => { + if(!root.classList.contains("read-mode")) { + const searchInputEl = document.querySelector(".search__text"); + var metaKey = isMac() ? event.metaKey : event.ctrlKey + + if (metaKey && event.key === "/") { + searchInputEl.focus(); + window.scrollTo(0, 0); + } + } + }); + })(); + + + // -------------------------------------------------- + // Inserts the personas into the left-hand nav + // -------------------------------------------------- + (function() { + const operationPersona = document.createElement("li"); + operationPersona.innerHTML = "Operations"; + operationPersona.className = "docs__title"; + + const administrationPersona = document.createElement("li"); + administrationPersona.innerHTML = "Administration"; + administrationPersona.className = "docs__title"; + + const developerPersona = document.createElement("li"); + developerPersona.innerHTML = "Developers"; + developerPersona.className = "docs__title"; + + const referencePersona = document.createElement("li"); + referencePersona.innerHTML = "Reference"; + referencePersona.className = "docs__title"; + + const list = document.getElementsByClassName("toctree-l1"); + + for ( i = 0; i < list.length; i++) { + const page_title = list[i].childNodes[0].innerHTML; if (page_title === "Install and Deploy MinIO" || page_title === "Deploy the MinIO Operator") { - list[i].insertAdjacentElement('beforebegin',operationPersona); + // First persona is not listed in the design, so commenting it for now. + //list[i].insertAdjacentElement('beforebegin',operationPersona); } else if (page_title === "MinIO Console") { - list[i].insertAdjacentElement('beforebegin',administrationPersona); + list[i].insertAdjacentElement('beforebegin',administrationPersona); } else if (page_title === "Software Development Kits (SDK)") { - list[i].insertAdjacentElement('beforebegin',developerPersona); + list[i].insertAdjacentElement('beforebegin',developerPersona); } else if (page_title === "MinIO Client") { - list[i].insertAdjacentElement('beforebegin',referencePersona); + list[i].insertAdjacentElement('beforebegin',referencePersona); } - } -} \ No newline at end of file + } + })(); +}); \ No newline at end of file diff --git a/source/_static/scss/includes/_alert.scss b/source/_static/scss/includes/_alert.scss new file mode 100644 index 00000000..b6fc4b13 --- /dev/null +++ b/source/_static/scss/includes/_alert.scss @@ -0,0 +1,60 @@ +$alert-variants: note important warning; + +div.admonition { + border-radius: $border-radius; + border: 0; + border: 1px solid transparent; + padding: 1.5rem; + font-size: $font-size-md; + background-color: var(--theme-light-bg); + color: var(--headings-color); + + p.admonition-title { + font-family: inherit; + font-size: $font-size-md; + font-weight: $font-weight-bold; + line-height: 100%; + display: block; + } + + a { + color: var(--link-color); + text-decoration: underline; + text-decoration-style: dotted; + text-decoration-thickness: 1px; + text-underline-offset: 0.2rem; + text-decoration-color: transparent; + transition: text-decoration-color 300ms; + } + + code { + color: currentColor; + } + + .highlight { + background-color: transparent; + } + + @each $variant in $alert-variants { + &.#{$variant} { + border-color: var(--alert-#{$variant}-border-color); + color: var(--alert-#{$variant}-color); + background-color: var(--alert-#{$variant}-bg); + + code, + div.highlight pre { + background-color: var(--alert-#{$variant}-code-bg); + color: var(--alert-#{$variant}-color); + } + + a { + color: currentColor; + text-decoration-color: var(--alert-#{$variant}-link-decoration-color); + + &:hover { + text-decoration-color: var(--alert-#{$variant}-color); + } + } + } + } +} \ No newline at end of file diff --git a/source/_static/scss/includes/_aside.scss b/source/_static/scss/includes/_aside.scss index 8030e7cb..e6373055 100644 --- a/source/_static/scss/includes/_aside.scss +++ b/source/_static/scss/includes/_aside.scss @@ -1,151 +1,110 @@ -aside.sidebar { +// ---------------------- +// Sidebar +// ---------------------- +div.sidebar { width: $sidebar-width; - position: fixed; + position: sticky; left: 0; top: 0; - background-color: $sidebar-bg; + background-color: var(--sidebar-bg); transition: opacity 400ms, transform 300ms; - padding: $content-padding + 1 $content-padding $content-padding - 0.75 $content-padding; + padding: var(--content-padding); overflow-y: auto; - height: 100%; - z-index: $z-index-header - 1; + height: 100vh; + z-index: $z-index-header - 2; margin: 0; border: none; - @include breakpoint-min(breakpoints(xl)) { - padding-top: $content-padding + $header-height; - } - - @include breakpoint-max(breakpoints(xl)) { - transform: translate3d(-100%, 0, 0); - z-index: $z-index-header + 1; - } - - & > .toggle-icon { - @include breakpoint-min(breakpoints(xl)) { + @include breakpoint-min(breakpoints(lg)) { + .hide-aside { display: none; } + } - position: absolute; + @include breakpoint-max(breakpoints(lg)) { + position: fixed; + left: 0; top: 0; - right: 0; + z-index: $z-index-header + 1; + box-shadow: 0.5rem 0 0.75rem rgba(0, 0, 0, 0.175); + display: none; + + .hide-aside { + text-align: right; + margin: 0 -0.75rem 1rem 0; + } } } -.sidebar-active { - .sidebar { - @include breakpoint-min(breakpoints(xl)) { - transform: translate3d(-100%, 0, 0); - opacity: 0; - pointer-events: none; - } - - @include breakpoint-max(breakpoints(xl)) { - transform: translate3d(0, 0, 0); - opacity: 1; - pointer-events: all; - box-shadow: 0.25rem 0 0.75rem rgba($black, 0.1); - } +.doc-active { + div.sidebar { + display: block; } } .sidebar__title { - margin: -0.25rem 0 1.5rem; - line-height: 100%; + margin: 0 0 1rem; + font-size: $font-size-md; + font-weight: $font-weight-bold; + display: block; - & > a { - line-height: 100%; - color: $docs-item-main-color; - font-size: 0.9rem; - text-transform: uppercase; - font-weight: $font-weight-medium; - - &:hover { - color: $docs-item-main-color; - } - } -} - -.search { - margin-bottom: 0.8rem; -} - -.search__text { - appearance: none; - border: 1px solid $search-border-color; - height: $search-height; - background-color: $white; - color: $search-color; - font-size: 0.85rem; - width: 100%; - padding: 0 1rem 0.1rem 2.6rem; - background: $search-icon no-repeat center left 1rem; - background-color: $search-bg; - border-radius: $border-radius; - - &:focus { - border-color: $search-focus-border-color + &, &:hover { + color: var(--headings-color); } } +// ---------------------- +// Docs Navigation +// ---------------------- .docs { - margin-right: -0.65rem; - + font-size: $font-size-sm; ul { list-style: none; - padding: 0; - margin: 0.5rem 0 0.5rem 0; - font-size: .90rem; - - & > span.persona { - font-weight: bold; - border-bottom-style: solid; - border-width: 2px; - display: block; - padding-bottom: 1rem; - - } + margin: 0; & > li { - - margin: 0.5rem 0 0.5rem 0.5rem; - & > a { - &, & > code { - all: unset; - } + color: var(--text-muted-color); + display: block; + padding: 0.4rem 0; &:hover { - border: 0; - cursor: pointer; + color: var(--text-color); } } - &.active { - - & > a { - color: $docs-item-main-active-color; - font-weight: $font-weight-medium; - } - } - - &.active-parent { - - & > a { - color: $docs-item-sub-color; - font-weight: $font-weight-medium; - } - } - - & > ul { - - & > li { - margin: 0.5rem 0 0.5rem 0.5rem; - font-size: 0.85rem; - } - + &.current > a, + & > a.current { + font-weight: $font-weight-medium; + color: var(--docs-nav-active-color); } } + + ul { + margin-left: 1rem; + } } +} + +.docs__title { + margin: 2rem 0 0.5rem; + border-bottom: 1px solid var(--docs-nav-group-border-color); + color: var(--text-color); + font-weight: $font-weight-medium; + padding-bottom: 0.3rem; +} + + +// ---------------------- +// Misc +// ---------------------- +.aside-backdrop { + position: fixed; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: 11; + cursor: pointer; } \ No newline at end of file diff --git a/source/_static/scss/includes/_base.scss b/source/_static/scss/includes/_base.scss index e837c0f2..02098736 100644 --- a/source/_static/scss/includes/_base.scss +++ b/source/_static/scss/includes/_base.scss @@ -11,6 +11,8 @@ html { font-size: $root-font-size; + scroll-behavior: smooth; + scroll-padding: 1rem; } body { @@ -18,202 +20,7 @@ body { font-family: $font-family-base; font-size: 1rem; line-height: $body-line-height; - color: $body-color; - background-color: $body-bg; + color: var(--text-color); font-weight: $font-weight-normal; - display: flex; - flex-direction: column; - overflow: hidden; -} - -a { - color: $link-color; - text-decoration: none; - - &:hover { - color: $link-hover-color; - text-decoration: none; - } - - & > img.anchor { - box-shadow: none; - height: 1rem; - } - - &.reference { - text-decoration: none; - border-bottom: none; - } -} - -h1, h2, h3, h4, h5, h6 { - color: $docs-item-main-color; - position: relative; - - & > .toc-backref { - color: $docs-item-main-color; - } - - & > .headerlink { - position: absolute; - left: -1.5rem; - top: 0; - opacity: 0.5; - - &:hover { - background-color: transparent; - opacity: 1; - } - } -} - -dl { - & > dt { - font-weight: bold; - } -} - -// Hack because sphinx renders nested ul elements as dl/dt/dd for some reason - -li { - & dl.simple { - font-weight: normal; - - & dt { - font-weight: normal; - } - - & dd { - margin-left: 0px; - } - } -} - -div.admonition { - margin-top: 0; - padding: 10px 20px; - - background: rgba($black, .01); - border: none; - border-left: 4px solid grey; - - & > p.admonition-title { - font-weight: bold; - font-family: $font-family-base; - font-size: 1rem; - } - - &.warning { - background-color: $docs-item-admonition-warning-body; - border: none; - border-left: 4px solid $docs-item-admonition-warning-border; - } - - &.important { - background-color: $docs-item-admonition-important-body; - border: none; - border-left: 4px solid $docs-item-admonition-important-border; - } - - &.note { - background-color: $docs-item-admonition-note-body; - border: none; - border-left: 4px solid $docs-item-admonition-note-border; - } -} - -dl { - margin: 10px 0 10px 0; -} - -dl.minio { - margin: 10px 0 10px 0; -} - -div.footer { - width: auto; - margin: 0px; -} - -.align-default { - text-align: left; -} - -table.docutils { - border: none; - box-shadow: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; - font-size: .9rem; - - & > tbody tr th.stub { - border: none; - border-bottom: 1px solid $docs-item-table-border; - color: $theme-red; - } - - & > thead tr th { - border: none; - border-bottom: 1px solid $docs-item-table-border; - color: $theme-red; - } - - & > tbody tr td { - border: none; - border-bottom: 1px solid $docs-item-table-border; - } - -} - -.sphinx-tabs-tab { - color: rgba($black, .5); - - background: none; - border: none; - padding: 0px 20px 10px 20px; - - &[aria-selected=true] { - color: $theme-red; - font-weight: bold; - border-bottom: .15em solid $theme-red; - pointer-events: none; - } -} - -button.toggle-button { - width: 1.25em; - height: 1.25em; - - &.toggle-button-hidden:before { - left: -7em; - } - - & > .bar { - width: 14px; - left: 13%; - } -} - -.xref { - color: $link-color; -} - -.content__main { - a img { - box-shadow: 0px 0px 5px lightgray; - } - - a.noshadow img { - box-shadow: none; - } -} - -ul.simple li { - margin: 0px 0px 10px 0px; -} - -video { - display: block; - margin-left: auto; - margin-right: auto; + background-color: var(--body-bg); } \ No newline at end of file diff --git a/source/_static/scss/includes/_font.scss b/source/_static/scss/includes/_font.scss index 7cf76207..ee68a92d 100644 --- a/source/_static/scss/includes/_font.scss +++ b/source/_static/scss/includes/_font.scss @@ -1,10 +1,10 @@ @font-face { - font-family: "Mark"; - src: url("../fonts/Mark-Regular.woff2") format("woff2"), - url("../fonts/Mark-Regular.woff") format("woff"); - font-weight: 400; - font-style: normal; - } + font-family: "Mark"; + src: url("../fonts/Mark-Regular.woff2") format("woff2"), + url("../fonts/Mark-Regular.woff") format("woff"); + font-weight: 400; + font-style: normal; +} @font-face { font-family: "Mark"; @@ -12,4 +12,12 @@ url("../fonts/Mark-Medium.woff") format("woff"); font-weight: 500; font-style: normal; - } \ No newline at end of file +} + +@font-face { + font-family: "Mark"; + src: url("../fonts/Mark-Bold.woff2") format("woff2"), + url("../fonts/Mark-Bold.woff") format("woff"); + font-weight: 700; + font-style: normal; +} \ No newline at end of file diff --git a/source/_static/scss/includes/_footer.scss b/source/_static/scss/includes/_footer.scss new file mode 100644 index 00000000..e2ea90d4 --- /dev/null +++ b/source/_static/scss/includes/_footer.scss @@ -0,0 +1,37 @@ +div.footer { + all: revert; + background-color: var(--footer-bg); + width: 100%; + margin: 0; + + + &, a { + color: $white; + } + + a { + &:hover { + text-decoration: underline; + } + } + + p { + margin: 0; + } +} + +.footer__credit { + justify-content: center; + text-align: center; + display: flex; + gap: 0.2rem; + flex-wrap: wrap; + align-items: center; + padding: 1.5rem 0; + font-size: $font-size-sm; +} + +.footer__license { + display: flex; + align-items: center; +} \ No newline at end of file diff --git a/source/_static/scss/includes/_header.scss b/source/_static/scss/includes/_header.scss index d74548da..d1532c79 100644 --- a/source/_static/scss/includes/_header.scss +++ b/source/_static/scss/includes/_header.scss @@ -1,444 +1,155 @@ -// Using CSS variables to match the parent site's nav configs. -:root { - --nav-text-color: #{$black}; - --nav-item-border-color: #{$black}; - --nav-item-arrow: #{$nav-arrow-icon}; - --nav-toggle-hover-border-color: #{$black}; - --nav-bg-gray: #{$nav-sub-hover-bg}; - --header-bg: #{$white}; - --nav-top-border-color: #{$gray-200}; -} - .header { - height: $header-height; - background-color: $header-bg; - box-shadow: 0 0 0.75rem rgba($black, 0.1); - width: 100%; - z-index: $z-index-header; - flex-shrink: 0; - padding: 0 $content-padding; - - @include breakpoint-max(breakpoints(lg)) { - height: $header-height-mobile; - display: flex; - align-items: center; - padding: 0 $content-padding-mobile; - } -} - -.logo { - display: flex; - align-items: center; - - @include breakpoint-min(breakpoints(lg)) { - position: absolute; - left: 1.3rem; - top: 0; - z-index: 1; - } -} - -.logo__link { - margin-left: 0.5rem; -} - -.nav { - z-index: 1; - transition: opacity 300ms, transform 300ms; - font-size: $font-size-md; - - @include breakpoint-max(breakpoints(lg)) { - height: 100vh; - width: $nav-mobile-width; - position: fixed; - right: 0; - top: 0; - flex-direction: column; - transform: translate3d($nav-mobile-width, 0, 0); - opacity: 0; - box-shadow: $nav-mobile-box-shadow; - overflow-y: auto; - background-color: $nav-mobile-bg; - } - - & > .toggle-icon { - @include breakpoint-min(breakpoints(lg)) { - display: none; - } - } -} - -.nav__top, -.nav__bottom { - @include breakpoint-min(breakpoints(lg)) { - display: flex; - margin: 0.25rem 0; - } - - align-items: center; + background-color: var(--header-bg); + box-shadow: 0 0 0.75rem rgba($black, 0.1); + width: 100%; position: relative; - gap: 2rem; - justify-content: flex-end; -} - -.nav__top { - border-bottom: 1px solid var(--nav-top-border-color); + z-index: $z-index-header; - @include breakpoint-max(breakpoints(lg)) { - border-bottom: 1px solid $gray-100; - padding-bottom: 1rem; - margin-bottom: 1rem; + & > .container { + position: relative; } - .nav__link { + &.inactive { + display: none; + } +} + +.header__top { + align-items: center; + gap: 0.5rem; + border-bottom: 1px solid var(--nav-top-border-color); + display: flex; + padding: 0.4rem 0; + height: 3rem; + + .nav { font-size: $font-size-sm; + margin: 0 -1rem 0 auto !important; } } -.nav-active { - @include breakpoint-max(breakpoints(lg)) { - z-index: 1000; //FIXME - - .nav { - transform: translate3d(0, 0, 0); - opacity: 1; - z-index: $nav-active-z-index; - } +.header__logo { + & > svg { + width: 6.25rem; + fill: var(--logo-fill-color); } } -.nav__item { - &:hover { - .nav__dropdown, - & ~ .nav__dropdown--product { - opacity: 1; - pointer-events: auto; - } +.header__title { + line-height: 100%; + font-weight: 500; + color: var(--header-headings-color); + margin-left: 0.5rem; + font-size: $font-size-sm; + padding-bottom: 0.1rem; +} - .nav__link--dropdown { - & > span { - &:before { - opacity: 0; - } +.header__actions { + flex-shrink: 0; + white-space: nowrap; + display: flex; + gap: 0.5rem; + margin-left: auto; + + .icon { + &:not(.icon--switch) { + & > svg { + fill: var(--header-text-color); + } + + &:hover { + background-color: var(--header-actions-icon-alt-hover-bg); } } } - @include breakpoint-min(breakpoints(lg)) { - .nav__link { - padding-right: 1.25rem; - background: var(--nav-item-arrow) no-repeat top 20px right 0.25rem; - - &:after { - opacity: 0; - pointer-events: none; - box-sizing: border-box; - left: 50%; - margin-left: -3px; - content: ""; - width: 0; - height: 0; - border-style: solid; - border-width: 0 6px 4px; - border-color: transparent transparent #fff; - position: absolute; - bottom: -2px; - transition: opacity 200ms; - z-index: 2; - } - } + .icon--switch { + transition: background-color 500ms, border-color 500ms; + background-color: var(--header-actions-icon-bg); + border-color: var(--header-actions-icon-border-color); &:hover { - .nav__link { - &:after { - opacity: 1; - } - } - } - } -} - -.nav__link { - position: relative; - - &, - &:hover { - color: var(--nav-text-color); - } - - @include breakpoint-min(breakpoints(lg)) { - padding: 0.5rem 0 0.6rem; - cursor: pointer; - - & > span { - position: relative; - - &:before { - height: 1px; - width: 100%; - background-color: var(--nav-item-border-color); - position: absolute; - bottom: -4px; - left: 0; - content: ""; - transform: translateY(5px); - opacity: 0; - transition: opacity 300ms, transform 300ms; - } + background-color: var(--header-actions-icon-hover-bg); } - &:not(.nav__link--dropdown) { - &:hover { - & > span { - &:before { - transform: translateY(0); - opacity: 1; + & > svg { + stroke: var(--header-actions-icon-stroke); + stroke-width: var(--header-actions-icon-stroke-width); + + &:last-child { + & > path { + &:last-child { + fill: var(--header-actions-icon-path-fill); } } } } } +} - @include breakpoint-max(breakpoints(lg)) { - font-weight: $font-weight-medium; - color: $black; - - & > span { - display: block; - padding: 0.5rem 1.5rem; - } +#read-mode-toggle { + @include breakpoint-max(breakpoints(xl)) { + display: none; } } -.nav__link--active { - & > span { - &:before { - opacity: 1; - transform: translateY(0); +:root { + &:not(.read-mode) { + .header__actions { + position: absolute; + bottom: 2rem; + right: var(--content-padding); } - } -} -.nav__link--download { - border: 1px solid $theme-red; - transition: background-color 300ms, color 300ms; - border-radius: $border-radius; - padding: 0.2rem 0.95rem 0.3rem; - margin-left: auto; + .header__hero { + text-align: center; + padding: 3rem 0 2rem; - &:hover { - background-color: $theme-red; - color: $white; - } - - @include breakpoint-max(breakpoints(lg)) { - margin: 1.5rem; - text-align: center; - padding: 0.5rem 1rem; - display: block; - } -} - -.nav__dropdown { - @include breakpoint-min(breakpoints(lg)) { - width: 365px; - transform: translateX(calc(-50% + 3rem)); - position: absolute; - left: 0; - top: 2.65rem; - opacity: 0; - transition: opacity 200ms; - pointer-events: none; - border-radius: $border-radius-lg; - overflow: hidden; - box-shadow: 0 0.0625rem 1.25rem rgba($black, 0.13); - background-color: $white; - z-index: 1; - - .nav__dropdown__inner { - padding: 1.5rem; - max-height: calc(100vh - 5rem); - overflow-y: auto; - border-radius: $border-radius-lg; + & > h2 { + font-size: 3rem; + font-weight: $font-weight-bold; + color: var(--header-headings-color); + margin: 0 0 2rem; + } } } - @include breakpoint-max(breakpoints(lg)) { - .nav__dropdown__inner { - background-color: var(--nav-bg-gray); - padding: 0.5rem 0.8rem; - margin-bottom: 1rem; - } - } -} - -.nav__dropdown--product { - @include breakpoint-min(breakpoints(lg)) { - &:hover { - opacity: 1; - pointer-events: auto; + &.read-mode { + .header__top { + border: 0; } - max-width: 1200px; - width: 100%; - transform: translateX(0); - left: 0; - - .nav__dropdown__inner { - padding: 2.5rem 2.25rem; - } - } -} - -.nav__sub { - padding: 0.6rem 0.75rem; - font-weight: $font-weight-medium; - color: $black; - border-radius: $border-radius; - - @include breakpoint-max(breakpoints(lg)) { - font-size: 0.85rem; - font-weight: normal; - } - - &, - & > small { - display: block; - } - - & > small { - color: #4b4b4b; - font-weight: normal; - font-size: 0.8rem; - opacity: 0.75; - margin-top: 0.25rem; - - @include breakpoint-max(breakpoints(lg)) { - display: none; - } - } - - &:hover { - background-color: var(--nav-bg-gray); - color: $black; - } -} - -.nav__feature { - @include breakpoint-min(breakpoints(lg)) { - display: flex; - } -} - -.nav__column { - @include breakpoint-min(breakpoints(lg)) { - padding: 0 1rem; - - &:not(:last-child) { - flex: 1; + .header__logo { + & > svg { + width: 5rem; + } } - &:last-child { - & > .nav__sub { - margin-top: 1rem; + .header__hero { + position: absolute; + right: 0; + width: 100%; + height: $search-height; + padding: 0 var(--content-padding); + top: 3.3rem; + + & > h2 { + display: none; + } + + @include breakpoint-min(breakpoints(xl)) { + max-width: 31.5rem; + + } + + @include breakpoint-max(breakpoints(lg)) { + top: 10rem + } + + &:not(.active) { + display: none; } } } } -.nav__column__title { - text-transform: uppercase; - font-size: 0.6rem; - padding-left: 0.75rem; - margin-bottom: 0.5rem; - line-height: 100%; - - @include breakpoint-max(breakpoints(lg)) { - margin-top: 1rem; - } - - -} - -.nav__lead { - &, - &:hover { - color: $black; - } - - display: flex; - align-items: center; - - & > img { - width: 30px; - flex-shrink: 0; - margin-right: 0.75rem; - - @include breakpoint-max(breakpoints(lg)) { - display: none; - } - } -} - -.nav__jump { - @include breakpoint-min(breakpoints(lg)) { - padding-left: 2.6rem; - margin-top: -0.2rem; - - & > a { - &, - &:hover { - color: $black; - } - - &:hover { - text-decoration: underline; - } - - font-weight: normal; - display: block; - font-size: 0.8rem; - margin-top: 0.5rem; - } - } - - @include breakpoint-max(breakpoints(lg)) { - display: none; - } -} - -.nav__separator { - border-left: 1px solid $gray-100; - margin: 0 1rem; - - @include breakpoint-max(breakpoints(lg)) { - display: none; - } -} - -.toggle-icon { - width: 2.5rem; - height: 2.5rem; - cursor: pointer; - border-radius: $border-radius; - transition: background-color 300ms; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - background-repeat: no-repeat; - background-position: center; - - &:hover { - background-color: $toggle-icon-hover-bg; - } -} - -[data-toggle="nav"] { - margin-left: auto; - - @include breakpoint-min(breakpoints(lg)) { - display: none; - } -} \ No newline at end of file diff --git a/source/_static/scss/includes/_layout.scss b/source/_static/scss/includes/_layout.scss index 9bf6aef2..fd57632f 100644 --- a/source/_static/scss/includes/_layout.scss +++ b/source/_static/scss/includes/_layout.scss @@ -1,40 +1,19 @@ -.content { - overflow-y: auto; - overflow-x: hidden; - flex-wrap: nowrap; - height: calc(100vh - #{$header-height}); - +.content__inner { @include breakpoint-min(breakpoints(lg)) { - display: flex; - } + display: flex; + } } .content__main { flex: 1; min-width: 0; - background-color: $content-bg; align-self: flex-start; - padding: $content-padding; - - @include breakpoint-min(breakpoints(xl)) { - padding-left: $sidebar-width + $content-padding; - transition: padding-left 300ms; - will-change: padding-left; - } + padding: var(--content-padding); } .sidebar-active { .content__main { - padding-left: $content-padding; - } -} - -.content__aside { - @include breakpoint-min(breakpoints(lg)) { - flex-shrink: 0; - position: sticky; - top: 0; - order: 2; + padding-left: var(--content-padding); } } @@ -44,6 +23,28 @@ overflow: scroll; } +.container { + margin: 0 auto; + padding: 0 var(--content-padding); + width: 100%; +} + +:root { + &:not(.read-mode) { + .container { + max-width: $container-width; + } + } + + &.read-mode { + .content { + & > .container { + padding: 0; + } + } + } +} + // Keep only the main content when the page is loaded inside an iframe. // Currently we load certain pages inside iframes for PathFactory analytics. .inside-iframe { @@ -57,6 +58,6 @@ } .content__main { - padding-left: $content-padding; + padding-left: var(--content-padding); } } \ No newline at end of file diff --git a/source/_static/scss/includes/_misc.scss b/source/_static/scss/includes/_misc.scss index 2ead84f1..bc107a51 100644 --- a/source/_static/scss/includes/_misc.scss +++ b/source/_static/scss/includes/_misc.scss @@ -1,27 +1,16 @@ -// Toggle icons -$toggleIcons: ( - docs: 'docs.svg', - menu: 'menu.svg', - close: 'close-circle.svg', - toc: 'toc.svg' -); - -@each $name, $icon in $toggleIcons { - .toggle-icon--#{$name} { - background-image: url(../img/icons/#{$icon}); - } -} - +// ---------------------- // Custom scrollbar +// ---------------------- .scrollbar { scrollbar-color: transparent transparent; scrollbar-width: thin; + &:hover { - scrollbar-color: $scrollbar-bg transparent; + scrollbar-color: var(--scrollbar-bg) transparent; &::-webkit-scrollbar-thumb { - background-color: $scrollbar-bg; + background-color: var(--scrollbar-bg); } } @@ -40,7 +29,189 @@ $toggleIcons: ( background-clip: content-box; &:hover { - background-color: $scrollbar-hover-bg; + background-color: var(--scrollbar-hover-bg); } } +} + + +// ---------------------- +// Buttons icons +// ---------------------- +.icon { + width: 1.75rem; + height: 1.75rem; + border: 1px solid transparent; + border-radius: $border-radius; + background-color: transparent; + cursor: pointer; + font-size: 0; + flex-shrink: 0; + + &:not(.icon--switch) { + & > svg { + fill: var(--text-muted-color); + } + + &:hover { + background-color: var(--theme-light-bg); + } + } +} + +.icon--switch { + display: grid; + place-items: center; + position: relative; + + & > img, + & > svg { + transform: scale(1); + opacity: 1; + transition: transform 300ms, opacity 300ms; + position: absolute; + + &:last-child:not(:only-child) { + transform: scale(0); + opacity: 0; + } + } + + &.active { + & > svg, + & > img { + &:first-child { + transform: scale(0); + opacity: 0; + } + + &:last-child { + transform: scale(1); + opacity: 1; + } + } + } +} + + +// ---------------------- +// Cookie banner +// ---------------------- +#cookie { + background-color: #E0EDF3; + padding: 0.5rem 0; + color: $black; + font-size: 0.75rem; + z-index: 10; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + + &:not(.show) { + display: none; + } + + strong { + font-weight: $font-weight-medium; + margin-right: 0.2rem; + } + + a { + color: #006DA0; + + &:hover { + text-decoration: underline; + } + } + + & > .container { + display: flex; + align-items: center; + } +} + +.cookie__text { + flex: 1; +} + +#cookie__btn { + background-color: #101D32; + border-radius: $border-radius; + display: inline-block; + color: $white; + padding: 0 0.75rem 0.1rem; + line-height: 1; + cursor: pointer; + height: 1.65rem; + border: 0; + flex-shrink: 0; + margin-left: 1rem; + + &:hover { + background-color: #050a13; + } +} + + +// ----------------------------- +// Read mode utility classes +// ----------------------------- +:root { + &:not(.read-mode) { + .visible-rm { + display: none; + } + } + + &:not(.dark-mode) { + .hidden-lm { + display: none; + } + } + + &.dark-mode { + .hidden-dm { + display: none; + } + } + + &.read-mode { + .hidden-rm { + display: none; + } + } +} + + +// ---------------------- +// SD cards +// ---------------------- +.sd-container-fluid { + --sd-gutter-x: 0; +} + +.sd-card { + --sd-color-shadow: none; + --sd-color-card-border: var(--theme-light-bg); + --sd-color-card-border-hover: var(--theme-light-hover-bg); +} + +.sd-card-hover { + &:hover { + transform: scale(1); + } +} + +.sd-card-body { + padding: 1.5rem; + + img { + border: 0; + } +} + +.sd-card-title { + line-height: 100%; + margin: -0.2rem 0 1rem; } \ No newline at end of file diff --git a/source/_static/scss/includes/_mixins.scss b/source/_static/scss/includes/_mixins.scss index 375d014c..57c12d1f 100644 --- a/source/_static/scss/includes/_mixins.scss +++ b/source/_static/scss/includes/_mixins.scss @@ -15,4 +15,45 @@ @media (max-width: ($bp - 1)) { @content; } +} + +@mixin breakpoint-between($lower, $upper) { + @media (min-width: $lower) and (max-width: ($upper - 1)) { + @content; + } +} + +// Hide Scrollbars +@mixin hide-scrollbars { + overflow: -moz-scrollbars-none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + width: 0; + } +} + +// Dark/Light Theme +@mixin theme-switch($map) { + :root { + &:not(.dark-mode) { + @each $property, $value in $map { + $light: nth($value, 1); + $dark: nth($value, 2); + + #{$property}: #{$light}; + } + } + + &.dark-mode { + @each $property, $value in $map { + $light: nth($value, 1); + $dark: nth($value, 2); + + #{$property}: #{$dark}; + } + } + } + } \ No newline at end of file diff --git a/source/_static/scss/includes/_nav.scss b/source/_static/scss/includes/_nav.scss new file mode 100644 index 00000000..d1af6647 --- /dev/null +++ b/source/_static/scss/includes/_nav.scss @@ -0,0 +1,525 @@ +// ---------------------- +// Main menu +// ---------------------- +.nav { + align-items: center; + position: relative; + gap: 0.5rem; + font-size: $font-size-md; + + .hide-aside { + padding: 0.5rem; + text-align: right; + } +} + +.nav__link { + display: block; + position: relative; +} + +.nav__link--active { + & > span { + &:before { + opacity: 1; + transform: translateY(0); + } + } +} + +.nav__link--download { + border: 1px solid var(--nav-download-border-color); + transition: background-color 300ms, color 300ms; + border-radius: $border-radius; + margin-left: auto; + + &:hover { + background-color: var(--nav-download-hover-bg); + } +} + +.nav__sub { + padding: 0.6rem 0.75rem; + font-weight: $font-weight-medium; + color: var(--text-color); + border-radius: $border-radius; + + &, + & > small { + display: block; + } + + & > small { + color: var(--text-muted-color); + font-weight: normal; + font-size: 0.8rem; + opacity: 0.75; + margin-top: 0.25rem; + } + + &:hover { + background-color: var(--theme-light-bg); + color: var(--text-color); + } +} + +.nav__column__title { + text-transform: uppercase; + font-size: 0.6rem; + padding-left: 0.75rem; + margin-bottom: 0.5rem; + line-height: 100%; + color: var(--text-muted-color); +} + +.nav__lead { + &, + &:hover { + color: var(--text-color); + } + + display: flex; + align-items: center; + + & > img { + width: 30px; + flex-shrink: 0; + margin-right: 0.75rem; + } +} + +.nav__separator { + border-left: 1px solid var(--theme-light-bg); + margin: 0 1rem; +} + + +:root { + &:not(.read-mode) { + .nav { + margin: 0.5rem 0 0 -1rem; + display: flex; + + .nav__link { + padding-right: 1rem; + padding-left: 1rem; + } + } + + .nav__item { + &:hover { + .nav__link { + &:after { + opacity: 1; + } + } + + .nav__dropdown, + & ~ .nav__dropdown--product { + opacity: 1; + pointer-events: auto; + } + + .nav__link--dropdown { + & > span { + &:before { + opacity: 0; + } + } + } + } + + .nav__link { + padding-right: 1.25rem; + margin-right: 0.5rem; + background: var(--nav-item-arrow) no-repeat top 20px right 0.25rem; + + &:after { + opacity: 0; + pointer-events: none; + box-sizing: border-box; + left: 50%; + margin-left: -3px; + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 0 6px 4px; + border-color: transparent transparent var(--nav-dropdown-bg); + position: absolute; + bottom: 0; + transition: opacity 200ms; + z-index: 2; + } + } + } + + .nav__link { + padding: 0.5rem 0 0.6rem; + cursor: pointer; + + &, + &:hover { + color: var(--nav-text-color); + } + + & > span { + position: relative; + + &:before { + height: 1px; + width: 100%; + background-color: var(--nav-item-border-color); + position: absolute; + bottom: -4px; + left: 0; + content: ""; + transform: translateY(5px); + opacity: 0; + transition: opacity 300ms, transform 300ms; + } + } + + &:not(.nav__link--dropdown) { + &:hover { + & > span { + &:before { + transform: translateY(0); + opacity: 1; + } + } + } + } + } + + .nav__dropdown { + width: 365px; + position: absolute; + left: 0; + top: 100%; + opacity: 0; + transition: opacity 200ms; + pointer-events: none; + border-radius: $border-radius-lg; + overflow: hidden; + box-shadow: 0 0.0625rem 1.25rem rgba($black, 0.13); + background-color: var(--nav-dropdown-bg); + z-index: 1; + + .nav__dropdown__inner { + padding: 1.5rem; + max-height: calc(100vh - 5rem); + overflow-y: auto; + border-radius: $border-radius-lg; + } + } + + .nav__dropdown--product { + &:hover { + opacity: 1; + pointer-events: auto; + } + + max-width: 1200px; + width: 100%; + transform: translateX(0); + left: 0; + + .nav__dropdown__inner { + padding: 2.5rem 2.25rem; + } + } + + .nav__feature { + display: flex; + } + + .nav__column { + padding: 0 1rem; + + &:not(:last-child) { + flex: 1; + } + + &:last-child { + & > .nav__sub { + margin-top: 1rem; + } + } + } + + .nav__jump { + padding-left: 2.6rem; + margin-top: -0.2rem; + + & > a { + &, + &:hover { + color: var(--text-muted-color); + } + + &:hover { + text-decoration: underline; + } + + font-weight: normal; + display: block; + font-size: 0.8rem; + margin-top: 0.5rem; + } + } + + .nav__link--download { + padding: 0.25rem 1rem 0.35rem; + } + } + + &.read-mode { + .nav { + margin-top: 0; + height: 100vh; + width: $nav-mobile-width; + position: fixed; + right: 0; + top: 0; + flex-direction: column; + transform: translate3d($nav-mobile-width, 0, 0); + opacity: 0; + box-shadow: 0 0 10px rgba($black, 0.25); + overflow-y: auto; + background-color: var(--nav-bg); + padding: 0.75rem; + } + + &.nav-active { + .nav { + transform: translate3d(0, 0, 0); + opacity: 1; + z-index: $nav-active-z-index; + } + } + + .nav__link { + font-weight: $font-weight-medium; + border-radius: $border-radius; + color: var(--headings-color); + + & > span { + display: block; + padding: 0.5rem 0.75rem; + } + } + + .nav__link--download { + margin: 1.5rem 0.75rem 1rem; + text-align: center; + padding: 0.5rem 1rem; + display: block; + + &:hover { + color: var(--header-headings-color); + } + } + + .nav__dropdown { + .nav__dropdown__inner { + margin-bottom: 1rem; + } + } + + .nav__sub { + font-size: $font-size-sm; + font-weight: normal; + + & > small { + display: none; + } + } + + a.nav__link:not(.nav__link--download), + .nav__sub { + &:hover { + background-color: var(--theme-light-bg); + } + } + + .nav__column__title { + margin-top: 1rem; + } + + .nav__lead { + & > img { + display: none; + } + } + + .nav__jump { + display: none; + } + + .nav__separator { + display: none; + } + } + + &.nav-active, + &.doc-active { + height: 100vh; + overflow: hidden; + } +} + + +// ---------------------- +// Content nav +// ---------------------- +.content__nav { + background-color: var(--content-nav-bg); + font-size: $font-size-md; + z-index: 10; + position: relative; + box-shadow: 0 0.1875rem 0.375rem rgba($black, 0.15); + + .container { + white-space: nowrap; + overflow-x: auto; + display: flex; + @include hide-scrollbars(); + } + + &:after { + background-image: linear-gradient(270deg, var(--content-nav-bg) 0%, var(--content-nav-bg) 10%, transparent 100%); + } +} + +:root { + &:not(.dark-mode):not(.read-mode) { + .content__nav__inner { + & > a.active { + & > img { + &:first-child { + display: block; + } + + &:last-child { + display: none; + } + } + } + } + } +} + +.content__nav__inner { + margin: 0; + padding: 0; + display: flex; + list-style: none; + gap: 2.5rem; + align-items: center; + flex: 1; + + & > a { + color: var(--text-muted-color); + font-weight: $font-weight-medium; + display: flex; + align-items: center; + padding: 0.69rem 0; + border-bottom: 2px solid transparent; + transition: color 300ms; + + & > img { + margin-right: 0.75rem; + opacity: 0.65; + transition: opacity 300ms; + filter: var(--content-nav-icon-filter); + + &:first-child { + display: none; + } + } + + &.active { + border-bottom-color: var(--content-nav-active-border-color); + color: var(--text-muted-hover-color); + } + + &:hover, + &.active { + & > img { + opacity: 1; + } + } + + &:hover { + color: var(--text-muted-hover-color); + } + } + + .search-toggle { + margin-left: auto; + position: relative; + z-index: 2; + + @include breakpoint-max(breakpoints(lg)) { + display: none !important; + } + } +}; + +.content__nav__dropdown { + z-index: 1; + background-color: var(--content-nav-sub-bg); + font-size: $font-size-sm; + + &:after { + background-image: linear-gradient(270deg, var(--content-nav-sub-bg) 0%, var(--content-nav-sub-bg) 10%, transparent 100%); + } + + nav { + display: flex; + align-items: center; + gap: 1.5rem; + + &:not(.active) { + display: none; + } + + & > a { + font-weight: $font-weight-medium; + color: var(--content-nav-sub-color); + border-bottom: 2px solid transparent; + padding: 0.7rem 0; + transition: color 300ms; + + &.active { + border-bottom-color: var(--content-nav-sub-active-border-color); + color: var(--content-nav-sub-active-color); + font-weight: $font-weight-bold; + } + + &:not(.active) { + &:hover { + color: var(--content-nav-sub-hover-color); + } + } + } + } +} + +.content__nav, +.content__nav__dropdown { + position: relative; + + &:after { + content: ""; + position: absolute; + top: 0; + right: 0; + width: 3rem; + height: 100%; + z-index: 1; + height: 2.8125rem; + pointer-events: none; + } +} \ No newline at end of file diff --git a/source/_static/scss/includes/_normalize.scss b/source/_static/scss/includes/_normalize.scss deleted file mode 100644 index e801593e..00000000 --- a/source/_static/scss/includes/_normalize.scss +++ /dev/null @@ -1,190 +0,0 @@ -html { - line-height: 1.35; - -webkit-text-size-adjust: 100%; -} - -body { - margin: 0; -} - -main { - display: block; -} - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -pre { - font-family: monospace, monospace; - font-size: .9em; -} - -a { - background-color: transparent; - text-decoration: none; -} - -abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; -} - -b, -strong { - font-weight: bold; -} - -code, -kbd, -samp { - font-family: monospace, monospace; - font-size: .9em; -} - -small { - font-size: 80%; -} - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -img { - border-style: none; -} - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - font-size: 100%; - line-height: 1.15; - margin: 0; -} - -button, -input { - overflow: visible; -} - -button, -select { - text-transform: none; -} - -button[disabled] { - cursor: default; -} - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; -} - -progress { - vertical-align: baseline; -} - -textarea { - overflow: auto; -} - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - padding: 0; -} - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -details { - display: block; -} - -summary { - display: list-item; -} - -template { - display: none; -} - -[hidden] { - display: none; -} - -address { - font-style: normal; - color: inherit; - margin: 0; -} \ No newline at end of file diff --git a/source/_static/scss/includes/_reset.scss b/source/_static/scss/includes/_reset.scss new file mode 100644 index 00000000..c19dcf5f --- /dev/null +++ b/source/_static/scss/includes/_reset.scss @@ -0,0 +1,269 @@ +// ---------------------- +// Links +// ---------------------- +a { + color: var(--link-color); + + &:hover { + color: var(--link-hover-color); + } + + + &, &:hover { + text-decoration: none; + } + + & > img.anchor { + box-shadow: none; + height: 1rem; + } + + &.reference { + &, &:hover { + border-bottom: none; + } + } +} + + +// ---------------------- +// Headings +// ---------------------- +h1 { + margin-top: -0.15rem; + margin-bottom: 1rem; +} + +h2, h3, h4, h5, h6 { + margin: 2rem 0 1rem; +} + +h1, h2, h3, h4, h5, h6 { + position: relative; + line-height: 1.2; + + &, + & > a, + code { + color: var(--headings-color); + font-size: inherit; + } +} + +h1 { font-size: 1.75rem; } +h2 { font-size: 1.5rem; } +h3 { font-size: 1.25rem; } +h4 { font-size: 1rem; } +h5 { font-size: 1rem; } +h6 { font-size: 1rem; } + +.content__main { + // Setting extra padding and margin to make room for anchors. + h1, h2, h3, h4, h5 { + padding-left: 1.5rem; + margin-left: -1.5rem; + } +} + +a.headerlink { + position: absolute; + left: -1rem; + top: 0; + bottom: 0; + margin: auto 0; + width: 1.5rem; + height: 1.5rem; + border: 1px solid var(--header-link-border-color); + background-color: var(--header-link-bg); + z-index: 11; + border-radius: $border-radius; + font-size: 0; + + &, &:hover { + background-position: center; + background-repeat: no-repeat; + background-image: var(--header-link-icon); + } + + &:hover { + background-color: var(--header-link-border-color); + } + + @include breakpoint-max(breakpoints(lg)) { + display: none; + } +} + + +// ---------------------- +// Code +// ---------------------- +tt.xref, code.xref, +code, +pre, +div.highlight { + font-family: $font-family-mono; + font-weight: $font-weight-bold; + background-color: var(--code-bg); + color: var(--code-color); + border-radius: $border-radius; + font-size: $font-size-md; +} + +tt.xref, code.xref, +code { + padding: 0.1rem 0.35rem; + line-height: 100%; + border: 0; +} + +a { + code.xref, + code { + color: var(--code-link-color); + background-color: var(--code-link-bg); + transition: opacity 300ms; + } + + &:hover { + code { + background-color: var(--code-link-bg); + opacity: 0.8; + } + } +} + +.highlight { + pre { + background-color: transparent; + } + + .w { + text-decoration: none; + } +} + +pre { + border-radius: $border-radius; + padding: 1.25rem 1.5rem; +} + +dl pre, +blockquote pre, +li pre { + padding-left: 1.5rem; +} + + +// ---------------------- +// Image +// ---------------------- +[data-lightbox] { + img { + padding: 0.25rem; + border: 1px solid var(--theme-light-bg); + border-radius: $border-radius; + } + + &:hover { + img { + border-color: var(--theme-light-hover-bg); + } + } +} + +// ---------------------- +// Table +// ---------------------- +table.docutils { + box-shadow: none; + margin: 1rem 0 2rem; + + td, + th { + border-color: var(--table-border-color); + padding: 0.75rem 1rem; + line-height: 1.5; + vertical-align: top; + text-align: left; + } + + th { + font-weight: $font-weight-medium; + color: var(--headings-color); + font-size: $font-size-sm; + } + + caption { + font-size: $font-size-sm; + font-style: italic; + margin-bottom: 0.5rem; + opacity: 0.5; + } +} + + +// ---------------------- +// Form +// ---------------------- +form { + margin: 0; +} + +input, +textarea { + font-family: $font-family-base; +} + + +// ---------------------- +// Media +// ---------------------- +video { + display: block; +} + + +// ---------------------- +// List +// ---------------------- +dl { + margin-bottom: 1rem; + + dt { + margin: 1.5rem 0 0.5rem; + font-weight: $font-weight-medium; + color: var(--headings-color); + } + + dd { + margin: 0; + } +} + +ul, ol { + margin-left: 1rem; +} + +ul { + list-style-type: disc; +} + + +// ---------------------- +// Misc +// ---------------------- +abbr, acronym { + border-bottom: none; + text-underline-offset: 0.15rem; +} + +.guilabel, +.menuselection { + font-family: inherit; +} + +dt:target, +span.highlighted { + background-color: transparent; +} \ No newline at end of file diff --git a/source/_static/scss/includes/_search.scss b/source/_static/scss/includes/_search.scss new file mode 100644 index 00000000..14adc303 --- /dev/null +++ b/source/_static/scss/includes/_search.scss @@ -0,0 +1,178 @@ +:root { + // Hide redundant elements from search result page + &.search-doc { + .search-toggle, + .content__toc, + h1#search-documentation, + #search-progress, + #search-documentation ~ p { + display: none; + } + } + + &.read-mode { + .search__inner { + border-color: var(--search-border-color); + + &:focus-within { + border-color: var(--search-focus-border-color); + } + } + + .search__text { + @include breakpoint-min(breakpoints(lg)) { + height: 2.25rem; + } + } + } + + &:not(.read-mode) { + .search__inner { + @include breakpoint-min(breakpoints(xl)) { + background-image: var(--search-icon); + padding-left: 2.25rem; + } + } + } +} + +// Search UI +.search__inner { + position: relative; + display: inline-flex; + width: 100%; + background-color: var(--search-bg); + border-radius: $border-radius; + border: 1px solid transparent; + align-items: center; + padding: 0 0.3rem; + background-position: center left 1rem; + background-repeat: no-repeat; + transition: box-shadow 200ms; + + @include breakpoint-min(breakpoints(xl)) { + max-width: 31.5rem; + } + + kbd { + position: absolute; + pointer-events: none; + top: 0; + right: 0; + display: flex; + border: 1px solid var(--theme-light-hover-bg); + border-radius: $border-radius; + padding: 0.325rem 0.3rem 0.175rem; + line-height: 100%; + top: 0.525rem; + right: 0.525rem; + transition: opacity 300ms; + + & > span { + &:not(:first-child) { + font-size: 0.8rem; + } + + &:not(:last-of-type) { + display: inline-block; + padding: 0 0.1rem; + } + + &.ctrl { + font-size: 0.6rem; + text-transform: uppercase; + } + } + } + + &:focus-within { + box-shadow: 0 0 0 0.3rem var(--search-focus-shadow); + } +} + +.search__text { + appearance: none; + border: 0; + height: $search-height; + background-color: transparent; + color: var(--search-color); + font-size: 0.85rem; + width: 100%; + padding: 0 0.5rem 0.15rem 0.25rem; + + &::placeholder { + color: var(--search-placeholder-color); + } + + @include breakpoint-between(breakpoints(lg), breakpoints(xl)) { + height: 2rem; + } + + &:focus { + & ~ kbd { + opacity: 0; + } + } +} + +// Search form in results page +#search-documentation { + & ~ form { + & > input { + &[type="submit"] { + display: none; + } + + &[type="text"] { + appearance: none; + height: $search-height; + color: var(--search-color); + font-size: 0.85rem; + width: 100%; + padding: 0 1rem 0.15rem 2.5rem; + border: 1px solid var(--search-border-color); + border-radius: $border-radius; + background: transparent var(--search-icon) no-repeat center left 1rem; + + &:focus { + border-color: var(--search-focus-border-color); + } + } + } + } +} + +// Search results +#search-results { + & > h2 { + margin-bottom: -0.75rem; + font-size: 1.25rem; + } +} + +.search-summary { + color: var(--text-muted-color); +} + +ul.search { + list-style: none; + margin: 0; + + & > li { + background-image: none; + padding: 0.5rem 0; + + & > a { + display: block; + } + + & > span { + font-size: $font-size-sm; + color: var(--text-muted-color); + } + + & + li { + border-top: 1px solid var(--theme-light-bg); + } + } +} \ No newline at end of file diff --git a/source/_static/scss/includes/_tab.scss b/source/_static/scss/includes/_tab.scss new file mode 100644 index 00000000..975da8f9 --- /dev/null +++ b/source/_static/scss/includes/_tab.scss @@ -0,0 +1,17 @@ +.sd-tab-set { + --sd-color-tabs-label-inactive: var(--text-muted-color); + --sd-color-tabs-label-hover: var(--text-color); + --sd-color-tabs-label-active: var(--headings-color); + --sd-color-tabs-underline-active: var(--tab-active-border-color); + --sd-color-tabs-overline: var(--tab-border-color); + --sd-color-tabs-underline: transparent; + --sd-color-tabs-underline-hover: transparent; + + & > label { + padding: 0.5rem 0; + margin-right: 2rem; + opacity: 1; + font-weight: $font-weight-medium; + transition: border 300ms, color 300ms, opacity 300ms; + } +} \ No newline at end of file diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss new file mode 100644 index 00000000..229585bf --- /dev/null +++ b/source/_static/scss/includes/_theme.scss @@ -0,0 +1,122 @@ +// CSS custom properties for dark/light themes. +// Each property contains 2 values: first is for light theme, second is for dark theme. +$theme-properties: ( + // Body + --body-bg: $white $dark-0, + + // Text + --link-color: #006DA0 #85B3EE, + --link-hover-color: #015378 #99c0f4, + --text-color: $black $text-dark-color, + --text-muted-color: #4B4B4B #697995, + --headings-color: $black #E3EEEF, + + // Theme + --theme-light-bg: $light-300 $dark-200, + --theme-light-hover-bg: $light-500 $dark-300, + + // Header + --header-bg: $header-light-bg $dark-0, + --logo-fill-color: $theme-red $white, + --header-actions-icon-bg: $white $dark-0, + --header-actions-icon-border-color: transparent $dark-500, + --header-actions-icon-stroke: $black $dark-500, + --header-actions-icon-stroke-width: 1.5 1.25, + --header-actions-icon-path-fill: $header-light-bg $dark-500, + --header-actions-icon-hover-bg: $light-500 $dark-200, + --header-actions-icon-alt-hover-bg: rgba($white, 0.1) $dark-200, + --header-headings-color: $white $headings-dark-color, + --header-link-border-color: $light-300 $dark-200, + --header-link-bg: $white $dark-0, + --header-link-icon: url("../img/icons/anchor.svg") url("../img/icons/anchor-dark.svg"), + --header-text-color: $white $text-dark-color, + + // Content + --content-nav-bg: $light-100 $dark-100, + --content-nav-active-border-color: $black $dark-500, + --content-nav-sub-bg: $white $dark-500, + --content-nav-sub-color: $black $dark-0, + --content-nav-sub-active-border-color: $theme-red $dark-0, + --content-nav-sub-hover-color: $theme-red $dark-300, + --content-nav-sub-active-color: $theme-red $dark-0, + --content-nav-icon-filter: none (invert(100%) sepia(12%) saturate(777%) hue-rotate(181deg) brightness(100%) contrast(85%)), + + // Search + --search-bg: $white $dark-100, + --search-border-color: $light-400 $dark-400, + --search-focus-border-color: $light-500 $dark-500, + --search-placeholder-color: #7e7e7e $text-dark-color, + --search-color: $black $text-dark-color, + --search-icon: url(../img/icons/search.svg) url(../img/icons/search-dark.svg), + --search-focus-shadow: rgba($white, 0.15) #1b232f, + + // Sidebar + --sidebar-bg: $light-100 $dark-100, + --sidebar-hide-bg: $light-500 $dark-400, + --sidebar-hide-hover-bg: #c2c9d1 $dark-500, + + // Docs nav + --docs-nav-active-color: $theme-red $headings-dark-color, + --docs-nav-group-border-color: $light-300 $dark-500, + + // Scrollbar + --scrollbar-bg: #e5e5e5 #2e3747, + --scrollbar-hover-bg: #dddddd #364052, + + // Table + --table-border-color: $light-300 $dark-200, + + // Code + --code-bg: $light-300 $dark-500, + --code-hover-bg: $light-400 #9fa8b9, + --code-color: $black $dark-0, + --code-link-color: #006DA0 #12243c, + --code-link-bg: #cde4ff #71a7ed, + + // Tab + --tab-active-border-color: $theme-red $dark-500, + --tab-border-color: $light-300 $dark-200, + + // TOC + --toc-caret-icon: url("../img/icons/chevron-down.svg") url("../img/icons/chevron-down-dark.svg"), + + // Mainmenu + --nav-bg: $white $dark-100, + --nav-text-color: $white $text-dark-color, + --nav-item-border-color: $white $dark-500, + --nav-item-arrow: url(../img/icons/nav-arrow.svg) url(../img/icons/nav-arrow-dark.svg), + --nav-toggle-hover-border-color: $white $dark-500, + --nav-top-border-color: rgba(255, 255, 255, 0.2) $dark-200, + --nav-dropdown-bg: $white $dark-100, + --nav-download-border-color: $theme-red $dark-500, + --nav-download-hover-bg: $theme-red $dark-200, + + // Footer + --footer-bg: #1D1D1D #151c24, + + // Icon + --icon-sidebar-toggle-hover-bg: rgba($white, 0.1) $dark-200, + --icon-search-toggle-hover-bg: darken($light-100, 5%) $dark-300, + + // Alerts + --alert-important-bg: #fff9e6 rgba(39, 38, 21, 0.75), + --alert-important-border-color: #ffe79a #3e320d, + --alert-important-color: #9a7500 #b28e1b, + --alert-important-code-bg: #f2e7c4 #322d1b, + --alert-important-link-decoration-color: #d9cda7 #433c23, + + --alert-note-bg: #eaf2fd rgba(21, 35, 55, 0.75), + --alert-note-border-color: #cfe3ff #172c4b, + --alert-note-color: #1467c2 #4291e8, + --alert-note-code-bg: #cedff8 #1b3150, + --alert-note-link-decoration-color: #99bff3 #1f3c67, + + --alert-warning-bg: #fff4f5 rgba(42, 9, 12, 0.5), + --alert-warning-border-color: #f2d1d5 #401317, + --alert-warning-color: #b2404b #bb4a55, + --alert-warning-code-bg: #f3dfe1 #3d1014, + --alert-warning-link-decoration-color: #e3c3c6 #54141a, +); + +// Activate dark/light themes +@include theme-switch($theme-properties); \ No newline at end of file diff --git a/source/_static/scss/includes/_toc.scss b/source/_static/scss/includes/_toc.scss index 72df0b73..1649cdd1 100644 --- a/source/_static/scss/includes/_toc.scss +++ b/source/_static/scss/includes/_toc.scss @@ -1,43 +1,191 @@ -#localtoc { - font-size: 0.8rem; +#table-of-contents { + display: none; } -#table-of-contents { - background: none; - border-style: none; - padding: $content-padding $content-padding $content-padding - 0.6rem $content-padding; - margin: 0; +.content__toc { + position: sticky; + top: 0; @include breakpoint-min(breakpoints(lg)) { - width: 13rem; + flex-shrink: 0; + order: 2; + width: 14rem; + height: 100vh; + padding: var(--content-padding) var(--content-padding) var(--content-padding) 0; + overflow-y: auto; + + .icon { + display: none; + } } - - .topic-title { - margin: 0; - font-weight: $font-weight-medium; - color: $black; + @include breakpoint-max(breakpoints(lg)) { + display: flex; + align-items: center; + padding: var(--content-padding); + background-color: var(--body-bg); + z-index: $z-index-header - 2; } - ul { - list-style: none; - margin: 10px 0px 10px 0px; + .icon { + height: 2.7rem; + width: 2.7rem; + padding: 0.75rem; + border: 1px solid var(--theme-light-bg); + cursor: pointer; + } - & > { - li { - list-style: none; - margin: 10px 0px 10px 0px; - - & > p a.reference { - text-decoration: none; - border-bottom: none; - color: $docs-item-main-color; - } - - & > ul { - margin: 10px 0px 10px 10px; + &.active { + & > .content__toc__inner { + & > ul { + display: block; + } + + h3 > a { + border-radius: $border-radius $border-radius 0 0; + + &:after { + transform: rotate(180deg); } } } + } } -} + +.content__toc__inner { + @include breakpoint-max(breakpoints(lg)) { + position: relative; + display: flex; + align-items: center; + flex: 1; + margin: 0 0.75rem; + + & > h3 { + flex: 1; + } + } + + h3 { + margin: 0; + line-height: 1; + + & > a { + font-size: 1rem; + color: var(--headings-color); + font-size: 0; + + &:before { + content: "Contents"; + font-size: 1rem; + } + + @include breakpoint-max(breakpoints(lg)) { + padding: 0.85rem; + background-color: var(--theme-light-bg); + border-radius: $border-radius; + display: block; + position: relative; + + &:after { + content: ""; + height: 1rem; + width: 1rem; + position: absolute; + right: 1.25rem; + top: 0.9rem; + background: var(--toc-caret-icon) no-repeat center; + background-size: 1rem; + transform-origin: center; + } + } + } + } + + ul { + margin: 0; + padding: 0; + list-style: none; + font-size: $font-size-sm; + + ul ul { + margin-left: 1rem; + } + } + + & > ul { + @include breakpoint-min(breakpoints(lg)) { + position: relative; + padding-left: 1rem; + margin-top: 1rem; + + &:before { + content: ""; + width: 2px; + height: calc(100% - 0.8rem); + position: absolute; + left: 0; + top: 0.5rem; + background-color: var(--theme-light-bg); + } + } + + @include breakpoint-max(breakpoints(lg)) { + position: absolute; + left: 0; + top: 100%; + width: 100%; + background-color: var(--theme-light-bg); + display: none; + border-radius: 0 0 $border-radius $border-radius; + z-index: 1; + border-top: 1px solid var(--theme-light-hover-bg); + padding: 0.65rem 1rem 1rem; + max-height: 12rem; + overflow-y: auto; + } + + & > li { + & > a { + font-size: 0; + + &:before { + content: "Introduction"; + font-size: $font-size-sm; + transition: color 300ms; + } + } + + a { + display: block; + color: var(--text-muted-color); + code { + display: none; + } + + &:hover { + color: var(--text-color); + } + } + + & > ul { + & > li { + a { + transition: color 300ms; + margin: 0.25rem 0; + position: relative; + + &:before { + content: ""; + width: 2px; + height: calc(100% - 0.8rem); + position: absolute; + left: 0; + top: 0.5rem; + + } + } + } + } + } + } +} \ No newline at end of file diff --git a/source/_static/scss/includes/_variables.scss b/source/_static/scss/includes/_variables.scss index 5e1d7367..c6a294f6 100644 --- a/source/_static/scss/includes/_variables.scss +++ b/source/_static/scss/includes/_variables.scss @@ -1,30 +1,22 @@ // Colors $white: #ffffff; $black: #000000; -$theme-red: #C72C48; -$theme-red-light: rgba($theme-red, 0.5); -$theme-red-lighter: rgba($theme-red, 0.25); -$theme-hover-bg: rgb(245, 245, 245); +$theme-red: #c72e49; -// Gray -$gray-100: #F7F7F7; -$gray-200: #dedede; -$gray-300: #c6c6c6; -$gray-400: #adadad; -$gray-500: #949494; +// Gray shades light +$light-100: #F5F5F5; +$light-200: #EFF0F1; +$light-300: #E8EAEC; +$light-400: #E1E3E6; +$light-500: #D9DDE2; -// Overrides for sphinx-design -// https://sphinx-design.readthedocs.io/en/alabaster-theme/css_variables.html - -:root { - --sd-color-tabs-label-active: #{$theme-red}; - --sd-color-tabs-label-inactive: #{$theme-red-light}; - --sd-color-tabs-overline: #{$theme-red-light}; - --sd-color-tabs-underline: #{$theme-red-lighter}; - --sd-color-tabs-underline-active: #{$theme-red-lighter}; - --sd-color-tabs-underline-hover: #{$theme-red-light}; - --sd-color-tabs-label-hover: #{$theme-red-light}; -} +// Gray shades dark +$dark-0: #19202A; +$dark-100: #212936; +$dark-200: #273140; +$dark-300: #2E394A; +$dark-400: #59667A; +$dark-500: #8A93A4; // Breakpoints $breakpoints: ( @@ -32,110 +24,61 @@ $breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px + xl: 1280px ); - // z-index -$z-index-header: 10; - +$z-index-header: 11; // Body $font-family-base: 'Mark', sans-serif; $font-family-headings: 'Mark', sans-serif; +$font-family-mono: Courier New, Courier ,monospace; $root-font-size: 16px; $body-font-size: 1rem; -$body-line-height: 1.5; -$body-color: #4b4b4b; -$body-bg: #F9F9F9; - +$body-line-height: 1.6; // Text -$text-color: #4b4b4b; -$text-hover-color: darken($text-color, 20%); -$text-muted-color: #727272; - +$text-dark-color: #A2ADC0; +$headings-dark-color: #E3EEEF; // Font size -$font-size-xs: 0.6875rem; $font-size-sm: 0.8125rem; $font-size-md: 0.9375rem; - // Layout -$container-width: 95%; -$content-bg: $white; -$content-padding: 1.75rem; -$content-padding-mobile: 1.25rem; +$container-width: 1400px; + +:root { + --content-padding: 1.75rem; + + @include breakpoint-max(breakpoints(lg)) { + --content-padding: 1.25rem; + } +} // Font weight $font-weight-normal: 400; $font-weight-medium: 500; - - -// Links -$link-color: #0045ec; -$link-hover-color: #0036b9; - +$font-weight-bold: 700; // Header -$header-height: 5.65rem; -$header-height-mobile: 4.5rem; -$header-bg: $white; -$logo-height: 1.05rem; - +$header-light-bg: #031733; // Sidebar -$sidebar-width: 19rem; -$sidebar-bg: #F9F9F9; - +$sidebar-width: 18rem; // Border Radius $border-radius: 0.1875rem; +$border-radius-sm: 0.125rem; $border-radius-lg: 0.3125rem; - // Search -$search-border-color: #F0F0F0; -$search-focus-border-color: darken($search-border-color, 15%); $search-height: 2.65rem; -$search-color: #555555; -$search-icon: url(../img/icons/search.svg); -$search-bg: $white; - -// Docs -$docs-item-main-color: #1C1C1C; -$docs-item-main-hover-color: $black; -$docs-item-main-active-color: $theme-red; -$docs-item-sub-color: #494949; -$docs-item-sub-hover-color: darken($docs-item-sub-color, 30%); -$docs-item-sub-active-color: $docs-item-sub-hover-color; -$docs-item-admonition-warning-body: #FFF2F2; -$docs-item-admonition-important-body: #FFF9E6; -$docs-item-admonition-note-body: #EDF9FF; -$docs-item-admonition-warning-border: #E54253; -$docs-item-admonition-important-border: #EDBC39; -$docs-item-admonition-note-border: #2592EF; -$docs-item-table-border: #e6e6e6; - - -// Toggle icon -$toggle-icon-hover-bg: rgba($theme-red, 0.075); - - -// Nav -$nav-link-color: $body-color; -$nav-border-color: #4b4b4b; +// Nav - FIXME $nav-sub-hover-bg: #f8f8f8; $nav-mobile-bg: $white; $nav-mobile-width: 300px; -$nav-mobile-box-shadow: 0 0 10px rgba($black, 0.1); -$nav-active-z-index: 100; -$nav-arrow-icon: url(../img/icons/nav-arrow.svg); - - -// Scrollbar -$scrollbar-bg: #dddddd; -$scrollbar-hover-bg: #cecece; \ No newline at end of file +$nav-active-z-index: 100; \ No newline at end of file diff --git a/source/_static/scss/main.scss b/source/_static/scss/main.scss index eadedb25..946c1c68 100644 --- a/source/_static/scss/main.scss +++ b/source/_static/scss/main.scss @@ -1,10 +1,16 @@ -@import 'includes/variables'; @import 'includes/mixins'; +@import 'includes/variables'; @import 'includes/font'; -@import 'includes/normalize'; +@import 'includes/reset'; +@import 'includes/theme'; @import 'includes/base'; @import 'includes/layout'; @import 'includes/header'; @import 'includes/aside'; @import 'includes/toc'; -@import 'includes/misc'; \ No newline at end of file +@import 'includes/tab'; +@import 'includes/misc'; +@import 'includes/search'; +@import 'includes/footer'; +@import 'includes/nav'; +@import 'includes/alert'; \ No newline at end of file diff --git a/source/_templates/content-navigation.html b/source/_templates/content-navigation.html new file mode 100644 index 00000000..68ae86bb --- /dev/null +++ b/source/_templates/content-navigation.html @@ -0,0 +1,83 @@ +
+
+ +
+ +
+
+ + + + + + + + + +
+
+
\ No newline at end of file diff --git a/source/_templates/cookie.html b/source/_templates/cookie.html new file mode 100644 index 00000000..9313590a --- /dev/null +++ b/source/_templates/cookie.html @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/source/_templates/footer.html b/source/_templates/footer.html new file mode 100644 index 00000000..ca914c99 --- /dev/null +++ b/source/_templates/footer.html @@ -0,0 +1,12 @@ +
+
+
+ This work is licensed under a + Creative Commons Attribution 4.0 International License. + {{ copyright }} + + Creative Commons License + +
+
+
\ No newline at end of file diff --git a/source/_templates/header.html b/source/_templates/header.html new file mode 100644 index 00000000..49b34d5f --- /dev/null +++ b/source/_templates/header.html @@ -0,0 +1,53 @@ +
+
+
+ +
Documentation
+ + + +
+ + + + + +
+
+ + {%- include "top-navigation.html" %} + +
+

Documentation

+ {%- include "searchbox.html" %} +
+
+
\ No newline at end of file diff --git a/source/_templates/icons/close.html b/source/_templates/icons/close.html new file mode 100644 index 00000000..183c3ebd --- /dev/null +++ b/source/_templates/icons/close.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/source/_templates/icons/menu.html b/source/_templates/icons/menu.html new file mode 100644 index 00000000..62923306 --- /dev/null +++ b/source/_templates/icons/menu.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/source/_templates/icons/search.html b/source/_templates/icons/search.html new file mode 100644 index 00000000..e26bb199 --- /dev/null +++ b/source/_templates/icons/search.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/source/_templates/layout.html b/source/_templates/layout.html index 4767aa91..354a6688 100644 --- a/source/_templates/layout.html +++ b/source/_templates/layout.html @@ -1,7 +1,6 @@ {# Import the theme's layout. #} {% extends "!layout.html" %} - {# Custom CSS overrides #} {% block extrahead %} @@ -60,9 +59,6 @@ {%- endfor %} {%- else %} {#- old style sidebars: using blocks -- should be deprecated #} - {%- block sidebartoc %} - {%- include "localtoc.html" %} - {%- endblock %} {%- block sidebarrel %} {%- include "relations.html" %} @@ -85,63 +81,40 @@ {%- endmacro %} {%- block header %} -
- - - - {%- include "top-navigation.html" %} -
+ {%- include "header.html" %} {%- endblock %} {%- block content %} -
- -
-
-
-
- - {% block body %} {% endblock %} -
-
-

This work is licensed under a Creative Commons Attribution 4.0 International License. ©{{ copyright }}

-

Creative Commons License

+ + {%- include "toc.html" %} + +
+ {% block body %} {% endblock %}
-
+ + {%- include "footer.html" %} +
{%- endblock %} {%- block footer %} + {%- include "cookie.html" %} {%- endblock %} \ No newline at end of file diff --git a/source/_templates/searchbox.html b/source/_templates/searchbox.html index e39bcc47..73d0b0f3 100644 --- a/source/_templates/searchbox.html +++ b/source/_templates/searchbox.html @@ -1,5 +1,21 @@ {%- if pagename != "search" and builder != "singlehtml" %} {%- endif %} \ No newline at end of file diff --git a/source/_templates/toc.html b/source/_templates/toc.html new file mode 100644 index 00000000..fd134cf7 --- /dev/null +++ b/source/_templates/toc.html @@ -0,0 +1,17 @@ +
+ + +
+ {%- block sidebartoc %} + {%- include "localtoc.html" %} + {%- endblock %} +
+ + +
\ No newline at end of file diff --git a/source/_templates/top-navigation.html b/source/_templates/top-navigation.html index 54e464e4..bc31a5bf 100644 --- a/source/_templates/top-navigation.html +++ b/source/_templates/top-navigation.html @@ -1,166 +1,166 @@
- +
+ +
-
- - Customer Login - + + Customer Login + + +
+
+ Product +
+ +
+
+
+
+
Multi-Cloud
+ + MinIO for VMware Tanzu + MinIO for OpenShift + MinIO for SUSE Rancher + MinIO for Amazon Elastic Kubernetes Service + MinIO for Azure Kubernetes Service + MinIO for Google Kubernetes Engine +
+ + + +
+
Features
+ + Active Active Replication + Identity & Access Management + Encryption + Bucket & Object Immutability + Bucket & Object Versioning + Data Life Cycle Management & Tiering + Automated Data Management Interfaces + Monitoring + Scalability + AWS S3 Compatibility +
+ +
+
+ + Hybrid Cloud Object Storage + Hybrid Cloud Object Storage + +
+ Overview + Architecture +
+
+
+ + Baremetal + Baremetal + +
+ Overview + Architecture +
+
+ + Erasure Code Calculator + Erasure Code Calculator + + + Reference Hardware + Reference Hardware + +
+
+
+
-
-
-
- Product -
+
+
+ Solutions -
+
-
-
-
Multi-Cloud
- - MinIO for VMware Tanzu - MinIO for OpenShift - MinIO for SUSE Rancher - MinIO for Amazon Elastic Kubernetes Service - MinIO for Azure Kubernetes Service - MinIO for Google Kubernetes Engine -
- - - -
-
Features
- - Active Active Replication - Identity & Access Management - Encryption - Bucket & Object Immutability - Bucket & Object Versioning - Data Life Cycle Management & Tiering - Automated Data Management Interfaces - Monitoring - Scalability - AWS S3 Compatibility -
- -
-
- - Hybrid Cloud Object Storage - Hybrid Cloud Object Storage - -
- Overview - Architecture -
-
-
- - Baremetal - Baremetal - -
- Overview - Architecture -
-
- - Erasure Code Calculator - Erasure Code Calculator - - - Reference Hardware - Reference Hardware - -
-
+ + Integrations + Browse our vast portfolio of integrations + + + VMware + Discover how MinIO integrates with VMware across the portfolio from the Persistent Data platform to TKGI and how we support their Kubernetes ambitions. + + + Splunk + Find out how MinIO is delivering performance at scale for Splunk SmartStores + + + Veeam + Learn how MinIO and Veeam have partnered to drive performance and scalability for a variety of backup use cases. + + + Azure to AWS S3 Gateway + Learn how MinIO allows Azure Blob to speak Amazon’s S3 API + + + HDFS Migration + Modernize and simplify your big data storage infrastructure with high-performance, Kubernetes-native object storage from MinIO. + + + Teradata + Discover why MinIO is the Native Object Store (NOS) of choice for at-scale Teradata deployments +
- -
-
- Solutions - -
-
- - Integrations - Browse our vast portfolio of integrations - - - VMware - Discover how MinIO integrates with VMware across the portfolio from the Persistent Data platform to TKGI and how we support their Kubernetes ambitions. - - - Splunk - Find out how MinIO is delivering performance at scale for Splunk SmartStores - - - Veeam - Learn how MinIO and Veeam have partnered to drive performance and scalability for a variety of backup use cases. - - - Azure to AWS S3 Gateway - Learn how MinIO allows Azure Blob to speak Amazon’s S3 API - - - HDFS Migration - Modernize and simplify your big data storage infrastructure with high-performance, Kubernetes-native object storage from MinIO. - - - Teradata - Discover why MinIO is the Native Object Store (NOS) of choice for at-scale Teradata deployments - -
-
-
-
- -
-
- Docs - -
-
- - MinIO Baremetal - MinIO Object Storage for Baremetal Infrastructure - - - MinIO Hybrid Cloud - MinIO Object Storage for Kubernetes-Managed Private and Public Cloud Infrastructure - - - MinIO for VMware Cloud Foundation - MinIO Object Storage for VMware Cloud Foundation 4.2 - - - MinIO Legacy Documentation - Legacy Documentation for MinIO Object Storage - -
-
-
-
- - - Blog - - - - Resources - - - - Partner - - - Pricing - - - Download
-
- \ No newline at end of file + +
+
+ Docs + +
+
+ + MinIO Baremetal + MinIO Object Storage for Baremetal Infrastructure + + + MinIO Hybrid Cloud + MinIO Object Storage for Kubernetes-Managed Private and Public Cloud Infrastructure + + + MinIO for VMware Cloud Foundation + MinIO Object Storage for VMware Cloud Foundation 4.2 + + + MinIO Legacy Documentation + Legacy Documentation for MinIO Object Storage + +
+
+
+
+ + + Blog + + + + Resources + + + + Partner + + + Pricing + + + Download +
\ No newline at end of file diff --git a/source/default-conf.py b/source/default-conf.py index 9a71ef83..05f41a76 100644 --- a/source/default-conf.py +++ b/source/default-conf.py @@ -237,7 +237,6 @@ html_favicon = '_static/favicon.png' html_sidebars = { '**' : [ - 'searchbox.html', 'navigation.html' ] } @@ -260,8 +259,6 @@ html_js_files = ['js/main.js'] html_extra_path = [ 'extra'] -html_permalinks_icon = "" - html_title = 'MinIO Object Storage for ' + platform.capitalize() # -- Options for Sphinx Tabs -------------------------------------------------