From d2657ec80af823643a2b5662ca7f8e6a95c750f1 Mon Sep 17 00:00:00 2001
From: ravindk89 <ravind@min.io>
Date: Mon, 21 Sep 2020 19:33:01 -0400
Subject: [PATCH] Additional CSS/JS FIxups

---
 source/_static/css-style.css  | 39 ++++++++++++++++++++++++++++++-----
 source/_static/js/main.js     |  9 ++++----
 source/_templates/layout.html |  5 +++--
 source/conf.py                |  2 +-
 4 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/source/_static/css-style.css b/source/_static/css-style.css
index 9bac0ef3..54b181a4 100644
--- a/source/_static/css-style.css
+++ b/source/_static/css-style.css
@@ -8,7 +8,7 @@
 
 :root {
   --table-border-color: #e6e6e6;
-  --minio-red: #c72e49;
+  --minio-red: rgb(199, 46, 73);
   --minio-midnight: #012b35;
   --minio-nautical: #00303f;
   --minio-meridian: #132742;
@@ -16,6 +16,10 @@
 
 }
 
+html {
+   scroll-behavior: smooth;
+}
+
 body {
    font-family: Mark, Helvetica, sans-serif;
    font-size: 100%;
@@ -26,12 +30,11 @@ div.flexwrapper {
    flex-flow: row wrap;
    
    width: auto;
-   height: 100vh;
    /* overflow: hidden;
    Have to comment this out because clicking anchors breaks layout. */
 }
 
-div :target.h1,h2,h3,h4 {
+body :target {
    scroll-margin-top: 100px;
 }
 
@@ -46,6 +49,7 @@ body div.left  {
    top: 85px;
    color: var(--minio-meridian);
    z-index: 5;
+   border-right: 1px solid var(--minio-glacier);
 }
 
 body div.left li.toctree-l1 a {
@@ -53,6 +57,7 @@ body div.left li.toctree-l1 a {
 }
 body div.left div.sphinxsidebarwrapper {
    padding: 0 0 0 5px;
+   margin-top: 15px;
 }
 
 body div.left div.sphinxsidebarwrapper ul {
@@ -62,10 +67,11 @@ body div.left div.sphinxsidebarwrapper ul {
 
 body div.left button.sphinxsidebarbutton {
    width: 100px;
-   margin-left: auto;
    background: none;
    border: none;
-   margin-bottom: 5px;
+   position: fixed;
+   left: 115px;
+   top: 75px;
 }
 
 body div.left div.sphinxsidebarwrapper a.current.reference.internal {
@@ -78,6 +84,11 @@ body div.left div.sphinxsidebarwrapper a.current.reference.internal {
 
 }
 
+body div.left div.sphinxsidebarwrapper h1.logo {
+   font-size: 110%;
+   margin: 0px;
+}
+
 body div.left div.sphinxsidebarwrapper li.toctree-l1 {
    margin-top: 10px;
    margin-bottom: 10px;
@@ -194,6 +205,7 @@ body div.right {
    flex-shrink: 0;
    margin-left: 10px;
    margin-top: 85px;
+   border-left: 1px solid var(--minio-glacier);
 }
 
 body div.right div.topic {
@@ -201,14 +213,30 @@ body div.right div.topic {
    border-style: none;
 }
 
+body div.right div.localtoc {
+   position: sticky;
+   top: 85px;
+}
+
 body div.right ul.simple {
    margin-left: 5px;
 }
 
+body div.right ul li {
+   border-top: 1px solid var(--minio-glacier);
+   border-bottom: 1px solid var(--minio-glacier);
+   padding-top: 5px;
+   padding-bottom: 5px;
+}
+
 body div.right ul {
    list-style: none;
 }
 
+body div.right ul li ul {
+   margin-left: 10px;
+}
+
 body div.right a.reference.internal {
    color: var(--minio-meridian);
    text-decoration: none;
@@ -221,6 +249,7 @@ body div.right p.active-p {
    margin-left: -10px;
 }
 
+
 /* Collapse CSS */
 
 body div.left.collapsed {
diff --git a/source/_static/js/main.js b/source/_static/js/main.js
index f40d5dfe..8b5c3c82 100644
--- a/source/_static/js/main.js
+++ b/source/_static/js/main.js
@@ -18,8 +18,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
    // how to resolve that.
 
    let options = {
-      root: document.querySelector('div.center'),
-      rootMargin: '-150px 0px -300px 0px'
+      rootMargin: '-85px 0px 0px 0px'
    }
 
    const observer = new IntersectionObserver(entries => {
@@ -69,11 +68,11 @@ window.addEventListener('DOMContentLoaded', (event) => {
     leftcolumn.classList.toggle('collapsed');
     centercolumn.classList.toggle('collapsed');
     sidebarwrapper.classList.toggle('collapsed');
-    if (button.textContent == "[x] Collapse") {
-       button.textContent = "[x] Expand";
+    if (button.textContent == "Collapse x") {
+       button.textContent = "Expand x";
     }
     else {
-       button.textContent = "[x] Collapse";
+       button.textContent = "Collapse x";
     }
   }
    
diff --git a/source/_templates/layout.html b/source/_templates/layout.html
index 46772305..7f319917 100644
--- a/source/_templates/layout.html
+++ b/source/_templates/layout.html
@@ -53,7 +53,7 @@
 {%- block content %}
 
    <div class="left column">
-      <button class="sphinxsidebarbutton button-collapse">[x] Collapse</button>
+      <button class="sphinxsidebarbutton button-collapse">Collapse x</button>
       {{ miniosidebar() }}
    </div>
    <div class="flexwrapper">
@@ -62,7 +62,8 @@
             {% block alertbar -%}
             <div class="alert alert-info">
                <span class="alert-message">
-                  <p>We're building a new version of the MinIO Documentation!
+                  <p>Welcome to the upcoming version of the MinIO Documentation!
+                     The content of these pages may change at any time.
                      If you can't find what you're looking for, check our 
                      <a href="https://docs.min.io"> legacy documentation</a>. 
                      Thank you for your patience.
diff --git a/source/conf.py b/source/conf.py
index a97ac0da..a87ec954 100644
--- a/source/conf.py
+++ b/source/conf.py
@@ -22,7 +22,7 @@ sys.path.append(os.path.abspath('../sphinxext'))
 
 # -- Project information -----------------------------------------------------
 
-project = 'DOCS@MinIO'
+project = 'MinIO Documentation'
 copyright = '2020, MinIO'
 author = 'Ravind Kumar'