diff options
Diffstat (limited to 'demo/src')
32 files changed, 506 insertions, 419 deletions
diff --git a/demo/src/js/lib/tab-focus.js b/demo/src/js/lib/tab-focus.js new file mode 100644 index 00000000..06e51203 --- /dev/null +++ b/demo/src/js/lib/tab-focus.js @@ -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); + }); +})(); diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 2442b01f..16c31f1c 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -7,6 +7,14 @@ /*global Plyr*/ (function() { + if (window.shr) { + window.shr.setup({ + count: { + classname: 'button__count', + }, + }); + } + /*document.body.addEventListener('ready', function(event) { console.log(event); });*/ @@ -17,10 +25,10 @@ title: 'View From A Blue Moon', iconUrl: '../dist/plyr.svg', tooltips: { - controls: true + controls: true, }, captions: { - defaultActive: true + defaultActive: true, }, controls: [ 'play-large', @@ -33,8 +41,8 @@ 'settings', 'fullscreen', 'pip', - 'airplay' - ] + 'airplay', + ], }); // Expose for testing @@ -49,7 +57,7 @@ video: 'video', audio: 'audio', youtube: 'youtube', - vimeo: 'vimeo' + vimeo: 'vimeo', }; var currentType = window.location.hash.replace('#', ''); var historySupport = window.history && window.history.pushState; @@ -64,7 +72,7 @@ if (historySupport) { history.pushState( { - type: type + type: type, }, '', '#' + type @@ -93,7 +101,7 @@ if (currentType in types) { history.replaceState( { - type: currentType + type: currentType, }, '', video ? '' : '#' + currentType @@ -109,12 +117,7 @@ // Toggle class on an element function toggleClass(element, className, state) { if (element) { - if (element.classList) { - element.classList[state ? 'add' : 'remove'](className); - } else { - var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', ''); - element.className = name + (state ? ' ' + className : ''); - } + element.classList[state ? 'add' : 'remove'](className); } } @@ -133,8 +136,8 @@ sources: [ { 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', tracks: [ @@ -143,15 +146,15 @@ label: 'English', srclang: 'en', src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', - default: true + default: true, }, { kind: 'captions', label: 'French', 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; @@ -162,13 +165,13 @@ sources: [ { 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', - type: 'audio/ogg' - } - ] + type: 'audio/ogg', + }, + ], }); break; @@ -179,9 +182,9 @@ sources: [ { src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY', - type: 'youtube' - } - ] + type: 'youtube', + }, + ], }); break; @@ -192,9 +195,9 @@ sources: [ { src: 'https://vimeo.com/76979871', - type: 'vimeo' - } - ] + type: 'vimeo', + }, + ], }); break; } @@ -208,7 +211,7 @@ } // Set active on parent - toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true); + toggleClass(document.querySelector('[data-source="' + type + '"]'), 'active', true); // Show cite [].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) { diff --git a/demo/src/less/bundle.less b/demo/src/less/bundle.less new file mode 100644 index 00000000..2645d653 --- /dev/null +++ b/demo/src/less/bundle.less @@ -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'; diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less deleted file mode 100644 index 7e5f97c6..00000000 --- a/demo/src/less/components/base.less +++ /dev/null @@ -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); - } -}
\ No newline at end of file diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index c99a0836..ed605086 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -2,171 +2,65 @@ // 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 -.btn, -.btn__count { - display: inline-block; - vertical-align: middle; - border-radius: @border-radius-base; - user-select: none; - font-weight: @font-weight-bold; +.button, +.button__count { + position: relative; + display: inline-flex; + vertical-align: middle; + align-items: center; + padding: (@spacing-base * 0.75); + + border-radius: @border-radius-base; + box-shadow: 0 1px 1px fade(#000, 10%); + background: #fff; + border: 0; + + color: @gray; + user-select: none; + font-weight: @font-weight-bold; + text-shadow: none; } // Buttons -.btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); - border: 1px solid @gray-light; - 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, - &:focus { - border-color: darken(@gray-light, 8%); - color: @gray; - outline: 0; - } -} - -// 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 { - color: @color-youtube; -} -.btn--vimeo .icon { - color: @color-vimeo; -} -.btn--twitter .icon { - color: @color-twitter; +.button { + padding-left: @spacing-base; + padding-right: @spacing-base; + transition: all 0.2s ease; + + &:hover, + &:focus { + color: @gray-dark; + outline: 0; + + &::after { + display: none; + } + } + + &.tab-focus { + .tab-focus(); + } } // Count bubble -.btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - background: #fff; - border: 1px solid @gray-light; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } +.button__count { + margin-left: (@spacing-base / 2); + animation: fadein 0.2s ease; + + &::before { + content: ''; + position: absolute; + display: block; + width: @arrow-size; + height: @arrow-size; + left: 1px; + top: 50%; + margin-top: -(@arrow-size / 2); + + background: inherit; + border: inherit; + border-width: 1px 0 0 1px; + transform: rotate(-45deg) translate(-50%, -50%); + } } diff --git a/demo/src/less/components/header.less b/demo/src/less/components/header.less new file mode 100644 index 00000000..c5f8b1fe --- /dev/null +++ b/demo/src/less/components/header.less @@ -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; + } +} diff --git a/demo/src/less/components/icons.less b/demo/src/less/components/icons.less index 9530b601..29f185bd 100644 --- a/demo/src/less/components/icons.less +++ b/demo/src/less/components/icons.less @@ -4,23 +4,19 @@ // Base size icon styles .icon { - fill: currentColor; - width: @icon-size; - height: @icon-size; - vertical-align: -3px; + fill: currentColor; + width: @icon-size; + height: @icon-size; } // Within elements a svg, button svg, label svg { - pointer-events: none; + pointer-events: none; } + a .icon, .btn .icon { - margin-right: (@padding-base / 2); -} -.btn:not(.btn-large) .icon { - width: (@icon-size - 2); - height: (@icon-size - 2); + margin-right: (@spacing-base / 2); } diff --git a/demo/src/less/components/links.less b/demo/src/less/components/links.less new file mode 100644 index 00000000..7a62ab40 --- /dev/null +++ b/demo/src/less/components/links.less @@ -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(); + } +} diff --git a/demo/src/less/components/lists.less b/demo/src/less/components/lists.less new file mode 100644 index 00000000..bae3d11d --- /dev/null +++ b/demo/src/less/components/lists.less @@ -0,0 +1,11 @@ +// ========================================================================== +// Lists +// ========================================================================== + +// Lists +ul, +li { + list-style: none; + margin: 0; + padding: 0; +} diff --git a/demo/src/less/components/navigation.less b/demo/src/less/components/navigation.less new file mode 100644 index 00000000..0b80f7e8 --- /dev/null +++ b/demo/src/less/components/navigation.less @@ -0,0 +1,9 @@ +// ========================================================================== +// Navigation +// ========================================================================== + +nav { + display: flex; + justify-content: center; + margin-bottom: @spacing-base; +} diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/players.less index a9e72d21..c0f3e965 100644 --- a/demo/src/less/components/examples.less +++ b/demo/src/less/components/players.less @@ -11,13 +11,11 @@ video { // Example players .plyr { margin: 0 auto; - border-radius: @border-radius-large; -} -.plyr--audio { - max-width: @example-width-audio; + border-radius: @border-radius-base; + box-shadow: 0 2px 5px fade(#000, 20%); } .plyr__video-wrapper::after { - content: ""; + content: ''; pointer-events: none; position: absolute; top: 0; @@ -31,10 +29,10 @@ video { // Style full supported player .plyr__cite { display: none; - margin-top: @padding-base; + margin-top: @spacing-base; .icon { - margin-right: (@padding-base / 4); + margin-right: (@spacing-base / 4); } } diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less deleted file mode 100644 index 8e621700..00000000 --- a/demo/src/less/components/type.less +++ /dev/null @@ -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; -} diff --git a/demo/src/less/demo.less b/demo/src/less/demo.less deleted file mode 100644 index ac15a3c0..00000000 --- a/demo/src/less/demo.less +++ /dev/null @@ -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"; diff --git a/demo/src/less/layout/core.less b/demo/src/less/layout/core.less new file mode 100644 index 00000000..aca66952 --- /dev/null +++ b/demo/src/less/layout/core.less @@ -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); + } + } +} diff --git a/demo/src/less/components/error.less b/demo/src/less/layout/error.less index b1427173..0ed02241 100644 --- a/demo/src/less/components/error.less +++ b/demo/src/less/layout/error.less @@ -7,13 +7,15 @@ html.error, .error body { height: 100%; } + .error body { width: 100%; display: table; table-layout: fixed; } + .error main { display: table-cell; width: 100%; vertical-align: middle; -}
\ No newline at end of file +} diff --git a/demo/src/less/layout/grid.less b/demo/src/less/layout/grid.less new file mode 100644 index 00000000..02ff28c8 --- /dev/null +++ b/demo/src/less/layout/grid.less @@ -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; + } + } +} diff --git a/demo/src/less/lib/animation.less b/demo/src/less/lib/animation.less index 386c6613..3c14b0a7 100644 --- a/demo/src/less/lib/animation.less +++ b/demo/src/less/lib/animation.less @@ -3,7 +3,11 @@ // ========================================================================== // Fade -@keyframes fade-in { - 0% { opacity: 0 } - 100% { opacity: 1 } -}
\ No newline at end of file +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less index bd5f9feb..7fa06a63 100644 --- a/demo/src/less/lib/fontface.less +++ b/demo/src/less/lib/fontface.less @@ -19,3 +19,12 @@ font-weight: @font-weight-bold; 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; +} diff --git a/demo/src/less/lib/mixins.less b/demo/src/less/lib/mixins.less index 923df1ea..fbf36546 100644 --- a/demo/src/less/lib/mixins.less +++ b/demo/src/less/lib/mixins.less @@ -2,31 +2,39 @@ // Mixins // ========================================================================== -// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ +// Convert a <button> into an <a> // --------------------------------------- -.clearfix() { - zoom: 1; - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } +.cancel-button-styles() { + position: relative; + margin: 0; + padding: 0; + 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() { - // Default - outline: thin dotted @gray-dark; - // Webkit - outline-offset: 1px; +.tab-focus(@color: @tab-focus-default-color) { + outline: 0; + box-shadow: 0 0 0 3px fade(@color, 35%); } // Use rems for font sizing // Leave <body> at 100%/16px // --------------------------------------- -.font-size(@font-size: 16){ +.font-size(@font-size: 16) { @rem: round((@font-size / 16), 3); font-size: (@font-size * 1px); - font-size: ~"@{rem}rem"; + font-size: ~'@{rem}rem'; } // Font smoothing @@ -38,4 +46,4 @@ .font-smoothing(@mode: on) when (@mode = off) { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: subpixel-antialiased; -}
\ No newline at end of file +} diff --git a/demo/src/less/lib/reset.less b/demo/src/less/lib/reset.less new file mode 100644 index 00000000..50798b10 --- /dev/null +++ b/demo/src/less/lib/reset.less @@ -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; +} diff --git a/demo/src/less/settings/breakpoints.less b/demo/src/less/settings/breakpoints.less new file mode 100644 index 00000000..b0ce9896 --- /dev/null +++ b/demo/src/less/settings/breakpoints.less @@ -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}) "; diff --git a/demo/src/less/settings/colors.less b/demo/src/less/settings/colors.less new file mode 100644 index 00000000..2f77fb14 --- /dev/null +++ b/demo/src/less/settings/colors.less @@ -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; diff --git a/demo/src/less/settings/cosmetic.less b/demo/src/less/settings/cosmetic.less new file mode 100644 index 00000000..bae2572b --- /dev/null +++ b/demo/src/less/settings/cosmetic.less @@ -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%)); diff --git a/demo/src/less/settings/icons.less b/demo/src/less/settings/icons.less new file mode 100644 index 00000000..d0b09b0b --- /dev/null +++ b/demo/src/less/settings/icons.less @@ -0,0 +1,5 @@ +// ========================================================================== +// Icons +// ========================================================================== + +@icon-size: 18px; diff --git a/demo/src/less/settings/layout.less b/demo/src/less/settings/layout.less new file mode 100644 index 00000000..810edc03 --- /dev/null +++ b/demo/src/less/settings/layout.less @@ -0,0 +1,5 @@ +// ========================================================================== +// Layout +// ========================================================================== + +@container-max-width: 1280px; diff --git a/demo/src/less/settings/spacing.less b/demo/src/less/settings/spacing.less new file mode 100644 index 00000000..6bd14f58 --- /dev/null +++ b/demo/src/less/settings/spacing.less @@ -0,0 +1,5 @@ +// ========================================================================== +// Colors +// ========================================================================== + +@spacing-base: 20px; diff --git a/demo/src/less/settings/type.less b/demo/src/less/settings/type.less new file mode 100644 index 00000000..b2740018 --- /dev/null +++ b/demo/src/less/settings/type.less @@ -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; diff --git a/demo/src/less/type/base.less b/demo/src/less/type/base.less new file mode 100644 index 00000000..4aea149d --- /dev/null +++ b/demo/src/less/type/base.less @@ -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); +} diff --git a/demo/src/less/type/headings.less b/demo/src/less/type/headings.less new file mode 100644 index 00000000..7dfcfb0a --- /dev/null +++ b/demo/src/less/type/headings.less @@ -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; +} diff --git a/demo/src/less/utilities/color.less b/demo/src/less/utilities/color.less new file mode 100644 index 00000000..923a3f67 --- /dev/null +++ b/demo/src/less/utilities/color.less @@ -0,0 +1,10 @@ +// ========================================================================== +// Color +// ========================================================================== + +.color--vimeo { + color: @color-vimeo; +} +.color--youtube { + color: @color-youtube; +} diff --git a/demo/src/less/utilities/hidden.less b/demo/src/less/utilities/hidden.less new file mode 100644 index 00000000..a48b107a --- /dev/null +++ b/demo/src/less/utilities/hidden.less @@ -0,0 +1,7 @@ +// ========================================================================== +// Hidden +// ========================================================================== + +[hidden] { + display: none; +} diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less deleted file mode 100644 index 939232e5..00000000 --- a/demo/src/less/variables.less +++ /dev/null @@ -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; |