Docs/demo refresh
This commit is contained in:
Sam Potts
parent
57517a9dcc
commit
378aa159b8
5
.gitignore
vendored
5
.gitignore
vendored
@ -1,12 +1,7 @@
|
|||||||
node_modules
|
node_modules
|
||||||
*.sublime-project
|
|
||||||
*.sublime-workspace
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
aws.json
|
aws.json
|
||||||
*.mp4
|
*.mp4
|
||||||
!dist/blank.mp4
|
!dist/blank.mp4
|
||||||
index-*.html
|
index-*.html
|
||||||
notes.txt
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
@ -1,22 +1,23 @@
|
|||||||
{
|
{
|
||||||
"plyr": {
|
"plyr": {
|
||||||
"less": {
|
"less": {
|
||||||
"plyr.css": ["src/less/plyr.less"]
|
"plyr.css": "src/less/plyr.less"
|
||||||
},
|
},
|
||||||
"scss": {
|
"scss": {
|
||||||
"plyr.css": ["src/scss/plyr.scss"]
|
"plyr.css": "src/scss/plyr.scss"
|
||||||
},
|
},
|
||||||
"js": {
|
"js": {
|
||||||
"plyr.js": ["src/js/plyr.js"]
|
"plyr.js": "src/js/plyr.js"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"demo": {
|
"demo": {
|
||||||
"less": {
|
"less": {
|
||||||
"demo.css": ["demo/src/less/demo.less"]
|
"demo.css": "demo/src/less/bundle.less"
|
||||||
},
|
},
|
||||||
"js": {
|
"js": {
|
||||||
"demo.js": [
|
"demo.js": [
|
||||||
"demo/src/js/lib/classlist.js",
|
"demo/src/js/lib/classlist.js",
|
||||||
|
"demo/src/js/lib/tab-focus.js",
|
||||||
"demo/src/js/lib/sprite.js",
|
"demo/src/js/lib/sprite.js",
|
||||||
"demo/src/js/main.js"
|
"demo/src/js/main.js"
|
||||||
]
|
]
|
||||||
|
|||||||
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.js
vendored
2
demo/dist/demo.js
vendored
File diff suppressed because one or more lines are too long
@ -17,59 +17,28 @@
|
|||||||
<!-- Preload -->
|
<!-- Preload -->
|
||||||
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2">
|
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2">
|
||||||
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2">
|
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2">
|
||||||
|
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="grid">
|
||||||
<header>
|
<header>
|
||||||
<h1>Plyr</h1>
|
<h1>Plyr</h1>
|
||||||
<p>A simple, accessible HTML5 media player by
|
<p>A simple, accessible HTML5
|
||||||
<a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a>
|
<button type="button" class="faux-link" data-source="video">Video</button>,
|
||||||
|
<button type="button" class="faux-link" data-source="audio">Audio</button>,
|
||||||
|
<button type="button" class="faux-link" data-source="youtube">YouTube</button> and
|
||||||
|
<button type="button" class="faux-link" data-source="vimeo">Vimeo</button> media player.
|
||||||
</p>
|
</p>
|
||||||
<nav>
|
|
||||||
<ul>
|
<a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
|
||||||
<li>
|
|
||||||
<a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
|
|
||||||
<svg class="icon">
|
<svg class="icon">
|
||||||
<use xlink:href="#icon-github"></use>
|
<use xlink:href="#icon-github"></use>
|
||||||
</svg>Download on GitHub
|
</svg>Download on GitHub
|
||||||
</a>
|
</a>
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<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="btn btn--large btn--twitter" data-shr-network="twitter">
|
|
||||||
<svg class="icon">
|
|
||||||
<use xlink:href="#icon-twitter"></use>
|
|
||||||
</svg>Tweet
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main role="main" id="main">
|
<main>
|
||||||
<nav class="btn__bar">
|
|
||||||
<ul>
|
|
||||||
<li class="active">
|
|
||||||
<button type="button" class="btn" data-source="video">Video</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button type="button" class="btn" data-source="audio">Audio</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button type="button" class="btn btn--youtube" data-source="youtube">
|
|
||||||
<svg class="icon">
|
|
||||||
<use xlink:href="#icon-youtube"></use>
|
|
||||||
</svg>YouTube</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button type="button" class="btn btn--vimeo" data-source="vimeo">
|
|
||||||
<svg class="icon">
|
|
||||||
<use xlink:href="#icon-vimeo"></use>
|
|
||||||
</svg>Vimeo</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<video controls crossorigin playsinline loop poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
|
<video controls crossorigin playsinline loop poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
|
||||||
id="player">
|
id="player">
|
||||||
<!-- Video files -->
|
<!-- Video files -->
|
||||||
@ -116,27 +85,24 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside>If you like Plyr, get the word out and
|
||||||
|
<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" data-shr-network="twitter">tweet it</a>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<!-- Plyr core script -->
|
<!-- Plyr core script -->
|
||||||
<script src="../src/js/plyr.js"></script>
|
<script src="../src/js/plyr.js"></script>
|
||||||
|
|
||||||
<!-- Docs script -->
|
<!-- Sharing libary (https://shr.one) -->
|
||||||
<script src="dist/demo.js"></script>
|
<script src="https://cdn.shr.one/1.0.1/shr.js"></script>
|
||||||
|
|
||||||
<!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
|
<!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
|
||||||
<script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
|
<script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
|
||||||
|
|
||||||
<!-- Sharing libary (https://shr.one) -->
|
<!-- Docs script -->
|
||||||
<script src="https://cdn.shr.one/1.0.1/shr.js"></script>
|
<script src="dist/demo.js"></script>
|
||||||
<script>
|
|
||||||
if (window.shr) {
|
|
||||||
window.shr.setup({
|
|
||||||
count: {
|
|
||||||
classname: 'btn__count'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
26
demo/src/js/lib/tab-focus.js
Normal file
26
demo/src/js/lib/tab-focus.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// tab-focus.js
|
||||||
|
// Detect keyboard tabbing
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var className = 'tab-focus';
|
||||||
|
|
||||||
|
// Remove class on blur
|
||||||
|
document.addEventListener('focusout', function(event) {
|
||||||
|
event.target.classList.remove(className);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add classname to tabbed elements
|
||||||
|
document.addEventListener('keydown', function(event) {
|
||||||
|
if (event.keyCode !== 9) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delay the adding of classname until the focus has changed
|
||||||
|
// This event fires before the focusin event
|
||||||
|
window.setTimeout(function() {
|
||||||
|
document.activeElement.classList.add(className);
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
})();
|
||||||
@ -7,6 +7,14 @@
|
|||||||
/*global Plyr*/
|
/*global Plyr*/
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
if (window.shr) {
|
||||||
|
window.shr.setup({
|
||||||
|
count: {
|
||||||
|
classname: 'button__count',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/*document.body.addEventListener('ready', function(event) {
|
/*document.body.addEventListener('ready', function(event) {
|
||||||
console.log(event);
|
console.log(event);
|
||||||
});*/
|
});*/
|
||||||
@ -17,10 +25,10 @@
|
|||||||
title: 'View From A Blue Moon',
|
title: 'View From A Blue Moon',
|
||||||
iconUrl: '../dist/plyr.svg',
|
iconUrl: '../dist/plyr.svg',
|
||||||
tooltips: {
|
tooltips: {
|
||||||
controls: true
|
controls: true,
|
||||||
},
|
},
|
||||||
captions: {
|
captions: {
|
||||||
defaultActive: true
|
defaultActive: true,
|
||||||
},
|
},
|
||||||
controls: [
|
controls: [
|
||||||
'play-large',
|
'play-large',
|
||||||
@ -33,8 +41,8 @@
|
|||||||
'settings',
|
'settings',
|
||||||
'fullscreen',
|
'fullscreen',
|
||||||
'pip',
|
'pip',
|
||||||
'airplay'
|
'airplay',
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
// Expose for testing
|
// Expose for testing
|
||||||
@ -49,7 +57,7 @@
|
|||||||
video: 'video',
|
video: 'video',
|
||||||
audio: 'audio',
|
audio: 'audio',
|
||||||
youtube: 'youtube',
|
youtube: 'youtube',
|
||||||
vimeo: 'vimeo'
|
vimeo: 'vimeo',
|
||||||
};
|
};
|
||||||
var currentType = window.location.hash.replace('#', '');
|
var currentType = window.location.hash.replace('#', '');
|
||||||
var historySupport = window.history && window.history.pushState;
|
var historySupport = window.history && window.history.pushState;
|
||||||
@ -64,7 +72,7 @@
|
|||||||
if (historySupport) {
|
if (historySupport) {
|
||||||
history.pushState(
|
history.pushState(
|
||||||
{
|
{
|
||||||
type: type
|
type: type,
|
||||||
},
|
},
|
||||||
'',
|
'',
|
||||||
'#' + type
|
'#' + type
|
||||||
@ -93,7 +101,7 @@
|
|||||||
if (currentType in types) {
|
if (currentType in types) {
|
||||||
history.replaceState(
|
history.replaceState(
|
||||||
{
|
{
|
||||||
type: currentType
|
type: currentType,
|
||||||
},
|
},
|
||||||
'',
|
'',
|
||||||
video ? '' : '#' + currentType
|
video ? '' : '#' + currentType
|
||||||
@ -109,12 +117,7 @@
|
|||||||
// Toggle class on an element
|
// Toggle class on an element
|
||||||
function toggleClass(element, className, state) {
|
function toggleClass(element, className, state) {
|
||||||
if (element) {
|
if (element) {
|
||||||
if (element.classList) {
|
|
||||||
element.classList[state ? 'add' : 'remove'](className);
|
element.classList[state ? 'add' : 'remove'](className);
|
||||||
} else {
|
|
||||||
var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
|
|
||||||
element.className = name + (state ? ' ' + className : '');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -133,8 +136,8 @@
|
|||||||
sources: [
|
sources: [
|
||||||
{
|
{
|
||||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
|
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
|
||||||
type: 'video/mp4'
|
type: 'video/mp4',
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
|
poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
|
||||||
tracks: [
|
tracks: [
|
||||||
@ -143,15 +146,15 @@
|
|||||||
label: 'English',
|
label: 'English',
|
||||||
srclang: 'en',
|
srclang: 'en',
|
||||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
|
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
|
||||||
default: true
|
default: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: 'captions',
|
kind: 'captions',
|
||||||
label: 'French',
|
label: 'French',
|
||||||
srclang: 'fr',
|
srclang: 'fr',
|
||||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt'
|
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
|
|
||||||
@ -162,13 +165,13 @@
|
|||||||
sources: [
|
sources: [
|
||||||
{
|
{
|
||||||
src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
|
src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
|
||||||
type: 'audio/mp3'
|
type: 'audio/mp3',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
|
src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
|
||||||
type: 'audio/ogg'
|
type: 'audio/ogg',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
|
|
||||||
@ -179,9 +182,9 @@
|
|||||||
sources: [
|
sources: [
|
||||||
{
|
{
|
||||||
src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY',
|
src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY',
|
||||||
type: 'youtube'
|
type: 'youtube',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
|
|
||||||
@ -192,9 +195,9 @@
|
|||||||
sources: [
|
sources: [
|
||||||
{
|
{
|
||||||
src: 'https://vimeo.com/76979871',
|
src: 'https://vimeo.com/76979871',
|
||||||
type: 'vimeo'
|
type: 'vimeo',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -208,7 +211,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Set active on parent
|
// Set active on parent
|
||||||
toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true);
|
toggleClass(document.querySelector('[data-source="' + type + '"]'), 'active', true);
|
||||||
|
|
||||||
// Show cite
|
// Show cite
|
||||||
[].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) {
|
[].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) {
|
||||||
|
|||||||
35
demo/src/less/bundle.less
Normal file
35
demo/src/less/bundle.less
Normal 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';
|
||||||
@ -1,43 +0,0 @@
|
|||||||
// ==========================================================================
|
|
||||||
// Base layout
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
// BORDER-BOX ALL THE THINGS!
|
|
||||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
|
||||||
*, *::after, *::before {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hidden
|
|
||||||
[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Base
|
|
||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
background: @body-background fixed;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0 auto @padding-base;
|
|
||||||
padding: (@padding-base / 2);
|
|
||||||
max-width: @example-width-video;
|
|
||||||
|
|
||||||
@media (min-width: @screen-sm) {
|
|
||||||
margin-bottom: (@padding-base * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Header
|
|
||||||
header {
|
|
||||||
padding: @padding-base;
|
|
||||||
margin-bottom: @padding-base;
|
|
||||||
|
|
||||||
p {
|
|
||||||
.font-size(18);
|
|
||||||
}
|
|
||||||
@media (min-width: @screen-sm) {
|
|
||||||
padding-top: (@padding-base * 3);
|
|
||||||
padding-bottom: (@padding-base * 3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -2,160 +2,54 @@
|
|||||||
// Buttons
|
// Buttons
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
|
|
||||||
nav {
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: (@padding-base / 2);
|
|
||||||
.font-size();
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
li + li {
|
|
||||||
margin-left: @padding-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tabs
|
|
||||||
.btn__bar {
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto @padding-base;
|
|
||||||
max-width: @example-width-video;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 1px;
|
|
||||||
background: @gray-lighter;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
display: inline-block;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
&:first-child .btn {
|
|
||||||
border-radius: 4px 0 0 4px;
|
|
||||||
}
|
|
||||||
&:last-child .btn {
|
|
||||||
border-radius: 0 4px 4px 0;
|
|
||||||
}
|
|
||||||
& + li .btn {
|
|
||||||
margin-left: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active .btn {
|
|
||||||
&:extend(.btn--primary);
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.active + li .btn:hover {
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 560px) {
|
|
||||||
margin-bottom: (@padding-base * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Shared
|
// Shared
|
||||||
.btn,
|
.button,
|
||||||
.btn__count {
|
.button__count {
|
||||||
display: inline-block;
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
align-items: center;
|
||||||
|
padding: (@spacing-base * 0.75);
|
||||||
|
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
|
box-shadow: 0 1px 1px fade(#000, 10%);
|
||||||
|
background: #fff;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
color: @gray;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
font-weight: @font-weight-bold;
|
font-weight: @font-weight-bold;
|
||||||
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Buttons
|
// Buttons
|
||||||
.btn {
|
.button {
|
||||||
padding: (@padding-base / 2) ((@padding-base / 2) + 2);
|
padding-left: @spacing-base;
|
||||||
background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%));
|
padding-right: @spacing-base;
|
||||||
border: 1px solid @gray-light;
|
transition: all 0.2s ease;
|
||||||
box-shadow: 0 1px 1px rgba(0,0,0, .05);
|
|
||||||
text-shadow: 0 1px 1px #fff;
|
|
||||||
color: @gray;
|
|
||||||
transition: background .1s ease, color .1s ease;
|
|
||||||
.font-size(@font-size-small);
|
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: darken(@gray-light, 8%);
|
color: @gray-dark;
|
||||||
color: @gray;
|
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// Sizes
|
|
||||||
.btn--large {
|
|
||||||
padding: (@padding-base / 2) @padding-base;
|
|
||||||
.font-size();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Styles
|
|
||||||
.btn--primary {
|
|
||||||
background-image: linear-gradient(@link-color, darken(@link-color, 5%));
|
|
||||||
background-color: @link-color;
|
|
||||||
border-color: darken(@link-color, 10%);
|
|
||||||
box-shadow: 0 1px 1px rgba(0,0,0, .15);
|
|
||||||
text-shadow: 0 1px 1px rgba(0,0,0, .1);
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: #fff;
|
|
||||||
border-color: darken(@link-color, 20%);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.btn--youtube .icon {
|
&.tab-focus {
|
||||||
color: @color-youtube;
|
.tab-focus();
|
||||||
}
|
}
|
||||||
.btn--vimeo .icon {
|
|
||||||
color: @color-vimeo;
|
|
||||||
}
|
|
||||||
.btn--twitter .icon {
|
|
||||||
color: @color-twitter;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Count bubble
|
// Count bubble
|
||||||
.btn__count {
|
.button__count {
|
||||||
position: relative;
|
margin-left: (@spacing-base / 2);
|
||||||
margin-left: (@padding-base / 2);
|
animation: fadein 0.2s ease;
|
||||||
padding: (@padding-base / 2) (@padding-base * .75);
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid @gray-light;
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
width: @arrow-size;
|
width: @arrow-size;
|
||||||
|
|||||||
24
demo/src/less/components/header.less
Normal file
24
demo/src/less/components/header.less
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Header
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: @spacing-base;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
.font-size(18);
|
||||||
|
margin-bottom: @spacing-base * 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media @mq-sm {
|
||||||
|
padding-top: (@spacing-base * 3);
|
||||||
|
padding-bottom: (@spacing-base * 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media @mq-md {
|
||||||
|
max-width: 400px;
|
||||||
|
margin-right: (@spacing-base * 2);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -7,7 +7,6 @@
|
|||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
width: @icon-size;
|
width: @icon-size;
|
||||||
height: @icon-size;
|
height: @icon-size;
|
||||||
vertical-align: -3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Within elements
|
// Within elements
|
||||||
@ -16,11 +15,8 @@ button svg,
|
|||||||
label svg {
|
label svg {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a .icon,
|
a .icon,
|
||||||
.btn .icon {
|
.btn .icon {
|
||||||
margin-right: (@padding-base / 2);
|
margin-right: (@spacing-base / 2);
|
||||||
}
|
|
||||||
.btn:not(.btn-large) .icon {
|
|
||||||
width: (@icon-size - 2);
|
|
||||||
height: (@icon-size - 2);
|
|
||||||
}
|
}
|
||||||
|
|||||||
46
demo/src/less/components/links.less
Normal file
46
demo/src/less/components/links.less
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Links
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
// Make a <button> look like an <a>
|
||||||
|
button.faux-link {
|
||||||
|
.cancel-button-styles();
|
||||||
|
|
||||||
|
&:extend(a all);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Links
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px dotted currentColor;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
text-decoration: none;
|
||||||
|
color: @color-link;
|
||||||
|
font-weight: @font-weight-bold;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 0;
|
||||||
|
height: 1px;
|
||||||
|
transition: width 0.2s ease;
|
||||||
|
background: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
outline: 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tab-focus {
|
||||||
|
.tab-focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
11
demo/src/less/components/lists.less
Normal file
11
demo/src/less/components/lists.less
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Lists
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
// Lists
|
||||||
|
ul,
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
9
demo/src/less/components/navigation.less
Normal file
9
demo/src/less/components/navigation.less
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Navigation
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: @spacing-base;
|
||||||
|
}
|
||||||
@ -11,13 +11,11 @@ video {
|
|||||||
// Example players
|
// Example players
|
||||||
.plyr {
|
.plyr {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
border-radius: @border-radius-large;
|
border-radius: @border-radius-base;
|
||||||
}
|
box-shadow: 0 2px 5px fade(#000, 20%);
|
||||||
.plyr--audio {
|
|
||||||
max-width: @example-width-audio;
|
|
||||||
}
|
}
|
||||||
.plyr__video-wrapper::after {
|
.plyr__video-wrapper::after {
|
||||||
content: "";
|
content: '';
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -31,10 +29,10 @@ video {
|
|||||||
// Style full supported player
|
// Style full supported player
|
||||||
.plyr__cite {
|
.plyr__cite {
|
||||||
display: none;
|
display: none;
|
||||||
margin-top: @padding-base;
|
margin-top: @spacing-base;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
margin-right: (@padding-base / 4);
|
margin-right: (@spacing-base / 4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
// ==========================================================================
|
|
||||||
// Typography
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
// Base
|
|
||||||
html {
|
|
||||||
font-size: 100%;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
text-align: center;
|
|
||||||
color: @gray;
|
|
||||||
font-weight: @font-weight-base;
|
|
||||||
.font-smoothing();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Headings
|
|
||||||
h1,
|
|
||||||
h2 {
|
|
||||||
letter-spacing: -.025em;
|
|
||||||
color: @brand-primary;
|
|
||||||
margin: 0 0 (@padding-base / 2);
|
|
||||||
line-height: 1.2;
|
|
||||||
font-weight: @font-weight-bold;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
.font-size(@font-size-h1);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Paragraph and small
|
|
||||||
p,
|
|
||||||
small {
|
|
||||||
margin: 0 0 @padding-base;
|
|
||||||
}
|
|
||||||
small {
|
|
||||||
display: block;
|
|
||||||
padding: 0 (@padding-base / 2);
|
|
||||||
.font-size(@font-size-small);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lists
|
|
||||||
ul,
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Links
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: @link-color;
|
|
||||||
border-bottom: 1px dotted currentColor;
|
|
||||||
transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: @gray-dark;
|
|
||||||
border-bottom-color: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
.tab-focus();
|
|
||||||
}
|
|
||||||
&.logo {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.color--vimeo {
|
|
||||||
color: @color-vimeo;
|
|
||||||
}
|
|
||||||
.color--youtube {
|
|
||||||
color: @color-youtube;
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
// ==========================================================================
|
|
||||||
// Plyr.io Demo Page
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
// CSS Reset
|
|
||||||
@import "lib/normalize.less";
|
|
||||||
|
|
||||||
// Mixins
|
|
||||||
@import "lib/mixins.less";
|
|
||||||
|
|
||||||
// Variables
|
|
||||||
@import "variables.less";
|
|
||||||
|
|
||||||
// Animation
|
|
||||||
@import "lib/animation.less";
|
|
||||||
|
|
||||||
// Type
|
|
||||||
@import "lib/fontface.less";
|
|
||||||
@import "components/type.less";
|
|
||||||
|
|
||||||
// Components
|
|
||||||
@import "components/base.less";
|
|
||||||
@import "components/icons.less";
|
|
||||||
@import "components/buttons.less";
|
|
||||||
@import "components/error.less";
|
|
||||||
@import "components/examples.less";
|
|
||||||
44
demo/src/less/layout/core.less
Normal file
44
demo/src/less/layout/core.less
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Core
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
html {
|
||||||
|
background: @page-background;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
width: 100%;
|
||||||
|
padding: (@spacing-base * 0.75);
|
||||||
|
background: #fff;
|
||||||
|
text-align: center;
|
||||||
|
color: @gray;
|
||||||
|
text-shadow: none;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: @color-twitter;
|
||||||
|
|
||||||
|
&.tab-focus {
|
||||||
|
.tab-focus(@color-twitter);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -7,11 +7,13 @@ html.error,
|
|||||||
.error body {
|
.error body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error body {
|
.error body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: table;
|
display: table;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error main {
|
.error main {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
19
demo/src/less/layout/grid.less
Normal file
19
demo/src/less/layout/grid.less
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Super basic grid
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: @spacing-base;
|
||||||
|
|
||||||
|
@media @mq-md {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: @container-max-width;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -3,7 +3,11 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
|
|
||||||
// Fade
|
// Fade
|
||||||
@keyframes fade-in {
|
@keyframes fadein {
|
||||||
0% { opacity: 0 }
|
0% {
|
||||||
100% { opacity: 1 }
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -19,3 +19,12 @@
|
|||||||
font-weight: @font-weight-bold;
|
font-weight: @font-weight-bold;
|
||||||
font-display: swap;
|
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: @font-weight-heavy;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|||||||
@ -2,31 +2,39 @@
|
|||||||
// Mixins
|
// Mixins
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
|
|
||||||
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
|
// Convert a <button> into an <a>
|
||||||
// ---------------------------------------
|
// ---------------------------------------
|
||||||
.clearfix() {
|
.cancel-button-styles() {
|
||||||
zoom: 1;
|
position: relative;
|
||||||
&:before,
|
margin: 0;
|
||||||
&:after { content: ""; display: table; }
|
padding: 0;
|
||||||
&:after { clear: both; }
|
width: auto;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
vertical-align: baseline;
|
||||||
|
text-align: inherit;
|
||||||
|
font: inherit;
|
||||||
|
line-height: @line-height-base;
|
||||||
|
cursor: pointer;
|
||||||
|
-moz-user-select: text;
|
||||||
|
text-shadow: inherit;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Webkit-style focus
|
// Nicer focus styles
|
||||||
// ---------------------------------------
|
// ---------------------------------------
|
||||||
.tab-focus() {
|
.tab-focus(@color: @tab-focus-default-color) {
|
||||||
// Default
|
outline: 0;
|
||||||
outline: thin dotted @gray-dark;
|
box-shadow: 0 0 0 3px fade(@color, 35%);
|
||||||
// Webkit
|
|
||||||
outline-offset: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use rems for font sizing
|
// Use rems for font sizing
|
||||||
// Leave <body> at 100%/16px
|
// Leave <body> at 100%/16px
|
||||||
// ---------------------------------------
|
// ---------------------------------------
|
||||||
.font-size(@font-size: 16){
|
.font-size(@font-size: 16) {
|
||||||
@rem: round((@font-size / 16), 3);
|
@rem: round((@font-size / 16), 3);
|
||||||
font-size: (@font-size * 1px);
|
font-size: (@font-size * 1px);
|
||||||
font-size: ~"@{rem}rem";
|
font-size: ~'@{rem}rem';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Font smoothing
|
// Font smoothing
|
||||||
|
|||||||
11
demo/src/less/lib/reset.less
Normal file
11
demo/src/less/lib/reset.less
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Resets
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
// BORDER-BOX ALL THE THINGS!
|
||||||
|
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||||
|
*,
|
||||||
|
*::after,
|
||||||
|
*::before {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
9
demo/src/less/settings/breakpoints.less
Normal file
9
demo/src/less/settings/breakpoints.less
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Breakpoints
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
@screen-sm: 480px;
|
||||||
|
@screen-md: 768px;
|
||||||
|
|
||||||
|
@mq-sm: ~"only screen and (min-width: @{screen-sm}) ";
|
||||||
|
@mq-md: ~"only screen and (min-width: @{screen-md}) ";
|
||||||
27
demo/src/less/settings/colors.less
Normal file
27
demo/src/less/settings/colors.less
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Colors
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
// Greyscale
|
||||||
|
@gray-dark: #343f4a;
|
||||||
|
@gray: #55646b;
|
||||||
|
@gray-light: #cbd0d3;
|
||||||
|
@gray-lighter: #dbe3e8;
|
||||||
|
@off-white: #f2f5f7;
|
||||||
|
|
||||||
|
// Text
|
||||||
|
@color-text: #fff;
|
||||||
|
|
||||||
|
// Plyr
|
||||||
|
@color-brand-primary: #1aafff;
|
||||||
|
|
||||||
|
// Brands
|
||||||
|
@color-twitter: #4baaf4;
|
||||||
|
@color-youtube: #cc181e;
|
||||||
|
@color-vimeo: #19b7ed;
|
||||||
|
|
||||||
|
// Elements
|
||||||
|
@color-link: #fff;
|
||||||
|
|
||||||
|
// Focus
|
||||||
|
@tab-focus-default-color: #fff;
|
||||||
12
demo/src/less/settings/cosmetic.less
Normal file
12
demo/src/less/settings/cosmetic.less
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Misc cosmetic
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
// Button count arrow size
|
||||||
|
@arrow-size: 8px;
|
||||||
|
|
||||||
|
// Radii
|
||||||
|
@border-radius-base: 4px;
|
||||||
|
|
||||||
|
// Background
|
||||||
|
@page-background: linear-gradient(to left top, lighten(@color-brand-primary, 15%), darken(@color-brand-primary, 15%));
|
||||||
5
demo/src/less/settings/icons.less
Normal file
5
demo/src/less/settings/icons.less
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Icons
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
@icon-size: 18px;
|
||||||
5
demo/src/less/settings/layout.less
Normal file
5
demo/src/less/settings/layout.less
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Layout
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
@container-max-width: 1280px;
|
||||||
5
demo/src/less/settings/spacing.less
Normal file
5
demo/src/less/settings/spacing.less
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Colors
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
@spacing-base: 20px;
|
||||||
17
demo/src/less/settings/type.less
Normal file
17
demo/src/less/settings/type.less
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Typography
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
@font-sans-serif: 'Avenir', 'Helvetica Neue', sans-serif;
|
||||||
|
|
||||||
|
@font-size-base: 16;
|
||||||
|
@font-size-small: 14;
|
||||||
|
@font-size-h1: 64;
|
||||||
|
|
||||||
|
@font-weight-base: 500;
|
||||||
|
@font-weight-bold: 700;
|
||||||
|
@font-weight-heavy: 900;
|
||||||
|
|
||||||
|
@line-height-base: 1.5;
|
||||||
|
|
||||||
|
@letter-spacing-headings: -0.025em;
|
||||||
33
demo/src/less/type/base.less
Normal file
33
demo/src/less/type/base.less
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Base
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
// Set to 100% for rem sizing
|
||||||
|
html {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: @font-sans-serif;
|
||||||
|
line-height: @line-height-base;
|
||||||
|
color: @color-text;
|
||||||
|
font-weight: @font-weight-base;
|
||||||
|
.font-smoothing();
|
||||||
|
text-shadow: 0 1px 1px fade(#000, 15%);
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
small {
|
||||||
|
margin: 0 0 @spacing-base;
|
||||||
|
}
|
||||||
|
small {
|
||||||
|
display: block;
|
||||||
|
.font-size(@font-size-small);
|
||||||
|
}
|
||||||
10
demo/src/less/type/headings.less
Normal file
10
demo/src/less/type/headings.less
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Headings
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0 0 (@spacing-base / 2);
|
||||||
|
.font-size(@font-size-h1);
|
||||||
|
font-weight: @font-weight-heavy;
|
||||||
|
letter-spacing: @letter-spacing-headings;
|
||||||
|
}
|
||||||
10
demo/src/less/utilities/color.less
Normal file
10
demo/src/less/utilities/color.less
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Color
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
.color--vimeo {
|
||||||
|
color: @color-vimeo;
|
||||||
|
}
|
||||||
|
.color--youtube {
|
||||||
|
color: @color-youtube;
|
||||||
|
}
|
||||||
7
demo/src/less/utilities/hidden.less
Normal file
7
demo/src/less/utilities/hidden.less
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Hidden
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@ -1,48 +0,0 @@
|
|||||||
// ==========================================================================
|
|
||||||
// Variables
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
@gray-dark: #343f4a;
|
|
||||||
@gray: #55646b;
|
|
||||||
@gray-light: #cbd0d3;
|
|
||||||
@gray-lighter: #dbe3e8;
|
|
||||||
@off-white: #f2f5f7;
|
|
||||||
|
|
||||||
@brand-primary: #3498db;
|
|
||||||
@brand-secondary: #02bd9b;
|
|
||||||
|
|
||||||
// Brands
|
|
||||||
@color-twitter: #4baaf4;
|
|
||||||
@color-youtube: #cc181e;
|
|
||||||
@color-vimeo: #19b7ed;
|
|
||||||
|
|
||||||
// Base
|
|
||||||
@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary);
|
|
||||||
|
|
||||||
// Type
|
|
||||||
@font-size-base: 16;
|
|
||||||
@font-size-small: 14;
|
|
||||||
@font-size-h1: 64;
|
|
||||||
@font-weight-base: 500;
|
|
||||||
@font-weight-bold: 700;
|
|
||||||
|
|
||||||
// Elements
|
|
||||||
@link-color: @brand-primary;
|
|
||||||
@padding-base: 20px;
|
|
||||||
@arrow-size: 8px;
|
|
||||||
|
|
||||||
// Icons
|
|
||||||
@icon-size: 18px;
|
|
||||||
|
|
||||||
// Breakpoints
|
|
||||||
@screen-sm: 480px;
|
|
||||||
@screen-md: 768px;
|
|
||||||
|
|
||||||
// Radii
|
|
||||||
@border-radius-base: 4px;
|
|
||||||
@border-radius-large: 6px;
|
|
||||||
|
|
||||||
// Examples
|
|
||||||
@example-width-audio: 520px;
|
|
||||||
@example-width-video: 1200px;
|
|
||||||
18
gulpfile.js
18
gulpfile.js
@ -77,8 +77,7 @@ function loadJSON(path) {
|
|||||||
|
|
||||||
var build = {
|
var build = {
|
||||||
js: function(files, bundle) {
|
js: function(files, bundle) {
|
||||||
for (var key in files) {
|
Object.keys(files).forEach(function(key) {
|
||||||
(function(key) {
|
|
||||||
var name = 'js-' + key;
|
var name = 'js-' + key;
|
||||||
tasks.js.push(name);
|
tasks.js.push(name);
|
||||||
|
|
||||||
@ -89,12 +88,10 @@ var build = {
|
|||||||
.pipe(uglify())
|
.pipe(uglify())
|
||||||
.pipe(gulp.dest(paths[bundle].output));
|
.pipe(gulp.dest(paths[bundle].output));
|
||||||
});
|
});
|
||||||
})(key);
|
});
|
||||||
}
|
|
||||||
},
|
},
|
||||||
less: function(files, bundle) {
|
less: function(files, bundle) {
|
||||||
for (var key in files) {
|
Object.keys(files).forEach(function(key) {
|
||||||
(function(key) {
|
|
||||||
var name = 'less-' + key;
|
var name = 'less-' + key;
|
||||||
tasks.less.push(name);
|
tasks.less.push(name);
|
||||||
|
|
||||||
@ -108,12 +105,10 @@ var build = {
|
|||||||
.pipe(cleanCSS())
|
.pipe(cleanCSS())
|
||||||
.pipe(gulp.dest(paths[bundle].output));
|
.pipe(gulp.dest(paths[bundle].output));
|
||||||
});
|
});
|
||||||
})(key);
|
});
|
||||||
}
|
|
||||||
},
|
},
|
||||||
scss: function(files, bundle) {
|
scss: function(files, bundle) {
|
||||||
for (var key in files) {
|
Object.keys(files).forEach(function(key) {
|
||||||
(function(key) {
|
|
||||||
var name = 'scss-' + key;
|
var name = 'scss-' + key;
|
||||||
tasks.scss.push(name);
|
tasks.scss.push(name);
|
||||||
|
|
||||||
@ -127,8 +122,7 @@ var build = {
|
|||||||
.pipe(cleanCSS())
|
.pipe(cleanCSS())
|
||||||
.pipe(gulp.dest(paths[bundle].output));
|
.pipe(gulp.dest(paths[bundle].output));
|
||||||
});
|
});
|
||||||
})(key);
|
});
|
||||||
}
|
|
||||||
},
|
},
|
||||||
sprite: function(bundle) {
|
sprite: function(bundle) {
|
||||||
var name = 'sprite-' + bundle;
|
var name = 'sprite-' + bundle;
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
}
|
}
|
||||||
}.call(this, 'Plyr', this, function() {
|
}.call(this, 'Plyr', this, function() {
|
||||||
'use strict';
|
'use strict';
|
||||||
/* global jQuery, console */
|
/* global jQuery */
|
||||||
|
|
||||||
// Globals
|
// Globals
|
||||||
var scroll = {
|
var scroll = {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user