diff --git a/build-modules/deploy.js b/build-modules/deploy.js index bff1cb5..5f11898 100644 --- a/build-modules/deploy.js +++ b/build-modules/deploy.js @@ -5,7 +5,7 @@ var gulp = require('gulp'), plugins = require('gulp-load-plugins')(opts.load), /* deploy */ run = function() { - return gulp.src(src.overwatch) + return gulp.src(src.deploy) .pipe(plugins.deploy()); }; diff --git a/dist/driveway.css b/dist/driveway.css index 23bf30e..0a54b5e 100644 --- a/dist/driveway.css +++ b/dist/driveway.css @@ -4,7 +4,7 @@ * @license MIT * @author jh3y */ -.ml { +.dw { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-column-gap: 0; @@ -12,11 +12,11 @@ column-gap: 0; position: relative; } -.ml * { +.dw * { -webkit-box-sizing: border-box; box-sizing: border-box; } -.ml__fcs-crtn { +.dw__fcs-crtn { background-color: #000; bottom: 0; display: none; @@ -28,33 +28,33 @@ z-index: 2; } @media (min-width: 768px) { - .ml { + .dw { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } @media (min-width: 1200px) { - .ml { + .dw { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } } -.ml-pnl { +.dw-pnl { margin: 0; padding: 5px; } -.ml-pnl--fcs { +.dw-pnl--fcs { position: relative; } -.ml-pnl--fcs:hover { +.dw-pnl--fcs:hover { z-index: 3; } -.ml-pnl--fcs:hover ~ .ml__fcs-crtn { +.dw-pnl--fcs:hover ~ .dw__fcs-crtn { display: block; } -.ml-pnl--pls { +.dw-pnl--pls { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000; @@ -64,63 +64,63 @@ transition: transform 0.25s ease 0s; transition: transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s; } -.ml-pnl--pls:hover { +.dw-pnl--pls:hover { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } -.ml-pnl__cntnt { +.dw-pnl__cntnt { border-radius: 10px; overflow: hidden; padding: 20px; width: 100%; } @media (min-width: 768px) { - .ml-pnl { + .dw-pnl { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } } -.ml-flp { +.dw-flp { -webkit-perspective: 1000; perspective: 1000; } -.ml-flp:hover .ml-flp__cntnt { +.dw-flp:hover .dw-flp__cntnt { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } -.ml-flp--sm { +.dw-flp--sm { height: 200px; } -.ml-flp--md { +.dw-flp--md { height: 300px; } -.ml-flp--lg { +.dw-flp--lg { height: 400px; } -.ml-flp__pnl { +.dw-flp__pnl { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 10px; height: 100%; left: 0; - overflow: hidden; + overflow: visible; padding: 20px; position: absolute; top: 0; width: 100%; } -.ml-flp__pnl--frnt { +.dw-flp__pnl--frnt { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 2; } -.ml-flp__pnl--bck { +.dw-flp__pnl--bck { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } -.ml-flp__cntnt { +.dw-flp__cntnt { height: 100%; overflow: visible; position: relative; @@ -129,14 +129,14 @@ -webkit-transition: 0.25s; transition: 0.25s; } -.ml-clstr { +.dw-clstr { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; } -.ml-clstr--vrt { +.dw-clstr--vrt { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; @@ -144,7 +144,7 @@ flex-direction: column; } @media (min-width: 768px) { - .ml-clstr--vrt { + .dw-clstr--vrt { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; @@ -152,14 +152,14 @@ flex-direction: row; } } -.ml-clstr--hrz { +.dw-clstr--hrz { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } -.ml-clstr__sgmnt { +.dw-clstr__sgmnt { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -169,7 +169,7 @@ -ms-flex: 1 1 auto; flex: 1 1 auto; } -.ml-clstr__sgmnt--rw { +.dw-clstr__sgmnt--rw { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -181,7 +181,7 @@ flex-direction: column; } @media (min-width: 768px) { - .ml-clstr__sgmnt--rw { + .dw-clstr__sgmnt--rw { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; @@ -189,7 +189,7 @@ flex-direction: row; } } -.ml-clstr__sgmnt--clmn { +.dw-clstr__sgmnt--clmn { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; @@ -197,12 +197,12 @@ flex-direction: column; } @media (min-width: 768px) { - .ml-clstr__sgmnt--hlf { + .dw-clstr__sgmnt--hlf { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } - .ml-clstr__sgmnt--qrt { + .dw-clstr__sgmnt--qrt { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; diff --git a/dist/driveway.min.css b/dist/driveway.min.css index fb2c28a..9978c21 100644 --- a/dist/driveway.min.css +++ b/dist/driveway.min.css @@ -3,4 +3,4 @@ * * @license MIT * @author jh3y -*/.ml{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;position:relative}.ml,.ml *{box-sizing:border-box}.ml__fcs-crtn{background-color:#000;bottom:0;display:none;left:0;opacity:.75;position:fixed;right:0;top:0;z-index:1}@media (min-width:768px){.ml{-webkit-column-count:2;-moz-column-count:2;column-count:2}}@media (min-width:1200px){.ml{-webkit-column-count:3;-moz-column-count:3;column-count:3}}.ml-pnl{margin:0;padding:5px}.ml-pnl--fcs{position:relative}.ml-pnl--fcs:hover{z-index:2}.ml-pnl--fcs:hover~.ml__fcs-crtn{display:block}.ml-pnl--pls{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1000;perspective:1000;-webkit-transition:-webkit-transform .25s ease 0s;transition:-webkit-transform .25s ease 0s;transition:transform .25s ease 0s;transition:transform .25s ease 0s,-webkit-transform .25s ease 0s}.ml-pnl--pls:hover{-webkit-transform:scale(1.02);transform:scale(1.02)}.ml-pnl__cntnt{border-radius:10px;overflow:hidden;padding:20px;width:100%}@media (min-width:768px){.ml-pnl{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid}}.ml-flp{-webkit-perspective:1000;perspective:1000}.ml-flp:hover .ml-flp__cntnt{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.ml-flp--sm{height:200px}.ml-flp--md{height:300px}.ml-flp--lg{height:400px}.ml-flp__pnl{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px;height:100%;left:0;overflow:hidden;padding:20px;position:absolute;top:0;width:100%}.ml-flp__pnl--frnt{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);z-index:1}.ml-flp__pnl--bck{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.ml-flp__cntnt{height:100%;overflow:visible;position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:.25s;transition:.25s}.ml-clstr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0}.ml-clstr--vrt{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}@media (min-width:768px){.ml-clstr--vrt{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}}.ml-clstr--hrz{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.ml-clstr__sgmnt{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.ml-clstr__sgmnt,.ml-clstr__sgmnt--rw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.ml-clstr__sgmnt--rw{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}@media (min-width:768px){.ml-clstr__sgmnt--rw{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}}.ml-clstr__sgmnt--clmn{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}@media (min-width:768px){.ml-clstr__sgmnt--hlf{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%}.ml-clstr__sgmnt--qrt{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%}} \ No newline at end of file +*/.dw{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;position:relative}.dw,.dw *{box-sizing:border-box}.dw__fcs-crtn{background-color:#000;bottom:0;display:none;left:0;opacity:.75;position:fixed;right:0;top:0;z-index:1}@media (min-width:768px){.dw{-webkit-column-count:2;-moz-column-count:2;column-count:2}}@media (min-width:1200px){.dw{-webkit-column-count:3;-moz-column-count:3;column-count:3}}.dw-pnl{margin:0;padding:5px}.dw-pnl--fcs{position:relative}.dw-pnl--fcs:hover{z-index:2}.dw-pnl--fcs:hover~.dw__fcs-crtn{display:block}.dw-pnl--pls{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1000;perspective:1000;-webkit-transition:-webkit-transform .25s ease 0s;transition:-webkit-transform .25s ease 0s;transition:transform .25s ease 0s;transition:transform .25s ease 0s,-webkit-transform .25s ease 0s}.dw-pnl--pls:hover{-webkit-transform:scale(1.02);transform:scale(1.02)}.dw-pnl__cntnt{border-radius:10px;overflow:hidden;padding:20px;width:100%}@media (min-width:768px){.dw-pnl{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid}}.dw-flp{-webkit-perspective:1000;perspective:1000}.dw-flp:hover .dw-flp__cntnt{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.dw-flp--sm{height:200px}.dw-flp--md{height:300px}.dw-flp--lg{height:400px}.dw-flp__pnl{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px;height:100%;left:0;overflow:visible;padding:20px;position:absolute;top:0;width:100%}.dw-flp__pnl--frnt{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);z-index:1}.dw-flp__pnl--bck{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.dw-flp__cntnt{height:100%;overflow:visible;position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:.25s;transition:.25s}.dw-clstr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0}.dw-clstr--vrt{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}@media (min-width:768px){.dw-clstr--vrt{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}}.dw-clstr--hrz{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.dw-clstr__sgmnt{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.dw-clstr__sgmnt,.dw-clstr__sgmnt--rw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.dw-clstr__sgmnt--rw{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}@media (min-width:768px){.dw-clstr__sgmnt--rw{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}}.dw-clstr__sgmnt--clmn{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}@media (min-width:768px){.dw-clstr__sgmnt--hlf{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%}.dw-clstr__sgmnt--qrt{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%}} \ No newline at end of file diff --git a/gulp-config.js b/gulp-config.js index fbbbc8b..b4d53bf 100644 --- a/gulp-config.js +++ b/gulp-config.js @@ -48,6 +48,7 @@ module.exports = { markup : 'src/jade/*.jade', img : 'src/img/**/*.*', overwatch: env + '**/*.{html,css}', + deploy : env + '**/{index.html,*.css,*.jpg}', styles : [ 'src/stylus/**/theme.styl', 'src/stylus/**/driveway.styl' diff --git a/src/jade/index.jade b/src/jade/index.jade index 1588145..bd43a93 100644 --- a/src/jade/index.jade +++ b/src/jade/index.jade @@ -55,7 +55,7 @@ body.bg--darkred h2 about +segment('bg--green tx--white') h2 clusters? - .dw-pnl.dw-flp(style="height: 140px;") + .dw-pnl.dw-flp(style='height: 140px;') .dw-pnl__cntnt.dw-flp__cntnt .dw-flp__pnl.dw-flp__pnl--frnt.tx--white.bd--white.tx--center h1 You can flip me round @@ -81,7 +81,7 @@ body.bg--darkred .dw-pnl__cntnt.tx--white.bd--white.bg--darkred.tx--center h1 Focus on hover +panel('tx--white bg--blue') - h2 Some post about something + h2 Title for some content p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus. Curabitur quis eros eu tortor semper eleifend. .dw-pnl.dw-pnl--pls