page header fixes

src/pages/_includes/layout/content.html

@@ -7,8 +7,9 @@
 			{% assign actions = page.page-header-actions | default: layout.page-header-actions %}
 			{% assign pretitle = page.page-header-pretitle | default: layout.page-header-pretitle %}
 			{% assign class = page.page-header-class | default: layout.page-header-class %}
+			{% assign icon = page.page-header-icon | default: layout.page-header-icon %}
 
-			{% include layout/page-header.html title=page-header description=description actions=actions pretitle=pretitle class=class %}
+			{% include layout/page-header.html title=page-header description=description actions=actions pretitle=pretitle icon=icon class=class %}
 		{% endif %}
 
 		{{ content }}

src/pages/_includes/layout/page-header.html

@@ -10,6 +10,9 @@
 			</div>
 			{% endif %}
 			<h2 class="page-title">
+				{% if include.icon %}
+					{% include ui/icon.html icon=include.icon %}
+				{% endif %}
 				{{ include.title }}
 			</h2>
 

src/pages/layout-combo.html

@@ -7,7 +7,5 @@ layout-navbar-hide-brand: true
 layout-navbar-hide-menu: true
 layout-navbar-class: "d-none d-lg-flex"
 layout-navbar-condensed: true
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/pages/layout-condensed-dark.html

@@ -3,7 +3,5 @@ page-header: Condensed dark layout
 menu: layout.condensed-dark
 layout-navbar-condensed: true
 layout-navbar-dark: true
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/pages/layout-condensed.html

@@ -2,7 +2,5 @@
 page-header: Condensed layout
 menu: layout.condensed
 layout-navbar-condensed: true
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/pages/layout-dark.html

@@ -2,7 +2,5 @@
 page-header: Dark mode
 menu: layout.dark-mode
 layout-dark: true
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/pages/layout-fluid-vertical.html

@@ -5,7 +5,5 @@ layout-fluid: true
 layout-sidebar: true
 layout-sidebar-dark: true
 layout-hide-topbar: true
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/pages/layout-fluid.html

@@ -2,7 +2,5 @@
 page-header: Fluid layout
 menu: layout.fluid
 layout-fluid: true
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/pages/layout-horizontal.html

@@ -2,6 +2,5 @@
 page-header: Horizontal layout
 menu: layout.horizontal
 libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/pages/layout-navbar-dark.html

@@ -2,7 +2,5 @@
 page-header: Navbar dark
 menu: layout.navbar-dark
 layout-navbar-dark: true
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/pages/layout-navbar-overlap.html

@@ -5,7 +5,5 @@ layout-navbar-overlap: true
 layout-navbar-condensed: true
 layout-navbar-dark: true
 page-header-class: text-white
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/pages/layout-rtl.html

@@ -1,8 +1,7 @@
 ---
+page-header: RTL mode
 menu: home
 rtl: true
-layout: homepage
 title: RTL mode
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/pages/layout-vertical-right.html

@@ -4,7 +4,5 @@ menu: layout.vertical-right
 layout-sidebar: true
 layout-sidebar-right: true
 layout-hide-topbar: true
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/pages/layout-vertical.html

@@ -4,7 +4,5 @@ menu: layout.vertical
 layout-sidebar: true
 layout-sidebar-dark: true
 layout-hide-topbar: true
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}

src/scss/_variables.scss

@@ -77,7 +77,7 @@ $light: #f5f7fb !default;
 $dark: #354052 !default;
 
 $body-bg: $light !default;
-$body-color: #252f3f !default;
+$body-color: $dark !default;
 
 $color-contrast-dark: $dark !default;
 $color-contrast-light: $light !default;

src/scss/layout/_page.scss

@@ -43,4 +43,12 @@
   line-height: $h2-line-height;
   font-weight: $font-weight-medium;
   color: inherit;
+  display: flex;
+  align-items: center;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-inline-end: .25rem;
+  }
 }

src/scss/ui/_buttons.scss

@@ -2,12 +2,12 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: inherit;
+  color: $body-color;
   background-color: $white;
   border-color: $border-color-dark-transparent;
 
   &:hover {
-    color: inherit;
+    color: $body-color;
     border-color: $text-muted-light;
   }
 
@@ -24,8 +24,8 @@
   svg {
     width: 1.25rem;
     height: 1.25rem;
-    margin: 0 .5rem 0;
+    margin: 0 .25rem 0;
-    margin-inline-start: -.25rem;
+    margin-inline-start: -.5rem;
     vertical-align: bottom;
   }
 
@@ -33,13 +33,13 @@
     width: 1.25rem;
     height: 1.25rem;
     vertical-align: text-top;
-    margin: 0 .5rem 0;
+    margin: 0 .25rem 0;
-    margin-inline-start: -.25rem;
+    margin-inline-start: -.5rem;
   }
 
   .icon-right {
-    margin: 0 .5rem 0;
+    margin: 0 .25rem 0;
-    margin-inline-end: -.25rem;
+    margin-inline-end: -.5rem;
   }
 
   .badge {