diff options
| -rw-r--r-- | bundles.json | 3 | ||||
| -rw-r--r-- | demo/dist/error.css | 1 | ||||
| -rw-r--r-- | demo/error.html | 4 | ||||
| -rw-r--r-- | demo/src/less/bundle.less | 35 | ||||
| -rw-r--r-- | demo/src/less/bundles/demo.less | 35 | ||||
| -rw-r--r-- | demo/src/less/bundles/error.less | 27 | ||||
| -rw-r--r-- | demo/src/less/components/header.less | 2 | ||||
| -rw-r--r-- | demo/src/less/layout/error.less | 17 | ||||
| -rw-r--r-- | demo/src/less/settings/type.less | 1 |
9 files changed, 82 insertions, 43 deletions
diff --git a/bundles.json b/bundles.json index 24267467..49cb036d 100644 --- a/bundles.json +++ b/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"] diff --git a/demo/dist/error.css b/demo/dist/error.css new file mode 100644 index 00000000..059bcaf5 --- /dev/null +++ b/demo/dist/error.css @@ -0,0 +1 @@ +@font-face{font-family:Avenir;src:url(https://cdn.plyr.io/static/fonts/avenir-medium.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/avenir-medium.woff) format("woff");font-style:normal;font-weight:500;font-display:swap}@font-face{font-family:Avenir;src:url(https://cdn.plyr.io/static/fonts/avenir-bold.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/avenir-bold.woff) format("woff");font-style:normal;font-weight:700;font-display:swap}@font-face{font-family:Avenir;src:url(https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3) format("woff2"),url(https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3) format("woff");font-style:normal;font-weight:900;font-display:swap}/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a,button.faux-link{background:0 0}a:focus,button.faux-link:focus{outline:thin dotted}a:active,a:hover,button.faux-link:active,button.faux-link:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.error body,html.error{height:100%}html.error{background:-webkit-gradient(linear,right bottom,left top,from(#67caff),to(#0085cd));background:linear-gradient(to left top,#67caff,#0085cd);background-attachment:fixed}.error body{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.error main{width:100%;padding:20px;text-align:center}.error main p{font-size:18px;font-size:1.125rem}html{font-size:100%}body{font-family:Avenir,'Helvetica Neue',sans-serif;line-height:1.5;color:#fff;font-weight:500;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-shadow:0 1px 1px rgba(0,0,0,.15)}button,input,select,textarea{font:inherit}p,small{margin:0 0 20px}small{display:block;font-size:14px;font-size:.875rem}h1{margin:0 0 10px;font-size:64px;font-size:4rem;font-weight:900;letter-spacing:-.025em}.button,.button__count{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px 1px rgba(0,0,0,.1);background:#fff;border:0;color:#55646b;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700;text-shadow:none}.button{padding-left:20px;padding-right:20px;-webkit-transition:all .2s ease;transition:all .2s ease}.button:focus,.button:hover{color:#343f4a;outline:0}.button:focus::after,.button:hover::after{display:none}.button.tab-focus{outline:0;-webkit-box-shadow:0 0 0 3px rgba(255,255,255,.35);box-shadow:0 0 0 3px rgba(255,255,255,.35)}.button__count{margin-left:10px;-webkit-animation:fadein .2s ease;animation:fadein .2s ease}.button__count::before{content:'';position:absolute;display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}button.faux-link{position:relative;margin:0;padding:0;width:auto;border:0;background:0 0;vertical-align:baseline;text-align:inherit;font:inherit;line-height:1.5;cursor:pointer;-moz-user-select:text;text-shadow:inherit;border-radius:0}a,button.faux-link{position:relative;border-bottom:1px dotted currentColor;-webkit-transition:all .2s ease;transition:all .2s ease;text-decoration:none;color:#fff;font-weight:700}a::after,button.faux-link::after{content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:1px;-webkit-transition:width .2s ease;transition:width .2s ease;background:currentColor}a:focus,a:hover,button.faux-link:focus,button.faux-link:hover{border-bottom-color:transparent;outline:0}a:focus::after,a:hover::after,button.faux-link:focus::after,button.faux-link:hover::after{width:100%}a.tab-focus,button.faux-link.tab-focus{outline:0;-webkit-box-shadow:0 0 0 3px rgba(255,255,255,.35);box-shadow:0 0 0 3px rgba(255,255,255,.35)}
\ No newline at end of file diff --git a/demo/error.html b/demo/error.html index 6dc22cb1..32e85950 100644 --- a/demo/error.html +++ b/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> 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; |