From f8bb1e7eae57bf53da5ef5914682a997df95d469 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Wed, 20 Jun 2018 21:58:18 +0200
Subject: [PATCH] added wrapper around main-content

---
 templates/default-layout.hamlet      | 28 +++++++++++++++-------------
 templates/default-layout.lucius      | 23 ++++++++++++++++++-----
 templates/widgets/breadcrumbs.lucius |  6 ------
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet
index 5f81f4e07..8a1c8261f 100644
--- a/templates/default-layout.hamlet
+++ b/templates/default-layout.hamlet
@@ -12,20 +12,22 @@
     $if not $ Just HomeR == mcurrentRoute
       ^{breadcrumbs}
 
-    $maybe headline <- contentHeadline
-      <h1>
-        ^{headline}
+    <div .main__content-body>
 
-    <!-- prime page actions -->
-    ^{pageactionprime}
+      $maybe headline <- contentHeadline
+        <h1>
+          ^{headline}
 
-    <!-- alerts -->
-    $forall (status, msg) <- mmsgs
-      $with status2 <- bool status "info" (status == "")
-        <div class="alert alert-#{status2}">
-          <div .alert__content>
-            #{msg}
+      <!-- prime page actions -->
+      ^{pageactionprime}
 
-    <!-- actual content -->
+      <!-- alerts -->
+      $forall (status, msg) <- mmsgs
+        $with status2 <- bool status "info" (status == "")
+          <div class="alert alert-#{status2}">
+            <div .alert__content>
+              #{msg}
 
-    ^{widget}
+      <!-- actual content -->
+
+      ^{widget}
diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 7d9c6d760..c040d4694 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -131,17 +131,19 @@ h4 {
 
 /* LAYOUT */
 .main {
-  display: flex;
   min-height: calc(100vh - var(--header-height));
-  overflow: hidden;
+}
+
+@media (max-width: 768px) {
+
+  .main {
+    min-height: calc(100vh - var(--header-height-collapsed));
+  }
 }
 
 .main__content {
   position: relative;
   background-color: white;
-  padding: 0 40px;
-  padding-bottom: 60px;
-  flex: 1;
   z-index: 0;
   overflow: hidden;
 
@@ -154,6 +156,17 @@ h4 {
   }
 }
 
+.main__content-body {
+  padding: 10px 40px 60px;
+}
+
+@media (max-width: 768px) {
+
+  .main__content-body {
+    padding: 10px 20px 60px;
+  }
+}
+
 .pseudo-focus {
   outline: 5px auto var(--color-light);
   outline: 5px auto -webkit-focus-ring-color;
diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius
index c5ada3434..9ac639551 100644
--- a/templates/widgets/breadcrumbs.lucius
+++ b/templates/widgets/breadcrumbs.lucius
@@ -3,9 +3,6 @@
   align-self: flex-end;
   background-color: var(--color-dark);
   color: white;
-  margin-left: -40px;
-  margin-right: -40px;
-  margin-bottom: 20px;
   transition: margin-bottom .2s ease;
 }
 
@@ -35,9 +32,6 @@
     opacity: 1;
   }
 
-  &:first-child {
-    padding-left: 50px;
-  }
 
   &::after {
     content: '';