diff options
Diffstat (limited to 'demo')
| -rw-r--r-- | demo/dist/demo.css | 2 | ||||
| -rw-r--r-- | demo/index.html | 16 | ||||
| -rw-r--r-- | demo/src/less/components/header.less | 8 | ||||
| -rw-r--r-- | demo/src/less/layout/core.less | 1 |
4 files changed, 19 insertions, 8 deletions
diff --git a/demo/dist/demo.css b/demo/dist/demo.css index 7a5eb668..e74489e0 100644 --- a/demo/dist/demo.css +++ b/demo/dist/demo.css @@ -1 +1 @@ -@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity: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{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]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;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}*,::after,::before{box-sizing:border-box}body,html{display:-webkit-box;display:flex;width:100%}html{background:linear-gradient(to left top,#67caff,#0085cd);background-attachment:fixed;height:100%}body{display:-webkit-box;display:flex;min-height:100%;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}main{text-align:center}.grid{-webkit-box-flex:1;flex:1}aside{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;width:100%;padding:15px;background:#fff;text-align:center;color:#55646b;text-shadow:none}aside .icon{margin-right:10px;fill:#4baaf4}aside p{margin:0}aside a,aside button.faux-link{color:#4baaf4}aside a.tab-focus,aside button.faux-link.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(75,170,244,.35)}.grid{margin:0 auto;padding:20px}@media only screen and (min-width:768px){.grid{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;max-width:1280px}.grid>*{-webkit-box-flex:1;flex:1}}html{font-size:100%}body{font-family:Avenir,'Helvetica Neue',sans-serif;line-height:1.5;color:#fff;font-weight:500;text-shadow:0 1px 1px rgba(0,0,0,.15);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}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-weight:900;letter-spacing:-.025em;font-size:64px;font-size:4rem}.button,.button__count{position:relative;display:-webkit-inline-box;display:inline-flex;vertical-align:middle;-webkit-box-align:center;align-items:center;padding:15px;border-radius:4px;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;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;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;width:0;height:0;right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:5px solid transparent;border-right-color:#fff;border-left-width:0}header{padding-bottom:20px;text-align:center}header p{margin-bottom:30px;font-size:18px;font-size:1.125rem}@media only screen and (min-width:768px){header{max-width:400px;margin-right:40px;padding-bottom:40px;text-align:left}}.icon{fill:currentColor;width:16px;height:16px;vertical-align:-.15em}a svg,button svg,button.faux-link svg,label svg{pointer-events:none}.btn .icon,a .icon,button.faux-link .icon{margin-right:5px}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;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;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;box-shadow:0 0 0 3px rgba(255,255,255,.35)}li,ul{list-style:none;margin:0;padding:0}nav{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;margin-bottom:20px}video{max-width:100%;vertical-align:middle}.plyr{margin:0 auto;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.2)}.plyr__video-wrapper::after{content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid rgba(0,0,0,.15);border-radius:inherit}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block}
\ No newline at end of file +@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity: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{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]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;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}*,::after,::before{box-sizing:border-box}body,html{display:-webkit-box;display:flex;width:100%}html{background:linear-gradient(to left top,#67caff,#0085cd);background-attachment:fixed;height:100%}body{display:-webkit-box;display:flex;min-height:100%;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}main{text-align:center}.grid{-webkit-box-flex:1;flex:1}aside{display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;width:100%;padding:15px;background:#fff;text-align:center;color:#55646b;text-shadow:none}aside .icon{margin-right:10px;fill:#4baaf4}aside p{margin:0}aside a,aside button.faux-link{color:#4baaf4}aside a.tab-focus,aside button.faux-link.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(75,170,244,.35)}.grid{margin:0 auto;padding:20px}@media only screen and (min-width:768px){.grid{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;max-width:1280px}.grid>*{-webkit-box-flex:1;flex:1}}html{font-size:100%}body{font-family:Avenir,'Helvetica Neue',sans-serif;line-height:1.5;color:#fff;font-weight:500;text-shadow:0 1px 1px rgba(0,0,0,.15);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}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-weight:900;letter-spacing:-.025em;font-size:64px;font-size:4rem}.button,.button__count{position:relative;display:-webkit-inline-box;display:inline-flex;vertical-align:middle;-webkit-box-align:center;align-items:center;padding:15px;border-radius:4px;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;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;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;width:0;height:0;right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:5px solid transparent;border-right-color:#fff;border-left-width:0}header{padding-bottom:20px;text-align:center}header p{margin-bottom:30px;font-size:18px;font-size:1.125rem}header .action{display:-webkit-inline-box;display:inline-flex}header .action .button .icon{flex-shrink:0}@media only screen and (min-width:768px){header{max-width:400px;margin-right:40px;padding-bottom:40px;text-align:left}}.icon{fill:currentColor;width:16px;height:16px;vertical-align:-.15em}a svg,button svg,button.faux-link svg,label svg{pointer-events:none}.btn .icon,a .icon,button.faux-link .icon{margin-right:5px}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;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;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;box-shadow:0 0 0 3px rgba(255,255,255,.35)}li,ul{list-style:none;margin:0;padding:0}nav{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;margin-bottom:20px}video{max-width:100%;vertical-align:middle}.plyr{margin:0 auto;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.2)}.plyr__video-wrapper::after{content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid rgba(0,0,0,.15);border-radius:inherit}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block}
\ No newline at end of file diff --git a/demo/index.html b/demo/index.html index fba64be3..4c105942 100644 --- a/demo/index.html +++ b/demo/index.html @@ -65,18 +65,20 @@ </svg>Vimeo</button> media player. </p> - <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github"> - <svg class="icon"> - <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 + <span class="action"> + <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github"> + <svg class="icon"> + <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> + </svg> + Download on GitHub + </a> + </span> </header> <main> diff --git a/demo/src/less/components/header.less b/demo/src/less/components/header.less index 0cc3ecaa..83ba6c5d 100644 --- a/demo/src/less/components/header.less +++ b/demo/src/less/components/header.less @@ -11,6 +11,14 @@ header { .font-size(@font-size-large); } + .action { + display: inline-flex; + + .button .icon { + flex-shrink: 0; + } + } + @media @mq-md { max-width: 400px; margin-right: (@spacing-base * 2); diff --git a/demo/src/less/layout/core.less b/demo/src/less/layout/core.less index 7f1a93e4..a17a54a7 100644 --- a/demo/src/less/layout/core.less +++ b/demo/src/less/layout/core.less @@ -37,6 +37,7 @@ main { aside { display: flex; + flex-shrink: 0; align-items: center; justify-content: center; width: 100%; |