error pages

pages/400.html

+---
+title: Page 400
+layout: error
+error: 400
+done: true
+---

pages/401.html

+---
+title: Page 401
+layout: error
+error: 401
+done: true
+---

pages/403.html

+---
+title: Page 403
+layout: error
+error: 403
+done: true
+---

pages/500.html

+---
+title: Page 500
+layout: error
+error: 500
+done: true
+---

pages/503.html

+---
+title: Page 503
+layout: error
+error: 503
+done: true
+---

pages/_data/errors.yml

-400: We are sorry but your request contains bad syntax and cannot be fulfilled
-401: We are sorry but you are not authorized to access this page
-403: We are sorry but you do not have permission to access this page
-404: We are sorry but the page you are looking for was not found
-500: We are sorry but our server encountered an internal error
-503: We are sorry but our service is currently not available
-maintenance: Sorry, we’re down for maintenance.
+400:
+  title: 400
+  description: We are sorry but your request contains bad syntax and cannot be fulfilled
+401:
+  title: 401
+  description: We are sorry but you are not authorized to access this page
+403:
+  title: 403
+  description: We are sorry but you do not have permission to access this page
+404:
+  title: 404
+  description: We are sorry but the page you are looking for was not found
+500:
+  title: 500
+  description: We are sorry but our server encountered an internal error
+503:
+  title: 503
+  description: We are sorry but our service is currently not available
+maintenance:
+  illustration: undraw_bug_fixing_oc7a.svg
+  header: Temporarily down for maintenance
+  description: Sorry for the inconvenience but we’re performing some maintenance at the moment. We’ll be back online shortly!
 

pages/_includes/ui/empty.html

@@ -17,6 +17,7 @@
    </p>
    <div class="empty-action">
       {% assign button-text = include.button-text | default: "Search again" %}
-      {% include_cached ui/button.html text=button-text color="primary" icon=include.button-icon %}
+      {% assign button-icon = include.button-icon | default: "search" %}
+      {% include_cached ui/button.html text=button-text color="primary" icon=button-icon %}
    </div>
 </div>

pages/_layouts/error.html

@@ -3,5 +3,8 @@ layout: base
 body-class: border-top-2 border-primary
 ---
 
-{% assign error = site.data.errors[page.error] %}
-{% include ui/empty.html icon="settings" icon-text=page.error title="Oops… You just found an error page" subtitle=error %}
+<div class="d-flex align-items-center justify-content-center min-vh-100">
+	{% assign error = site.data.errors[page.error] %}
+	{% assign header = error.header | default: 'Oops&hellip; You just found an error page' %}
+	{% include ui/empty.html icon="settings" illustration=error.illustration icon-text=error.title title=header subtitle=error.description button-icon="arrow-left" button-text="Take me home" %}
+</div>

scss/ui/_empty.scss

@@ -4,9 +4,13 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: 3rem;
+  padding: 1rem;
   text-align: center;
 
+  @include media-breakpoint-up(md) {
+    padding: 3rem;
+  }
+
   .empty-icon {
     margin: 0 0 1rem;
     font-size: 2rem;