Cleaning CSS, updating packages

requirements.txt

@@ -1,6 +1,6 @@
 sphinx == 3.5.0
-sphinx-copybutton == 0.2.12
+sphinx-copybutton == 0.4.0
-git+https://github.com/ravindk89/sphinx-tabs
+sphinx-tabs == 3.1.0
 recommonmark == 0.6.0
 sphinx-markdown-tables == 0.0.15
 Sphinx-Substitution-Extensions == 2020.9.30.0

source/_static/css/main.css

@@ -206,6 +206,9 @@ a {
     -webkit-box-shadow: none;
             box-shadow: none;
     height: 1rem; }
+  a.reference {
+    text-decoration: none;
+    border-bottom: none; }
 
 h1, h2, h3, h4, h5, h6 {
   color: #1C1C1C;
@@ -221,12 +224,26 @@ h1, h2, h3, h4, h5, h6 {
       background-color: transparent;
       opacity: 1; }
 
+dl > dt {
+  font-weight: bold; }
+
+li dl.simple {
+  font-weight: normal; }
+  li dl.simple dt {
+    font-weight: normal; }
+  li dl.simple dd {
+    margin-left: 0px; }
+
 div.admonition {
-  margin-top: 0; }
+  margin-top: 0;
+  padding: 10px 20px;
+  background: rgba(0, 0, 0, 0.01);
+  border: none;
+  border-left: 4px solid grey; }
   div.admonition > p.admonition-title {
     font-weight: bold;
     font-family: "Mark", sans-serif;
-    font-size: 1.2rem; }
+    font-size: 1rem; }
   div.admonition.warning {
     background-color: #FFF2F2;
     border: none;
@@ -261,18 +278,39 @@ table.docutils {
   table.docutils > tbody tr th.stub {
     border: none;
     border-bottom: 1px solid #e6e6e6;
-    color: #C72C48; }
+    color: #C72C48;
+    font-size: .9rem; }
   table.docutils > thead tr th {
     border: none;
     border-bottom: 1px solid #e6e6e6;
     font-size: 1rem;
-    color: #C72C48; }
+    color: #C72C48;
+    font-size: .9rem; }
   table.docutils > tbody tr td {
     border: none;
     border-bottom: 1px solid #e6e6e6; }
     table.docutils > tbody tr td > p {
       font-size: .90rem; }
 
+.sphinx-tabs-tab {
+  color: rgba(0, 0, 0, 0.5);
+  background: none;
+  border: none;
+  padding: 0px 20px 10px 20px; }
+  .sphinx-tabs-tab[aria-selected=true] {
+    color: #C72C48;
+    font-weight: bold;
+    border-bottom: 0.15em solid #C72C48; }
+
+button.toggle-button {
+  width: 1.25em;
+  height: 1.25em; }
+  button.toggle-button.toggle-button-hidden:before {
+    left: -7em; }
+  button.toggle-button > .bar {
+    width: 14px;
+    left: 13%; }
+
 .xref {
   color: #C72C48; }
 
@@ -280,6 +318,9 @@ table.docutils {
   -webkit-box-shadow: 0px 0px 5px lightgray;
           box-shadow: 0px 0px 5px lightgray; }
 
+ul.simple li {
+  margin: 0px 0px 10px 0px; }
+
 @media (min-width: 1200px) {
   .content, .header {
     padding: 0 1.75rem; } }

source/_static/scss/includes/_base.scss

@@ -38,6 +38,11 @@ a {
        box-shadow: none;
        height: 1rem; 
     }
+
+    &.reference {
+       text-decoration: none;
+       border-bottom: none;
+    }
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -61,13 +66,40 @@ h1, h2, h3, h4, h5, h6 {
     }
 }
 
+dl {
+   & > dt {
+      font-weight: bold;
+   }
+}
+
+// Hack because sphinx renders nested ul elements as dl/dt/dd for some reason
+
+li {
+   & dl.simple {
+      font-weight: normal;
+
+      & dt {
+         font-weight: normal;
+      }
+
+      & dd {
+         margin-left: 0px;
+      }
+   }
+}
+
 div.admonition {
     margin-top: 0;
+    padding: 10px 20px;
+
+    background: rgba($black, .01);
+    border: none;
+    border-left: 4px solid grey;
 
     & > p.admonition-title {
         font-weight: bold;
         font-family: $font-family-base;
-        font-size: 1.2rem;
+        font-size: 1rem;
     }
 
     &.warning {
@@ -115,7 +147,8 @@ table.docutils {
     & > tbody tr th.stub {
         border: none;
         border-bottom: 1px solid $docs-item-table-border;
-        color: $theme-red
+        color: $theme-red;
+        font-size: .9rem;
     }
 
     & > thead tr th {
@@ -123,6 +156,7 @@ table.docutils {
         border-bottom: 1px solid $docs-item-table-border;
         font-size: 1rem;
         color: $theme-red;
+        font-size: .9rem;
     }
 
     & > tbody tr td {
@@ -136,6 +170,34 @@ table.docutils {
 
 }
 
+.sphinx-tabs-tab {
+   color: rgba($black, .5);
+
+   background: none;
+   border: none;
+   padding: 0px 20px 10px 20px;
+   
+   &[aria-selected=true] {
+      color: $theme-red;
+      font-weight: bold;
+      border-bottom: .15em solid $theme-red;
+   }
+}
+
+button.toggle-button {
+   width: 1.25em;
+   height: 1.25em;
+
+   &.toggle-button-hidden:before {
+      left: -7em;
+   }
+
+   & > .bar {
+      width: 14px;
+      left: 13%;
+   }
+}
+
 .xref {
     color: $theme-red;
 }
@@ -144,4 +206,8 @@ table.docutils {
     img {
         box-shadow: 0px 0px 5px lightgray;
     }
+}
+
+ul.simple li {
+   margin: 0px 0px 10px 0px;
 }

source/conf.py

@@ -127,3 +127,6 @@ html_permalinks_icon = "<img class='anchor' src=https://docs.min.io/minio/bareme
 
 html_title = 'MinIO Baremetal Documentation'
 
+# -- Options for Sphinx Tabs -------------------------------------------------
+
+sphinx_tabs_disable_css_loading = True

source/design.rst

@@ -62,11 +62,20 @@ Tabs
 
    .. tab:: This is tab one
 
-      Content in tab 1
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque,
+      elit sit amet fringilla feugiat, tortor tortor mollis quam, eget molestie
+      mauris dolor et justo. Praesent purus sapien, maximus in enim non, lacinia
+      pretium purus. Cras a ligula in dolor pulvinar dignissim in vel dui. Class
+      aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+      himenaeos. 
 
    .. tab:: This is tab two
 
-      Content in tab 2
+      Proin accumsan fermentum dui quis sodales. Fusce purus quam,
+      lacinia at semper sit amet, suscipit ac nunc. Quisque sit amet libero at
+      metus egestas efficitur. Nulla dictum velit non lectus iaculis lacinia.
+      Maecenas porttitor, elit eu pellentesque dictum, tellus neque rhoncus quam,
+      in rhoncus urna lectus nec turpis.
 
 Header 1
 --------
@@ -324,12 +333,18 @@ in the reference documentation.
 Description List Title 1
   This is the description body for this title.
 
+  Another paragraph in this definition list
+
 Description List Title 2
   This is the description body for this title.
 
+  Another paragraph in this definition list
+
 Description List Title 3
   This is the description body for this title.
 
+  Another paragraph in this definition list
+
 Reference Definition
 --------------------
 

source/index.rst

@@ -43,7 +43,7 @@ MinIO S3-compatible object storage. Filesystem mode does not support features
 such as versioning and replication.
 
 1\) Create a Data Folder
-   Create a folder on the local drive for MinIO to use for object storag
+   Create a folder on the local drive for MinIO to use for object storage
    operations. For example:
 
    .. code-block:: shell
@@ -111,7 +111,6 @@ such as versioning and replication.
    the access key and secret key set on the MinIO server.
 
 3\) Open MinIO Console
-   
    Open your browser and http://127.0.0.1:9000 to open the MinIO Console
    login page.