improve

python_docs_theme/layout.html

@@ -78,6 +78,7 @@ <h3>{{ _('Navigation') }}</h3>
             <script type="text/javascript" src="{{ pathto('_static/menu.js', 1) }}"></script>
             <script type="text/javascript" src="{{ pathto('_static/search-focus.js', 1) }}"></script>
             <script type="text/javascript" src="{{ pathto('_static/themetoggle.js', 1) }}"></script>
+            <script type="text/javascript" src="{{ pathto('_static/sidebar-resizer.js', 1) }}"></script>
         {%- endif -%}
     {%- endif -%}
     {{ super() }}

python_docs_theme/static/pydoctheme.css

@@ -1,5 +1,10 @@
 @import url('classic.css');
 
+/* Smooth scroll */
+html {
+    scroll-behavior: smooth;
+}
+
 /* Common colours */
 :root {
     --good-color: rgb(41 100 51);
@@ -129,6 +134,7 @@ form.inline-search input[type='submit'] {
 }
 
 div.document {
+    animation: fadeIn 0.6s ease-in-out;
     display: flex;
     /* Don't let long code literals extend beyond the right side of the screen */
     overflow-wrap: break-word;
@@ -149,11 +155,7 @@ div.sphinxsidebar {
     border-radius: 5px;
     line-height: 130%;
     font-size: smaller;
-    width: 300px;
-    min-width: 200px;
-    max-width: 500px;
-    resize: horizontal;
-    overflow: auto;
+    transition: width 0.3s ease;
 }
 
 div.sphinxsidebar h3,
@@ -162,7 +164,7 @@ div.sphinxsidebar h4 {
 }
 
 div.sphinxsidebarwrapper {
-    width: 300px;
+    width: 217px;
     box-sizing: border-box;
     height: 100%;
     overflow-x: hidden;
@@ -210,6 +212,9 @@ div.sphinxsidebar input[type='text'] {
     width: 12px;
     border-radius: 0 5px 5px 0;
     border-left: none;
+    position: absolute;
+    right: 0;
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 #sidebarbutton span {
@@ -766,3 +771,13 @@ div.versionremoved .versionmodified {
         display: none;
     }
 }
+
+/* Animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

python_docs_theme/static/sidebar-resizer.js

@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const sidebar = document.querySelector('.sphinxsidebar');
+    const resizer = document.createElement('div');
+    resizer.className = 'sidebar-resizer';
+    sidebar.appendChild(resizer);
+
+    resizer.addEventListener('mousedown', function(e) {
+        document.addEventListener('mousemove', resizeSidebar);
+        document.addEventListener('mouseup', stopResize);
+    });
+
+    function resizeSidebar(e) {
+        const newWidth = e.clientX - sidebar.getBoundingClientRect().left;
+        if (newWidth > 150 && newWidth < window.innerWidth - 100) {
+            sidebar.style.width = newWidth + 'px';
+        }
+    }
+
+    function stopResize() {
+        document.removeEventListener('mousemove', resizeSidebar);
+        document.removeEventListener('mouseup', stopResize);
+    }
+});