diff options
Diffstat (limited to 'demo')
| -rw-r--r-- | demo/error.html | 46 | ||||
| -rw-r--r-- | demo/index.html | 468 | ||||
| -rw-r--r-- | demo/src/sass/bundles/demo.scss | 2 | ||||
| -rw-r--r-- | demo/src/sass/components/buttons.scss | 4 | ||||
| -rw-r--r-- | demo/src/sass/components/header.scss | 2 | ||||
| -rw-r--r-- | demo/src/sass/components/icons.scss | 4 | ||||
| -rw-r--r-- | demo/src/sass/components/links.scss | 4 | ||||
| -rw-r--r-- | demo/src/sass/components/players.scss | 4 | ||||
| -rw-r--r-- | demo/src/sass/layout/core.scss | 4 | ||||
| -rw-r--r-- | demo/src/sass/lib/animation.scss | 7 | ||||
| -rw-r--r-- | demo/src/sass/lib/fontface.scss | 10 | ||||
| -rw-r--r-- | demo/src/sass/lib/mixins.scss | 6 | ||||
| -rw-r--r-- | demo/src/sass/lib/normalize.scss | 17 | ||||
| -rw-r--r-- | demo/src/sass/settings/colors.scss | 10 | ||||
| -rw-r--r-- | demo/src/sass/settings/type.scss | 4 | ||||
| -rw-r--r-- | demo/src/sass/type/base.scss | 4 | ||||
| -rw-r--r-- | demo/src/sass/type/headings.scss | 1 |
17 files changed, 300 insertions, 297 deletions
diff --git a/demo/error.html b/demo/error.html index 8e6a156b..55b487cb 100644 --- a/demo/error.html +++ b/demo/error.html @@ -1,31 +1,29 @@ <!doctype html> <html lang="en" class="error"> + <head> + <meta charset="utf-8" /> + <title>Doh. Looks like something went wrong.</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> - <head> - <meta charset="utf-8" /> - <title>Doh. Looks like something went wrong.</title> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- Icons --> + <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico"> + <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32"> + <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16"> + <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png"> - <!-- Icons --> - <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico"> - <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32"> - <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16"> - <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png"> + <!-- Docs styles --> + <link rel="stylesheet" href="dist/error.css?v=2"> - <!-- Docs styles --> - <link rel="stylesheet" href="dist/error.css?v=2"> - - <!-- Preload --> - <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2"> - <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2"> - </head> - - <body> - <main> - <h1>Doh.</h1> - <p>Looks like something went wrong.</p> - <a href="javascript:history.back()" class="button">Go back</a> - </main> - </body> + <!-- Preload --> + <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2"> + <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2"> + </head> + <body> + <main> + <h1>Doh.</h1> + <p>Looks like something went wrong.</p> + <a href="javascript:history.back()" class="button">Go back</a> + </main> + </body> </html> diff --git a/demo/index.html b/demo/index.html index 13411036..1276aae3 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,254 +1,250 @@ <!DOCTYPE html> <html lang="en"> - <head> - <meta charset="utf-8" /> - <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title> - <meta - name="description" - property="og:description" - content="A simple HTML5 media player with custom controls and WebVTT captions." - /> - <meta name="author" content="Sam Potts" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> + <head> + <meta charset="utf-8" /> + <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title> + <meta + name="description" + property="og:description" + content="A simple HTML5 media player with custom controls and WebVTT captions." + /> + <meta name="author" content="Sam Potts" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> - <!-- Icons --> - <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico" /> - <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32" /> - <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16" /> - <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png" /> + <!-- Icons --> + <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico" /> + <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32" /> + <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16" /> + <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png" /> - <!-- Open Graph --> - <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player" /> - <meta property="og:site_name" content="Plyr" /> - <meta property="og:url" content="https://plyr.io" /> - <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png" /> + <!-- Open Graph --> + <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player" /> + <meta property="og:site_name" content="Plyr" /> + <meta property="og:url" content="https://plyr.io" /> + <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png" /> - <!-- Twitter --> - <meta name="twitter:card" content="summary" /> - <meta name="twitter:site" content="@sam_potts" /> - <meta name="twitter:creator" content="@sam_potts" /> - <meta name="twitter:card" content="summary_large_image" /> + <!-- Twitter --> + <meta name="twitter:card" content="summary" /> + <meta name="twitter:site" content="@sam_potts" /> + <meta name="twitter:creator" content="@sam_potts" /> + <meta name="twitter:card" content="summary_large_image" /> - <!-- Docs styles --> - <link rel="stylesheet" href="dist/demo.css" /> + <!-- Docs styles --> + <link rel="stylesheet" href="dist/demo.css" /> - <!-- Preload --> - <link - rel="preload" - as="font" - crossorigin - type="font/woff2" - href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2" - /> - <link - rel="preload" - as="font" - crossorigin - type="font/woff2" - href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2" - /> - </head> + <!-- Preload --> + <link + rel="preload" + as="font" + crossorigin + type="font/woff2" + href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2" + /> + <link + rel="preload" + as="font" + crossorigin + type="font/woff2" + href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2" + /> + </head> - <body> - <div class="grid"> - <header> - <h1>Pl<span>a</span>y<span>e</span>r</h1> - <p> - A simple, accessible and customisable media player for - <button type="button" class="faux-link" data-source="video"> - <svg class="icon"> - <title>HTML5</title> - <path - d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z" - ></path></svg - >Video</button - >, - <button type="button" class="faux-link" data-source="audio"> - <svg class="icon"> - <title>HTML5</title> - <path - d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z" - ></path></svg - >Audio</button - >, - <button type="button" class="faux-link" data-source="youtube"> - <svg class="icon" role="presentation"> - <title>YouTube</title> - <path - d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8 - s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z - M6,11V5l5,3L6,11z" - ></path></svg - >YouTube - </button> - and - <button type="button" class="faux-link" data-source="vimeo"> - <svg class="icon" role="presentation"> - <title>Vimeo</title> - <path - d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5 - C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4 - c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z" - ></path></svg - >Vimeo - </button> - </p> - - <p> - Premium video monetization from - <a href="https://vi.ai/publisher-video-monetization/?aid=plyrio" target="_blank" class="no-border"> - <img src="https://cdn.plyr.io/static/vi-logo-24x24.svg" alt="ai.vi" /> - <span class="sr-only">ai.vi</span> - </a> - </p> + <body> + <div class="grid"> + <header> + <h1>Pl<span>a</span>y<span>e</span>r</h1> + <p> + A simple, accessible and customisable media player for + <button type="button" class="faux-link" data-source="video"> + <svg class="icon"> + <title>HTML5</title> + <path + d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z" + ></path></svg + >Video</button + >, + <button type="button" class="faux-link" data-source="audio"> + <svg class="icon"> + <title>HTML5</title> + <path + d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z" + ></path></svg + >Audio</button + >, + <button type="button" class="faux-link" data-source="youtube"> + <svg class="icon" role="presentation"> + <title>YouTube</title> + <path + d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8 + s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z + M6,11V5l5,3L6,11z" + ></path></svg + >YouTube + </button> + and + <button type="button" class="faux-link" data-source="vimeo"> + <svg class="icon" role="presentation"> + <title>Vimeo</title> + <path + d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5 + C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4 + c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z" + ></path></svg + >Vimeo + </button> + </p> - <div class="call-to-action"> - <a href="https://github.com/sampotts/plyr" target="_blank" class="button js-shr"> - <svg class="icon" role="presentation"> - <title>GitHub</title> - <path - d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6 - C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5 - c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1 - c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8 - c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2 - c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z" - ></path> - </svg> - Download on GitHub - </a> - </div> - </header> - <main> - <div id="container"> - <video - controls - crossorigin - playsinline - data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" - id="player"> - <!-- Video files --> - <source - src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" - type="video/mp4" - data-res="576" - /> - <source - src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" - type="video/mp4" - data-res="720" - /> - <source - src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" - type="video/mp4" - data-res="1080" - /> + <p> + Premium video monetization from + <a href="https://vi.ai/publisher-video-monetization/?aid=plyrio" target="_blank" class="no-border"> + <img src="https://cdn.plyr.io/static/vi-logo-24x24.svg" alt="ai.vi" /> + <span class="sr-only">ai.vi</span> + </a> + </p> - <!-- Caption files --> - <track - kind="captions" - label="English" - srclang="en" - src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" - default - /> - <track - kind="captions" - label="Français" - srclang="fr" - src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt" - /> + <div class="call-to-action"> + <a href="https://github.com/sampotts/plyr" target="_blank" class="button js-shr"> + <svg class="icon" role="presentation"> + <title>GitHub</title> + <path + d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6 + C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5 + c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1 + c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8 + c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2 + c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z" + ></path> + </svg> + Download on GitHub + </a> + </div> + </header> + <main> + <div id="container"> + <video + controls + crossorigin + playsinline + data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" + id="player"> + <!-- Video files --> + <source + src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" + type="video/mp4" + data-res="576" + /> + <source + src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" + type="video/mp4" + data-res="720" + /> + <source + src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" + type="video/mp4" + data-res="1080" + /> - <!-- Fallback for browsers that don't support the <video> element --> - <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a> - </video> - </div> + <!-- Caption files --> + <track + kind="captions" + label="English" + srclang="en" + src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" + default + /> + <track + kind="captions" + label="Français" + srclang="fr" + src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt" + /> - <ul> - <li class="plyr__cite plyr__cite--video" hidden> - <small> - <svg class="icon"> - <title>HTML5</title> - <path - d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z" - ></path> - </svg> - <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank" - >View From A Blue Moon</a - > - © Brainfarm - </small> - </li> - <li class="plyr__cite plyr__cite--audio" hidden> - <small> - <svg class="icon" title="HTML5"> - <title>HTML5</title> - <path - d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z" - ></path> - </svg> - <a href="http://www.kishibashi.com/" target="_blank" - >Kishi Bashi – “It All Began With A Burst”</a - > - © Kishi Bashi - </small> - </li> - <li class="plyr__cite plyr__cite--youtube" hidden> - <small> - <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> - on - <span class="color--youtube"> - <svg class="icon" role="presentation"> - <title>YouTube</title> - <path - d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8 - s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z - M6,11V5l5,3L6,11z" - ></path></svg - >YouTube - </span> - </small> - </li> - <li class="plyr__cite plyr__cite--vimeo" hidden> - <small> - <a href="https://vimeo.com/40648169" target="_blank">Toob “Wavaphon” Music Video</a> - on - <span class="color--vimeo"> - <svg class="icon" role="presentation"> - <title>Vimeo</title> - <path - d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5 - C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4 - c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z" - ></path></svg - >Vimeo - </span> - </small> - </li> - </ul> - </main> + <!-- Fallback for browsers that don't support the <video> element --> + <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a> + </video> </div> - <aside> - <svg class="icon"> - <title>Twitter</title> + <ul> + <li class="plyr__cite plyr__cite--video" hidden> + <small> + <svg class="icon"> + <title>HTML5</title> <path - d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1 - C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7 - c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3 - c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z" + d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z" ></path> - </svg> - <p> - If you think Plyr's good, - <a - href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" - target="_blank" - class="js-shr" - >tweet it</a> - </p> - </aside> + </svg> + <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank" + >View From A Blue Moon</a + > + © Brainfarm + </small> + </li> + <li class="plyr__cite plyr__cite--audio" hidden> + <small> + <svg class="icon" title="HTML5"> + <title>HTML5</title> + <path + d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z" + ></path> + </svg> + <a href="http://www.kishibashi.com/" target="_blank" + >Kishi Bashi – “It All Began With A Burst”</a> + © Kishi Bashi + </small> + </li> + <li class="plyr__cite plyr__cite--youtube" hidden> + <small> + <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> + on + <span class="color--youtube"> + <svg class="icon" role="presentation"> + <title>YouTube</title> + <path + d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8 + s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z + M6,11V5l5,3L6,11z" + ></path></svg>YouTube + </span> + </small> + </li> + <li class="plyr__cite plyr__cite--vimeo" hidden> + <small> + <a href="https://vimeo.com/40648169" target="_blank">Toob “Wavaphon” Music Video</a> + on + <span class="color--vimeo"> + <svg class="icon" role="presentation"> + <title>Vimeo</title> + <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5 + C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4 + c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path> + </svg>Vimeo + </span> + </small> + </li> + </ul> + </main> + </div> + + <aside> + <svg class="icon"> + <title>Twitter</title> + <path + d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1 + C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7 + c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3 + c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z" + ></path> + </svg> + <p> + If you think Plyr's good, + <a + href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" + target="_blank" + class="js-shr" + >tweet it</a> + </p> + </aside> - <script src="dist/demo.js" crossorigin="anonymous"></script> - </body> + <script src="dist/demo.js" crossorigin="anonymous"></script> + </body> </html> diff --git a/demo/src/sass/bundles/demo.scss b/demo/src/sass/bundles/demo.scss index 6592013c..07e229f5 100644 --- a/demo/src/sass/bundles/demo.scss +++ b/demo/src/sass/bundles/demo.scss @@ -2,8 +2,8 @@ // Plyr.io Demo Page // ========================================================================== @charset 'UTF-8'; - @import '../../../../src/sass/lib/css-vars'; + $css-vars-use-native: true; // Settings diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss index 1c9375bf..7c3ae4f7 100644 --- a/demo/src/sass/components/buttons.scss +++ b/demo/src/sass/components/buttons.scss @@ -45,7 +45,7 @@ } &.tab-focus { - @include tab-focus(); + @include tab-focus; } &:active { @@ -64,7 +64,7 @@ // Count bubble .button__count { - animation: fadein 0.2s ease; + animation: fade-in 0.2s ease; background: $color-button-count-background; color: $color-button-count-text; margin-left: ($spacing-base * 0.75); diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss index 47ba69b0..cd70acb7 100644 --- a/demo/src/sass/components/header.scss +++ b/demo/src/sass/components/header.scss @@ -7,7 +7,7 @@ header { text-align: center; h1 span { - animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards; + animation: shrink-hide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards; display: inline-block; font-weight: $font-weight-light; opacity: 0.5; diff --git a/demo/src/sass/components/icons.scss b/demo/src/sass/components/icons.scss index 32e5f685..c40a14e5 100644 --- a/demo/src/sass/components/icons.scss +++ b/demo/src/sass/components/icons.scss @@ -2,6 +2,8 @@ // Icons // ========================================================================== +@use 'sass:math'; + // Base size icon styles .icon { fill: currentColor; @@ -19,5 +21,5 @@ label svg { a .icon, .btn .icon { - margin-right: ($spacing-base / 2); + margin-right: math.div($spacing-base, 4); } diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss index 92e71931..4f03c4de 100644 --- a/demo/src/sass/components/links.scss +++ b/demo/src/sass/components/links.scss @@ -5,7 +5,7 @@ // Make a <button> look like an <a> button.faux-link { @extend a; // stylelint-disable-line - @include cancel-button-styles(); + @include cancel-button-styles; } // Links @@ -39,7 +39,7 @@ a { } &.tab-focus { - @include tab-focus(); + @include tab-focus; } &.no-border::after { diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss index 20422237..98cbaf17 100644 --- a/demo/src/sass/components/players.scss +++ b/demo/src/sass/components/players.scss @@ -2,6 +2,8 @@ // Examples // ========================================================================== +@use 'sass:math'; + // Example players .plyr { border-radius: $border-radius-large; @@ -31,6 +33,6 @@ color: $color-gray-500; .icon { - margin-right: ceil($spacing-base / 6); + margin-right: math.div($spacing-base, 6); } } diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss index 3687b7d2..b613a9fc 100644 --- a/demo/src/sass/layout/core.scss +++ b/demo/src/sass/layout/core.scss @@ -2,6 +2,8 @@ // Core // ========================================================================== +@use 'sass:math'; + html, body { display: flex; @@ -46,7 +48,7 @@ aside { .icon { fill: $color-twitter; - margin-right: ($spacing-base / 2); + margin-right: math.div($spacing-base, 2); } p { diff --git a/demo/src/sass/lib/animation.scss b/demo/src/sass/lib/animation.scss index cc18d59b..751b34c8 100644 --- a/demo/src/sass/lib/animation.scss +++ b/demo/src/sass/lib/animation.scss @@ -3,23 +3,26 @@ // ========================================================================== // Fade -@keyframes fadein { +@keyframes fade-in { 0% { opacity: 0; } + 100% { opacity: 1; } } -@keyframes shrinkHide { +@keyframes shrink-hide { 0% { opacity: 0.5; width: 38px; } + 20% { width: 45px; } + 100% { opacity: 0; width: 0; diff --git a/demo/src/sass/lib/fontface.scss b/demo/src/sass/lib/fontface.scss index d54188d0..3884b44a 100644 --- a/demo/src/sass/lib/fontface.scss +++ b/demo/src/sass/lib/fontface.scss @@ -4,7 +4,7 @@ @font-face { font-display: swap; - font-family: 'Gordita'; + font-family: Gordita; font-style: normal; font-weight: $font-weight-light; src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), @@ -13,7 +13,7 @@ @font-face { font-display: swap; - font-family: 'Gordita'; + font-family: Gordita; font-style: normal; font-weight: $font-weight-regular; src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'), @@ -22,7 +22,7 @@ @font-face { font-display: swap; - font-family: 'Gordita'; + font-family: Gordita; font-style: normal; font-weight: $font-weight-medium; src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'), @@ -31,7 +31,7 @@ @font-face { font-display: swap; - font-family: 'Gordita'; + font-family: Gordita; font-style: normal; font-weight: $font-weight-bold; src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), @@ -40,7 +40,7 @@ @font-face { font-display: swap; - font-family: 'Gordita'; + font-family: Gordita; font-style: normal; font-weight: $font-weight-black; src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss index 2744bfb5..0f7e66b8 100644 --- a/demo/src/sass/lib/mixins.scss +++ b/demo/src/sass/lib/mixins.scss @@ -2,6 +2,8 @@ // Mixins // ========================================================================== +@use 'sass:math'; + // Convert a <button> into an <a> // --------------------------------------- @mixin cancel-button-styles() { @@ -16,7 +18,7 @@ position: relative; text-align: inherit; text-shadow: inherit; - -moz-user-select: text; // stylelint-disable-line + user-select: text; vertical-align: baseline; width: auto; } @@ -32,7 +34,7 @@ // Leave <body> at 100%/16px // --------------------------------------- @function calculate-rem($size) { - $rem: $size / 16; + $rem: math.div($size, 16); @return #{$rem}rem; } diff --git a/demo/src/sass/lib/normalize.scss b/demo/src/sass/lib/normalize.scss index f2d2c09c..52e4b986 100644 --- a/demo/src/sass/lib/normalize.scss +++ b/demo/src/sass/lib/normalize.scss @@ -11,8 +11,7 @@ html { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ + text-size-adjust: 100%; /* 2 */ } /* Sections @@ -89,7 +88,7 @@ hr { */ pre { - font-family: monospace, monospace; /* 1 */ + font-family: monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -103,7 +102,7 @@ pre { a { background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ + text-decoration-skip: objects; /* 2 */ } /** @@ -112,7 +111,7 @@ a { */ abbr[title] { - border-bottom: none; /* 1 */ + border-bottom: 0; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } @@ -281,7 +280,7 @@ button, html [type='button'], [type='reset'], [type='submit'] { - -webkit-appearance: button; /* 2 */ + appearance: button; /* 2 */ } /** @@ -375,7 +374,7 @@ textarea { */ [type='search'] { - -webkit-appearance: textfield; /* 1 */ + appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -385,7 +384,7 @@ textarea { [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration { - -webkit-appearance: none; + appearance: none; } /** @@ -394,7 +393,7 @@ textarea { */ ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ + appearance: button; /* 1 */ font: inherit; /* 2 */ } diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss index ecd55ad1..451bc29d 100644 --- a/demo/src/sass/settings/colors.scss +++ b/demo/src/sass/settings/colors.scss @@ -3,7 +3,7 @@ // ========================================================================== // Grayscale -$color-gray-900: hsl(210, 15%, 16%); +$color-gray-900: hsl(210deg 15% 16%); $color-gray-800: lighten($color-gray-900, 9%); $color-gray-700: lighten($color-gray-800, 9%); $color-gray-600: lighten($color-gray-700, 9%); @@ -15,7 +15,7 @@ $color-gray-100: lighten($color-gray-200, 9%); $color-gray-50: lighten($color-gray-100, 9%); // Branding -$color-brand-primary: hsl(198, 100%, 50%); +$color-brand-primary: hsl(198deg 100% 50%); // Text $color-text: $color-gray-700; @@ -28,13 +28,13 @@ $color-twitter: #4baaf4; $color-link: $color-brand-primary; // Background -$color-background-from: hsl(198, 100%, 94%); -$color-background-to: hsl(198, 100%, 98%); +$color-background-from: hsl(198deg 100% 94%); +$color-background-to: hsl(198deg 100% 98%); // Buttons $color-button-background: $color-brand-primary; $color-button-text: #fff; -$color-button-background-hover: hsl(198, 100%, 55%); +$color-button-background-hover: hsl(198deg 100% 55%); $color-button-count-background: #fff; $color-button-count-text: $color-gray-600; diff --git a/demo/src/sass/settings/type.scss b/demo/src/sass/settings/type.scss index c2c6695b..c01d9496 100644 --- a/demo/src/sass/settings/type.scss +++ b/demo/src/sass/settings/type.scss @@ -4,18 +4,14 @@ $font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - $font-size-base: 15; $font-size-small: 13; $font-size-large: 18; $font-size-h1: 64; - $font-weight-light: 300; $font-weight-regular: 400; $font-weight-medium: 500; $font-weight-bold: 600; $font-weight-black: 900; - $line-height-base: 1.75; - $letter-spacing-headings: -0.025em; diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss index 91c7849b..c4fc5931 100644 --- a/demo/src/sass/type/base.scss +++ b/demo/src/sass/type/base.scss @@ -8,8 +8,9 @@ html { } body { - @include font-smoothing(); + @include font-smoothing; @include font-size($font-size-base); + color: $color-text; font-family: $font-sans-serif; font-weight: $font-weight-medium; @@ -30,5 +31,6 @@ small { small { @include font-size($font-size-small); + display: block; } diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss index a6a92971..ca32076f 100644 --- a/demo/src/sass/type/headings.scss +++ b/demo/src/sass/type/headings.scss @@ -4,6 +4,7 @@ h1 { @include font-size($font-size-h1); + color: $color-headings; font-weight: $font-weight-bold; letter-spacing: $letter-spacing-headings; |