page container optimize

src/pages/_layouts/default.html

@@ -4,7 +4,7 @@ layout: base
 
 {% assign no-container = page.no-container | default: layout.no-container %}
 
-<div class="page">
+<div class="wrapper">
 	{% if page.layout-sidebar %}
 	{% include layout/sidebar.html dark=page.layout-sidebar-dark right=page.layout-sidebar-right transparent=page.layout-navbar-transparent breakpoint="lg" %}
 	{% endif %}
@@ -15,20 +15,27 @@ layout: base
 
 
 	<div class="content{% if page.layout-content-full %} content-full{% endif %}">
-		{% if page.layout-content-full %}
+		<div class="container">
+			{% include layout/page-header.html %}
+		</div>
+
+		<div class="page-body">
+			{% if page.layout-content-full %}
 			{{ content }}
-		{% else %}
+			{% else %}
 			{% unless no-container %}
 			<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}{% if page.container-centered %} d-flex flex-column justify-content-center{% endif %}">
 			{% endunless %}
-				{% include layout/page-header.html %}
 
 				{{ content }}
+
 			{% unless no-container %}
 			</div>
 			{% endunless %}
 
-			{% include layout/footer.html %}
-		{% endif %}
+			{% endif %}
+		</div>
+
+		{% include layout/footer.html %}
 	</div>
 </div>

src/scss/_variables.scss

@@ -471,6 +471,7 @@ $sidebar-width: 15rem !default;
 $popover-border-color: $border-color !default;
 
 //footer
+$footer-padding-y: 2rem !default;
 $footer-bg: $white !default;
 $footer-border-color: $border-color !default;
 $footer-border-color: $border-color !default;

src/scss/layout/_footer.scss

 .footer {
   border-top: 1px solid $footer-border-color;
   background-color: $footer-bg;
-  padding: 2rem 0;
+  padding: $footer-padding-y 0;
   color: $text-muted;
-
-  margin-bottom: (-$content-padding-y);
-  margin-top: $content-padding-y;
+  margin-top: auto;
 }
 
 .footer-transparent {
-  margin-top: 0;
   background-color: transparent;
   border-top: 0;
 }
\ No newline at end of file

src/scss/layout/_page.scss

@@ -10,21 +10,29 @@
 }
 
 .content {
-  margin-top: $content-padding-y;
-  margin-bottom: $content-padding-y;
   flex: 1;
   display: flex;
   flex-direction: column;
 
-  >[class^="container"] {
-    flex: 1;
-  }
-
   @media print {
     margin: 0 !important;
   }
 }
 
+// Content body
+.page-body {
+  margin-top: $content-padding-y;
+  margin-bottom: 0;
+}
+
+.page-body-card {
+  background: $card-bg;
+  border-top: 1px solid $card-border-color;
+  padding: $content-padding-y 0;
+  margin: 0;
+  flex: 1;
+}
+
 .content-cover {
   margin-top: -$content-padding-y;
   margin-bottom: $content-padding-y;
@@ -54,12 +62,6 @@
   }
 }
 
-.content-white {
-  background: $card-bg;
-  border-top: 1px solid $card-border-color;
-  padding: $content-padding-y 0;
-}
-
 .content-full {
   margin: 0;
 }
@@ -69,7 +71,7 @@
   flex-wrap: wrap;
   align-items: center;
   min-height: 2.25rem;
-  margin: 0 0 $content-padding-y;
+  margin: $content-padding-y 0 0;
 
   >* {
     flex: 1;