mirror of
https://github.com/minio/docs.git
synced 2025-07-28 19:42:10 +03:00
Fix sidebars and add responsive support
This commit is contained in:
rushenn
Ravind Kumar
28
gulpfile.js
28
gulpfile.js
@ -14,17 +14,18 @@ var paths = {
|
|||||||
dir: 'source/_static/css',
|
dir: 'source/_static/css',
|
||||||
main: 'source/_static/scss/main.css',
|
main: 'source/_static/scss/main.css',
|
||||||
files: 'source/_static/scss/**/*.css',
|
files: 'source/_static/scss/**/*.css',
|
||||||
dist: 'build/html/_static/css'
|
dist: 'build/master/html/_static/css'
|
||||||
},
|
},
|
||||||
dist: 'build/html'
|
js: {
|
||||||
|
dir: 'source/_static/js',
|
||||||
|
main: 'source/_static/js/main.js',
|
||||||
|
files: 'source/_static/js/**/*.js',
|
||||||
|
dist: 'build/master/html/_static/js',
|
||||||
|
},
|
||||||
|
dist: 'build/master/html'
|
||||||
}
|
}
|
||||||
|
|
||||||
// Compile SCSS
|
// Compile SCSS
|
||||||
function handleStyle() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
gulp.task('handleStyle', function() {
|
gulp.task('handleStyle', function() {
|
||||||
return gulp.src (paths.scss.main)
|
return gulp.src (paths.scss.main)
|
||||||
.pipe($.sass ())
|
.pipe($.sass ())
|
||||||
@ -39,7 +40,15 @@ gulp.task('handleStyle', function() {
|
|||||||
.pipe(connect.reload());
|
.pipe(connect.reload());
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Minify and move JS
|
||||||
|
gulp.task('handleJs', function() {
|
||||||
|
return gulp.src (paths.js.main)
|
||||||
|
.pipe($.terser())
|
||||||
|
.pipe(gulp.dest (paths.js.dist))
|
||||||
|
.pipe(connect.reload());
|
||||||
|
});
|
||||||
|
|
||||||
|
// Live server
|
||||||
gulp.task('connect', function() {
|
gulp.task('connect', function() {
|
||||||
connect.server({
|
connect.server({
|
||||||
root: paths.dist,
|
root: paths.dist,
|
||||||
@ -50,8 +59,9 @@ gulp.task('connect', function() {
|
|||||||
|
|
||||||
// Watch
|
// Watch
|
||||||
gulp.task('watch', function () {
|
gulp.task('watch', function () {
|
||||||
gulp.watch(paths.scss.files, gulp.series('handleStyle'))
|
gulp.watch(paths.scss.files, gulp.series('handleStyle'));
|
||||||
|
gulp.watch(paths.js.files, gulp.series('handleJs'));
|
||||||
});
|
});
|
||||||
|
|
||||||
// Build
|
// Build
|
||||||
gulp.task('default', gulp.series('connect', 'watch'));
|
gulp.task('default', gulp.series('handleStyle', 'handleJs', 'watch'));
|
||||||
6007
package-lock.json
generated
6007
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -24,6 +24,7 @@
|
|||||||
"gulp-load-plugins": "^2.0.4",
|
"gulp-load-plugins": "^2.0.4",
|
||||||
"gulp-rename": "^2.0.0",
|
"gulp-rename": "^2.0.0",
|
||||||
"gulp-sass": "^4.1.0",
|
"gulp-sass": "^4.1.0",
|
||||||
|
"gulp-terser": "^2.0.1",
|
||||||
"gulp-watch": "^5.0.1",
|
"gulp-watch": "^5.0.1",
|
||||||
"gulp-webserver": "^0.9.1",
|
"gulp-webserver": "^0.9.1",
|
||||||
"node-sass": "^4.14.1"
|
"node-sass": "^4.14.1"
|
||||||
|
|||||||
@ -208,25 +208,24 @@ h1, h2, h3, h4, h5 {
|
|||||||
h1 > a.toc-backref, h2 > a.toc-backref, h3 > a.toc-backref, h4 > a.toc-backref, h5 > a.toc-backref {
|
h1 > a.toc-backref, h2 > a.toc-backref, h3 > a.toc-backref, h4 > a.toc-backref, h5 > a.toc-backref {
|
||||||
color: #1C1C1C; }
|
color: #1C1C1C; }
|
||||||
|
|
||||||
div.admonition > p.admonition-title {
|
div.admonition {
|
||||||
font-weight: bold;
|
margin-top: 0; }
|
||||||
font-family: "Mark", sans-serif;
|
div.admonition > p.admonition-title {
|
||||||
font-size: 1.2rem; }
|
font-weight: bold;
|
||||||
|
font-family: "Mark", sans-serif;
|
||||||
div.admonition.warning {
|
font-size: 1.2rem; }
|
||||||
background-color: #FFF2F2;
|
div.admonition.warning {
|
||||||
border: none;
|
background-color: #FFF2F2;
|
||||||
border-left: 4px solid #E54253; }
|
border: none;
|
||||||
|
border-left: 4px solid #E54253; }
|
||||||
div.admonition.important {
|
div.admonition.important {
|
||||||
background-color: #FFF9E6;
|
background-color: #FFF9E6;
|
||||||
border: none;
|
border: none;
|
||||||
border-left: 4px solid #EDBC39; }
|
border-left: 4px solid #EDBC39; }
|
||||||
|
div.admonition.note {
|
||||||
div.admonition.note {
|
background-color: #EDF9FF;
|
||||||
background-color: #EDF9FF;
|
border: none;
|
||||||
border: none;
|
border-left: 4px solid #2592EF; }
|
||||||
border-left: 4px solid #2592EF; }
|
|
||||||
|
|
||||||
dl.minio {
|
dl.minio {
|
||||||
margin: 10px 0 10px 0; }
|
margin: 10px 0 10px 0; }
|
||||||
@ -261,7 +260,7 @@ table.docutils {
|
|||||||
.xref {
|
.xref {
|
||||||
color: #C72C48; }
|
color: #C72C48; }
|
||||||
|
|
||||||
img {
|
.content__main img {
|
||||||
-webkit-box-shadow: 0px 0px 5px lightgray;
|
-webkit-box-shadow: 0px 0px 5px lightgray;
|
||||||
box-shadow: 0px 0px 5px lightgray; }
|
box-shadow: 0px 0px 5px lightgray; }
|
||||||
|
|
||||||
@ -271,7 +270,7 @@ img {
|
|||||||
|
|
||||||
@media (max-width: 1199px) {
|
@media (max-width: 1199px) {
|
||||||
.content, .header {
|
.content, .header {
|
||||||
padding: 0 1.5rem; } }
|
padding: 0 2rem; } }
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
@ -287,10 +286,15 @@ img {
|
|||||||
-ms-flex: 1;
|
-ms-flex: 1;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 1.5rem 3rem;
|
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
-ms-flex-item-align: start;
|
-ms-flex-item-align: start;
|
||||||
align-self: flex-start; }
|
align-self: flex-start; }
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.content__main {
|
||||||
|
padding: 4rem; } }
|
||||||
|
@media (max-width: 1199px) {
|
||||||
|
.content__main {
|
||||||
|
padding: 2rem; } }
|
||||||
|
|
||||||
.content__right {
|
.content__right {
|
||||||
-ms-flex-negative: 0;
|
-ms-flex-negative: 0;
|
||||||
@ -308,14 +312,19 @@ img {
|
|||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
-webkit-box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.1);
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.1);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
-ms-flex-negative: 0;
|
-ms-flex-negative: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center; }
|
align-items: center; }
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.header .toggle-icon {
|
||||||
|
display: none; } }
|
||||||
|
.header .toggle-icon--menu {
|
||||||
|
margin-left: auto; }
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
-ms-flex-negative: 0;
|
-ms-flex-negative: 0;
|
||||||
@ -323,99 +332,219 @@ img {
|
|||||||
display: -webkit-inline-box;
|
display: -webkit-inline-box;
|
||||||
display: -ms-inline-flexbox;
|
display: -ms-inline-flexbox;
|
||||||
display: inline-flex; }
|
display: inline-flex; }
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.logo {
|
||||||
|
margin-left: 1rem; } }
|
||||||
.logo > img {
|
.logo > img {
|
||||||
height: 1.05rem; }
|
height: 1.05rem;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none; }
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
margin-left: auto; }
|
margin-left: auto; }
|
||||||
.nav > a {
|
@media (max-width: 991px) {
|
||||||
font-size: 0.95rem;
|
.nav {
|
||||||
line-height: 100%;
|
position: fixed;
|
||||||
padding: 0.4rem 1.2rem 0.55rem;
|
height: 100vh;
|
||||||
border-radius: 0.2rem; }
|
width: 18rem;
|
||||||
.nav > a, .nav > a:hover {
|
top: 0;
|
||||||
color: #4b4b4b; }
|
right: 0;
|
||||||
.nav > a:not(:last-child) > span {
|
-webkit-transform: translate3d(18rem, 0, 0);
|
||||||
position: relative; }
|
transform: translate3d(18rem, 0, 0);
|
||||||
.nav > a:not(:last-child) > span::after {
|
opacity: 0;
|
||||||
content: '';
|
-webkit-box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.1);
|
||||||
height: 1px;
|
box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.1);
|
||||||
width: 100%;
|
background-color: rgba(255, 255, 255, 0.9925);
|
||||||
background-color: #4b4b4b;
|
pointer-events: none;
|
||||||
bottom: -10px;
|
-webkit-transition: opacity 400ms, -webkit-transform 300ms;
|
||||||
-webkit-transform: translateY(0);
|
transition: opacity 400ms, -webkit-transform 300ms;
|
||||||
transform: translateY(0);
|
transition: opacity 400ms, transform 300ms;
|
||||||
left: 0;
|
transition: opacity 400ms, transform 300ms, -webkit-transform 300ms;
|
||||||
position: absolute;
|
display: -webkit-box;
|
||||||
opacity: 0;
|
display: -ms-flexbox;
|
||||||
-webkit-transition: opacity 250ms, -webkit-transform 250ms;
|
display: flex;
|
||||||
transition: opacity 250ms, -webkit-transform 250ms;
|
-webkit-box-orient: vertical;
|
||||||
transition: opacity 250ms, transform 250ms;
|
-webkit-box-direction: normal;
|
||||||
transition: opacity 250ms, transform 250ms, -webkit-transform 250ms;
|
-ms-flex-direction: column;
|
||||||
pointer-events: none; }
|
flex-direction: column;
|
||||||
.nav > a:not(:last-child).active > span::after, .nav > a:not(:last-child):hover > span::after {
|
padding: 1rem 2rem 2rem;
|
||||||
-webkit-transform: translateY(-4px);
|
height: 100%;
|
||||||
transform: translateY(-4px);
|
overflow-y: auto; } }
|
||||||
opacity: 1; }
|
.nav > .toggle-icon {
|
||||||
.nav > a:last-child {
|
position: absolute;
|
||||||
border: 1px solid #C72C48;
|
top: 0.7rem;
|
||||||
-webkit-transition: background-color 300ms, color 300ms;
|
right: 0.7rem;
|
||||||
transition: background-color 300ms, color 300ms; }
|
z-index: 1; }
|
||||||
.nav > a:last-child:hover {
|
|
||||||
background-color: #C72C48;
|
|
||||||
color: #ffffff; }
|
|
||||||
|
|
||||||
.sidebar-toggle {
|
.nav-toggled .nav {
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all; }
|
||||||
|
|
||||||
|
.nav__item {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 40px;
|
font-size: 0.95rem;
|
||||||
height: 40px;
|
line-height: 100%;
|
||||||
margin: 0 1rem 0 -0.35rem;
|
border-radius: 0.2rem;
|
||||||
|
cursor: pointer; }
|
||||||
|
.nav__item, .nav__item:hover {
|
||||||
|
color: #4b4b4b; }
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.nav__item {
|
||||||
|
padding: 0.4rem 1.2rem 0.55rem; }
|
||||||
|
.nav__item:hover .nav__dropdown {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all; } }
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.nav__item {
|
||||||
|
padding: 0.85rem 0; } }
|
||||||
|
.nav__item:last-child {
|
||||||
|
border: 1px solid #C72C48;
|
||||||
|
-webkit-transition: background-color 300ms, color 300ms;
|
||||||
|
transition: background-color 300ms, color 300ms;
|
||||||
|
text-align: center; }
|
||||||
|
.nav__item:last-child:hover {
|
||||||
|
background-color: #C72C48;
|
||||||
|
color: #ffffff; }
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.nav__item:last-child {
|
||||||
|
margin-top: 1rem; } }
|
||||||
|
|
||||||
|
a.nav__item:not(:last-child) > span {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer; }
|
||||||
|
a.nav__item:not(:last-child) > span:after {
|
||||||
|
left: 0;
|
||||||
|
bottom: -7px;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translateY(5px);
|
||||||
|
transform: translateY(5px);
|
||||||
|
-webkit-transition: opacity 250ms, -webkit-transform 250ms;
|
||||||
|
transition: opacity 250ms, -webkit-transform 250ms;
|
||||||
|
transition: opacity 250ms, transform 250ms;
|
||||||
|
transition: opacity 250ms, transform 250ms, -webkit-transform 250ms;
|
||||||
|
background-color: #4b4b4b; }
|
||||||
|
|
||||||
|
a.nav__item:not(:last-child).active > span::after, a.nav__item:not(:last-child):hover > span::after {
|
||||||
|
-webkit-transform: translateY(0);
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1; }
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
span.nav__item:after {
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -12px;
|
||||||
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 12px 10px;
|
||||||
|
border-color: transparent transparent #ffffff transparent;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 200ms;
|
||||||
|
transition: opacity 200ms; }
|
||||||
|
span.nav__item:hover:after {
|
||||||
|
opacity: 1; } }
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.nav__dropdown {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 1.25rem;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
-webkit-box-shadow: 0 -1px 1.25rem rgba(0, 0, 0, 0.13);
|
||||||
|
box-shadow: 0 -1px 1.25rem rgba(0, 0, 0, 0.13);
|
||||||
|
margin-top: 0.3rem;
|
||||||
|
width: 24rem;
|
||||||
|
-webkit-transform: translateX(calc(-50% + 2.8rem));
|
||||||
|
transform: translateX(calc(-50% + 2.8rem));
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 86%;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 200ms;
|
||||||
|
transition: opacity 200ms;
|
||||||
|
pointer-events: none;
|
||||||
|
max-height: calc(100vh - 5rem);
|
||||||
|
overflow-y: auto; } }
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.nav__dropdown {
|
||||||
|
margin: 1rem -2rem -0.8rem;
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
|
background-color: #f9f9f9; } }
|
||||||
|
|
||||||
|
.nav__sub {
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #000000;
|
||||||
|
position: relative; }
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.nav__sub {
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
-webkit-transition: background-color 300ms;
|
||||||
|
transition: background-color 300ms; }
|
||||||
|
.nav__sub:hover {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
color: #000000; } }
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.nav__sub {
|
||||||
|
padding: 0.75rem 0; } }
|
||||||
|
.nav__sub > small {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-top: 0.7rem;
|
||||||
|
line-height: 1.4; }
|
||||||
|
|
||||||
|
.nav__close {
|
||||||
|
position: absolute;
|
||||||
|
top: 1.25rem;
|
||||||
|
left: -2.7rem; }
|
||||||
|
|
||||||
|
.toggle-icon {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 0.2rem;
|
border-radius: 0.2rem;
|
||||||
-webkit-transition: background-color 300ms;
|
-webkit-transition: background-color 300ms;
|
||||||
transition: background-color 300ms;
|
transition: background-color 300ms;
|
||||||
-ms-flex-negative: 0;
|
-ms-flex-negative: 0;
|
||||||
flex-shrink: 0; }
|
flex-shrink: 0;
|
||||||
@media (min-width: 992px) {
|
display: -webkit-box;
|
||||||
.sidebar-toggle {
|
display: -ms-flexbox;
|
||||||
display: none; } }
|
display: flex;
|
||||||
.sidebar-toggle:hover {
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center; }
|
||||||
|
.toggle-icon:hover {
|
||||||
background-color: rgba(199, 44, 72, 0.075); }
|
background-color: rgba(199, 44, 72, 0.075); }
|
||||||
.sidebar-toggle::before, .sidebar-toggle::after {
|
|
||||||
content: '';
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transition: opacity 250ms, -webkit-transform 250ms;
|
|
||||||
transition: opacity 250ms, -webkit-transform 250ms;
|
|
||||||
transition: opacity 250ms, transform 250ms;
|
|
||||||
transition: opacity 250ms, transform 250ms, -webkit-transform 250ms; }
|
|
||||||
.sidebar-toggle::before {
|
|
||||||
background-image: url(../img/icons/menu.svg);
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
transform: scale(1); }
|
|
||||||
.sidebar-toggle::after {
|
|
||||||
background-image: url(../img/icons/arrow-back.svg);
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: scale(0.25);
|
|
||||||
transform: scale(0.25); }
|
|
||||||
|
|
||||||
.sidebar-toggled .sidebar-toggle::before {
|
.toggle-icon--docs {
|
||||||
opacity: 0;
|
background-image: url(../img/icons/docs.svg); }
|
||||||
-webkit-transform: scale(0.25);
|
|
||||||
transform: scale(0.25); }
|
|
||||||
|
|
||||||
.sidebar-toggled .sidebar-toggle::after {
|
.toggle-icon--close {
|
||||||
opacity: 1;
|
background-image: url(../img/icons/close-circle.svg); }
|
||||||
-webkit-transform: scale(1);
|
|
||||||
transform: scale(1); }
|
.toggle-icon--menu {
|
||||||
|
background-image: url(../img/icons/menu.svg); }
|
||||||
|
|
||||||
|
.toggle-icon--toc {
|
||||||
|
background-image: url(../img/icons/toc.svg); }
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 18rem;
|
width: 18rem;
|
||||||
@ -423,13 +552,11 @@ img {
|
|||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: #F9F9F9;
|
background-color: #F9F9F9;
|
||||||
overflow-y: auto;
|
|
||||||
padding: 1.5rem 1.5rem 1.5rem 0;
|
|
||||||
-webkit-transition: opacity 400ms, -webkit-transform 300ms;
|
-webkit-transition: opacity 400ms, -webkit-transform 300ms;
|
||||||
transition: opacity 400ms, -webkit-transform 300ms;
|
transition: opacity 400ms, -webkit-transform 300ms;
|
||||||
transition: opacity 400ms, transform 300ms;
|
transition: opacity 400ms, transform 300ms;
|
||||||
transition: opacity 400ms, transform 300ms, -webkit-transform 300ms;
|
transition: opacity 400ms, transform 300ms, -webkit-transform 300ms;
|
||||||
z-index: 9; }
|
padding: 2rem 2rem 2rem 0; }
|
||||||
@media (max-width: 991px) {
|
@media (max-width: 991px) {
|
||||||
.sidebar {
|
.sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -437,25 +564,46 @@ img {
|
|||||||
-webkit-transform: translate3d(-100%, 0, 0);
|
-webkit-transform: translate3d(-100%, 0, 0);
|
||||||
transform: translate3d(-100%, 0, 0);
|
transform: translate3d(-100%, 0, 0);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 6.5rem 1.5rem 1.5rem;
|
-webkit-box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.15);
|
||||||
-webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.15);
|
||||||
box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
|
opacity: 0;
|
||||||
opacity: 0; } }
|
z-index: 11;
|
||||||
|
pointer-events: none;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-left: 2rem; } }
|
||||||
|
.sidebar > .toggle-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.7rem;
|
||||||
|
right: 0.7rem; }
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.sidebar > .toggle-icon {
|
||||||
|
display: none; } }
|
||||||
|
|
||||||
.index-link {
|
.sidebar__title {
|
||||||
color: #1C1C1C;
|
margin: 0 0 1.5rem;
|
||||||
font-size: .8rem;
|
line-height: 100%; }
|
||||||
text-transform: uppercase; }
|
.sidebar__title > a {
|
||||||
.index-link:hover {
|
line-height: 100%;
|
||||||
color: #1C1C1C; }
|
color: #1C1C1C;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500; }
|
||||||
|
.sidebar__title > a:hover {
|
||||||
|
color: #1C1C1C; }
|
||||||
|
|
||||||
.sidebar-toggled .sidebar {
|
.sidebar-toggled .sidebar {
|
||||||
-webkit-transform: translate3d(0, 0, 0);
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
||||||
opacity: 1; }
|
opacity: 1;
|
||||||
|
pointer-events: all; }
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
margin-bottom: 1rem; }
|
margin-bottom: 0.8rem; }
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.search {
|
||||||
|
margin-right: -1rem;
|
||||||
|
margin-left: -1rem; } }
|
||||||
|
|
||||||
.search__text {
|
.search__text {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
@ -463,7 +611,6 @@ img {
|
|||||||
appearance: none;
|
appearance: none;
|
||||||
border: 1px solid #F0F0F0;
|
border: 1px solid #F0F0F0;
|
||||||
height: 2.65rem;
|
height: 2.65rem;
|
||||||
border-radius: 0.2rem;
|
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
@ -471,6 +618,9 @@ img {
|
|||||||
padding: 0 1rem 0.1rem 2.6rem;
|
padding: 0 1rem 0.1rem 2.6rem;
|
||||||
background: url(../img/icons/search.svg) no-repeat center left 1rem;
|
background: url(../img/icons/search.svg) no-repeat center left 1rem;
|
||||||
background-color: #ffffff; }
|
background-color: #ffffff; }
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.search__text {
|
||||||
|
border-radius: 0.2rem; } }
|
||||||
.search__text:focus {
|
.search__text:focus {
|
||||||
border-color: #cacaca; }
|
border-color: #cacaca; }
|
||||||
|
|
||||||
|
|||||||
2
source/_static/css/main.min.css
vendored
2
source/_static/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
43
source/_static/data/nav.json
Normal file
43
source/_static/data/nav.json
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"Product": {
|
||||||
|
"Overview": {
|
||||||
|
"description": "Dive in to the features and architecture",
|
||||||
|
"link": "https://min.io/product/overview"
|
||||||
|
},
|
||||||
|
"Integrations": {
|
||||||
|
"description": "Browse our vast portfolio of integrations",
|
||||||
|
"link": "https://min.io/product/integrations"
|
||||||
|
},
|
||||||
|
"Reference Hardware": {
|
||||||
|
"description": "See recommended HW from our partners",
|
||||||
|
"link": "https://min.io/product/reference-hardware"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"Docs": "https://docs.min.io/",
|
||||||
|
"Solutions": {
|
||||||
|
"VMware": {
|
||||||
|
"description": "Discover how MinIO integrates with VMware across the portfolio from the Persistent Data platform to TKGI and how we support their Kubernetes ambitions.",
|
||||||
|
"link": "https://min.io/solutions/vmware"
|
||||||
|
},
|
||||||
|
"Splunk": {
|
||||||
|
"description": "Find out how MinIO is delivering performance at scale for Splunk SmartStores",
|
||||||
|
"link": "https://min.io/solutions/optimize-splunk-smartstore-performance"
|
||||||
|
},
|
||||||
|
"Veeam": {
|
||||||
|
"description": "Learn how MinIO and Veeam have partnered to drive performance and scalability for a variety of backup use cases.",
|
||||||
|
"link": "https://min.io/solutions/veeam"
|
||||||
|
},
|
||||||
|
"Azure to AWS S3 Gateway": {
|
||||||
|
"description": "Learn how MinIO allows Azure Blob to speak Amazon’s S3 API",
|
||||||
|
"link": "https://min.io/solutions/azure-s3-api-integration"
|
||||||
|
},
|
||||||
|
"Teradata": {
|
||||||
|
"description": "Discover why MinIO is the Native Object Store (NOS) of choice for at-scale Teradata deployments",
|
||||||
|
"link": "https://min.io/solutions/native-object-store-for-teradata"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"Resources": "https://min.io/resources",
|
||||||
|
"Blog": "https://blog.min.io/",
|
||||||
|
"Pricing": "https://min.io/pricing",
|
||||||
|
"Download": "https://min.io/download"
|
||||||
|
}
|
||||||
1
source/_static/img/icons/close-circle.svg
Normal file
1
source/_static/img/icons/close-circle.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg width="26" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><circle stroke="#4B4B4B" stroke-width="1.5" cx="12" cy="12" r="11.357"/><path d="M16.721 7.279a.748.748 0 00-1.057 0L12 10.942 8.336 7.28A.748.748 0 007.28 8.336L10.942 12 7.28 15.664a.748.748 0 101.057 1.057L12 13.057l3.664 3.664a.748.748 0 101.057-1.057L13.057 12l3.664-3.664a.748.748 0 000-1.057z" fill="#4B4B4B" fill-rule="nonzero"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 472 B |
1
source/_static/img/icons/docs.svg
Normal file
1
source/_static/img/icons/docs.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg width="23" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#4B4B4B" fill-rule="evenodd"><rect width="2.5" height="16" rx="1.25"/><rect x="5" width="2.5" height="16" rx="1.25"/><rect x="10" width="2.5" height="16" rx="1.25"/><rect transform="rotate(-23 18.25 8)" x="17" width="2.5" height="16" rx="1.25"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 327 B |
@ -1,11 +1 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<svg width="22" height="15" xmlns="http://www.w3.org/2000/svg"><g fill="#4B4B4B" fill-rule="evenodd"><rect width="22" height="2.5" rx="1.25"/><rect y="6" width="22" height="2.5" rx="1.25"/><rect y="12" width="22" height="2.5" rx="1.25"/></g></svg>
|
||||||
<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>Group</title>
|
|
||||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
|
||||||
<g id="Group" transform="translate(1.000000, 1.500000)" stroke="#C72C48" stroke-width="1.25">
|
|
||||||
<line x1="-1.66533454e-16" y1="6" x2="20" y2="6" id="Line"></line>
|
|
||||||
<line x1="-1.66533454e-16" y1="0.5" x2="20" y2="0.5" id="Line"></line>
|
|
||||||
<line x1="-1.66533454e-16" y1="11.5" x2="20" y2="11.5" id="Line"></line>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 692 B After Width: | Height: | Size: 247 B |
@ -1,75 +1,65 @@
|
|||||||
window.addEventListener('DOMContentLoaded', (event) => {
|
window.addEventListener("DOMContentLoaded", (event) => {
|
||||||
console.log('DOM fully loaded and parsed');
|
var topic = document.getElementById("table-of-contents");
|
||||||
|
if (topic != null) {
|
||||||
|
document
|
||||||
|
.getElementById("localtoc")
|
||||||
|
.appendChild(document.getElementById("table-of-contents"));
|
||||||
|
}
|
||||||
|
|
||||||
var topic = document.getElementById('table-of-contents');
|
// Toggle Sidebars
|
||||||
|
$('body').on('click', '[data-toggle]', function() {
|
||||||
if (topic != null) {
|
var target = $(this).attr('data-toggle');
|
||||||
document.getElementById('localtoc').appendChild(
|
target === 'sidebar' ? $('body').removeClass('nav-toggled') : $('body').removeClass('sidebar-toggled');
|
||||||
document.getElementById('table-of-contents')
|
$('body').toggleClass(target + '-toggled');
|
||||||
);
|
});
|
||||||
|
|
||||||
console.log("moving local toc");
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// There's probably a better way to refine what sections are shown on screen.
|
// Render navigation menu
|
||||||
// Experimenting with setting the `intersectionRatio` and such tends to stop
|
if($('#nav')[0]) {
|
||||||
// this from working, especially if the 'section' is really long. Not sure
|
var navData = '/_static/data/nav.json';
|
||||||
// how to resolve that.
|
var nav = $('.nav');
|
||||||
|
|
||||||
// Removing this from the logic flow until we have better / cleaner logic.
|
$.getJSON( navData, function(data) {
|
||||||
|
var navToggle = $('<i class="toggle-icon toggle-icon--menu" />');
|
||||||
|
navToggle.attr('data-toggle', 'nav');
|
||||||
|
nav.after(navToggle);
|
||||||
|
|
||||||
// let options = {
|
var navClose = $('<i />');
|
||||||
// rootMargin: '-100px 0px 0px -100px'
|
navClose.addClass('toggle-icon toggle-icon--close');
|
||||||
// }
|
navClose.attr('data-toggle', 'nav');
|
||||||
|
nav.append(navClose);
|
||||||
|
|
||||||
// const observer = new IntersectionObserver(entries => {
|
$.each(data, function(nav, navValue) {
|
||||||
// entries.forEach(entry => {
|
var navElem = typeof navValue === 'object' ? '<span />' : '<a />';
|
||||||
// const id = entry.target.getAttribute('id');
|
|
||||||
|
|
||||||
// if (id == document.querySelector('.section[id]').getAttribute('id'))
|
|
||||||
// return 0
|
|
||||||
// if (entry.intersectionRatio > 0) {
|
|
||||||
|
|
||||||
|
|
||||||
// pElement = document.querySelector(`#on-this-page li a[href="#${id}"]`).parentElement;
|
var navLink = $(navElem);
|
||||||
// liElement = document.querySelector(`#on-this-page li a[href="#${id}"]`).parentElement.parentElement;
|
navLink.addClass(nav === 'Docs' ? 'nav__item active' : 'nav__item');
|
||||||
|
navLink.html('<span>' + nav + '</span>');
|
||||||
// liElement.classList.add('active');
|
|
||||||
// pElement.classList.add('active-p');
|
|
||||||
|
|
||||||
// liElementParent = liElement.parentElement.parentElement
|
if(navElem === '<a />') {
|
||||||
|
navLink.attr('href', navValue);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var navDropdown = $('<div class="nav__dropdown" />');
|
||||||
|
|
||||||
// if (liElementParent.tagName == "LI") {
|
$.each(navValue, function(sub, subValue) {
|
||||||
// //liElementParent.classList.remove("active")
|
var navSub = $('<a />');
|
||||||
// // Need to re-visit this logic
|
navSub.addClass('nav__sub');
|
||||||
// }
|
navSub.text(sub);
|
||||||
|
navSub.attr({
|
||||||
|
'href': subValue.link,
|
||||||
|
'target': '_blank',
|
||||||
// } else {
|
'rel': 'noreferrer'
|
||||||
// document.querySelector(`#on-this-page li a[href="#${id}"]`).parentElement.parentElement.classList.remove('active');
|
});
|
||||||
// document.querySelector(`#on-this-page li a[href="#${id}"]`).parentElement.classList.remove('active-p');
|
navSub.append('<small>' + subValue.description + '</small>');
|
||||||
// }
|
navDropdown.append(navSub);
|
||||||
// });
|
navLink.append(navDropdown)
|
||||||
// },options);
|
});
|
||||||
|
}
|
||||||
// // Track all sections that have an `id` applied
|
|
||||||
// document.querySelectorAll('.section[id]').forEach((section) => {
|
$('#nav').append(navLink);
|
||||||
// observer.observe(section);
|
});
|
||||||
// });
|
|
||||||
|
});
|
||||||
const leftcolumn = document.querySelector('.left');
|
}
|
||||||
const centercolumn = document.querySelector('.center');
|
|
||||||
const rightcolumn = document.querySelector('.right');
|
|
||||||
const button = document.querySelector('.sphinxsidebarbutton');
|
|
||||||
const sidebarwrapper = document.querySelector('.sphinxsidebarwrapper');
|
|
||||||
|
|
||||||
const sidebarToggle = document.querySelector('.sidebar-toggle');
|
|
||||||
|
|
||||||
function toggleSidebar() {
|
|
||||||
document.body.classList.toggle('sidebar-toggled');
|
|
||||||
}
|
|
||||||
|
|
||||||
sidebarToggle.addEventListener( "click", toggleSidebar );
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -4,29 +4,48 @@
|
|||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: $sidebar-bg;
|
background-color: $sidebar-bg;
|
||||||
overflow-y: auto;
|
|
||||||
padding: 1.5rem 1.5rem 1.5rem 0;
|
|
||||||
transition: opacity 400ms, transform 300ms;
|
transition: opacity 400ms, transform 300ms;
|
||||||
z-index: $z-index-header - 1;
|
padding: $content-padding-sm $content-padding-sm $content-padding-sm 0;
|
||||||
|
|
||||||
@include breakpoint-max(breakpoints(lg)) {
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
transform: translate3d(-100%, 0, 0);
|
transform: translate3d(-100%, 0, 0);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: ($header-height + $content-padding-sm) $content-padding-sm $content-padding-sm;
|
box-shadow: 0 0 1.5rem rgba($black, 0.15);
|
||||||
box-shadow: 3px 0 10px rgba($black, 0.1);
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
z-index: $z-index-header + 1;
|
||||||
|
pointer-events: none;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-left: $content-padding-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .toggle-icon {
|
||||||
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0.7rem;
|
||||||
|
right: 0.7rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-link {
|
.sidebar__title {
|
||||||
color: $docs-item-main-color;
|
margin: 0 0 1.5rem;
|
||||||
font-size: .8rem;
|
line-height: 100%;
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
&:hover {
|
& > a {
|
||||||
|
line-height: 100%;
|
||||||
color: $docs-item-main-color;
|
color: $docs-item-main-color;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: $font-weight-medium;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $docs-item-main-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -34,18 +53,23 @@
|
|||||||
.sidebar {
|
.sidebar {
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 0.8rem;
|
||||||
|
|
||||||
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
|
margin-right: -1rem;
|
||||||
|
margin-left: -1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search__text {
|
.search__text {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
border: 1px solid $search-border-color;
|
border: 1px solid $search-border-color;
|
||||||
height: $search-height;
|
height: $search-height;
|
||||||
border-radius: $border-radius-sm;
|
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
color: $search-color;
|
color: $search-color;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
@ -54,6 +78,10 @@
|
|||||||
background: $search-icon no-repeat center left 1rem;
|
background: $search-icon no-repeat center left 1rem;
|
||||||
background-color: $search-bg;
|
background-color: $search-bg;
|
||||||
|
|
||||||
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
|
border-radius: $border-radius-sm;
|
||||||
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $search-focus-border-color
|
border-color: $search-focus-border-color
|
||||||
}
|
}
|
||||||
|
|||||||
@ -43,6 +43,8 @@ h1, h2, h3, h4, h5 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
div.admonition {
|
div.admonition {
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
& > p.admonition-title {
|
& > p.admonition-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
@ -115,6 +117,8 @@ table.docutils {
|
|||||||
color: $theme-red;
|
color: $theme-red;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
.content__main {
|
||||||
box-shadow: 0px 0px 5px lightgray;
|
img {
|
||||||
|
box-shadow: 0px 0px 5px lightgray;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -3,7 +3,7 @@
|
|||||||
background-color: $header-bg;
|
background-color: $header-bg;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
box-shadow: 0 0 10px rgba($black, 0.1);
|
box-shadow: 0 0 0.75rem rgba($black, 0.1);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: $z-index-header;
|
z-index: $z-index-header;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@ -11,130 +11,261 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@extend %content-padding;
|
@extend %content-padding;
|
||||||
|
|
||||||
|
.toggle-icon {
|
||||||
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-icon--menu {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|
||||||
& > img {
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&>img {
|
||||||
height: $logo-height;
|
height: $logo-height;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|
||||||
& > a {
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
&, &:hover {
|
position: fixed;
|
||||||
color: $nav-color;
|
height: 100vh;
|
||||||
}
|
width: $sidebar-width;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translate3d($sidebar-width, 0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
box-shadow: 0 0 0.8rem rgba($black, 0.1);
|
||||||
|
background-color: rgba($white, 0.9925);
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 400ms, transform 300ms;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1rem 2rem 2rem;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
font-size: 0.95rem;
|
& > .toggle-icon {
|
||||||
line-height: 100%;
|
position: absolute;
|
||||||
|
top: 0.7rem;
|
||||||
|
right: 0.7rem;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggled {
|
||||||
|
.nav {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__item {
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 100%;
|
||||||
|
border-radius: $border-radius-sm;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&,
|
||||||
|
&:hover {
|
||||||
|
color: $nav-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
padding: 0.4rem 1.2rem 0.55rem;
|
padding: 0.4rem 1.2rem 0.55rem;
|
||||||
border-radius: $border-radius-sm;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:hover {
|
||||||
& > span {
|
.nav__dropdown {
|
||||||
position: relative;
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
height: 1px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: $nav-border-color;
|
|
||||||
bottom: -10px;
|
|
||||||
transform: translateY(0);
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 250ms, transform 250ms;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
&.active,
|
}
|
||||||
&:hover {
|
|
||||||
& > span {
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
&::after {
|
padding: 0.85rem 0;
|
||||||
transform: translateY(-4px);
|
}
|
||||||
opacity: 1;
|
|
||||||
}
|
&:last-child {
|
||||||
}
|
border: 1px solid $theme-red;
|
||||||
|
transition: background-color 300ms, color 300ms;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $theme-red;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a.nav__item {
|
||||||
|
&:not(:last-child) {
|
||||||
|
&>span {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
left: 0;
|
||||||
|
bottom: -7px;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(5px);
|
||||||
|
transition: opacity 250ms, transform 250ms;
|
||||||
|
background-color: $nav-border-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&.active,
|
||||||
border: 1px solid $theme-red;
|
&:hover {
|
||||||
transition: background-color 300ms, color 300ms;
|
&>span {
|
||||||
|
&::after {
|
||||||
&:hover {
|
transform: translateY(0);
|
||||||
background-color: $theme-red;
|
opacity: 1;
|
||||||
color: $white;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-toggle {
|
span.nav__item {
|
||||||
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
|
&:after {
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -12px;
|
||||||
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 12px 10px;
|
||||||
|
border-color: transparent transparent $white transparent;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__dropdown {
|
||||||
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
|
background-color: $white;
|
||||||
|
padding: 1.25rem;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
box-shadow: 0 -1px 1.25rem rgba($black, 0.13);
|
||||||
|
margin-top: 0.3rem;
|
||||||
|
width: 24rem;
|
||||||
|
transform: translateX(calc(-50% + 2.8rem));
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 86%;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 200ms;
|
||||||
|
pointer-events: none;
|
||||||
|
max-height: calc(100vh - 5rem);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
|
margin: 1rem (-$content-padding-sm) -0.8rem;
|
||||||
|
padding: 0.5rem $content-padding-sm;
|
||||||
|
background-color: $nav-dropdown-mobile-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__sub {
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: $black;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
margin: 0 1rem 0 -0.35rem;
|
padding: 1rem;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
transition: background-color 300ms;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $nav-sub-hover-bg;
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&>small {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: lighten($text-muted-color, 5%);
|
||||||
|
margin-top: 0.7rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__close {
|
||||||
|
position: absolute;
|
||||||
|
top: 1.25rem;
|
||||||
|
left: -2.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-icon {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: $border-radius-sm;
|
border-radius: $border-radius-sm;
|
||||||
transition: background-color 300ms;
|
transition: background-color 300ms;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
@include breakpoint-min(breakpoints(lg)) {
|
align-items: center;
|
||||||
display: none;
|
justify-content: center;
|
||||||
}
|
flex-shrink: 0;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $sidebar-toggle-hover-bg;
|
background-color: $toggle-icon-hover-bg;
|
||||||
}
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 250ms, transform 250ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background-image: $sidebar-toggle-icon;
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
background-image: $sidebar-toggle-collapse-icon;
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.25);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-toggled {
|
$toggleIcons: (
|
||||||
.sidebar-toggle {
|
docs: 'docs.svg',
|
||||||
&::before {
|
close: 'close-circle.svg',
|
||||||
opacity: 0;
|
menu: 'menu.svg',
|
||||||
transform: scale(0.25);
|
toc: 'toc.svg'
|
||||||
|
);
|
||||||
}
|
|
||||||
|
@each $name, $icon in $toggleIcons {
|
||||||
&::after {
|
.toggle-icon--#{$name} {
|
||||||
opacity: 1;
|
background-image: url(../img/icons/#{$icon});
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -22,9 +22,16 @@
|
|||||||
.content__main {
|
.content__main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 1.5rem 3rem;
|
|
||||||
background-color: $content-bg;
|
background-color: $content-bg;
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
|
|
||||||
|
@include breakpoint-min(breakpoints(xl)) {
|
||||||
|
padding: $content-padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint-max(breakpoints(xl)) {
|
||||||
|
padding: $content-padding-sm;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content__right {
|
.content__right {
|
||||||
|
|||||||
@ -4,7 +4,6 @@ $black: #000000;
|
|||||||
$theme-red: #C72C48;
|
$theme-red: #C72C48;
|
||||||
$theme-hover-bg: rgb(245, 245, 245);
|
$theme-hover-bg: rgb(245, 245, 245);
|
||||||
|
|
||||||
|
|
||||||
// Breakpoints
|
// Breakpoints
|
||||||
$breakpoints: (
|
$breakpoints: (
|
||||||
xs: 0,
|
xs: 0,
|
||||||
@ -29,11 +28,17 @@ $body-color: #4b4b4b;
|
|||||||
$body-bg: #F9F9F9;
|
$body-bg: #F9F9F9;
|
||||||
|
|
||||||
|
|
||||||
|
// Text
|
||||||
|
$text-color: #4b4b4b;
|
||||||
|
$text-hover-color: darken($text-color, 20%);
|
||||||
|
$text-muted-color: #727272;
|
||||||
|
|
||||||
|
|
||||||
// Layout
|
// Layout
|
||||||
$container-width: 95%;
|
$container-width: 95%;
|
||||||
$content-bg: $white;
|
$content-bg: $white;
|
||||||
$content-padding: 4rem;
|
$content-padding: 4rem;
|
||||||
$content-padding-sm: 1.5rem;
|
$content-padding-sm: 2rem;
|
||||||
|
|
||||||
|
|
||||||
// Font weight
|
// Font weight
|
||||||
@ -87,12 +92,12 @@ $docs-item-admonition-note-border: #2592EF;
|
|||||||
$docs-item-table-border: #e6e6e6;
|
$docs-item-table-border: #e6e6e6;
|
||||||
|
|
||||||
|
|
||||||
// Sidebar toggle
|
// Toggle icon
|
||||||
$sidebar-toggle-collapse-icon: url(../img/icons/arrow-back.svg);
|
$toggle-icon-hover-bg: rgba($theme-red, 0.075);
|
||||||
$sidebar-toggle-icon: url(../img/icons/menu.svg);
|
|
||||||
$sidebar-toggle-hover-bg: rgba($theme-red, 0.075);
|
|
||||||
|
|
||||||
|
|
||||||
// Nav
|
// Nav
|
||||||
$nav-color: $body-color;
|
$nav-color: $body-color;
|
||||||
$nav-border-color: #4b4b4b;
|
$nav-border-color: #4b4b4b;
|
||||||
|
$nav-sub-hover-bg: #f8f8f8;
|
||||||
|
$nav-dropdown-mobile-bg: lighten($theme-hover-bg, 1.5%);
|
||||||
@ -58,7 +58,7 @@
|
|||||||
|
|
||||||
{%- block header %}
|
{%- block header %}
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<i class="sidebar-toggle"></i>
|
<i class="toggle-icon toggle-icon--docs" data-toggle="sidebar"></i>
|
||||||
<a
|
<a
|
||||||
class="logo"
|
class="logo"
|
||||||
href="https://min.io"
|
href="https://min.io"
|
||||||
@ -69,27 +69,20 @@
|
|||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<nav class="nav">
|
<nav id="nav" class="nav"></nav>
|
||||||
<a href="https://min.io/product/overview"><span>Product</span></a>
|
|
||||||
<a class="active" href="/"><span>Docs</span></a>
|
|
||||||
<a href="https://min.io/solutions/vmware"><span>Solutions</span></a>
|
|
||||||
<a href="https://min.io/resources"><span>Resources</span></a>
|
|
||||||
<a href="https://blog.min.io/"><span>Blog</span></a>
|
|
||||||
<a href="https://min.io/pricing"><span>Pricing</span></a>
|
|
||||||
<a href="https://min.io/download"><span>Download</span></a>
|
|
||||||
</nav>
|
|
||||||
</header>
|
</header>
|
||||||
{%- endblock %}
|
{%- endblock %}
|
||||||
|
|
||||||
{%- block content %}
|
{%- block content %}
|
||||||
<section class="content">
|
<section class="content">
|
||||||
<aside class="sidebar">
|
<aside class="sidebar">
|
||||||
<div>
|
<i class="toggle-icon toggle-icon--close" data-toggle="sidebar"></i>
|
||||||
<h3>
|
|
||||||
<a class="index-link" href="{{ pathto('index') }}">{{ shorttitle}} </a>
|
<h3 class="sidebar__title">
|
||||||
</h3>
|
<a href="{{ pathto('index') }}">{{ shorttitle}} </a>
|
||||||
{{ miniosidebar() }}
|
</h3>
|
||||||
</div>
|
|
||||||
|
{{ miniosidebar() }}
|
||||||
</aside>
|
</aside>
|
||||||
<div class="content__main">
|
<div class="content__main">
|
||||||
{% block alertbar -%}
|
{% block alertbar -%}
|
||||||
|
|||||||
Reference in New Issue
Block a user