diff options
author | Sam Potts <me@sampotts.me> | 2015-02-24 12:37:23 +1100 |
---|---|---|
committer | Sam Potts <me@sampotts.me> | 2015-02-24 12:37:23 +1100 |
commit | 1b8b5d6ee45eb3b89703583e32b7c885aa601917 (patch) | |
tree | 989c15de90bd614b2905412934a90c7fa8fb148b /src/less/docs.less | |
parent | c105063ad963f6bd0bc9e8f48e7d4043f8f40450 (diff) | |
download | plyr-1b8b5d6ee45eb3b89703583e32b7c885aa601917.tar.lz plyr-1b8b5d6ee45eb3b89703583e32b7c885aa601917.tar.xz plyr-1b8b5d6ee45eb3b89703583e32b7c885aa601917.zip |
Tidying up, bower changes
- Folder tidy up
- Bower updated to include source files
- Upgraded to svgstore 5.0.0
Diffstat (limited to 'src/less/docs.less')
-rw-r--r-- | src/less/docs.less | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/src/less/docs.less b/src/less/docs.less new file mode 100644 index 00000000..65639769 --- /dev/null +++ b/src/less/docs.less @@ -0,0 +1,140 @@ +// ========================================================================== +// HTML5 Video Player Demo Page +// ========================================================================== + +// Reset +@import "docs/normalize.less"; +// Mixins +@import "docs/mixins.less"; + +// Variables +// --------------------------------------- +// Colors +@blue: #3498DB; +@gray-dark: #343f4a; +@gray: #565d64; +@gray-light: #cbd0d3; + +// Elements +@link-color: @blue; +@padding-base: 20px; + +// Breakpoints +@screen-md: 768px; + +// BORDER-BOX ALL THE THINGS! +// http://paulirish.com/2012/box-sizing-border-box-ftw/ +*, *::after, *::before { + box-sizing: border-box; +} + +// Base +html { + //font-size: 62.5%; +} +body { + font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; + background: #fff; + line-height: 1.5; + text-align: center; + color: #6D797F; +} + +// Type +h1, +h2 { + letter-spacing: -.025em; + color: #2E3C44; + margin: 0 0 (@padding-base / 2); + line-height: 1.2; + .font-smoothing(); +} +h1 { + .font-size(64); + color: #3498DB; +} +p, +small { + margin: 0 0 @padding-base; +} +small { + display: block; + padding: 0 (@padding-base / 2); + .font-size(14); +} + +// Header +header { + padding: @padding-base; + margin-bottom: @padding-base; + + p { + .font-size(18); + } + @media (min-width: 560px) { + padding-top: (@padding-base * 3); + padding-bottom: (@padding-base * 3); + } +} + +// Sections +section { + padding-bottom: @padding-base; + + @media (min-width: 560px) { + padding-bottom: (@padding-base * 2); + } +} + +// Links & Buttons +a { + text-decoration: none; + color: @link-color; + border-bottom: 1px solid currentColor; + transition: all .3s ease; + + &:hover, + &:focus { + color: #000; + } + &:focus { + .tab-focus(); + } +} +.btn { + display: inline-block; + padding: (@padding-base / 2) (@padding-base * 1.5); + background: @link-color; + border: 0; + color: #fff; + .font-smoothing(on); + font-weight: 600; + border-radius: 3px; + + &:hover, + &:focus { + color: #fff; + background: darken(@link-color, 5%); + } +} + +// Players +.example-audio .player { + max-width: 480px; +} +.example-video .player { + max-width: 1200px; +} +.example-audio .player, +.example-video .player { + margin: 0 auto @padding-base; + + &-fullscreen, + &.fullscreen-active { + max-width: none; + } +} + +// Fonts +// Last to not block rendering +@import "docs/fontface.less";
\ No newline at end of file |