ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Error pages

Browse Source
This commit is contained in:
Sam Potts 2017-10-26 20:59:40 +11:00
parent 959b5a20e3
commit 71db66d802
9 changed files with 82 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bundles.json
View File

@ -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"]

1
demo/dist/error.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
demo/error.html
View File

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

35
demo/src/less/bundle.less
View File

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

35
demo/src/less/bundles/demo.less Normal file
View File

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

27
demo/src/less/bundles/error.less Normal file
View File

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

2
demo/src/less/components/header.less
View File

@ -7,7 +7,7 @@ header {
text-align: center;
p {
.font-size(18);
.font-size(@font-size-large);
margin-bottom: @spacing-base * 1.5;
}

17
demo/src/less/layout/error.less
View File

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

1
demo/src/less/settings/type.less
View File

@ -6,6 +6,7 @@
@font-size-base: 16;
@font-size-small: 14;
@font-size-large: 18;
@font-size-h1: 64;
@font-weight-base: 500;