Error pages

6 files changed, 77 insertions, 40 deletions

diff --git a/demo/src/less/bundle.less b/demo/src/less/bundle.less
deleted file mode 100644
index 2645d653..00000000
--- a/demo/src/less/bundle.less
+++ /dev/null
@@ -1,35 +0,0 @@
-// ==========================================================================
-// Plyr.io Demo Page
-// ==========================================================================
-
-// Libs
-@import 'lib/animation';
-@import 'lib/fontface';
-@import 'lib/mixins';
-@import 'lib/normalize';
-
-// Settings
-@import 'settings/breakpoints';
-@import 'settings/colors';
-@import 'settings/cosmetic';
-@import 'settings/icons';
-@import 'settings/layout';
-@import 'settings/spacing';
-@import 'settings/type';
-
-// Layout
-@import 'layout/core';
-@import 'layout/grid';
-
-// Type
-@import 'type/base';
-@import 'type/headings';
-
-// Components
-@import 'components/buttons';
-@import 'components/header';
-@import 'components/icons';
-@import 'components/links';
-@import 'components/lists';
-@import 'components/navigation';
-@import 'components/players';
diff --git a/demo/src/less/bundles/demo.less b/demo/src/less/bundles/demo.less
new file mode 100644
index 00000000..449720b4
--- /dev/null
+++ b/demo/src/less/bundles/demo.less
@@ -0,0 +1,35 @@
+// ==========================================================================
+// Plyr.io Demo Page
+// ==========================================================================
+
+// Libs
+@import '../lib/animation';
+@import '../lib/fontface';
+@import '../lib/mixins';
+@import '../lib/normalize';
+
+// Settings
+@import '../settings/breakpoints';
+@import '../settings/colors';
+@import '../settings/cosmetic';
+@import '../settings/icons';
+@import '../settings/layout';
+@import '../settings/spacing';
+@import '../settings/type';
+
+// Layout
+@import '../layout/core';
+@import '../layout/grid';
+
+// Type
+@import '../type/base';
+@import '../type/headings';
+
+// Components
+@import '../components/buttons';
+@import '../components/header';
+@import '../components/icons';
+@import '../components/links';
+@import '../components/lists';
+@import '../components/navigation';
+@import '../components/players';
diff --git a/demo/src/less/bundles/error.less b/demo/src/less/bundles/error.less
new file mode 100644
index 00000000..764ae7d1
--- /dev/null
+++ b/demo/src/less/bundles/error.less
@@ -0,0 +1,27 @@
+// ==========================================================================
+// Plyr.io Error Page
+// ==========================================================================
+
+// Libs
+@import '../lib/fontface';
+@import '../lib/mixins';
+@import '../lib/normalize';
+
+// Settings
+@import '../settings/colors';
+@import '../settings/cosmetic';
+@import '../settings/icons';
+@import '../settings/layout';
+@import '../settings/spacing';
+@import '../settings/type';
+
+// Layout
+@import '../layout/error';
+
+// Type
+@import '../type/base';
+@import '../type/headings';
+
+// Components
+@import '../components/buttons';
+@import '../components/links';
diff --git a/demo/src/less/components/header.less b/demo/src/less/components/header.less
index c5f8b1fe..2b9104fc 100644
--- a/demo/src/less/components/header.less
+++ b/demo/src/less/components/header.less
@@ -7,7 +7,7 @@ header {
     text-align: center;
 
     p {
-        .font-size(18);
+        .font-size(@font-size-large);
         margin-bottom: @spacing-base * 1.5;
     }
 
diff --git a/demo/src/less/layout/error.less b/demo/src/less/layout/error.less
index 0ed02241..aebe8dca 100644
--- a/demo/src/less/layout/error.less
+++ b/demo/src/less/layout/error.less
@@ -8,14 +8,23 @@ html.error,
     height: 100%;
 }
 
+html.error {
+    background: @page-background;
+    background-attachment: fixed;
+}
+
 .error body {
     width: 100%;
-    display: table;
-    table-layout: fixed;
+    display: flex;
+    align-items: center;
 }
 
 .error main {
-    display: table-cell;
     width: 100%;
-    vertical-align: middle;
+    padding: @spacing-base;
+    text-align: center;
+
+    p {
+        .font-size(@font-size-large);
+    }
 }
diff --git a/demo/src/less/settings/type.less b/demo/src/less/settings/type.less
index b2740018..8375858d 100644
--- a/demo/src/less/settings/type.less
+++ b/demo/src/less/settings/type.less
@@ -6,6 +6,7 @@
 
 @font-size-base: 16;
 @font-size-small: 14;
+@font-size-large: 18;
 @font-size-h1: 64;
 
 @font-weight-base: 500;