From bb1a985736dc1ba464a732bdfd3d52f1b5ccf79c Mon Sep 17 00:00:00 2001 From: azadorozhniy Date: Sun, 16 Nov 2014 22:32:52 +0100 Subject: [PATCH 01/10] Init change --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 37dbd54..17b2cdc 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ Run the following command in Terminal to install Gulp for LESS preprocessing. npm install ``` + ### 2) Run Gulp Run gulp to make sure all CSS and JavaScript files are the latest versions. From e5f29ef457fe0bbbc0de46544197b270c42cc511 Mon Sep 17 00:00:00 2001 From: azadorozhniy Date: Sun, 16 Nov 2014 22:46:39 +0100 Subject: [PATCH 02/10] - Removed link to external elements - Removed ugly padding --- assets/less/elements.less | 321 ++++++++++++++++++++++++++++++++++++++ assets/less/expanse.less | 2 +- 2 files changed, 322 insertions(+), 1 deletion(-) create mode 100644 assets/less/elements.less diff --git a/assets/less/elements.less b/assets/less/elements.less new file mode 100644 index 0000000..f53fd61 --- /dev/null +++ b/assets/less/elements.less @@ -0,0 +1,321 @@ +/*--------------------------------------------------- + LESS Elements 0.9.1 + --------------------------------------------------- + A set of useful LESS mixins + More info at: http://lesselements.com + MODIFIED BY: Brandon Brown + ---------------------------------------------------*/ + +.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { + background: @color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, @start), + color-stop(1, @stop)); + background: -ms-linear-gradient(bottom, + @start, + @stop); + background: -moz-linear-gradient(center bottom, + @start 0%, + @stop 100%); + background: -o-linear-gradient(@stop, + @start); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); +} + +.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) { + background: @color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, rgb(@start,@start,@start)), + color-stop(1, rgb(@stop,@stop,@stop))); + background: -ms-linear-gradient(bottom, + rgb(@start,@start,@start) 0%, + rgb(@stop,@stop,@stop) 100%); + background: -moz-linear-gradient(center bottom, + rgb(@start,@start,@start) 0%, + rgb(@stop,@stop,@stop) 100%); + background: -o-linear-gradient(rgb(@stop,@stop,@stop), + rgb(@start,@start,@start)); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start))); +} + +.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { + border-top: solid .0625rem @top-color; + border-left: solid .0625rem @left-color; + border-right: solid .0625rem @right-color; + border-bottom: solid .0625rem @bottom-color; +} + +.drop-shadow(@x-axis: 0, @y-axis: .0625rem, @blur: .125rem, @alpha: 0.1) { + -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); + -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); + box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); +} + +.rounded(@radius: .125rem) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + +.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { + -webkit-border-top-right-radius: @topright; + -webkit-border-bottom-right-radius: @bottomright; + -webkit-border-bottom-left-radius: @bottomleft; + -webkit-border-top-left-radius: @topleft; + -moz-border-radius-topright: @topright; + -moz-border-radius-bottomright: @bottomright; + -moz-border-radius-bottomleft: @bottomleft; + -moz-border-radius-topleft: @topleft; + border-top-right-radius: @topright; + border-bottom-right-radius: @bottomright; + border-bottom-left-radius: @bottomleft; + border-top-left-radius: @topleft; + .background-clip(padding-box); +} + +.opacity(@opacity: 0.5) { + -moz-opacity: @opacity; + -khtml-opacity: @opacity; + -webkit-opacity: @opacity; + opacity: @opacity; + @opperc: @opacity * 100; + -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; + filter: ~"alpha(opacity=@{opperc})"; +} + +.transition-duration(@duration: 0.2s) { + -moz-transition-duration: @duration; + -webkit-transition-duration: @duration; + -o-transition-duration: @duration; + transition-duration: @duration; +} + +.transform(...) { + -webkit-transform: @arguments; + -moz-transform: @arguments; + -o-transform: @arguments; + -ms-transform: @arguments; + transform: @arguments; +} + +.rotation(@deg:5deg){ + .transform(rotate(@deg)); +} + +.scale(@ratio:1.5){ + .transform(scale(@ratio)); +} + +.transition(@args) { + -webkit-transition: @args; + -moz-transition: @args; + -o-transition: @args; + transition: @args; +} + +.inner-shadow(@horizontal:0, @vertical:.0625rem, @blur:.125rem, @alpha: 0.4) { + -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); + -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); + box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); +} + +.box-shadow(@arguments) { + -webkit-box-shadow: @arguments; + -moz-box-shadow: @arguments; + box-shadow: @arguments; +} + +.box-sizing(@sizing: border-box) { + -ms-box-sizing: @sizing; + -moz-box-sizing: @sizing; + -webkit-box-sizing: @sizing; + box-sizing: @sizing; +} + +.user-select(@argument: none) { + -webkit-user-select: @argument; + -moz-user-select: @argument; + -ms-user-select: @argument; + user-select: @argument; +} + +.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: .0625rem) { + -moz-column-width: @colwidth; + -moz-column-count: @colcount; + -moz-column-gap: @colgap; + -moz-column-rule-color: @columnRuleColor; + -moz-column-rule-style: @columnRuleStyle; + -moz-column-rule-width: @columnRuleWidth; + -webkit-column-width: @colwidth; + -webkit-column-count: @colcount; + -webkit-column-gap: @colgap; + -webkit-column-rule-color: @columnRuleColor; + -webkit-column-rule-style: @columnRuleStyle; + -webkit-column-rule-width: @columnRuleWidth; + column-width: @colwidth; + column-count: @colcount; + column-gap: @colgap; + column-rule-color: @columnRuleColor; + column-rule-style: @columnRuleStyle; + column-rule-width: @columnRuleWidth; +} + +.translate(@x:0, @y:0) { + .transform(translate(@x, @y)); +} + +.background-clip(@argument: padding-box) { + -moz-background-clip: @argument; + -webkit-background-clip: @argument; + background-clip: @argument; +} +.clearfix() { + &:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } +} +* html .clearfix { zoom: 1; } /* IE6 */ +*:first-child+html .clearfix { zoom: 1; } /* IE7 */ + +.background-size(@size) { + -webkit-background-size: @size; + -moz-background-size: @size; + -o-background-size: @size; + background-size: @size; +} +.animation(@name, @length, @count, @easing) { + -webkit-animation: @name @length @count @easing; + -moz-animation: @name @length @count @easing; + -o-animation: @name @length @count @easing; + animation: @name @length @count @easing; +} + +/* used for styling post content in themes */ +.content(@padding) { + @pad: @padding/4; + display: block; + + ul, + ol, + li, + blockquote, + p, + div, + b, + i { + text-align: left; + + strong { + font-weight: bold; + } + } + + b { + font-weight: bold; + } + + p, + div { + margin: 0; + + &.gist { + padding: 0; + margin: 0; + + .gist-file, + .gist-data, + .gist-syntax, + .file-data, + .line { + padding: 0; + margin: 0; + } + } + } + + table { + margin: 0; + padding: 0; + } + + blockquote { + padding: @pad (@pad*2); + margin: @pad 0; + border-left: 5px solid #e5e5e5; + } + + ul { + padding: @pad 0 (@pad*1.5); + margin-left: 50px; + + li { + padding: 0; + margin: 0; + list-style-type: square; + } + } + + ol { + padding: @pad 0 (@pad*1.5); + margin-left: 30px; + + li { + padding: 0; + margin: 0; + list-style-type: decimal; + } + } + + h1 { + padding-bottom: (@pad*2); + } + + h2, h3 { + padding-top: @pad*2; + } + + img { + max-width: 100%; + } + + .mejs-container { + margin-top: @pad; + } + + .post-pdf { + position: relative; + .pdf-fullscreen { + position: absolute; + bottom: 30px; + left: 30px; + color: #000; + font-size: 12px; + padding: 10px; + background-color: #1abc9c; + border-radius: 7px; + .opacity(0.3); + .transition(all 0.1s ease-in); + -webkit-appearance: none; + cursor: pointer; + border: 0; + &:hover { + color: #fff; + .opacity(1); + } + } + object { + display: block; + min-height: 400px + } + } + +} diff --git a/assets/less/expanse.less b/assets/less/expanse.less index 2d69bb5..6bdca70 100644 --- a/assets/less/expanse.less +++ b/assets/less/expanse.less @@ -1,4 +1,4 @@ -@import url(http://postach.io/static/themes/_assets/less/elements.less); +@import "elements"; @black: #636363; @white: #ffffff; From b01938819a38388b356314f77bdcdedc8b182387 Mon Sep 17 00:00:00 2001 From: azadorozhniy Date: Sun, 16 Nov 2014 23:11:30 +0100 Subject: [PATCH 03/10] - Added watch task and slightly refactored gulpfile --- assets/css/style.css | 2 -- gulpfile.js | 44 +++++++++++++++++++++++++------------------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 06b78b5..fd45a43 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -721,7 +721,6 @@ a.btn.btn-mini:hover { } .post-content p, .post-content div { - padding: 12.5px 0; margin: 0; } .post-content p.gist, @@ -970,7 +969,6 @@ div.posts div.item .post-content b { } div.posts div.item .post-content p, div.posts div.item .post-content div { - padding: 12.5px 0; margin: 0; } div.posts div.item .post-content p.gist, diff --git a/gulpfile.js b/gulpfile.js index a1afa48..b0132d6 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,23 +4,29 @@ var gulp = require('gulp'), uglify = require('gulp-uglify'), less = require('gulp-less'), path = require('path'); - -// run -gulp.task('default', function() { - - // easier to read variable - var themeName = 'expanse'; - - // less - gulp.src('./assets/less/' + themeName + '.less') - .pipe(less({ paths: [path.join(__dirname, 'less', 'includes')]})) - .pipe(rename('style.css')) - .pipe(gulp.dest('./assets/css/')); - // uglify - gulp.src('./assets/js/' + themeName + '.js') - .pipe(uglify()) - .pipe(rename(themeName + '.min.js')) - .pipe(gulp.dest('./assets/js/')); - -}); \ No newline at end of file +var themeName = 'expanse'; + +gulp.task('less', function(){ + // less + gulp.src('./assets/less/' + themeName + '.less') + .pipe(less({ paths: [path.join(__dirname, 'less', 'includes')]})) + .pipe(rename('style.css')) + .pipe(gulp.dest('./assets/css/')); +}); + +gulp.task('watch', function () { + gulp.watch('./assets/less/**/*.less',['less']); + gulp.watch('./assets/js//**/*.js',['build']); +}); + +gulp.task('minify',function(){ + // uglify + gulp.src('./assets/js/' + themeName + '.js') + .pipe(uglify()) + .pipe(rename(themeName + '.min.js')) + .pipe(gulp.dest('./assets/js/')); +}); + +gulp.task('default',['less','watch']); +gulp.task('build',['less','minify']); \ No newline at end of file From 4b4e34a81fb154934e70c21948314cd56e944d04 Mon Sep 17 00:00:00 2001 From: azadorozhniy Date: Mon, 17 Nov 2014 00:17:10 +0100 Subject: [PATCH 04/10] Shower bio --- theme.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme.html b/theme.html index 45c7278..fc3fa83 100644 --- a/theme.html +++ b/theme.html @@ -64,7 +64,7 @@

{{ site.name }}

{{ site.author }}

-

{{ site.bio|striptags|truncate(280, false, '...') }}

+

{{ site.bio }}