diff --git a/site/app.class.js b/site/app.class.js index fd96253..851dc27 100644 --- a/site/app.class.js +++ b/site/app.class.js @@ -159,7 +159,7 @@ class App _options = {} if( typeof _options.port === 'undefined' ) - _options.port = 3000 + _options.port = 1571 // Save this.options = _options diff --git a/site/public/_gulp/gulpfile.js b/site/public/_gulp/gulpfile.js index d51043b..83d5ca4 100644 --- a/site/public/_gulp/gulpfile.js +++ b/site/public/_gulp/gulpfile.js @@ -2,17 +2,10 @@ var gulp = require( 'gulp' ), concat = require( 'gulp-concat' ), uglify = require( 'gulp-uglify' ), watch = require( 'gulp-watch' ), - minify_css = require( 'gulp-minify-css' ), - autoprefixer = require( 'gulp-autoprefixer' ), - postcss = require( 'gulp-postcss' ), - precss = require( 'precss' ), - postcss_import = require( 'postcss-import' ), - cssnano = require( 'cssnano' ), - sourcemaps = require( 'gulp-sourcemaps' ), - spritesmith = require( 'gulp.spritesmith' ), - merge = require( 'merge-stream' ), + gulp_sourcemaps = require( 'gulp-sourcemaps' ), plumber = require( 'gulp-plumber' ), gulp_rename = require( 'gulp-rename' ), + gulp_stylus = require( 'gulp-stylus' ), browser_sync = require( 'browser-sync' ).create(); var path = '../'; @@ -44,66 +37,43 @@ var path = '../'; gulp.task( 'stylesheet', function() { - var requires = [ - autoprefixer, - precss, - postcss_import, - cssnano, - ]; - - // Post CSS - return gulp.src( path + 'stylesheet/main.css' ) - .pipe( sourcemaps.init() ) - .pipe( plumber( function( error ) - { - console.log( error ); - this.emit( 'end' ); + return gulp.src( path + 'stylus/style.styl' ) + .pipe( gulp_sourcemaps.init() ) + .pipe( plumber() ) + .pipe( gulp_stylus( { + compress: true, } ) ) - .pipe( postcss( requires ) ) - .pipe( gulp_rename( { - // dirname: "main/text/ciao", - // basename: "aloha", - // prefix: "bonjour-", - suffix: ".min", - // extname: ".md" - } ) ) - .pipe( sourcemaps.write( '.' ) ) - .pipe( gulp.dest( path + 'stylesheet/' ) ) + .pipe( gulp_sourcemaps.write( '.' ) ) + .pipe( gulp.dest( path + 'stylesheet' ) ) .pipe( browser_sync.stream( { match: '**/*.css' } ) ); -}); -/** - * SPRITES - */ -gulp.task( 'sprites', function() -{ - var sprite_data = gulp.src( path + 'images/sprites/**/*.{png,jpg}' ) - .pipe( plumber() ) - .pipe( spritesmith( { - // Options - padding : 4, + // var requires = [ + // autoprefixer, + // precss, + // postcss_import, + // cssnano, + // ]; - // Default - imgName : 'sprites.png', - cssName : '_sprites.scss', - imgPath : path + 'images/sprites.png', - - // Retina - retinaSrcFilter: [path + 'images/sprites/*-2x.png'], - retinaImgName: 'sprites-2x.png', - retinaImgPath: path + 'images/sprites-2x.png' - } ) ); - - var img_stream = sprite_data.img - .pipe( plumber() ) - .pipe( gulp.dest( path + 'images/' ) ); - - var css_stream = sprite_data.css - .pipe( plumber() ) - .pipe( gulp.dest( path + 'sass/base/' ) ); - - return merge( img_stream, css_stream ); + // // Post CSS + // return gulp.src( path + 'stylesheet/main.css' ) + // .pipe( gulp_sourcemaps.init() ) + // .pipe( plumber( function( error ) + // { + // console.log( error ); + // this.emit( 'end' ); + // } ) ) + // .pipe( postcss( requires ) ) + // .pipe( gulp_rename( { + // // dirname: "main/text/ciao", + // // basename: "aloha", + // // prefix: "bonjour-", + // suffix: '.min', + // // extname: ".md" + // } ) ) + // .pipe( gulp_sourcemaps.write( '.' ) ) + // .pipe( gulp.dest( path + 'stylesheet/' ) ) + // .pipe( browser_sync.stream( { match: '**/*.css' } ) ); }); /** @@ -111,10 +81,11 @@ gulp.task( 'sprites', function() */ gulp.task( 'browser_sync', function() { + console.log('ok'); browser_sync.init( { proxy: { - target: 'http://localhost:3000', + target: 'http://localhost:1571', ws : true } } ); @@ -125,7 +96,6 @@ gulp.task( 'browser_sync', function() */ gulp.task( 'watch', function() { - console.log('ok'); // // JS // watch( // [ @@ -140,9 +110,7 @@ gulp.task( 'watch', function() // Stylesheet watch( [ - path + 'stylesheet/**', - '!' + path + 'stylesheet/main.min.css', - '!' + path + 'stylesheet/main.min.css.map' + path + 'stylus/**', ], function() { diff --git a/site/public/_gulp/package.json b/site/public/_gulp/package.json index da1c89a..fa127e8 100644 --- a/site/public/_gulp/package.json +++ b/site/public/_gulp/package.json @@ -7,20 +7,13 @@ "dependencies": { "autoprefixer": "^6.4.0", "browser-sync": "^2.13.0", - "cssnano": "^3.7.4", "gulp": "^3.8.10", - "gulp-autoprefixer": "^2.1.0", "gulp-concat": "^2.4.3", - "gulp-minify-css": "^0.3.13", "gulp-plumber": "^1.1.0", - "gulp-postcss": "^6.1.1", "gulp-rename": "^1.2.2", "gulp-sourcemaps": "^1.6.0", + "gulp-stylus": "^2.5.0", "gulp-uglify": "^1.1.0", - "gulp-watch": "^3.0.0", - "gulp.spritesmith": "^6.2.1", - "merge-stream": "^1.0.0", - "postcss-import": "^8.1.2", - "precss": "^1.4.0" + "gulp-watch": "^3.0.0" } } diff --git a/site/public/fonts/Stellar-Regular.eot b/site/public/fonts/Stellar-Regular.eot new file mode 100644 index 0000000..d650c73 Binary files /dev/null and b/site/public/fonts/Stellar-Regular.eot differ diff --git a/site/public/fonts/Stellar-Regular.ttf b/site/public/fonts/Stellar-Regular.ttf new file mode 100644 index 0000000..9eb2685 Binary files /dev/null and b/site/public/fonts/Stellar-Regular.ttf differ diff --git a/site/public/fonts/Stellar-Regular.woff b/site/public/fonts/Stellar-Regular.woff new file mode 100644 index 0000000..13c5e68 Binary files /dev/null and b/site/public/fonts/Stellar-Regular.woff differ diff --git a/site/public/fonts/Stellar-Regular.woff2 b/site/public/fonts/Stellar-Regular.woff2 new file mode 100644 index 0000000..3432311 Binary files /dev/null and b/site/public/fonts/Stellar-Regular.woff2 differ diff --git a/site/public/fonts/UbuntuMono-Regular.eot b/site/public/fonts/UbuntuMono-Regular.eot new file mode 100644 index 0000000..40a0551 Binary files /dev/null and b/site/public/fonts/UbuntuMono-Regular.eot differ diff --git a/site/public/fonts/UbuntuMono-Regular.ttf b/site/public/fonts/UbuntuMono-Regular.ttf new file mode 100644 index 0000000..fdd309d Binary files /dev/null and b/site/public/fonts/UbuntuMono-Regular.ttf differ diff --git a/site/public/fonts/UbuntuMono-Regular.woff b/site/public/fonts/UbuntuMono-Regular.woff new file mode 100644 index 0000000..b6d235d Binary files /dev/null and b/site/public/fonts/UbuntuMono-Regular.woff differ diff --git a/site/public/fonts/UbuntuMono-Regular.woff2 b/site/public/fonts/UbuntuMono-Regular.woff2 new file mode 100644 index 0000000..c419ccc Binary files /dev/null and b/site/public/fonts/UbuntuMono-Regular.woff2 differ diff --git a/site/public/stylesheet/base/general.css b/site/public/stylesheet/base/general.css deleted file mode 100644 index 62ad367..0000000 --- a/site/public/stylesheet/base/general.css +++ /dev/null @@ -1,10 +0,0 @@ -body -{ - -} -::-moz-selection {background:#888; } -::selection {background:#888; } -.clearfix -{ - overflow:auto;zoom:1; -} \ No newline at end of file diff --git a/site/public/stylesheet/base/reset.css b/site/public/stylesheet/base/reset.css deleted file mode 100644 index 8783707..0000000 --- a/site/public/stylesheet/base/reset.css +++ /dev/null @@ -1,133 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin:0; - padding:0; - border:0; - font-size:100%; - font:inherit; - vertical-align:baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display:block; -} -body { - line-height:1; -} -ol, ul { - list-style:none; -} -blockquote, q { - quotes:none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content:''; - content:none; -} -table { - border-collapse:collapse; - border-spacing:0; -} - -/* apply a natural box layout model to all elements */ -*,*::before,*::after,*:before,*:after { - -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; -} - -/* inputs */ -input,button,textarea,select { - color:inherit; - font-size:inherit; - font-style:inherit; - font-family:inherit; - -webkit-border-radius:0; - border-radius:0; - -webkit-padding-start:0; - align-items:flex-start; - text-index:0; - border:none; - outline:none; - background:none; - padding:0; - margin:0; - width:auto; - height:auto; - line-height:1em; -} - -/* inputs appearance (not for every input) */ -input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number], -input[type=submit],input[type=reset],input[type=color],input[type=file], -button,textarea,select { - height:1em; - -webkit-appearance:none; - -moz-appearance:none; - appearance:none; -} - -/* input color width */ -input[type=color] { - width:1em; -} - -/* IE clear cross */ -input::-ms-clear { - display:none; -} - -/* details and summary */ -details, summary { - -webkit-appearance:none; - -moz-appearance:none; - appearance:none; -} - -/* text size adjusting */ -body { - -webkit-text-size-adjust:100%; - -moz-text-size-adjust:100%; - text-size-adjust:100%; -} - -/* mark */ -mark {background:none;} - -/* hr */ -hr { - height:1px; - margin:0;padding:0; -} - -/* u */ -u { - text-decoration:none; -} - -/* th */ -table th { - text-align:left; -} - -/* a */ -a { - color:inherit; - outline:none; -} diff --git a/site/public/stylesheet/main.css b/site/public/stylesheet/main.css deleted file mode 100644 index 9a1abeb..0000000 --- a/site/public/stylesheet/main.css +++ /dev/null @@ -1,11 +0,0 @@ -@import "mixins/image-2x.css"; -@import "mixins/touch.css"; -@import "mixins/font-smoothing.css"; -@import "mixins/breakpoints.css"; - -@import "base/fonts.css"; -@import "base/reset.css"; -@import "base/general.css"; - -@import "pages/index_index.css"; -@import "pages/index_project.css"; diff --git a/site/public/stylesheet/main.min.css b/site/public/stylesheet/main.min.css deleted file mode 100644 index db2f617..0000000 --- a/site/public/stylesheet/main.min.css +++ /dev/null @@ -1,2 +0,0 @@ -a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*,:after,:before{box-sizing:border-box}button,input,select,textarea{color:inherit;font-size:inherit;font-style:inherit;font-family:inherit;border-radius:0;-webkit-padding-start:0;align-items:flex-start;text-index:0;border:none;outline:none;background:none;padding:0;margin:0;width:auto;height:auto;line-height:1em}button,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=reset],input[type=search],input[type=submit],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{height:1em;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=color]{width:1em}input::-ms-clear{display:none}details,summary{-webkit-appearance:none;-moz-appearance:none;appearance:none}body{-webkit-text-size-adjust:100%;text-size-adjust:100%}mark{background:none}hr{height:1px;margin:0;padding:0}u{text-decoration:none}table th{text-align:left}a{color:inherit;outline:none}::-moz-selection{background:#888}::selection{background:#888}.clearfix{overflow:auto;zoom:1} -/*# sourceMappingURL=main.min.css.map */ diff --git a/site/public/stylesheet/mixins/breakpoints.css b/site/public/stylesheet/mixins/breakpoints.css deleted file mode 100644 index c1e57fa..0000000 --- a/site/public/stylesheet/mixins/breakpoints.css +++ /dev/null @@ -1,20 +0,0 @@ -$breakpoint-xxsmall: 480px; -$breakpoint-xsmall: 600px; -$breakpoint-small: 840px; -$breakpoint-medium: 960px; -$breakpoint-large: 1280px; -$breakpoint-xlarge: 1440px; -$breakpoint-xxlarge: 1600px; - -@define-mixin max-width $value -{ - @media only screen and (max-width:$value){ - @mixin-content; - } -} -@define-mixin max-height $value -{ - @media only screen and (max-height:$value){ - @mixin-content; - } -} diff --git a/site/public/stylesheet/mixins/font-smoothing.css b/site/public/stylesheet/mixins/font-smoothing.css deleted file mode 100644 index f346c90..0000000 --- a/site/public/stylesheet/mixins/font-smoothing.css +++ /dev/null @@ -1,13 +0,0 @@ -@define-mixin font-smoothing $value: antialiased -{ - @if $value == antialiased - { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - @else - { - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - } -} diff --git a/site/public/stylesheet/mixins/image-2x.css b/site/public/stylesheet/mixins/image-2x.css deleted file mode 100644 index 83cd711..0000000 --- a/site/public/stylesheet/mixins/image-2x.css +++ /dev/null @@ -1,12 +0,0 @@ -@define-mixin image-2x $image, $width, $height -{ - @media (min--moz-device-pixel-ratio: 1.3), - (-o-min-device-pixel-ratio: 2.6/2), - (-webkit-min-device-pixel-ratio: 1.3), - (min-device-pixel-ratio: 1.3), - (min-resolution: 1.3dppx) - { - background-image: url($image); - background-size: $width $height; - } -} diff --git a/site/public/stylesheet/mixins/touch.css b/site/public/stylesheet/mixins/touch.css deleted file mode 100644 index 029da2b..0000000 --- a/site/public/stylesheet/mixins/touch.css +++ /dev/null @@ -1,13 +0,0 @@ -@define-mixin no-touch -{ - html.features-no-touch & { - @mixin-content; - } -} - -@define-mixin touch -{ - html.features-touch & { - @mixin-content; - } -} diff --git a/site/public/stylesheet/pages/index_index.css b/site/public/stylesheet/pages/index_index.css deleted file mode 100644 index e69de29..0000000 diff --git a/site/public/stylesheet/pages/index_project.css b/site/public/stylesheet/pages/index_project.css deleted file mode 100644 index e69de29..0000000 diff --git a/site/public/stylesheet/style.css b/site/public/stylesheet/style.css new file mode 100644 index 0000000..699403d --- /dev/null +++ b/site/public/stylesheet/style.css @@ -0,0 +1,2 @@ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0;}table th{text-align:left}*,*::before,*::after,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input,button,textarea,select{color:inherit;font-size:inherit;font-style:inherit;font-family:inherit;-webkit-border-radius:0;border-radius:0;-webkit-padding-start:0;align-items:flex-start;text-index:0;border:none;outline:none;background:none;padding:0;margin:0;width:auto;height:auto;line-height:1em}input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number],input[type=submit],input[type=color],input[type=file],button,textarea,select{height:1em;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=color]{width:1em}input::-ms-clear{display:none}details,summary{-webkit-appearance:none;-moz-appearance:none;appearance:none}mark{background:none}hr{height:1px;margin:0;padding:0}u{text-decoration:none}a{color:inherit;outline:none}@font-face{font-family:'Stellar';src:url("../fonts/Stellar-Regular.eot");src:url("../fonts/Stellar-Regular.eot?#iefix") format('embedded-opentype'),url("../fonts/Stellar-Regular.woff2") format('woff2'),url("../fonts/Stellar-Regular.woff") format('woff'),url("../fonts/Stellar-Regular.ttf") format('truetype');font-weight:normal;font-style:normal}@font-face{font-family:'Ubuntu Mono';src:url("../fonts/UbuntuMono-Regular.eot");src:url("../fonts/UbuntuMono-Regular.eot?#iefix") format('embedded-opentype'),url("../fonts/UbuntuMono-Regular.woff2") format('woff2'),url("../fonts/UbuntuMono-Regular.woff") format('woff'),url("../fonts/UbuntuMono-Regular.ttf") format('truetype');font-weight:normal;font-style:normal}body{font-family:Helvetica,Arial;font-size:12px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased}body.projects{background:#323759;color:#fff;}body.projects ::-moz-selection{background:#f1eff9}body.projects ::selection{background:#f1eff9}body.projects .gradient-backgroud{position:absolute;top:0;left:0;width:100%;height:920px;background:linear-gradient(0,#323759,#5e50c3 33%,#c9b2cd)}body.projects p,body.projects ul{font-size:14px;line-height:18px;margin-bottom:1em}body.projects code{font-family:'Ubuntu Mono'}body.projects section.landing{position:relative;margin-bottom:60px;}body.projects section.landing .logo{position:absolute;top:315px;left:50%;}body.projects section.landing .logo .disks .disk{position:absolute;border-radius:50%;background:#fff;transform:translateX(-50%) translateY(-50%);opacity:.2;}body.projects section.landing .logo .disks .disk.index-0{width:100px;height:100px;opacity:.7}body.projects section.landing .logo .disks .disk.index-1{width:200px;height:200px}body.projects section.landing .logo .disks .disk.index-2{width:300px;height:300px}body.projects section.landing .logo .disks .disk.index-3{width:400px;height:400px}body.projects section.landing .logo .disks .disk.index-4{width:500px;height:500px}body.projects section.landing .logo .title{font-size:45px;}body.projects section.landing .logo .title .letter{position:absolute;top:0;left:0;line-height:0;}body.projects section.landing .logo .title .letter.index-0{left:85px}body.projects section.landing .logo .title .letter.index-1{left:135px}body.projects section.landing .logo .title .letter.index-2{left:185px}body.projects section.landing .logo .title .letter.index-3{left:235px}body.projects section.landing .logo .title .letter.index-4{left:285px}body.projects section.landing .logo .title .letter.index-5{left:335px}body.projects section.landing .logo .title .letter.index-6{left:385px}body.projects section.landing .punch-line{padding-top:600px;text-align:center;}body.projects section.landing .punch-line .text{text-transform:uppercase;font-size:18px;margin:0 0 8px 0}body.projects section.landing .punch-line .links a.link{display:inline-block;padding:5px 10px;margin:0 5px;background:rgba(255,255,255,0.2);text-decoration:none;transition:background .15s;}body.projects section.landing .punch-line .links a.link:hover{background:rgba(255,255,255,0.3)}body.projects section.projects{position:relative;width:640px;margin:0 auto 90px auto;}body.projects section.projects .head{height:45px;line-height:45px;background:#333759;text-align:center;font-size:14px}body.projects section.projects .content{width:100%;}body.projects section.projects .content span.no-project{display:block;padding:17px 0;background:#eef0fa;text-align:center;color:#6c6e7c;font-size:16px;font-weight:bold;}body.projects section.projects .content span.no-project .title{opacity:.4}body.projects section.projects .content a.project{display:block;background:#eef0fa;color:#6c6e7c;border-bottom:1px solid #dadada;transition:background .15s;}body.projects section.projects .content a.project .title{display:inline-block;vertical-align:top;width:400px;font-size:16px;font-weight:bold;padding:17px}body.projects section.projects .content a.project .details{display:inline-block;vertical-align:top;width:240px;text-align:right;}body.projects section.projects .content a.project .details .detail{display:inline-block;padding:11px 10px;text-align:right;}body.projects section.projects .content a.project .details .detail .label{font-size:10px;opacity:.5;margin-bottom:2px}body.projects section.projects .content a.project .details .detail .value{font-weight:bold}body.projects section.projects .content a.project:last-child{border-bottom:none}body.projects section.projects .content a.project:hover{background:#f6f7fc}body.projects section.text{position:relative;width:640px;margin:0 auto 90px auto;text-align:center;}body.projects section.text .title{margin-bottom:18px;font-family:'Stellar';font-size:32px}body.projects section.text ul{display:inline-block;text-align:left}body.projects section.text pre{width:400px;margin:0 auto 2em auto;background:#282c47;padding:12px 18px;text-align:left;}body.projects section.text pre span.line:before{display:inline-block;content:'$';padding:0 8px 0 0}body.projects section.text pre .opacity-20{opacity:.2;pointer-events:none} +/*# sourceMappingURL=style.css.map */ diff --git a/site/public/stylus/base/fonts.styl b/site/public/stylus/base/fonts.styl new file mode 100644 index 0000000..c3f2f52 --- /dev/null +++ b/site/public/stylus/base/fonts.styl @@ -0,0 +1,13 @@ +@font-face + font-family 'Stellar' + src url('../fonts/Stellar-Regular.eot') + src url('../fonts/Stellar-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Stellar-Regular.woff2') format('woff2'), url('../fonts/Stellar-Regular.woff') format('woff'), url('../fonts/Stellar-Regular.ttf') format('truetype') + font-weight normal + font-style normal + +@font-face + font-family 'Ubuntu Mono' + src url('../fonts/UbuntuMono-Regular.eot') + src url('../fonts/UbuntuMono-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/UbuntuMono-Regular.woff2') format('woff2'), url('../fonts/UbuntuMono-Regular.woff') format('woff'), url('../fonts/UbuntuMono-Regular.ttf') format('truetype') + font-weight normal + font-style normal diff --git a/site/public/stylus/base/general.styl b/site/public/stylus/base/general.styl new file mode 100644 index 0000000..6587ed7 --- /dev/null +++ b/site/public/stylus/base/general.styl @@ -0,0 +1,9 @@ +body + font-family Helvetica, Arial + font-size 12px + font-smoothing(antialiased) + + + + + diff --git a/site/public/stylus/base/reset.styl b/site/public/stylus/base/reset.styl new file mode 100644 index 0000000..cc6b576 --- /dev/null +++ b/site/public/stylus/base/reset.styl @@ -0,0 +1,106 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video + margin 0 + padding 0 + border 0 + font-size 100% + font inherit + vertical-align baseline + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section + display block + +body + line-height 1 + -webkit-text-size-adjust 100% + -moz-text-size-adjust 100% + text-size-adjust 100% + +ol, ul + list-style none + +blockquote, q + quotes none + +blockquote:before, blockquote:after, +q:before, q:after + content '' + content none + +table + border-collapse collapse + border-spacing 0 + th + text-align left + +*,*::before,*::after,*:before,*:after + -moz-box-sizing border-box + -webkit-box-sizing border-box + box-sizing border-box + +input,button,textarea,select + color inherit + font-size inherit + font-style inherit + font-family inherit + -webkit-border-radius 0 + border-radius 0 + -webkit-padding-start 0 + align-items flex-start + text-index 0 + border none + outline none + background none + padding 0 + margin 0 + width auto + height auto + line-height 1em + +input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number], +input[type=submit],input[type=reset],input[type=color],input[type=file], +button,textarea,select + height 1em + -webkit-appearance none + -moz-appearance none + appearance none + +input[type=color] + width 1em + +input + &::-ms-clear + display none + +details, summary + -webkit-appearance none + -moz-appearance none + appearance none + +mark + background none + +hr + height 1px + margin 0 + padding 0 + +u + text-decoration none + +a + color inherit + outline none + diff --git a/site/public/stylus/mixins/font-smoothing.styl b/site/public/stylus/mixins/font-smoothing.styl new file mode 100644 index 0000000..7452389 --- /dev/null +++ b/site/public/stylus/mixins/font-smoothing.styl @@ -0,0 +1,10 @@ +font-smoothing($smoothing = auto) { + -webkit-font-smoothing $smoothing + if $smoothing == antialiased { + -moz-osx-font-smoothing grayscale + } + if $smoothing == subpixel-antialiased { + -moz-osx-font-smoothing auto + } + font-smoothing $smoothing +} diff --git a/site/public/stylus/mixins/rupture.styl b/site/public/stylus/mixins/rupture.styl new file mode 100644 index 0000000..cc4334d --- /dev/null +++ b/site/public/stylus/mixins/rupture.styl @@ -0,0 +1,260 @@ +base-font-size ?= 16px +rasterise-media-queries ?= false + +rupture = { + rasterise-media-queries: rasterise-media-queries + mobile-cutoff: 400px + desktop-cutoff: 1050px + hd-cutoff: 1800px + enable-em-breakpoints: false + base-font-size: base-font-size + anti-overlap: false + density-queries: 'dppx' 'webkit' 'moz' 'dpi' + retina-density: 1.5 + use-device-width: false +} +rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff) (rupture.hd-cutoff) +rupture.scale-names = 'xs' 's' 'm' 'l' 'xl' 'hd' + +-is-string(val) + if typeof(val) is not 'unit' + if val is a 'string' or val is a 'ident' + true + else + false + else + false + +-get-scale-number(scale-name) + for list-item, i in rupture.scale-names + if list-item is scale-name + return i + 1 + return false + +-convert-to(to-unit, value, context = rupture.base-font-size) + from-unit = unit(value) + return value if to-unit is from-unit + if to-unit in ('em' 'rem') + return value if from-unit in ('em' 'rem') + return unit((value / context), to-unit) + if to-unit is 'px' + return unit((value * context), 'px') + +-on-scale(n) + return unit(n) is '' + +-larger-than-scale(n) + return (n > (length(rupture.scale) - 1)) and -on-scale(n) + +-is-zero(n) + return n is 0 + +-overlap-shift(anti-overlap, n) + shift-unit = unit(n) + anti-overlap = 0px unless anti-overlap + anti-overlap = 1px if anti-overlap is true + if length(anti-overlap) is 1 + return -convert-to(shift-unit, anti-overlap) + for val in anti-overlap + return val if unit(val) is shift-unit + +-adjust-overlap(anti-overlap, n, side = 'min') + -shift = -overlap-shift(anti-overlap, n) + if (side is 'min' and -shift > 0) or (side is 'max' and -shift < 0) + n = n + -shift + return n + +-is-positive(n) + return n >= 0 + +-density-queries(density) + if typeof(density) is not 'unit' + if not -is-string(density) + density = '%s' % density + density = rupture.retina-density if density is 'retina' + queries = () + for query in rupture.density-queries + if query is 'webkit' + push(queries, '(-webkit-min-device-pixel-ratio: %s)' % (density)) + else if query is 'moz' + push(queries, '(min--moz-device-pixel-ratio: %s)' % (density)) + else if query is 'o' + push(queries, '(-o-min-device-pixel-ratio: %s/1)' % (density)) + else if query is 'ratio' + push(queries, '(min-device-pixel-ratio: %s)' % (density)) + else if query is 'dpi' + if -is-string(density) + density=convert(density) + push(queries, '(min-resolution: %sdpi)' % (round(density * 96, 1))) + else if query is 'dppx' + push(queries, '(min-resolution: %sdppx)' % (density)) + return queries + +create-fallback-class(selected, class) + /{'' + class + ' ' + selected} + {block} + +// +between(min, max) +// usage (scale can be mixed with custom values): +// - +between(1, 3) scale:scale +// - +between(0, 3) 0 width:scale +// - +between(200px, 500px) custom:custom +// - +between(0, 300px) 0 width:custom +// - +between(1, 300px) scale:custom +// - +between(200px, 4) custom:scale + +between(min, max, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null) + selected = selector() + + if -is-string(orientation) + orientation = convert(orientation) + if -is-string(density) + density = convert(density) + if -is-string(min) + min = -get-scale-number(min) + if -is-string(max) + max = -get-scale-number(max) + + -min = rupture.scale[min - 1] unless -is-zero(min) or (not -on-scale(min)) + -max = rupture.scale[max] unless not -on-scale(max) + -min ?= min + -max ?= max + + if (rupture.rasterise-media-queries) + if not (density or -max or orientation) + {block} + else + condition = 'only screen' + use-device-width = use-device-width ? 'device-' : '' + unless -min is 0 + -min = -convert-to('em', -min) if rupture.enable-em-breakpoints + -min = -adjust-overlap(anti-overlap, -min, side: 'min') + condition = condition + ' and (min-' + use-device-width + 'width: %s)' % (-min) + unless -larger-than-scale(max) + -max = -convert-to('em', -max) if rupture.enable-em-breakpoints + -max = -adjust-overlap(anti-overlap, -max, side: 'max') + condition = condition + ' and (max-' + use-device-width + 'width: %s)' % (-max) + if orientation + condition = condition + ' and (orientation: %s)' % (orientation) + if density + conditions = () + for query in -density-queries(density) + push(conditions, condition + ' and %s' % (query)) + condition = join(', ', conditions) + @media condition + {block} + if fallback-class + +create-fallback-class(selected, fallback-class) + {block} + +at(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null) + if -is-string(orientation) + orientation = convert(orientation) + if -is-string(density) + density = convert(density) + +between(scale-point, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class) + {block} + +from-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null) + if -is-string(orientation) + orientation = convert(orientation) + if -is-string(density) + density = convert(density) + +between(scale-point, length(rupture.scale), anti-overlap, density, orientation, use-device-width, fallback-class) + {block} + +above = from-width + +to-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null) + if -is-string(orientation) + orientation = convert(orientation) + if -is-string(density) + density = convert(density) + +between(1, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class) + {block} + +below = to-width + +mobile(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null) + if -is-string(orientation) + orientation = convert(orientation) + if -is-string(density) + density = convert(density) + +below(rupture.mobile-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class) + {block} + +tablet(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null) + if -is-string(orientation) + orientation = convert(orientation) + if -is-string(density) + density = convert(density) + +between(rupture.mobile-cutoff, rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class) + {block} + +desktop(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null) + if -is-string(orientation) + orientation = convert(orientation) + if -is-string(density) + density = convert(density) + +above(rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class) + {block} + +hd(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null) + if -is-string(orientation) + orientation = convert(orientation) + if -is-string(density) + density = convert(density) + +above(rupture.hd-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class) + {block} + +density(density, orientation = null, fallback-class = null) + selected = selector() + if not (rupture.rasterise-media-queries) + conditions = () + for query in -density-queries(density) + condition = 'only screen and %s' % (query) + if orientation + condition = condition + ' and (orientation: %s)' % (orientation) + push(conditions, condition) + condition = join(', ', conditions) + @media condition + {block} + if fallback-class + +create-fallback-class(selected, fallback-class) + {block} + +pixel-ratio = density + +retina(orientation = null, fallback-class = null) + +density('retina', orientation, fallback-class) + {block} + +landscape(density = null, fallback-class = null) + selected = selector() + if not (rupture.rasterise-media-queries) + if -is-string(density) + density = convert(density) + if density + +pixel-ratio(density, orientation: landscape, fallback-class) + {block} + else + @media only screen and (orientation: landscape) + {block} + if fallback-class + +create-fallback-class(selected, fallback-class) + {block} + +portrait(density = null, fallback-class = null) + selected = selector() + if not (rupture.rasterise-media-queries) + if -is-string(density) + density = convert(density) + if density + +pixel-ratio(density, orientation: portrait, fallback-class) + {block} + else + @media only screen and (orientation: portrait) + {block} + if fallback-class + +create-fallback-class(selected, fallback-class) + {block} diff --git a/site/public/stylesheet/base/fonts.css b/site/public/stylus/pages/project.styl similarity index 100% rename from site/public/stylesheet/base/fonts.css rename to site/public/stylus/pages/project.styl diff --git a/site/public/stylus/pages/projects.styl b/site/public/stylus/pages/projects.styl new file mode 100644 index 0000000..0aa9936 --- /dev/null +++ b/site/public/stylus/pages/projects.styl @@ -0,0 +1,201 @@ +body.projects + background #323759 + color #fff + + ::-moz-selection + background #f1eff9 + ::selection + background #f1eff9 + + .gradient-backgroud + position absolute + top 0 + left 0 + width 100% + height 920px + background linear-gradient( 0deg, #323759, #5e50c3 33%, #c9b2cd ) + + p, + ul + font-size 14px + line-height 18px + margin-bottom 1em + + code + font-family 'Ubuntu Mono' + + section.landing + position relative + margin-bottom 60px + + .logo + position absolute + top 315px + left 50% + + .disks + .disk + position absolute + border-radius 50% + background #fff + transform translateX(-50%) translateY(-50%) + opacity 0.2 + + &.index-0 + width 100px + height 100px + opacity 0.7 + &.index-1 + width 200px + height 200px + &.index-2 + width 300px + height 300px + &.index-3 + width 400px + height 400px + &.index-4 + width 500px + height 500px + .title + font-size 45px + + .letter + position absolute + top 0 + left 0 + line-height 0 + + &.index-0 + left 100px - 15px + &.index-1 + left 150px - 15px + &.index-2 + left 200px - 15px + &.index-3 + left 250px - 15px + &.index-4 + left 300px - 15px + &.index-5 + left 350px - 15px + &.index-6 + left 400px - 15px + + .punch-line + padding-top 600px + text-align center + + .text + text-transform uppercase + font-size 18px + margin 0 0 8px 0 + + .links + a.link + display inline-block + padding 5px 10px + margin 0 5px + background rgba(255,255,255,0.2) + text-decoration none + transition background 0.15s + &:hover + background rgba(255,255,255,0.30) + + section.projects + position relative + width 640px + margin 0 auto 90px auto + + .head + height 45px + line-height 45px + background #333759 + text-align center + font-size 14px + + .content + width 100% + + span.no-project + display block + padding 17px 0 + background #eef0fa + text-align center + color #6c6e7c + font-size 16px + font-weight bold + + .title + opacity 0.4 + + a.project + display block + background #eef0fa + color #6c6e7c + border-bottom 1px solid #dadada + transition background 0.15s + + .title + display inline-block + vertical-align top + width 400px + font-size 16px + font-weight bold + padding 17px + + .details + display inline-block + vertical-align top + width 240px + text-align right + + .detail + display inline-block + padding 11px 10px + text-align right + + .label + font-size 10px + opacity 0.5 + margin-bottom 2px + + .value + font-weight bold + + &:last-child + border-bottom none + + &:hover + background #f6f7fc + + section.text + position relative + width 640px + margin 0 auto 90px auto + text-align center + + .title + margin-bottom 18px + font-family 'Stellar' + font-size 32px + + ul + display inline-block + text-align left + + pre + width 400px + margin 0 auto 2em auto + background #282c47 + padding 12px 18px + text-align left + + span.line + &:before + display inline-block + content '$' + padding 0 8px 0 0 + .opacity-20 + opacity 0.2 + pointer-events none + diff --git a/site/public/stylus/style.styl b/site/public/stylus/style.styl new file mode 100644 index 0000000..dca604a --- /dev/null +++ b/site/public/stylus/style.styl @@ -0,0 +1,9 @@ +@import 'mixins/font-smoothing' +@import 'mixins/rupture' + +@import 'base/reset' +@import 'base/fonts' +@import 'base/general' + +@import 'pages/projects' +@import 'pages/project' diff --git a/site/views/pages/index/project.jade b/site/views/pages/index/project.jade index ab6e05a..7dabdc8 100644 --- a/site/views/pages/index/project.jade +++ b/site/views/pages/index/project.jade @@ -1,3 +1,4 @@ +- var page_class = 'project' include ../../partials/header.jade script(type="text/ng-template",id="folder_template.html") diff --git a/site/views/pages/index/projects.jade b/site/views/pages/index/projects.jade index e8ea7fc..9c18af4 100644 --- a/site/views/pages/index/projects.jade +++ b/site/views/pages/index/projects.jade @@ -1,23 +1,96 @@ +- var page_class = 'projects' include ../../partials/header.jade -section.page-projects(ng-controller="ProjectsController as controller") - .projects(ng-show="projects") - .item.title +.gradient-backgroud +section.landing + .logo + .disks + .disk.index-0 + .disk.index-1 + .disk.index-2 + .disk.index-3 + .disk.index-4 + .title + span.letter.index-0= 'K' + span.letter.index-1= 'E' + span.letter.index-2= 'P' + span.letter.index-3= 'P' + span.letter.index-4= 'L' + span.letter.index-5= 'E' + span.letter.index-6= 'R' + .punch-line + .text + | An efficient way to share your code while presenting + .links + a.link(href="http://github.com/brunosimon/keppler",target="_blank") + | github + a.link(href="http://bruno-simon.com",target="_blank") + | bruno simon +section.projects(ng-controller="ProjectsController as controller") + .container + .head | Projects - a.item(href="/project/{{project.slug}}",ng-repeat="project in projects") - .name - | {{project.name}} - .file-count - | Files: {{project.files_count}} - .creation - | Creation: {{project.date_formated}} - .time-from-now - | {{project.time_from_now}} - .last-update-date - | Last update: {{project.last_update_date_formated}} - .time-from-now - | {{project.last_update_time_from_now}} - .no-project(ng-hide="projects") - | No project + .content + span.no-project(ng-hide="projects") + .title + | No project + a.project(href="/project/{{project.slug}}",ng-repeat="project in projects") + .title + | {{project.name}} + .details + .detail + .label + | created at + .value + | {{project.date_formated}} + .detail + .label + | last update + .value + | {{project.last_update_date_formated}} + .detail + .label + | files + .value + | {{project.files_count}} +section.text + .title + | What is keppler + .description + p + | Keppler lets you share your code simply during a presentation. + br + | The tool displays the hierarchy of files and their history. It indicates the arrival of new versions of a file and displays which parts have changed. + p + | Viewers can easily browse files and history while following the presentation. + p + | Keppler is easy to install and works with NodeJS. + +section.text + .title + | Instructions + .description + p + | Requirements: + ul + li + | - NodeJS installed + li + | - Spectators connected to the same wifi + p + | Install Keppler globally + pre + code + span.line.opacity-20 + | npm install -g keppler + p + | Go to the project folder and start Keppler + pre + code + span.line.opacity-20 + | cd ./my-awesome-project + br + span.line.opacity-20 + | keppler "My project" include ../../partials/footer.jade diff --git a/site/views/partials/header.jade b/site/views/partials/header.jade index 1fc236e..3c451c8 100644 --- a/site/views/partials/header.jade +++ b/site/views/partials/header.jade @@ -1,7 +1,7 @@ html(ng-app="application") head title - | Code Spectat + | Keppler script. var config = { domain : '#{domain}' @@ -20,8 +20,7 @@ html(ng-app="application") script(src="/javascript/services/projects.js") script(src="/javascript/models/tree.js") - link(rel="stylesheet",href="/stylesheets/reset.min.css") - link(rel="stylesheet",href="/stylesheets/style.css") + link(rel="stylesheet",href="/stylesheet/style.css") link(rel="stylesheet",href="/vendors/highlight/styles/dracula.css") //- link(rel="stylesheet",href="/vendors/highlight/styles/atom-one-dark.css") //- link(rel="stylesheet",href="/vendors/highlight/styles/gruvbox-dark.css") @@ -32,8 +31,4 @@ html(ng-app="application") //- link(rel="stylesheet",href="/vendors/highlight/styles/tomorrow-night.css") link(rel="stylesheet",href="/vendors/font-awesome/css/font-awesome.min.css") - body - header.main-header - h1 - a(href=domain) - | Code Spectat + body(class=page_class)