diff --git a/source/_static/css/main.css b/source/_static/css/main.css index 14d26add..f904d3c6 100644 --- a/source/_static/css/main.css +++ b/source/_static/css/main.css @@ -357,180 +357,268 @@ table.docutils { box-shadow: none; } .nav { - margin-left: auto; } + z-index: 1; + -webkit-transition: opacity 300ms, -webkit-transform 300ms; + transition: opacity 300ms, -webkit-transform 300ms; + transition: opacity 300ms, transform 300ms; + transition: opacity 300ms, transform 300ms, -webkit-transform 300ms; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-left: auto; + font-size: 0.9375rem; } @media (max-width: 991px) { .nav { - position: fixed; height: 100vh; - width: 18rem; - top: 0; + width: 300px; + position: fixed; right: 0; - -webkit-transform: translate3d(18rem, 0, 0); - transform: translate3d(18rem, 0, 0); - opacity: 0; - -webkit-box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.1); - box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.1); - background-color: rgba(255, 255, 255, 0.9925); - pointer-events: none; - -webkit-transition: opacity 400ms, -webkit-transform 300ms; - transition: opacity 400ms, -webkit-transform 300ms; - transition: opacity 400ms, transform 300ms; - transition: opacity 400ms, transform 300ms, -webkit-transform 300ms; - display: -webkit-box; - display: -ms-flexbox; - display: flex; + top: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; - padding: 1rem 2rem 2rem; - height: 100%; - overflow-y: auto; } } + -webkit-transform: translate3d(300px, 0, 0); + transform: translate3d(300px, 0, 0); + opacity: 0; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + overflow-y: auto; + background-color: #ffffff; + padding-top: 2.5rem; } } .nav > .toggle-icon { position: absolute; top: 0.7rem; - right: 0.7rem; - z-index: 1; } + right: 0.7rem; } + @media (min-width: 992px) { + .nav > .toggle-icon { + display: none; } } -.nav-toggled .nav { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - pointer-events: all; } +@media (max-width: 991px) { + .nav-toggled .nav { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + z-index: 100; } } .nav__item { - position: relative; - font-size: 0.95rem; - line-height: 100%; - border-radius: 0.2rem; - cursor: pointer; } - .nav__item, .nav__item:hover { + position: relative; } + .nav__item:hover .nav__dropdown { + opacity: 1; + pointer-events: auto; } + .nav__item:hover .nav__link--dropdown > span:before { + opacity: 0; } + +.nav__link { + line-height: 100%; } + .nav__link, .nav__link: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; } } + .nav__link { + padding: 0.625rem 1.25rem 0.8125rem; + margin-left: 0.25rem; + cursor: pointer; } + .nav__link > span { + position: relative; } + .nav__link > span:before { + height: 1px; + width: 100%; + background-color: #4b4b4b; + position: absolute; + bottom: -8px; + left: 0; + content: ""; + -webkit-transform: translateY(5px); + transform: translateY(5px); + opacity: 0; + -webkit-transition: opacity 300ms, -webkit-transform 300ms; + transition: opacity 300ms, -webkit-transform 300ms; + transition: opacity 300ms, transform 300ms; + transition: opacity 300ms, transform 300ms, -webkit-transform 300ms; } + .nav__link:not(.nav__link--dropdown):hover > span:before { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; } } @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; } } + .nav__link { + font-weight: 500; + color: #000000; + padding: 0.75rem 1.75rem; } } -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 { +.nav__link--active > span:before { + opacity: 1; -webkit-transform: translateY(0); - transform: translateY(0); - opacity: 1; } + transform: translateY(0); } -@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; } } +.nav__link--download { + border: 1px solid #C72C48; + -webkit-transition: background-color 300ms, color 300ms; + transition: background-color 300ms, color 300ms; + border-radius: 0.1875rem; } + .nav__link--download:hover { + background-color: #C72C48; + color: #ffffff; } + @media (max-width: 991px) { + .nav__link--download { + margin: 1.5rem; + text-align: center; } } @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)); + margin-top: 0.3125rem; + width: 385px; + -webkit-transform: translateX(calc(-50% + 3rem)); + transform: translateX(calc(-50% + 3rem)); position: absolute; left: 0; - top: 86%; + top: 90%; opacity: 0; -webkit-transition: opacity 200ms; transition: opacity 200ms; - pointer-events: none; - max-height: calc(100vh - 5rem); - overflow-y: auto; } } + pointer-events: none; } + .nav__dropdown:before { + left: 50%; + margin-left: -5px; + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 0 10px 8px; + border-color: transparent transparent #ffffff transparent; + position: absolute; + top: -8px; } + .nav__dropdown .nav__dropdown__inner { + padding: 1.5rem; + max-height: calc(100vh - 5rem); + overflow-y: auto; + border-radius: 0.1875rem; + -webkit-box-shadow: 0 0.0625rem 1.25rem rgba(0, 0, 0, 0.13); + box-shadow: 0 0.0625rem 1.25rem rgba(0, 0, 0, 0.13); + background-color: #ffffff; } } @media (max-width: 991px) { - .nav__dropdown { - margin: 1rem -2rem -0.8rem; - padding: 0.5rem 2rem; - background-color: #f9f9f9; } } + .nav__dropdown .nav__dropdown__inner { + background-color: #f8f8f8; + padding: 0.5rem 1rem; + margin-bottom: 1rem; } } + +@media (min-width: 992px) { + .nav__dropdown--lg { + width: 800px; } + .nav__dropdown--lg .nav__dropdown__inner { + padding: 3.5rem; } } + +@media (max-width: 1200px) and (min-width: 992px) { + .nav__dropdown--lg { + width: 500px; } + .nav__dropdown--lg .nav__dropdown__inner { + padding: 1.5rem; } } .nav__sub { - display: block; - text-align: left; - font-size: 1rem; + padding: 0.6rem 0.75rem; + font-weight: 500; 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; } } + border-radius: 0.25rem; } @media (max-width: 991px) { .nav__sub { - padding: 0.75rem 0; } } + font-size: 0.85rem; + font-weight: normal; } } + .nav__sub, .nav__sub > small { - display: block; + display: block; } + .nav__sub > small { + color: #4b4b4b; + font-weight: normal; font-size: 0.8rem; - color: #7f7f7f; - margin-top: 0.7rem; - line-height: 1.4; } + opacity: 0.75; + margin-top: 0.25rem; } + @media (max-width: 991px) { + .nav__sub > small { + display: none; } } + .nav__sub:hover { + background-color: #f8f8f8; + color: #000000; } -.nav__close { - position: absolute; - top: 1.25rem; - left: -2.7rem; } +.nav__arrow { + width: 9px; + height: 5px; + background: url(../img/icons/nav-arrow.svg) no-repeat center; + display: inline-block; + margin-left: 4px; } + @media (max-width: 991px) { + .nav__arrow { + display: none; } } + +@media (min-width: 992px) { + .nav__feature { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } } + +.nav__column { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } + +@media (min-width: 992px) { + .nav__column--main { + padding-right: 1rem; } + .nav__column--main > .nav__sub { + margin-top: 1rem; } } + +.nav__column__title { + text-transform: uppercase; + font-size: 0.6rem; + padding-left: 0.75rem; + margin-bottom: 0.2rem; } + @media (max-width: 991px) { + .nav__column__title { + margin-top: 1rem; } } + +.nav__lead { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .nav__lead, .nav__lead:hover { + color: #000000; } + .nav__lead > img { + width: 30px; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-right: 0.75rem; } + @media (max-width: 991px) { + .nav__lead > img { + display: none; } } + +@media (min-width: 992px) { + .nav__jump { + padding-left: 2.6rem; + margin-top: -0.2rem; } + .nav__jump > a { + font-weight: normal; + display: block; + font-size: 0.8rem; + margin-top: 0.5rem; } + .nav__jump > a, .nav__jump > a:hover { + color: #000000; } + .nav__jump > a:hover { + text-decoration: underline; } } + +@media (max-width: 991px) { + .nav__jump { + display: none; } } .toggle-icon { width: 2.5rem; height: 2.5rem; cursor: pointer; - border-radius: 0.2rem; + border-radius: 0.1875rem; -webkit-transition: background-color 300ms; transition: background-color 300ms; -ms-flex-negative: 0; @@ -553,12 +641,12 @@ a.nav__item:not(:last-child).active > span::after, a.nav__item:not(:last-child): .toggle-icon--docs { background-image: url(../img/icons/docs.svg); } -.toggle-icon--close { - background-image: url(../img/icons/close-circle.svg); } - .toggle-icon--menu { background-image: url(../img/icons/menu.svg); } +.toggle-icon--close { + background-image: url(../img/icons/close-circle.svg); } + .toggle-icon--toc { background-image: url(../img/icons/toc.svg); } @@ -572,7 +660,7 @@ a.nav__item:not(:last-child).active > span::after, a.nav__item:not(:last-child): transition: opacity 400ms, -webkit-transform 300ms; transition: opacity 400ms, transform 300ms; transition: opacity 400ms, transform 300ms, -webkit-transform 300ms; - padding: 2rem 2rem 2rem 0; + padding: 3rem 2rem 2rem 0; overflow-y: auto; } @media (max-width: 991px) { .sidebar { @@ -637,7 +725,7 @@ a.nav__item:not(:last-child).active > span::after, a.nav__item:not(:last-child): background-color: #ffffff; } @media (min-width: 992px) { .search__text { - border-radius: 0.2rem; } } + border-radius: 0.1875rem; } } .search__text:focus { border-color: #cacaca; } diff --git a/source/_static/css/main.min.css b/source/_static/css/main.min.css index 9656b532..e2075423 100644 --- a/source/_static/css/main.min.css +++ b/source/_static/css/main.min.css @@ -1 +1 @@ -@font-face{font-family:Mark;src:url(../fonts/Mark-Regular.woff2) format("woff2"),url(../fonts/Mark-Regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Mark;src:url(../fonts/Mark-Medium.woff2) format("woff2"),url(../fonts/Mark-Medium.woff) format("woff");font-weight:500;font-style:normal}html{line-height:1.35;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:.9em}a{background-color:transparent;text-decoration:none}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:700}code,kbd,samp{font-family:monospace,monospace;font-size:.9em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button[disabled]{cursor:default}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}address{font-style:normal;color:inherit;margin:0}*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:active,:focus{outline:0}html{font-size:16px}body{all:unset;font-family:Mark,sans-serif;font-size:1rem;line-height:1.5;color:#4b4b4b;background-color:#f9f9f9;font-weight:400;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}a{color:#0045ec;text-decoration:none}a:hover{color:#0036b9;text-decoration:none}a>img.anchor{-webkit-box-shadow:none;box-shadow:none;height:1rem}h1,h2,h3,h4,h5,h6{color:#1c1c1c;position:relative}h1>.toc-backref,h2>.toc-backref,h3>.toc-backref,h4>.toc-backref,h5>.toc-backref,h6>.toc-backref{color:#1c1c1c}h1>.headerlink,h2>.headerlink,h3>.headerlink,h4>.headerlink,h5>.headerlink,h6>.headerlink{position:absolute;left:-1.5rem;top:0;opacity:.5}h1>.headerlink:hover,h2>.headerlink:hover,h3>.headerlink:hover,h4>.headerlink:hover,h5>.headerlink:hover,h6>.headerlink:hover{background-color:transparent;opacity:1}div.admonition{margin-top:0}div.admonition>p.admonition-title{font-weight:700;font-family:Mark,sans-serif;font-size:1.2rem}div.admonition.warning{background-color:#fff2f2;border:none;border-left:4px solid #e54253}div.admonition.important{background-color:#fff9e6;border:none;border-left:4px solid #edbc39}div.admonition.note{background-color:#edf9ff;border:none;border-left:4px solid #2592ef}dl{margin:10px 0 10px 0}dl.minio{margin:10px 0 10px 0}div.footer{width:auto;margin:0}.align-default{text-align:left}table.docutils{border:none;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}table.docutils>tbody tr th.stub{border:none;border-bottom:1px solid #e6e6e6;color:#c72c48}table.docutils>thead tr th{border:none;border-bottom:1px solid #e6e6e6;font-size:1rem;color:#c72c48}table.docutils>tbody tr td{border:none;border-bottom:1px solid #e6e6e6}table.docutils>tbody tr td>p{font-size:.9rem}.xref{color:#c72c48}.content__main img{-webkit-box-shadow:0 0 5px #d3d3d3;box-shadow:0 0 5px #d3d3d3}@media (min-width:1200px){.content,.header{padding:0 4rem}}@media (max-width:1199px){.content,.header{padding:0 2rem}}.content{overflow:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:calc(100vh - 5rem)}.content__main{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;background-color:#fff;-ms-flex-item-align:start;align-self:flex-start}@media (min-width:1200px){.content__main{padding:4rem}}@media (max-width:1199px){.content__main{padding:2rem}}.content__right{-ms-flex-negative:0;flex-shrink:0;position:sticky;top:0;max-width:200px}.header{height:5rem;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 0 .75rem rgba(0,0,0,.1);box-shadow:0 0 .75rem rgba(0,0,0,.1);width:100%;z-index:10;-ms-flex-negative:0;flex-shrink:0;display:flex;align-items:center}@media (min-width:992px){.header .toggle-icon{display:none}}.header .toggle-icon--menu{margin-left:auto}.logo{-ms-flex-negative:0;flex-shrink:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}@media (max-width:991px){.logo{margin-left:1rem}}.logo>img{height:1.05rem;-webkit-box-shadow:none;box-shadow:none}.nav{margin-left:auto}@media (max-width:991px){.nav{position:fixed;height:100vh;width:18rem;top:0;right:0;-webkit-transform:translate3d(18rem,0,0);transform:translate3d(18rem,0,0);opacity:0;-webkit-box-shadow:0 0 .8rem rgba(0,0,0,.1);box-shadow:0 0 .8rem rgba(0,0,0,.1);background-color:rgba(255,255,255,.9925);pointer-events:none;-webkit-transition:opacity .4s,-webkit-transform .3s;transition:opacity .4s,-webkit-transform .3s;transition:opacity .4s,transform .3s;transition:opacity .4s,transform .3s,-webkit-transform .3s;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1rem 2rem 2rem;height:100%;overflow-y:auto}}.nav>.toggle-icon{position:absolute;top:.7rem;right:.7rem;z-index:1}.nav-toggled .nav{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;pointer-events:all}.nav__item{position:relative;font-size:.95rem;line-height:100%;border-radius:.2rem;cursor:pointer}.nav__item,.nav__item:hover{color:#4b4b4b}@media (min-width:992px){.nav__item{padding:.4rem 1.2rem .55rem}.nav__item:hover .nav__dropdown{opacity:1;pointer-events:all}}@media (max-width:991px){.nav__item{padding:.85rem 0}}.nav__item:last-child{border:1px solid #c72c48;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;text-align:center}.nav__item:last-child:hover{background-color:#c72c48;color:#fff}@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 #fff transparent;position:absolute;bottom:-3px;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}span.nav__item:hover:after{opacity:1}}@media (min-width:992px){.nav__dropdown{background-color:#fff;padding:1.25rem;border-radius:.4rem;-webkit-box-shadow:0 -1px 1.25rem rgba(0,0,0,.13);box-shadow:0 -1px 1.25rem rgba(0,0,0,.13);margin-top:.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 .2s;transition:opacity .2s;pointer-events:none;max-height:calc(100vh - 5rem);overflow-y:auto}}@media (max-width:991px){.nav__dropdown{margin:1rem -2rem -.8rem;padding:.5rem 2rem;background-color:#f9f9f9}}.nav__sub{display:block;text-align:left;font-size:1rem;color:#000;position:relative}@media (min-width:992px){.nav__sub{padding:1rem;border-radius:.4rem;-webkit-transition:background-color .3s;transition:background-color .3s}.nav__sub:hover{background-color:#f8f8f8;color:#000}}@media (max-width:991px){.nav__sub{padding:.75rem 0}}.nav__sub>small{display:block;font-size:.8rem;color:#7f7f7f;margin-top:.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;border-radius:.2rem;-webkit-transition:background-color .3s;transition:background-color .3s;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-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,.075)}.toggle-icon--docs{background-image:url(../img/icons/docs.svg)}.toggle-icon--close{background-image:url(../img/icons/close-circle.svg)}.toggle-icon--menu{background-image:url(../img/icons/menu.svg)}.toggle-icon--toc{background-image:url(../img/icons/toc.svg)}.sidebar{width:18rem;position:sticky;position:-webkit-sticky;top:0;background-color:#f9f9f9;-webkit-transition:opacity .4s,-webkit-transform .3s;transition:opacity .4s,-webkit-transform .3s;transition:opacity .4s,transform .3s;transition:opacity .4s,transform .3s,-webkit-transform .3s;padding:2rem 2rem 2rem 0;overflow-y:auto}@media (max-width:991px){.sidebar{position:fixed;left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);height:100%;-webkit-box-shadow:0 0 1.5rem rgba(0,0,0,.15);box-shadow:0 0 1.5rem rgba(0,0,0,.15);opacity:0;z-index:11;pointer-events:none;height:100%;overflow-y:auto;padding-left:2rem}}.sidebar>.toggle-icon{position:absolute;top:.7rem;right:.7rem}@media (min-width:992px){.sidebar>.toggle-icon{display:none}}.sidebar__title{margin:0 0 1.5rem;line-height:100%}.sidebar__title>a{line-height:100%;color:#1c1c1c;font-size:.9rem;text-transform:uppercase;font-weight:500}.sidebar__title>a:hover{color:#1c1c1c}.sidebar-toggled .sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;pointer-events:all}.search{margin-bottom:.8rem}@media (max-width:991px){.search{margin-right:-1rem;margin-left:-1rem}}.search__text{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #f0f0f0;height:2.65rem;background-color:#fff;color:#555;font-size:.85rem;width:100%;padding:0 1rem .1rem 2.6rem;background:url(../img/icons/search.svg) no-repeat center left 1rem;background-color:#fff}@media (min-width:992px){.search__text{border-radius:.2rem}}.search__text:focus{border-color:#cacaca}.docs ul{list-style:none;padding:0;font-size:.95rem}.docs ul>li>a,.docs ul>li>a>code{all:unset}.docs ul>li>a:hover{border:0;cursor:pointer}.docs>ul{margin:0}.docs>ul>li>a{color:#1c1c1c;padding:.5rem 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.docs>ul>li>a:hover{color:#000}.docs>ul>li.current>a{color:#c72c48;font-weight:500}.docs>ul>li>ul{margin:0 0 .5rem}.docs>ul>li>ul>li>a{font-size:.85rem;color:#494949;display:block;padding:.4rem 0}.docs>ul>li>ul>li>a:hover{color:#000}.docs>ul>li>ul>li>a.current{color:#000;font-weight:500}div#localtoc{font-size:13px;margin-left:20px}#table-of-contents{background:0 0;border-style:none}#table-of-contents ul{list-style:none;margin:10px 0 10px 0}#table-of-contents ul>li{list-style:none;margin:10px 0 10px 0}#table-of-contents ul>li>p a.reference{text-decoration:none;border-bottom:none;color:#1c1c1c}#table-of-contents ul>li>ul{margin:10px 0 10px 10px} \ No newline at end of file +@font-face{font-family:Mark;src:url(../fonts/Mark-Regular.woff2) format("woff2"),url(../fonts/Mark-Regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Mark;src:url(../fonts/Mark-Medium.woff2) format("woff2"),url(../fonts/Mark-Medium.woff) format("woff");font-weight:500;font-style:normal}html{line-height:1.35;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:.9em}a{background-color:transparent;text-decoration:none}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:700}code,kbd,samp{font-family:monospace,monospace;font-size:.9em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button[disabled]{cursor:default}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}address{font-style:normal;color:inherit;margin:0}*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:active,:focus{outline:0}html{font-size:16px}body{all:unset;font-family:Mark,sans-serif;font-size:1rem;line-height:1.5;color:#4b4b4b;background-color:#f9f9f9;font-weight:400;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}a{color:#0045ec;text-decoration:none}a:hover{color:#0036b9;text-decoration:none}a>img.anchor{-webkit-box-shadow:none;box-shadow:none;height:1rem}h1,h2,h3,h4,h5,h6{color:#1c1c1c;position:relative}h1>.toc-backref,h2>.toc-backref,h3>.toc-backref,h4>.toc-backref,h5>.toc-backref,h6>.toc-backref{color:#1c1c1c}h1>.headerlink,h2>.headerlink,h3>.headerlink,h4>.headerlink,h5>.headerlink,h6>.headerlink{position:absolute;left:-1.5rem;top:0;opacity:.5}h1>.headerlink:hover,h2>.headerlink:hover,h3>.headerlink:hover,h4>.headerlink:hover,h5>.headerlink:hover,h6>.headerlink:hover{background-color:transparent;opacity:1}div.admonition{margin-top:0}div.admonition>p.admonition-title{font-weight:700;font-family:Mark,sans-serif;font-size:1.2rem}div.admonition.warning{background-color:#fff2f2;border:none;border-left:4px solid #e54253}div.admonition.important{background-color:#fff9e6;border:none;border-left:4px solid #edbc39}div.admonition.note{background-color:#edf9ff;border:none;border-left:4px solid #2592ef}dl{margin:10px 0 10px 0}dl.minio{margin:10px 0 10px 0}div.footer{width:auto;margin:0}.align-default{text-align:left}table.docutils{border:none;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}table.docutils>tbody tr th.stub{border:none;border-bottom:1px solid #e6e6e6;color:#c72c48}table.docutils>thead tr th{border:none;border-bottom:1px solid #e6e6e6;font-size:1rem;color:#c72c48}table.docutils>tbody tr td{border:none;border-bottom:1px solid #e6e6e6}table.docutils>tbody tr td>p{font-size:.9rem}.xref{color:#c72c48}.content__main img{-webkit-box-shadow:0 0 5px #d3d3d3;box-shadow:0 0 5px #d3d3d3}@media (min-width:1200px){.content,.header{padding:0 4rem}}@media (max-width:1199px){.content,.header{padding:0 2rem}}.content{overflow:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:calc(100vh - 5rem)}.content__main{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;background-color:#fff;-ms-flex-item-align:start;align-self:flex-start}@media (min-width:1200px){.content__main{padding:4rem}}@media (max-width:1199px){.content__main{padding:2rem}}.content__right{-ms-flex-negative:0;flex-shrink:0;position:sticky;top:0;max-width:200px}.header{height:5rem;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 0 .75rem rgba(0,0,0,.1);box-shadow:0 0 .75rem rgba(0,0,0,.1);width:100%;z-index:10;-ms-flex-negative:0;flex-shrink:0;display:flex;align-items:center}@media (min-width:992px){.header .toggle-icon{display:none}}.header .toggle-icon--menu{margin-left:auto}.logo{-ms-flex-negative:0;flex-shrink:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}@media (max-width:991px){.logo{margin-left:1rem}}.logo>img{height:1.05rem;-webkit-box-shadow:none;box-shadow:none}.nav{z-index:1;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:auto;font-size:.9375rem}@media (max-width:991px){.nav{height:100vh;width:300px;position:fixed;right:0;top:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transform:translate3d(300px,0,0);transform:translate3d(300px,0,0);opacity:0;-webkit-box-shadow:0 0 10px rgba(0,0,0,.1);box-shadow:0 0 10px rgba(0,0,0,.1);overflow-y:auto;background-color:#fff;padding-top:2.5rem}}.nav>.toggle-icon{position:absolute;top:.7rem;right:.7rem}@media (min-width:992px){.nav>.toggle-icon{display:none}}@media (max-width:991px){.nav-toggled .nav{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;z-index:100}}.nav__item{position:relative}.nav__item:hover .nav__dropdown{opacity:1;pointer-events:auto}.nav__item:hover .nav__link--dropdown>span:before{opacity:0}.nav__link{line-height:100%}.nav__link,.nav__link:hover{color:#4b4b4b}@media (min-width:992px){.nav__link{padding:.625rem 1.25rem .8125rem;margin-left:.25rem;cursor:pointer}.nav__link>span{position:relative}.nav__link>span:before{height:1px;width:100%;background-color:#4b4b4b;position:absolute;bottom:-8px;left:0;content:"";-webkit-transform:translateY(5px);transform:translateY(5px);opacity:0;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s}.nav__link:not(.nav__link--dropdown):hover>span:before{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@media (max-width:991px){.nav__link{font-weight:500;color:#000;padding:.75rem 1.75rem}}.nav__link--active>span:before{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.nav__link--download{border:1px solid #c72c48;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;border-radius:.1875rem}.nav__link--download:hover{background-color:#c72c48;color:#fff}@media (max-width:991px){.nav__link--download{margin:1.5rem;text-align:center}}@media (min-width:992px){.nav__dropdown{margin-top:.3125rem;width:385px;-webkit-transform:translateX(calc(-50% + 3rem));transform:translateX(calc(-50% + 3rem));position:absolute;left:0;top:90%;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s;pointer-events:none}.nav__dropdown:before{left:50%;margin-left:-5px;content:"";width:0;height:0;border-style:solid;border-width:0 10px 8px;border-color:transparent transparent #fff transparent;position:absolute;top:-8px}.nav__dropdown .nav__dropdown__inner{padding:1.5rem;max-height:calc(100vh - 5rem);overflow-y:auto;border-radius:.1875rem;-webkit-box-shadow:0 .0625rem 1.25rem rgba(0,0,0,.13);box-shadow:0 .0625rem 1.25rem rgba(0,0,0,.13);background-color:#fff}}@media (max-width:991px){.nav__dropdown .nav__dropdown__inner{background-color:#f8f8f8;padding:.5rem 1rem;margin-bottom:1rem}}@media (min-width:992px){.nav__dropdown--lg{width:800px}.nav__dropdown--lg .nav__dropdown__inner{padding:3.5rem}}@media (max-width:1200px) and (min-width:992px){.nav__dropdown--lg{width:500px}.nav__dropdown--lg .nav__dropdown__inner{padding:1.5rem}}.nav__sub{padding:.6rem .75rem;font-weight:500;color:#000;border-radius:.25rem}@media (max-width:991px){.nav__sub{font-size:.85rem;font-weight:400}}.nav__sub,.nav__sub>small{display:block}.nav__sub>small{color:#4b4b4b;font-weight:400;font-size:.8rem;opacity:.75;margin-top:.25rem}@media (max-width:991px){.nav__sub>small{display:none}}.nav__sub:hover{background-color:#f8f8f8;color:#000}.nav__arrow{width:9px;height:5px;background:url(../img/icons/nav-arrow.svg) no-repeat center;display:inline-block;margin-left:4px}@media (max-width:991px){.nav__arrow{display:none}}@media (min-width:992px){.nav__feature{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}}.nav__column{-webkit-box-flex:1;-ms-flex:1;flex:1}@media (min-width:992px){.nav__column--main{padding-right:1rem}.nav__column--main>.nav__sub{margin-top:1rem}}.nav__column__title{text-transform:uppercase;font-size:.6rem;padding-left:.75rem;margin-bottom:.2rem}@media (max-width:991px){.nav__column__title{margin-top:1rem}}.nav__lead{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.nav__lead,.nav__lead:hover{color:#000}.nav__lead>img{width:30px;-ms-flex-negative:0;flex-shrink:0;margin-right:.75rem}@media (max-width:991px){.nav__lead>img{display:none}}@media (min-width:992px){.nav__jump{padding-left:2.6rem;margin-top:-.2rem}.nav__jump>a{font-weight:400;display:block;font-size:.8rem;margin-top:.5rem}.nav__jump>a,.nav__jump>a:hover{color:#000}.nav__jump>a:hover{text-decoration:underline}}@media (max-width:991px){.nav__jump{display:none}}.toggle-icon{width:2.5rem;height:2.5rem;cursor:pointer;border-radius:.1875rem;-webkit-transition:background-color .3s;transition:background-color .3s;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-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,.075)}.toggle-icon--docs{background-image:url(../img/icons/docs.svg)}.toggle-icon--menu{background-image:url(../img/icons/menu.svg)}.toggle-icon--close{background-image:url(../img/icons/close-circle.svg)}.toggle-icon--toc{background-image:url(../img/icons/toc.svg)}.sidebar{width:18rem;position:sticky;position:-webkit-sticky;top:0;background-color:#f9f9f9;-webkit-transition:opacity .4s,-webkit-transform .3s;transition:opacity .4s,-webkit-transform .3s;transition:opacity .4s,transform .3s;transition:opacity .4s,transform .3s,-webkit-transform .3s;padding:3rem 2rem 2rem 0;overflow-y:auto}@media (max-width:991px){.sidebar{position:fixed;left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);height:100%;-webkit-box-shadow:0 0 1.5rem rgba(0,0,0,.15);box-shadow:0 0 1.5rem rgba(0,0,0,.15);opacity:0;z-index:11;pointer-events:none;height:100%;overflow-y:auto;padding-left:2rem}}.sidebar>.toggle-icon{position:absolute;top:.7rem;right:.7rem}@media (min-width:992px){.sidebar>.toggle-icon{display:none}}.sidebar__title{margin:0 0 1.5rem;line-height:100%}.sidebar__title>a{line-height:100%;color:#1c1c1c;font-size:.9rem;text-transform:uppercase;font-weight:500}.sidebar__title>a:hover{color:#1c1c1c}.sidebar-toggled .sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;pointer-events:all}.search{margin-bottom:.8rem}@media (max-width:991px){.search{margin-right:-1rem;margin-left:-1rem}}.search__text{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #f0f0f0;height:2.65rem;background-color:#fff;color:#555;font-size:.85rem;width:100%;padding:0 1rem .1rem 2.6rem;background:url(../img/icons/search.svg) no-repeat center left 1rem;background-color:#fff}@media (min-width:992px){.search__text{border-radius:.1875rem}}.search__text:focus{border-color:#cacaca}.docs ul{list-style:none;padding:0;font-size:.95rem}.docs ul>li>a,.docs ul>li>a>code{all:unset}.docs ul>li>a:hover{border:0;cursor:pointer}.docs>ul{margin:0}.docs>ul>li>a{color:#1c1c1c;padding:.5rem 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.docs>ul>li>a:hover{color:#000}.docs>ul>li.current>a{color:#c72c48;font-weight:500}.docs>ul>li>ul{margin:0 0 .5rem}.docs>ul>li>ul>li>a{font-size:.85rem;color:#494949;display:block;padding:.4rem 0}.docs>ul>li>ul>li>a:hover{color:#000}.docs>ul>li>ul>li>a.current{color:#000;font-weight:500}div#localtoc{font-size:13px;margin-left:20px}#table-of-contents{background:0 0;border-style:none}#table-of-contents ul{list-style:none;margin:10px 0 10px 0}#table-of-contents ul>li{list-style:none;margin:10px 0 10px 0}#table-of-contents ul>li>p a.reference{text-decoration:none;border-bottom:none;color:#1c1c1c}#table-of-contents ul>li>ul{margin:10px 0 10px 10px} \ No newline at end of file diff --git a/source/_static/data/nav.json b/source/_static/data/nav.json deleted file mode 100644 index 2945e0d1..00000000 --- a/source/_static/data/nav.json +++ /dev/null @@ -1,60 +0,0 @@ -{ - "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": { - "MinIO Baremetal" : { - "description": "MinIO Object Storage for Baremetal Infrastructure", - "link": "https://docs.min.io/minio/baremetal" - }, - "MinIO Hybrid Cloud" : { - "description" : "MinIO Object Storage for Kubernetes-Managed Private and Public Cloud Infrastructure", - "link" : "https://docs.min.io/minio/k8s" - }, - "MinIO for VMware Cloud Foundation" : { - "description" : "MinIO Object Storage for VMware Cloud Foundation 4.2", - "link" : "https://docs.min.io/minio/vsphere" - }, - "MinIO Legacy Documentation" : { - "description" : "MinIO Object Storage Legacy Documentation", - "link" : "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" -} \ No newline at end of file diff --git a/source/_static/img/icons/baremetal.svg b/source/_static/img/icons/baremetal.svg new file mode 100644 index 00000000..bc77e991 --- /dev/null +++ b/source/_static/img/icons/baremetal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/hybrid-cloud.svg b/source/_static/img/icons/hybrid-cloud.svg new file mode 100644 index 00000000..429a8385 --- /dev/null +++ b/source/_static/img/icons/hybrid-cloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/nav-arrow.svg b/source/_static/img/icons/nav-arrow.svg new file mode 100644 index 00000000..e5cc8b63 --- /dev/null +++ b/source/_static/img/icons/nav-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_static/img/icons/ref-hardware.svg b/source/_static/img/icons/ref-hardware.svg new file mode 100644 index 00000000..61f92427 --- /dev/null +++ b/source/_static/img/icons/ref-hardware.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 5e96d475..3575c950 100644 --- a/source/_static/js/main.js +++ b/source/_static/js/main.js @@ -12,54 +12,4 @@ window.addEventListener("DOMContentLoaded", (event) => { target === 'sidebar' ? $('body').removeClass('nav-toggled') : $('body').removeClass('sidebar-toggled'); $('body').toggleClass(target + '-toggled'); }); - - - // Render navigation menu - if($('#nav')[0]) { - var navData = '/_static/data/nav.json'; - var nav = $('.nav'); - - $.getJSON( navData, function(data) { - var navToggle = $(''); - navToggle.attr('data-toggle', 'nav'); - nav.after(navToggle); - - var navClose = $(''); - navClose.addClass('toggle-icon toggle-icon--close'); - navClose.attr('data-toggle', 'nav'); - nav.append(navClose); - - $.each(data, function(nav, navValue) { - var navElem = typeof navValue === 'object' ? '' : ''; - - var navLink = $(navElem); - navLink.addClass(nav === 'Docs' ? 'nav__item active' : 'nav__item'); - navLink.html('' + nav + ''); - - if(navElem === '') { - navLink.attr('href', navValue); - } - else { - var navDropdown = $('
'); - - $.each(navValue, function(sub, subValue) { - var navSub = $(''); - navSub.addClass('nav__sub'); - navSub.text(sub); - navSub.attr({ - 'href': subValue.link, - 'target': '_blank', - 'rel': 'noreferrer' - }); - navSub.append('' + subValue.description + ''); - navDropdown.append(navSub); - navLink.append(navDropdown) - }); - } - - $('#nav').append(navLink); - }); - - }); - } }); diff --git a/source/_static/scss/includes/_aside.scss b/source/_static/scss/includes/_aside.scss index 5da916d6..d68c0e74 100644 --- a/source/_static/scss/includes/_aside.scss +++ b/source/_static/scss/includes/_aside.scss @@ -5,7 +5,7 @@ top: 0; background-color: $sidebar-bg; transition: opacity 400ms, transform 300ms; - padding: $content-padding-sm $content-padding-sm $content-padding-sm 0; + padding: $content-padding-sm + 1 $content-padding-sm $content-padding-sm 0; overflow-y: auto; @include breakpoint-max(breakpoints(lg)) { @@ -80,7 +80,7 @@ background-color: $search-bg; @include breakpoint-min(breakpoints(lg)) { - border-radius: $border-radius-sm; + border-radius: $border-radius; } &:focus { diff --git a/source/_static/scss/includes/_header.scss b/source/_static/scss/includes/_header.scss index feb74912..02e0af8c 100644 --- a/source/_static/scss/includes/_header.scss +++ b/source/_static/scss/includes/_header.scss @@ -38,211 +38,335 @@ } .nav { - margin-left: auto; + z-index: 1; + transition: opacity 300ms, transform 300ms; + display: flex; + margin-left: auto; + font-size: 0.9375rem; - @include breakpoint-max(breakpoints(lg)) { - position: fixed; - 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; - } + @include breakpoint-max(breakpoints(lg)) { + height: 100vh; + width: $nav-mobile-width; + position: fixed; + right: 0; + top: 0; + flex-direction: column; + transform: translate3d($nav-mobile-width, 0, 0); + opacity: 0; + box-shadow: $nav-mobile-box-shadow; + overflow-y: auto; + background-color: $nav-mobile-bg; + padding-top: 2.5rem; + } & > .toggle-icon { + @include breakpoint-min(breakpoints(lg)) { + display: none; + } + 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 { + @include breakpoint-max(breakpoints(lg)) { + transform: translate3d(0, 0, 0); + opacity: 1; + z-index: $nav-active-z-index; + } } } .nav__item { - position: relative; - font-size: 0.95rem; - line-height: 100%; - border-radius: $border-radius-sm; - cursor: pointer; + position: relative; - &, - &:hover { - color: $nav-color; - } + &:hover { + .nav__dropdown { + opacity: 1; + pointer-events: auto; + } - @include breakpoint-min(breakpoints(lg)) { - padding: 0.4rem 1.2rem 0.55rem; - - &:hover { - .nav__dropdown { - opacity: 1; - pointer-events: all; - } - } - } - - @include breakpoint-max(breakpoints(lg)) { - padding: 0.85rem 0; - } - - &: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; - } - } + .nav__link--dropdown { + & > span { + &:before { + opacity: 0; + } + } + } + } } -a.nav__item { - &:not(:last-child) { - &>span { - position: relative; - cursor: pointer; +.nav__link { + line-height: 100%; - &: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; - } - } + &, + &:hover { + color: $nav-link-color; + } - &.active, - &:hover { - &>span { - &::after { - transform: translateY(0); - opacity: 1; - } - } - } - } + @include breakpoint-min(breakpoints(lg)) { + padding: 0.625rem 1.25rem 0.8125rem; + margin-left: 0.25rem; + cursor: pointer; + + & > span { + position: relative; + + &:before { + height: 1px; + width: 100%; + background-color: $nav-link-color; + position: absolute; + bottom: -8px; + left: 0; + content: ""; + transform: translateY(5px); + opacity: 0; + transition: opacity 300ms, transform 300ms; + } + } + + &:not(.nav__link--dropdown) { + &:hover { + & > span { + &:before { + transform: translateY(0); + opacity: 1; + } + } + } + } + } + + @include breakpoint-max(breakpoints(lg)) { + font-weight: $font-weight-medium; + color: $black; + padding: 0.75rem 1.75rem; + } } -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; - } +.nav__link--active { + & > span { + &:before { + opacity: 1; + transform: translateY(0); + } + } +} - &:hover { - &:after { - opacity: 1; - } - } - } +.nav__link--download { + border: 1px solid $theme-red; + transition: background-color 300ms, color 300ms; + border-radius: $border-radius; + + &:hover { + background-color: $theme-red; + color: $white; + } + + @include breakpoint-max(breakpoints(lg)) { + margin: 1.5rem; + text-align: center; + } } .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-min(breakpoints(lg)) { + margin-top: 0.3125rem; + width: 385px; + transform: translateX(calc(-50% + 3rem)); + position: absolute; + left: 0; + top: 90%; + opacity: 0; + transition: opacity 200ms; + pointer-events: none; - @include breakpoint-max(breakpoints(lg)) { - margin: 1rem (-$content-padding-sm) -0.8rem; - padding: 0.5rem $content-padding-sm; - background-color: $nav-dropdown-mobile-bg; - } + &:before { + left: 50%; + margin-left: -5px; + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 0 10px 8px; + border-color: transparent transparent $white transparent; + position: absolute; + top: -8px; + } + + .nav__dropdown__inner { + padding: 1.5rem; + max-height: calc(100vh - 5rem); + overflow-y: auto; + border-radius: $border-radius; + box-shadow: 0 0.0625rem 1.25rem rgba($black, 0.13); + background-color: $white; + } + } + + @include breakpoint-max(breakpoints(lg)) { + .nav__dropdown__inner { + background-color: $nav-sub-hover-bg; + padding: 0.5rem 1rem; + margin-bottom: 1rem; + } + } +} + +.nav__dropdown--lg { + @include breakpoint-min(breakpoints(lg)) { + width: 800px; + + .nav__dropdown__inner { + padding: 3.5rem; + } + } + + @media (max-width: map_get($breakpoints, xl)) and (min-width: map_get($breakpoints, lg)) { + width: 500px; + + .nav__dropdown__inner { + padding: 1.5rem; + } + } + + } .nav__sub { - display: block; - text-align: left; - font-size: 1rem; - color: $black; - position: relative; + padding: 0.6rem 0.75rem; + font-weight: $font-weight-medium; + color: $black; + border-radius: 0.25rem; - @include breakpoint-min(breakpoints(lg)) { - padding: 1rem; - border-radius: $border-radius; - transition: background-color 300ms; + @include breakpoint-max(breakpoints(lg)) { + font-size: 0.85rem; + font-weight: normal; + } - &:hover { - background-color: $nav-sub-hover-bg; - color: $black; - } - } + &, + & > small { + display: block; + } - @include breakpoint-max(breakpoints(lg)) { - padding: 0.75rem 0; - } + & > small { + color: #4b4b4b; + font-weight: normal; + font-size: 0.8rem; + opacity: 0.75; + margin-top: 0.25rem; - &>small { - display: block; - font-size: 0.8rem; - color: lighten($text-muted-color, 5%); - margin-top: 0.7rem; - line-height: 1.4; - } + @include breakpoint-max(breakpoints(lg)) { + display: none; + } + } + + &:hover { + background-color: $nav-sub-hover-bg; + color: $black; + } } -.nav__close { - position: absolute; - top: 1.25rem; - left: -2.7rem; +.nav__arrow { + width: 9px; + height: 5px; + background: $nav-arrow-icon; + display: inline-block; + margin-left: 4px; + + @include breakpoint-max(breakpoints(lg)) { + display: none; + } +} + +.nav__feature { + @include breakpoint-min(breakpoints(lg)) { + display: flex; + align-items: flex-start; + } +} + +.nav__column { + flex: 1; +} + +.nav__column--main { + @include breakpoint-min(breakpoints(lg)) { + padding-right: 1rem; + + & > .nav__sub { + margin-top: 1rem; + } + } +} + +.nav__column__title { + text-transform: uppercase; + font-size: 0.6rem; + padding-left: 0.75rem; + margin-bottom: 0.2rem; + + @include breakpoint-max(breakpoints(lg)) { + margin-top: 1rem; + } +} + +.nav__lead { + &, + &:hover { + color: $black; + } + + display: flex; + align-items: center; + + & > img { + width: 30px; + flex-shrink: 0; + margin-right: 0.75rem; + + @include breakpoint-max(breakpoints(lg)) { + display: none; + } + } +} + +.nav__jump { + @include breakpoint-min(breakpoints(lg)) { + padding-left: 2.6rem; + margin-top: -0.2rem; + + & > a { + &, + &:hover { + color: $black; + } + + &:hover { + text-decoration: underline; + } + + font-weight: normal; + display: block; + font-size: 0.8rem; + margin-top: 0.5rem; + } + } + + @include breakpoint-max(breakpoints(lg)) { + display: none; + } } .toggle-icon { width: 2.5rem; height: 2.5rem; cursor: pointer; - border-radius: $border-radius-sm; + border-radius: $border-radius; transition: background-color 300ms; flex-shrink: 0; display: flex; @@ -258,9 +382,9 @@ span.nav__item { } $toggleIcons: ( - docs: 'docs.svg', - close: 'close-circle.svg', + docs: 'docs.svg', menu: 'menu.svg', + close: 'close-circle.svg', toc: 'toc.svg' ); diff --git a/source/_static/scss/includes/_variables.scss b/source/_static/scss/includes/_variables.scss index e0742197..69998a18 100644 --- a/source/_static/scss/includes/_variables.scss +++ b/source/_static/scss/includes/_variables.scss @@ -63,8 +63,8 @@ $sidebar-bg: #F9F9F9; // Border Radius -$border-radius: 0.4rem; -$border-radius-sm: 0.2rem; +$border-radius: 0.1875rem; +$border-radius-lg: 0.3125rem; // Search @@ -97,7 +97,11 @@ $toggle-icon-hover-bg: rgba($theme-red, 0.075); // Nav -$nav-color: $body-color; +$nav-link-color: $body-color; $nav-border-color: #4b4b4b; $nav-sub-hover-bg: #f8f8f8; -$nav-dropdown-mobile-bg: lighten($theme-hover-bg, 1.5%); \ No newline at end of file +$nav-mobile-bg: $white; +$nav-mobile-width: 300px; +$nav-mobile-box-shadow: 0 0 10px rgba($black, 0.1); +$nav-active-z-index: 100; +$nav-arrow-icon: url(../img/icons/nav-arrow.svg) no-repeat center; \ No newline at end of file diff --git a/source/_templates/layout.html b/source/_templates/layout.html index 013e82ba..b8fcec7b 100644 --- a/source/_templates/layout.html +++ b/source/_templates/layout.html @@ -74,7 +74,6 @@ {%- endmacro %} {%- block header %} -