diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7006dca --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.DS_Store +node_modules +.sass-cache \ No newline at end of file diff --git a/assets/css/application.css b/assets/css/application.css new file mode 100644 index 0000000..a8f59f0 --- /dev/null +++ b/assets/css/application.css @@ -0,0 +1,90 @@ +html, body { + overflow: hidden; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + font-size: 0; } + +.bg { + background-image: url("/assets/images/bg.jpg"); + background-size: cover; + background-position: center; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 10; } + +.mask { + background-color: #fff; + opacity: .25; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; } + +.content { + width: 100%; + height: 100%; + position: absolute; + z-index: 1000; } + .content #title { + width: 700px; + height: 100%; + display: block; + margin: 0 auto; + background-image: url("/assets/images/title.svg"); + background-repeat: no-repeat; + background-size: 100% auto; + background-position: center; } + .content .info { + position: absolute; + bottom: 0; + width: 100%; + padding-bottom: 50px; } + .content .info .left { + margin-left: 75px; } + .content .info .left a { + height: 45px; + display: inline-block; + vertical-align: bottom; } + .content .info .left a img { + height: 100%; } + .content .info .right { + font-size: 12px; + text-align: right; + color: white; + float: right; + margin-right: 75px; } + +.slash { + display: inline-block; + vertical-align: bottom; + width: 50px; + height: 50px; + background-image: url("/assets/images/line.svg"); + background-repeat: no-repeat; + background-size: contain; + background-position: center; } + +@media (max-width: 700px) { + .bg { + background-image: url("/assets/images/bg-s.jpg"); } + + .content #title { + width: 100%; } + .content .info { + padding-bottom: 20px; } + .content .info .left, .content .info .right { + display: block; + margin: 0; + text-align: center; + width: 100%; + padding-bottom: 10px; } + + .slash { + display: none; } } diff --git a/assets/css/application.min.css b/assets/css/application.min.css new file mode 100644 index 0000000..1556561 --- /dev/null +++ b/assets/css/application.min.css @@ -0,0 +1 @@ +.bg,.mask{top:0;left:0;position:absolute}.bg,.content,.mask,body,html{width:100%;height:100%}.bg,.content,.content .info,.mask{position:absolute}.content #title,.slash{background-repeat:no-repeat;background-position:center}.bg,.content #title,.slash{background-position:center}body,html{overflow:hidden;margin:0;padding:0;font-size:0}.bg{background-image:url(/assets/images/bg.jpg);background-size:cover;z-index:10}.mask{background-color:#fff;opacity:.25;z-index:100}.content{z-index:1000}.content #title{width:700px;height:100%;display:block;margin:0 auto;background-image:url(/assets/images/title.svg);background-size:100% auto}.content .info .left a,.slash{display:inline-block;vertical-align:bottom}.content .info{bottom:0;width:100%;padding-bottom:50px}.content .info .left{margin-left:75px}.content .info .left a{height:45px}.content .info .left a img{height:100%}.content .info .right{font-size:12px;text-align:right;color:#fff;float:right;margin-right:75px}.slash{width:50px;height:50px;background-image:url(/assets/images/line.svg);background-size:contain}@media (max-width:700px){.bg{background-image:url(/assets/images/bg-s.jpg)}.content #title{width:100%}.content .info{padding-bottom:20px}.content .info .left,.content .info .right{display:block;margin:0;text-align:center;width:100%;padding-bottom:10px}.slash{display:none}} \ No newline at end of file diff --git a/assets/images/bg-s.jpg b/assets/images/bg-s.jpg new file mode 100644 index 0000000..05e16a0 Binary files /dev/null and b/assets/images/bg-s.jpg differ diff --git a/assets/images/bg.jpg b/assets/images/bg.jpg new file mode 100644 index 0000000..0407ce0 Binary files /dev/null and b/assets/images/bg.jpg differ diff --git a/assets/images/line.svg b/assets/images/line.svg new file mode 100644 index 0000000..72ce639 --- /dev/null +++ b/assets/images/line.svg @@ -0,0 +1,12 @@ + + + + Path 101 + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/assets/images/ruby-china-white-outline.png b/assets/images/ruby-china-white-outline.png new file mode 100644 index 0000000..b7a3c43 Binary files /dev/null and b/assets/images/ruby-china-white-outline.png differ diff --git a/assets/images/title.svg b/assets/images/title.svg new file mode 100644 index 0000000..727d0b7 --- /dev/null +++ b/assets/images/title.svg @@ -0,0 +1,15 @@ + + + + Group + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..ff8a9ef --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,104 @@ +var gulp = require('gulp'), + sass = require('gulp-ruby-sass'), + autoprefixer = require('gulp-autoprefixer'), + minifycss = require('gulp-minify-css'), + rename = require('gulp-rename'), + uglify = require('gulp-uglify'), + concat = require('gulp-concat'), + livereload = require('gulp-livereload'), + connect = require('gulp-connect'); + +gulp.task('default', function() { + // 将你的默认的任务代码放在这 + //gulp.run("libs"); + gulp.run("generate"); + gulp.run("watch"); + gulp.run("server"); +}); + +var paths = { + sassSrcPath: ['src/stylesheets/application.scss'], + sassDestPath: ['assets/css/'], + sassImportsPath: ['src/stylesheets/'] +}; + +gulp.task('scss', function() { + gulp.src(paths.sassSrcPath) + //.pipe(autoprefixer({ + // browsers: ['last 5 Chrome versions', 'iOS > 0', 'Android > 0', '> 5%'], + // cascade: true, + // remove:true + // })) + sass(paths.sassSrcPath,{precision: 5, loadPath: [paths.sassImportsPath]} ) + + //.pipe(uncss({html: ['public/*.html']})) + .pipe(gulp.dest('assets/css')) + .pipe(rename({suffix: '.min'})) + .pipe(minifycss()) + .pipe(gulp.dest('assets/css')); +}); + +gulp.task('image', function() { + gulp.src('./src/images/*.*') + //.pipe(imagemin({ + // progressive: true, + // svgoPlugins: [{removeViewBox: false}] + // })) + .pipe(gulp.dest('assets/images')); + gulp.src(['./src/images/*.jpg', './src/images/*.png']) + //.pipe(imagemin({ + // progressive: true, + // svgoPlugins: [{removeViewBox: false}] + // })) + .pipe(gulp.dest('assets/images')); +}); + +gulp.task('js', function() { + gulp.src(['./src/javascripts/*.js','./src/javascripts/**/*.js']) + .pipe(gulp.dest('assets/js')) + .pipe(rename({suffix: '.min'})) + .pipe(uglify()) + .pipe(gulp.dest('assets/js')); +}); + +// Basic Functions Done ================================== + +// Libs Done ============================================ + +// Start a Assets Server ============================ +gulp.task('server', [ 'generate' ], function() { + return connect.server({ + root: [ '.' ], + livereload: true + }); +}); + +// Server Doen ====================================== + +gulp.task('generate', ['image', 'scss', 'js']) + +gulp.task('clean', function(cb) { + del(['assets/css/*.css', 'assets/css/*.map', 'assets/js'], cb) +}); + +gulp.task('reload', ['clean', 'default']) + +gulp.task('watch', function() { + + livereload.listen(); + gulp.watch(['src/**']).on('change', livereload.changed); + + gulp.watch('src/images/*.*', ['image']); + + // Watch .scss files/ + gulp.watch('src/stylesheets/**/*.css', ['css']); + gulp.watch('src/stylesheets/*.css', ['css']); + gulp.watch('src/stylesheets/**/*.scss', ['scss']); + gulp.watch('src/stylesheets/*.scss', ['scss']); + + + // Watch .js files + gulp.watch('src/javascripts/*.js', ['js']); + gulp.watch('src/javascripts/**/*.js', ['js']); + +}); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4e39249 --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + RubyConf. China 2016 + + + + +
+
+
+
+
+
+
+ + + +
+
Copyright 2016, RubyChina.
+
+
+ + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..2cf23e5 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "ruby-conf-china", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Cassius Chen", + "license": "MIT", + "devDependencies": { + "gulp": "^3.9.1", + "gulp-autoprefixer": "^3.1.0", + "gulp-concat": "^2.6.0", + "gulp-connect": "^4.0.0", + "gulp-livereload": "^3.8.1", + "gulp-minify-css": "^1.2.4", + "gulp-rename": "^1.2.2", + "gulp-ruby-sass": "^2.0.6", + "gulp-uglify": "^1.5.3" + } +} diff --git a/src/images/bg-s.jpg b/src/images/bg-s.jpg new file mode 100644 index 0000000..05e16a0 Binary files /dev/null and b/src/images/bg-s.jpg differ diff --git a/src/images/bg.jpg b/src/images/bg.jpg new file mode 100644 index 0000000..0407ce0 Binary files /dev/null and b/src/images/bg.jpg differ diff --git a/src/images/line.svg b/src/images/line.svg new file mode 100644 index 0000000..72ce639 --- /dev/null +++ b/src/images/line.svg @@ -0,0 +1,12 @@ + + + + Path 101 + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/images/ruby-china-white-outline.png b/src/images/ruby-china-white-outline.png new file mode 100644 index 0000000..b7a3c43 Binary files /dev/null and b/src/images/ruby-china-white-outline.png differ diff --git a/src/images/title.svg b/src/images/title.svg new file mode 100644 index 0000000..727d0b7 --- /dev/null +++ b/src/images/title.svg @@ -0,0 +1,15 @@ + + + + Group + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/src/stylesheets/application.scss b/src/stylesheets/application.scss new file mode 100644 index 0000000..884d705 --- /dev/null +++ b/src/stylesheets/application.scss @@ -0,0 +1,112 @@ +html, body { + overflow: hidden; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + font-size: 0; +} + +.bg { + background-image: url('/assets/images/bg.jpg'); + background-size: cover; + background-position: center; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 10; +} + +.mask { + background-color: #fff; + opacity: .25; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; +} + +.content { + width: 100%; + height: 100%; + position: absolute; + z-index: 1000; + + #title { + width: 700px; + height: 100%; + display: block; + margin: 0 auto; + background-image: url('/assets/images/title.svg'); + background-repeat: no-repeat; + background-size: 100% auto; + background-position: center; + } + + .info { + position: absolute; + bottom: 0; + width: 100%; + padding-bottom: 50px; + .left { + margin-left: 75px; + a { + height: 45px; + display: inline-block; + vertical-align: bottom; + img { + height: 100%; + } + } + } + .right { + font-size: 12px; + text-align: right; + color: white; + float: right; + margin-right: 75px; + } + } +} + +.slash { + display: inline-block; + vertical-align: bottom; + width: 50px; + height: 50px; + background-image: url('/assets/images/line.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: center; +} + +@media (max-width: 700px) { + .bg { + background-image: url('/assets/images/bg-s.jpg'); + } + + .content { + #title { + width: 100%; + } + + .info { + padding-bottom: 20px; + .left, .right { + display: block; + margin: 0; + text-align: center; + width: 100%; + padding-bottom: 10px; + } + } + } + + .slash { + display: none; + } +} \ No newline at end of file