Updated sidebar responsiveness

python · Jan 19, 2025 · 2d4e3a1 · 2d4e3a1
1 parent 55754b6
commit 2d4e3a1
Showing 1 changed file with 34 additions and 11 deletions.
diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css
@@ -8,7 +8,6 @@
     --bad-border: var(--bad-color);
 }
 
-
 /* Browser elements */
 :root {
     scrollbar-color: #616161 transparent;
@@ -27,20 +26,46 @@ div.related {
 }
 
 /* SIDEBAR */
-div.sphinxsidebar, .menu-wrapper {
-    background-color: #333;
-    color: inherit;
+div.sidebar, aside.sidebar {
+    background-color: #424242;
+    border-color: #616161;
+    width: 250px; /* Set the sidebar width */
+    transition: width 0.3s ease; /* Smooth transition */
+}
+
+/* Make sidebar responsive */
+@media screen and (max-width: 768px) {
+    div.sidebar, aside.sidebar {
+        width: 200px; /* Adjust width on smaller screens */
+    }
+}
+
+@media screen and (max-width: 480px) {
+    div.sidebar, aside.sidebar {
+        display: none; /* Hide sidebar on very small screens */
+    }
+
+    #sidebarbutton {
+        display: block; /* Show sidebar toggle button */
+    }
 }
 
+/* Sidebar button style */
 #sidebarbutton {
-    /* important to overwrite style attribute */
-    background-color: #555 !important;
-    color: inherit !important;
+    background-color: #555;
+    color: inherit;
+    padding: 10px;
+    cursor: pointer;
+    display: none;
 }
 
+/* Transition and hover effects */
 div.sidebar, aside.sidebar {
-    background-color: #424242;
-    border-color: #616161;
+    transition: all 0.3s ease-in-out;
+}
+
+div.sidebar:hover, aside.sidebar:hover {
+    background-color: #555;
 }
 
 /* ANCHORS AND HIGHLIGHTS */
@@ -74,8 +99,6 @@ span.highlighted {
     background-color: #2c3e50;
 }
 
-/* Below for most things in text */
-
 dl.field-list > dt {
     background-color: #434;
 }