Add animations to the sidebar and other small places

python_docs_theme/layout.html

@@ -77,6 +77,7 @@ <h3>{{ _('Navigation') }}</h3>
             <script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>
             <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/smooth.js', 1) }}"></script>
             <script type="text/javascript" src="{{ pathto('_static/themetoggle.js', 1) }}"></script>
         {%- endif -%}
     {%- endif -%}

python_docs_theme/static/pydoctheme.css

@@ -129,6 +129,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,6 +150,7 @@ div.sphinxsidebar {
     border-radius: 5px;
     line-height: 130%;
     font-size: smaller;
+    transition: width 0.3s ease;
 }
 
 div.sphinxsidebar h3,
@@ -205,6 +207,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 {
@@ -761,3 +766,28 @@ div.versionremoved .versionmodified {
         display: none;
     }
 }
+
+/* Animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@media (prefers-reduced-motion) {
+    div.document {
+        animation: none;
+        transition: none;
+    }
+
+    #sidebarbutton {
+        transition: none;
+    }
+
+    html {
+        scroll-behavior: auto;
+    }
+}

python_docs_theme/static/smooth.js

@@ -0,0 +1,15 @@
+window.addEventListener('load', function() {
+    document.documentElement.style.scrollBehavior = 'auto';
+
+    const target = window.location.hash;
+    if (target) {
+        window.scrollTo(0, 0);
+        document.querySelector(target)?.scrollIntoView();
+    }
+
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            document.documentElement.style.scrollBehavior = 'smooth';
+        });
+    });
+});