mirror of
https://github.com/minio/docs.git
synced 2025-07-30 07:03:26 +03:00
UI Enhancements: Recommended video section, k8s active class, mobile nav links (#726)
- Give recommended video section a makeover <img width="355" alt="Screenshot 2023-02-08 at 14 05 44" src="https://user-images.githubusercontent.com/13393018/217500836-348b4063-2c54-4b23-8daa-20b127aa7d79.png"> - Fix k8s's active nav state - Fix nav links wrapping on mobile (current behaviour on production looks likes below) <img width="637" alt="Screenshot 2023-02-08 at 11 50 10" src="https://user-images.githubusercontent.com/13393018/217501024-1b8d21d6-0787-46b0-a8f4-fba8e1086f36.png">
This commit is contained in:
Rushan
GitHub
1
source/_static/img/icons/play-dark.svg
Normal file
1
source/_static/img/icons/play-dark.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" xmlns:v="https://vecta.io/nano"><path d="M15.15 14.25v11.5a1.46 1.46 0 0 0 .775 1.35 1.34 1.34 0 0 0 1.525-.05l9.05-5.8c.467-.3.7-.717.7-1.25s-.233-.95-.7-1.25l-9.05-5.8a1.34 1.34 0 0 0-1.525-.05 1.46 1.46 0 0 0-.775 1.35zM20 40c-2.733 0-5.317-.525-7.75-1.575s-4.558-2.483-6.375-4.3-3.25-3.942-4.3-6.375S0 22.733 0 20s.525-5.317 1.575-7.75 2.483-4.558 4.3-6.375 3.942-3.25 6.375-4.3S17.267 0 20 0s5.317.525 7.75 1.575 4.558 2.483 6.375 4.3 3.25 3.942 4.3 6.375S40 17.267 40 20s-.525 5.317-1.575 7.75-2.483 4.558-4.3 6.375-3.942 3.25-6.375 4.3S22.733 40 20 40zm0-3c4.667 0 8.667-1.667 12-5s5-7.333 5-12-1.667-8.667-5-12-7.333-5-12-5-8.667 1.667-12 5-5 7.333-5 12 1.667 8.667 5 12 7.333 5 12 5z" fill="#697995"/></svg>
|
||||
|
After Width: | Height: | Size: 791 B |
3
source/_static/img/icons/play.svg
Normal file
3
source/_static/img/icons/play.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.15 14.25V25.75C15.15 26.35 15.4083 26.8 15.925 27.1C16.4417 27.4 16.95 27.3833 17.45 27.05L26.5 21.25C26.9667 20.95 27.2 20.5333 27.2 20C27.2 19.4667 26.9667 19.05 26.5 18.75L17.45 12.95C16.95 12.6167 16.4417 12.6 15.925 12.9C15.4083 13.2 15.15 13.65 15.15 14.25ZM20 40C17.2667 40 14.6833 39.475 12.25 38.425C9.81667 37.375 7.69167 35.9417 5.875 34.125C4.05833 32.3083 2.625 30.1833 1.575 27.75C0.525 25.3167 0 22.7333 0 20C0 17.2667 0.525 14.6833 1.575 12.25C2.625 9.81667 4.05833 7.69167 5.875 5.875C7.69167 4.05833 9.81667 2.625 12.25 1.575C14.6833 0.525 17.2667 0 20 0C22.7333 0 25.3167 0.525 27.75 1.575C30.1833 2.625 32.3083 4.05833 34.125 5.875C35.9417 7.69167 37.375 9.81667 38.425 12.25C39.475 14.6833 40 17.2667 40 20C40 22.7333 39.475 25.3167 38.425 27.75C37.375 30.1833 35.9417 32.3083 34.125 34.125C32.3083 35.9417 30.1833 37.375 27.75 38.425C25.3167 39.475 22.7333 40 20 40ZM20 37C24.6667 37 28.6667 35.3333 32 32C35.3333 28.6667 37 24.6667 37 20C37 15.3333 35.3333 11.3333 32 8C28.6667 4.66667 24.6667 3 20 3C15.3333 3 11.3333 4.66667 8 8C4.66667 11.3333 3 15.3333 3 20C3 24.6667 4.66667 28.6667 8 32C11.3333 35.3333 15.3333 37 20 37Z" fill="#5C5C5C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -181,19 +181,15 @@ window.addEventListener("DOMContentLoaded", (event) => {
|
||||
}
|
||||
if (extVideoLinks) {
|
||||
// Minor cleanups to the CSS classes
|
||||
extVideoLinks.classList.remove("docutils", "container")
|
||||
extVideoLinks.classList.add("topic")
|
||||
extVideoLinks.classList.remove("docutils", "container");
|
||||
|
||||
// Inject the header text
|
||||
|
||||
const extVideoLinkHeader = document.createElement("div");
|
||||
extVideoLinkHeader.classList.add("extVideoLink-header");
|
||||
extVideoLinkHeader.innerHTML += "<p>Recommended Videos</p>";
|
||||
const extVideoLinkHeader = document.createElement("p");
|
||||
extVideoLinkHeader.classList.add("topic-title");
|
||||
extVideoLinkHeader.innerText = "Recommended Videos";
|
||||
extVideoLinks.prepend(extVideoLinkHeader);
|
||||
|
||||
|
||||
asideElements.push(extVideoLinks)
|
||||
|
||||
// Need to force-add extlinks, they don't seem to get added as-is for some reason
|
||||
|
||||
const extVideoItems = document.querySelectorAll(".extlinks-video a");
|
||||
@ -241,29 +237,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
|
||||
});
|
||||
})();
|
||||
|
||||
|
||||
// --------------------------------------------------
|
||||
// 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(".platform-nav__inner a.active")
|
||||
.classList.remove("active");
|
||||
document
|
||||
.querySelector(".platform-nav__dropdown nav.active")
|
||||
.classList.remove("active");
|
||||
document.getElementById(target).classList.add("active");
|
||||
nav.classList.add("active");
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
|
||||
// --------------------------------------------------
|
||||
// Asides: Sidebar and Nav
|
||||
@ -428,23 +401,17 @@ window.addEventListener("DOMContentLoaded", (event) => {
|
||||
})();
|
||||
|
||||
// --------------------------------------------------
|
||||
// Carousel
|
||||
// Arrows for cards and platforms navs
|
||||
// --------------------------------------------------
|
||||
(function () {
|
||||
const carousels = document.querySelectorAll(".sd-cards-carousel");
|
||||
var scrollLength = 1000;
|
||||
|
||||
const arrowIcon = `<svg width="13" height="10" viewBox="0 0 12 10">
|
||||
<path d="M1.707 4.137H11.5c.277 0 .5.23.5.516 0 .137-.051.27-.145.363s-.223.152-.355.152H1.707l3.148 3.254a.53.53 0 0 1 0 .73c-.098.102-.223.152-.355.152s-.258-.051-.355-.152l-4-4.133c-.195-.203-.195-.531 0-.734l4-4.133A.5.5 0 0 1 4.5 0a.5.5 0 0 1 .355.152.53.53 0 0 1 0 .73zm0 0" fill-rule="evenodd" fill="currentColor" />
|
||||
</svg>`;
|
||||
|
||||
function toggleArrows(elem, arrowLeft, arrowRight) {
|
||||
function toggleArrows(elem, arrowLeft, arrowRight, callback) {
|
||||
var scrollWidth = elem.scrollWidth;
|
||||
var scrollLeft = elem.scrollLeft + elem.clientWidth;
|
||||
|
||||
// Set the scroll length based on the window width
|
||||
window.innerWidth < 1400 ? scrollLength = 500 : scrollLength = 1000;
|
||||
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
scrollWidth - scrollLeft <= 1
|
||||
? arrowRight.classList.add("inactive")
|
||||
: arrowRight.classList.remove("inactive");
|
||||
@ -453,8 +420,22 @@ window.addEventListener("DOMContentLoaded", (event) => {
|
||||
: arrowLeft.classList.remove("inactive");
|
||||
}
|
||||
|
||||
if(carousels.length > 0) {
|
||||
carousels.forEach((item) => {
|
||||
// --------------------------------------------------
|
||||
// Cards
|
||||
// --------------------------------------------------
|
||||
const cards = document.querySelectorAll(".sd-cards-carousel");
|
||||
var scrollLength = 1000;
|
||||
const cardsArrowIcon = `<svg width="13" height="10" viewBox="0 0 12 10">
|
||||
<path d="M1.707 4.137H11.5c.277 0 .5.23.5.516 0 .137-.051.27-.145.363s-.223.152-.355.152H1.707l3.148 3.254a.53.53 0 0 1 0 .73c-.098.102-.223.152-.355.152s-.258-.051-.355-.152l-4-4.133c-.195-.203-.195-.531 0-.734l4-4.133A.5.5 0 0 1 4.5 0a.5.5 0 0 1 .355.152.53.53 0 0 1 0 .73zm0 0" fill-rule="evenodd" fill="currentColor" />
|
||||
</svg>`;
|
||||
|
||||
// Set the scroll length based on the window width
|
||||
function setScrollLength() {
|
||||
window.innerWidth < 1400 ? scrollLength = 500 : scrollLength = 1000;
|
||||
}
|
||||
|
||||
if(cards.length > 0) {
|
||||
cards.forEach((item) => {
|
||||
// Get the amount of columns
|
||||
const colsAmount = item.className.match(/(^|\s)sd-card-cols-(\w+)/g).pop().split('-').pop();
|
||||
|
||||
@ -466,14 +447,14 @@ window.addEventListener("DOMContentLoaded", (event) => {
|
||||
// Create the arrows
|
||||
const arrowLeft = document.createElement("button");
|
||||
arrowLeft.classList.add("carousel-arrow", "carousel-arrow--left");
|
||||
arrowLeft.innerHTML = arrowIcon;
|
||||
arrowLeft.innerHTML = cardsArrowIcon;
|
||||
arrowLeft.onclick = function() {
|
||||
item.scrollLeft -= scrollLength/colsAmount;
|
||||
}
|
||||
|
||||
const arrowRight = document.createElement("button");
|
||||
arrowRight.classList.add("carousel-arrow", "carousel-arrow--right");
|
||||
arrowRight.innerHTML = arrowIcon;
|
||||
arrowRight.innerHTML = cardsArrowIcon;
|
||||
arrowRight.onclick = function() {
|
||||
item.scrollLeft += scrollLength/colsAmount;
|
||||
}
|
||||
@ -486,9 +467,58 @@ window.addEventListener("DOMContentLoaded", (event) => {
|
||||
|
||||
// Toggle arrows on manual scroll
|
||||
item.addEventListener("scroll", () => {
|
||||
toggleArrows(item, arrowLeft, arrowRight);
|
||||
toggleArrows(item, arrowLeft, arrowRight, setScrollLength);
|
||||
});
|
||||
toggleArrows(item, arrowLeft, arrowRight);
|
||||
toggleArrows(item, arrowLeft, arrowRight, setScrollLength);
|
||||
});
|
||||
}
|
||||
|
||||
// --------------------------------------------------
|
||||
// Platform navs
|
||||
// --------------------------------------------------
|
||||
const platformNavs = document.querySelectorAll(".platform-nav nav");
|
||||
const platformNavArrowIcon = `<svg width="25" height="25" viewbox="0 0 48 48">
|
||||
<path d="M17.7 34.9q-.4-.5-.425-1.1-.025-.6.425-1.05l8.8-8.8-8.85-8.85q-.4-.4-.375-1.075.025-.675.425-1.075.5-.5 1.075-.475.575.025 1.025.475l9.95 9.95q.25.25.35.5.1.25.1.55 0 .3-.1.55-.1.25-.35.5l-9.9 9.9q-.45.45-1.05.425-.6-.025-1.1-.425Z" />
|
||||
</svg>`;
|
||||
function sc(el) {
|
||||
if (el.scrollWidth > el.clientWidth) {
|
||||
el.parentNode.classList.add("scrollable");
|
||||
}
|
||||
else {
|
||||
el.parentNode.classList.remove("scrollable");
|
||||
}
|
||||
}
|
||||
|
||||
if(platformNavs.length > 0) {
|
||||
platformNavs.forEach((item) => {
|
||||
const arrowLeft = document.createElement("button");
|
||||
arrowLeft.type = "button";
|
||||
arrowLeft.innerHTML = platformNavArrowIcon;
|
||||
arrowLeft.setAttribute("data-nav-dir", "left");
|
||||
arrowLeft.onclick = function() {
|
||||
item.scrollLeft -= 200;
|
||||
}
|
||||
|
||||
const arrowRight = document.createElement("button");
|
||||
arrowRight.type = "button";
|
||||
arrowRight.innerHTML = platformNavArrowIcon;
|
||||
arrowRight.setAttribute("data-nav-dir", "right");
|
||||
arrowRight.onclick = function() {
|
||||
item.scrollLeft += 200;
|
||||
}
|
||||
|
||||
item.insertAdjacentElement("beforebegin", arrowLeft);
|
||||
item.insertAdjacentElement("afterend", arrowRight);
|
||||
|
||||
item.addEventListener("scroll", () => {
|
||||
toggleArrows(item, arrowLeft, arrowRight, sc(item));
|
||||
});
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
toggleArrows(item, arrowLeft, arrowRight, sc(item));
|
||||
});
|
||||
|
||||
toggleArrows(item, arrowLeft, arrowRight, sc(item));
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
@ -373,24 +373,6 @@
|
||||
// ----------------------
|
||||
// Platform nav
|
||||
// ----------------------
|
||||
.platform-nav {
|
||||
background-color: var(--content-nav-bg);
|
||||
font-size: $font-size-md;
|
||||
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) {
|
||||
.platform-nav__inner {
|
||||
@ -409,59 +391,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.platform-nav__inner {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 2.5rem;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
.platform-nav {
|
||||
background-color: var(--content-nav-bg);
|
||||
font-size: $font-size-md;
|
||||
position: relative;
|
||||
box-shadow: 0 0.1875rem 0.375rem rgba($black, 0.15);
|
||||
|
||||
@include breakpoint-max(breakpoints(lg)) {
|
||||
gap: 1.75rem;
|
||||
}
|
||||
|
||||
& > a {
|
||||
color: var(--text-muted-color);
|
||||
font-weight: $font-weight-medium;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0 0.7rem;
|
||||
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 {
|
||||
.search-toggle {
|
||||
margin-left: auto;
|
||||
margin-right: -0.5rem;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
@ -469,31 +407,116 @@
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
height: 2.8rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
flex: 1 1 auto;
|
||||
scroll-behavior: smooth;
|
||||
padding: 0 var(--content-padding);
|
||||
scroll-snap-type: x mandatory;
|
||||
|
||||
@include hide-scrollbars();
|
||||
}
|
||||
}
|
||||
|
||||
.platform-nav__main,
|
||||
.platform-nav__sub {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
nav {
|
||||
& > a {
|
||||
border-bottom: 2px solid transparent;
|
||||
height: 2.8rem;
|
||||
transition: color 300ms;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platform-nav__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
nav {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
|
||||
& > a {
|
||||
color: var(--text-muted-color);
|
||||
font-weight: $font-weight-medium;
|
||||
|
||||
& > img {
|
||||
margin-right: 0.5rem;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-dir] {
|
||||
svg {
|
||||
fill: var(--content-nav-arrow-color);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-dir="right"] {
|
||||
background: linear-gradient(270deg, var(--content-nav-bg) 65%, var(--content-nav-bg) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
[data-nav-dir="left"] {
|
||||
background: linear-gradient(90deg, var(--content-nav-bg) 0%, var(--content-nav-bg) 65%, transparent 100%);
|
||||
}
|
||||
};
|
||||
|
||||
.platform-nav__dropdown {
|
||||
.platform-nav__sub {
|
||||
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);
|
||||
@ -508,25 +531,68 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-dir] {
|
||||
svg {
|
||||
fill: var(--content-nav-sub-color);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-dir="right"] {
|
||||
background: linear-gradient(270deg, var(--content-nav-sub-bg) 65%, var(--content-nav-sub-bg) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
[data-nav-dir="left"] {
|
||||
background: linear-gradient(90deg, var(--content-nav-sub-bg) 0%, var(--content-nav-sub-bg) 65%, transparent 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.platform-nav > .container,
|
||||
.platform-nav__dropdown {
|
||||
position: relative;
|
||||
[data-nav-dir] {
|
||||
flex-shrink: 0;
|
||||
opacity: 1;
|
||||
width: 2.75rem;
|
||||
height: 100%;
|
||||
appearance: none;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
padding-top: 0.15rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
&.inactive {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
[data-nav-dir] {
|
||||
transition: transform 300ms, opacity 300ms;
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-dir="right"] {
|
||||
right: 0;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
&.inactive {
|
||||
transform: translateX(30%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-dir="left"] {
|
||||
left: 0;
|
||||
padding-right: 0.5rem;
|
||||
&.inactive {
|
||||
transform: translateX(-30%);
|
||||
}
|
||||
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.search-toggle--keyboard {
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
height: 100%;
|
||||
background-color: var(--is-container-background);
|
||||
display: none;
|
||||
padding: 3rem;
|
||||
padding: 2.8rem;
|
||||
|
||||
@include breakpoint-max(breakpoints(sm)) {
|
||||
padding: 1rem;
|
||||
|
||||
@ -40,6 +40,7 @@ $theme-properties: (
|
||||
--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%)),
|
||||
--content-nav-arrow-color: $black #697995,
|
||||
|
||||
// Sidebar
|
||||
--sidebar-bg: $light-100 $dark-100,
|
||||
@ -111,6 +112,9 @@ $theme-properties: (
|
||||
--alert-warning-code-bg: #f3dfe1 #3d1014,
|
||||
--alert-warning-link-decoration-color: #e3c3c6 #54141a,
|
||||
|
||||
// Recommended videos
|
||||
--recommended-videos-marker: url("../img/icons/play.svg") url("../img/icons/play-dark.svg"),
|
||||
|
||||
// Search
|
||||
--is-dropdown-bg: #edf1f3 #1c232d,
|
||||
--is-container-background: rgba($black, 0.25) rgba(16, 21, 28, 0.851),
|
||||
|
||||
@ -28,37 +28,6 @@ div.topic {
|
||||
z-index: $z-index-header - 2;
|
||||
}
|
||||
|
||||
@include breakpoint-max(breakpoints(sm)) {
|
||||
.extlinks-video {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.extlinks-video {
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: .25rem 0 0 1rem;
|
||||
font-size: $font-size-sm;
|
||||
color: var(--text-muted-color);
|
||||
|
||||
ul {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
}
|
||||
border-bottom: 1px $dark-500 solid;
|
||||
padding: .5rem 0 .5rem 0;
|
||||
}
|
||||
|
||||
.extVideoLink-header {
|
||||
& > p {
|
||||
color: var(--headings-color);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-size: $font-size-md;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
@ -69,8 +38,15 @@ div.topic {
|
||||
&:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&.search-toggle {
|
||||
order: 3;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.active {
|
||||
#table-of-contents {
|
||||
& > ul {
|
||||
@ -97,15 +73,8 @@ div.topic {
|
||||
#table-of-contents {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
border-bottom: 1px $dark-500 solid;
|
||||
padding: .5rem 0 .5rem 0;
|
||||
|
||||
.topic-title {
|
||||
color: var(--headings-color);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-size: $font-size-md;
|
||||
|
||||
@include breakpoint-max(breakpoints(lg)) {
|
||||
padding: 0.85rem 1rem;
|
||||
background-color: var(--theme-light-bg);
|
||||
@ -146,6 +115,7 @@ div.topic {
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1.75rem;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
@ -182,4 +152,59 @@ div.topic {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p.topic-title {
|
||||
color: var(--headings-color);
|
||||
line-height: 1;
|
||||
font-size: $font-size-md;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.extlinks-video {
|
||||
p.topic-title {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
& > li {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
|
||||
a {
|
||||
font-size: $font-size-sm;
|
||||
color: var(--text-muted-color);
|
||||
padding: 0.25rem 0;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
margin-right: 0.75rem;
|
||||
background: var(--recommended-videos-marker) no-repeat center;
|
||||
flex-shrink: 0;
|
||||
background-size: 100%;
|
||||
margin-top: 0.425rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint-max(breakpoints(lg)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,54 +1,57 @@
|
||||
<div class="platform-nav">
|
||||
<div class="container">
|
||||
<nav class="platform-nav__inner">
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/upstream/index.html" class="{{ 'active' if doc_platform == 'kubernetes' }}">
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes.svg',1) }}" alt="Kubernetes" />
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes-inactive.svg',1) }}" alt="Kubernetes" />
|
||||
Kubernetes
|
||||
</a>
|
||||
|
||||
<a rel="noreferrer" href="/docs/minio/container/index.html" class="{{ 'active' if doc_platform == 'container' }}">
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/docker.svg',1) }}" alt="Docker" />
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/docker-inactive.svg',1) }}" alt="Docker" />
|
||||
Docker
|
||||
</a>
|
||||
|
||||
<a rel="noreferrer" href="/docs/minio/linux/index.html" class="{{ 'active' if doc_platform == 'linux' }}">
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/linux.svg',1) }}" alt="Linux" />
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/linux-inactive.svg',1) }}" alt="Linux" />
|
||||
Linux
|
||||
</a>
|
||||
|
||||
<a rel="noreferrer" href="/docs/minio/macos/index.html" class="{{ 'active' if doc_platform == 'macos' }}">
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/macos.svg',1) }}" alt="macOS" />
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/macos-inactive.svg',1) }}" alt="macOS" />
|
||||
macOS
|
||||
</a>
|
||||
|
||||
<a rel="noreferrer" href="/docs/minio/windows/index.html" class="{{ 'active' if doc_platform == 'windows' }}">
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/windows.svg',1) }}" alt="Windows" />
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/windows-inactive.svg',1) }}" alt="Windows" />
|
||||
Windows
|
||||
</a>
|
||||
<div class="platform-nav__main">
|
||||
<div class="container">
|
||||
<nav>
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/upstream/index.html" class="{{ 'active' if doc_platform == 'k8s' }}">
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes.svg',1) }}" alt="Kubernetes" />
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes-inactive.svg',1) }}" alt="Kubernetes" />
|
||||
Kubernetes
|
||||
</a>
|
||||
|
||||
<a rel="noreferrer" href="/docs/minio/container/index.html" class="{{ 'active' if doc_platform == 'container' }}">
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/docker.svg',1) }}" alt="Docker" />
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/docker-inactive.svg',1) }}" alt="Docker" />
|
||||
Docker
|
||||
</a>
|
||||
|
||||
{%- if pagename != "search" %}
|
||||
<button type="button" class="icon search-toggle search-toggle--keyboard visible-rm">
|
||||
{%- include "icons/search.html" %}
|
||||
Search
|
||||
</button>
|
||||
{%- endif %}
|
||||
</nav>
|
||||
<a rel="noreferrer" href="/docs/minio/linux/index.html" class="{{ 'active' if doc_platform == 'linux' }}">
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/linux.svg',1) }}" alt="Linux" />
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/linux-inactive.svg',1) }}" alt="Linux" />
|
||||
Linux
|
||||
</a>
|
||||
|
||||
<a rel="noreferrer" href="/docs/minio/macos/index.html" class="{{ 'active' if doc_platform == 'macos' }}">
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/macos.svg',1) }}" alt="macOS" />
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/macos-inactive.svg',1) }}" alt="macOS" />
|
||||
macOS
|
||||
</a>
|
||||
|
||||
<a rel="noreferrer" href="/docs/minio/windows/index.html" class="{{ 'active' if doc_platform == 'windows' }}">
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/windows.svg',1) }}" alt="Windows" />
|
||||
<img class="hidden-rm" src="{{ pathto('_static/img/icons/windows-inactive.svg',1) }}" alt="Windows" />
|
||||
Windows
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
{%- if pagename != "search" %}
|
||||
<button type="button" class="icon search-toggle search-toggle--keyboard visible-rm">
|
||||
{%- include "icons/search.html" %}
|
||||
Search
|
||||
</button>
|
||||
{%- endif %}
|
||||
</div>
|
||||
|
||||
<div class="platform-nav__dropdown">
|
||||
<div class="container">
|
||||
<nav id="cn-kubernetes" class="{{ 'active' if doc_platform == 'k8s' or doc_platform == 'openshift' or doc_platform == 'eks' or doc_platform == 'gke' or doc_platform == 'aks' }}">
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/upstream/index.html" class="{{ 'active' if doc_platform == 'k8s' }}">Upstream</a>
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/openshift/index.html" class="{{ 'active' if doc_platform == 'openshift' }}">Redhat Openshift</a>
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/eks/index.html" class="{{ 'active' if doc_platform == 'eks' }}">Amazon Elastic Kubernetes Service</a>
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/gke/index.html" class="{{ 'active' if doc_platform == 'gke' }}">Google Kubernetes Engine</a>
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/aks/index.html" class="{{ 'active' if doc_platform == 'aks' }}">Azure Kubernetes Service</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{%- if doc_platform == 'k8s' or doc_platform == 'openshift' or doc_platform == 'eks' or doc_platform == 'gke' or doc_platform == 'aks' -%}
|
||||
<div class="platform-nav__sub">
|
||||
<div class="container">
|
||||
<nav>
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/upstream/index.html" class="{{ 'active' if doc_platform == 'k8s' }}">Upstream</a>
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/openshift/index.html" class="{{ 'active' if doc_platform == 'openshift' }}">Redhat Openshift</a>
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/eks/index.html" class="{{ 'active' if doc_platform == 'eks' }}">Amazon Elastic Kubernetes Service</a>
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/gke/index.html" class="{{ 'active' if doc_platform == 'gke' }}">Google Kubernetes Engine</a>
|
||||
<a rel="noreferrer" href="/docs/minio/kubernetes/aks/index.html" class="{{ 'active' if doc_platform == 'aks' }}">Azure Kubernetes Service</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user