added wrapper around main-content

templates/default-layout.hamlet

@@ -12,20 +12,22 @@
     $if not $ Just HomeR == mcurrentRoute
       ^{breadcrumbs}
 
-    $maybe headline <- contentHeadline
+    <div .main__content-body>
-      <h1>
-        ^{headline}
 
-    <!-- prime page actions -->
+      $maybe headline <- contentHeadline
-    ^{pageactionprime}
+        <h1>
+          ^{headline}
 
-    <!-- alerts -->
+      <!-- prime page actions -->
-    $forall (status, msg) <- mmsgs
+      ^{pageactionprime}
-      $with status2 <- bool status "info" (status == "")
-        <div class="alert alert-#{status2}">
-          <div .alert__content>
-            #{msg}
 
-    <!-- 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}

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;

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: '';