feat: added some responsiveness to the sidebar

The sidebar now is 20rem per default (as before) and on screens >1200px it's now 25rem wide and on screen >1900px 35rem wide. This was discussed in #169 and #185.
redimp · Jan 19, 2025 · a69f514 · a69f514
1 parent b3f18c2
commit a69f514
Showing 1 changed file with 47 additions and 1 deletion.
diff --git a/otterwiki/static/css/partials/sidebar.css b/otterwiki/static/css/partials/sidebar.css
@@ -24,8 +24,54 @@
     width: calc(100% - 20rem);
 }
 
+@media (min-width: 1201px) {
+    .sidebar {
+        width: 25rem;
+    }
+
+    .page-wrapper.with-sidebar > .content-wrapper
+    {
+        left: 25rem;
+        width: calc(100% - 25rem);
+    }
+
+    .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom) {
+        left: 25rem;
+        width: calc(100% - 25rem);
+    }
+
+    .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom
+    {
+        left: 25rem;
+        width: calc(100% - 25rem);
+    }
+}
+
+@media (min-width: 1900px) {
+    .sidebar {
+        width: 35rem;
+    }
+
+    .page-wrapper.with-sidebar > .content-wrapper
+    {
+        left: 35rem;
+        width: calc(100% - 35rem);
+    }
+
+    .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom) {
+        left: 35rem;
+        width: calc(100% - 35rem);
+    }
+
+    .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom
+    {
+        left: 35rem;
+        width: calc(100% - 35rem);
+    }
+}
+
 img.sidebar-logo {
-    max-width: 75%;
+    width: 150px;
 }
 
 /* sidebar menu */