Feat: change border size for toctree

theme/static/stylesheet/style.less

@@ -124,8 +124,8 @@ aside {
 
     .title {
         text-align: center;
-    margin-bottom: 50px;
-    margin-top: 50px;
+        //padding-bottom: 20px;
+        padding-top: 20px;
 
         img {
             padding: 20px;
@@ -143,9 +143,26 @@ aside {
             font-size: .92em;
         }
     }
-
     nav {
-      background-color: @navbar-bg;
+        .toctree {
+            display: none;
+        }
+        #toggle {
+            display: none;
+        }
+        #toggle:checked + .toctree {
+            display: block;
+        }
+        label {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 40px;
+            cursor: pointer;
+        }
+        ul.toctree {
+            display: none;
+            padding-inline-start: 0px;
             h2 {
                 background-color: @navbar-bg;
                 margin-bottom: 0;
@@ -153,9 +170,10 @@ aside {
             ul {
                 padding-inline-start: 0px;
                 display: block;
-      }
-      ul.toctree {
                 li {
+                    padding: 0;
+                    display: block;
+                }
                 a {
                     color: @navbar-text-color;
                     border: none;
@@ -166,7 +184,7 @@ aside {
                     background-color: @navbar-toctree-l2-sel-bg;
                     color: @navbar-toctree-l2-sel-txt;
                     padding: 10px;
-                  border-left: solid 2px @orange;
+                    border-left: solid 5px @orange;
                 }
             }
             li.current{
@@ -204,85 +222,17 @@ aside {
             }
         }
     }
-
     .tagcloud {
-      h2 {
-          margin-bottom: 0;
-          background-color: @sidebar-bg;
+        display: none;
     }
 
-      ul {
-          list-style: none;
-          padding: 0;
-          margin: 10px;
-      }
-
-      ul li {
-          display: inline-block;
-      }
-
-      li.tag-0 {
-          font-size: 170%;
-      }
-
-      li.tag-1 {
-          font-size: 150%;
-      }
-
-      li.tag-2 {
-          font-size: 120%;
-      }
-
-      li.tag-3 {
-          font-size: 100%;
-      }
-
-      li.tag-4 {
-          font-size: 80%;
-      }
-  }
 }
 
 main {
     nav {
-    text-align: center;
-    text-transform: uppercase;
-    font-size: .72em;
-    padding: 14px 0 14px 0;
-    border-bottom: @nav-border-color 1px solid;
+        display: none;
     }
 
-  nav, .translations {
-    a {
-      padding: 0 4px 0 4px;
-      border-left: @nav-border-color 1px solid;
-      border-right: @nav-border-color 1px solid;
-    }
-
-    :first-child {
-      border-left: none;
-    }
-
-    :last-child {
-      border-right: none;
-    }
-  }
-
-  .neighbors {
-    margin: 4% 0% 4% 0%;
-    height: 20px;
-  }
-
-  .pagination {
-    margin: 4% 8% 4% 8%;
-    height: 20px;
-  }
-
-  .social-share {
-    p {
-      font-size: .8em;
-    }
-  }
 
     article {
         margin: 0 8% 2% 8%;
@@ -561,18 +511,60 @@ ul.social {
         left: 0;
         overflow-y: auto;
 
-    div {
+        .title {
+            padding-bottom: 50px;
+            padding-top: 50px;
+        }
         nav {
+            background-color: @navbar-bg;
+            label, #toggle
+            {
+                display: none;
+            }
             ul {
-          li {
-            padding: 0;
+                padding-inline-start: 0px;
+                display: block;
+            }
+            ul.toctree {
                 display: block;
             }
         }
+
+        .tagcloud {
+            display: block;
+            h2 {
+                margin-bottom: 0;
+                background-color: @sidebar-bg;
             }
 
-      ul.social {
-        padding-top: 32px;
+            ul {
+                list-style: none;
+                padding: 0;
+                margin: 10px;
+            }
+
+            ul li {
+                display: inline-block;
+            }
+
+            li.tag-0 {
+                font-size: 170%;
+            }
+
+            li.tag-1 {
+                font-size: 150%;
+            }
+
+            li.tag-2 {
+                font-size: 120%;
+            }
+
+            li.tag-3 {
+                font-size: 100%;
+            }
+
+            li.tag-4 {
+                font-size: 80%;
             }
         }
     }
@@ -584,6 +576,31 @@ ul.social {
         top: 0;
         right: 2.5%;
 
+        nav {
+            display: block;
+            text-align: center;
+            text-transform: uppercase;
+            font-size: .72em;
+            padding: 14px 0 14px 0;
+            border-bottom: @nav-border-color 1px solid;
+        }
+
+        nav, .translations {
+            a {
+                padding: 0 4px 0 4px;
+                border-left: @nav-border-color 1px solid;
+                border-right: @nav-border-color 1px solid;
+            }
+
+            :first-child {
+                border-left: none;
+            }
+
+            :last-child {
+                border-right: none;
+            }
+        }
+
         article {
 
             &.single {

theme/templates/base.html

@@ -86,6 +86,9 @@
     </div>
 
       <nav>
+        <label for="toggle">☰</label>
+        <input type="checkbox" id="toggle">
+
       {% if TOCTREE %}
           {% include "partial/toctree.html" %}
       {% endif %}