Error pages

bundles.json

@@ -12,7 +12,8 @@
     },
     "demo": {
         "less": {
-            "demo.css": "demo/src/less/bundle.less"
+            "demo.css": "demo/src/less/bundles/demo.less",
+            "error.css": "demo/src/less/bundles/error.less"
         },
         "js": {
             "demo.js": ["demo/src/js/lib/classlist.js", "demo/src/js/lib/tab-focus.js", "demo/src/js/main.js"]

demo/error.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- Docs styles -->
-    <link rel="stylesheet" href="dist/demo.css">
+    <link rel="stylesheet" href="dist/error.css">
 
     <!-- Preload -->
     <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2">
@@ -18,7 +18,7 @@
     <main>
         <h1>Doh.</h1>
         <p>Looks like something went wrong.</p>
-        <a href="http://plyr.io" class="btn btn--primary">Back to plyr.io</a>
+        <a href="javascript:history.back()" class="button">Go back</a>
     </main>
 </body>
 

demo/src/less/bundle.less

@@ -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';

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';

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';

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;
     }
 

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;
+    display: flex;
-    table-layout: fixed;
+    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);
+    }
 }

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;