adjust new layout to small screens

templates/default-layout.lucius

@@ -177,7 +177,7 @@ h4 {
   transition: padding-left .2s ease-out;
   max-width: 1200px;
   margin: 0 auto;
-  margin-top: var(--header-height);
+  margin-top: var(--header-height-collapsed);
 
   > .container {
     margin: 20px 0;
@@ -215,6 +215,7 @@ h4 {
   .logged-in:not(.modal) {
     .main__content {
       margin-left: var(--asidenav-width-lg, 20%);
+      margin-top: var(--header-height);
     }
   }
 }
@@ -228,7 +229,19 @@ h4 {
 }
 
 .main__content-body {
-  padding: 40px;
+  padding: 13px;
+}
+
+@media (min-width: 426px) {
+  .main__content-body {
+    padding: 13px 20px;
+  }
+}
+
+@media (min-width: 769px) {
+  .main__content-body {
+    padding: 20px 40px;
+  }
 }
 
 .pseudo-focus {

templates/widgets/asidenav.lucius

@@ -300,6 +300,7 @@
     flex-basis: var(--asidenav-width-md, 50px);
     overflow: hidden;
     min-height: calc(100% - var(--header-height-collapsed));
+    top: var(--header-height-collapsed);
 
     .asidenav__box-title {
       width: var(--asidenav-width-md, 50px);
@@ -307,7 +308,8 @@
       text-align: center;
       padding: 10px 1px;
       word-break: break-all;
-      background-color: var(--color-darker);
+      background-color: var(--color-dark);
+      color: var(--color-lightwhite);
     }
 
     .asidenav__link-shorthand {
@@ -337,7 +339,7 @@
     }
 
     .asidenav__link-wrapper {
-      color: var(--color-lightwhite);
+      color: var(--color-font);
       padding: 0;
     }
 
@@ -350,7 +352,6 @@
 
       .asidenav__link-wrapper {
         background-color: var(--color-lightwhite);
-        color: var(--color-dark);
       }
     }
 

templates/widgets/navbar.lucius

@@ -54,12 +54,6 @@
 }
 
 @media (max-width: 768px) {
-  .navbar {
-    left: var(--asidenav-width-md);
-  }
-}
-
-@media (max-width: 425px) {
   .navbar {
     left: 0;
   }