From 1db4fab1557562ba4580f42c114a35f4d00ab1df Mon Sep 17 00:00:00 2001 From: Jon Gold Date: Sun, 8 Mar 2015 21:41:24 +0000 Subject: [PATCH] Add tabs to presentation section --- css/base.css | 18 ++++++++ css/base.min.css | 2 +- gulpfile.js | 16 +++++-- index.html | 23 +++------- js/app.js | 114 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/css/base.css | 4 ++ src/es6/app.es6 | 87 ++++++++++++++++++++++++++++++++++++ 8 files changed, 242 insertions(+), 23 deletions(-) create mode 100644 js/app.js create mode 100644 src/es6/app.es6 diff --git a/css/base.css b/css/base.css index b007de1..2a3fd75 100644 --- a/css/base.css +++ b/css/base.css @@ -1259,6 +1259,7 @@ input[type=range] { .range-light::-webkit-slider-thumb { -webkit-appearance: none; + position: relative; width: .5rem; height: 1.25rem; border-radius: 3px; @@ -1267,6 +1268,19 @@ input[type=range] { margin-top: -0.5rem; } +/* Touch screen friendly pseudo element */ + +.range-light::-webkit-slider-thumb:before { + content: ''; + display: block; + position: absolute; + top: -0.5rem; + left: -0.875rem; + width: 2.25rem; + height: 2.25rem; + opacity: 0; +} + .range-light::-moz-range-thumb { width: .5rem; height: 1.25rem; @@ -1907,6 +1921,10 @@ html { background: rgba(255, 255, 255, .2); } +.border-transparent { + border-color: transparent; +} + .mbn4 { margin-bottom: -4rem; } diff --git a/css/base.min.css b/css/base.min.css index 1b675d3..e014a19 100644 --- a/css/base.min.css +++ b/css/base.min.css @@ -1 +1 @@ -body,button{margin:0}button,input,select,textarea{font-family:inherit}img{max-width:100%}svg{max-height:100%}fieldset,input,select,textarea{font-size:1rem;margin-top:0;margin-bottom:.5rem}input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{box-sizing:border-box;height:2.25rem;padding:.5rem;vertical-align:middle;-webkit-appearance:none}select{box-sizing:border-box;line-height:1.75;padding:.5rem}select:not([multiple]){height:2.25rem;vertical-align:middle}textarea{box-sizing:border-box;line-height:1.75;padding:.5rem}.fieldset-reset{padding:0;margin-left:0;margin-right:0;border:0}.fieldset-reset legend{padding:0}.button,button{font-size:inherit;font-weight:500;text-decoration:none;cursor:pointer;display:inline-block;box-sizing:border-box;line-height:1.125rem;padding:1rem 2rem;margin:0;height:auto;border:1px solid transparent;vertical-align:middle;-webkit-appearance:none}::-moz-focus-inner{border:0;padding:0}.button:hover{text-decoration:none}table{border-collapse:separate;border-spacing:0;max-width:100%;width:100%}th{text-align:left;font-weight:700}td,th{padding:.25rem 1rem;line-height:inherit}th{vertical-align:bottom}td{vertical-align:top}body{font-family:aktiv-grotesk-std,'Helvetica Neue',Helvetica,sans-serif;line-height:1.5;font-size:100%}h1,h2,h3,h4,h5,h6{font-family:aktiv-grotesk-std,'Helvetica Neue',Helvetica,sans-serif;font-weight:300;line-height:1.25;margin-top:1em;margin-bottom:.5em}dl,ol,p,ul{font-size:1rem;margin-top:0;margin-bottom:1rem}ol,ul{padding-left:2rem}code,pre,samp{font-family:'Source Code Pro',Consolas,monospace;font-size:inherit}pre{margin-top:0;margin-bottom:1rem;overflow-x:scroll}hr{margin-top:2rem;margin-bottom:2rem}blockquote{margin-top:2rem;margin-bottom:2rem;margin-left:0;padding-left:1rem;padding-right:1rem}blockquote,blockquote p{font-size:1.25rem;font-style:italic}.h1,h1{font-size:2rem}.h2,h2{font-size:1.5rem}.h3,h3{font-size:1.25rem}.h4,h4{font-size:1rem}.h5,h5{font-size:.875rem}.h6,h6{font-size:.75rem}.list-reset{list-style:none;padding-left:0}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.half-width{width:50%}.full-width{width:100%}.bold{font-weight:700}.regular{font-weight:400}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.left-align{text-align:left}.center{text-align:center}.right-align{text-align:right}.justify{text-align:justify}.nowrap{white-space:nowrap}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1{margin-left:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2{margin-left:1rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3{margin-left:2rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.mxn1{margin-left:-.5rem;margin-right:-.5rem}.mxn2{margin-left:-1rem;margin-right:-1rem}.mxn3{margin-left:-2rem;margin-right:-2rem}.mxn4{margin-left:-4rem;margin-right:-4rem}.mx-auto{margin-left:auto;margin-right:auto}.p1{padding:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-left:.5rem;padding-right:.5rem}.p2{padding:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-left:1rem;padding-right:1rem}.p3{padding:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-left:2rem;padding-right:2rem}.p4{padding:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.px4{padding-left:4rem;padding-right:4rem}.display-none,.lg-show,.md-show,.sm-show{display:none!important}@media (min-width:40em){.sm-show{display:block!important}}@media (min-width:52em){.md-show{display:block!important}}@media (min-width:64em){.lg-show{display:block!important}}@media (min-width:40em){.sm-hide{display:none!important}}@media (min-width:52em){.md-hide{display:none!important}}@media (min-width:64em){.lg-hide{display:none!important}}.hide{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{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}.button-small{padding:.25rem .5rem}.button-big{padding:1rem 1.25rem}.button-narrow{padding-left:.5rem;padding-right:.5rem}.container{max-width:64em;margin-left:auto;margin-right:auto}.col{float:left;box-sizing:border-box}.col-right{float:right;box-sizing:border-box}.col-1{width:8.333333333333332%}.col-2{width:16.666666666666664%}.col-3{width:25%}.col-4{width:33.33333333333333%}.col-5{width:41.66666666666667%}.col-6{width:50%}.col-7{width:58.333333333333336%}.col-8{width:66.66666666666666%}.col-9{width:75%}.col-10{width:83.33333333333334%}.col-11{width:91.66666666666666%}.col-12{width:100%}@media (min-width:40em){.sm-col{float:left;box-sizing:border-box}.sm-col-right{float:right;box-sizing:border-box}.sm-col-1{width:8.333333333333332%}.sm-col-2{width:16.666666666666664%}.sm-col-3{width:25%}.sm-col-4{width:33.33333333333333%}.sm-col-5{width:41.66666666666667%}.sm-col-6{width:50%}.sm-col-7{width:58.333333333333336%}.sm-col-8{width:66.66666666666666%}.sm-col-9{width:75%}.sm-col-10{width:83.33333333333334%}.sm-col-11{width:91.66666666666666%}.sm-col-12{width:100%}}@media (min-width:52em){.md-col{float:left;box-sizing:border-box}.md-col-right{float:right;box-sizing:border-box}.md-col-1{width:8.333333333333332%}.md-col-2{width:16.666666666666664%}.md-col-3{width:25%}.md-col-4{width:33.33333333333333%}.md-col-5{width:41.66666666666667%}.md-col-6{width:50%}.md-col-7{width:58.333333333333336%}.md-col-8{width:66.66666666666666%}.md-col-9{width:75%}.md-col-10{width:83.33333333333334%}.md-col-11{width:91.66666666666666%}.md-col-12{width:100%}}@media (min-width:64em){.lg-col{float:left;box-sizing:border-box}.lg-col-right{float:right;box-sizing:border-box}.lg-col-1{width:8.333333333333332%}.lg-col-2{width:16.666666666666664%}.lg-col-3{width:25%}.lg-col-4{width:33.33333333333333%}.lg-col-5{width:41.66666666666667%}.lg-col-6{width:50%}.lg-col-7{width:58.333333333333336%}.lg-col-8{width:66.66666666666666%}.lg-col-9{width:75%}.lg-col-10{width:83.33333333333334%}.lg-col-11{width:91.66666666666666%}.lg-col-12{width:100%}}.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flex-baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flex-stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flex-start{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flex-end{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flex-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-last{-webkit-box-ordinal-group:1025;-webkit-order:1024;-ms-flex-order:1024;order:1024}.flex-auto{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.flex-grow{-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.flex-none{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.flex>div{box-sizing:border-box}@media (min-width:40em){.sm-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sm-flex>div{box-sizing:border-box}}@media (min-width:52em){.md-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.md-flex>div{box-sizing:border-box}}@media (min-width:64em){.lg-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.lg-flex>div{box-sizing:border-box}}body{color:#73889A;background-color:#fff}a{color:#0074d9;text-decoration:none}a:hover{text-decoration:underline}code,pre{background-color:#ddd;border-radius:3px}hr{border:0;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.button{color:#fff;background-color:#0074d9;border-radius:3px;-webkit-transition-duration:.05s;transition-duration:.05s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:box-shadow,background-color;transition-property:box-shadow,background-color}.button:hover{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.0625)}.button:focus{outline:0;border-color:rgba(0,0,0,.125);box-shadow:0 0 2px 1px rgba(0,0,0,.25)}.button.is-active,.button:active{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.125),inset 0 3px 4px 0 rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.125)}.button.is-disabled,.button:disabled{opacity:.5}.field-light{background-color:#fff;-webkit-transition:box-shadow .2s ease;transition:box-shadow .2s ease;border-style:solid;border-width:1px;border-color:rgba(0,0,0,.125);border-radius:3px}.field-light:focus{outline:0;border-color:#0074d9;box-shadow:0 0 2px rgba(0,116,217,.5)}.field-light:disabled{color:#B8C3CC;background-color:rgba(0,0,0,.125)}.field-light:read-only:not(select){background-color:rgba(0,0,0,.125)}.field-light:invalid{border-color:#ff4136}.field-light.is-success{border-color:#2ecc40}.field-light.is-warning{border-color:#ffdc00}.field-light.is-error{border-color:#ff4136}.checkbox-light,.radio-light{-webkit-transition:box-shadow .2s ease;transition:box-shadow .2s ease}.radio-light{border-radius:50%}.checkbox-light:focus,.radio-light:focus{outline:0;box-shadow:0 0 2px rgba(0,116,217,.5)}.field-dark{color:#fff;background-color:rgba(0,0,0,.25);border:1px solid rgba(0,0,0,.0625);border-radius:3px}.field-dark::-webkit-input-placeholder{color:rgba(255,255,255,.75)}.field-dark::-moz-placeholder{color:rgba(255,255,255,.75)}.field-dark:-ms-input-placeholder{color:rgba(255,255,255,.75)}.field-dark::placeholder{color:rgba(255,255,255,.75)}.field-dark:focus{outline:0;border:1px solid rgba(255,255,255,.5)}.field-dark:read-only:not(select){background-color:rgba(255,255,255,.25)}.field-dark:invalid{border-color:#ff4136}.field-dark.is-success{border-color:#2ecc40}.field-dark.is-warning{border-color:#ffdc00}.field-dark.is-error{border-color:#ff4136}input[type=range]{vertical-align:middle;background-color:transparent}.range-light{color:inherit;-webkit-appearance:none;padding-top:.5rem;padding-bottom:.5rem}.range-light::-webkit-slider-thumb{-webkit-appearance:none;width:.5rem;height:1.25rem;border-radius:3px;background-color:currentcolor;cursor:pointer;margin-top:-.5rem}.range-light::-moz-range-thumb{width:.5rem;height:1.25rem;border-radius:3px;border-color:transparent;border-width:0;background-color:currentcolor;cursor:pointer}.range-light::-webkit-slider-runnable-track{height:.25rem;cursor:pointer;border-radius:3px;background-color:rgba(0,0,0,.25)}.range-light::-moz-range-track{height:.25rem;cursor:pointer;border-radius:3px;background-color:rgba(0,0,0,.25)}.range-light:focus{outline:0}.range-light:focus::-webkit-slider-thumb{outline:0;border:0;box-shadow:0 0 1px 2px currentcolor}.range-light:focus::-moz-range-thumb{outline:0;border:0;box-shadow:0 0 1px 2px currentcolor}.table-light td,.table-light th{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.table-light tr:last-child td{border-bottom:0}.button-outline{position:relative;z-index:2;color:inherit;background-color:transparent;border-radius:3px;border:1px solid currentcolor;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:box-shadow,background-color;transition-property:box-shadow,background-color}.button-outline:before{content:'';width:100%;height:100%;display:block;position:absolute;z-index:-1;top:-1px;left:-1px;border:1px solid transparent;background-color:currentcolor;border-radius:3px;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:opacity;transition-property:opacity;opacity:0}.button-outline:hover{box-shadow:none}.button-outline:hover:before{opacity:.125}.button-outline:focus{outline:0;border:1px solid currentcolor;box-shadow:0 0 3px 1px}.button-outline.is-active,.button-outline:active{box-shadow:inset 0 1px 5px 0,0 0 1px}.button-outline.is-disabled,.button-outline:disabled{opacity:.5}.button-transparent{position:relative;z-index:2;color:inherit;background-color:transparent;border-radius:0;border:1px solid transparent;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:box-shadow;transition-property:box-shadow}.button-transparent:before{content:'';width:100%;height:100%;display:block;position:absolute;z-index:-1;top:-1px;left:-1px;border:1px solid transparent;background-color:currentcolor;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:opacity;transition-property:opacity;opacity:0}.button-transparent:hover{box-shadow:none}.button-transparent:hover:before{opacity:.0625;opacity:.09375}.button-transparent:focus{outline:0;border-color:transparent;box-shadow:0 0 3px}.button-transparent.is-active:before,.button-transparent:active:before{opacity:.0625}.button-transparent.is-disabled,.button-transparent:disabled{opacity:.5}.bg-cover{background-size:cover}.bg-contain{background-size:contain}.bg-center{background-position:center}.bg-top{background-position:top}.bg-right{background-position:right}.bg-bottom{background-position:bottom}.bg-left{background-position:left}.border{border-style:solid;border-width:1px;border-color:rgba(0,0,0,.125)}.border-top{border-top-style:solid;border-top-width:1px;border-top-color:rgba(0,0,0,.125)}.border-right{border-right-style:solid;border-right-width:1px;border-right-color:rgba(0,0,0,.125)}.border-bottom{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.border-left{border-left-style:solid;border-left-width:1px;border-left-color:rgba(0,0,0,.125)}.rounded{border-radius:3px}.circle{border-radius:50%}.rounded-top{border-radius:3px 3px 0 0}.rounded-right{border-radius:0 3px 3px 0}.rounded-bottom{border-radius:0 0 3px 3px}.rounded-left{border-radius:3px 0 0 3px}.not-rounded{border-radius:0}.black,.dark-gray{color:#73889A}.gray,.mid-gray{color:#B8C3CC}.light-gray,.silver{color:#ddd}.white{color:#fff}.aqua{color:#7fdbff}.blue{color:#0074d9}.navy{color:#001f3f}.teal{color:#39cccc}.green{color:#2ecc40}.olive{color:#3d9970}.lime{color:#01ff70}.yellow{color:#ffdc00}.orange{color:#ff851b}.red{color:#ff4136}.fuchsia{color:#f012be}.purple{color:#b10dc9}.maroon{color:#85144b}.bg-black,.bg-dark-gray{background-color:#73889A}.bg-gray,.bg-mid-gray{background-color:#B8C3CC}.bg-light-gray,.bg-silver{background-color:#ddd}.bg-white{background-color:#fff}.bg-aqua{background-color:#7fdbff}.bg-blue{background-color:#0074d9}.bg-navy{background-color:#001f3f}.bg-teal{background-color:#39cccc}.bg-green{background-color:#2ecc40}.bg-olive{background-color:#3d9970}.bg-lime{background-color:#01ff70}.bg-yellow{background-color:#ffdc00}.bg-orange{background-color:#ff851b}.bg-red{background-color:#ff4136}.bg-fuchsia{background-color:#f012be}.bg-purple{background-color:#b10dc9}.bg-maroon{background-color:#85144b}.bg-darken-1{background-color:rgba(0,0,0,.0625)}.bg-darken-2{background-color:rgba(0,0,0,.125)}.bg-darken-3{background-color:rgba(0,0,0,.25)}.bg-darken-4{background-color:rgba(0,0,0,.5)}.border-aqua{border-color:#7fdbff}.border-blue{border-color:#0074d9}.border-navy{border-color:#001f3f}.border-teal{border-color:#39cccc}.border-olive{border-color:#3d9970}.border-lime{border-color:#01ff70}.border-yellow{border-color:#ffdc00}.border-orange{border-color:#ff851b}.border-red{border-color:#ff4136}.border-fuchsia{border-color:#f012be}.border-purple{border-color:#b10dc9}.border-maroon{border-color:#85144b}.border-black{border-color:#73889A}.border-gray{border-color:#B8C3CC}.border-silver{border-color:#ddd}.border-white{border-color:#fff}.border-darken-1{border-color:rgba(0,0,0,.0625)}.border-darken-2{border-color:rgba(0,0,0,.125)}.border-darken-3{border-color:rgba(0,0,0,.25)}.border-darken-4{border-color:rgba(0,0,0,.5)}.muted{opacity:.5}.border-green{border-color:#2ecc40}html{font-size:.875em;font-weight:300}.outline-blue *{box-shadow:0 0 0 1px rgba(0,116,217,.75)}.strikethrough{text-decoration:line-through}.button-no-click{cursor:not-allowed}.media-16-by-9{position:relative;padding-bottom:56.25%;height:0}.media-16-by-9 iframe{position:absolute;top:0;left:0;width:100%;height:100%}.gradient-blue-pink{background-image:-webkit-linear-gradient(270deg,#7B37D7 0,#48DEEE 100%);background-image:linear-gradient(180deg,#7B37D7 0,#48DEEE 100%)}.rounded{overflow:hidden}.shadow{box-shadow:0 3px 0 0 rgba(0,0,0,.15)}.bg-white-translucent{background:rgba(255,255,255,.2)}.mbn4{margin-bottom:-4rem}.hero-bg{background-image:url(../img/modules.png) bottom center repeat-x}@media (min-width:40em){.sm-half:nth-child(2n+2){clear:both}}@media (min-width:64em){.sm-half:nth-child(2n+2){clear:none}.lg-third:nth-child(3n+2){clear:both}} \ No newline at end of file +body,button{margin:0}button,input,select,textarea{font-family:inherit}img{max-width:100%}svg{max-height:100%}fieldset,input,select,textarea{font-size:1rem;margin-top:0;margin-bottom:.5rem}input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{box-sizing:border-box;height:2.25rem;padding:.5rem;vertical-align:middle;-webkit-appearance:none}select{box-sizing:border-box;line-height:1.75;padding:.5rem}select:not([multiple]){height:2.25rem;vertical-align:middle}textarea{box-sizing:border-box;line-height:1.75;padding:.5rem}.fieldset-reset{padding:0;margin-left:0;margin-right:0;border:0}.fieldset-reset legend{padding:0}.button,button{font-size:inherit;font-weight:500;text-decoration:none;cursor:pointer;display:inline-block;box-sizing:border-box;line-height:1.125rem;padding:1rem 2rem;margin:0;height:auto;border:1px solid transparent;vertical-align:middle;-webkit-appearance:none}::-moz-focus-inner{border:0;padding:0}.button:hover{text-decoration:none}table{border-collapse:separate;border-spacing:0;max-width:100%;width:100%}th{text-align:left;font-weight:700}td,th{padding:.25rem 1rem;line-height:inherit}th{vertical-align:bottom}td{vertical-align:top}body{font-family:aktiv-grotesk-std,'Helvetica Neue',Helvetica,sans-serif;line-height:1.5;font-size:100%}h1,h2,h3,h4,h5,h6{font-family:aktiv-grotesk-std,'Helvetica Neue',Helvetica,sans-serif;font-weight:300;line-height:1.25;margin-top:1em;margin-bottom:.5em}dl,ol,p,ul{font-size:1rem;margin-top:0;margin-bottom:1rem}ol,ul{padding-left:2rem}code,pre,samp{font-family:'Source Code Pro',Consolas,monospace;font-size:inherit}pre{margin-top:0;margin-bottom:1rem;overflow-x:scroll}hr{margin-top:2rem;margin-bottom:2rem}blockquote{margin-top:2rem;margin-bottom:2rem;margin-left:0;padding-left:1rem;padding-right:1rem}blockquote,blockquote p{font-size:1.25rem;font-style:italic}.h1,h1{font-size:2rem}.h2,h2{font-size:1.5rem}.h3,h3{font-size:1.25rem}.h4,h4{font-size:1rem}.h5,h5{font-size:.875rem}.h6,h6{font-size:.75rem}.list-reset{list-style:none;padding-left:0}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.half-width{width:50%}.full-width{width:100%}.bold{font-weight:700}.regular{font-weight:400}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.left-align{text-align:left}.center{text-align:center}.right-align{text-align:right}.justify{text-align:justify}.nowrap{white-space:nowrap}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1{margin-left:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2{margin-left:1rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3{margin-left:2rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.mxn1{margin-left:-.5rem;margin-right:-.5rem}.mxn2{margin-left:-1rem;margin-right:-1rem}.mxn3{margin-left:-2rem;margin-right:-2rem}.mxn4{margin-left:-4rem;margin-right:-4rem}.mx-auto{margin-left:auto;margin-right:auto}.p1{padding:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-left:.5rem;padding-right:.5rem}.p2{padding:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-left:1rem;padding-right:1rem}.p3{padding:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-left:2rem;padding-right:2rem}.p4{padding:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.px4{padding-left:4rem;padding-right:4rem}.display-none,.lg-show,.md-show,.sm-show{display:none!important}@media (min-width:40em){.sm-show{display:block!important}}@media (min-width:52em){.md-show{display:block!important}}@media (min-width:64em){.lg-show{display:block!important}}@media (min-width:40em){.sm-hide{display:none!important}}@media (min-width:52em){.md-hide{display:none!important}}@media (min-width:64em){.lg-hide{display:none!important}}.hide{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{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}.button-small{padding:.25rem .5rem}.button-big{padding:1rem 1.25rem}.button-narrow{padding-left:.5rem;padding-right:.5rem}.container{max-width:64em;margin-left:auto;margin-right:auto}.col{float:left;box-sizing:border-box}.col-right{float:right;box-sizing:border-box}.col-1{width:8.333333333333332%}.col-2{width:16.666666666666664%}.col-3{width:25%}.col-4{width:33.33333333333333%}.col-5{width:41.66666666666667%}.col-6{width:50%}.col-7{width:58.333333333333336%}.col-8{width:66.66666666666666%}.col-9{width:75%}.col-10{width:83.33333333333334%}.col-11{width:91.66666666666666%}.col-12{width:100%}@media (min-width:40em){.sm-col{float:left;box-sizing:border-box}.sm-col-right{float:right;box-sizing:border-box}.sm-col-1{width:8.333333333333332%}.sm-col-2{width:16.666666666666664%}.sm-col-3{width:25%}.sm-col-4{width:33.33333333333333%}.sm-col-5{width:41.66666666666667%}.sm-col-6{width:50%}.sm-col-7{width:58.333333333333336%}.sm-col-8{width:66.66666666666666%}.sm-col-9{width:75%}.sm-col-10{width:83.33333333333334%}.sm-col-11{width:91.66666666666666%}.sm-col-12{width:100%}}@media (min-width:52em){.md-col{float:left;box-sizing:border-box}.md-col-right{float:right;box-sizing:border-box}.md-col-1{width:8.333333333333332%}.md-col-2{width:16.666666666666664%}.md-col-3{width:25%}.md-col-4{width:33.33333333333333%}.md-col-5{width:41.66666666666667%}.md-col-6{width:50%}.md-col-7{width:58.333333333333336%}.md-col-8{width:66.66666666666666%}.md-col-9{width:75%}.md-col-10{width:83.33333333333334%}.md-col-11{width:91.66666666666666%}.md-col-12{width:100%}}@media (min-width:64em){.lg-col{float:left;box-sizing:border-box}.lg-col-right{float:right;box-sizing:border-box}.lg-col-1{width:8.333333333333332%}.lg-col-2{width:16.666666666666664%}.lg-col-3{width:25%}.lg-col-4{width:33.33333333333333%}.lg-col-5{width:41.66666666666667%}.lg-col-6{width:50%}.lg-col-7{width:58.333333333333336%}.lg-col-8{width:66.66666666666666%}.lg-col-9{width:75%}.lg-col-10{width:83.33333333333334%}.lg-col-11{width:91.66666666666666%}.lg-col-12{width:100%}}.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flex-baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flex-stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flex-start{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flex-end{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flex-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-last{-webkit-box-ordinal-group:1025;-webkit-order:1024;-ms-flex-order:1024;order:1024}.flex-auto{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.flex-grow{-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.flex-none{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.flex>div{box-sizing:border-box}@media (min-width:40em){.sm-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sm-flex>div{box-sizing:border-box}}@media (min-width:52em){.md-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.md-flex>div{box-sizing:border-box}}@media (min-width:64em){.lg-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.lg-flex>div{box-sizing:border-box}}body{color:#73889A;background-color:#fff}a{color:#0074d9;text-decoration:none}a:hover{text-decoration:underline}code,pre{background-color:#ddd;border-radius:3px}hr{border:0;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.button{color:#fff;background-color:#0074d9;border-radius:3px;-webkit-transition-duration:.05s;transition-duration:.05s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:box-shadow,background-color;transition-property:box-shadow,background-color}.button:hover{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.0625)}.button:focus{outline:0;border-color:rgba(0,0,0,.125);box-shadow:0 0 2px 1px rgba(0,0,0,.25)}.button.is-active,.button:active{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.125),inset 0 3px 4px 0 rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.125)}.button.is-disabled,.button:disabled{opacity:.5}.field-light{background-color:#fff;-webkit-transition:box-shadow .2s ease;transition:box-shadow .2s ease;border-style:solid;border-width:1px;border-color:rgba(0,0,0,.125);border-radius:3px}.field-light:focus{outline:0;border-color:#0074d9;box-shadow:0 0 2px rgba(0,116,217,.5)}.field-light:disabled{color:#B8C3CC;background-color:rgba(0,0,0,.125)}.field-light:read-only:not(select){background-color:rgba(0,0,0,.125)}.field-light:invalid{border-color:#ff4136}.field-light.is-success{border-color:#2ecc40}.field-light.is-warning{border-color:#ffdc00}.field-light.is-error{border-color:#ff4136}.checkbox-light,.radio-light{-webkit-transition:box-shadow .2s ease;transition:box-shadow .2s ease}.radio-light{border-radius:50%}.checkbox-light:focus,.radio-light:focus{outline:0;box-shadow:0 0 2px rgba(0,116,217,.5)}.field-dark{color:#fff;background-color:rgba(0,0,0,.25);border:1px solid rgba(0,0,0,.0625);border-radius:3px}.field-dark::-webkit-input-placeholder{color:rgba(255,255,255,.75)}.field-dark::-moz-placeholder{color:rgba(255,255,255,.75)}.field-dark:-ms-input-placeholder{color:rgba(255,255,255,.75)}.field-dark::placeholder{color:rgba(255,255,255,.75)}.field-dark:focus{outline:0;border:1px solid rgba(255,255,255,.5)}.field-dark:read-only:not(select){background-color:rgba(255,255,255,.25)}.field-dark:invalid{border-color:#ff4136}.field-dark.is-success{border-color:#2ecc40}.field-dark.is-warning{border-color:#ffdc00}.field-dark.is-error{border-color:#ff4136}input[type=range]{vertical-align:middle;background-color:transparent}.range-light{color:inherit;-webkit-appearance:none;padding-top:.5rem;padding-bottom:.5rem}.range-light::-webkit-slider-thumb{-webkit-appearance:none;position:relative;width:.5rem;height:1.25rem;border-radius:3px;background-color:currentcolor;cursor:pointer;margin-top:-.5rem}.range-light::-webkit-slider-thumb:before{content:'';display:block;position:absolute;top:-.5rem;left:-.875rem;width:2.25rem;height:2.25rem;opacity:0}.range-light::-moz-range-thumb{width:.5rem;height:1.25rem;border-radius:3px;border-color:transparent;border-width:0;background-color:currentcolor;cursor:pointer}.range-light::-webkit-slider-runnable-track{height:.25rem;cursor:pointer;border-radius:3px;background-color:rgba(0,0,0,.25)}.range-light::-moz-range-track{height:.25rem;cursor:pointer;border-radius:3px;background-color:rgba(0,0,0,.25)}.range-light:focus{outline:0}.range-light:focus::-webkit-slider-thumb{outline:0;border:0;box-shadow:0 0 1px 2px currentcolor}.range-light:focus::-moz-range-thumb{outline:0;border:0;box-shadow:0 0 1px 2px currentcolor}.table-light td,.table-light th{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.table-light tr:last-child td{border-bottom:0}.button-outline{position:relative;z-index:2;color:inherit;background-color:transparent;border-radius:3px;border:1px solid currentcolor;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:box-shadow,background-color;transition-property:box-shadow,background-color}.button-outline:before{content:'';width:100%;height:100%;display:block;position:absolute;z-index:-1;top:-1px;left:-1px;border:1px solid transparent;background-color:currentcolor;border-radius:3px;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:opacity;transition-property:opacity;opacity:0}.button-outline:hover{box-shadow:none}.button-outline:hover:before{opacity:.125}.button-outline:focus{outline:0;border:1px solid currentcolor;box-shadow:0 0 3px 1px}.button-outline.is-active,.button-outline:active{box-shadow:inset 0 1px 5px 0,0 0 1px}.button-outline.is-disabled,.button-outline:disabled{opacity:.5}.button-transparent{position:relative;z-index:2;color:inherit;background-color:transparent;border-radius:0;border:1px solid transparent;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:box-shadow;transition-property:box-shadow}.button-transparent:before{content:'';width:100%;height:100%;display:block;position:absolute;z-index:-1;top:-1px;left:-1px;border:1px solid transparent;background-color:currentcolor;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:opacity;transition-property:opacity;opacity:0}.button-transparent:hover{box-shadow:none}.button-transparent:hover:before{opacity:.0625;opacity:.09375}.button-transparent:focus{outline:0;border-color:transparent;box-shadow:0 0 3px}.button-transparent.is-active:before,.button-transparent:active:before{opacity:.0625}.button-transparent.is-disabled,.button-transparent:disabled{opacity:.5}.bg-cover{background-size:cover}.bg-contain{background-size:contain}.bg-center{background-position:center}.bg-top{background-position:top}.bg-right{background-position:right}.bg-bottom{background-position:bottom}.bg-left{background-position:left}.border{border-style:solid;border-width:1px;border-color:rgba(0,0,0,.125)}.border-top{border-top-style:solid;border-top-width:1px;border-top-color:rgba(0,0,0,.125)}.border-right{border-right-style:solid;border-right-width:1px;border-right-color:rgba(0,0,0,.125)}.border-bottom{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.border-left{border-left-style:solid;border-left-width:1px;border-left-color:rgba(0,0,0,.125)}.rounded{border-radius:3px}.circle{border-radius:50%}.rounded-top{border-radius:3px 3px 0 0}.rounded-right{border-radius:0 3px 3px 0}.rounded-bottom{border-radius:0 0 3px 3px}.rounded-left{border-radius:3px 0 0 3px}.not-rounded{border-radius:0}.black,.dark-gray{color:#73889A}.gray,.mid-gray{color:#B8C3CC}.light-gray,.silver{color:#ddd}.white{color:#fff}.aqua{color:#7fdbff}.blue{color:#0074d9}.navy{color:#001f3f}.teal{color:#39cccc}.green{color:#2ecc40}.olive{color:#3d9970}.lime{color:#01ff70}.yellow{color:#ffdc00}.orange{color:#ff851b}.red{color:#ff4136}.fuchsia{color:#f012be}.purple{color:#b10dc9}.maroon{color:#85144b}.bg-black,.bg-dark-gray{background-color:#73889A}.bg-gray,.bg-mid-gray{background-color:#B8C3CC}.bg-light-gray,.bg-silver{background-color:#ddd}.bg-white{background-color:#fff}.bg-aqua{background-color:#7fdbff}.bg-blue{background-color:#0074d9}.bg-navy{background-color:#001f3f}.bg-teal{background-color:#39cccc}.bg-green{background-color:#2ecc40}.bg-olive{background-color:#3d9970}.bg-lime{background-color:#01ff70}.bg-yellow{background-color:#ffdc00}.bg-orange{background-color:#ff851b}.bg-red{background-color:#ff4136}.bg-fuchsia{background-color:#f012be}.bg-purple{background-color:#b10dc9}.bg-maroon{background-color:#85144b}.bg-darken-1{background-color:rgba(0,0,0,.0625)}.bg-darken-2{background-color:rgba(0,0,0,.125)}.bg-darken-3{background-color:rgba(0,0,0,.25)}.bg-darken-4{background-color:rgba(0,0,0,.5)}.border-aqua{border-color:#7fdbff}.border-blue{border-color:#0074d9}.border-navy{border-color:#001f3f}.border-teal{border-color:#39cccc}.border-olive{border-color:#3d9970}.border-lime{border-color:#01ff70}.border-yellow{border-color:#ffdc00}.border-orange{border-color:#ff851b}.border-red{border-color:#ff4136}.border-fuchsia{border-color:#f012be}.border-purple{border-color:#b10dc9}.border-maroon{border-color:#85144b}.border-black{border-color:#73889A}.border-gray{border-color:#B8C3CC}.border-silver{border-color:#ddd}.border-white{border-color:#fff}.border-darken-1{border-color:rgba(0,0,0,.0625)}.border-darken-2{border-color:rgba(0,0,0,.125)}.border-darken-3{border-color:rgba(0,0,0,.25)}.border-darken-4{border-color:rgba(0,0,0,.5)}.muted{opacity:.5}.border-green{border-color:#2ecc40}html{font-size:.875em;font-weight:300}.outline-blue *{box-shadow:0 0 0 1px rgba(0,116,217,.75)}.strikethrough{text-decoration:line-through}.button-no-click{cursor:not-allowed}.media-16-by-9{position:relative;padding-bottom:56.25%;height:0}.media-16-by-9 iframe{position:absolute;top:0;left:0;width:100%;height:100%}.gradient-blue-pink{background-image:-webkit-linear-gradient(270deg,#7B37D7 0,#48DEEE 100%);background-image:linear-gradient(180deg,#7B37D7 0,#48DEEE 100%)}.rounded{overflow:hidden}.shadow{box-shadow:0 3px 0 0 rgba(0,0,0,.15)}.bg-white-translucent{background:rgba(255,255,255,.2)}.border-transparent{border-color:transparent}.mbn4{margin-bottom:-4rem}.hero-bg{background-image:url(../img/modules.png) bottom center repeat-x}@media (min-width:40em){.sm-half:nth-child(2n+2){clear:both}}@media (min-width:64em){.sm-half:nth-child(2n+2){clear:none}.lg-third:nth-child(3n+2){clear:both}} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index c26c6d6..6650398 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,9 +1,9 @@ - var gulp = require('gulp'); var rename = require('gulp-rename'); var basswork = require('gulp-basswork'); var minifyCss = require('gulp-minify-css'); var webserver = require('gulp-webserver'); +var babel = require('gulp-babel'); gulp.task('css', function() { gulp.src('./src/css/base.css') @@ -14,12 +14,20 @@ gulp.task('css', function() { .pipe(gulp.dest('./css')); }); +gulp.task('es6', function() { + gulp.src('src/es6/**/*.es6') + .pipe(babel()) + .pipe(rename({ extname: '.js' })) + .pipe(gulp.dest('js')); +}); + gulp.task('serve', function() { gulp.src('.') .pipe(webserver({livereload: true})); }); -gulp.task('default', ['css', 'serve'], function() { - gulp.watch(['./src/**/*'], ['css']); -}); +gulp.task('default', ['css', 'es6', 'serve'], function() { + gulp.watch(['./src/css/*'], ['css']); + gulp.watch(['./src/es6/*'], ['es6']); +}); diff --git a/index.html b/index.html index 7ce59f1..92b184f 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ + @@ -80,24 +81,8 @@

Monitoring and Logging

-
-
-

Presentations & screencasts

-
-
- -
-
-

Container Camp

-

September 2014

-
-
-
-
-
- -
-
+
+ Videos are available on YouTube: LNUG Container Camp
@@ -150,5 +135,7 @@

Contributors & Crafters

+ + diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..c626a23 --- /dev/null +++ b/js/app.js @@ -0,0 +1,114 @@ +"use strict"; + +var presentations = [{ + title: "LNUG", + subtitle: "February 2015", + youtubeId: "cQOPoDmkFg8" +}, { + title: "Container Camp", + subtitle: "September 2014", + youtubeId: "Zve7rJ1FoDU" +}]; + +var YoutubeEmbed = React.createClass({ + displayName: "YoutubeEmbed", + + render: function render() { + var url = "https://www.youtube.com/embed/" + this.props.id + "?modestbranding=1&autohide=1&showinfo=0&controls=1"; + return React.createElement("iframe", { src: url, frameBorder: "0", allowFullScreen: true }); + } +}); + +var MenuItem = React.createClass({ + displayName: "MenuItem", + + onClick: function onClick() { + this.props.onClick(this.props.item.youtubeId); + }, + render: function render() { + var classList = "clearfix p2 mxn2 mb1 rounded border"; + if (this.props.active) { + classList += " bg-white-translucent border-white"; + } else { + classList += " border-transparent"; + } + return React.createElement( + "div", + { className: classList, onClick: this.onClick }, + React.createElement( + "div", + { className: "left mr2" }, + React.createElement(YoutubeThumbnail, { id: this.props.item.youtubeId }) + ), + React.createElement( + "div", + { className: "overflow-hidden" }, + React.createElement( + "p", + { className: "bold mb0" }, + this.props.item.title + ), + React.createElement( + "p", + { className: "mb0" }, + this.props.item.subtitle + ) + ) + ); + } +}); + +var YoutubeThumbnail = React.createClass({ + displayName: "YoutubeThumbnail", + + render: function render() { + var url = "http://img.youtube.com/vi/" + this.props.id + "/0.jpg"; + return React.createElement("img", { src: url, alt: "", width: "75", className: "block rounded" }); + } +}); + +var Tabs = React.createClass({ + displayName: "Tabs", + + getInitialState: function getInitialState() { + return { active: this.props.data[0].youtubeId }; + }, + setActive: function setActive(id) { + this.setState({ active: id }); + }, + menuItems: function menuItems() { + var _this = this; + + return this.props.data.map(function (p, i) { + var active = _this.state.active === p.youtubeId; + return React.createElement(MenuItem, { item: p, active: active, key: i, onClick: _this.setActive }); + }); + }, + render: function render() { + return React.createElement( + "div", + { className: "clearfix mt4" }, + React.createElement( + "div", + { className: "sm-col sm-col-4" }, + React.createElement( + "h2", + { className: "h1 mt0 mb3" }, + "Presentations & screencasts" + ), + this.menuItems() + ), + React.createElement( + "div", + { className: "sm-col sm-col-8" }, + React.createElement( + "div", + { className: "media-16-by-9 shadow rounded bg-white-translucent" }, + React.createElement(YoutubeEmbed, { id: this.state.active }) + ) + ) + ); + } +}); + +React.render(React.createElement(Tabs, { data: presentations }), document.getElementById("react-base")); \ No newline at end of file diff --git a/package.json b/package.json index 1657f4f..b6d6ba4 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ }, "devDependencies": { "gulp": "^3.8.11", + "gulp-babel": "^4.0.0", "gulp-basswork": "^0.1.0", "gulp-minify-css": "^0.3.11", "gulp-rename": "^1.2.0", diff --git a/src/css/base.css b/src/css/base.css index c34e1b2..480ac63 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -166,6 +166,10 @@ html { background: rgba(255,255,255,.2); } +.border-transparent { + border-color: transparent; +} + .mbn4 { margin-bottom: -var(--space-4); } .hero-bg { diff --git a/src/es6/app.es6 b/src/es6/app.es6 new file mode 100644 index 0000000..8784e2b --- /dev/null +++ b/src/es6/app.es6 @@ -0,0 +1,87 @@ +const presentations = [ + { + title: 'LNUG', + subtitle: 'February 2015', + youtubeId: 'cQOPoDmkFg8' + }, + { + title: 'Container Camp', + subtitle: 'September 2014', + youtubeId: 'Zve7rJ1FoDU' + } +]; + +const YoutubeEmbed = React.createClass({ + render() { + const url = `https://www.youtube.com/embed/${this.props.id}?modestbranding=1&autohide=1&showinfo=0&controls=1` + return ( + + ) + } +}); + +const MenuItem = React.createClass({ + onClick() { + this.props.onClick(this.props.item.youtubeId); + }, + render() { + var classList = 'clearfix p2 mxn2 mb1 rounded border' + if (this.props.active) { + classList += ' bg-white-translucent border-white'; + } else { + classList += ' border-transparent' + } + return ( +
+
+ +
+
+

{this.props.item.title}

+

{this.props.item.subtitle}

+
+
+ ) + } +}); + +const YoutubeThumbnail = React.createClass({ + render() { + const url = `http://img.youtube.com/vi/${this.props.id}/0.jpg`; + return ( + + ) + } +}); + +const Tabs = React.createClass({ + getInitialState() { + return { active: this.props.data[0].youtubeId } + }, + setActive(id) { + this.setState({ active: id }) + }, + menuItems() { + return this.props.data.map((p, i) => { + const active = (this.state.active === p.youtubeId); + return + }) + }, + render() { + return ( +
+
+

Presentations & screencasts

+ {this.menuItems()} +
+
+
+ +
+
+
+ ) + } +}); + +React.render(, document.getElementById('react-base'))