From 07c77214ee5cee6141ba8652683ae03df181339b Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 26 Jan 2019 12:07:35 +0100
Subject: [PATCH] adjust new layout to small screens

---
 templates/default-layout.lucius   | 17 +++++++++++++++--
 templates/widgets/asidenav.lucius |  7 ++++---
 templates/widgets/navbar.lucius   |  6 ------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 74753907e..b769d9a90 100644
--- a/templates/default-layout.lucius
+++ b/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 {
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 9c3d3746d..b054e9aa8 100644
--- a/templates/widgets/asidenav.lucius
+++ b/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);
       }
     }
 
diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius
index 5d1bc5761..71f897af4 100644
--- a/templates/widgets/navbar.lucius
+++ b/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;
   }