diff --git a/source/_static/fonts/geist-mono/GeistMono-Regular.woff2 b/source/_static/fonts/geist-mono/GeistMono-Regular.woff2 new file mode 100644 index 00000000..d6d865af Binary files /dev/null and b/source/_static/fonts/geist-mono/GeistMono-Regular.woff2 differ diff --git a/source/_static/fonts/geist/Geist-Bold.woff2 b/source/_static/fonts/geist/Geist-Bold.woff2 new file mode 100644 index 00000000..cb112fb5 Binary files /dev/null and b/source/_static/fonts/geist/Geist-Bold.woff2 differ diff --git a/source/_static/fonts/geist/Geist-Medium.woff2 b/source/_static/fonts/geist/Geist-Medium.woff2 new file mode 100644 index 00000000..9f5717da Binary files /dev/null and b/source/_static/fonts/geist/Geist-Medium.woff2 differ diff --git a/source/_static/fonts/geist/Geist-Regular.woff2 b/source/_static/fonts/geist/Geist-Regular.woff2 new file mode 100644 index 00000000..a7b2ff8c Binary files /dev/null and b/source/_static/fonts/geist/Geist-Regular.woff2 differ diff --git a/source/_static/fonts/satoshi/Satoshi-Bold.woff2 b/source/_static/fonts/satoshi/Satoshi-Bold.woff2 new file mode 100644 index 00000000..6765a90a Binary files /dev/null and b/source/_static/fonts/satoshi/Satoshi-Bold.woff2 differ diff --git a/source/_static/fonts/satoshi/Satoshi-Medium.woff2 b/source/_static/fonts/satoshi/Satoshi-Medium.woff2 new file mode 100644 index 00000000..466cb40e Binary files /dev/null and b/source/_static/fonts/satoshi/Satoshi-Medium.woff2 differ diff --git a/source/_static/fonts/satoshi/Satoshi-Regular.woff2 b/source/_static/fonts/satoshi/Satoshi-Regular.woff2 new file mode 100644 index 00000000..d7f633e6 Binary files /dev/null and b/source/_static/fonts/satoshi/Satoshi-Regular.woff2 differ diff --git a/source/_static/img/aistor.svg b/source/_static/img/aistor.svg new file mode 100644 index 00000000..69767bd9 --- /dev/null +++ b/source/_static/img/aistor.svg @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/source/_static/img/bg.png b/source/_static/img/bg.png new file mode 100644 index 00000000..a0015863 Binary files /dev/null and b/source/_static/img/bg.png differ diff --git a/source/_static/img/icons/aistor.svg b/source/_static/img/icons/aistor.svg new file mode 100644 index 00000000..020a437a --- /dev/null +++ b/source/_static/img/icons/aistor.svg @@ -0,0 +1,19 @@ + + + + + + + + + \ 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 index 537ee796..84d6f199 100644 --- a/source/_static/img/icons/nav-arrow-dark.svg +++ b/source/_static/img/icons/nav-arrow-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ 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 0fcd333a..61346b1b 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/nav/aihub.svg b/source/_static/img/icons/nav/aihub.svg new file mode 100644 index 00000000..f7d93efe --- /dev/null +++ b/source/_static/img/icons/nav/aihub.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/source/_static/img/icons/nav/architecture.svg b/source/_static/img/icons/nav/architecture.svg new file mode 100644 index 00000000..9b149883 --- /dev/null +++ b/source/_static/img/icons/nav/architecture.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/aws.svg b/source/_static/img/icons/nav/aws.svg new file mode 100644 index 00000000..72ef4326 --- /dev/null +++ b/source/_static/img/icons/nav/aws.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/azure.svg b/source/_static/img/icons/nav/azure.svg new file mode 100644 index 00000000..9f2aad16 --- /dev/null +++ b/source/_static/img/icons/nav/azure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/baremetal.svg b/source/_static/img/icons/nav/baremetal.svg new file mode 100644 index 00000000..c6284604 --- /dev/null +++ b/source/_static/img/icons/nav/baremetal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/cache.svg b/source/_static/img/icons/nav/cache.svg new file mode 100644 index 00000000..100bcab5 --- /dev/null +++ b/source/_static/img/icons/nav/cache.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/catalog.svg b/source/_static/img/icons/nav/catalog.svg new file mode 100644 index 00000000..b237fca5 --- /dev/null +++ b/source/_static/img/icons/nav/catalog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/console.svg b/source/_static/img/icons/nav/console.svg new file mode 100644 index 00000000..bbf2d72b --- /dev/null +++ b/source/_static/img/icons/nav/console.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/download.svg b/source/_static/img/icons/nav/download.svg new file mode 100644 index 00000000..c80273e5 --- /dev/null +++ b/source/_static/img/icons/nav/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/encryption.svg b/source/_static/img/icons/nav/encryption.svg new file mode 100644 index 00000000..1d46d613 --- /dev/null +++ b/source/_static/img/icons/nav/encryption.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/erasure-code-calculator.svg b/source/_static/img/icons/nav/erasure-code-calculator.svg new file mode 100644 index 00000000..909683a8 --- /dev/null +++ b/source/_static/img/icons/nav/erasure-code-calculator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/events.svg b/source/_static/img/icons/nav/events.svg new file mode 100644 index 00000000..a346977a --- /dev/null +++ b/source/_static/img/icons/nav/events.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/firewall.svg b/source/_static/img/icons/nav/firewall.svg new file mode 100644 index 00000000..f58bf03d --- /dev/null +++ b/source/_static/img/icons/nav/firewall.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/gcs.svg b/source/_static/img/icons/nav/gcs.svg new file mode 100644 index 00000000..d8bc5339 --- /dev/null +++ b/source/_static/img/icons/nav/gcs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/identity.svg b/source/_static/img/icons/nav/identity.svg new file mode 100644 index 00000000..6f594ca0 --- /dev/null +++ b/source/_static/img/icons/nav/identity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/immutability.svg b/source/_static/img/icons/nav/immutability.svg new file mode 100644 index 00000000..548e9a56 --- /dev/null +++ b/source/_static/img/icons/nav/immutability.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/integrations.svg b/source/_static/img/icons/nav/integrations.svg new file mode 100644 index 00000000..29acc90b --- /dev/null +++ b/source/_static/img/icons/nav/integrations.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/kms.svg b/source/_static/img/icons/nav/kms.svg new file mode 100644 index 00000000..76f3da96 --- /dev/null +++ b/source/_static/img/icons/nav/kms.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/lifecycle.svg b/source/_static/img/icons/nav/lifecycle.svg new file mode 100644 index 00000000..2fb9f053 --- /dev/null +++ b/source/_static/img/icons/nav/lifecycle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/object-prompt.svg b/source/_static/img/icons/nav/object-prompt.svg new file mode 100644 index 00000000..d7bfd45e --- /dev/null +++ b/source/_static/img/icons/nav/object-prompt.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/source/_static/img/icons/nav/observability.svg b/source/_static/img/icons/nav/observability.svg new file mode 100644 index 00000000..746e7fbf --- /dev/null +++ b/source/_static/img/icons/nav/observability.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/openshift.svg b/source/_static/img/icons/nav/openshift.svg new file mode 100644 index 00000000..fe5ca5f3 --- /dev/null +++ b/source/_static/img/icons/nav/openshift.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/overview.svg b/source/_static/img/icons/nav/overview.svg new file mode 100644 index 00000000..1b087d68 --- /dev/null +++ b/source/_static/img/icons/nav/overview.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/rancher.svg b/source/_static/img/icons/nav/rancher.svg new file mode 100644 index 00000000..a1ae8d46 --- /dev/null +++ b/source/_static/img/icons/nav/rancher.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/ref-hardware.svg b/source/_static/img/icons/nav/ref-hardware.svg new file mode 100644 index 00000000..4e853707 --- /dev/null +++ b/source/_static/img/icons/nav/ref-hardware.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/replication.svg b/source/_static/img/icons/nav/replication.svg new file mode 100644 index 00000000..85b52585 --- /dev/null +++ b/source/_static/img/icons/nav/replication.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/s3.svg b/source/_static/img/icons/nav/s3.svg new file mode 100644 index 00000000..86867c3a --- /dev/null +++ b/source/_static/img/icons/nav/s3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/subnet.svg b/source/_static/img/icons/nav/subnet.svg new file mode 100644 index 00000000..20a61157 --- /dev/null +++ b/source/_static/img/icons/nav/subnet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav/tanzu.svg b/source/_static/img/icons/nav/tanzu.svg new file mode 100644 index 00000000..8e198b1a --- /dev/null +++ b/source/_static/img/icons/nav/tanzu.svg @@ -0,0 +1 @@ + .7,2.1,1.9,2.2c0.1,0,0.1,0,0.2,0c1.2,0.1,2.2-0.7,2.4-1.8V80L211,80z"/> \ No newline at end of file diff --git a/source/_static/img/icons/nav/versioning.svg b/source/_static/img/icons/nav/versioning.svg new file mode 100644 index 00000000..bdff73f5 --- /dev/null +++ b/source/_static/img/icons/nav/versioning.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 ecbf1553..2a50d40b 100644 --- a/source/_static/js/main.js +++ b/source/_static/js/main.js @@ -76,18 +76,20 @@ window.addEventListener("DOMContentLoaded", (event) => { const readModeEl = document.getElementById("read-mode-toggle"); // Toggle read mode on icon click - readModeEl.addEventListener("click", (event) => { - document.documentElement.classList.toggle("read-mode"); - - // Re-calculate sidebar height - setSidebarHeight(); - - if (document.documentElement.classList.contains("read-mode")) { - localStorage.setItem("read-mode", "true"); - } else { - localStorage.setItem("read-mode", "false"); - } - }); + if(readModeEl) { + readModeEl.addEventListener("click", (event) => { + document.documentElement.classList.toggle("read-mode"); + + // Re-calculate sidebar height + setSidebarHeight(); + + if (document.documentElement.classList.contains("read-mode")) { + localStorage.setItem("read-mode", "true"); + } else { + localStorage.setItem("read-mode", "false"); + } + }); + } // Turn on read mode on smaller screen size. // Kinda like the responsive design. @@ -123,7 +125,7 @@ window.addEventListener("DOMContentLoaded", (event) => { // -------------------------------------------------- // Dark mode // -------------------------------------------------- - (function () { + /* (function () { const darkModeEl = document.getElementById("dark-mode-toggle"); darkModeEl.addEventListener("click", (event) => { @@ -136,7 +138,7 @@ window.addEventListener("DOMContentLoaded", (event) => { } }); })(); - + */ // -------------------------------------------------- // TOC, External Links diff --git a/source/_static/scss/includes/_aside.scss b/source/_static/scss/includes/_aside.scss index f36f0bba..e1b20d55 100644 --- a/source/_static/scss/includes/_aside.scss +++ b/source/_static/scss/includes/_aside.scss @@ -8,14 +8,19 @@ div.sidebar { width: $sidebar-width; position: sticky; top: 0; - background-color: var(--sidebar-bg); + background-color: $white; transition: opacity 400ms, transform 300ms; - padding: var(--content-padding); + //padding: var(--content-padding); + padding: 0; overflow-y: auto; height: 100vh; z-index: $z-index-header - 2; margin: 0; border: none; + + @include breakpoint-max(breakpoints(xl)) { + padding: var(--content-padding); + } // Sidebar is set to hidden by default and later shown with JS. // This prevents the scrollbar-flicker due to diff --git a/source/_static/scss/includes/_base.scss b/source/_static/scss/includes/_base.scss index 9f6ac2c1..f8ac99d0 100644 --- a/source/_static/scss/includes/_base.scss +++ b/source/_static/scss/includes/_base.scss @@ -34,4 +34,10 @@ body { display: flex; flex-direction: column; word-break: break-word; + overflow-x: hidden; + + @include breakpoint-min(breakpoints(xl)) { + background: url(../img/bg.png) no-repeat top 5rem right; + background-size: 120px; + } } \ No newline at end of file diff --git a/source/_static/scss/includes/_font.scss b/source/_static/scss/includes/_font.scss index ab419a6e..66628367 100644 --- a/source/_static/scss/includes/_font.scss +++ b/source/_static/scss/includes/_font.scss @@ -1,20 +1,50 @@ @font-face { - font-family: "Inter"; - src: url("../fonts/inter/Inter-Regular.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} - - @font-face { - font-family: "Inter"; - src: url("../fonts/inter/Inter-Medium.woff2") format("woff2"); - font-weight: 500; - font-style: normal; -} - -@font-face { - font-family: "Inter"; - src: url("../fonts/inter/Inter-Bold.woff2") format("woff2"); + font-family: Geist; + src: url(../fonts/geist/Geist-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; -} \ No newline at end of file + font-display: swap; + } + @font-face { + font-family: Geist; + src: url(../fonts/geist/Geist-Regular.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; + } + @font-face { + font-family: Geist; + src: url(../fonts/geist/Geist-Medium.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; + } + @font-face { + font-family: Geist Mono; + src: url(../fonts/geist-mono/GeistMono-Regular.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: Satoshi; + src: url(../fonts/satoshi/Satoshi-Bold.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; + } + @font-face { + font-family: Satoshi; + src: url(../fonts/satoshi/Satoshi-Regular.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; + } + @font-face { + font-family: Satoshi; + src: url(../fonts/satoshi/Satoshi-Medium.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; + } \ No newline at end of file diff --git a/source/_static/scss/includes/_header.scss b/source/_static/scss/includes/_header.scss index 44a6ccf7..c4e968f8 100644 --- a/source/_static/scss/includes/_header.scss +++ b/source/_static/scss/includes/_header.scss @@ -1,12 +1,13 @@ .header { - background-color: var(--header-bg); - box-shadow: 0 0 0.75rem rgba($black, 0.1); width: 100%; position: relative; z-index: $z-index-header; - & > .container { + .header__inner { position: relative; + display: flex; + align-items: center; + min-height: 4.25rem; } } @@ -162,7 +163,8 @@ .icon { &:not(.icon--switch) { & > svg { - fill: var(--header-text-color); + //fill: var(--header-text-color); + fill: $black; } &:hover { @@ -183,11 +185,13 @@ } .header__title { - font-size: 2.5rem; - text-align: center; - color: $white; - margin: 3rem 1rem 0; - padding-bottom: 3rem; + font-size: clamp(40px, 6vw, 72px); + line-height: 1.2; + color: $black; + padding-bottom: 5rem; + margin-left: -0.25rem; + font-family: $font-family-heading; + margin-top: 5rem; } #read-mode-toggle { diff --git a/source/_static/scss/includes/_layout.scss b/source/_static/scss/includes/_layout.scss index 5de093f0..ae5297cb 100644 --- a/source/_static/scss/includes/_layout.scss +++ b/source/_static/scss/includes/_layout.scss @@ -28,7 +28,7 @@ .content__main { flex: 1; min-width: 0; - padding: var(--content-padding); + padding: 0 var(--content-padding) var(--content-padding); } .container { diff --git a/source/_static/scss/includes/_misc.scss b/source/_static/scss/includes/_misc.scss index 4e7f2b19..a7dd6d47 100644 --- a/source/_static/scss/includes/_misc.scss +++ b/source/_static/scss/includes/_misc.scss @@ -231,7 +231,7 @@ // Copy button // ----------------------------- button.copybtn { - border-radius: $border-radius-sm; + border-radius: $border-radius; top: 0.1; right: 0rem; border: 0; diff --git a/source/_static/scss/includes/_nav.scss b/source/_static/scss/includes/_nav.scss index 5de98221..93dafba5 100644 --- a/source/_static/scss/includes/_nav.scss +++ b/source/_static/scss/includes/_nav.scss @@ -3,9 +3,9 @@ // ---------------------- .nav { align-items: center; - position: relative; gap: 0.5rem; font-size: $font-size-md; + margin-left: auto; .hide-aside { padding: 0.5rem; @@ -13,25 +13,40 @@ } } +.nav__item a, +.nav__item a:hover { + color: #000; +} + .nav__link { position: relative; + text-transform: uppercase; + font-weight: $font-weight-medium; + letter-spacing: 1.5px; + font-size: $font-size-xs; + font-family: $font-family-heading; + color: $black; - &, &:hover { - color: var(--nav-text-color); + color: $black; + } + + &.nav__link--alt { + color: $theme-red; } } .nav__link--download { - border: 1px solid var(--nav-download-border-color); - transition: background-color 300ms, color 300ms; - border-radius: $border-radius; - padding: 0.35rem 1.5rem !important; - margin-left: auto; + background-color: $theme-red; + border-radius: $border-radius-lg; + padding: 0.5rem 1rem !important; font-weight: $font-weight-medium; + transition: background-color 300ms, color 300ms; + color: $white !important; &:hover { - background-color: var(--nav-download-hover-bg); + background-color: darken($theme-red, 5%); + color: $white; } } @@ -87,7 +102,7 @@ a.nav__sub { } .nav__column--enterprise { - grid-column: span 2 / span 2; + grid-column: span 3 / span 3; } .nav__features { @@ -103,32 +118,14 @@ a.nav__sub { :root { &:not(.read-mode) { .nav { - margin: 0.5rem 0 0; display: flex; - gap: 2rem; + gap: 2.25rem; } .nav__item { .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 var(--nav-dropdown-bg); - position: absolute; - bottom: -1px; - transition: opacity 200ms; - } + background: var(--nav-item-arrow) no-repeat top 2.2rem right 0.25rem; } &:hover { @@ -146,7 +143,7 @@ a.nav__sub { .nav__link--dropdown { & > span { &:before { - opacity: 0; + //opacity: 0; } } } @@ -154,8 +151,7 @@ a.nav__sub { } .nav__link { - padding-top: 0.5rem; - padding-bottom: 0.6rem; + padding-block: 1.8rem; cursor: pointer; & > span { @@ -164,9 +160,10 @@ a.nav__sub { &:before { height: 4px; width: 100%; - background-color: var(--nav-item-border-color); + //background-color: var(--nav-item-border-color); + background-color: currentColor; position: absolute; - bottom: -18px; + bottom: -30px; left: 0; content: ""; transform: translateY(5px); @@ -200,48 +197,33 @@ a.nav__sub { .nav__dropdown { 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); + top: 60px; + transition: opacity 300ms, transform 300ms; + background-color: $white; z-index: 1; - - &:not(.nav__dropdown--cols) { - width: 385px; - } + isolation: isolate; + padding-inline: 2rem; + opacity: 0; + pointer-events: none; + transform: translate3d(0, 1rem, 0); + &:before { + content: ""; + position: absolute; + top: 0; + left: -50vmax; + right: -50vmax; + bottom: 0; + pointer-events: none; + z-index: -1; + background-color: $white; + border-top: 1px solid $neutral-subtle; + box-shadow: 24px 24px 48px 0px rgba(0, 0, 0, 0.08); + } + .nav__dropdown__inner { - padding: 1.5rem; max-height: calc(100vh - 5rem); overflow-y: auto; - border-radius: $border-radius-lg; - } - } - - .nav__dropdown--cols { - &:hover { - opacity: 1; - pointer-events: auto; - } - - width: 100%; - transform: translateX(0); - left: 0; - - .nav__dropdown__inner { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1.5rem; - } - - &.nav__dropdown--cols-3 { - .nav__dropdown__inner { - grid-template-columns: repeat(3, 1fr); - } } } @@ -274,6 +256,12 @@ a.nav__sub { } &.read-mode { + // Temp + .nav__dropdown { + padding-inline: 1.5rem; + margin-bottom: 1rem; + } + .nav { margin-top: 0; height: 100vh; @@ -321,17 +309,6 @@ a.nav__sub { margin: 1.5rem; text-align: center; display: block; - - &:hover { - color: var(--header-headings-color); - } - } - - .nav__dropdown { - .nav__dropdown__inner { - padding: 0.5rem 0.8rem; - margin-bottom: 1rem; - } } .nav__sub { @@ -404,10 +381,9 @@ a.nav__sub { } .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); + margin-bottom: 2rem; .search-toggle { margin-left: auto; @@ -424,7 +400,6 @@ a.nav__sub { display: flex; align-items: center; overflow: hidden; - padding: 0; height: 2.8rem; } @@ -433,7 +408,6 @@ a.nav__sub { overflow-x: auto; flex: 1 1 auto; scroll-behavior: smooth; - padding: 0 var(--content-padding); scroll-snap-type: x mandatory; @include hide-scrollbars(); @@ -444,10 +418,12 @@ a.nav__sub { .platform-nav__sub { position: relative; overflow: hidden; + box-shadow: 0 1px 0 0 $neutral-subtle; nav { + & > a { - border-bottom: 2px solid transparent; + border-bottom: 3px solid transparent; height: 2.8rem; transition: color 300ms; white-space: nowrap; @@ -461,44 +437,30 @@ a.nav__sub { .platform-nav__main { display: flex; align-items: center; + margin-bottom: 1rem; nav { margin: 0; display: flex; list-style: none; - gap: 1.5rem; align-items: center; & > a { - color: var(--text-muted-color); + color: $black; 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; - } - } + padding: 0 1.2rem; &.active { - border-bottom-color: var(--content-nav-active-border-color); - color: var(--text-muted-hover-color); + //border-bottom-color: var(--content-nav-active-border-color); + //color: var(--text-muted-hover-color); + border-bottom-color: $theme-red; } &:hover, &.active { - & > img { - opacity: 1; - } + color: $theme-red; } - &:hover { - color: var(--text-muted-hover-color); - } } } @@ -518,17 +480,20 @@ a.nav__sub { }; .platform-nav__sub { - background-color: var(--content-nav-sub-bg); font-size: $font-size-sm; + .container { + padding-inline: 0; + } + nav { display: flex; align-items: center; - gap: 1.5rem; & > a { font-weight: $font-weight-medium; color: var(--content-nav-sub-color); + padding: 0 1.2rem; &.active { border-bottom-color: var(--content-nav-sub-active-border-color); @@ -616,7 +581,7 @@ a.nav__sub { font-size: 0.6rem; display: block; border: 1px solid var(--is-meta-key-border-color); - border-radius: $border-radius-sm; + border-radius: $border-radius; padding: 0.1rem 0.2rem; margin: 0.15rem auto 0; font-style: normal; diff --git a/source/_static/scss/includes/_reset.scss b/source/_static/scss/includes/_reset.scss index 0bea0098..d6858799 100644 --- a/source/_static/scss/includes/_reset.scss +++ b/source/_static/scss/includes/_reset.scss @@ -45,7 +45,6 @@ h1, h2, h3, h4, h5, h6 { & > a, code { color: var(--headings-color); - font-size: inherit; padding: 0; } } @@ -108,7 +107,7 @@ div.highlight { background-color: var(--code-bg); color: var(--code-color); border-radius: $border-radius; - font-size: $font-size-md; + font-size: $font-size-xs; } tt.xref, code.xref, diff --git a/source/_static/scss/includes/_search.scss b/source/_static/scss/includes/_search.scss index 67f60bab..71fb6f16 100644 --- a/source/_static/scss/includes/_search.scss +++ b/source/_static/scss/includes/_search.scss @@ -18,7 +18,7 @@ top: 0; width: 100%; height: 100%; - background-color: var(--is-container-background); + //background-color: var(--is-container-background); z-index: -1; } } @@ -63,6 +63,7 @@ isolation: isolate; position: relative; + margin-bottom: 2rem; } .search--active, @@ -79,15 +80,15 @@ } .search__input { - background: transparent var(--is-search-icon) no-repeat center left 1rem; + background: $white var(--is-search-icon) no-repeat center left 1rem; background-size: 0.85rem; appearance: none; height: 2.75rem; width: 100%; padding: 0 1.5rem 0.05rem 2.5rem; color: var(--text-color); - border-radius: $border-radius; - border: 0; + border-radius: 5rem; + border: 1px solid $neutral-subtle; &::placeholder { color: var(--text-muted-color); @@ -101,7 +102,7 @@ appearance: none; border: 0; background: none; - border-radius: $border-radius-sm; + border-radius: $border-radius; cursor: pointer; display: none; margin-right: 0.75rem; @@ -302,7 +303,7 @@ color: var(--text-muted-color); line-height: 1; border: 1px solid var(--is-hit-platform-border-color); - border-radius: $border-radius-sm; + border-radius: $border-radius; padding: 0.1rem 0.2rem; width: fit-content; margin: 0.4rem 0.35rem 0 0; @@ -324,7 +325,7 @@ span { background: var(--is-highlight-color); padding: 0.2rem 0.4rem; - border-radius: $border-radius-sm; + border-radius: $border-radius; color: var(--text-color); } } @@ -350,7 +351,6 @@ .header { #search { - padding: 0 1rem 2.5rem; display: flex; .search-meta-key { @@ -382,28 +382,32 @@ } .search__form { - background-color: var(--is-search-bg); + //background-color: var(--is-search-bg); } .search__inner { max-width: 35rem; width: 100%; - margin: 0 auto; border-radius: $border-radius-lg; position: relative; + + @include breakpoint-max(breakpoints(xl)) { + margin: 0 auto; + } } .search__dropdown { - background-color: var(--is-dropdown-bg); + background-color: $white; z-index: 10; flex-direction: column; - border-radius: 0 0 $border-radius-lg $border-radius-lg; + border-radius: $border-radius-lg; display: none; max-height: 24.5rem; + box-shadow: 0px 7px 10px #00000036; } .search__filters { - background-color: var(--is-search-bg); + //background-color: var(--is-search-bg); &:not(.search__filters--empty) { .search__filters__list { diff --git a/source/_static/scss/includes/_temp.scss b/source/_static/scss/includes/_temp.scss new file mode 100644 index 00000000..c8f7d9d3 --- /dev/null +++ b/source/_static/scss/includes/_temp.scss @@ -0,0 +1,449 @@ +* { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scroll-snap-strictness: proximity; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: #D6DAE1; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + .col-span-2 { + grid-column: span 2 / span 2; + } + .col-start-1 { + grid-column-start: 1; + } + .row-span-4 { + grid-row: span 4 / span 4; + } + .row-start-1 { + grid-row-start: 1; + } + .-my-8 { + margin-top: -2rem; + margin-bottom: -2rem; + } + .my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + .mb-2 { + margin-bottom: 0.5rem; + } + .mb-3 { + margin-bottom: 0.75rem; + } + .mb-5 { + margin-bottom: 1.25rem; + } + .ml-3 { + margin-left: 0.75rem; + } + .ml-auto { + margin-left: auto; + } + .mt-2 { + margin-top: 0.5rem; + } + .mt-4 { + margin-top: 1rem; + } + .mt-5 { + margin-top: 1.25rem; + } + .block { + display: block; + } + .flex { + display: flex; + } + .grid { + display: grid; + } + .hidden { + display: none; + } + .w-3\.5 { + width: 0.875rem; + } + .grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .flex-col { + flex-direction: column; + } + .items-center { + align-items: center; + } + .gap-2 { + gap: 0.5rem; + } + .gap-3 { + gap: 0.75rem; + } + .rounded { + border-radius: 0.25rem; + } + .border-b { + border-bottom-width: 1px; + } + .border-l { + border-left-width: 1px; + } + .bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + } + .px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; + } + .px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; + } + .px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + .py-8 { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pb-2\.5 { + padding-bottom: 0.625rem; + } + .pl-3 { + padding-left: 0.75rem; + } + .pl-4 { + padding-left: 1rem; + } + .pl-6 { + padding-left: 1.5rem; + } + .font-heading { + font-family: Satoshi, sans-serif; + } + .text-md { + font-size: 1rem; + } + .text-sm { + font-size: 0.875rem; + } + .text-xs { + font-size: 0.75rem; + } + .font-bold { + font-weight: 700; + } + .font-medium { + font-weight: 500; + } + .uppercase { + text-transform: uppercase; + } + .tracking-widest { + letter-spacing: 0.1em; + } + .text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); + } + .text-muted { + color: rgba(0, 0, 0, 0.65); + } + .\*\:flex > * { + display: flex; + } + .\*\:items-center > * { + align-items: center; + } + .\*\:gap-3 > * { + gap: 0.75rem; + } + .\*\:rounded > * { + border-radius: 0.25rem; + } + .\*\:px-3 > * { + padding-left: 0.75rem; + padding-right: 0.75rem; + } + .\*\:py-2 > * { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + .\*\:font-bold > * { + font-weight: 700; + } + .\*\:font-medium > * { + font-weight: 500; + } + .hover\:bg-gray-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + } + @media not all and (min-width: 1280px) { + .max-xl\:order-1 { + order: 1; + } + .max-xl\:hidden { + display: none; + } + .max-xl\:w-4 { + width: 1rem; + } + .max-xl\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + } + @media (min-width: 1280px) { + .xl\:row-span-4 { + grid-row: span 4 / span 4; + } + .xl\:-my-8 { + margin-top: -2rem; + margin-bottom: -2rem; + } + .xl\:mb-5 { + margin-bottom: 1.25rem; + } + .xl\:grid { + display: grid; + } + .xl\:hidden { + display: none; + } + .xl\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .xl\:gap-3 { + gap: 0.75rem; + } + .xl\:border-l { + border-left-width: 1px; + } + .xl\:py-8 { + padding-top: 2rem; + padding-bottom: 2rem; + } + .xl\:pl-4 { + padding-left: 1rem; + } + .xl\:pl-6 { + padding-left: 1.5rem; + } + .xl\:text-md { + font-size: 1rem; + } + } + +.pb-2 { + padding-bottom: .5rem; +} + +.grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.border-l { + border-left-width: 1px; +} +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.py-7 { + padding-top: 1.75rem; + padding-bottom: 1.75rem; +} +@media (min-width: 1280px) { + .xl\:border-l { + border-left-width: 1px; + } + .xl\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .xl\:py-7 { + padding-top: 1.75rem; + padding-bottom: 1.75rem; + } +} + +.col-span-3 { + grid-column: span 3 / span 3; +} +.grid { + display: grid; +} +.grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} +.gap-5 { + gap: 1.25rem; +} +.py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} +@media not all and (min-width: 1280px) { + .max-xl\:pl-3 { + padding-left: 0.75rem; + } +} +@media (min-width: 1280px) { + .xl\:grid { + display: grid; + } + .xl\:py-8 { + padding-top: 2rem; + padding-bottom: 2rem; + } +} + +.mx-28 { + margin-left: 7rem; + margin-right: 7rem; +} +.inline-flex { + display: inline-flex; +} +.h-14 { + height: 3.5rem; +} +.w-full { + width: 100%; +} +.max-w-sm { + max-width: 24rem; +} +.flex-1 { + flex: 1 1 0%; +} +.shrink-0 { + flex-shrink: 0; +} +.items-center { + align-items: center; +} +.overflow-x-auto { + overflow-x: auto; +} +.rounded-lg { + border-radius: 0.5rem; +} +.rounded-md { + border-radius: 0.375rem; +} +.border { + border-width: 1px; +} +.border-theme-neutral-subtle { + --tw-border-opacity: 1; + border-color: rgb(214 218 225 / var(--tw-border-opacity)); +} +.border-theme-red { + --tw-border-opacity: 1; + border-color: rgb(207 22 62 / var(--tw-border-opacity)); +} +.border-transparent { + border-color: transparent; +} +.bg-white\/75 { + background-color: rgb(255 255 255 / 0.75); +} +.p-0\.5 { + padding: 0.125rem; +} +.font-heading { + font-family: Satoshi, sans-serif; +} +.font-bold { + font-weight: 700; +} +.text-theme-red { + --tw-text-opacity: 1; + color: rgb(207 22 62 / var(--tw-text-opacity)); +} +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.duration-300 { + transition-duration: 300ms; +} +.hover\:text-theme-red:hover { + --tw-text-opacity: 1; + color: rgb(207 22 62 / var(--tw-text-opacity)); +} +@media (min-width: 1280px) { + .xl\:mx-28 { + margin-left: 7rem; + margin-right: 7rem; + } +} +.\[\&\.active\]\:border-theme-red.active { + --tw-border-opacity: 1; + border-color: rgb(207 22 62 / var(--tw-border-opacity)); +} +.\[\&\.active\]\:text-theme-red.active { + --tw-text-opacity: 1; + color: rgb(207 22 62 / var(--tw-text-opacity)); +} + +.docs-menu { + max-width: 650px; + margin: 0 auto 5rem; + width: 100%; + + & > a { + display: flex; + align-items: center; + justify-content: center; + color: $black; + + &:hover { + color: $theme-red; + } + } +} \ No newline at end of file diff --git a/source/_static/scss/includes/_variables.scss b/source/_static/scss/includes/_variables.scss index 37e59f66..a5c5a436 100644 --- a/source/_static/scss/includes/_variables.scss +++ b/source/_static/scss/includes/_variables.scss @@ -1,7 +1,7 @@ // Colors $white: #ffffff; $black: #000000; -$theme-red: #c72e49; +$theme-red: #CF163E; // Gray shades light $light-100: #f3f4f6; @@ -18,6 +18,11 @@ $dark-300: #2E394A; $dark-400: #59667A; $dark-500: #8A93A4; +// Theme color palette +$tertiary: #8C8C8C; +$neutral-subtle: #D6DAE1; +$border-subtle: #566176; + // Breakpoints $breakpoints: ( xs: 0, @@ -31,11 +36,11 @@ $breakpoints: ( $z-index-header: 11; // Body -$font-family-base: 'Inter', sans-serif; -$font-family-headings: 'Inter', sans-serif; -$font-family-mono: Courier New, Courier ,monospace; -$root-font-size: 16px; -$body-font-size: 1rem; +$font-family-base: 'Geist', sans-serif; +$font-family-heading: 'Satoshi', sans-serif; +$font-family-mono: 'Geist Mono', sans-serif; +$root-font-size: 1rem; +$body-font-size: 1.125rem; $body-line-height: 1.6; // Text @@ -43,13 +48,13 @@ $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; -$font-size-lg: 1.125rem; +$font-size-xs: 12px; +$font-size-sm: 14px; +$font-size-md: 16px; +$font-size-lg: 20px; // Layout -$container-width: 1400px; +$container-width: 1300px; // Font weight $font-weight-normal: 400; @@ -63,9 +68,11 @@ $header-light-bg: #031733; $sidebar-width: 19.75rem; // Border Radius -$border-radius: 0.1875rem; -$border-radius-sm: 0.125rem; -$border-radius-lg: 0.3125rem; +$border-radius: 4px; +$border-radius-md: 6px; +$border-radius-lg: 8px; +$border-radius-xl: 10px; + // Nav - FIXME $nav-sub-hover-bg: #f8f8f8; diff --git a/source/_static/scss/main.scss b/source/_static/scss/main.scss index 65c0d24b..effd04e4 100644 --- a/source/_static/scss/main.scss +++ b/source/_static/scss/main.scss @@ -14,4 +14,5 @@ @import 'includes/footer'; @import 'includes/nav'; @import 'includes/alert'; -@import 'includes/content'; \ No newline at end of file +@import 'includes/content'; +@import 'includes/temp'; \ No newline at end of file diff --git a/source/_templates/header.html b/source/_templates/header.html index e7bd51c1..62402961 100644 --- a/source/_templates/header.html +++ b/source/_templates/header.html @@ -1,73 +1,57 @@
-
-
-
- -
-
- {{ docs[0].name }} - - {%- include "icons/chevron-down.html" %} -
- -
- - + -
- + {%- include "top-navigation.html" %} + + + +
+ +

Documentation

- -
-
+ - {%- include "top-navigation.html" %} + {%- include "platform-navigation.html" %} -

Documentation

- - {%- if pagename != "search" %} -
\ No newline at end of file diff --git a/source/_templates/platform-navigation.html b/source/_templates/platform-navigation.html index 4a81a0ed..8fc04768 100644 --- a/source/_templates/platform-navigation.html +++ b/source/_templates/platform-navigation.html @@ -1,38 +1,27 @@
-
-
+ + Docker + + + + Linux + + + + macOS + + + + Windows + + + {%- if pagename != "search" %}
- - Customer Login - -
Product
-
-
MinIO Enterprise Object Store
- - Overview +
+
+
+
Overview
+ + + What is AIStor? + + + + + +
- Architecture - -
Features
- -
- -
- -
-
MinIO for Public Cloud
- AWS - GCS - Azure - -
MinIO for Private Cloud
- OpenShift - SUSE Rancher - Tanzu - -
MinIO for Baremetal
- Linux and Windows -
- -
- - Determine your raw and usable capacity - Erasure Code Calculator - - - MinIO's Recommended Hardware Configuration - Reference Hardware - - - +
+
+
Tools
+ + + Erasure Code Calculator + Erasure Code Calculator + + + Determine your raw and usable capacity across a range of erasure coding settings. + + + + Reference Hardware + Reference Hardware + + + MinIO’s recommended Configuration and reference hardware for building large scale data infrastructure. + +
@@ -85,112 +119,135 @@
Solutions
-
-
- - AI Storage - Object storage is powering the AI revolution. Learn how MinIO - is leading the AI storage market through performance at - scale. +
+
+ + + AI Storage + + Learn how MinIO is leading the AI + storage market from its exclusive features to performance at scale. - - Modern Datalakes - Modern, multi-engine datalakes depend on object stores that - deliver performance at scale. Learn more about this core MinIO - use case. + + HDFS Migration + Modernize and simplify your big data + storage infrastructure with cloud native storage with AIStor. - - Hybrid Cloud - Effective multi-cloud storage strategies rely on utilizing - architecture and tools that can function seamlessly across - diverse environments. + + Snowflake + Learn how to leverage Snowflake + external tables to query data without having to move it. - - Equinix - Repatriate your data onto the cloud you control with MinIO on Equinix to lower costs - while maintaining public cloud adjacency. +
+ + + Integrations + Integrations with MinIO + + Browse our expansive list of
+ integrations with links to the relevant
documentation. + +
+ + Veeam + Learn how MinIO and Veeam have partnered deliver superior RTO and RPO. - - Splunk - Find out how MinIO is delivering performance at scale for - Splunk SmartStores. + + Modern Datalakes + Learn how modern, multi-engine data lakeshouses depend on MinIO's AIStor. - - - Snowflake - Query and analyze multiple data sources, including streaming - data, residing on MinIO with the Snowflake Data Cloud. No need - to move the data, just query using SnowSQL. + + Equinix + Repatriate your data onto the cloud you control with MinIO and Equinix. - - SQL Server - Discover how to pair SQL Server 2022 with MinIO to run queries - on your data on any cloud - without having to move it. + + SQL Server + Learn how to leverage SQL Server 2022 + with MinIO to run queries on your data without having to move it. - - HDFS Migration - Modernize and simplify your big data storage infrastructure - with high-performance, Kubernetes-native object storage from - MinIO. + + Commvault + Learn how Commvault and MinIO are partnered to deliver performance at scale for mission critical backup and restore workloads. - - VMware - Discover how MinIO integrates with VMware across the portfolio + + Hybrid Cloud + Learn how enterprises use MinIO to build AI data infrastructure that runs on any cloud - public, private or colo. + + + Splunk + Find out how MinIO is delivering performance at scale for Splunk SmartStores. + + + VMware + Discover how MinIO integrates with VMware across the portfolio from the Persistent Data platform to TKG and how we support - their Kubernetes ambitions. - - - Veeam - Learn how MinIO and Veeam have partnered to drive performance - and scalability for a variety of backup use cases. - - - Commvault - Learn how Commvault and MinIO are partnered to deliver - performance at scale for mission critical backup and restore - workloads. - - - Integrations - Browse our vast portfolio of integrations. - -
-
-
- -
-
- Community -
-
-
- - GitHub - Join our GitHub open source community: explore, experiment, ask questions, and contribute. - - - Slack Channel - The MinIO Community Slack provides an open forum for discussing topics related to MinIO. All support is provided on a best-effort basis. + their Kubernetes ambitions.
- - Docs - +
+
+ Open Source +
+
+ + Github Community + Explore, experiment, ask questions and contribute. + + + Docs + Development guides. + + + Slack Channel + Open Forum for discussing topics related to MinIO. + + +
+ + + + Download MinIO Object Store + + Get MinIO's open source server, client, and SDK. + +
+
+
- - Blog - - - - Resources - - - - Training - +
+
+ Resources +
+
+ + Resources Home + Browse our library of white papers, + solution briefs, benchmarks and videos. + + + Blog + Product updates, company news, and educational content. + + + Training + Learn the MinIO Way and Become a + Data Infrastructure Expert. + + +
+ + + + Events + + Join us to take advantage to meet with MinIO partners, employees, and subject-matter experts. + +
+
+
Partner @@ -200,5 +257,9 @@ Pricing + + Login + + Download
\ No newline at end of file diff --git a/source/default-conf.py b/source/default-conf.py index a4f530b9..2c785df3 100644 --- a/source/default-conf.py +++ b/source/default-conf.py @@ -283,16 +283,16 @@ html_context = { 'docs': [ # The first item has to be the current docs site # { - 'name': 'MinIO Server Documentation', + 'name': 'MinIO Server', 'current': True }, { - 'name': 'DirectPV Documentation', + 'name': 'DirectPV', 'url': 'https://min.io/docs/directpv', 'external': True }, { - 'name': 'KES Documentation', + 'name': 'KES', 'url': 'https://min.io/docs/kes', 'external': True }