1
0
mirror of https://github.com/minio/docs.git synced 2025-06-05 19:57:02 +03:00

Update header and other related style properties

This commit is contained in:
Rushan 2022-01-31 12:08:40 +04:00 committed by Ravind Kumar
parent 873847ad3d
commit d602ed5b68
10 changed files with 971 additions and 687 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -26,7 +26,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
// Toggle Sidebars
$('body').on('click', '[data-toggle]', function() {
var target = $(this).attr('data-toggle');
target === 'sidebar' ? $('body').removeClass('nav-toggled') : $('body').removeClass('sidebar-toggled');
$('body').toggleClass(target + '-toggled');
target === 'sidebar' ? $('body').removeClass('nav-active') : $('body').removeClass('sidebar-active');
$('body').toggleClass(target + '-active');
});
});

View File

@ -25,12 +25,12 @@
}
position: absolute;
top: 0.7rem;
right: 0.15rem;
top: 0;
right: 0;
}
}
.sidebar-toggled {
.sidebar-active {
.sidebar {
@include breakpoint-min(breakpoints(xl)) {
transform: translate3d(-100%, 0, 0);

View File

@ -23,6 +23,7 @@ body {
font-weight: $font-weight-normal;
display: flex;
flex-direction: column;
overflow: hidden;
}
a {

View File

@ -6,43 +6,46 @@
--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;
display: flex;
align-items: center;
box-shadow: 0 0 0.75rem rgba($black, 0.1);
width: 100%;
z-index: $z-index-header;
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0 1.25rem;
padding: 0 $content-padding;
@include breakpoint-max(breakpoints(lg)) {
height: $header-height-mobile;
display: flex;
align-items: center;
padding: 0 $content-padding-mobile;
}
}
.logo {
flex-shrink: 0;
display: inline-flex;
margin-left: 0.75rem;
display: flex;
align-items: center;
&>img {
height: $logo-height;
box-shadow: none;
}
@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;
margin-left: auto;
font-size: 0.9375rem;
@include breakpoint-min(breakpoints(lg)) {
display: flex;
align-items: center;
}
font-size: $font-size-md;
@include breakpoint-max(breakpoints(lg)) {
height: 100vh;
@ -56,28 +59,52 @@
box-shadow: $nav-mobile-box-shadow;
overflow-y: auto;
background-color: $nav-mobile-bg;
padding-top: 2.5rem;
}
& > .toggle-icon {
@include breakpoint-min(breakpoints(lg)) {
display: none;
}
position: absolute;
top: 0.7rem;
right: 0.7rem;
}
}
.nav-toggled {
.nav {
@include breakpoint-max(breakpoints(lg)) {
transform: translate3d(0, 0, 0);
opacity: 1;
z-index: $nav-active-z-index;
}
}
.nav__top,
.nav__bottom {
@include breakpoint-min(breakpoints(lg)) {
display: flex;
margin: 0.25rem 0;
}
align-items: center;
position: relative;
gap: 2rem;
justify-content: flex-end;
}
.nav__top {
border-bottom: 1px solid var(--nav-top-border-color);
@include breakpoint-max(breakpoints(lg)) {
border-bottom: 1px solid $gray-100;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.nav__link {
font-size: $font-size-sm;
}
}
.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;
}
}
}
.nav__item {
@ -99,8 +126,8 @@
@include breakpoint-min(breakpoints(lg)) {
.nav__link {
margin-right: 0.75rem;
background: var(--nav-item-arrow) no-repeat top 2.45rem right 0.25rem;
padding-right: 1.25rem;
background: var(--nav-item-arrow) no-repeat top 20px right 0.25rem;
&:after {
opacity: 0;
@ -115,7 +142,7 @@
border-width: 0 6px 4px;
border-color: transparent transparent #fff;
position: absolute;
bottom: 1rem;
bottom: -2px;
transition: opacity 200ms;
z-index: 2;
}
@ -140,15 +167,8 @@
}
@include breakpoint-min(breakpoints(lg)) {
padding: 0 1.25rem;
margin-left: 0.25rem;
padding: 0.5rem 0 0.6rem;
cursor: pointer;
&:not(.nav__link--download) {
height: $header-height;
display: flex;
align-items: center;
}
& > span {
position: relative;
@ -158,7 +178,7 @@
width: 100%;
background-color: var(--nav-item-border-color);
position: absolute;
bottom: -8px;
bottom: -4px;
left: 0;
content: "";
transform: translateY(5px);
@ -203,8 +223,9 @@
border: 1px solid $theme-red;
transition: background-color 300ms, color 300ms;
border-radius: $border-radius;
padding: 0.5rem 1.25rem 0.6rem;
padding: 0.2rem 0.95rem 0.3rem;
margin-left: auto;
&:hover {
background-color: $theme-red;
color: $white;
@ -220,11 +241,11 @@
.nav__dropdown {
@include breakpoint-min(breakpoints(lg)) {
width: 385px;
width: 365px;
transform: translateX(calc(-50% + 3rem));
position: absolute;
left: 0;
top: 4rem;
top: 2.65rem;
opacity: 0;
transition: opacity 200ms;
pointer-events: none;
@ -258,11 +279,10 @@
pointer-events: auto;
}
width: calc(100% - 3.5rem);
max-width: 1200px;
width: 100%;
transform: translateX(0);
left: auto;
right: 1.75rem;
left: 0;
.nav__dropdown__inner {
padding: 2.5rem 2.25rem;
@ -314,11 +334,11 @@
@include breakpoint-min(breakpoints(lg)) {
padding: 0 1rem;
&:not(:first-child) {
&:not(:last-child) {
flex: 1;
}
&:first-child {
&:last-child {
& > .nav__sub {
margin-top: 1rem;
}
@ -387,8 +407,8 @@
}
}
.nav__seperator {
border-left: 1px solid var(--nav-bg-gray);
.nav__separator {
border-left: 1px solid $gray-100;
margin: 0 1rem;
@include breakpoint-max(breakpoints(lg)) {

View File

@ -23,7 +23,7 @@
}
}
.sidebar-toggled {
.sidebar-active {
.content__main {
padding-left: $content-padding;
}

View File

@ -6,6 +6,13 @@ $theme-red-light: rgba($theme-red, 0.5);
$theme-red-lighter: rgba($theme-red, 0.25);
$theme-hover-bg: rgb(245, 245, 245);
// Gray
$gray-100: #F7F7F7;
$gray-200: #dedede;
$gray-300: #c6c6c6;
$gray-400: #adadad;
$gray-500: #949494;
// Overrides for sphinx-design
// https://sphinx-design.readthedocs.io/en/alabaster-theme/css_variables.html
@ -46,10 +53,17 @@ $text-hover-color: darken($text-color, 20%);
$text-muted-color: #727272;
// 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: 1.75rem;
$content-padding-mobile: 1.25rem;
// Font weight
@ -63,7 +77,8 @@ $link-hover-color: #0036b9;
// Header
$header-height: 5rem;
$header-height: 5.65rem;
$header-height-mobile: 4.5rem;
$header-bg: $white;
$logo-height: 1.05rem;

View File

@ -75,23 +75,24 @@
{%- block header %}
<header class="header">
<i class="toggle-icon toggle-icon--docs" data-toggle="sidebar"></i>
<a
class="logo"
href="https://min.io"
>
<img
src="{{ pathto('_static/img/docs-logo.svg',1) }}"
alt="Logo"
/>
</a>
<div class="logo">
<i class="toggle-icon toggle-icon--docs" data-toggle="sidebar"></i>
<a class="logo__link" href="https://min.io">
<img
width="85"
src="{{ pathto('_static/img/docs-logo.svg',1) }}"
alt="Logo"
/>
</a>
</div>
{%- include "top-navigation.html" %}
</header>
{%- endblock %}
{%- block content %}
<section class="content">
<section class="content scrollbar">
<aside class="sidebar scrollbar">
<i class="toggle-icon toggle-icon--close" data-toggle="sidebar"></i>

View File

@ -1,150 +1,166 @@
<div class="nav">
<i class="toggle-icon toggle-icon--close" data-toggle="nav"></i>
<div class="nav__item">
<div class="nav__link nav__link--dropdown">
<span>Product</span>
</div>
<div class="nav__top">
<a target="_blank" rel="noreferrer" href="https://subnet.min.io/" class="nav__link">
<span>Customer Login</span>
</a>
</div>
<div class="nav__bottom">
<div class="nav__item">
<div class="nav__link nav__link--dropdown" data-href="product">
<span>Product</span>
</div>
<div class="nav__dropdown nav__dropdown--product">
<div class="nav__dropdown__inner">
<div class="nav__feature">
<div class="nav__column">
<div class="nav__sub">
<a href="https://min.io/hybrid-cloud-storage" class="nav__lead">
<img src="{{ pathto('_static/img/icons/hybrid-cloud.svg',1) }}" alt="Hybrid Cloud Object Storage">
Hybrid Cloud Object Storage
</a>
<div class="nav__jump">
<a href="https://min.io/hybrid-cloud-storage#overview">Overview</a>
<a href="https://min.io/hybrid-cloud-storage#architecture">Architecture</a>
</div>
<div class="nav__dropdown nav__dropdown--product">
<div class="nav__dropdown__inner">
<div class="nav__feature">
<div class="nav__column">
<div class="nav__column__title">Multi-Cloud</div>
<a href="https://min.io/product/private-cloud-vmware-tanzu" class="nav__sub" data-nav="vm-tanzu">MinIO for VMware Tanzu</a>
<a href="https://min.io/product/private-cloud-red-hat-openshift" class="nav__sub" data-nav="open-shift">MinIO for OpenShift</a>
<a href="https://min.io/product/multicloud-suse-rancher" class="nav__sub" data-nav="multicloud-suse-rancher">MinIO for SUSE Rancher</a>
<a href="https://min.io/product/multicloud-elastic-kubernetes-service" class="nav__sub" data-nav="elastic-kubernetes-service">MinIO for Amazon Elastic Kubernetes Service</a>
<a href="https://min.io/product/multicloud-azure-kubernetes-service" class="nav__sub" data-nav="azure-kubernetes-service">MinIO for Azure Kubernetes Service</a>
<a href="https://min.io/product/multicloud-google-kubernetes-service" class="nav__sub" data-nav="google-kubernetes-engine">MinIO for Google Kubernetes Engine</a>
</div>
<div class="nav__sub">
<a href="https://min.io/product/overview" class="nav__lead">
<img src="{{ pathto('_static/img/icons/baremetal.svg',1) }}" alt="Baremetal">
Baremetal
</a>
<div class="nav__jump">
<a href="https://min.io/product/overview#features">Overview</a>
<a href="https://min.io/product/overview#architecture">Architecture</a>
</div>
<i class="nav__separator"></i>
<div class="nav__column">
<div class="nav__column__title">Features</div>
<a href="https://min.io/product/active-data-replication-for-object-storage" class="nav__sub" data-nav="active-active-replication">Active Active Replication</a>
<a href="https://min.io/product/identity-and-access-management" class="nav__sub" data-nav="scalable-identity-access-management">Identity & Access Management</a>
<a href="https://min.io/product/enterprise-object-storage-encryption" class="nav__sub" data-nav="encryption">Encryption</a>
<a href="https://min.io/product/data-immutability-for-object-storage" class="nav__sub" data-nav="object-immutability">Bucket & Object Immutability</a>
<a href="https://min.io/product/object-versioning-bucket-versioning" class="nav__sub" data-nav="versioning">Bucket & Object Versioning</a>
<a href="https://min.io/product/automated-data-tiering-lifecycle-management" class="nav__sub" data-nav="life-cycle">Data Life Cycle Management & Tiering</a>
<a href="https://min.io/product/automated-cloud-data-management-interface" class="nav__sub" data-nav="interface">Automated Data Management Interfaces</a>
<a href="https://min.io/product/object-storage-performance-monitoring" class="nav__sub" data-nav="monitoring">Monitoring</a>
<a href="https://min.io/product/scalable-object-storage" class="nav__sub" data-nav="scalable">Scalability</a>
<a href="https://min.io/product/s3-compatibility" class="nav__sub" data-nav="s3-compatibility">AWS S3 Compatibility</a>
</div>
<a href="https://min.io/product/erasure-code-calculator" class="nav__sub nav__lead">
<img src="{{ pathto('_static/img/icons/erasure-code-calculator.svg',1) }}" alt="Erasure Code Calculator">
Erasure Code Calculator
</a>
<a href="https://min.io/product/reference-hardware" class="nav__sub nav__lead">
<img src="{{ pathto('_static/img/icons/ref-hardware.svg',1) }}" alt="Reference Hardware">
Reference Hardware
</a>
</div>
<div class="nav__column">
<div class="nav__column__title">Features</div>
<a href="https://min.io/product/active-data-replication-for-object-storage" class="nav__sub">Active Active Replication</a>
<a href="https://min.io/product/identity-and-access-management" class="nav__sub">Identity & Access Management</a>
<a href="https://min.io/product/enterprise-object-storage-encryption" class="nav__sub">Encryption</a>
<a href="https://min.io/product/data-immutability-for-object-storage" class="nav__sub">Bucket & Object Immutability</a>
<a href="https://min.io/product/object-versioning-bucket-versioning" class="nav__sub">Bucket & Object Versioning</a>
<a href="https://min.io/product/automated-data-tiering-lifecycle-management" class="nav__sub">Data Life Cycle Management & Tiering</a>
<a href="https://min.io/product/automated-cloud-data-management-interface" class="nav__sub">Automated Data Management Interfaces</a>
<a href="https://min.io/product/object-storage-performance-monitoring" class="nav__sub">Monitoring</a>
<a href="https://min.io/product/scalable-object-storage" class="nav__sub">Scalability</a>
</div>
<i class="nav__seperator"></i>
<div class="nav__column">
<div class="nav__column__title">Native Versions</div>
<a href="https://min.io/product/private-cloud-vmware-tanzu" class="nav__sub">MinIO for VMware Tanzu</a>
<a href="https://min.io/product/private-cloud-red-hat-openshift" class="nav__sub">MinIO for OpenShift</a>
<a href="https://min.io/product/multicloud-elastic-kubernetes-service" class="nav__sub">MinIO for Amazon Elastic Kubernetes Service</a>
<a href="https://min.io/product/multicloud-azure-kubernetes-service" class="nav__sub">MinIO for Azure Kubernetes Service</a>
<a href="https://min.io/product/multicloud-google-kubernetes-service" class="nav__sub">MinIO for Google Kubernetes Engine</a>
<div class="nav__column">
<div class="nav__sub" data-nav="hybrid-cloud-storage">
<a href="https://min.io/hybrid-cloud-storage" class="nav__lead">
<img src="{{ pathto('_static/img/icons/hybrid-cloud.svg',1) }}" alt="Hybrid Cloud Object Storage" />
Hybrid Cloud Object Storage
</a>
<div class="nav__jump">
<a href="https://min.io/hybrid-cloud-storage#overview">Overview</a>
<a href="https://min.io/hybrid-cloud-storage#architecture">Architecture</a>
</div>
</div>
<div class="nav__sub" data-nav="overview">
<a href="https://min.io/product/overview" class="nav__lead">
<img src="{{ pathto('_static/img/icons/baremetal.svg',1) }}" alt="Baremetal" />
Baremetal
</a>
<div class="nav__jump">
<a href="https://min.io/product/overview#features">Overview</a>
<a href="https://min.io/product/overview#architecture">Architecture</a>
</div>
</div>
<a href="https://min.io/product/erasure-code-calculator" class="nav__sub nav__lead" data-nav="erasure-code-calculator">
<img class="h-6" src="{{ pathto('_static/img/icons/erasure-code-calculator.svg',1) }}" alt="Erasure Code Calculator" />
Erasure Code Calculator
</a>
<a href="https://min.io/product/reference-hardware" class="nav__sub nav__lead" data-nav="reference-hardware">
<img src="{{ pathto('_static/img/icons/ref-hardware.svg',1) }}" alt="Reference Hardware" />
Reference Hardware
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="nav__item">
<div class="nav__link nav__link--dropdown nav__link--active">
<span>Docs</span>
<div class="nav__dropdown">
<div class="nav__dropdown__inner">
<a class="nav__sub" href="https://docs.min.io/minio/baremetal">
<span class="">MinIO Baremetal</span>
<small class="">MinIO Object Storage for Baremetal Infrastructure</small>
</a>
<a class="nav__sub" href="https://docs.min.io/minio/k8s">
<span class="">MinIO Hybrid Cloud</span>
<small class="">MinIO Object Storage for Kubernetes-Managed Private and Public Cloud Infrastructure</small>
</a>
<a class="nav__sub" href="https://docs.min.io/minio/vsphere">
<span class="">MinIO for VMware Cloud Foundation</span>
<small class="">MinIO Object Storage for VMware Cloud Foundation 4.2</small>
</a>
<a class="nav__sub" href="https://docs.min.io">
<span class="">MinIO Legacy Documentation</span>
<small class="">Legacy Documentation for MinIO Object Storage</small>
</a>
</div>
</div>
</div>
</div>
<div class="nav__item">
<div class="nav__link nav__link--dropdown">
<span>Solutions</span>
<div class="nav__item">
<div class="nav__link nav__link--dropdown" data-href="solutions">
<span>Solutions</span>
<div class="nav__dropdown">
<div class="nav__dropdown__inner">
<a href="https://min.io/solutions/vmware" class="nav__sub">
<span>VMware</span>
<small>Discover how MinIO integrates with VMware across the portfolio from the Persistent Data platform to TKGI and how we support their Kubernetes ambitions.</small>
</a>
<a href="https://min.io/solutions/optimize-splunk-smartstore-performance" class="nav__sub">
<span>Splunk</span>
<small>Find out how MinIO is delivering performance at scale for Splunk SmartStores</small>
</a>
<a href="https://min.io/solutions/veeam" class="nav__sub">
<span>Veeam</span>
<small>Learn how MinIO and Veeam have partnered to drive performance and scalability for a variety of backup use cases.</small>
</a>
<a href="https://min.io/solutions/azure-s3-api-integration" class="nav__sub">
<span>Azure to AWS S3 Gateway</span>
<small>Learn how MinIO allows Azure Blob to speak Amazons S3 API</small>
</a>
<a href="https://min.io/solutions/hdfs-migration" class="nav__sub">
<span>HDFS Migration</span>
<small>Modernize and simplify your big data storage infrastructure with high-performance, Kubernetes-native object storage from MinIO.</small>
</a>
<a href="https://min.io/solutions/native-object-store-for-teradata" class="nav__sub">
<span>Teradata</span>
<small>Discover why MinIO is the Native Object Store (NOS) of choice for at-scale Teradata deployments</small>
</a>
<a href="https://min.io/product/integrations" class="nav__sub">
<span>Integrations</span>
<small>Browse our vast portfolio of integrations</small>
</a>
<div class="nav__dropdown">
<div class="nav__dropdown__inner">
<a href="https://min.io/product/integrations" class="nav__sub" data-nav="integrations">
<span>Integrations</span>
<small>Browse our vast portfolio of integrations</small>
</a>
<a href="https://min.io/solutions/vmware" class="nav__sub" data-nav="vmware">
<span>VMware</span>
<small>Discover how MinIO integrates with VMware across the portfolio from the Persistent Data platform to TKGI and how we support their Kubernetes ambitions.</small>
</a>
<a href="https://min.io/solutions/optimize-splunk-smartstore-performance" class="nav__sub" data-nav="splunk">
<span>Splunk</span>
<small>Find out how MinIO is delivering performance at scale for Splunk SmartStores</small>
</a>
<a href="https://min.io/solutions/veeam" class="nav__sub" data-nav="veeam">
<span>Veeam</span>
<small>Learn how MinIO and Veeam have partnered to drive performance and scalability for a variety of backup use cases.</small>
</a>
<a href="https://min.io/solutions/azure-s3-api-integration" class="nav__sub" data-nav="azure">
<span>Azure to AWS S3 Gateway</span>
<small>Learn how MinIO allows Azure Blob to speak Amazons S3 API</small>
</a>
<a href="https://min.io/solutions/hdfs-migration" class="nav__sub" data-nav="hdfs-migration">
<span>HDFS Migration</span>
<small>Modernize and simplify your big data storage infrastructure with high-performance, Kubernetes-native object storage from MinIO.</small>
</a>
<a href="https://min.io/solutions/native-object-store-for-teradata" class="nav__sub" data-nav="teradata">
<span>Teradata</span>
<small>Discover why MinIO is the Native Object Store (NOS) of choice for at-scale Teradata deployments</small>
</a>
</div>
</div>
</div>
</div>
<div class="nav__item">
<div class="nav__link nav__link--active nav__link--dropdown">
<span>Docs</span>
<div class="nav__dropdown">
<div class="nav__dropdown__inner">
<a href="https://docs.min.io/minio/baremetal" class="nav__sub">
<span class="">MinIO Baremetal</span>
<small class="">MinIO Object Storage for Baremetal Infrastructure</small>
</a>
<a href="https://docs.min.io/minio/k8s" class="nav__sub">
<span class="">MinIO Hybrid Cloud</span>
<small class="">MinIO Object Storage for Kubernetes-Managed Private and Public Cloud Infrastructure</small>
</a>
<a href="https://docs.min.io/minio/vsphere" class="nav__sub">
<span class="">MinIO for VMware Cloud Foundation</span>
<small class="">MinIO Object Storage for VMware Cloud Foundation 4.2</small>
</a>
<a href="https://docs.min.io" class="nav__sub">
<span class="">MinIO Legacy Documentation</span>
<small class="">Legacy Documentation for MinIO Object Storage</small>
</a>
</div>
</div>
</div>
</div>
<a href="https://blog.min.io/" class="nav__link">
<span>Blog</span>
</a>
<a href="https://min.io/resources" class="nav__link" data-href="resources">
<span>Resources</span>
</a>
<a href="https://min.io/partner" class="nav__link" data-href="partners">
<span>Partner</span>
</a>
<a href="https://min.io/pricing" class="nav__link" data-href="pricing">
<span>Pricing</span>
</a>
<a class="nav__link nav__link--download" href="https://min.io/download">Download</a>
</div>
<a href="https://min.io/resources" class="nav__link">
<span>Resources</span>
</a>
<a href="https://blog.min.io/" class="nav__link">
<span>Blog</span>
</a>
<a href="https://min.io/pricing" class="nav__link">
<span>Pricing</span>
</a>
<a class="nav__link nav__link--download" href="https://min.io/download">Download</a>
</div>
<i class="toggle-icon toggle-icon--menu" data-toggle="nav"></i>