navbar top

pages/_data/menu.yml

@@ -12,32 +12,6 @@ forms:
   badge: New
   badge-color: red
 
-error:
-  title: Error pages
-  icon: file-minus
-  children:
-    400:
-      url: 400.html
-      title: 400 page
-    401:
-      url: 401.html
-      title: 401 page
-    403:
-      url: 403.html
-      title: 403 page
-    404:
-      url: 404.html
-      title: 404 page
-    500:
-      url: 500.html
-      title: 500 page
-    503:
-      url: 503.html
-      title: 503 page
-    maintenance:
-      url: maintenance.html
-      title: Maintenance page
-
 base:
   title: Base
   icon: package
@@ -79,6 +53,32 @@ charts:
   title: Charts
   icon: pie-chart
 
+error:
+  title: Error pages
+  icon: file-minus
+  children:
+    400:
+      url: 400.html
+      title: 400 page
+    401:
+      url: 401.html
+      title: 401 page
+    403:
+      url: 403.html
+      title: 403 page
+    404:
+      url: 404.html
+      title: 404 page
+    500:
+      url: 500.html
+      title: 500 page
+    503:
+      url: 503.html
+      title: 503 page
+    maintenance:
+      url: maintenance.html
+      title: Maintenance page
+
 a:
   title: A
   icon: menu

pages/_includes/layout/navbar.html

@@ -9,7 +9,7 @@
 
 <ul class="nav navbar-menu align-items-center ml-auto">
    <li class="nav-item d-none d-lg-flex mr-3">
-      <a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
+      {% include ui/button.html href=site.github_url text="Source code" icon="brand/github" icon-color="github" external=true %}
    </li>
 
    <li class="nav-item dropdown">

pages/_includes/ui/button.html

@@ -1,16 +1,28 @@
 {% removeemptylines %}
 {% assign spinner-class = false %}
+
 {% assign color = include.color | default: 'secondary' %}
 {% if include.color == false %}
 {% assign color = null %}
 {% endif %}
+
 {% assign provider = include.provider | default: 'fe' %}
 {% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
+
+{% assign href = '#' %}
+{% if include.href %}
+	{% if include.external %}
+		{% assign href = include.href %}
+	{% else %}
+		{% assign href = site.base | append: '/' | append: include.href %}
+	{% endif %}
+{% endif %}
+
 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{% if include.href %}{{ site.base }}/{{ include.href }}{% else %}#{% endif %}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}">
+<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank"{% endif %}>
 {% if include.spinner %}
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
-{% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true %}{% endif %}
+{% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true color=include.icon-color %}{% endif %}
 {% unless include.icon-only %}
 {{ include.text | default: "Button" }}
 {% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %}

scss/_variables.scss

@@ -46,8 +46,12 @@ $cyan: #17a2b8 !default;
 $black: #000000 !default;
 $white: #ffffff !default;
 
+$text-muted: $gray-700 !default;
+$border-color: $gray-400 !default;
+$hover-bg: $gray-200 !default;
+
 $primary: $blue !default;
-$secondary: $gray-800 !default;
+$secondary: $text-muted !default;
 $success: $green !default;
 $info: $azure !default;
 $warning: $yellow !default;
@@ -56,9 +60,7 @@ $danger: $red !default;
 $body-bg: $light !default;
 $body-color: $dark !default;
 
-$text-muted: $gray-700 !default;
+
-$border-color: $gray-400 !default;
-$hover-bg: $gray-200 !default;
 
 $social-colors: (
   "facebook": #3b5998,

scss/layout/_layout.scss

@@ -207,6 +207,8 @@ Content
   overflow: hidden;
   min-height: 100vh;
   padding: 0 .5rem 0;
+  display: flex;
+  flex-direction: column;
 
   .sidebar + & {
     margin-left: $sidenav-width;
@@ -226,6 +228,9 @@ Content
 }
 
 .content-page {
+  flex: 1;
+  display: flex;
+
   @media print {
     padding-top: 0 !important;
   }

scss/ui/_buttons.scss

@@ -1,10 +1,15 @@
 .btn-secondary {
-  @include button-variant($white, $border-color, $secondary);
+  @include button-variant($white, $border-color, $dark);
+}
+
+.btn-outlined-secondary {
+  @include button-outline-variant($white, $border-color, $dark);
 }
 
 .btn {
-  &:not([class^="btn-outline"]):not([class*=" btn-outline"]):not([class^="btn-ghost"]):not([class*=" btn-ghost"]) {
+  font-weight: 600;
 
+  &:not([class^="btn-outline"]):not([class*=" btn-outline"]):not([class^="btn-ghost"]):not([class*=" btn-ghost"]) {
     &:not(.btn-secondary) {
       text-shadow: 1px 1px 0 rgba(0, 0, 0, .02);
     }