├── .gitignore ├── favicon.png ├── site ├── zoe.jpg ├── march-on.jpg ├── mrsjxn.jpg ├── plants.jpg ├── homework-revolution-808.jpg ├── _reset.scss ├── _lists.scss ├── _positions.scss ├── style.scss ├── _buttons.scss ├── _utilities.scss ├── _forms.scss ├── _padding.scss ├── waveform-new.svg ├── _margins.scss ├── _type.scss ├── plangular-waveform.svg ├── _theme.scss ├── _plangular-site.scss ├── plangular-waveform-4.svg ├── plangular-waveform-5.svg ├── plangular-waveform-3.svg ├── style.css ├── plangular-waveform-2.svg └── plangular.css ├── img └── header-bg.jpg ├── apple-touch-icon.png ├── sass ├── _styles.scss ├── _images.scss ├── _font_style.scss ├── _grid.scss ├── _links.scss ├── _dimension_utilities.scss ├── _border_widths.scss ├── _clears.scss ├── _positions.scss ├── _text_decoration.scss ├── _word_spacing.scss ├── _colors.scss ├── _text_align.scss ├── _text_transform.scss ├── _queries.scss ├── _line_height.scss ├── _border_style.scss ├── _white_space.scss ├── _overflow.scss ├── _letter_spacing.scss ├── _lists.scss ├── _font_family.scss ├── _plangular_utilities.scss ├── _font_weight.scss ├── _background_size.scss ├── _floats.scss ├── _visibility.scss ├── _border_colors.scss ├── beats.scss ├── _padding.scss ├── _type_scale.scss ├── _border_radius.scss ├── _utilities.scss ├── _borders.scss ├── _vertical_align.scss ├── _display.scss ├── _margins.scss ├── _skins.scss ├── _widths.scss ├── _max_widths.scss ├── _position.scss ├── _plangular_site.scss ├── _debug.scss ├── _normalize.scss └── _spacing.scss ├── svg └── skullcat-skull.svg ├── package.json ├── icons └── plangular-icons.svg ├── gulpfile.js ├── plangular.js ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | _site 3 | -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/beats/master/favicon.png -------------------------------------------------------------------------------- /site/zoe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/beats/master/site/zoe.jpg -------------------------------------------------------------------------------- /img/header-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/beats/master/img/header-bg.jpg -------------------------------------------------------------------------------- /site/march-on.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/beats/master/site/march-on.jpg -------------------------------------------------------------------------------- /site/mrsjxn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/beats/master/site/mrsjxn.jpg -------------------------------------------------------------------------------- /site/plants.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/beats/master/site/plants.jpg -------------------------------------------------------------------------------- /apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/beats/master/apple-touch-icon.png -------------------------------------------------------------------------------- /sass/_styles.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | STYLES 4 | 5 | Add custom styles here. 6 | 7 | */ 8 | 9 | -------------------------------------------------------------------------------- /site/homework-revolution-808.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/beats/master/site/homework-revolution-808.jpg -------------------------------------------------------------------------------- /sass/_images.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | IMAGES 4 | 5 | */ 6 | 7 | /* Responsive images! */ 8 | 9 | img { max-width: 100%; } 10 | 11 | -------------------------------------------------------------------------------- /sass/_font_style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Font Style 4 | 5 | */ 6 | 7 | .fsn { font-style: normal; } 8 | .i { font-style: italic; } 9 | 10 | -------------------------------------------------------------------------------- /sass/_grid.scss: -------------------------------------------------------------------------------- 1 | @include break(not-small) { 2 | 3 | } 4 | 5 | @include break(medium) { 6 | 7 | } 8 | 9 | @include break(large) { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /sass/_links.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LINKS 4 | 5 | */ 6 | 7 | .link { 8 | text-decoration: none; 9 | transition: .4s all; 10 | } 11 | 12 | .link:link { color: #30BBDB; } 13 | .link:visited { color: #2D243B; } 14 | .link:hover { color: #004EAB; } 15 | .link:active { color: #C4E3E0; } 16 | 17 | -------------------------------------------------------------------------------- /svg/skullcat-skull.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /sass/_dimension_utilities.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DIMENSION UTILITIES 4 | 5 | */ 6 | 7 | .wrap { 8 | display: block; 9 | width: auto !important; 10 | } 11 | 12 | .fill { 13 | display: block; 14 | overflow: hidden; 15 | width: auto !important; 16 | } 17 | 18 | .dbf { 19 | display: block; 20 | width: 100%; 21 | } 22 | 23 | -------------------------------------------------------------------------------- /sass/_border_widths.scss: -------------------------------------------------------------------------------- 1 | /* 2 | BORDER WIDTHS 3 | 4 | LEGEND 5 | 6 | b = border 7 | w = width 8 | 9 | 0-5 = step in sizing scale 10 | 11 | */ 12 | 13 | .bw0 { border-width: 0; } 14 | .bw1 { border-width: .125rem; } 15 | .bw2 { border-width: .25rem; } 16 | .bw3 { border-width: .5rem; } 17 | .bw4 { border-width: .75rem; } 18 | .bw5 { border-width: 1rem; } 19 | 20 | -------------------------------------------------------------------------------- /site/_reset.scss: -------------------------------------------------------------------------------- 1 | // Reset 2 | 3 | body, button, input, select, textarea, pre { margin: 0; } 4 | h1, h2, h3, h4, h5, h6, p, dl, ol, ul { 5 | margin-top: 0; 6 | margin-bottom: 1rem; 7 | } 8 | button, input, select, textarea { font-family: inherit; font-size: 100%; } 9 | article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; } 10 | 11 | -------------------------------------------------------------------------------- /site/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | .list { 4 | padding-left: 2rem; 5 | } 6 | .ol { 7 | padding-left: 0; 8 | } 9 | // Simple unbulleted list 10 | .list-simple { 11 | list-style: none; 12 | padding-left: 0; 13 | } 14 | 15 | // Inline list 16 | .list-inline { 17 | list-style: none; 18 | padding-left: 0; 19 | li { 20 | display: inline; 21 | white-space: nowrap; 22 | } 23 | } 24 | 25 | -------------------------------------------------------------------------------- /sass/_clears.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CLEARS 4 | 5 | */ 6 | 7 | .cn { clear: none; } 8 | .cl { clear: left; } 9 | .cr { clear: right; } 10 | .cb { clear: both; } 11 | 12 | /* Nicolas Gallaghers Clearfix solution 13 | Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ 14 | 15 | .cf:before, 16 | .cf:after { content: " "; display: table; } 17 | .cf:after { clear: both; } 18 | .cf { *zoom: 1; } 19 | 20 | -------------------------------------------------------------------------------- /sass/_positions.scss: -------------------------------------------------------------------------------- 1 | // Positioning Utilities 2 | 3 | .relative { position: relative; } 4 | .absolute { position: absolute; } 5 | .fixed { position: fixed; } 6 | 7 | .t0 { top: 0; } 8 | .r0 { right: 0; } 9 | .b0 { bottom: 0; } 10 | .l0 { left: 0; } 11 | 12 | .z1 { z-index: 1; } 13 | .z2 { z-index: 2; } 14 | .z3 { z-index: 3; } 15 | .z4 { z-index: 4; } 16 | 17 | .absolute-center { 18 | top: 0; right: 0; bottom: 0; left: 0; 19 | margin: auto; 20 | display: table; 21 | } 22 | 23 | -------------------------------------------------------------------------------- /site/_positions.scss: -------------------------------------------------------------------------------- 1 | // Positioning Utilities 2 | 3 | .relative { position: relative; } 4 | .absolute { position: absolute; } 5 | .fixed { position: fixed; } 6 | 7 | .t0 { top: 0; } 8 | .r0 { right: 0; } 9 | .b0 { bottom: 0; } 10 | .l0 { left: 0; } 11 | 12 | .z1 { z-index: 1; } 13 | .z2 { z-index: 2; } 14 | .z3 { z-index: 3; } 15 | .z4 { z-index: 4; } 16 | 17 | .absolute-center { 18 | top: 0; right: 0; bottom: 0; left: 0; 19 | margin: auto; 20 | display: table; 21 | } 22 | 23 | -------------------------------------------------------------------------------- /site/style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BASSCSS 4 | 5 | Next-level CSS toolkit - http://jxnblk.github.io/basscss 6 | 7 | Made with love by Jxnblk - ©2014 Brent Jackson 8 | MIT License http://opensource.org/licenses/MIT 9 | 10 | */ 11 | 12 | 13 | @import "reset"; 14 | @import "type"; 15 | @import "margins"; 16 | @import "padding"; 17 | @import "utilities"; 18 | @import "buttons"; 19 | @import "lists"; 20 | @import "positions"; 21 | @import "theme"; 22 | 23 | @import "plangular-site"; 24 | 25 | -------------------------------------------------------------------------------- /site/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Buttons 2 | 3 | .button { 4 | font-family: inherit; 5 | font-weight: bold; 6 | text-decoration: none; 7 | cursor: pointer; 8 | border: none; 9 | -webkit-appearance: none; 10 | appearance: none; 11 | white-space: nowrap; 12 | display: inline-block; 13 | line-height: 2rem; 14 | height: auto; 15 | min-height: 2rem; 16 | padding: 0.5rem 1rem; 17 | 18 | // Add optional FF hack 19 | } 20 | 21 | .button-big { padding: 1rem 1.5rem; } 22 | 23 | .button-small { padding: 0 .5rem; } 24 | 25 | -------------------------------------------------------------------------------- /sass/_text_decoration.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT DECORATION 4 | 5 | */ 6 | 7 | .under { text-decoration: underline; } 8 | .none { text-decoration: none; } 9 | 10 | 11 | @include break(not-small) { 12 | .under-ns { text-decoration: underline; } 13 | .none-ns { text-decoration: none; } 14 | } 15 | 16 | @include break(medium) { 17 | .under-m { text-decoration: underline; } 18 | .none-m { text-decoration: none; } 19 | } 20 | 21 | @include break(large) { 22 | .under-l { text-decoration: underline; } 23 | .none-l { text-decoration: none; } 24 | } 25 | 26 | -------------------------------------------------------------------------------- /sass/_word_spacing.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WORD SPACING 4 | 5 | */ 6 | 7 | .wsn { word-spacing: normal; } 8 | .wsib { word-spacing: -0.43em; } /* For eliminating space between inline-block elements */ 9 | 10 | @include break(not-small) { 11 | .wsn-ns { word-spacing: normal; } 12 | .wsib-ns { word-spacing: -0.43em; } 13 | } 14 | 15 | @include break(medium) { 16 | .wsn-m { word-spacing: normal; } 17 | .wsib-m { word-spacing: -0.43em; } 18 | } 19 | 20 | @include break(large) { 21 | .wsn-l { word-spacing: normal; } 22 | .wsib-l { word-spacing: -0.43em; } 23 | } 24 | 25 | -------------------------------------------------------------------------------- /sass/_colors.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | COLORS 4 | 5 | */ 6 | 7 | /* variables */ 8 | 9 | $black: #000; 10 | $near-black: #111; 11 | $dark-gray:#222; 12 | $mid-gray:#666; 13 | $gray: #888; 14 | $silver: #999; 15 | $light-silver: #aaa; 16 | $light-gray: #ccc; 17 | $near-white: #eee; 18 | $white: #fff; 19 | 20 | $aqua: #7FDBFF; 21 | $blue: #0074D9; 22 | $navy: #001F3F; 23 | $teal: #39CCCC; 24 | $green: #2ECC40; 25 | $olive: #3D9970; 26 | $lime: #01FF70; 27 | 28 | $yellow: #FFDC00; 29 | $orange: #FF851B; 30 | $red: #FF4136; 31 | $fuchsia: #F012BE; 32 | $purple: #B10DC9; 33 | $maroon: #85144B; 34 | 35 | -------------------------------------------------------------------------------- /sass/_text_align.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Text Align 4 | 5 | */ 6 | 7 | .tl { text-align: left; } 8 | .tr { text-align: right; } 9 | .tc { text-align: center; } 10 | 11 | @include break(not-small) { 12 | .tl-ns { text-align: left; } 13 | .tr-ns { text-align: right; } 14 | .tc-ns { text-align: center; } 15 | } 16 | 17 | @include break(medium) { 18 | .tl-m { text-align: left; } 19 | .tr-m { text-align: right; } 20 | .tc-m { text-align: center; } 21 | } 22 | 23 | @include break(large) { 24 | .tl-l { text-align: left; } 25 | .tr-l { text-align: right; } 26 | .tc-l { text-align: center; } 27 | } 28 | 29 | -------------------------------------------------------------------------------- /sass/_text_transform.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | TEXT TRANSFORM 4 | 5 | */ 6 | 7 | .ttc { text-transform: capitalize; } 8 | .ttu { text-transform: uppercase; letter-spacing: .2em; } 9 | 10 | @include break(not-small) { 11 | .ttc-ns { text-transform: capitalize; } 12 | .ttu-ns { text-transform: uppercase; letter-spacing: .2em; } 13 | } 14 | 15 | @include break(medium) { 16 | .ttc-m { text-transform: capitalize; } 17 | .ttu-m { text-transform: uppercase; letter-spacing: .2em; } 18 | } 19 | 20 | @include break(large) { 21 | .ttc-l { text-transform: capitalize; } 22 | .ttu-l { text-transform: uppercase; letter-spacing: .2em; } 23 | } 24 | 25 | -------------------------------------------------------------------------------- /sass/_queries.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | QUERIES 4 | 5 | */ 6 | 7 | /* 8 | * Mixing for mobile first queries. 9 | * Two breakpoints. 10 | * Use like @include break(medium) { 11 | * ***Styles*** 12 | * } 13 | * 14 | */ 15 | 16 | @mixin break($point) { 17 | @if $point == not-small { 18 | @media screen and (min-width: 48em) { 19 | @content; 20 | } 21 | } 22 | @else if $point == medium { 23 | @media screen and (min-width: 48em) and (max-width: 64em) { 24 | @content; 25 | } 26 | } 27 | @else if $point == large { 28 | @media screen and (min-width: 64em) { 29 | @content; 30 | } 31 | } 32 | } 33 | 34 | -------------------------------------------------------------------------------- /sass/_line_height.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LINE HEIGHT 4 | 5 | */ 6 | 7 | .lh { line-height: 1; } 8 | .lh-title { line-height: 1.3; } 9 | .lh-copy { line-height: 1.6; } 10 | 11 | @include break(not-small) { 12 | .lh-ns { line-height: 1; } 13 | .lh-title-ns { line-height: 1.3; } 14 | .lh-copy-ns { line-height: 1.6; } 15 | } 16 | 17 | @include break(medium) { 18 | .lh-m { line-height: 1; } 19 | .lh-title-m { line-height: 1.3; } 20 | .lh-copy-m { line-height: 1.6; } 21 | } 22 | 23 | @include break(large) { 24 | .lh-l { line-height: 1; } 25 | .lh-title-l { line-height: 1.3; } 26 | .lh-copy-l { line-height: 1.6; } 27 | } 28 | 29 | -------------------------------------------------------------------------------- /sass/_border_style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER STYLES 4 | 5 | */ 6 | 7 | .bs-none { border-style: none; } 8 | .bs-dotted { border-style: dotted; } 9 | .bs-solid { border-style: solid; } 10 | 11 | @include break(not-small) { 12 | .bs-none-ns { border-style: none; } 13 | .bs-dotted-ns { border-style: dotted; } 14 | .bs-solid-ns { border-style: solid; } 15 | } 16 | 17 | @include break(medium) { 18 | .bs-none-m { border-style: none; } 19 | .bs-dotted-m { border-style: dotted; } 20 | .bs-solid-m { border-style: solid; } 21 | } 22 | 23 | @include break(large) { 24 | .bs-none-l { border-style: none; } 25 | .bs-dotted-l { border-style: dotted; } 26 | .bs-solid-l { border-style: solid; } 27 | } 28 | 29 | -------------------------------------------------------------------------------- /sass/_white_space.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WHITE SPACE 4 | 5 | */ 6 | 7 | 8 | .ws-norm { white-space: normal; } 9 | .ws-nowrap { white-space: nowrap; } 10 | .ws-pre { white-space: pre; } 11 | 12 | @include break(not-small) { 13 | .ws-norm-ns { white-space: normal; } 14 | .ws-nowrap-ns { white-space: nowrap; } 15 | .ws-pre-ns { white-space: pre; } 16 | } 17 | 18 | @include break(medium) { 19 | .ws-norm-m { white-space: normal; } 20 | .ws-nowrap-m { white-space: nowrap; } 21 | .ws-pre-m { white-space: pre; } 22 | } 23 | 24 | @include break(large) { 25 | .ws-norm-l { white-space: normal; } 26 | .ws-nowrap-l { white-space: nowrap; } 27 | .ws-pre-l { white-space: pre; } 28 | } 29 | 30 | -------------------------------------------------------------------------------- /sass/_overflow.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | OVERFLOWS 4 | 5 | */ 6 | 7 | .of-vis { overflow: visible; } 8 | .of-hid { overflow: hidden; } 9 | .of-scr { overflow: scroll; } 10 | .of-aut { overflow: auto; } 11 | 12 | @include break(not-small) { 13 | .of-vis-ns { overflow: visible; } 14 | .of-hid-ns { overflow: hidden; } 15 | .of-scr-ns { overflow: scroll; } 16 | .of-aut-ns { overflow: auto; } 17 | } 18 | 19 | @include break(medium) { 20 | .of-vis-m { overflow: visible; } 21 | .of-hid-m { overflow: hidden; } 22 | .of-scr-m { overflow: scroll; } 23 | .of-aut-m { overflow: auto; } 24 | } 25 | 26 | @include break(large) { 27 | .of-vis-l { overflow: visible; } 28 | .of-hid-l { overflow: hidden; } 29 | .of-scr-l { overflow: scroll; } 30 | .of-aut-l { overflow: auto; } 31 | } 32 | 33 | -------------------------------------------------------------------------------- /sass/_letter_spacing.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LETTER SPACING 4 | 5 | */ 6 | 7 | .tracked { letter-spacing: .16em; } 8 | .tracked-tight { letter-spacing: -.1em; } 9 | .mega-tracked { letter-spacing: .3em; } 10 | 11 | @include break(not-small) { 12 | .tracked-ns { letter-spacing: .16em; } 13 | .tracked-tight-ns { letter-spacing: -.1em; } 14 | .mega-tracked-ns { letter-spacing: .3em; } 15 | } 16 | 17 | @include break(medium) { 18 | .tracked-m { letter-spacing: .16em; } 19 | .tracked-tight-m { letter-spacing: -.1em; } 20 | .mega-tracked-m { letter-spacing: .3em; } 21 | } 22 | 23 | @include break(large) { 24 | .tracked-l { letter-spacing: .16em; } 25 | .tracked-tight-l { letter-spacing: -.1em; } 26 | .mega-tracked-l { letter-spacing: .3em; } 27 | } 28 | 29 | -------------------------------------------------------------------------------- /sass/_lists.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | LISTS 4 | 5 | */ 6 | 7 | .list { list-style-type: none; } 8 | 9 | .list--h { 10 | list-style-type: none; 11 | .list--h-item { display: inline-block; } 12 | } 13 | 14 | @include break(not-small) { 15 | .list--h-ns { 16 | list-style-type: none; 17 | .list--h-item-ns { display: inline-block; } 18 | } 19 | } 20 | 21 | @include break(medium) { 22 | .list-m { list-style: none; } 23 | .list--h-m { 24 | list-style-type: none; 25 | .list--h-item { display: inline-block; } 26 | } 27 | } 28 | 29 | @include break(large) { 30 | .list-l { list-style-type: none; } 31 | .list--h-l { 32 | list-style-type: none; 33 | .list--h-item { display: inline-block; } 34 | } 35 | } 36 | 37 | -------------------------------------------------------------------------------- /sass/_font_family.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Font Family Groups 4 | 5 | */ 6 | 7 | .serif { font-family: georgia, serif; } 8 | .sans-serif { font-family: 'Source Sans Pro', sans-serif; } 9 | 10 | // From http://cssfontstack.com 11 | .code { font-family: Consolas, monaco, monospace; } 12 | .serif-bodini { font-family: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; } 13 | .serif-calisto { font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif; } 14 | .serif-garamond { font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; } 15 | .serif-times { font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; } 16 | 17 | -------------------------------------------------------------------------------- /site/_utilities.scss: -------------------------------------------------------------------------------- 1 | // Layout Utilities 2 | 3 | .inline { display: inline; } 4 | .block { display: block; } 5 | .inline-block { display: inline-block; } 6 | 7 | .oh { overflow: hidden; } 8 | .left { float: left; } 9 | .right { float: right; } 10 | 11 | .clearfix { 12 | &:before, &:after { content: " "; display: table; } 13 | &:after { clear: both; } 14 | } 15 | 16 | .fit { max-width: 100%; } 17 | 18 | .full-width { width: 100%; } 19 | .half-width { width: 50%; } 20 | 21 | .mobile-show { 22 | display: none; 23 | } 24 | 25 | @media (max-width: 48em) { 26 | .mobile-show, 27 | .mobile-block { 28 | display: block; 29 | } 30 | .mobile-block { 31 | width: 100%; 32 | } 33 | .mobile-hide { 34 | display: none; 35 | } 36 | .mobile-center { 37 | text-align: center; 38 | } 39 | } 40 | 41 | -------------------------------------------------------------------------------- /sass/_plangular_utilities.scss: -------------------------------------------------------------------------------- 1 | // Layout Utilities 2 | 3 | .inline { display: inline; } 4 | .block { display: block; } 5 | .inline-block { display: inline-block; } 6 | 7 | .oh { overflow: hidden; } 8 | .left { float: left; } 9 | .right { float: right; } 10 | 11 | .clearfix { 12 | &:before, &:after { content: " "; display: table; } 13 | &:after { clear: both; } 14 | } 15 | 16 | .fit { max-width: 100%; } 17 | 18 | .full-width { width: 100%; } 19 | .half-width { width: 50%; } 20 | 21 | .mobile-show { 22 | display: none; 23 | } 24 | 25 | @media (max-width: 48em) { 26 | .mobile-show, 27 | .mobile-block { 28 | display: block; 29 | } 30 | .mobile-block { 31 | width: 100%; 32 | } 33 | .mobile-hide { 34 | display: none; 35 | } 36 | .mobile-center { 37 | text-align: center; 38 | } 39 | } 40 | 41 | -------------------------------------------------------------------------------- /site/_forms.scss: -------------------------------------------------------------------------------- 1 | // Forms 2 | 3 | .form { 4 | font-size: 1rem; 5 | } 6 | 7 | .input { 8 | appearance: none; 9 | border-style: solid; 10 | border-width: 1px; 11 | -moz-box-sizing: border-box; 12 | box-sizing: border-box; 13 | max-width: 100%; 14 | height: 3rem; 15 | line-height: 2rem; 16 | padding: .5rem; 17 | border-radius: .25rem; 18 | } 19 | 20 | .select { 21 | box-sizing: border-box; 22 | height: 3rem; 23 | margin-right: 0; 24 | margin-left: 0; 25 | border-radius: .25rem; 26 | } 27 | 28 | .textarea { 29 | box-sizing: border-box; 30 | padding: 1rem; 31 | line-height: 1.5rem; 32 | border-radius: .25rem; 33 | } 34 | 35 | .form-stacked { 36 | label, 37 | .input, 38 | .select { 39 | display: block; 40 | width: 100%; 41 | } 42 | .input, 43 | .select, 44 | .radio, 45 | .checkbox { 46 | margin-bottom: 1rem; 47 | } 48 | } 49 | 50 | -------------------------------------------------------------------------------- /sass/_font_weight.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FONT WEIGHT 4 | 5 | */ 6 | 7 | .fwn { font-weight: normal; } 8 | .b { font-weight: bold; } 9 | .fw1 { font-weight: 100; } 10 | .fw4 { font-weight: 400; } 11 | .fw9 { font-weight: 900; } 12 | 13 | @include break(not-small) { 14 | .fwn-ns { font-weight: normal; } 15 | .b-ns { font-weight: bold; } 16 | .fw1-ns { font-weight: 100; } 17 | .fw4-ns { font-weight: 400; } 18 | .fw9-ns { font-weight: 900; } 19 | } 20 | 21 | @include break(medium) { 22 | .fwn-m { font-weight: normal; } 23 | .b-m { font-weight: bold; } 24 | .fw1-m { font-weight: 100; } 25 | .fw4-m { font-weight: 400; } 26 | .fw9-m { font-weight: 900; } 27 | } 28 | 29 | @include break(large) { 30 | .fwn-l { font-weight: normal; } 31 | .b-l { font-weight: bold; } 32 | .fw1-l { font-weight: 100; } 33 | .fw4-l { font-weight: 400; } 34 | .fw9-l { font-weight: 900; } 35 | } 36 | 37 | -------------------------------------------------------------------------------- /sass/_background_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BACKGROUND SIZE 4 | 5 | */ 6 | 7 | .bg-cv { background-size: cover; } 8 | .bg-cn { background-size: contain; } 9 | .bg-auto { background-size: auto; } 10 | 11 | .bp-bottom { background-position: center bottom; } 12 | 13 | @include break(not-small) { 14 | .bg-cv-ns { background-size: cover; } 15 | .bg-cn-ns { background-size: contain; } 16 | .bg-auto-ns { background-size: auto; } 17 | } 18 | 19 | @include break(medium) { 20 | .bg-cv-m { background-size: cover; } 21 | .bg-cn-m { background-size: contain; } 22 | .bg-auto-m { background-size: auto; } 23 | } 24 | 25 | @include break(large) { 26 | .bg-cv-l { background-size: cover; } 27 | .bg-cn-l { background-size: contain; } 28 | .bg-auto-l { background-size: auto; } 29 | } 30 | 31 | -------------------------------------------------------------------------------- /sass/_floats.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | FLOATS 4 | 5 | 1. Floated elements are automatically rendered as block level elements. 6 | Setting floats to display inline will fix the double margin bug in 7 | ie6. You know... just in case. 8 | 9 | Legend 10 | 11 | f = float 12 | l = left 13 | r = right 14 | n = none 15 | 16 | */ 17 | 18 | 19 | 20 | .fl { float: left; display: inline; } 21 | .fr { float: right; display: inline; } 22 | .fn { float: none; } 23 | 24 | @include break(not-small) { 25 | .fl-ns { float: left; display: inline; } 26 | .fr-ns { float: right;display: inline; } 27 | .fn-ns { float: none; } 28 | } 29 | 30 | @include break(medium) { 31 | .fl-m { float: left; display: inline; } 32 | .fr-m { float: right; display: inline; } 33 | .fn-m { float: none; } 34 | } 35 | 36 | @include break(large) { 37 | .fl-l { float: left; display: inline; } 38 | .fr-l { float: right; display: inline; } 39 | .fn-l { float: none; } 40 | } 41 | 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "beats", 3 | "version": "0.0.2", 4 | "description": "Skullcat beats", 5 | "main": "index.html", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/mrmrs/beats.git" 9 | }, 10 | "keywords": [ 11 | "808", 12 | "bpm", 13 | "drums", 14 | "beats" 15 | ], 16 | "author": "mrmrs", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/mrmrs/beats/issues" 20 | }, 21 | "devDependencies": { 22 | "browser-sync": "^2.23.6", 23 | "gulp": "~3.9.1", 24 | "gulp-autoprefixer": "5.0.0", 25 | "gulp-csslint": "~1.0.1", 26 | "gulp-imagemin": "~4.1.0", 27 | "gulp-minify-css": "^1.2.4", 28 | "gulp-rename": "^1.2.2", 29 | "gulp-ruby-sass": "~3.0.0", 30 | "gulp-size": "^3.0.0", 31 | "gulp-svgmin": "~1.2.4", 32 | "gulp-util": "~3.0.8", 33 | "gulp-watch": "~5.0.0", 34 | "jshint-stylish": "~2.2.1" 35 | }, 36 | "scripts": { 37 | "start": "gulp" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /icons/plangular-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /sass/_visibility.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | VISIBILITY 4 | 5 | */ 6 | 7 | 8 | /* 9 | Text that is hidden but accessible 10 | Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 11 | */ 12 | 13 | .clip { 14 | position: fixed !important; 15 | _position: absolute !important; 16 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 17 | clip: rect(1px, 1px, 1px, 1px); 18 | } 19 | 20 | @include break(not-small) { 21 | .clip-ns { 22 | position: fixed !important; 23 | _position: absolute !important; 24 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 25 | clip: rect(1px, 1px, 1px, 1px); 26 | } 27 | } 28 | 29 | @include break(medium) { 30 | .clip-m { 31 | position: fixed !important; 32 | _position: absolute !important; 33 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 34 | clip: rect(1px, 1px, 1px, 1px); 35 | } 36 | } 37 | 38 | @include break(large) { 39 | .clip-l { 40 | position: fixed !important; 41 | _position: absolute !important; 42 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 43 | clip: rect(1px, 1px, 1px, 1px); 44 | } 45 | } 46 | 47 | -------------------------------------------------------------------------------- /sass/_border_colors.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER COLORS 4 | 5 | */ 6 | 7 | .b-black { border-color: $black; } 8 | .b-near-black { border-color: $near-black; } 9 | .b-dark-gray { border-color: $dark-gray; } 10 | .b-mid-gray { border-color: $mid-gray; } 11 | .b-gray { border-color: $gray; } 12 | .b-silver { border-color: $silver; } 13 | .b-light-silver { border-color: $light-silver; } 14 | .b-light-gray { border-color: $light-gray; } 15 | .b-near-white { border-color: $near-white; } 16 | .b-white { border-color: $white; } 17 | 18 | .b-aqua { border-color: $aqua; } 19 | .b-blue { border-color: $blue; } 20 | .b-navy { border-color: $navy; } 21 | .b-teal { border-color: $teal; } 22 | .b-green { border-color: $green; } 23 | .b-olive { border-color: $olive; } 24 | .b-lime { border-color: $lime; } 25 | .b-yellow { border-color: $yellow; } 26 | .b-orange { border-color: $orange; } 27 | .b-red { border-color: $red; } 28 | .b-fuchsia { border-color: $fuchsia; } 29 | .b-purple { border-color: $purple; } 30 | .b-maroon { border-color: $maroon; } 31 | 32 | -------------------------------------------------------------------------------- /sass/beats.scss: -------------------------------------------------------------------------------- 1 | @import "queries"; 2 | @import "colors"; 3 | 4 | @import "plangular_site"; 5 | @import "plangular_utilities"; 6 | @import "background_size"; 7 | @import "border_colors"; 8 | @import "border_radius"; 9 | @import "border_style"; 10 | @import "border_widths"; 11 | @import "borders"; 12 | @import "clears"; 13 | @import "dimension_utilities"; 14 | @import "display"; 15 | @import "floats"; 16 | @import "font_family"; 17 | @import "font_style"; 18 | @import "font_weight"; 19 | @import "grid"; 20 | @import "images"; 21 | @import "letter_spacing"; 22 | @import "line_height"; 23 | @import "links"; 24 | @import "lists"; 25 | @import "margins"; 26 | @import "max_widths"; 27 | @import "normalize"; 28 | @import "overflow"; 29 | @import "padding"; 30 | @import "position"; 31 | @import "positions"; 32 | @import "skins"; 33 | @import "spacing"; 34 | @import "text_decoration"; 35 | @import "text_align"; 36 | @import "text_transform"; 37 | @import "type_scale"; 38 | @import "utilities"; 39 | @import "visibility"; 40 | @import "white_space"; 41 | @import "widths"; 42 | @import "word_spacing"; 43 | @import "styles"; 44 | @import "vertical_align"; 45 | 46 | @import "debug"; 47 | -------------------------------------------------------------------------------- /sass/_padding.scss: -------------------------------------------------------------------------------- 1 | // Padding 2 | 3 | .p1 { padding: 1rem; } 4 | .px1 { padding-right: 1rem; padding-left: 1rem; } 5 | .py1 { padding-top: 1rem; padding-bottom: 1rem; } 6 | 7 | .p2 { padding: 2rem; } 8 | .px2 { padding-right: 2rem; padding-left: 2rem; } 9 | .py2 { padding-top: 2rem; padding-bottom: 2rem; } 10 | 11 | .p3 { padding: 3rem; } 12 | .px3 { padding-right: 3rem; padding-left: 3rem; } 13 | .py3 { padding-top: 3rem; padding-bottom: 3rem; } 14 | 15 | .p4 { padding: 4rem; } 16 | .px4 { padding-right: 4rem; padding-left: 4rem; } 17 | .py4 { padding-top: 4rem; padding-bottom: 4rem; } 18 | 19 | 20 | // Responsive padding 21 | 22 | .p-responsive { padding: 1.5rem; } 23 | .px-responsive { padding-right: 1.5rem; padding-left: 1.5rem; } 24 | .py-responsive { padding-top: 1.5rem; padding-bottom: 1.5rem; } 25 | 26 | @media (min-width: 48em) and (max-width: 64em) { 27 | .p-responsive { padding: 3rem; } 28 | .px-responsive { padding-right: 3rem; padding-left: 3rem; } 29 | .py-responsive { padding-top: 3rem; padding-bottom: 3rem; } 30 | } 31 | 32 | @media (min-width: 64em) { 33 | .p-responsive { padding: 4rem; } 34 | .px-responsive { padding-right: 4rem; padding-left: 4rem; } 35 | .py-responsive { padding-top: 4rem; padding-bottom: 4rem; } 36 | } 37 | 38 | -------------------------------------------------------------------------------- /site/_padding.scss: -------------------------------------------------------------------------------- 1 | // Padding 2 | 3 | .p1 { padding: 1rem; } 4 | .px1 { padding-right: 1rem; padding-left: 1rem; } 5 | .py1 { padding-top: 1rem; padding-bottom: 1rem; } 6 | 7 | .p2 { padding: 2rem; } 8 | .px2 { padding-right: 2rem; padding-left: 2rem; } 9 | .py2 { padding-top: 2rem; padding-bottom: 2rem; } 10 | 11 | .p3 { padding: 3rem; } 12 | .px3 { padding-right: 3rem; padding-left: 3rem; } 13 | .py3 { padding-top: 3rem; padding-bottom: 3rem; } 14 | 15 | .p4 { padding: 4rem; } 16 | .px4 { padding-right: 4rem; padding-left: 4rem; } 17 | .py4 { padding-top: 4rem; padding-bottom: 4rem; } 18 | 19 | 20 | // Responsive padding 21 | 22 | .p-responsive { padding: 1.5rem; } 23 | .px-responsive { padding-right: 1.5rem; padding-left: 1.5rem; } 24 | .py-responsive { padding-top: 1.5rem; padding-bottom: 1.5rem; } 25 | 26 | @media (min-width: 48em) and (max-width: 64em) { 27 | .p-responsive { padding: 3rem; } 28 | .px-responsive { padding-right: 3rem; padding-left: 3rem; } 29 | .py-responsive { padding-top: 3rem; padding-bottom: 3rem; } 30 | } 31 | 32 | @media (min-width: 64em) { 33 | .p-responsive { padding: 4rem; } 34 | .px-responsive { padding-right: 4rem; padding-left: 4rem; } 35 | .py-responsive { padding-top: 4rem; padding-bottom: 4rem; } 36 | } 37 | 38 | -------------------------------------------------------------------------------- /sass/_type_scale.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | TYPE SCALE 3 | ========================================================================== */ 4 | 5 | .f1 { font-size: 2rem; } 6 | .f2 { font-size: 1.5rem; } 7 | .f3 { font-size: 1.2rem; } 8 | .f4 { font-size: 1.2rem; } 9 | .f5 { font-size: 1rem; } 10 | .f6, 11 | .small { font-size: .85rem; } 12 | 13 | 14 | @include break(not-small){ 15 | .mega-ns { font-size: 3rem; } 16 | .f1-ns { font-size: 2rem; } 17 | .f2-ns { font-size: 1.5rem; } 18 | .f3-ns { font-size: 1.2rem; } 19 | .f4-ns { font-size: 1.2rem; } 20 | .f5-ns { font-size: 1rem; } 21 | .f6-ns { font-size: .85rem; } 22 | } 23 | 24 | @include break(medium) { 25 | .mega-m { font-size: 3rem; } 26 | .f1-m { font-size: 2rem; } 27 | .f2-m { font-size: 1.5rem; } 28 | .f3-m { font-size: 1.2rem; } 29 | .f4-m { font-size: 1.2rem; } 30 | .f5-m { font-size: 1rem; } 31 | .f6-m { font-size: .85rem; } 32 | } 33 | 34 | @include break(large) { 35 | .mega-l { font-size: 4rem; } 36 | .f1-l { font-size: 3rem; } 37 | .f2-l { font-size: 2rem; } 38 | .f3-l { font-size: 1.5rem; } 39 | .f4-l { font-size: 1.2rem; } 40 | .f5-l { font-size: 1rem; } 41 | .f6-l { font-size: 1rem; } 42 | } 43 | 44 | -------------------------------------------------------------------------------- /sass/_border_radius.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER RADIUS 4 | 5 | */ 6 | 7 | .brn { border-radius: 0; } 8 | .br { border-radius: .125rem; } 9 | .br2 { border-radius: .25rem; } 10 | .br3 { border-radius: .5rem; } 11 | .br4 { border-radius: 1rem; } 12 | .br5 { border-radius: 2rem; } 13 | .br-circ { border-radius: 9999px; } 14 | .br-100 { border-radius: 100%; } 15 | 16 | @include break(not-small) { 17 | .brn-ns { border-radius: 0; } 18 | .br-ns { border-radius: .125rem; } 19 | .br2-ns { border-radius: .25rem; } 20 | .br3-ns { border-radius: .5rem; } 21 | .br4-ns { border-radius: 1rem; } 22 | .br5-ns { border-radius: 2rem; } 23 | .br-circ-ns { border-radius: 9999px; } 24 | .br-100-ns { border-radius: 100%; } 25 | } 26 | 27 | @include break(medium) { 28 | .brn-m { border-radius: 0; } 29 | .br-m { border-radius: .125rem; } 30 | .br2-m { border-radius: .25rem; } 31 | .br3-m { border-radius: .5rem; } 32 | .br4-m { border-radius: 1rem; } 33 | .br5-m { border-radius: 2rem; } 34 | .br-circ-m { border-radius: 9999px; } 35 | .br-100-m { border-radius: 100%; } 36 | } 37 | 38 | @include break(large) { 39 | .brn-l { border-radius: 0; } 40 | .br-l { border-radius: .125rem; } 41 | .br2-l { border-radius: .25rem; } 42 | .br3-l { border-radius: .5rem; } 43 | .br4-l { border-radius: 1rem; } 44 | .br5-l { border-radius: 2rem; } 45 | .br-circ-l { border-radius: 9999px; } 46 | .br-100-l { border-radius: 100%; } 47 | } 48 | 49 | -------------------------------------------------------------------------------- /site/waveform-new.svg: -------------------------------------------------------------------------------- 1 | 2 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /sass/_utilities.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | UTILITIES 4 | 5 | */ 6 | 7 | /* 8 | * The Media Object 9 | * Built by @stubornella 10 | * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ 11 | * 12 | *
13 | * 14 | * 15 | * me 16 | * 17 | * 18 | *
19 | * @Stubbornella 14 minutes ago 20 | *
21 | * 22 | *
23 | */ 24 | 25 | 26 | 27 | /* 28 | * The Flag Object 29 | * Built by @csswizzrdry 30 | * http://csswizardry.com/2013/05/the-flag-object/ 31 | * 32 | * 33 | * Use to vertically center text against an image. 34 | * 35 | *
36 | *
37 | * 38 | *
39 | *
40 | *

41 | *
42 | *
43 | * 44 | */ 45 | 46 | .flag { 47 | display: table; 48 | width: 100%; 49 | } 50 | 51 | .flag--image, 52 | .flag--body { 53 | display: table-cell; 54 | vertical-align: middle; 55 | 56 | .flag--top & { 57 | vertical-align: top; 58 | } 59 | 60 | .flag--bottom & { 61 | vertical-align: bottom; 62 | } 63 | 64 | } 65 | 66 | .flag--image { 67 | padding-right: 10px; 68 | 69 | > img { 70 | display: block; 71 | max-width: none; 72 | } 73 | 74 | .flag--rev & { 75 | padding-right: 0; 76 | padding-left: 10px; 77 | } 78 | 79 | } 80 | 81 | .flag--body { 82 | width: 100%; 83 | } 84 | 85 | -------------------------------------------------------------------------------- /sass/_borders.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | BORDER BASE 4 | 5 | Legend 6 | 7 | a = all 8 | t = top 9 | r = right 10 | b = bottom 11 | l = left 12 | 13 | */ 14 | 15 | .ba { border-style: solid; border-width: 1px; } 16 | .bt { border-style: solid; border-left-width: 1px; } 17 | .br { border-style: solid; border-right-width: 1px; } 18 | .bb { border-style: solid; border-bottom-width: 1px; } 19 | .bl { border-style: solid; border-left-width: 1px; } 20 | .bln { border-style: solid; border-left-width: 0; } 21 | .brn { border-style: solid; border-right-width: 0; } 22 | .btn { border-style: solid; border-top-width: 0; } 23 | 24 | @include break(not-small) { 25 | .ba-ns { border-style: solid; border-width: 1px; } 26 | .bt-ns { border-style: solid; border-left-width: 1px; } 27 | .br-ns { border-style: solid; border-right-width: 1px; } 28 | .bb-ns { border-style: solid; border-bottom-width: 1px; } 29 | .bl-ns { border-style: solid; border-left-width: 1px; } 30 | } 31 | 32 | @include break(medium) { 33 | .ba-m { border-style: solid; border-width: 1px; } 34 | .bt-m { border-style: solid; border-left-width: 1px; } 35 | .br-m { border-style: solid; border-right-width: 1px; } 36 | .bb-m { border-style: solid; border-bottom-width: 1px; } 37 | .bl-m { border-style: solid; border-left-width: 1px; } 38 | } 39 | 40 | @include break(large) { 41 | .ba-l { border-style: solid; border-width: 1px; } 42 | .bt-l { border-style: solid; border-left-width: 1px; } 43 | .br-l { border-style: solid; border-right-width: 1px; } 44 | .bb-l { border-style: solid; border-bottom-width: 1px; } 45 | .bl-l { border-style: solid; border-left-width: 1px; } 46 | } 47 | 48 | -------------------------------------------------------------------------------- /sass/_vertical_align.scss: -------------------------------------------------------------------------------- 1 | /* 2 | VERTICAL ALIGN 3 | */ 4 | 5 | .v-base { vertical-align: baseline; } 6 | .v-sub { vertical-align: sub; } 7 | .v-sup { vertical-align: super; } 8 | .v-txt-top { vertical-align: text-top; } 9 | .v-txt-btm { vertical-align: text-bottom; } 10 | .v-mid { vertical-align: middle; } 11 | .v-top { vertical-align: top; } 12 | .v-btm { vertical-align: bottom; } 13 | 14 | @include break(not-small) { 15 | .v-base-ns { vertical-align: baseline; } 16 | .v-sub-ns { vertical-align: sub; } 17 | .v-sup-ns { vertical-align: super; } 18 | .v-txt-top-ns { vertical-align: text-top; } 19 | .v-txt-btm-ns { vertical-align: text-bottom; } 20 | .v-mid-ns { vertical-align: middle; } 21 | .v-top-ns { vertical-align: top; } 22 | .v-btm-ns { vertical-align: bottom; } 23 | } 24 | 25 | @include break(medium) { 26 | .v-base-m { vertical-align: baseline; } 27 | .v-sub-m { vertical-align: sub; } 28 | .v-sup-m { vertical-align: super; } 29 | .v-txt-top-m { vertical-align: text-top; } 30 | .v-txt-btm-m { vertical-align: text-bottom; } 31 | .v-mid-m { vertical-align: middle; } 32 | .v-top-m { vertical-align: top; } 33 | .v-btm-m { vertical-align: bottom; } 34 | } 35 | 36 | @include break(large) { 37 | .v-base-l { vertical-align: baseline; } 38 | .v-sub-l { vertical-align: sub; } 39 | .v-sup-l { vertical-align: super; } 40 | .v-txt-top-l { vertical-align: text-top; } 41 | .v-txt-btm-l { vertical-align: text-bottom; } 42 | .v-mid-l { vertical-align: middle; } 43 | .v-top-l { vertical-align: top; } 44 | .v-btm-l { vertical-align: bottom; } 45 | } 46 | 47 | -------------------------------------------------------------------------------- /sass/_display.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | DISPLAY 4 | 5 | - Mobile First 6 | - Breakpoint: not-small 7 | - Breakpoint: medium 8 | - Breakpoint: large 9 | 10 | */ 11 | 12 | .dn { display: none; } 13 | .di { display: inline; } 14 | .db { display: block; } 15 | .dib { display: inline-block; } 16 | .dit { display: inline-table; } 17 | .dt { display: table; } 18 | .dtc { display: table-cell; } 19 | .dtcol { display: table-column; } 20 | .dtcolg { display: table-column-group; } 21 | 22 | @include break(not-small) { 23 | .dn-ns { display: none; } 24 | .di-ns { display: inline; } 25 | .db-ns { display: block; } 26 | .dib-ns { display: inline-block; } 27 | .dit-ns { display: inline-table; } 28 | .dt-ns { display: table; } 29 | .dtc-ns { display: table-cell; } 30 | .dtcol-ns { display: table-column; } 31 | .dtcolg-ns { display: table-column-group; } 32 | } 33 | 34 | @include break(medium) { 35 | .dn-m { display: none; } 36 | .di-m { display: inline; } 37 | .db-m { display: block; } 38 | .dib-m { display: inline-block; } 39 | .dit-m { display: inline-table; } 40 | .dt-m { display: table; } 41 | .dtc-m { display: table-cell; } 42 | .dtcol-m { display: table-column; } 43 | .dtcolg-m { display: table-column-group; } 44 | } 45 | 46 | @include break(large) { 47 | .dn-l { display: none; } 48 | .di-l { display: inline; } 49 | .db-l { display: block; } 50 | .dib-l { display: inline-block; } 51 | .dit-l { display: inline-table; } 52 | .dt-l { display: table; } 53 | .dtc-l { display: table-cell; } 54 | .dtcol-l { display: table-column; } 55 | .dtcolg-l { display: table-column-group; } 56 | } 57 | 58 | -------------------------------------------------------------------------------- /sass/_margins.scss: -------------------------------------------------------------------------------- 1 | // Margins 2 | 3 | .m0 { margin: 0; } 4 | .mb0 { margin-bottom: 0; } 5 | 6 | .m1 { margin: 1rem; } 7 | .mt1 { margin-top: 1rem; } 8 | .mr1 { margin-right: 1rem; } 9 | .mb1 { margin-bottom: 1rem; } 10 | .ml1 { margin-left: 1rem; } 11 | 12 | .m2 { margin: 2rem; } 13 | .mt2 { margin-top: 2rem; } 14 | .mr2 { margin-right: 2rem; } 15 | .mb2 { margin-bottom: 2rem; } 16 | .ml2 { margin-left: 2rem; } 17 | 18 | .m3 { margin: 3rem; } 19 | .mt3 { margin-top: 3rem; } 20 | .mr3 { margin-right: 3rem; } 21 | .mb3 { margin-bottom: 3rem; } 22 | .ml3 { margin-left: 3rem; } 23 | 24 | .m4 { margin: 4rem; } 25 | .mt4 { margin-top: 4rem; } 26 | .mr4 { margin-right: 4rem; } 27 | .mb4 { margin-bottom: 4rem; } 28 | .ml4 { margin-left: 4rem; } 29 | 30 | 31 | // Wrapper for horizontally centering elements with a fixed width 32 | // Use .wrap in conjunction with the .measure classes to center columns 33 | .wrap { margin-right: auto; margin-left: auto; } 34 | 35 | 36 | // Responsive margins 37 | 38 | .m-responsive { margin: 2rem; } 39 | .mt-responsive { margin-top: 2rem; } 40 | .mr-responsive { margin-right: 2rem; } 41 | .mb-responsive { margin-bottom: 2rem; } 42 | .ml-responsive { margin-left: 2rem; } 43 | 44 | @media (min-width: 48em) and (max-width: 64em) { 45 | .m-responsive { margin: 3rem; } 46 | .mt-responsive { margin-top: 3rem; } 47 | .mr-responsive { margin-right: 3rem; } 48 | .mb-responsive { margin-bottom: 3rem; } 49 | .ml-responsive { margin-left: 3rem; } 50 | } 51 | 52 | @media (min-width: 64em) { 53 | .m-responsive { margin: 4rem; } 54 | .mt-responsive { margin-top: 4rem; } 55 | .mr-responsive { margin-right: 4rem; } 56 | .mb-responsive { margin-bottom: 4rem; } 57 | .ml-responsive { margin-left: 4rem; } 58 | } 59 | 60 | -------------------------------------------------------------------------------- /site/_margins.scss: -------------------------------------------------------------------------------- 1 | // Margins 2 | 3 | .m0 { margin: 0; } 4 | .mb0 { margin-bottom: 0; } 5 | 6 | .m1 { margin: 1rem; } 7 | .mt1 { margin-top: 1rem; } 8 | .mr1 { margin-right: 1rem; } 9 | .mb1 { margin-bottom: 1rem; } 10 | .ml1 { margin-left: 1rem; } 11 | 12 | .m2 { margin: 2rem; } 13 | .mt2 { margin-top: 2rem; } 14 | .mr2 { margin-right: 2rem; } 15 | .mb2 { margin-bottom: 2rem; } 16 | .ml2 { margin-left: 2rem; } 17 | 18 | .m3 { margin: 3rem; } 19 | .mt3 { margin-top: 3rem; } 20 | .mr3 { margin-right: 3rem; } 21 | .mb3 { margin-bottom: 3rem; } 22 | .ml3 { margin-left: 3rem; } 23 | 24 | .m4 { margin: 4rem; } 25 | .mt4 { margin-top: 4rem; } 26 | .mr4 { margin-right: 4rem; } 27 | .mb4 { margin-bottom: 4rem; } 28 | .ml4 { margin-left: 4rem; } 29 | 30 | 31 | // Wrapper for horizontally centering elements with a fixed width 32 | // Use .wrap in conjunction with the .measure classes to center columns 33 | .wrap { margin-right: auto; margin-left: auto; } 34 | 35 | 36 | // Responsive margins 37 | 38 | .m-responsive { margin: 2rem; } 39 | .mt-responsive { margin-top: 2rem; } 40 | .mr-responsive { margin-right: 2rem; } 41 | .mb-responsive { margin-bottom: 2rem; } 42 | .ml-responsive { margin-left: 2rem; } 43 | 44 | @media (min-width: 48em) and (max-width: 64em) { 45 | .m-responsive { margin: 3rem; } 46 | .mt-responsive { margin-top: 3rem; } 47 | .mr-responsive { margin-right: 3rem; } 48 | .mb-responsive { margin-bottom: 3rem; } 49 | .ml-responsive { margin-left: 3rem; } 50 | } 51 | 52 | @media (min-width: 64em) { 53 | .m-responsive { margin: 4rem; } 54 | .mt-responsive { margin-top: 4rem; } 55 | .mr-responsive { margin-right: 4rem; } 56 | .mb-responsive { margin-bottom: 4rem; } 57 | .ml-responsive { margin-left: 4rem; } 58 | } 59 | 60 | -------------------------------------------------------------------------------- /sass/_skins.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | SKINS 4 | 5 | */ 6 | 7 | 8 | /* Grays */ 9 | 10 | .black { color: $near-black; } 11 | .dk-gray { color: $dark-gray; } 12 | .md-gray { color: $mid-gray; } 13 | .gray { color: $gray; } 14 | .silver { color: $silver; } 15 | .lt-silver { color: $light-silver; } 16 | .lt-gray { color: $light-gray; } 17 | .near-white { color: $near-white; } 18 | .white { color: $white!important; } 19 | 20 | 21 | /* Text colors */ 22 | 23 | .aqua { color: $aqua; } 24 | .blue { color: $blue; } 25 | .navy { color: $navy; } 26 | .teal { color: $teal; } 27 | .green { color: $green; } 28 | .olive { color: $olive; } 29 | .lime { color: $lime; } 30 | .yellow { color: $yellow; } 31 | .orange { color: $orange; } 32 | .red { color: $red; } 33 | .fuchsia { color: $fuchsia; } 34 | .purple { color: $purple; } 35 | .maroon { color: $maroon; } 36 | 37 | 38 | /* Background colors */ 39 | .bg-black { background-color: $near-black; } 40 | .bg-dk-gray { background-color: $dark-gray; } 41 | .bg-md-gray { background-color: $mid-gray; } 42 | .bg-gray { background-color: $gray; } 43 | .bg-silver { background-color: $silver; } 44 | .bg-lt-silver { background-color: $light-silver; } 45 | .bg-lt-gray { background-color: $light-gray; } 46 | .bg-near-white { background-color: $near-white; } 47 | .bg-white { background-color: $white!important; } 48 | 49 | .bg-aqua { background-color: $aqua; } 50 | .bg-blue { background-color: $blue; } 51 | .bg-navy { background-color: $navy; } 52 | .bg-teal { background-color: $teal; } 53 | .bg-green { background-color: $green; } 54 | .bg-olive { background-color: $olive; } 55 | .bg-lime { background-color: $lime; } 56 | .bg-yellow { background-color: $yellow; } 57 | .bg-orange { background-color: $orange; } 58 | .bg-red { background-color: $red; } 59 | .bg-fuchsia { background-color: $fuchsia; } 60 | .bg-purple { background-color: $purple; } 61 | .bg-maroon { background-color: $maroon; } 62 | 63 | -------------------------------------------------------------------------------- /site/_type.scss: -------------------------------------------------------------------------------- 1 | // Type 2 | 3 | body { 4 | font-family: 'Open Sans', Helvetica, sans-serif; 5 | line-height: 1.5rem; 6 | font-weight: 400; 7 | } 8 | 9 | h1, h2, h3, h4, h5, h6 { font-weight: 600; } 10 | 11 | // Base Type Scale 12 | 13 | h1, .h1, .f1 { 14 | font-size: 2.25rem; 15 | line-height: 3rem; 16 | } 17 | 18 | h2, .h2, .f1 { 19 | font-size: 1.5rem; 20 | line-height: 2rem; 21 | } 22 | 23 | h3, .h3, .f3 { 24 | font-size: 1.25rem; 25 | line-height: 2rem; 26 | } 27 | 28 | p, .p, .f4, h4, .h4, h5, h6, dl, ol, ul { 29 | font-size: 1rem; 30 | line-height: 1.5rem; 31 | } 32 | 33 | small, .small, .f5, .h5 { 34 | font-size: .875rem; 35 | line-height: 1.5rem; 36 | } 37 | 38 | 39 | // Responsive Type Scale 40 | 41 | @media (min-width: 48em) { 42 | .h1 { 43 | font-size: 3rem; 44 | line-height: 4rem; 45 | } 46 | .h2 { 47 | font-size: 2rem; 48 | line-height: 3rem; 49 | } 50 | .h3 { 51 | font-size: 1.5rem; 52 | line-height: 2rem; 53 | } 54 | .p, .h4 { 55 | font-size: 1.125rem; 56 | line-height: 2rem; 57 | } 58 | .small { 59 | font-size: 1rem; 60 | } 61 | } 62 | 63 | //@media (min-width: 64em) { 64 | // .h1 { 65 | // font-size: 6rem; 66 | // line-height: 8rem; 67 | // } 68 | // .h2 { 69 | // font-size: 3rem; 70 | // line-height: 4rem; 71 | // } 72 | //} 73 | 74 | 75 | // Utilities 76 | 77 | strong, .bold { font-weight: 600; } 78 | .regular { font-weight: normal; } 79 | .italic { font-style: italic; } 80 | .caps { text-transform: uppercase; letter-spacing: .2em; } 81 | .center { text-align: center; } 82 | .right-align { text-align: right; } 83 | 84 | 85 | // Typographical Measure 86 | // Use with the .wrap class to center container 87 | 88 | .measure { max-width: 48rem; } 89 | .measure-narrow { max-width: 32rem; } 90 | .measure-wide { max-width: 60rem; } 91 | 92 | 93 | // Leading utilities to control line-height 94 | 95 | .leading-1 { line-height: 1.5rem; } 96 | .leading-2 { line-height: 2rem; } 97 | .leading-3 { line-height: 3rem; } 98 | .leading-4 { line-height: 4rem; } 99 | 100 | .icon { 101 | width: 1em; 102 | height: 1em; 103 | vertical-align: -.0625em; 104 | } 105 | 106 | -------------------------------------------------------------------------------- /site/plangular-waveform.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 31 | 32 | -------------------------------------------------------------------------------- /sass/_widths.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | WIDTHS 4 | 5 | */ 6 | 7 | /* Width Scale */ 8 | 9 | .wi1 { width: 1rem; } 10 | .wi2 { width: 2rem; } 11 | .wi3 { width: 4rem; } 12 | .wi4 { width: 8rem; } 13 | .wi5 { width: 16rem; } 14 | 15 | .wi-10 { width: 10%; } 16 | .wi-20 { width: 20%; } 17 | .wi-25 { width: 25%; } 18 | .wi-40 { width: 40%; } 19 | .wi-50 { width: 50%; } 20 | .wi-60 { width: 60%; } 21 | .wi-75 { width: 75%; } 22 | .wi-80 { width: 80%; } 23 | .wi-100 { width: 100%; } 24 | 25 | /* Width String Properties */ 26 | 27 | .wi-bb { width: border-box; } 28 | .wi-cb { width: content-box; } 29 | .wi-mx { width: max-content; } 30 | .wi-mn { width: min-content; } 31 | .wi-av { width: available; } 32 | .wi-fc { width: fit-content; } 33 | .wi-at { width: auto; } 34 | .wi-i { width: inherit; } 35 | 36 | @include break(not-small) { 37 | .wi1-ns { width: 1rem; } 38 | .wi2-ns { width: 2rem; } 39 | .wi3-ns { width: 4rem; } 40 | .wi4-ns { width: 8rem; } 41 | .wi5-ns { width: 16rem; } 42 | .wi-10-ns { width: 10%; } 43 | .wi-20-ns { width: 20%; } 44 | .wi-25-ns { width: 25%; } 45 | .wi-40-ns { width: 40%; } 46 | .wi-50-ns { width: 50%; } 47 | .wi-60-ns { width: 60%; } 48 | .wi-75-ns { width: 75%; } 49 | .wi-80-ns { width: 80%; } 50 | .wi-100-ns { width: 100%; } 51 | .wi-bb-ns { width: border-box; } 52 | .wi-cb-ns { width: content-box; } 53 | .wi-mx-ns { width: max-content; } 54 | .wi-mn-ns { width: min-content; } 55 | .wi-av-ns { width: available; } 56 | .wi-fc-ns { width: fit-content; } 57 | .wi-at-ns { width: auto; } 58 | .wi-i-ns { width: inherit; } 59 | } 60 | 61 | @include break(medium) { 62 | .wi1-m { width: 1rem; } 63 | .wi2-m { width: 2rem; } 64 | .wi3-m { width: 4rem; } 65 | .wi4-m { width: 8rem; } 66 | .wi5-m { width: 16rem; } 67 | .wi-10-m { width: 10%; } 68 | .wi-20-m { width: 20%; } 69 | .wi-25-m { width: 25%; } 70 | .wi-40-m { width: 40%; } 71 | .wi-50-m { width: 50%; } 72 | .wi-60-m { width: 60%; } 73 | .wi-75-m { width: 75%; } 74 | .wi-80-m { width: 80%; } 75 | .wi-100-m { width: 100%; } 76 | .wi-bb-m { width: border-box; } 77 | .wi-cb-m { width: content-box; } 78 | .wi-mx-m { width: max-content; } 79 | .wi-mn-m { width: min-content; } 80 | .wi-av-m { width: available; } 81 | .wi-fc-m { width: fit-content; } 82 | .wi-at-m { width: auto; } 83 | .wi-i-m { width: inherit; } 84 | } 85 | 86 | @include break(large) { 87 | .wi1-l { width: 1rem; } 88 | .wi2-l { width: 2rem; } 89 | .wi3-l { width: 4rem; } 90 | .wi4-l { width: 8rem; } 91 | .wi5-l { width: 16rem; } 92 | .wi-10-l { width: 10%; } 93 | .wi-20-l { width: 20%; } 94 | .wi-25-l { width: 25%; } 95 | .wi-40-l { width: 40%; } 96 | .wi-50-l { width: 50%; } 97 | .wi-60-l { width: 60%; } 98 | .wi-75-l { width: 75%; } 99 | .wi-80-l { width: 80%; } 100 | .wi-100-l { width: 100%; } 101 | .wi-bb-l { width: border-box; } 102 | .wi-cb-l { width: content-box; } 103 | .wi-mx-l { width: max-content; } 104 | .wi-mn-l { width: min-content; } 105 | .wi-av-l { width: available; } 106 | .wi-fc-l { width: fit-content; } 107 | .wi-at-l { width: auto; } 108 | .wi-i-l { width: inherit; } 109 | } 110 | 111 | -------------------------------------------------------------------------------- /sass/_max_widths.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | MAX WIDTHS 4 | 5 | */ 6 | 7 | .mx-wi-100 { max-width: 100%; } 8 | .mx-wi-75 { max-width: 75%; } 9 | .mx-wi-50 { max-width: 50%; } 10 | .mx-wi-25 { max-width: 25%; } 11 | 12 | .mx-wi1 { max-width: 1rem; } 13 | .mx-wi2 { max-width: 2rem; } 14 | .mx-wi3 { max-width: 4rem; } 15 | .mx-wi4 { max-width: 8rem; } 16 | .mx-wi5 { max-width: 16rem; } 17 | .mx-wi6 { max-width: 32rem; } 18 | .mx-wi7 { max-width: 48rem; } 19 | .mx-wi8 { max-width: 64rem; } 20 | .mx-wi9 { max-width: 96rem; } 21 | .mx-wi10 { max-width: 128rem; } 22 | 23 | .mx-wi-none { max-width: none; } 24 | .mx-wi-max { max-width: max-content; } 25 | .mx-wi-min { max-width: min-content; } 26 | .mx-wi-fit { max-width: fit-content; } 27 | .mx-wi-fill { max-width: fill-available; } 28 | 29 | @include break(not-small) { 30 | .mx-wi-100-ns { max-width: 100%; } 31 | .mx-wi-75-ns { max-width: 75%; } 32 | .mx-wi-50-ns { max-width: 50%; } 33 | .mx-wi-25-ns { max-width: 25%; } 34 | 35 | .mx-wi1-ns { max-width: 1rem; } 36 | .mx-wi2-ns { max-width: 2rem; } 37 | .mx-wi3-ns { max-width: 4rem; } 38 | .mx-wi4-ns { max-width: 8rem; } 39 | .mx-wi5-ns { max-width: 16rem; } 40 | .mx-wi6-ns { max-width: 32rem; } 41 | .mx-wi7-ns { max-width: 48rem; } 42 | .mx-wi8-ns { max-width: 64rem; } 43 | .mx-wi9-ns { max-width: 96rem; } 44 | .mx-wi10-ns { max-width: 128rem; } 45 | 46 | .mx-wi-none-ns { max-width: none; } 47 | .mx-wi-max-ns { max-width: max-content; } 48 | .mx-wi-min-ns { max-width: min-content; } 49 | .mx-wi-fit-ns { max-width: fit-content; } 50 | .mx-wi-fill-ns { max-width: fill-available; } 51 | } 52 | 53 | @include break(medium) { 54 | .mx-wi-100-m { max-width: 100%; } 55 | .mx-wi-75-m { max-width: 75%; } 56 | .mx-wi-50-m { max-width: 50%; } 57 | .mx-wi-25-m { max-width: 25%; } 58 | 59 | .mx-wi1-m { max-width: 1rem; } 60 | .mx-wi2-m { max-width: 2rem; } 61 | .mx-wi3-m { max-width: 4rem; } 62 | .mx-wi4-m { max-width: 8rem; } 63 | .mx-wi5-m { max-width: 16rem; } 64 | .mx-wi6-m { max-width: 32rem; } 65 | .mx-wi7-m { max-width: 48rem; } 66 | .mx-wi8-m { max-width: 64rem; } 67 | .mx-wi9-m { max-width: 96rem; } 68 | .mx-wi10-m { max-width: 128rem; } 69 | 70 | .mx-wi-none-m { max-width: none; } 71 | .mx-wi-max-m { max-width: max-content; } 72 | .mx-wi-min-m { max-width: min-content; } 73 | .mx-wi-fit-m { max-width: fit-content; } 74 | .mx-wi-fill-m { max-width: fill-available; } 75 | } 76 | 77 | @include break(large) { 78 | .mx-wi-100-l { max-width: 100%; } 79 | .mx-wi-75-l { max-width: 75%; } 80 | .mx-wi-50-l { max-width: 50%; } 81 | .mx-wi-25-l { max-width: 25%; } 82 | 83 | .mx-wi1-l { max-width: 1rem; } 84 | .mx-wi2-l { max-width: 2rem; } 85 | .mx-wi3-l { max-width: 4rem; } 86 | .mx-wi4-l { max-width: 8rem; } 87 | .mx-wi5-l { max-width: 16rem; } 88 | .mx-wi6-l { max-width: 32rem; } 89 | .mx-wi7-l { max-width: 48rem; } 90 | .mx-wi8-l { max-width: 64rem; } 91 | .mx-wi9-l { max-width: 96rem; } 92 | .mx-wi10-l { max-width: 128rem; } 93 | 94 | .mx-wi-none-l { max-width: none; } 95 | .mx-wi-max-l { max-width: max-content; } 96 | .mx-wi-min-l { max-width: min-content; } 97 | .mx-wi-fit-l { max-width: fit-content; } 98 | .mx-wi-fill-l { max-width: fill-available; } 99 | } 100 | 101 | -------------------------------------------------------------------------------- /site/_theme.scss: -------------------------------------------------------------------------------- 1 | // Plangular theme 2 | 3 | 4 | //$dark-gray: #1c2226; 5 | //$blue: #00bbdd; 6 | //$light-gray: #eaeff0; 7 | //$mid-gray: #a0aab0; 8 | 9 | $blue: #0096cc; 10 | $light-gray: #eaeff0; 11 | $mid-gray: #708690; 12 | $dark-gray: #405660; 13 | 14 | //$blue: #0096cc; 15 | // 16 | //$light-gray: #eee; 17 | //$mid-gray: #777; 18 | //$dark-gray: #333; 19 | 20 | $red: #f52; 21 | $green: #0f6; 22 | //$orange: #fc2; 23 | 24 | 25 | .white { color: #fff; } 26 | .blue { color: $blue; } 27 | .light-gray { color: $light-gray; } 28 | .mid-gray { color: $mid-gray; } 29 | .dark-gray { color: $dark-gray; } 30 | 31 | .red { color: $red; } 32 | .green { color: $green; } 33 | //.orange { color: $orange; } 34 | 35 | .bg-white { background-color: #fff; } 36 | .bg-blue { background-color: $blue; } 37 | .bg-light-gray { background-color: $light-gray; } 38 | .bg-mid-gray { background-color: $mid-gray; } 39 | .bg-dark-gray { background-color: $dark-gray; } 40 | 41 | .bg-red { background-color: $red; } 42 | .bg-green { background-color: $green; } 43 | //.bg-orange { background-color: $orange; } 44 | 45 | 46 | // Base theme styles 47 | 48 | body { 49 | color: $dark-gray; 50 | background-color: #fff; 51 | } 52 | 53 | a { 54 | color: $blue; 55 | text-decoration: none; 56 | &:hover { 57 | color: darken($blue, 10%); 58 | } 59 | } 60 | 61 | 62 | // Buttons 63 | 64 | .button { 65 | border-radius: .25rem; 66 | transition-duration: .2s; 67 | transition-timing-function: ease; 68 | transition: box-shadow , background-color; 69 | -webkit-font-smoothing: antialiased; 70 | &:hover, 71 | &:focus { 72 | outline: none; 73 | } 74 | } 75 | 76 | .button-blue { 77 | color: #fff; 78 | background-color: $blue; 79 | &:hover { 80 | color: #fff; 81 | background-color: lighten($blue, 10%); 82 | box-shadow: 0 0 0 2px rgba(lighten($blue, 10%), .5); 83 | } 84 | } 85 | 86 | .button-box { 87 | color: $green; 88 | box-shadow: inset 0 0 0 2px $green; 89 | -webkit-transition: background .2s ease, box-shadow .2s ease, -webkit-transform .2s ease; 90 | transition: background .2s ease, box-shadow .2s ease, transform .2s ease; 91 | svg { 92 | fill: $green; 93 | } 94 | &:hover { 95 | color: $dark-gray; 96 | background-color: $green; 97 | box-shadow: 0 0 0 4px $dark-gray, 0 0 0 8px rgba($green, .5); 98 | -webkit-transform: scale(1.05); 99 | transform: scale(1.05); 100 | svg { 101 | fill: $dark-gray; 102 | } 103 | } 104 | } 105 | 106 | .button-green { 107 | color: $dark-gray; 108 | background-color: $green; 109 | -webkit-transition: box-shadow .2s ease, -webkit-transform .2s ease; 110 | transition: box-shadow .2s ease, transform .2s ease; 111 | &:hover, &:focus { 112 | color: $dark-gray; 113 | outline: none; 114 | box-shadow: 0 0 0 4px $dark-gray, 0 0 0 8px rgba($green, .5); 115 | -webkit-transform: scale(1.05); 116 | transform: scale(1.05); 117 | } 118 | &:active { 119 | -webkit-transform: scale(1); 120 | transform: scale(1); 121 | box-shadow: inset 0 0 8px $dark-gray; 122 | } 123 | } 124 | 125 | 126 | // Borders 127 | 128 | .border { 129 | border-style: solid; 130 | border-width: 1px; 131 | } 132 | .border-top { 133 | border-top-style: solid; 134 | border-top-width: 1px; 135 | } 136 | 137 | .border-light-gray { 138 | border-color: $light-gray; 139 | } 140 | 141 | // Utilities 142 | .rounded { border-radius: .25rem; } 143 | .transition-all { transition: all .2s ease; } 144 | 145 | -------------------------------------------------------------------------------- /sass/_position.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | POSITIONING 4 | 5 | */ 6 | 7 | .pos-stat { position: static; } 8 | .pos-rel { position: relative; } 9 | .pos-abs { position: absolute; } 10 | .pos-fix { position: fixed; } 11 | 12 | /* Values */ 13 | 14 | .top-0 { top: 0; } 15 | .left-0 { left: 0; } 16 | .right-0 { right: 0; } 17 | .bottom-0 { bottom: 0; } 18 | 19 | .top-1 { top: 1rem; } 20 | .left-1 { left: 1rem; } 21 | .right-1 { right: 1rem; } 22 | .bottom-1 { bottom: 1rem; } 23 | 24 | .top-2 { top: 2rem; } 25 | .left-2 { left: 2rem; } 26 | .right-2 { right: 2rem; } 27 | .bottom-2 { bottom: 2rem; } 28 | 29 | .top-4 { top: 4rem; } 30 | .left-4 { left: 4rem; } 31 | .right-4 { right: 4rem; } 32 | .bottom-4 { bottom: 4rem; } 33 | 34 | /* Top Percentage based scale */ 35 | 36 | .top-auto { top: auto; } 37 | .top-i { top: inherit; ;} 38 | 39 | .center { margin: 0 auto; } 40 | 41 | @include break(not-small) { 42 | .pos-stat-ns { position: static; } 43 | .pos-rel-ns { position: relative; } 44 | .pos-abs-ns { position: absolute; } 45 | .pos-fix-ns { position: fixed; } 46 | .top-0-ns { top: 0; } 47 | .left-0-ns { left: 0; } 48 | .right-0-ns { right: 0; } 49 | .bottom-0-ns { bottom: 0; } 50 | .top-1-ns { top: 1rem; } 51 | .left-1-ns { left: 1rem; } 52 | .right-1-ns { right: 1rem; } 53 | .bottom-1-ns { bottom: 1rem; } 54 | .top-2-ns { top: 2rem; } 55 | .left-2-ns { left: 2rem; } 56 | .right-2-ns { right: 2rem; } 57 | .bottom-2-ns { bottom: 2rem; } 58 | .top-4-ns { top: 4rem; } 59 | .left-4-ns { left: 4rem; } 60 | .right-4-ns { right: 4rem; } 61 | .bottom-4-ns { bottom: 4rem; } 62 | .top-auto-ns { top: auto; } 63 | .top-i-ns { top: inherit; ;} 64 | .center-ns { margin: 0 auto; } 65 | } 66 | 67 | @include break(medium) { 68 | .pos-stat-m { position: static; } 69 | .pos-rel-m { position: relative; } 70 | .pos-abs-m { position: absolute; } 71 | .pos-fix-m { position: fixed; } 72 | .top-0-m { top: 0; } 73 | .left-0-m { left: 0; } 74 | .right-0-m { right: 0; } 75 | .bottom-0-m { bottom: 0; } 76 | .top-1-m { top: 1rem; } 77 | .left-1-m { left: 1rem; } 78 | .right-1-m { right: 1rem; } 79 | .bottom-1-m { bottom: 1rem; } 80 | .top-2-m { top: 2rem; } 81 | .left-2-m { left: 2rem; } 82 | .right-2-m { right: 2rem; } 83 | .bottom-2-m { bottom: 2rem; } 84 | .top-4-m { top: 4rem; } 85 | .left-4-m { left: 4rem; } 86 | .right-4-m { right: 4rem; } 87 | .bottom-4-m { bottom: 4rem; } 88 | .top-auto-m { top: auto; } 89 | .top-i-m { top: inherit; ;} 90 | .center-m { margin: 0 auto; } 91 | } 92 | 93 | @include break(large) { 94 | .pos-stat-l { position: static; } 95 | .pos-rel-l { position: relative; } 96 | .pos-abs-l { position: absolute; } 97 | .pos-fix-l { position: fixed; } 98 | .top-0-l { top: 0; } 99 | .left-0-l { left: 0; } 100 | .right-0-l { right: 0; } 101 | .bottom-0-l { bottom: 0; } 102 | .top-1-l { top: 1rem; } 103 | .left-1-l { left: 1rem; } 104 | .right-1-l { right: 1rem; } 105 | .bottom-1-l { bottom: 1rem; } 106 | .top-2-l { top: 2rem; } 107 | .left-2-l { left: 2rem; } 108 | .right-2-l { right: 2rem; } 109 | .bottom-2-l { bottom: 2rem; } 110 | .top-4-l { top: 4rem; } 111 | .left-4-l { left: 4rem; } 112 | .right-4-l { right: 4rem; } 113 | .bottom-4-l { bottom: 4rem; } 114 | .top-auto-l { top: auto; } 115 | .top-i-l { top: inherit; ;} 116 | .center-l { margin: 0 auto; } 117 | } 118 | 119 | -------------------------------------------------------------------------------- /sass/_plangular_site.scss: -------------------------------------------------------------------------------- 1 | // Custom styles for Plangular site 2 | 3 | html, body { height: 100%; } 4 | .min-h100 { min-height: 100%; } 5 | .h100 { height: 100%; } 6 | .table { 7 | display: table; 8 | table-layout: fixed; 9 | width: 100%; 10 | } 11 | 12 | .table-cell { 13 | display: table-cell; 14 | vertical-align: middle; 15 | } 16 | 17 | .waveform { 18 | width: 100%; 19 | stroke-width: .25; 20 | fill: none; 21 | } 22 | .waveform-large { 23 | height: 75%; 24 | top: 12.5%; 25 | stroke: $green; 26 | } 27 | .waveform-small { 28 | width: 100%; 29 | stroke: rgba($blue,.2); 30 | height: 150%; 31 | } 32 | .glow-wrap { 33 | opacity: 0; 34 | } 35 | @-webkit-keyframes glow { 36 | 0% { opacity: 0; -webkit-transform: scaleY(.2); } 37 | 5% { opacity: .9; -webkit-transform: scaleY(1); } 38 | 100% { opacity: 0; -webkit-transform: scaleY(.2); } 39 | } 40 | @keyframes glow { 41 | 0% { opacity: 0; transform: scaleY(.2); } 42 | 5% { opacity: .9; transform: scaleY(1); } 43 | 100% { opacity: 0; transform: scaleY(.2); } 44 | } 45 | .geo-glow { 46 | -webkit-animation: glow 6s linear; 47 | animation: glow 6s linear; 48 | } 49 | 50 | //.px8 { padding-right: 8rem; padding-left: 8rem; } 51 | .px8 { padding-right: 20%; padding-left: 20%; } 52 | 53 | .button-geo { 54 | .geo-16 { 55 | position: relative; 56 | top: 2px; 57 | } 58 | .geo-24 { 59 | position: relative; 60 | top: 4px; 61 | } 62 | } 63 | .geo-16 { width: 16px; height: 16px; } 64 | .geo-24 { width: 24px; height: 24px; } 65 | .geo-32 { width: 32px; height: 32px; } 66 | .geo-white { fill: #fff; } 67 | .geo-dark-gray { fill: $dark-gray; } 68 | 69 | .aspect-16o9 { 70 | width: 100%; 71 | height: 0; 72 | padding-bottom: 56.25%; 73 | } 74 | 75 | .plangular-button { 76 | text-align: center; 77 | display: inline-block; 78 | width: 8em; 79 | height: 2em; 80 | line-height: 2em; 81 | max-width: 100%; 82 | svg { 83 | vertical-align: -.125em; 84 | } 85 | } 86 | 87 | .bg-cover { background-size: cover; } 88 | .bg-center { background-position: center; } 89 | 90 | .outline, .outline * { outline: 1px solid red; } 91 | 92 | .shadow-darken { box-shadow: inset 0 -32px 192px rgba(0,0,0,0.9); } 93 | 94 | .progress-thin { 95 | height: 2px; 96 | margin-top: 23px; 97 | } 98 | 99 | .progress { 100 | width: 100%; 101 | -webkit-appearance: none; 102 | } 103 | .progress::-webkit-progress-bar { 104 | -webkit-appearance: none; 105 | background-color: #eee; 106 | } 107 | .progress::-webkit-progress-value { -webkit-appearance: none; } 108 | 109 | .progress-gray::-webkit-progress-value { background-color: #999; } 110 | .progress-gray-alt::-webkit-progress-bar { background-color: #ddd; } 111 | 112 | .progress-white::-webkit-progress-value { background-color: #fff; } 113 | .progress-white::-webkit-progress-bar { background-color: rgba(255,255,255,.4); } 114 | 115 | 116 | 117 | .progress-link::-webkit-progress-value { background-color: #0cf; } 118 | .progress-green::-webkit-progress-value { background-color: #0c5; } 119 | 120 | .progress-white-bg::-webkit-progress-bar { 121 | background-color: #fff; 122 | } 123 | 124 | @-webkit-keyframes popin { 125 | 0% { -webkit-transform: scale(.2); } 126 | 80% { -webkit-transform: scale(1.1); } 127 | 100% { -webkit-transform: scale(1); } 128 | } 129 | @keyframes popin { 130 | 0% { transform: scale(.2); } 131 | 80% { transform: scale(1.1); } 132 | 100% { transform: scale(1); } 133 | } 134 | .anim-popin { 135 | -webkit-animation: popin .1s; 136 | animation: popin .1s; 137 | } 138 | 139 | -------------------------------------------------------------------------------- /site/_plangular-site.scss: -------------------------------------------------------------------------------- 1 | // Custom styles for Plangular site 2 | 3 | html, body { height: 100%; } 4 | .min-h100 { min-height: 100%; } 5 | .h100 { height: 100%; } 6 | .table { 7 | display: table; 8 | table-layout: fixed; 9 | width: 100%; 10 | } 11 | 12 | .table-cell { 13 | display: table-cell; 14 | vertical-align: middle; 15 | } 16 | 17 | .waveform { 18 | width: 100%; 19 | stroke-width: .25; 20 | fill: none; 21 | } 22 | .waveform-large { 23 | height: 75%; 24 | top: 12.5%; 25 | stroke: $green; 26 | } 27 | .waveform-small { 28 | width: 100%; 29 | stroke: rgba($blue,.2); 30 | height: 150%; 31 | } 32 | .glow-wrap { 33 | opacity: 0; 34 | } 35 | @-webkit-keyframes glow { 36 | 0% { opacity: 0; -webkit-transform: scaleY(.2); } 37 | 5% { opacity: .9; -webkit-transform: scaleY(1); } 38 | 100% { opacity: 0; -webkit-transform: scaleY(.2); } 39 | } 40 | @keyframes glow { 41 | 0% { opacity: 0; transform: scaleY(.2); } 42 | 5% { opacity: .9; transform: scaleY(1); } 43 | 100% { opacity: 0; transform: scaleY(.2); } 44 | } 45 | .geo-glow { 46 | -webkit-animation: glow 6s linear; 47 | animation: glow 6s linear; 48 | } 49 | 50 | //.px8 { padding-right: 8rem; padding-left: 8rem; } 51 | .px8 { padding-right: 20%; padding-left: 20%; } 52 | 53 | .button-geo { 54 | .geo-16 { 55 | position: relative; 56 | top: 2px; 57 | } 58 | .geo-24 { 59 | position: relative; 60 | top: 4px; 61 | } 62 | } 63 | .geo-16 { width: 16px; height: 16px; } 64 | .geo-24 { width: 24px; height: 24px; } 65 | .geo-32 { width: 32px; height: 32px; } 66 | .geo-white { fill: #fff; } 67 | .geo-dark-gray { fill: $dark-gray; } 68 | 69 | .aspect-16o9 { 70 | width: 100%; 71 | height: 0; 72 | padding-bottom: 56.25%; 73 | } 74 | 75 | .plangular-button { 76 | text-align: center; 77 | display: inline-block; 78 | width: 8em; 79 | height: 2em; 80 | line-height: 2em; 81 | max-width: 100%; 82 | svg { 83 | vertical-align: -.125em; 84 | } 85 | } 86 | 87 | .bg-cover { background-size: cover; } 88 | .bg-center { background-position: center; } 89 | 90 | .outline, .outline * { outline: 1px solid red; } 91 | 92 | .shadow-darken { box-shadow: inset 0 -32px 192px rgba(0,0,0,0.9); } 93 | 94 | .progress-thin { 95 | height: 2px; 96 | margin-top: 23px; 97 | } 98 | 99 | .progress { 100 | width: 100%; 101 | -webkit-appearance: none; 102 | } 103 | .progress::-webkit-progress-bar { 104 | -webkit-appearance: none; 105 | background-color: #eee; 106 | } 107 | .progress::-webkit-progress-value { -webkit-appearance: none; } 108 | 109 | .progress-gray::-webkit-progress-value { background-color: #999; } 110 | .progress-gray-alt::-webkit-progress-bar { background-color: #ddd; } 111 | 112 | .progress-white::-webkit-progress-value { background-color: #fff; } 113 | .progress-white::-webkit-progress-bar { background-color: rgba(255,255,255,.4); } 114 | 115 | 116 | 117 | .progress-link::-webkit-progress-value { background-color: #0cf; } 118 | .progress-green::-webkit-progress-value { background-color: #0c5; } 119 | 120 | .progress-white-bg::-webkit-progress-bar { 121 | background-color: #fff; 122 | } 123 | 124 | @-webkit-keyframes popin { 125 | 0% { -webkit-transform: scale(.2); } 126 | 80% { -webkit-transform: scale(1.1); } 127 | 100% { -webkit-transform: scale(1); } 128 | } 129 | @keyframes popin { 130 | 0% { transform: scale(.2); } 131 | 80% { transform: scale(1.1); } 132 | 100% { transform: scale(1); } 133 | } 134 | .anim-popin { 135 | -webkit-animation: popin .1s; 136 | animation: popin .1s; 137 | } 138 | 139 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Load plugins 2 | 3 | var gulp = require('gulp'), 4 | gutil = require('gulp-util'), 5 | watch = require('gulp-watch'), 6 | prefix = require('gulp-autoprefixer'), 7 | minifyCSS = require('gulp-minify-css'), 8 | sass = require('gulp-ruby-sass'), 9 | imagemin = require('gulp-imagemin'), 10 | svgmin = require('gulp-svgmin'), 11 | csslint = require('gulp-csslint'), 12 | size = require('gulp-size'), 13 | rename = require('gulp-rename'), 14 | browserSync = require('browser-sync'), 15 | browserReload = browserSync.reload; 16 | 17 | 18 | // Task to minify all css files in the css directory 19 | 20 | gulp.task('minify-css', function(){ 21 | gulp.src('./css/*.css') 22 | .pipe(minifyCSS({keepSpecialComments: 0})) 23 | .pipe(gulp.dest('./css/')); 24 | }); 25 | 26 | 27 | 28 | // Task to optmize and minify images 29 | 30 | gulp.task('minify-img', function() { 31 | return gulp.src('./img/**/*') 32 | .pipe((imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))) 33 | .pipe(gulp.dest('./img')); 34 | }); 35 | 36 | 37 | // Task to optimize and minify svg 38 | 39 | gulp.task('minify-svg', function(){ 40 | gulp.src('./img/svg') 41 | .pipe(svgmin()) 42 | .pipe(gulp.dest('./img/svg')); 43 | }); 44 | 45 | 46 | // Use csslint without box-sizing or compatible vendor prefixes (these 47 | // don't seem to be kept up to date on what to yell about) 48 | 49 | gulp.task('csslint', function(){ 50 | gulp.src('./css/*.css') 51 | .pipe(csslint({ 52 | 'compatible-vendor-prefixes': false, 53 | 'box-sizing': false 54 | })) 55 | .pipe(csslint.reporter()); 56 | 57 | }); 58 | 59 | 60 | // Task that compiles scss files down to good old css 61 | 62 | gulp.task('pre-process', function(){ 63 | gulp.src('./sass/beats.scss') 64 | .pipe(watch(function(files) { 65 | return files.pipe(sass({loadPath: ['./sass/'], style: "compact"})) 66 | .pipe(prefix()) 67 | .pipe(gulp.dest('./css/')) 68 | })); 69 | }); 70 | 71 | 72 | 73 | // Task that compiles scss files down to good old css 74 | gulp.task('pre-process', function(){ 75 | gulp.src('./sass/i.scss') 76 | .pipe(watch(function(files) { 77 | return files.pipe(sass()) 78 | .pipe(size({gzip: false, showFiles: true, title:'PRE-prefixed uncompressed css'})) 79 | .pipe(size({gzip: true, showFiles: true, title:'PRE-prefixed uncompressed css'})) 80 | .pipe(prefix()) 81 | .pipe(size({gzip: false, showFiles: true, title:'Prefixed uncompressed css'})) 82 | .pipe(size({gzip: true, showFiles: true, title:'Prefixed uncompressed css'})) 83 | .pipe(gulp.dest('css')) 84 | .pipe(browserSync.reload({stream:true})); 85 | })); 86 | }); 87 | 88 | 89 | // Initialize browser-sync which starts a static server also allows for 90 | // browsers to reload on filesave 91 | gulp.task('browser-sync', function() { 92 | browserSync.init(null, { 93 | server: { 94 | baseDir: "./" 95 | } 96 | }); 97 | }); 98 | 99 | gulp.task('bs-reload', function () { 100 | browserSync.reload(); 101 | }); 102 | 103 | 104 | /* 105 | DEFAULT TASK 106 | 107 | • Process sass and lints outputted css 108 | • Outputted css is run through autoprefixer 109 | • Sends updates to any files in directory to browser for 110 | automatic reloading 111 | 112 | */ 113 | gulp.task('default', ['pre-process', 'minify-css', 'bs-reload', 'browser-sync'], function(){ 114 | gulp.start('pre-process', 'csslint'); 115 | gulp.watch('sass/*.scss', ['pre-process', 'minify-css']); 116 | gulp.watch('css/i.css', ['bs-reload']); 117 | gulp.watch('*.html', ['bs-reload']); 118 | }); 119 | 120 | gulp.task('production', function(){ 121 | gulp.run('minify-css', 'minify-img', 'minify-svg'); 122 | }); 123 | -------------------------------------------------------------------------------- /plangular.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | PLANGULAR 4 | A Highly Customizable SoundCloud Player 5 | 6 | http://jxnblk.github.io/Plangular 7 | 8 | */ 9 | 10 | 11 | 'use strict'; 12 | 13 | var plangular = angular.module('plangular', []), 14 | clientID = '0d33361983f16d2527b01fbf6408b7d7', 15 | iconUrl = 'icons/plangular-icons.svg'; 16 | 17 | plangular.directive('plangular', function ($document, $rootScope, $http) { 18 | // Define the audio engine 19 | var audio = $document[0].createElement('audio'); 20 | 21 | // Define the player object 22 | var player = { 23 | track: false, 24 | playing: false, 25 | paused: false, 26 | tracks: null, 27 | i: null, 28 | play: function(tracks, i) { 29 | if (i == null) { 30 | tracks = new Array(tracks); 31 | i = 0; 32 | }; 33 | player.tracks = tracks; 34 | player.track = tracks[i]; 35 | player.i = i; 36 | if (player.paused != player.track) audio.src = player.track.stream_url + '?client_id=' + clientID; 37 | audio.play(); 38 | player.playing = player.track; 39 | player.paused = false; 40 | }, 41 | pause: function() { 42 | audio.pause(); 43 | if (player.playing) { 44 | player.paused = player.playing; 45 | player.playing = false; 46 | }; 47 | }, 48 | // Functions for playlists (i.e. sets) 49 | playPlaylist: function(playlist) { 50 | if (player.tracks == playlist.tracks && player.paused) player.play(player.tracks, player.i); 51 | else player.play(playlist.tracks, 0); 52 | }, 53 | next: function(playlist) { 54 | if (!playlist){ 55 | if (player.i+1 < player.tracks.length) { 56 | player.i++; 57 | player.play(player.tracks, player.i); 58 | } else { 59 | player.pause(); 60 | }; 61 | } else if (playlist && playlist.tracks == player.tracks) { 62 | if (player.i + 1 < player.tracks.length) { 63 | player.i++; 64 | player.play(playlist.tracks, player.i); 65 | } else { 66 | player.pause(); 67 | }; 68 | }; 69 | }, 70 | previous: function(playlist) { 71 | if (playlist.tracks == player.tracks && player.i > 0) { 72 | player.i = player.i - 1; 73 | player.play(playlist.tracks, player.i); 74 | }; 75 | } 76 | }; 77 | 78 | audio.addEventListener('ended', function() { 79 | $rootScope.$apply(function(){ 80 | if (player.tracks.length > 0) player.next(); 81 | else player.pause(); 82 | }); 83 | 84 | }, false); 85 | 86 | // Returns the player, audio, track, and other objects 87 | return { 88 | restrict: 'A', 89 | scope: true, 90 | link: function (scope, elem, attrs) { 91 | var params = { url: attrs.src, client_id: clientID, callback: 'JSON_CALLBACK' } 92 | $http.jsonp('//api.soundcloud.com/resolve.json', { params: params }).success(function(data){ 93 | // Handle playlists (i.e. sets) 94 | if (data.tracks) scope.playlist = data; 95 | // Handle single track 96 | else if (data.kind == 'track') scope.track = data; 97 | // Handle all other data 98 | else scope.data = data; 99 | }); 100 | scope.player = player; 101 | scope.audio = audio; 102 | scope.currentTime = 0; 103 | scope.duration = 0; 104 | 105 | // Updates the currentTime and duration for the audio 106 | audio.addEventListener('timeupdate', function() { 107 | if (scope.track == player.track || (scope.playlist && scope.playlist.tracks == player.tracks)){ 108 | scope.$apply(function() { 109 | scope.currentTime = (audio.currentTime * 1000).toFixed(); 110 | scope.duration = (audio.duration * 1000).toFixed(); 111 | }); 112 | }; 113 | }, false); 114 | 115 | // Handle click events for seeking 116 | scope.seekTo = function($event){ 117 | var xpos = $event.offsetX / $event.target.offsetWidth; 118 | audio.currentTime = (xpos * audio.duration); 119 | }; 120 | } 121 | } 122 | }); 123 | 124 | // Plangular Icons 125 | plangular.directive('plangularIcon', function() { 126 | var xmlHttp = null, 127 | sprite; 128 | xmlHttp = new XMLHttpRequest(); 129 | xmlHttp.open('GET', iconUrl, false); 130 | xmlHttp.send(null); 131 | if(xmlHttp.responseXML) sprite = xmlHttp.responseXML.documentElement; 132 | else console.error('Icon sprite not found - check iconUrl variable in plangular.js'); 133 | return { 134 | restrict: 'A', 135 | scope: true, 136 | link: function (scope, elem, attrs) { 137 | if (!sprite) return false; 138 | var el = elem[0], 139 | id = attrs.plangularIcon, 140 | svg = sprite.getElementById(id).cloneNode(true); 141 | el.className += ' plangular-icon plangular-icon-' + id; 142 | svg.removeAttribute('id'); 143 | svg.setAttribute('class', el.className); 144 | el.parentNode.replaceChild(svg, el); 145 | } 146 | } 147 | }); 148 | 149 | // Filter to convert milliseconds to hours, minutes, seconds 150 | plangular.filter('playTime', function() { 151 | return function(ms) { 152 | var hours = Math.floor(ms / 36e5), 153 | mins = '0' + Math.floor((ms % 36e5) / 6e4), 154 | secs = '0' + Math.floor((ms % 6e4) / 1000); 155 | mins = mins.substr(mins.length - 2); 156 | secs = secs.substr(secs.length - 2); 157 | if(!isNaN(secs)){ 158 | if (hours){ 159 | return hours+':'+mins+':'+secs; 160 | } else { 161 | return mins+':'+secs; 162 | }; 163 | } else { 164 | return '00:00'; 165 | }; 166 | }; 167 | }); 168 | 169 | -------------------------------------------------------------------------------- /sass/_debug.scss: -------------------------------------------------------------------------------- 1 | $layout-debug: false; 2 | 3 | @if $layout-debug == true { 4 | 5 | body { outline: 1px solid #2980B9!important; } 6 | article { outline: 1px solid #3498DB!important; } 7 | nav { outline: 1px solid #0088C3!important; } 8 | aside { outline: 1px solid #33A0CE!important; } 9 | section { outline: 1px solid #66B8DA!important; } 10 | header { outline: 1px solid #99CFE7!important; } 11 | footer { outline: 1px solid #CCE7F3!important; } 12 | h1 { outline: 1px solid #162544!important; } 13 | h2 { outline: 1px solid #314E6E!important; } 14 | h3 { outline: 1px solid #3E5E85!important; } 15 | h4 { outline: 1px solid #449BAF!important; } 16 | h5 { outline: 1px solid #C7D1CB!important; } 17 | h6 { outline: 1px solid #4371D0!important; } 18 | main { outline: 1px solid #2F4F90!important; } 19 | address { outline: 1px solid #1A2C51!important; } 20 | div { outline: 1px solid #036CDB!important; } 21 | 22 | 23 | p { outline: 1px solid #AC050B!important; } 24 | hr { outline: 1px solid #FF063F!important; } 25 | pre { outline: 1px solid #850440!important; } 26 | blockquote { outline: 1px solid #F1B8E7!important; } 27 | ol { outline: 1px solid #FF050C!important; } 28 | ul { outline: 1px solid #D90416!important; } 29 | li { outline: 1px solid #D90416!important; } 30 | dl { outline: 1px solid #FD3427!important; } 31 | dt { outline: 1px solid #FF0043!important; } 32 | dd { outline: 1px solid #E80174!important; } 33 | figure { outline: 1px solid #FF00BB!important; } 34 | figcaption { outline: 1px solid #BF0032!important; } 35 | 36 | 37 | 38 | table { outline: 1px solid #00CC99!important; } 39 | caption { outline: 1px solid #37FFC4!important; } 40 | thead { outline: 1px solid #98DACA!important; } 41 | tbody { outline: 1px solid #64A7A0!important; } 42 | tfoot { outline: 1px solid #22746B!important; } 43 | tr { outline: 1px solid #86C0B2!important; } 44 | th { outline: 1px solid #A1E7D6!important; } 45 | td { outline: 1px solid #3F5A54!important; } 46 | col { outline: 1px solid #6C9A8F!important; } 47 | colgroup { outline: 1px solid #6C9A9D!important; } 48 | 49 | 50 | button { outline: 1px solid #DA8301!important; } 51 | datalist { outline: 1px solid #C06000!important; } 52 | fieldset { outline: 1px solid #D95100!important; } 53 | form { outline: 1px solid #D23600!important; } 54 | input { outline: 1px solid #FCA600!important; } 55 | keygen { outline: 1px solid #B31E00!important; } 56 | label { outline: 1px solid #EE8900!important; } 57 | legend { outline: 1px solid #DE6D00!important; } 58 | meter { outline: 1px solid #E8630C!important; } 59 | optgroup { outline: 1px solid #B33600!important; } 60 | option { outline: 1px solid #FF8A00!important; } 61 | output { outline: 1px solid #FF9619!important; } 62 | progress { outline: 1px solid #E57C00!important; } 63 | select { outline: 1px solid #E26E0F!important; } 64 | textarea { outline: 1px solid #CC5400!important; } 65 | 66 | 67 | 68 | details { outline: 1px solid #33848F!important; } 69 | summary { outline: 1px solid #60A1A6!important; } 70 | command { outline: 1px solid #438DA1!important; } 71 | menu { outline: 1px solid #449DA6!important; } 72 | 73 | 74 | 75 | del { outline: 1px solid #BF0000!important; } 76 | ins { outline: 1px solid #400000!important; } 77 | 78 | 79 | 80 | img { outline: 1px solid #22746B!important; } 81 | iframe { outline: 1px solid #64A7A0!important; } 82 | embed { outline: 1px solid #98DACA!important; } 83 | object { outline: 1px solid #00CC99!important; } 84 | param { outline: 1px solid #37FFC4!important; } 85 | video { outline: 1px solid #6EE866!important; } 86 | audio { outline: 1px solid #027353!important; } 87 | source { outline: 1px solid #012426!important; } 88 | canvas { outline: 1px solid #A2F570!important; } 89 | track { outline: 1px solid #59A600!important; } 90 | map { outline: 1px solid #7BE500!important; } 91 | area { outline: 1px solid #305900!important; } 92 | 93 | 94 | 95 | a { outline: 1px solid #FF62AB!important; } 96 | em { outline: 1px solid #800B41!important; } 97 | strong { outline: 1px solid #FF1583!important; } 98 | i { outline: 1px solid #803156!important; } 99 | b { outline: 1px solid #CC1169!important; } 100 | u { outline: 1px solid #FF0430!important; } 101 | s { outline: 1px solid #F805E3!important; } 102 | small { outline: 1px solid #D107B2!important; } 103 | abbr { outline: 1px solid #4A0263!important; } 104 | q { outline: 1px solid #240018!important; } 105 | cite { outline: 1px solid #64003C!important; } 106 | dfn { outline: 1px solid #B4005A!important; } 107 | sub { outline: 1px solid #DBA0C8!important; } 108 | sup { outline: 1px solid #CC0256!important; } 109 | time { outline: 1px solid #D6606D!important; } 110 | code { outline: 1px solid #E04251!important; } 111 | kbd { outline: 1px solid #5E001F!important; } 112 | samp { outline: 1px solid #9C0033!important; } 113 | var { outline: 1px solid #D90047!important; } 114 | mark { outline: 1px solid #FF0053!important; } 115 | bdi { outline: 1px solid #BF3668!important; } 116 | bdo { outline: 1px solid #6F1400!important; } 117 | ruby { outline: 1px solid #FF7B93!important; } 118 | rt { outline: 1px solid #FF2F54!important; } 119 | rp { outline: 1px solid #803E49!important; } 120 | span { outline: 1px solid #CC2643!important; } 121 | br { outline: 1px solid #DB687D!important; } 122 | wbr { outline: 1px solid #DB175B!important; } 123 | 124 | } 125 | 126 | -------------------------------------------------------------------------------- /site/plangular-waveform-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 22 | 23 | 39 | 40 | 48 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /site/plangular-waveform-5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 23 | 24 | 40 | 41 | 49 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /site/plangular-waveform-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 23 | 24 | 40 | 41 | 50 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /site/style.css: -------------------------------------------------------------------------------- 1 | body,button,input,select,textarea,pre{margin:0}h1,h2,h3,h4,h5,h6,p,dl,ol,ul{margin-top:0;margin-bottom:1rem}button,input,select,textarea{font-family:inherit;font-size:100%}article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}body{font-family:'Open Sans', Helvetica, sans-serif;line-height:1.5rem;font-weight:400}h1,h2,h3,h4,h5,h6{font-weight:600}h1,.h1,.f1{font-size:2.25rem;line-height:3rem}h2,.h2,.f1{font-size:1.5rem;line-height:2rem}h3,.h3,.f3{font-size:1.25rem;line-height:2rem}p,.p,.f4,h4,.h4,h5,h6,dl,ol,ul{font-size:1rem;line-height:1.5rem}small,.small,.f5,.h5{font-size:.875rem;line-height:1.5rem}@media (min-width: 48em){.h1{font-size:3rem;line-height:4rem}.h2{font-size:2rem;line-height:3rem}.h3{font-size:1.5rem;line-height:2rem}.p,.h4{font-size:1.125rem;line-height:2rem}.small{font-size:1rem}}strong,.bold{font-weight:600}.regular{font-weight:normal}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.center{text-align:center}.right-align{text-align:right}.measure{max-width:48rem}.measure-narrow{max-width:32rem}.measure-wide{max-width:60rem}.leading-1{line-height:1.5rem}.leading-2{line-height:2rem}.leading-3{line-height:3rem}.leading-4{line-height:4rem}.icon{width:1em;height:1em;vertical-align:-.0625em}.m0{margin:0}.mb0{margin-bottom:0}.m1{margin:1rem}.mt1{margin-top:1rem}.mr1{margin-right:1rem}.mb1{margin-bottom:1rem}.ml1{margin-left:1rem}.m2{margin:2rem}.mt2{margin-top:2rem}.mr2{margin-right:2rem}.mb2{margin-bottom:2rem}.ml2{margin-left:2rem}.m3{margin:3rem}.mt3{margin-top:3rem}.mr3{margin-right:3rem}.mb3{margin-bottom:3rem}.ml3{margin-left:3rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.wrap{margin-right:auto;margin-left:auto}.m-responsive{margin:2rem}.mt-responsive{margin-top:2rem}.mr-responsive{margin-right:2rem}.mb-responsive{margin-bottom:2rem}.ml-responsive{margin-left:2rem}@media (min-width: 48em) and (max-width: 64em){.m-responsive{margin:3rem}.mt-responsive{margin-top:3rem}.mr-responsive{margin-right:3rem}.mb-responsive{margin-bottom:3rem}.ml-responsive{margin-left:3rem}}@media (min-width: 64em){.m-responsive{margin:4rem}.mt-responsive{margin-top:4rem}.mr-responsive{margin-right:4rem}.mb-responsive{margin-bottom:4rem}.ml-responsive{margin-left:4rem}}.p1{padding:1rem}.px1{padding-right:1rem;padding-left:1rem}.py1{padding-top:1rem;padding-bottom:1rem}.p2{padding:2rem}.px2{padding-right:2rem;padding-left:2rem}.py2{padding-top:2rem;padding-bottom:2rem}.p3{padding:3rem}.px3{padding-right:3rem;padding-left:3rem}.py3{padding-top:3rem;padding-bottom:3rem}.p4{padding:4rem}.px4{padding-right:4rem;padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.p-responsive{padding:1.5rem}.px-responsive{padding-right:1.5rem;padding-left:1.5rem}.py-responsive{padding-top:1.5rem;padding-bottom:1.5rem}@media (min-width: 48em) and (max-width: 64em){.p-responsive{padding:3rem}.px-responsive{padding-right:3rem;padding-left:3rem}.py-responsive{padding-top:3rem;padding-bottom:3rem}}@media (min-width: 64em){.p-responsive{padding:4rem}.px-responsive{padding-right:4rem;padding-left:4rem}.py-responsive{padding-top:4rem;padding-bottom:4rem}}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.oh{overflow:hidden}.left{float:left}.right{float:right}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.fit{max-width:100%}.full-width{width:100%}.half-width{width:50%}.mobile-show{display:none}@media (max-width: 48em){.mobile-show,.mobile-block{display:block}.mobile-block{width:100%}.mobile-hide{display:none}.mobile-center{text-align:center}}.button{font-family:inherit;font-weight:bold;text-decoration:none;cursor:pointer;border:none;-webkit-appearance:none;appearance:none;white-space:nowrap;display:inline-block;line-height:2rem;height:auto;min-height:2rem;padding:0.5rem 1rem}.button-big{padding:1rem 1.5rem}.button-small{padding:0 .5rem}.list{padding-left:2rem}.ol{padding-left:0}.list-simple{list-style:none;padding-left:0}.list-inline{list-style:none;padding-left:0}.list-inline li{display:inline;white-space:nowrap}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.t0{top:0}.r0{right:0}.b0{bottom:0}.l0{left:0}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.absolute-center{top:0;right:0;bottom:0;left:0;margin:auto;display:table}.white{color:#fff}.blue{color:#0096cc}.light-gray{color:#eaeff0}.mid-gray{color:#708690}.dark-gray{color:#405660}.red{color:#f52}.green{color:#0f6}.bg-white{background-color:#fff}.bg-blue{background-color:#0096cc}.bg-light-gray{background-color:#eaeff0}.bg-mid-gray{background-color:#708690}.bg-dark-gray{background-color:#405660}.bg-red{background-color:#f52}.bg-green{background-color:#0f6}body{color:#405660;background-color:#fff}a{color:#0096cc;text-decoration:none}a:hover{color:#007199}.button{border-radius:.25rem;transition-duration:.2s;transition-timing-function:ease;transition:box-shadow , background-color;-webkit-font-smoothing:antialiased}.button:hover,.button:focus{outline:none}.button-blue{color:#fff;background-color:#0096cc}.button-blue:hover{color:#fff;background-color:#00bcff;box-shadow:0 0 0 2px rgba(0,188,255,0.5)}.button-box{color:#0f6;box-shadow:inset 0 0 0 2px #0f6;-webkit-transition:background .2s ease, box-shadow .2s ease, -webkit-transform .2s ease;transition:background .2s ease, box-shadow .2s ease, transform .2s ease}.button-box svg{fill:#0f6}.button-box:hover{color:#405660;background-color:#0f6;box-shadow:0 0 0 4px #405660,0 0 0 8px rgba(0,255,102,0.5);-webkit-transform:scale(1.05);transform:scale(1.05)}.button-box:hover svg{fill:#405660}.button-green{color:#405660;background-color:#0f6;-webkit-transition:box-shadow .2s ease, -webkit-transform .2s ease;transition:box-shadow .2s ease, transform .2s ease}.button-green:hover,.button-green:focus{color:#405660;outline:none;box-shadow:0 0 0 4px #405660,0 0 0 8px rgba(0,255,102,0.5);-webkit-transform:scale(1.05);transform:scale(1.05)}.button-green:active{-webkit-transform:scale(1);transform:scale(1);box-shadow:inset 0 0 8px #405660}.border{border-style:solid;border-width:1px}.border-top{border-top-style:solid;border-top-width:1px}.border-light-gray{border-color:#eaeff0}.rounded{border-radius:.25rem}.transition-all{transition:all .2s ease}html,body{height:100%}.min-h100{min-height:100%}.h100{height:100%}.table{display:table;table-layout:fixed;width:100%}.table-cell{display:table-cell;vertical-align:middle}.waveform{width:100%;stroke-width:.25;fill:none}.waveform-large{height:75%;top:12.5%;stroke:#0f6}.waveform-small{width:100%;stroke:rgba(0,150,204,0.2);height:150%}.glow-wrap{opacity:0}@-webkit-keyframes glow{0%{opacity:0;-webkit-transform:scaleY(0.2)}5%{opacity:.9;-webkit-transform:scaleY(1)}100%{opacity:0;-webkit-transform:scaleY(0.2)}}@keyframes glow{0%{opacity:0;transform:scaleY(0.2)}5%{opacity:.9;transform:scaleY(1)}100%{opacity:0;transform:scaleY(0.2)}}.geo-glow{-webkit-animation:glow 6s linear;animation:glow 6s linear}.px8{padding-right:20%;padding-left:20%}.button-geo .geo-16{position:relative;top:2px}.button-geo .geo-24{position:relative;top:4px}.geo-16{width:16px;height:16px}.geo-24{width:24px;height:24px}.geo-32{width:32px;height:32px}.geo-white{fill:#fff}.geo-dark-gray{fill:#405660}.aspect-16o9{width:100%;height:0;padding-bottom:56.25%}.plangular-button{text-align:center;display:inline-block;width:8em;height:2em;line-height:2em;max-width:100%}.plangular-button svg{vertical-align:-.125em}.bg-cover{background-size:cover}.bg-center{background-position:center}.outline,.outline *{outline:1px solid red}.shadow-darken{box-shadow:inset 0 -32px 192px rgba(0,0,0,0.9)}.progress-thin{height:2px;margin-top:23px}.progress{width:100%;-webkit-appearance:none}.progress::-webkit-progress-bar{-webkit-appearance:none;background-color:#eee}.progress::-webkit-progress-value{-webkit-appearance:none}.progress-gray::-webkit-progress-value{background-color:#999}.progress-gray-alt::-webkit-progress-bar{background-color:#ddd}.progress-white::-webkit-progress-value{background-color:#fff}.progress-white::-webkit-progress-bar{background-color:rgba(255,255,255,0.4)}.progress-link::-webkit-progress-value{background-color:#0cf}.progress-green::-webkit-progress-value{background-color:#0c5}.progress-white-bg::-webkit-progress-bar{background-color:#fff}@-webkit-keyframes popin{0%{-webkit-transform:scale(0.2)}80%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1)}}@keyframes popin{0%{transform:scale(0.2)}80%{transform:scale(1.1)}100%{transform:scale(1)}}.anim-popin{-webkit-animation:popin .1s;animation:popin .1s} 2 | -------------------------------------------------------------------------------- /site/plangular-waveform-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 17 | 28 | 42 | 61 | 86 | 87 | -------------------------------------------------------------------------------- /sass/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.2 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address `[hidden]` styling not present in IE 8/9. 48 | * Hide the `template` element in IE, Safari, and Firefox < 22. 49 | */ 50 | 51 | [hidden], 52 | template { 53 | display: none; 54 | } 55 | 56 | /* ========================================================================== 57 | Base 58 | ========================================================================== */ 59 | 60 | /** 61 | * 1. Set default font family to sans-serif. 62 | * 2. Prevent iOS text size adjust after orientation change, without disabling 63 | * user zoom. 64 | */ 65 | 66 | html { 67 | font-family: sans-serif; /* 1 */ 68 | -ms-text-size-adjust: 100%; /* 2 */ 69 | -webkit-text-size-adjust: 100%; /* 2 */ 70 | } 71 | 72 | /** 73 | * Remove default margin. 74 | */ 75 | 76 | body { 77 | margin: 0; 78 | } 79 | 80 | /* ========================================================================== 81 | Links 82 | ========================================================================== */ 83 | 84 | /** 85 | * Remove the gray background color from active links in IE 10. 86 | */ 87 | 88 | a { 89 | background: transparent; 90 | } 91 | 92 | /** 93 | * Address `outline` inconsistency between Chrome and other browsers. 94 | */ 95 | 96 | a:focus { 97 | outline: thin dotted; 98 | } 99 | 100 | /** 101 | * Improve readability when focused and also mouse hovered in all browsers. 102 | */ 103 | 104 | a:active, 105 | a:hover { 106 | outline: 0; 107 | } 108 | 109 | /* ========================================================================== 110 | Typography 111 | ========================================================================== */ 112 | 113 | /** 114 | * Address variable `h1` font-size and margin within `section` and `article` 115 | * contexts in Firefox 4+, Safari 5, and Chrome. 116 | */ 117 | 118 | h1 { 119 | margin: 0.67em 0; 120 | } 121 | 122 | /** 123 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 124 | */ 125 | 126 | abbr[title] { 127 | border-bottom: 1px dotted; 128 | } 129 | 130 | /** 131 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 132 | */ 133 | 134 | b, 135 | strong { 136 | font-weight: bold; 137 | } 138 | 139 | /** 140 | * Address styling not present in Safari 5 and Chrome. 141 | */ 142 | 143 | dfn { 144 | font-style: italic; 145 | } 146 | 147 | /** 148 | * Address differences between Firefox and other browsers. 149 | */ 150 | 151 | hr { 152 | -moz-box-sizing: content-box; 153 | box-sizing: content-box; 154 | height: 0; 155 | } 156 | 157 | /** 158 | * Address styling not present in IE 8/9. 159 | */ 160 | 161 | mark { 162 | background: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Correct font family set oddly in Safari 5 and Chrome. 168 | */ 169 | 170 | code, 171 | kbd, 172 | pre, 173 | samp { 174 | font-family: monospace, serif; 175 | font-size: 1em; 176 | } 177 | 178 | /** 179 | * Improve readability of pre-formatted text in all browsers. 180 | */ 181 | 182 | pre { 183 | white-space: pre-wrap; 184 | } 185 | 186 | /** 187 | * Set consistent quote types. 188 | */ 189 | 190 | q { 191 | quotes: "\201C" "\201D" "\2018" "\2019"; 192 | } 193 | 194 | /** 195 | * Address inconsistent and variable font size in all browsers. 196 | */ 197 | 198 | small { 199 | font-size: 80%; 200 | } 201 | 202 | /** 203 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 204 | */ 205 | 206 | sub, 207 | sup { 208 | font-size: 75%; 209 | line-height: 0; 210 | position: relative; 211 | vertical-align: baseline; 212 | } 213 | 214 | sup { 215 | top: -0.5em; 216 | } 217 | 218 | sub { 219 | bottom: -0.25em; 220 | } 221 | 222 | /* ========================================================================== 223 | Embedded content 224 | ========================================================================== */ 225 | 226 | /** 227 | * Remove border when inside `a` element in IE 8/9. 228 | */ 229 | 230 | img { 231 | border: 0; 232 | } 233 | 234 | /** 235 | * Correct overflow displayed oddly in IE 9. 236 | */ 237 | 238 | svg:not(:root) { 239 | overflow: hidden; 240 | } 241 | 242 | /* ========================================================================== 243 | Figures 244 | ========================================================================== */ 245 | 246 | /** 247 | * Address margin not present in IE 8/9 and Safari 5. 248 | */ 249 | 250 | figure { 251 | margin: 0; 252 | } 253 | 254 | /* ========================================================================== 255 | Forms 256 | ========================================================================== */ 257 | 258 | /** 259 | * Define consistent border, margin, and padding. 260 | */ 261 | 262 | fieldset { 263 | border: 1px solid #c0c0c0; 264 | margin: 0 2px; 265 | padding: 0.35em 0.625em 0.75em; 266 | } 267 | 268 | /** 269 | * 1. Correct `color` not being inherited in IE 8/9. 270 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 271 | */ 272 | 273 | legend { 274 | border: 0; /* 1 */ 275 | padding: 0; /* 2 */ 276 | } 277 | 278 | /** 279 | * 1. Correct font family not being inherited in all browsers. 280 | * 2. Correct font size not being inherited in all browsers. 281 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 282 | */ 283 | 284 | button, 285 | input, 286 | select, 287 | textarea { 288 | font-family: inherit; /* 1 */ 289 | font-size: 100%; /* 2 */ 290 | margin: 0; /* 3 */ 291 | } 292 | 293 | /** 294 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 295 | * the UA stylesheet. 296 | */ 297 | 298 | button, 299 | input { 300 | line-height: normal; 301 | } 302 | 303 | /** 304 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 305 | * All other form control elements do not inherit `text-transform` values. 306 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 307 | * Correct `select` style inheritance in Firefox 4+ and Opera. 308 | */ 309 | 310 | button, 311 | select { 312 | text-transform: none; 313 | } 314 | 315 | /** 316 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 317 | * and `video` controls. 318 | * 2. Correct inability to style clickable `input` types in iOS. 319 | * 3. Improve usability and consistency of cursor style between image-type 320 | * `input` and others. 321 | */ 322 | 323 | button, 324 | html input[type="button"], /* 1 */ 325 | input[type="reset"], 326 | input[type="submit"] { 327 | -webkit-appearance: button; /* 2 */ 328 | cursor: pointer; /* 3 */ 329 | } 330 | 331 | /** 332 | * Re-set default cursor for disabled elements. 333 | */ 334 | 335 | button[disabled], 336 | html input[disabled] { 337 | cursor: default; 338 | } 339 | 340 | /** 341 | * 1. Address box sizing set to `content-box` in IE 8/9. 342 | * 2. Remove excess padding in IE 8/9. 343 | */ 344 | 345 | input[type="checkbox"], 346 | input[type="radio"] { 347 | box-sizing: border-box; /* 1 */ 348 | padding: 0; /* 2 */ 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari 5 and Chrome 366 | * on OS X. 367 | */ 368 | 369 | input[type="search"]::-webkit-search-cancel-button, 370 | input[type="search"]::-webkit-search-decoration { 371 | -webkit-appearance: none; 372 | } 373 | 374 | /** 375 | * Remove inner padding and border in Firefox 4+. 376 | */ 377 | 378 | button::-moz-focus-inner, 379 | input::-moz-focus-inner { 380 | border: 0; 381 | padding: 0; 382 | } 383 | 384 | /** 385 | * 1. Remove default vertical scrollbar in IE 8/9. 386 | * 2. Improve readability and alignment in all browsers. 387 | */ 388 | 389 | textarea { 390 | overflow: auto; /* 1 */ 391 | vertical-align: top; /* 2 */ 392 | } 393 | 394 | /* ========================================================================== 395 | Tables 396 | ========================================================================== */ 397 | 398 | /** 399 | * Remove most spacing between table cells. 400 | */ 401 | 402 | table { 403 | border-collapse: collapse; 404 | border-spacing: 0; 405 | } 406 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Plangular 2 | ========= 3 | 4 | Create custom SoundCloud players with HTML and CSS. Built with AngularJS 5 | 6 | See examples and more here: 7 | http://jxnblk.github.io/plangular 8 | 9 | --- 10 | 11 | ## Usage 12 | Plangular is very customizable. If you're not comfortable with basic AngularJS, the player templates below might be an easier place to start. 13 | 14 | ### Include JS Files 15 | Download the plangular.js file and add it to your project, then add the following script tags to your HTML: 16 | 17 | ```html 18 | 19 | 20 | ``` 21 | 22 | Note: Unlike the previous version of Plangular, the SoundCloud SDK is no longer required. 23 | 24 | ### Initialize the Angular App 25 | Include the `ng-app` attribute in a containing element. 26 | 27 | ```html 28 | 29 | ... 30 | 31 | ``` 32 | 33 | ### Create the Player 34 | Use any HTML element and add the `plangular` and `data-src` attributes, with the SoundCloud URL for the sound you would like to use. 35 | 36 | ```html 37 |
38 | ``` 39 | 40 | ### Include the Track Info 41 | Use Angular bindings to include information about the track. You can use any of the data from the SoundCloud JSON Object. 42 | 43 | ```html 44 |

{{ track.user.username }}

45 |

{{ track.title }}

46 | ``` 47 | 48 | ### Use Plangular Variables 49 | Add Play/Pause controls. Use `ng-hide` and `ng-show` to conditionally show and hide the controls when the track is playing. 50 | 51 | ```html 52 | Play 53 | Pause 54 | ``` 55 | 56 | Plangular includes basic variables to display the sound's time and duration. The playTime filter will convert milliseconds to hh:mm:ss format. 57 | 58 | ```html 59 | {{ currentTime / duration }} 60 | {{ currentTime | playTime }} | {{ duration | playTime }} 61 | ``` 62 | 63 | Add the seekTo() function to add scrubbing. 64 | 65 | ```html 66 | {{ currentTime / duration }} 67 | ``` 68 | 69 | ### Add Images and Links 70 | To use images and links in the track object, use Angular's `ng-src` and `ng-href` attributes. 71 | 72 | ```html 73 | View on SoundCloud 74 | {{ track.title }} 75 | waveform 76 | ``` 77 | 78 | Note: The waveform image that the SoundCloud API provides is a 1200 x 280px PNG with a light gray frame and transparent middle. To show progress use absolute positioning with the waveform in front. The light gray color is #efefef. 79 | 80 | ### Icons 81 | Use the `plangularIcon` directive to inject SVG icons into your player. This directive will replace the element with an inline SVG, which allows you to style the icons with CSS. Requires the `plangular-icons.svg` file. 82 | 83 | ```html 84 |
85 |
86 |
87 |
88 | ``` 89 | 90 | 91 | #### Example Icon Styling 92 | Since these are SVGs, use the `fill` attribute to style the color of the icons. 93 | 94 | ```html 95 | 104 |
105 | ``` 106 | 107 | ### Additional Options 108 | 109 | To add a loading state while Plangular is getting data from SoundCloud, you can use `ng-show` and `ng-hide` to display different states. 110 | 111 | ```html 112 | Loading... 113 |
114 | ``` 115 | 116 | ### Style with CSS 117 | Add classes, custom images, and whatever else your heart desires. Have fun! 118 | 119 | --- 120 | 121 | ## Example Templates 122 | Use these examples to get started quickly 123 | 124 | ### Bare Bones 125 | 126 | ```html 127 |
128 | 129 |
130 | 131 | 132 |
133 | 134 |

{{ track.user.username }} - {{ track.title }}

135 |
136 | ``` 137 | 138 | ### Progress Bar 139 | 140 | ```html 141 |
142 | 143 |
144 | 145 | 146 |
147 | 148 |
149 |

{{ track.user.username }}

150 |

{{ track.title }}

151 | {{ currentTime / duration }} 152 | {{ currentTime | playTime }} | {{ duration | playTime }} 153 |
154 |
155 | ``` 156 | 157 | ### Artwork and Waveform 158 | 159 | ```html 160 |
161 | 162 |
163 |
164 | 165 |
166 | 167 | 168 |
169 | 170 |
171 |

{{ track.user.username }}

172 |

{{ track.title }}

173 |
174 |
175 |
176 | {{ currentTime / duration }} 177 | 178 |
179 | {{ currentTime | playTime }} | {{ duration | playTime }} 180 |
181 |
182 | ``` 183 | 184 | --- 185 | 186 | ## Note About SoundCloud API 187 | 188 | According to the SoundCloud API terms you must: 189 | - Credit the user as the creator of the content 190 | - Credit SoundCloud as the source 191 | - Include a link to the sound on SoundCloud (i.e. a link using `track.permalink_url`) 192 | 193 | Read more here: http://developers.soundcloud.com/docs/api/terms-of-use#branding 194 | 195 | --- 196 | 197 | ## Troubleshooting 198 | 199 | Don't ask me why, but SoundCloud provides an option for users to prevent streaming to third-party apps. If your sound isn't play or has stopped playing check the `track.streamable` variable. If it's set to false, there's no way to play that sound with the API. 200 | 201 | --- 202 | 203 | ## Reference 204 | 205 | ### Plangular 206 | 207 | - `plangular` - The Angular directive for Plangular 208 | - `data-src` - The data attribute to set the SoundCloud link 209 | - `track` - The object returned from the SoundCloud API 210 | - `player.play(track)` - Function for playing the track 211 | - `player.pause()` - Function for pausing 212 | - `currentTime` - Current time in milliseconds for the currently playing track 213 | - `duration` - Duration of the track in milliseconds 214 | - `playTime` - Angular filter to convert milliseconds to hh:mm:ss format 215 | - `seekTo($event)` - Click function for scrubbing 216 | 217 | ### SoundCloud API 218 | 219 | Example JSON object: 220 | 221 | ```json 222 | { 223 | "kind": "track", 224 | "id": 104286869, 225 | "created_at": "2013/08/06 18:40:58 +0000", 226 | "user_id": 1561, 227 | "duration": 10058, 228 | "commentable": true, 229 | "state": "finished", 230 | "original_content_size": 1764044, 231 | "sharing": "public", 232 | "tag_list": "Vocal", 233 | "permalink": "plangular", 234 | "streamable": true, 235 | "embeddable_by": "all", 236 | "downloadable": false, 237 | "purchase_url": null, 238 | "label_id": null, 239 | "purchase_title": null, 240 | "genre": "FX", 241 | "title": "Plangular", 242 | "description": "", 243 | "label_name": null, 244 | "release": null, 245 | "track_type": null, 246 | "key_signature": null, 247 | "isrc": null, 248 | "video_url": null, 249 | "bpm": null, 250 | "release_year": null, 251 | "release_month": null, 252 | "release_day": null, 253 | "original_format": "wav", 254 | "license": "all-rights-reserved", 255 | "uri": "http://api.soundcloud.com/tracks/104286869", 256 | "user": { 257 | "id": 1561, 258 | "kind": "user", 259 | "permalink": "jxnblk", 260 | "username": "Jxnblk", 261 | "uri": "http://api.soundcloud.com/users/1561", 262 | "permalink_url": "http://soundcloud.com/jxnblk", 263 | "avatar_url": "http://i1.sndcdn.com/avatars-000022806518-7o90vj-large.jpg?5ffe3cd" 264 | }, 265 | "permalink_url": "http://soundcloud.com/jxnblk/plangular", 266 | "artwork_url": null, 267 | "waveform_url": "http://w1.sndcdn.com/2t0q2x8lbAVJ_m.png", 268 | "stream_url": "http://api.soundcloud.com/tracks/104286869/stream", 269 | "playback_count": 51, 270 | "download_count": 0, 271 | "favoritings_count": 1, 272 | "comment_count": 0, 273 | "attachments_uri": "http://api.soundcloud.com/tracks/104286869/attachments" 274 | } 275 | ``` 276 | 277 | See http://developers.soundcloud.com/docs/api/reference#users for more details 278 | 279 | --- 280 | 281 | [MIT License](http://opensource.org/licenses/MIT) 282 | 283 | 284 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Plangular 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 |
24 |
25 |
26 | 27 |
28 |
29 |

{{ track.title }}

30 |
31 |
32 | 34 |
35 | 36 | 38 |
39 | 40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
Download on SoundCloud
50 |
51 |
52 |
53 |
54 |

{{ track.title }}

55 |
56 |
57 | 59 |
60 | 61 | 63 |
64 | 65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
Download on SoundCloud
75 |
76 |
77 |
78 |
79 |

{{ track.title }}

80 |
81 |
82 | 84 |
85 | 86 | 88 |
89 | 90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
Download on SoundCloud
100 |
101 |
102 |
103 |
104 |

{{ track.title }}

105 |
106 |
107 | 109 |
110 | 111 | 113 |
114 | 115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
Download on SoundCloud
125 |
126 |
127 |
128 |
129 |

{{ track.title }}

130 |
131 |
132 | 134 |
135 | 136 | 138 |
139 | 140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
Download on SoundCloud
150 |
151 |
152 |
153 |
154 |

{{ track.title }}

155 |
156 |
157 | 159 |
160 | 161 | 163 |
164 | 165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
Download on SoundCloud
175 |
176 |
177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /site/plangular.css: -------------------------------------------------------------------------------- 1 | /* Plangular */ 2 | 3 | body, h1, h2, h3, h4, h5, h6, dl, ol, ul, p, 4 | button, input, select, textarea { 5 | margin: 0; 6 | } 7 | 8 | ol, ul { 9 | padding-left: 0; 10 | } 11 | 12 | button, input, select, textarea { 13 | font-family: inherit; 14 | font-size: 100%; 15 | } 16 | 17 | article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { 18 | display: block; 19 | } 20 | 21 | body { 22 | /* font-family: 'Titillium Web', Helvetica, sans-serif; */ 23 | font-family: 'Source Sans Pro', 'Hevletica Neue', Helvetica, Arial, sans-serif; 24 | font-size: 100%; 25 | line-height: 1.5; 26 | color: #444; 27 | background-color: #fff; 28 | } 29 | 30 | a { 31 | text-decoration: none; 32 | color: #0c5; 33 | } 34 | a:hover { 35 | color: #0d5; 36 | } 37 | 38 | .wrap { margin-right: auto; margin-left: auto; } 39 | 40 | h1, h2, h3 { line-height: 1.25; } 41 | h1, .h1 { font-size: 48px; } 42 | .h1-res { font-size: 24px; } 43 | @media screen and (min-width: 640px) { 44 | .h1-res { font-size: 48px; } 45 | } 46 | h2, .h2 { font-size: 32px; } 47 | h3, .h3 { font-size: 24px; } 48 | h4, .h4 { font-size: 20px; } 49 | h5, .h5, h6, .h6, p, .p { font-size: 16px; } 50 | small, .small { font-size: 12px; } 51 | 52 | code, pre, samp, .mono { font-family: 'Source Code Pro', monospace; } 53 | 54 | @media screen and (min-width: 640px) { 55 | .massive { font-size: 80px; } 56 | } 57 | 58 | .bold { font-weight: bold; } 59 | .reg { font-weight: normal; } 60 | .caps { text-transform: uppercase; letter-spacing: .2em; } 61 | .caps-tracked { letter-spacing: .5em; } 62 | 63 | .truncate { 64 | white-space: nowrap; 65 | overflow-x: hidden; 66 | text-overflow: ellipsis; 67 | } 68 | 69 | .js-truncate { 70 | white-space: nowrap; 71 | } 72 | 73 | .lh1 { line-height: 1; } 74 | 75 | .pad1 { padding: 16px; } 76 | .pad2 { padding: 32px; } 77 | .pad4 { padding: 64px; } 78 | 79 | .pad-x1 { padding-right: 16px; padding-left: 16px; } 80 | .pad-x2 { padding-right: 32px; padding-left: 32px; } 81 | 82 | .pad4-res { padding: 32px; } 83 | @media screen and (min-width: 640px) { 84 | .pad4-res { padding: 64px; } 85 | } 86 | 87 | .m0 { margin: 0; } 88 | .mt-5 { margin-top: 8px; } 89 | 90 | .m1 { margin: 16px; } 91 | .mt1 { margin-top: 16px; } 92 | .mr1 { margin-right: 16px; } 93 | .mb1 { margin-bottom: 16px; } 94 | .ml1 { margin-left: 16px; } 95 | 96 | .m2 { margin: 32px; } 97 | .mt2 { margin-top: 32px; } 98 | .mr2 { margin-right: 32px; } 99 | .mb2 { margin-bottom: 32px; } 100 | .ml2 { margin-left: 32px; } 101 | 102 | .m4 { margin: 64px; } 103 | .mt4 { margin-top: 64px; } 104 | .mr4 { margin-right: 64px; } 105 | .mb4 { margin-bottom: 64px; } 106 | .ml4 { margin-left: 64px; } 107 | 108 | .tappad { 109 | line-height: 48px; 110 | padding: 0 8px; 111 | } 112 | 113 | .tappad-small { height: 32px; line-height: 32px; } 114 | 115 | .sq32 { width: 32px; height: 32px; } 116 | .sq48 { width: 48px; height: 48px; } 117 | .sq64 { width: 64px; height: 64px; } 118 | .sq96 { width: 96px; height: 96px; } 119 | .sq128 { width: 128px; height: 128px; } 120 | 121 | .sq32-text { text-align: center; line-height: 32px; } 122 | .sq48-text { text-align: center; line-height: 48px; } 123 | .sq64-text { text-align: center; line-height: 64px; } 124 | .sq96-text { text-align: center; line-height: 96px; } 125 | .sq128-text { text-align: center; line-height: 128px; } 126 | 127 | .w100 { width: 100%; } 128 | .hi100 { height: 100%; } 129 | 130 | .hi64 { height: 64px; } 131 | .hi96 { height: 96px; } 132 | 133 | .min-hi48 { min-height: 48px; } 134 | .max-hi256 { max-height: 256px; } 135 | .max-hi512 { max-height: 512px; } 136 | 137 | .progress-thin { 138 | height: 2px; 139 | margin-top: 23px; 140 | } 141 | 142 | .over-scroll { 143 | overflow: scroll; 144 | -webkit-overflow-scrolling: touch; 145 | } 146 | 147 | .center { text-align: center; } 148 | 149 | .db { display: block; } 150 | .dib { display: inline-block; } 151 | 152 | .fl { float: left; } 153 | .fr { float: right; } 154 | 155 | .pos-rel { position: relative; } 156 | .pos-abs { position: absolute; } 157 | .fill { 158 | top:0; 159 | right:0; 160 | bottom:0; 161 | left:0; 162 | margin: auto; 163 | } 164 | 165 | .top { top: 0; } 166 | .right { right: 0; } 167 | .bottom { bottom: 0; } 168 | .left { left: 0; } 169 | 170 | .right1 { right: 16px; } 171 | 172 | .z1 { z-index: 1; } 173 | .z2 { z-index: 2; } 174 | .z3 { z-index: 3; } 175 | .z4 { z-index: 4; } 176 | 177 | 178 | .media, .bd { overflow: hidden; } 179 | .img { float: left; } 180 | 181 | @media screen and (max-width: 512px) { 182 | .media-fold .bd { clear: both; } 183 | } 184 | 185 | .btn { display: inline-block; } 186 | 187 | .btn-med { 188 | line-height: 48px; 189 | padding: 0 16px; 190 | border-radius: 4px; 191 | } 192 | .btn-big { 193 | line-height: 64px; 194 | padding: 0 16px; 195 | border-radius: 4px; 196 | } 197 | .btn-sq64 { 198 | line-height: 64px; 199 | width: 64px; 200 | text-align: center; 201 | } 202 | .btn-sq128 { 203 | line-height: 128px; 204 | width: 128px; 205 | text-align: center; 206 | } 207 | 208 | .rounded { border-radius: 4px; } 209 | .circle { border-radius: 50%; } 210 | 211 | .asp-16o9 { 212 | width: 100%; 213 | height: 0; 214 | padding-bottom: 56.25%; 215 | } 216 | 217 | .asp-3o1 { 218 | width: 100%; 219 | height: 0; 220 | padding-bottom: 33.33%; 221 | } 222 | 223 | .grid-1 { 224 | float: left; 225 | width: 100%; 226 | } 227 | @media screen and (min-width: 1024px) { 228 | .grid-1 { width: 45%; } 229 | .grid-1:nth-child(2n+1) { 230 | margin-right: 10%; 231 | clear: left; 232 | } 233 | } 234 | 235 | 236 | 237 | .btn-link { 238 | color: #fff; 239 | background-color: #0cf; 240 | } 241 | .btn-link:hover { 242 | color: #fff; 243 | background-color: #0ad; 244 | } 245 | .btn-link:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); } 246 | 247 | .btn-red { 248 | color: #fff; 249 | background-color: #f60; 250 | } 251 | .btn-red:hover { 252 | color: #fff; 253 | background-color: #d40; 254 | } 255 | .btn-red:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); } 256 | 257 | .btn-green { 258 | color: #fff; 259 | background-color: #0c5; 260 | } 261 | .btn-green:hover { 262 | color: #fff; 263 | background-color: #0d5; 264 | } 265 | .btn-green:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); } 266 | 267 | .btn-dark { 268 | color: #fff; 269 | background-color: rgba(0,0,0,.4); 270 | } 271 | .btn-dark:hover { 272 | color: #fff; 273 | background-color: rgba(0,0,0,.5); 274 | } 275 | 276 | .btn-scale:active { -webkit-transform: scale(.9); } 277 | 278 | /* Themes */ 279 | 280 | .dark-gray { color: #444; } 281 | .bg-dark-gray { background-color: #444; } 282 | a.dark-gray:hover { color: #666; } 283 | .link { color: #0cf; } 284 | .bg-link { background-color: #0cf; } 285 | 286 | .mid-gray { color: #999; } 287 | .bg-mid-gray { background-color: #999; } 288 | a.mid-gray:hover { color: #666; } 289 | .light-gray { color: #eee; } 290 | .bg-light-gray { background-color: #eee; } 291 | .white { color: #fff; } 292 | a.white:hover { color: rgba(255,255,255,.8); } 293 | .bg-white { background-color: #fff; } 294 | 295 | .red { color: #f60; } 296 | .bg-red { background-color: #f60; } 297 | .green { color: #0c5; } 298 | .bg-green { background-color: #0c5; } 299 | 300 | .text-shadow { text-shadow: 0 1px 2px rgba(0,0,0,.3); } 301 | .shadow-darken { box-shadow: inset 0 -16px 128px rgba(0,0,0,0.8); } 302 | 303 | .sc-waveform-whiten { -webkit-filter: contrast(200%); } 304 | 305 | .bg-center { background-position: center; background-repeat: no-repeat; } 306 | .bg-cover { background-size: cover; } 307 | .bg-contain { background-size: contain; } 308 | 309 | .progress { 310 | -webkit-appearance: none; 311 | } 312 | .progress::-webkit-progress-bar { 313 | -webkit-appearance: none; 314 | background-color: #eee; 315 | } 316 | .progress::-webkit-progress-value { -webkit-appearance: none; } 317 | 318 | .progress-gray::-webkit-progress-value { background-color: #999; } 319 | .progress-gray-alt::-webkit-progress-bar { background-color: #ddd; } 320 | 321 | .progress-white::-webkit-progress-value { background-color: #fff; } 322 | .progress-white::-webkit-progress-bar { background-color: rgba(255,255,255,.4); } 323 | 324 | 325 | 326 | .progress-link::-webkit-progress-value { background-color: #0cf; } 327 | .progress-green::-webkit-progress-value { background-color: #0c5; } 328 | 329 | .progress-white-bg::-webkit-progress-bar { 330 | background-color: #fff; 331 | } 332 | 333 | 334 | /* Animations */ 335 | 336 | @-webkit-keyframes popin { 337 | 0% { -webkit-transform: scale(.2); } 338 | 80% { -webkit-transform: scale(1.1); } 339 | 100% { -webkit-transform: scale(1); } 340 | } 341 | .anim-popin { -webkit-animation: popin .1s; } 342 | 343 | @-webkit-keyframes spin { 344 | from {-webkit-transform: rotate(0deg);} 345 | to {-webkit-transform: rotate(360deg);} 346 | } 347 | .anim-spin { -webkit-animation: spin 4s linear infinite; } 348 | 349 | @-webkit-keyframes slideleft { 350 | from {-webkit-transform: translate3d(100%, 0, 0);} 351 | to {-webkit-transform: translate3d(0%, 0, 0);} 352 | } 353 | .anim-slideleft { -webkit-animation: slideleft .2s ease; } 354 | 355 | .anim-hack { 356 | -webkit-backface-visibility: hidden; 357 | -webkit-perspective: 1000; 358 | } 359 | 360 | @-webkit-keyframes float-up { 361 | 0% { opacity: 0; top: 4rem; } 362 | 100% { opacity: 1; top: 0; } 363 | } 364 | 365 | .float-up { 366 | opacity: 0; 367 | position: relative; 368 | -webkit-animation-name: float-up; 369 | -webkit-animation-duration: .3s; 370 | -webkit-animation-fill-mode: forwards; 371 | } 372 | 373 | @-webkit-keyframes fade-in { 374 | 0% { opacity: 0; } 375 | 100% { opacity: 1; } 376 | } 377 | 378 | .fade-in { 379 | opacity: 0; 380 | -webkit-animation-name: fade-in; 381 | -webkit-animation-duration: 2s; 382 | -webkit-animation-fill-mode: forwards; 383 | } 384 | 385 | .anim-delay-1 { -webkit-animation-delay: .1s; } 386 | .anim-delay-2 { -webkit-animation-delay: .2s; } 387 | .anim-delay-3 { -webkit-animation-delay: .3s; } 388 | .anim-delay-4 { -webkit-animation-delay: .4s; } 389 | 390 | 391 | /* Header Waveform */ 392 | 393 | .header-waveform { 394 | /*height: 256px;*/ 395 | overflow-x: hidden; 396 | position: absolute; 397 | top: 0; 398 | right: 0; 399 | bottom: 0; 400 | left: 0; 401 | margin-top: 64px; 402 | } 403 | 404 | .header-bg { 405 | background-size: 1600%; 406 | background-image: url(images/plangular-waveform-3.svg); 407 | background-position: left center; 408 | background-repeat: repeat-x; 409 | } 410 | 411 | .header-waveform-img { 412 | display: block; 413 | /*width: 800%;*/ 414 | height: 128px; 415 | opacity: 1; 416 | position: relative; 417 | -webkit-transition: left linear .2s; 418 | left: 100%; 419 | } 420 | 421 | /* Radicons */ 422 | 423 | @font-face { 424 | font-family: 'Radicons'; 425 | src:url('icons/Radicons.eot'); 426 | src:url('icons/Radicons.eot?#iefix') format('embedded-opentype'), 427 | url('icons/Radicons.woff') format('woff'), 428 | url('icons/Radicons.ttf') format('truetype'), 429 | url('icons/Radicons.svg#Radicons') format('svg'); 430 | font-weight: normal; 431 | font-style: normal; 432 | } 433 | 434 | [data-icon]:before { 435 | font-family: 'Radicons'; 436 | content: attr(data-icon); 437 | speak: none; 438 | font-weight: normal; 439 | font-variant: normal; 440 | text-transform: none; 441 | -webkit-font-smoothing: antialiased; 442 | } 443 | 444 | .icon-settings, .icon-fast-forward, .icon-skip, .icon-pause, 445 | .icon-play, .icon-previous, .icon-rewind, .icon-heart { 446 | font-family: 'Radicons'; 447 | speak: none; 448 | font-style: normal; 449 | font-weight: normal; 450 | font-variant: normal; 451 | text-transform: none; 452 | -webkit-font-smoothing: antialiased; 453 | } 454 | .icon-settings:before { content: "\2318"; } 455 | .icon-fast-forward:before { content: "\290f"; } 456 | .icon-skip:before { content: "\2192"; } 457 | .icon-pause:before { content: "\25fc"; } 458 | .icon-play:before { content: "\25b6"; } 459 | .icon-previous:before { content: "\2190"; } 460 | .icon-rewind:before { content: "\290e"; } 461 | .icon-heart:before { content: "\2665"; } 462 | 463 | .icon-nudge-right { 464 | position: relative; 465 | left: .125em; 466 | } 467 | -------------------------------------------------------------------------------- /sass/_spacing.scss: -------------------------------------------------------------------------------- 1 | /* 2 | SPACING 3 | 4 | An eight step powers of two scale ranging from 0 to 16rem. 5 | 6 | Legend: 7 | 8 | p = padding 9 | m = margin 10 | 11 | a = all 12 | h = horizontal 13 | v = vertical 14 | t = top 15 | r = right 16 | b = bottom 17 | l = left 18 | 19 | n = none 20 | xs = extra small 21 | s = small 22 | m = medium 23 | l = large 24 | x = extra 25 | xl = extra large 26 | xxl = extra extra large 27 | 28 | */ 29 | 30 | .pan { padding: 0; } 31 | .paxs { padding: .25rem; } 32 | .pas { padding: .5rem; } 33 | .pam { padding: 1rem; } 34 | .pal { padding: 2rem; } 35 | .pax { padding: 4rem; } 36 | .paxl { padding: 8rem; } 37 | .paxxl { padding: 16rem; } 38 | 39 | .pln { padding-left: 0; } 40 | .plxs { padding-left: .25rem; } 41 | .pls { padding-left: .5rem; } 42 | .plm { padding-left: 1rem; } 43 | .pll { padding-left: 2rem; } 44 | .plx { padding-left: 4rem; } 45 | .plxl { padding-left: 8rem; } 46 | .plxxl { padding-left: 16rem; } 47 | 48 | .prn { padding-right: 0; } 49 | .prxs { padding-right: .25rem; } 50 | .prs { padding-right: .5rem; } 51 | .prm { padding-right: 1rem; } 52 | .prl { padding-right: 2rem; } 53 | .prx { padding-right: 4rem; } 54 | .prxl { padding-right: 8rem; } 55 | .prxxl { padding-right: 16rem; } 56 | 57 | .pbn { padding-bottom: 0; } 58 | .pbxs { padding-bottom: .25rem; } 59 | .pbs { padding-bottom: .5rem; } 60 | .pbm { padding-bottom: 1rem; } 61 | .pbl { padding-bottom: 2rem; } 62 | .pbx { padding-bottom: 4rem; } 63 | .pbxl { padding-bottom: 8rem; } 64 | .pbxxl { padding-bottom: 16rem; } 65 | 66 | .ptn { padding-top: 0; } 67 | .ptxs { padding-top: .25rem; } 68 | .pts { padding-top: .5rem; } 69 | .ptm { padding-top: 1rem; } 70 | .ptl { padding-top: 2rem; } 71 | .ptx { padding-top: 4rem; } 72 | .ptxl { padding-top: 8rem; } 73 | .ptxxl { padding-top: 16rem; } 74 | 75 | .pvn { padding-top: 0; padding-bottom: 0; } 76 | .pvxs { padding-top: .25rem; padding-bottom: .25rem; } 77 | .pvs { padding-top: .5rem; padding-bottom: .5rem; } 78 | .pvm { padding-top: 1rem; padding-bottom: 1rem; } 79 | .pvl { padding-top: 2rem; padding-bottom: 2rem; } 80 | .pvx { padding-top: 4rem; padding-bottom: 4rem; } 81 | .pvxl { padding-top: 8rem; padding-bottom: 8rem; } 82 | .pvxxl { padding-top: 16rem; padding-bottom: 16rem; } 83 | 84 | .phn { padding-left: 0; padding-right: 0; } 85 | .pvxs { padding-left: .25rem; padding-right: .25rem; } 86 | .phs { padding-left: .5rem; padding-right: .5rem; } 87 | .phm { padding-left: 1rem; padding-right: 1rem; } 88 | .phl { padding-left: 2rem; padding-right: 2rem; } 89 | .phx { padding-left: 4rem; padding-right: 4rem; } 90 | .phxl { padding-left: 8rem; padding-right: 8rem; } 91 | .phxxl { padding-left: 16rem; padding-right: 16rem; } 92 | 93 | .man { margin: 0; } 94 | .maxs { margin: .25rem; } 95 | .mas { margin: .5rem; } 96 | .mam { margin: 1rem; } 97 | .mal { margin: 2rem; } 98 | .max { margin: 4rem; } 99 | .maxl { margin: 8rem; } 100 | .maxxl { margin: 16rem; } 101 | 102 | .mln { margin-left: 0; } 103 | .mlxs { margin-left: .25rem; } 104 | .mls { margin-left: .5rem; } 105 | .mlm { margin-left: 1rem; } 106 | .mll { margin-left: 2rem; } 107 | .mlx { margin-left: 4rem; } 108 | .mlxl { margin-left: 8rem; } 109 | .mlxxl { margin-left: 16rem; } 110 | 111 | .mrn { margin-right: 0; } 112 | .mrxs { margin-right: .25rem; } 113 | .mrs { margin-right: .5rem; } 114 | .mrm { margin-right: 1rem; } 115 | .mrl { margin-right: 2rem; } 116 | .mrx { margin-right: 4rem; } 117 | .mrxl { margin-right: 8rem; } 118 | .mrxxl { margin-right: 16rem; } 119 | 120 | .mbn { margin-bottom: 0; } 121 | .mbxs { margin-bottom: .25rem; } 122 | .mbs { margin-bottom: .5rem; } 123 | .mbm { margin-bottom: 1rem; } 124 | .mbl { margin-bottom: 2rem; } 125 | .mbx { margin-bottom: 4rem; } 126 | .mbxl { margin-bottom: 8rem; } 127 | .mbxxl { margin-bottom: 16rem; } 128 | 129 | .mtn { margin-top: 0; } 130 | .mtxs { margin-top: .25rem; } 131 | .mts { margin-top: .5rem; } 132 | .mtm { margin-top: 1rem; } 133 | .mtl { margin-top: 2rem; } 134 | .mtx { margin-top: 4rem; } 135 | .mtxl { margin-top: 8rem; } 136 | .mtxxl { margin-top: 16rem; } 137 | 138 | .mvn { margin-top: 0; margin-bottom: 0rem; } 139 | .mvxs { margin-top: .25rem; margin-bottom: .25rem; } 140 | .mvs { margin-top: .5rem; margin-bottom: .5rem; } 141 | .mvm { margin-top: 1rem; margin-bottom: 1rem; } 142 | .mvl { margin-top: 2rem; margin-bottom: 2rem; } 143 | .mvx { margin-top: 4rem; margin-bottom: 4rem; } 144 | .mvxl { margin-top: 8rem; margin-bottom: 8rem; } 145 | .mvxl { margin-top: 16rem; margin-bottom: 16rem; } 146 | 147 | .mhn { margin-left: 0; margin-right: 0; } 148 | .mhs { margin-left: .5rem; margin-right: .5rem; } 149 | .mhm { margin-left: 1rem; margin-right: 1rem; } 150 | .mhl { margin-left: 2rem; margin-right: 2rem; } 151 | .mhx { margin-left: 4rem; margin-right: 4rem; } 152 | .mhxl { margin-left: 8rem; margin-right: 8rem; } 153 | .mhxxl { margin-left: 16rem; margin-right: 16rem; } 154 | 155 | @include break(not-small) { 156 | .pan-ns { padding: 0; } 157 | .paxs-ns { padding: .25rem; } 158 | .pas-ns { padding: .5rem; } 159 | .pam-ns { padding: 1rem; } 160 | .pal-ns { padding: 2rem; } 161 | .pax-ns { padding: 4rem; } 162 | .paxl-ns { padding: 8rem; } 163 | .paxxl-ns { padding: 16rem; } 164 | 165 | .pln-ns { padding-left: 0; } 166 | .plxs-ns { padding-left: .25rem; } 167 | .pls-ns { padding-left: .5rem; } 168 | .plm-ns { padding-left: 1rem; } 169 | .pll-ns { padding-left: 2rem; } 170 | .plx-ns { padding-left: 4rem; } 171 | .plxl-ns { padding-left: 8rem; } 172 | .plxxl-ns { padding-left: 16rem; } 173 | 174 | .prn-ns { padding-right: 0; } 175 | .prxs-ns { padding-right: .25rem; } 176 | .prs-ns { padding-right: .5rem; } 177 | .prm-ns { padding-right: 1rem; } 178 | .prl-ns { padding-right: 2rem; } 179 | .prx-ns { padding-right: 4rem; } 180 | .prxl-ns { padding-right: 8rem; } 181 | .prxxl-ns { padding-right: 16rem; } 182 | 183 | .pbn-ns { padding-bottom: 0; } 184 | .pbxs-ns { padding-bottom: .25rem; } 185 | .pbs-ns { padding-bottom: .5rem; } 186 | .pbm-ns { padding-bottom: 1rem; } 187 | .pbl-ns { padding-bottom: 2rem; } 188 | .pbx-ns { padding-bottom: 4rem; } 189 | .pbxl-ns { padding-bottom: 8rem; } 190 | .pbxxl-ns { padding-bottom: 16rem; } 191 | 192 | .ptn-ns { padding-top: 0; } 193 | .ptxs-ns { padding-top: .25rem; } 194 | .pts-ns { padding-top: .5rem; } 195 | .ptm-ns { padding-top: 1rem; } 196 | .ptl-ns { padding-top: 2rem; } 197 | .ptx-ns { padding-top: 4rem; } 198 | .ptxl-ns { padding-top: 8rem; } 199 | .ptxxl-ns { padding-top: 16rem; } 200 | 201 | .pvn-ns { padding-top: 0; padding-bottom: 0; } 202 | .pvxs-ns { padding-top: .25rem; padding-bottom: .25rem; } 203 | .pvs-ns { padding-top: .5rem; padding-bottom: .5rem; } 204 | .pvm-ns { padding-top: 1rem; padding-bottom: 1rem; } 205 | .pvl-ns { padding-top: 2rem; padding-bottom: 2rem; } 206 | .pvx-ns { padding-top: 4rem; padding-bottom: 4rem; } 207 | .pvxl-ns { padding-top: 8rem; padding-bottom: 8rem; } 208 | .pvxxl-ns { padding-top: 16rem; padding-bottom: 16rem; } 209 | 210 | .phn-ns { padding-left: 0; padding-right: 0; } 211 | .pvxs-ns { padding-left: .25rem; padding-right: .25rem; } 212 | .phs-ns { padding-left: .5rem; padding-right: .5rem; } 213 | .phm-ns { padding-left: 1rem; padding-right: 1rem; } 214 | .phl-ns { padding-left: 2rem; padding-right: 2rem; } 215 | .phx-ns { padding-left: 4rem; padding-right: 4rem; } 216 | .phxl-ns { padding-left: 8rem; padding-right: 8rem; } 217 | .phxxl-ns { padding-left: 16rem; padding-right: 16rem; } 218 | 219 | .man-ns { margin: 0; } 220 | .maxs-ns { margin: .25rem; } 221 | .mas-ns { margin: .5rem; } 222 | .mam-ns { margin: 1rem; } 223 | .mal-ns { margin: 2rem; } 224 | .max-ns { margin: 4rem; } 225 | .maxl-ns { margin: 8rem; } 226 | .maxxl-ns { margin: 16rem; } 227 | 228 | .mln-ns { margin-left: 0; } 229 | .mlxs-ns { margin-left: .25rem; } 230 | .mls-ns { margin-left: .5rem; } 231 | .mlm-ns { margin-left: 1rem; } 232 | .mll-ns { margin-left: 2rem; } 233 | .mlx-ns { margin-left: 4rem; } 234 | .mlxl-ns { margin-left: 8rem; } 235 | .mlxxl-ns { margin-left: 16rem; } 236 | 237 | .mrn-ns { margin-right: 0; } 238 | .mrxs-ns { margin-right: .25rem; } 239 | .mrs-ns { margin-right: .5rem; } 240 | .mrm-ns { margin-right: 1rem; } 241 | .mrl-ns { margin-right: 2rem; } 242 | .mrx-ns { margin-right: 4rem; } 243 | .mrxl-ns { margin-right: 8rem; } 244 | .mrxxl-ns { margin-right: 16rem; } 245 | 246 | .mbn-ns { margin-bottom: 0; } 247 | .mbxs-ns { margin-bottom: .25rem; } 248 | .mbs-ns { margin-bottom: .5rem; } 249 | .mbm-ns { margin-bottom: 1rem; } 250 | .mbl-ns { margin-bottom: 2rem; } 251 | .mbx-ns { margin-bottom: 4rem; } 252 | .mbxl-ns { margin-bottom: 8rem; } 253 | .mbxxl-ns { margin-bottom: 16rem; } 254 | 255 | .mtn-ns { margin-top: 0; } 256 | .mtxs-ns { margin-top: .25rem; } 257 | .mts-ns { margin-top: .5rem; } 258 | .mtm-ns { margin-top: 1rem; } 259 | .mtl-ns { margin-top: 2rem; } 260 | .mtx-ns { margin-top: 4rem; } 261 | .mtxl-ns { margin-top: 8rem; } 262 | .mtxxl-ns { margin-top: 16rem; } 263 | 264 | .mvn-ns { margin-top: 0; margin-bottom: 0rem; } 265 | .mvxs-ns { margin-top: .25rem; margin-bottom: .25rem; } 266 | .mvs-ns { margin-top: .5rem; margin-bottom: .5rem; } 267 | .mvm-ns { margin-top: 1rem; margin-bottom: 1rem; } 268 | .mvl-ns { margin-top: 2rem; margin-bottom: 2rem; } 269 | .mvx-ns { margin-top: 4rem; margin-bottom: 4rem; } 270 | .mvxl-ns { margin-top: 8rem; margin-bottom: 8rem; } 271 | .mvxxl-ns { margin-top: 16rem; margin-bottom: 16rem; } 272 | 273 | .mhn-ns { margin-left: 0; margin-right: 0; } 274 | .mhs-ns { margin-left: .5rem; margin-right: .5rem; } 275 | .mhm-ns { margin-left: 1rem; margin-right: 1rem; } 276 | .mhl-ns { margin-left: 2rem; margin-right: 2rem; } 277 | .mhx-ns { margin-left: 4rem; margin-right: 4rem; } 278 | .mhxl-ns { margin-left: 8rem; margin-right: 8rem; } 279 | .mhxxl-ns { margin-left: 16rem; margin-right: 16rem; } 280 | 281 | } 282 | 283 | @include break(medium) { 284 | .pan-m { padding: 0; } 285 | .paxs-m { padding: .25rem; } 286 | .pas-m { padding: .5rem; } 287 | .pam-m { padding: 1rem; } 288 | .pal-m { padding: 2rem; } 289 | .pax-m { padding: 4rem; } 290 | .paxl-m { padding: 8rem; } 291 | .paxxl-m { padding: 16rem; } 292 | 293 | .pln-m { padding-left: 0; } 294 | .plxs-m { padding-left: .25rem; } 295 | .pls-m { padding-left: .5rem; } 296 | .plm-m { padding-left: 1rem; } 297 | .pll-m { padding-left: 2rem; } 298 | .plx-m { padding-left: 4rem; } 299 | .plxl-m { padding-left: 8rem; } 300 | .plxxl-m { padding-left: 16rem; } 301 | 302 | .prn-m { padding-right: 0; } 303 | .prxs-m { padding-right: .25rem; } 304 | .prs-m { padding-right: .5rem; } 305 | .prm-m { padding-right: 1rem; } 306 | .prl-m { padding-right: 2rem; } 307 | .prx-m { padding-right: 4rem; } 308 | .prxl-m { padding-right: 8rem; } 309 | .prxxl-m { padding-right: 16rem; } 310 | 311 | .pbn-m { padding-bottom: 0; } 312 | .pbxs-m { padding-bottom: .25rem; } 313 | .pbs-m { padding-bottom: .5rem; } 314 | .pbm-m { padding-bottom: 1rem; } 315 | .pbl-m { padding-bottom: 2rem; } 316 | .pbx-m { padding-bottom: 4rem; } 317 | .pbxl-m { padding-bottom: 8rem; } 318 | .pbxxl-m { padding-bottom: 16rem; } 319 | 320 | .ptn-m { padding-top: 0; } 321 | .ptxs-m { padding-top: .25rem; } 322 | .pts-m { padding-top: .5rem; } 323 | .ptm-m { padding-top: 1rem; } 324 | .ptl-m { padding-top: 2rem; } 325 | .ptx-m { padding-top: 4rem; } 326 | .ptxl-m { padding-top: 8rem; } 327 | .ptxxl-m { padding-top: 16rem; } 328 | 329 | .pvn-m { padding-top: 0; padding-bottom: 0; } 330 | .pvxs-m { padding-top: .25rem; padding-bottom: .25rem; } 331 | .pvs-m { padding-top: .5rem; padding-bottom: .5rem; } 332 | .pvm-m { padding-top: 1rem; padding-bottom: 1rem; } 333 | .pvl-m { padding-top: 2rem; padding-bottom: 2rem; } 334 | .pvx-m { padding-top: 4rem; padding-bottom: 4rem; } 335 | .pvxl-m { padding-top: 8rem; padding-bottom: 8rem; } 336 | .pvxxl-m { padding-top: 16rem; padding-bottom: 16rem; } 337 | 338 | .phn-m { padding-left: 0; padding-right: 0; } 339 | .pvxs-m { padding-left: .25rem; padding-right: .25rem; } 340 | .phs-m { padding-left: .5rem; padding-right: .5rem; } 341 | .phm-m { padding-left: 1rem; padding-right: 1rem; } 342 | .phl-m { padding-left: 2rem; padding-right: 2rem; } 343 | .phx-m { padding-left: 4rem; padding-right: 4rem; } 344 | .phxl-m { padding-left: 8rem; padding-right: 8rem; } 345 | .phxxl-m { padding-left: 16rem; padding-right: 16rem; } 346 | 347 | .man-m { margin: 0; } 348 | .maxs-m { margin: .25rem; } 349 | .mas-m { margin: .5rem; } 350 | .mam-m { margin: 1rem; } 351 | .mal-m { margin: 2rem; } 352 | .max-m { margin: 4rem; } 353 | .maxl-m { margin: 8rem; } 354 | .maxxl-m { margin: 16rem; } 355 | 356 | .mln-m { margin-left: 0; } 357 | .mlxs-m { margin-left: .25rem; } 358 | .mls-m { margin-left: .5rem; } 359 | .mlm-m { margin-left: 1rem; } 360 | .mll-m { margin-left: 2rem; } 361 | .mlx-m { margin-left: 4rem; } 362 | .mlxl-m { margin-left: 8rem; } 363 | .mlxxl-m { margin-left: 16rem; } 364 | 365 | .mrn-m { margin-right: 0; } 366 | .mrxs-m { margin-right: .25rem; } 367 | .mrs-m { margin-right: .5rem; } 368 | .mrm-m { margin-right: 1rem; } 369 | .mrl-m { margin-right: 2rem; } 370 | .mrx-m { margin-right: 4rem; } 371 | .mrxl-m { margin-right: 8rem; } 372 | .mrxxl-m { margin-right: 16rem; } 373 | 374 | .mbn-m { margin-bottom: 0; } 375 | .mbxs-m { margin-bottom: .25rem; } 376 | .mbs-m { margin-bottom: .5rem; } 377 | .mbm-m { margin-bottom: 1rem; } 378 | .mbl-m { margin-bottom: 2rem; } 379 | .mbx-m { margin-bottom: 4rem; } 380 | .mbxl-m { margin-bottom: 8rem; } 381 | .mbxxl-m { margin-bottom: 16rem; } 382 | 383 | .mtn-m { margin-top: 0; } 384 | .mtxs-m { margin-top: .25rem; } 385 | .mts-m { margin-top: .5rem; } 386 | .mtm-m { margin-top: 1rem; } 387 | .mtl-m { margin-top: 2rem; } 388 | .mtx-m { margin-top: 4rem; } 389 | .mtxl-m { margin-top: 8rem; } 390 | .mtxxl-m { margin-top: 16rem; } 391 | 392 | .mvn-m { margin-top: 0; margin-bottom: 0rem; } 393 | .mvxs-m { margin-top: .25rem; margin-bottom: .25rem; } 394 | .mvs-m { margin-top: .5rem; margin-bottom: .5rem; } 395 | .mvm-m { margin-top: 1rem; margin-bottom: 1rem; } 396 | .mvl-m { margin-top: 2rem; margin-bottom: 2rem; } 397 | .mvx-m { margin-top: 4rem; margin-bottom: 4rem; } 398 | .mvxl-m { margin-top: 8rem; margin-bottom: 8rem; } 399 | .mvxxl-m { margin-top: 16rem; margin-bottom: 16rem; } 400 | 401 | .mhn-m { margin-left: 0; margin-right: 0; } 402 | .mhxs-m { margin-left: .25rem; margin-right: .25rem; } 403 | .mhs-m { margin-left: .5rem; margin-right: .5rem; } 404 | .mhm-m { margin-left: 1rem; margin-right: 1rem; } 405 | .mhl-m { margin-left: 2rem; margin-right: 2rem; } 406 | .mhx-m { margin-left: 4rem; margin-right: 4rem; } 407 | .mhxl { margin-left: 8rem; margin-right: 8rem; } 408 | .mhxxl { margin-left: 16rem; margin-right: 16rem; } 409 | 410 | } 411 | 412 | @include break(large) { 413 | .pan-l { padding: 0; } 414 | .paxs-l { padding: .25rem; } 415 | .pas-l { padding: .5rem; } 416 | .pam-l { padding: 1rem; } 417 | .pal-l { padding: 2rem; } 418 | .pax-l { padding: 4rem; } 419 | .paxl-l { padding: 8rem; } 420 | .paxxl-l { padding: 16rem; } 421 | 422 | .pln-l { padding-left: 0; } 423 | .plxs-l { padding-left: .25rem; } 424 | .pls-l { padding-left: .5rem; } 425 | .plm-l { padding-left: 1rem; } 426 | .pll-l { padding-left: 2rem; } 427 | .plx-l { padding-left: 4rem; } 428 | .plxl-l { padding-left: 8rem; } 429 | .plxxl-l { padding-left: 16rem; } 430 | 431 | .prn-l { padding-right: 0; } 432 | .prxs-l { padding-right: .25rem; } 433 | .prs-l { padding-right: .5rem; } 434 | .prm-l { padding-right: 1rem; } 435 | .prl-l { padding-right: 2rem; } 436 | .prx-l { padding-right: 4rem; } 437 | .prxl-l { padding-right: 8rem; } 438 | .prxxl-l { padding-right: 16rem; } 439 | 440 | .pbn-l { padding-bottom: 0; } 441 | .pbxs-l { padding-bottom: .25rem; } 442 | .pbs-l { padding-bottom: .5rem; } 443 | .pbm-l { padding-bottom: 1rem; } 444 | .pbl-l { padding-bottom: 2rem; } 445 | .pbx-l { padding-bottom: 4rem; } 446 | .pbxl-l { padding-bottom: 8rem; } 447 | .pbxxl-l { padding-bottom: 16rem; } 448 | 449 | .ptn-l { padding-top: 0; } 450 | .ptxs-l { padding-top: .25rem; } 451 | .pts-l { padding-top: .5rem; } 452 | .ptm-l { padding-top: 1rem; } 453 | .ptl-l { padding-top: 2rem; } 454 | .ptx-l { padding-top: 4rem; } 455 | .ptxl-l { padding-top: 8rem; } 456 | .ptxxl-l { padding-top: 16rem; } 457 | 458 | .pvn-l { padding-top: 0; padding-bottom: 0; } 459 | .pvxs-l { padding-top: .25rem; padding-bottom: .25rem; } 460 | .pvs-l { padding-top: .5rem; padding-bottom: .5rem; } 461 | .pvm-l { padding-top: 1rem; padding-bottom: 1rem; } 462 | .pvl-l { padding-top: 2rem; padding-bottom: 2rem; } 463 | .pvx-l { padding-top: 4rem; padding-bottom: 4rem; } 464 | .pvxl-l { padding-top: 8rem; padding-bottom: 8rem; } 465 | .pvxxl-l { padding-top: 16rem; padding-bottom: 16rem; } 466 | 467 | .phn-l { padding-left: 0; padding-right: 0; } 468 | .pvxs-l { padding-left: .25rem; padding-right: .25rem; } 469 | .phs-l { padding-left: .5rem; padding-right: .5rem; } 470 | .phm-l { padding-left: 1rem; padding-right: 1rem; } 471 | .phl-l { padding-left: 2rem; padding-right: 2rem; } 472 | .phx-l { padding-left: 4rem; padding-right: 4rem; } 473 | .phxl-l { padding-left: 8rem; padding-right: 8rem; } 474 | .phxxl-l { padding-left: 16rem; padding-right: 16rem; } 475 | 476 | .man-l { margin: 0; } 477 | .maxs-l { margin: .25rem; } 478 | .mas-l { margin: .5rem; } 479 | .mam-l { margin: 1rem; } 480 | .mal-l { margin: 2rem; } 481 | .max-l { margin: 4rem; } 482 | .maxl-l { margin: 8rem; } 483 | .maxxl-l { margin: 16rem; } 484 | 485 | .mln-l { margin-left: 0; } 486 | .mlxs-l { margin-left: .25rem; } 487 | .mls-l { margin-left: .5rem; } 488 | .mlm-l { margin-left: 1rem; } 489 | .mll-l { margin-left: 2rem; } 490 | .mlx-l { margin-left: 4rem; } 491 | .mlxl-l { margin-left: 8rem; } 492 | .mlxxl-l { margin-left: 16rem; } 493 | 494 | .mrn-l { margin-right: 0; } 495 | .mrxs-l { margin-right: .25rem; } 496 | .mrs-l { margin-right: .5rem; } 497 | .mrm-l { margin-right: 1rem; } 498 | .mrl-l { margin-right: 2rem; } 499 | .mrx-l { margin-right: 4rem; } 500 | .mrxl-l { margin-right: 8rem; } 501 | .mrxxl-l { margin-right: 16rem; } 502 | 503 | .mbn-l { margin-bottom: 0; } 504 | .mbxs-l { margin-bottom: .25rem; } 505 | .mbs-l { margin-bottom: .5rem; } 506 | .mbm-l { margin-bottom: 1rem; } 507 | .mbl-l { margin-bottom: 2rem; } 508 | .mbx-l { margin-bottom: 4rem; } 509 | .mbxl-l { margin-bottom: 8rem; } 510 | .mbxxl-l { margin-bottom: 16rem; } 511 | 512 | .mtn-l { margin-top: 0; } 513 | .mtxs-l { margin-top: .25rem; } 514 | .mts-l { margin-top: .5rem; } 515 | .mtm-l { margin-top: 1rem; } 516 | .mtl-l { margin-top: 2rem; } 517 | .mtx-l { margin-top: 4rem; } 518 | .mtxl-l { margin-top: 8rem; } 519 | .mtxxl-l { margin-top: 16rem; } 520 | 521 | .mvn-l { margin-top: 0; margin-bottom: 0rem; } 522 | .mvxs-l { margin-top: .25rem; margin-bottom: .25rem; } 523 | .mvs-l { margin-top: .5rem; margin-bottom: .5rem; } 524 | .mvm-l { margin-top: 1rem; margin-bottom: 1rem; } 525 | .mvl-l { margin-top: 2rem; margin-bottom: 2rem; } 526 | .mvx-l { margin-top: 4rem; margin-bottom: 4rem; } 527 | .mvxl-l { margin-top: 8rem; margin-bottom: 8rem; } 528 | .mvxxl-l { margin-top: 16rem; margin-bottom: 16rem; } 529 | 530 | .mhn-l { margin-left: 0; margin-right: 0; } 531 | .mhxs-l { margin-left: .25rem; margin-right: .25rem; } 532 | .mhs-l { margin-left: .5rem; margin-right: .5rem; } 533 | .mhm-l { margin-left: 1rem; margin-right: 1rem; } 534 | .mhl-l { margin-left: 2rem; margin-right: 2rem; } 535 | .mhx-l { margin-left: 4rem; margin-right: 4rem; } 536 | .mhxl-l { margin-left: 8rem; margin-right: 8rem; } 537 | .mhxxl-l { margin-left: 16rem; margin-right: 16rem; } 538 | } 539 | 540 | --------------------------------------------------------------------------------