@@ -12,6 +12,8 @@ module.exports = function (grunt) { | |||
// show elapsed time at the end | |||
require('time-grunt')(grunt); | |||
grunt.loadNpmTasks('grunt-npm-command'); | |||
// configurable paths | |||
var yeomanConfig = { | |||
app: require('./bower.json').appPath || 'src', | |||
@@ -37,11 +39,11 @@ module.exports = function (grunt) { | |||
livereload: '<%= connect.options.livereload %>' | |||
}, | |||
files: [ | |||
'<%= yeoman.app %>/*.html', | |||
'{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', | |||
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', | |||
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' | |||
], | |||
'<%= yeoman.app %>/*.html', | |||
'{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', | |||
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', | |||
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' | |||
], | |||
tasks: ['includes:server'] | |||
} | |||
}, | |||
@@ -56,19 +58,19 @@ module.exports = function (grunt) { | |||
options: { | |||
open: true, | |||
base: [ | |||
'.tmp', | |||
'<%= yeoman.app %>' | |||
] | |||
'.tmp', | |||
'<%= yeoman.app %>' | |||
] | |||
} | |||
}, | |||
test: { | |||
options: { | |||
port: 9001, | |||
base: [ | |||
'.tmp', | |||
'test', | |||
'<%= yeoman.app %>' | |||
] | |||
'.tmp', | |||
'test', | |||
'<%= yeoman.app %>' | |||
] | |||
} | |||
}, | |||
dist: { | |||
@@ -82,11 +84,11 @@ module.exports = function (grunt) { | |||
files: [{ | |||
dot: true, | |||
src: [ | |||
'.tmp', | |||
'<%= yeoman.dist %>/*', | |||
'!<%= yeoman.dist %>/.git*' | |||
] | |||
}] | |||
'.tmp', | |||
'<%= yeoman.dist %>/*', | |||
'!<%= yeoman.dist %>/.git*' | |||
] | |||
}] | |||
}, | |||
server: '.tmp' | |||
}, | |||
@@ -96,11 +98,11 @@ module.exports = function (grunt) { | |||
reporter: require('jshint-stylish') | |||
}, | |||
all: [ | |||
'Gruntfile.js', | |||
'<%= yeoman.app %>/scripts/{,*/}*.js', | |||
'!<%= yeoman.app %>/scripts/vendor/*', | |||
'test/spec/{,*/}*.js' | |||
] | |||
'Gruntfile.js', | |||
'<%= yeoman.app %>/scripts/{,*/}*.js', | |||
'!<%= yeoman.app %>/scripts/vendor/*', | |||
'test/spec/{,*/}*.js' | |||
] | |||
}, | |||
@@ -153,11 +155,11 @@ module.exports = function (grunt) { | |||
dist: { | |||
files: { | |||
src: [ | |||
'<%= yeoman.dist %>/scripts/{,*/}*.js', | |||
'<%= yeoman.dist %>/styles/{,*/}*.css', | |||
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', | |||
'<%= yeoman.dist %>/fonts/{,*/}*.*' | |||
] | |||
'<%= yeoman.dist %>/scripts/{,*/}*.js', | |||
'<%= yeoman.dist %>/styles/{,*/}*.css', | |||
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', | |||
'<%= yeoman.dist %>/fonts/{,*/}*.*' | |||
] | |||
} | |||
} | |||
}, | |||
@@ -181,7 +183,7 @@ module.exports = function (grunt) { | |||
cwd: '<%= yeoman.app %>/images', | |||
src: '{,*/}*.{png,jpg,jpeg}', | |||
dest: '<%= yeoman.dist %>/images' | |||
}] | |||
}] | |||
} | |||
}, | |||
@@ -189,9 +191,9 @@ module.exports = function (grunt) { | |||
dist: { | |||
files: { | |||
'<%= yeoman.dist %>/styles/main.css': [ | |||
'.tmp/styles/{,*/}*.css', | |||
'<%= yeoman.app %>/styles/{,*/}*.css' | |||
] | |||
'.tmp/styles/{,*/}*.css', | |||
'<%= yeoman.app %>/styles/{,*/}*.css' | |||
] | |||
} | |||
} | |||
}, | |||
@@ -213,10 +215,24 @@ module.exports = function (grunt) { | |||
cwd: '<%= yeoman.app %>', | |||
src: '*.html', | |||
dest: '<%= yeoman.dist %>' | |||
}] | |||
}] | |||
} | |||
}, | |||
copy: { | |||
'npm-command': { | |||
'videojs-install': { | |||
options: { | |||
cwd: '<%= yeoman.app %>/bower_components/videojs/' | |||
} | |||
}, | |||
'videojs-build': { | |||
options: { | |||
cmd: 'run-script', | |||
args: ['build'], | |||
cwd: '<%= yeoman.app %>/bower_components/videojs/' | |||
} | |||
} | |||
} | |||
,copy: { | |||
dist: { | |||
files: [{ | |||
expand: true, | |||
@@ -224,53 +240,55 @@ module.exports = function (grunt) { | |||
cwd: '<%= yeoman.app %>', | |||
dest: '<%= yeoman.dist %>', | |||
src: [ | |||
'*.{ico,png,txt}', | |||
'fonts/{,*/}*.*', | |||
'.htaccess', | |||
'index.txt', | |||
'404.txt', | |||
'images/{,*/}*.{webp,gif,svg}' | |||
] | |||
}] | |||
'*.{ico,png,txt}', | |||
'fonts/{,*/}*.*', | |||
'.htaccess', | |||
'index.txt', | |||
'404.txt', | |||
'images/{,*/}*.{webp,gif,svg}' | |||
] | |||
}] | |||
}, | |||
server: { | |||
files: [{ | |||
expand: true, | |||
dot: true, | |||
cwd: '<%= yeoman.app %>/bower_components/font-awesome/fonts/', | |||
dest: '<%= yeoman.app %>/fonts/font-awesome', | |||
src: ['*'] | |||
expand: true, | |||
dot: true, | |||
cwd: '<%= yeoman.app %>/bower_components/font-awesome/fonts/', | |||
dest: '<%= yeoman.app %>/fonts/font-awesome', | |||
src: ['*'] | |||
}, { | |||
expand: true, | |||
dot: true, | |||
cwd: '<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/', | |||
dest: '<%= yeoman.app %>/fonts/glyphicons', | |||
src: ['*'] | |||
expand: true, | |||
dot: true, | |||
cwd: '<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/', | |||
dest: '<%= yeoman.app %>/fonts/glyphicons', | |||
src: ['*'] | |||
}] | |||
} | |||
}, | |||
concurrent: { | |||
dist: [ | |||
'less', | |||
'imagemin', | |||
'htmlmin' | |||
] | |||
'less', | |||
'imagemin', | |||
'htmlmin' | |||
] | |||
} | |||
}); | |||
grunt.loadNpmTasks('grunt-npm-command'); | |||
grunt.registerTask('serve', function (target) { | |||
if (target === 'dist') { | |||
return grunt.task.run(['build', 'connect:dist:keepalive']); | |||
} | |||
grunt.task.run([ | |||
'clean:server', | |||
'less', | |||
'includes:server', | |||
'copy:server', | |||
'connect:livereload', | |||
'watch' | |||
]); | |||
'clean:server', | |||
'less', | |||
'includes:server', | |||
'copy:server', | |||
'connect:livereload', | |||
'watch' | |||
]); | |||
}); | |||
grunt.registerTask('server', function () { | |||
@@ -279,30 +297,30 @@ module.exports = function (grunt) { | |||
}); | |||
grunt.registerTask('test', [ | |||
'clean:server', | |||
'less', | |||
'copy:server', | |||
'connect:test', | |||
]); | |||
'clean:server', | |||
'less', | |||
'copy:server', | |||
'connect:test', | |||
]); | |||
grunt.registerTask('build', [ | |||
'clean:dist', | |||
'clean:dist', | |||
'npm-command', | |||
'copy:server', | |||
'useminPrepare', | |||
'concurrent', | |||
'cssmin', | |||
'concat', | |||
'includes:build', | |||
'uglify', | |||
'copy', | |||
'usemin', | |||
'copy:server', | |||
'useminPrepare', | |||
'concurrent', | |||
'cssmin', | |||
'concat', | |||
'includes:build', | |||
'uglify', | |||
'copy', | |||
'usemin', | |||
]); | |||
]); | |||
grunt.registerTask('default', [ | |||
'jshint', | |||
'test', | |||
'build' | |||
]); | |||
'jshint', | |||
'test', | |||
'build' | |||
]); | |||
}; |
@@ -20,6 +20,7 @@ | |||
"grunt-contrib-watch": "~0.6.1", | |||
"grunt-include-replace": "^2.0.0", | |||
"grunt-includes": "^0.4.5", | |||
"grunt-npm-command": "^0.1.2", | |||
"grunt-rev": "~0.1.0", | |||
"grunt-svgmin": "1.0.0", | |||
"grunt-usemin": "~2.4.0", | |||
@@ -25,8 +25,8 @@ include "includes/head.html" | |||
</div> | |||
<div id="terminal" class="terminal preview-image"> | |||
<audio id="video-player" | |||
class="video-js" | |||
<audio id="audio-player" | |||
class="video-js vjs-default-skin" | |||
controls | |||
preload="auto" | |||
data-setup='{}'> | |||
@@ -43,8 +43,8 @@ include "includes/head.html" | |||
include "includes/footer.html" | |||
include "includes/js.html" | |||
<!-- build:js scripts/vendor/video.js --> | |||
<script src="bower_components/videojs/src/js/video.js"></script> | |||
<!-- build:js /scripts/vendor/video.js --> | |||
<script src="bower_components/videojs/dist/alt/video.novtt.min.js"></script> | |||
<!-- endbuild --> | |||
</body> | |||
@@ -25,7 +25,7 @@ include "includes/head.html" | |||
</div> | |||
<div id="terminal" class="terminal preview-image"> | |||
<video id="video-player" | |||
class="video-js" | |||
class="video-js vjs-default-skin" | |||
controls | |||
preload="auto" | |||
data-setup='{}'> | |||
@@ -42,8 +42,8 @@ include "includes/head.html" | |||
include "includes/footer.html" | |||
include "includes/js.html" | |||
<!-- build:js scripts/vendor/video.js --> | |||
<script src="bower_components/videojs/src/js/video.js"></script> | |||
<!-- build:js /scripts/vendor/video.js --> | |||
<script src="bower_components/videojs/dist/alt/video.novtt.min.js"></script> | |||
<!-- endbuild --> | |||
</body> | |||
@@ -106,11 +106,6 @@ padding: 0px; | |||
padding-bottom: 30px; | |||
} | |||
video, audio { | |||
margin: 0 auto; | |||
width: 100%; | |||
} | |||
.wrap { | |||
width: 40%; | |||
height: 40%; | |||
@@ -12,29 +12,42 @@ | |||
https://codepen.io/heff/pen/EarCt/left/?editors=010 | |||
*/ | |||
// The following are SCSS variables to automate some of the values. | |||
// But don't feel limited by them. Change/replace whatever you want. | |||
// But don't feel limited by them. Change/replace whatever you want. | |||
// The color of icons, text, and the big play button border. | |||
// Try changing to #0f0 | |||
$primary-foreground-color: #fff; // #fff default | |||
@primary-foreground-color: #fff; // #fff default | |||
// The default color of control backgrounds is mostly black but with a little | |||
// bit of blue so it can still be seen on all-black video frames, which are common. | |||
// Try changing to #900 | |||
$primary-background-color: @blue; // #2B333F default | |||
@primary-background-color: @blue; // #2B333F default | |||
@red-primary-background-color: red(@primary-background-color); | |||
@green-primary-background-color: green(@primary-background-color); | |||
@blue-primary-background-color: blue(@primary-background-color); | |||
// Try changing to true | |||
$center-big-play-button: true; // true default | |||
@center-big-play-button: true; // true default | |||
/* We're using SCSS vars here because the values are used in multiple places. | |||
Now that font size is set, the following em values will be a multiple of the | |||
new font size. If the font-size is 3em (30px), then setting any of | |||
the following values to 3em would equal 30px. 3 * font-size. */ | |||
@big-play-width: 3em; | |||
/* 1.5em = 45px default */ | |||
@big-play-height: 1.5em; | |||
.video-js { | |||
/* The base font size controls the size of everything, not just text. | |||
All dimensions use em-based sizes so that the scale along with the font size. | |||
Try increasing it to 15px and see what happens. */ | |||
font-size: 10px; | |||
width: 100%; | |||
/* The main font color changes the ICON COLORS as well as the text */ | |||
color: $primary-foreground-color; | |||
color: @primary-foreground-color; | |||
} | |||
/* The "Big Play Button" is the play button that shows before the video plays. | |||
@@ -42,40 +55,33 @@ $center-big-play-button: true; // true default | |||
of the button is the center, but there is trend towards moving it to a corner | |||
where it gets out of the way of valuable content in the poster image.*/ | |||
.vjs-default-skin .vjs-big-play-button { | |||
/* The font size is what makes the big play button...big. | |||
/* The font size is what makes the big play button...big. | |||
All width/height values use ems, which are a multiple of the font size. | |||
If the .video-js font-size is 10px, then 3em equals 30px.*/ | |||
font-size: 3em; | |||
/* We're using SCSS vars here because the values are used in multiple places. | |||
Now that font size is set, the following em values will be a multiple of the | |||
new font size. If the font-size is 3em (30px), then setting any of | |||
the following values to 3em would equal 30px. 3 * font-size. */ | |||
$big-play-width: 3em; | |||
/* 1.5em = 45px default */ | |||
$big-play-height: 1.5em; | |||
line-height: $big-play-height; | |||
height: $big-play-height; | |||
width: $big-play-width; | |||
line-height: @big-play-height; | |||
height: @big-play-height; | |||
width: @big-play-width; | |||
/* 0.06666em = 2px default */ | |||
border: 0.06666em solid $primary-foreground-color; | |||
border: 0.06666em solid @primary-foreground-color; | |||
/* 0.3em = 9px default */ | |||
border-radius: 0.3em; | |||
@if $center-big-play-button { | |||
} | |||
.vjs-default-skin .vjs-big-play-button when (@center-big-play-button = true) { | |||
/* Align center */ | |||
left: 50%; | |||
top: 50%; | |||
margin-left: -($big-play-width / 2); | |||
margin-top: -($big-play-height / 2); | |||
} @else { | |||
margin-left: -(@big-play-width / 2); | |||
margin-top: -(@big-play-height / 2); | |||
} | |||
.vjs-default-skin .vjs-big-play-button when not (@center-big-play-button = true) { | |||
/* Align top left. 0.5em = 15px default */ | |||
left: 0.5em; | |||
top: 0.5em; | |||
} | |||
} | |||
/* The default color of control backgrounds is mostly black but with a little | |||
bit of blue so it can still be seen on all-black video frames, which are common. */ | |||
@@ -83,19 +89,22 @@ $center-big-play-button: true; // true default | |||
.video-js .vjs-big-play-button, | |||
.video-js .vjs-menu-button .vjs-menu-content { | |||
/* IE8 - has no alpha support */ | |||
background-color: $primary-background-color; | |||
background-color: @primary-background-color; | |||
/* Opacity: 1.0 = 100%, 0.0 = 0% */ | |||
background-color: rgba($primary-background-color, 0.7); | |||
background-color: rgba(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color, 0.7); | |||
} | |||
// Make a slightly lighter version of the main background | |||
// for the slider background. | |||
$slider-bg-color: lighten($primary-background-color, 33%); | |||
@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color), 33%); | |||
@red-slider-bg-color: red(@slider-bg-color); | |||
@green-slider-bg-color: green(@slider-bg-color); | |||
@blue-slider-bg-color: blue(@slider-bg-color); | |||
/* Slider - used for Volume bar and Progress bar */ | |||
.video-js .vjs-slider { | |||
background-color: $slider-bg-color; | |||
background-color: rgba($slider-bg-color, 0.5); | |||
background-color: @slider-bg-color; | |||
background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5); | |||
} | |||
/* The slider bar color is used for the progress bar and the volume bar | |||
@@ -103,24 +112,36 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
.video-js .vjs-volume-level, | |||
.video-js .vjs-play-progress, | |||
.video-js .vjs-slider-bar { | |||
background: $primary-foreground-color; | |||
background: @primary-foreground-color; | |||
} | |||
/* The main progress bar also has a bar that shows how much has been loaded. */ | |||
.video-js .vjs-load-progress { | |||
/* For IE8 we'll lighten the color */ | |||
background: lighten($slider-bg-color, 25%); | |||
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 25%); | |||
/* Otherwise we'll rely on stacked opacities */ | |||
background: rgba($slider-bg-color, 0.5); | |||
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5); | |||
} | |||
/* The load progress bar also has internal divs that represent | |||
smaller disconnected loaded time ranges */ | |||
.video-js .vjs-load-progress div { | |||
/* For IE8 we'll lighten the color */ | |||
background: lighten($slider-bg-color, 50%); | |||
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 50%); | |||
/* Otherwise we'll rely on stacked opacities */ | |||
background: rgba($slider-bg-color, 0.75); | |||
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.75); | |||
} | |||
:not(.vjs-has-started) .vjs-control-bar { | |||
display: flex; | |||
} | |||
.vjs-audio .vjs-big-play-button { | |||
display: none; | |||
} | |||
.vjs-audio.audio-player-dimensions { | |||
height: 30px; | |||
} | |||
@@ -1,6 +1,5 @@ | |||
@charset "UTF-8"; | |||
@import "../bower_components/videojs/src/css/video-js.scss"; | |||
@import "includes/video-js.scss"; | |||
@import "../bower_components/videojs/dist/video-js.min.css"; | |||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ | |||
article, | |||
aside, | |||
@@ -6292,6 +6291,103 @@ blockquote.tweet-xl a { | |||
font-size: 17px; | |||
} | |||
} | |||
/* | |||
Player Skin Designer for Video.js | |||
http://videojs.com | |||
To customize the player skin edit | |||
the CSS below. Click "details" | |||
below to add comments or questions. | |||
This file uses some SCSS. Learn more | |||
at http://sass-lang.com/guide) | |||
This designer can be linked to at: | |||
https://codepen.io/heff/pen/EarCt/left/?editors=010 | |||
*/ | |||
/* We're using SCSS vars here because the values are used in multiple places. | |||
Now that font size is set, the following em values will be a multiple of the | |||
new font size. If the font-size is 3em (30px), then setting any of | |||
the following values to 3em would equal 30px. 3 * font-size. */ | |||
/* 1.5em = 45px default */ | |||
.video-js { | |||
/* The base font size controls the size of everything, not just text. | |||
All dimensions use em-based sizes so that the scale along with the font size. | |||
Try increasing it to 15px and see what happens. */ | |||
font-size: 10px; | |||
width: 100%; | |||
/* The main font color changes the ICON COLORS as well as the text */ | |||
color: #ffffff; | |||
} | |||
/* The "Big Play Button" is the play button that shows before the video plays. | |||
To center it set the align values to center and middle. The typical location | |||
of the button is the center, but there is trend towards moving it to a corner | |||
where it gets out of the way of valuable content in the poster image.*/ | |||
.vjs-default-skin .vjs-big-play-button { | |||
/* The font size is what makes the big play button...big. | |||
All width/height values use ems, which are a multiple of the font size. | |||
If the .video-js font-size is 10px, then 3em equals 30px.*/ | |||
font-size: 3em; | |||
line-height: 1.5em; | |||
height: 1.5em; | |||
width: 3em; | |||
/* 0.06666em = 2px default */ | |||
border: 0.06666em solid #ffffff; | |||
/* 0.3em = 9px default */ | |||
border-radius: 0.3em; | |||
} | |||
.vjs-default-skin .vjs-big-play-button { | |||
/* Align center */ | |||
left: 50%; | |||
top: 50%; | |||
margin-left: -1.5em; | |||
margin-top: -0.75em; | |||
} | |||
/* The default color of control backgrounds is mostly black but with a little | |||
bit of blue so it can still be seen on all-black video frames, which are common. */ | |||
.video-js .vjs-control-bar, | |||
.video-js .vjs-big-play-button, | |||
.video-js .vjs-menu-button .vjs-menu-content { | |||
/* IE8 - has no alpha support */ | |||
background-color: #85b5bb; | |||
/* Opacity: 1.0 = 100%, 0.0 = 0% */ | |||
background-color: rgba(133, 181, 187, 0.7); | |||
} | |||
/* Slider - used for Volume bar and Progress bar */ | |||
.video-js .vjs-slider { | |||
background-color: #f1f7f7; | |||
background-color: rgba(241, 247, 247, 0.5); | |||
} | |||
/* The slider bar color is used for the progress bar and the volume bar | |||
(the first two can be removed after a fix that's coming) */ | |||
.video-js .vjs-volume-level, | |||
.video-js .vjs-play-progress, | |||
.video-js .vjs-slider-bar { | |||
background: #ffffff; | |||
} | |||
/* The main progress bar also has a bar that shows how much has been loaded. */ | |||
.video-js .vjs-load-progress { | |||
/* For IE8 we'll lighten the color */ | |||
background: #ffffff; | |||
/* Otherwise we'll rely on stacked opacities */ | |||
background: rgba(241, 247, 247, 0.5); | |||
} | |||
/* The load progress bar also has internal divs that represent | |||
smaller disconnected loaded time ranges */ | |||
.video-js .vjs-load-progress div { | |||
/* For IE8 we'll lighten the color */ | |||
background: #ffffff; | |||
/* Otherwise we'll rely on stacked opacities */ | |||
background: rgba(241, 247, 247, 0.75); | |||
} | |||
:not(.vjs-has-started) .vjs-control-bar { | |||
display: flex; | |||
} | |||
.vjs-audio .vjs-big-play-button { | |||
display: none; | |||
} | |||
.vjs-audio.audio-player-dimensions { | |||
height: 30px; | |||
} | |||
@font-face { | |||
font-family: "transfersh"; | |||
src: url("../fonts/transfersh.eot"); | |||
@@ -6466,11 +6562,6 @@ html { | |||
#md-preview { | |||
padding-bottom: 30px; | |||
} | |||
video, | |||
audio { | |||
margin: 0 auto; | |||
width: 100%; | |||
} | |||
.wrap { | |||
width: 40%; | |||
height: 40%; | |||
@@ -7,9 +7,9 @@ | |||
@import "includes/global"; | |||
@import "includes/home"; | |||
@import "includes/pages"; | |||
@import "../bower_components/videojs/src/css/video-js.scss"; | |||
@import "includes/reviews"; | |||
@import "includes/video-js.scss"; | |||
@import "../bower_components/videojs/dist/video-js.min.css"; | |||
@import "includes/video-js"; | |||
@import "includes/transfersh-icons"; | |||
@import "includes/preview"; | |||