[update] Init front tasks

.gitignore

@@ -68,3 +68,7 @@ Icon
 Network Trash Folder
 Temporary Items
 .apdisk
+
+### Sass ###
+.sass-cache/
+*.css.map

site/public/_gulp/gulpfile.js

@@ -0,0 +1,156 @@
+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' ),
+    plumber         = require( 'gulp-plumber' ),
+    gulp_rename     = require( 'gulp-rename' ),
+    browser_sync    = require( 'browser-sync' ).create();
+
+var path = '../';
+
+// /**
+//  * Javascript
+//  */
+// gulp.task( 'javascript', function()
+// {
+//     gulp.src([
+//         path + '/javascript/libraries/jquery-3.0.0.js',
+//         path + '/javascript/libraries/burno-0.3.js',
+//         path + '/javascript/libraries/fastclick.js',
+//         path + '/javascript/libraries/q.js',
+//         path + '/javascript/libraries/hammer.min.js',
+//         path + '/javascript/application/application.class.js',
+//         path + '/javascript/application/tools/ajax.class.js',
+//         path + '/javascript/application/tools/manager.class.js',
+//         path + '/javascript/application/tools/loader.class.js',
+//         path + '/javascript/application/tools/navigation.class.js',
+//         path + '/javascript/application/tools/parallax.class.js',
+//         path + '/javascript/application/tools/scroller.class.js',
+//     ])
+//     .pipe( concat( 'main.min.js' ) )
+//     .pipe( uglify() )
+//     .pipe( gulp.dest( path + 'javascript/' ) )
+//     .pipe( browser_sync.stream() );
+// });
+
+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' );
+        } ) )
+        .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( 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,
+
+            // 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 );
+});
+
+/**
+ * Browser Sync
+ */
+gulp.task( 'browser_sync', function()
+{
+    browser_sync.init( {
+        proxy:
+        {
+            target: 'http://localhost:3000',
+            ws    : true
+        }
+    } );
+} );
+
+/**
+ * WATCH
+ */
+gulp.task( 'watch', function()
+{
+    console.log('ok');
+    // // JS
+    // watch(
+    //     [
+    //         path + 'javascript/**',
+    //         '!' + path + 'javascript/main.min.js'
+    //     ],
+    //     function()
+    //     {
+    //         gulp.start( 'javascript' );
+    //     } );
+
+    // Stylesheet
+    watch(
+        [
+            path + 'stylesheet/**',
+            '!' + path + 'stylesheet/main.min.css',
+            '!' + path + 'stylesheet/main.min.css.map'
+        ],
+        function()
+        {
+            gulp.start( 'stylesheet');
+        }
+    );
+} );
+
+
+gulp.task( 'start', [ 'default', 'watch', 'browser_sync' ] );
+gulp.task( 'default', [ /*'javascript',*/ 'stylesheet' ] );

site/public/_gulp/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "Tweaker",
+  "version": "0.1.0",
+  "description": "",
+  "main": "gulpfile.js",
+  "author": "",
+  "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-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"
+  }
+}

site/public/stylesheet/base/general.css

@@ -0,0 +1,10 @@
+body
+{
+
+}
+::-moz-selection {background:#888; }
+::selection {background:#888; }
+.clearfix
+{
+    overflow:auto;zoom:1;
+}

site/public/stylesheet/base/reset.css

@@ -0,0 +1,133 @@
+/* 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;
+}

site/public/stylesheet/main.css

@@ -0,0 +1,11 @@
+@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";

site/public/stylesheet/main.min.css

@@ -0,0 +1,2 @@
+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 */

site/public/stylesheet/mixins/breakpoints.css

@@ -0,0 +1,20 @@
+$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;
+    }
+}

site/public/stylesheet/mixins/font-smoothing.css

@@ -0,0 +1,13 @@
+@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;
+    }
+}

site/public/stylesheet/mixins/image-2x.css

@@ -0,0 +1,12 @@
+@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;
+    }
+}

site/public/stylesheet/mixins/touch.css

@@ -0,0 +1,13 @@
+@define-mixin no-touch
+{
+    html.features-no-touch & {
+        @mixin-content;
+    }
+}
+
+@define-mixin touch
+{
+    html.features-touch & {
+        @mixin-content;
+    }
+}

site/public/stylesheets/reset.min.css

@@ -1 +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: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:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*,::after,::before,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}button,input,select,textarea{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:0;background:0 0;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}mark{background:0 0}hr{height:1px;margin:0;padding:0}u{text-decoration:none}table th{text-align:left}a{color:inherit;outline:0}

site/public/stylesheets/style.css

@@ -1,104 +0,0 @@
-/**
- * Global
- */
-body {background:#24262e;font-size:14px;font-family:Helvetica,Arial;color:#f1f5ff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
-a {text-decoration:none;}
-* {padding:0;margin:0;box-sizing:border-box;}
-
-/**
- * Main header
- */
-header.main-header {position:fixed;top:0;left:0;right:0;height:60px;background:#202124;border-bottom:1px solid #32374d;box-shadow:0px 5px 10px rgba(0,0,0,0.1);}
-header.main-header a {display:inline-block;padding:0 0 0 20px;line-height:60px;text-transform:uppercase;}
-
-/**
- * Page projects
- */
-section.page-projects {padding-top:100px;}
-section.page-projects .no-project {text-align:center;padding:180px 0;}
-section.page-projects .projects {width:400px;margin:0 auto;background:#202124;box-shadow:0px 5px 10px rgba(0,0,0,0.1);border:1px solid #32374d;}
-section.page-projects .projects .title {height:40px;line-height:40px;text-align:center;}
-section.page-projects .projects .item {position:relative;padding:0 10px;display:block;line-height:32px;}
-section.page-projects .projects .item:after {content:'';display:block;position:absolute;bottom:0;left:0;right:0;height:1px;background:#32374d;opacity:0.4;}
-section.page-projects .projects a.item:hover {background:#32374d;}
-section.page-projects .projects .item:last-child:after {display:none;}
-
-/**
- * Page projet
- */
-section.page-project {position:fixed;top:60px;right:0;bottom:0;left:0;}
-section.page-project .aside {position:absolute;top:0;bottom:0;left:0;width:240px;}
-section.page-project .aside .aside-header {padding:10px;background:#3b3f4e;}
-section.page-project .aside .aside-header .always-last-version-toggle {cursor:pointer;}
-section.page-project .aside .aside-header .always-last-version-toggle .switch {display:inline-block;width:12px;height:12px;border:1px solid #f1f5ff;}
-section.page-project .aside .aside-header .always-last-version-toggle.active .switch {background:#f1f5ff;}
-section.page-project .aside .aside-header .show-differences-toggle {cursor:pointer;}
-section.page-project .aside .aside-header .show-differences-toggle .switch {display:inline-block;width:12px;height:12px;border:1px solid #f1f5ff;}
-section.page-project .aside .aside-header .show-differences-toggle.active .switch {background:#f1f5ff;}
-section.page-project .aside .aside-tree {position:absolute;top:76px;left:0;bottom:0;width:100%;overflow:auto;}
-section.page-project section.main {position:absolute;top:0;right:0;bottom:0;left:240px;}
-section.page-project section.no-file {position:absolute;top:0;right:0;bottom:0;left:0;}
-section.page-project section.file {position:absolute;top:0;right:0;bottom:0;left:0;}
-section.page-project section.file .file-header {position:absolute;top:0;right:0;left:0;height:30px;line-height:30px;padding:0 0 0 10px;background:#777;}
-section.page-project section.file .versions-nav {position:absolute;top:30px;bottom:0;left:0;width:160px;background:#555;overflow:auto;}
-section.page-project section.file .versions-nav .version {display:block;padding:10px;}
-section.page-project section.file .versions-nav .version.active {background:#666;}
-section.page-project section.file .code {position:absolute;top:30px;right:0;bottom:0;left:160px;overflow:auto;background:#282a36;}
-section.page-project section.file .code pre {position:relative;overflow:hidden;}
-section.page-project section.file .code pre code {line-height:20px;font-family:monospace;}
-section.page-project section.file .code pre code.lines {position:absolute;top:0;left:0;width:38px;padding:0.5em;opacity:0.2;}
-section.page-project section.file .code pre code.hljs {margin-left:38px;}
-section.page-project section.file .code pre code.differences {position:absolute;top:0;left:38px;padding:0.5em;pointer-events:none;}
-section.page-project section.file .code pre code.differences.inactive {display:none;}
-section.page-project section.file .code pre code.differences .value {visibility:hidden;}
-section.page-project section.file .code pre code.differences span.removed {display:none;border:1px solid red;}
-section.page-project section.file .code pre code.differences span.removed .value {display:none;}
-section.page-project section.file .code pre code.differences span.added {border:1px solid #b0ea23;background:rgba(176, 234, 35, 0.1);}
-
-.hljs-line-numbers {text-align:right;border-right:1px solid #ccc;color:#999;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
-
-/**
- * Files tree nav
- */
-nav.files-tree-nav {position:absolute;top:0;left:0;width:100%;}
-nav.files-tree-nav li {line-height:24px;cursor:pointer;}
-nav.files-tree-nav li > span {display:block;color:#ccc;}
-nav.files-tree-nav li.active {background:rgba(255,255,255,0.1);}
-
-nav.files-tree-nav li > span {padding-left:16px;}
-nav.files-tree-nav li li > span {padding-left:32px;}
-nav.files-tree-nav li li li > span {padding-left:48px;}
-nav.files-tree-nav li li li li > span {padding-left:64px;}
-nav.files-tree-nav li li li li li > span {padding-left:80px;}
-nav.files-tree-nav li li li li li li > span {padding-left:86px;}
-
-nav.files-tree-nav .name {position:relative;display:inline-block;padding-left:20px;}
-
-nav.files-tree-nav i               {position:absolute;top:25%;left:0;display:block;width:12px;height:50%;background:center center no-repeat;}
-nav.files-tree-nav i.folder        {background-image:url(../svg/folder.svg);}
-nav.files-tree-nav i.folder-active {background-image:url(../svg/folder-active.svg);}
-nav.files-tree-nav i.js            {background-image:url(../svg/js.svg);}
-nav.files-tree-nav i.html          {background-image:url(../svg/html.svg);}
-nav.files-tree-nav i.sass          {background-image:url(../svg/sass.svg);}
-nav.files-tree-nav i.less          {background-image:url(../svg/less.svg);}
-nav.files-tree-nav i.css           {background-image:url(../svg/css.svg);}
-nav.files-tree-nav i.php           {background-image:url(../svg/php.svg);}
-nav.files-tree-nav i.json          {background-image:url(../svg/json.svg);}
-nav.files-tree-nav i.jade          {background-image:url(../svg/jade.svg);}
-nav.files-tree-nav i.md            {background-image:url(../svg/md.svg);}
-nav.files-tree-nav i.sql           {background-image:url(../svg/sql.svg);}
-nav.files-tree-nav i.apache        {background-image:url(../svg/apache.svg);}
-nav.files-tree-nav i.yml           {background-image:url(../svg/yml.svg);}
-nav.files-tree-nav i.svg           {background-image:url(../svg/svg.svg);}
-nav.files-tree-nav i.font          {background-image:url(../svg/font.svg);}
-nav.files-tree-nav i.image         {background-image:url(../svg/image.svg);}
-nav.files-tree-nav i.video         {background-image:url(../svg/video.svg);}
-nav.files-tree-nav i.audio         {background-image:url(../svg/audio.svg);}
-nav.files-tree-nav i.zip           {background-image:url(../svg/zip.svg);}
-nav.files-tree-nav i.txt           {background-image:url(../svg/txt.svg);}
-nav.files-tree-nav i.coffee        {background-image:url(../svg/coffee.svg);}
-nav.files-tree-nav i.git           {background-image:url(../svg/git.svg);}
-nav.files-tree-nav i.xml           {background-image:url(../svg/xml.svg);}
-nav.files-tree-nav i.twig          {background-image:url(../svg/twig.svg);}
-nav.files-tree-nav i.c             {background-image:url(../svg/c.svg);}
-nav.files-tree-nav i.random        {background-image:url(../svg/random.svg);}