From cee7bdc70c08d7038432161a0bf72c5c913681e6 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann
Date: Mon, 8 Jun 2015 21:22:09 +0200
Subject: [PATCH] switch all the icons
---
_src/_assets/styl/buttons.styl | 12 ++++---
_src/_assets/styl/content-link.styl | 4 ++-
_src/_assets/styl/content.styl | 6 ----
_src/_assets/styl/footer.styl | 32 ++++++++---------
_src/_assets/styl/icons.styl | 11 +++---
_src/_assets/styl/navigation.styl | 56 ++++++-----------------------
_src/_includes/articles.html | 38 ++++++++++++++++----
_src/_includes/comments.html | 11 ++++--
_src/_includes/footer.html | 34 ++++++++++++++----
_src/_includes/header.html | 26 +++++++++-----
_src/_includes/paginator.html | 11 ++++--
_src/_layouts/archive.html | 2 +-
_src/_layouts/link.html | 13 +++++--
gulpfile.js | 34 +++++-------------
14 files changed, 158 insertions(+), 132 deletions(-)
diff --git a/_src/_assets/styl/buttons.styl b/_src/_assets/styl/buttons.styl
index 26f1b9bd..6180a821 100644
--- a/_src/_assets/styl/buttons.styl
+++ b/_src/_assets/styl/buttons.styl
@@ -105,9 +105,11 @@ button
text-transform: uppercase
// icon
- i:before
+ .icon
top: .15em
position: relative
+ width: 18px
+ height: 18px
.btn-block
display: block
@@ -146,12 +148,12 @@ button
box-shadow: inset 0 3px 5px rgba(0,0,0, .1)
// icon
- &:before
- font-size: 15px
+ .icon
+ width: 15px
+ height: 15px
margin-right: 2px
margin-left: 0
- top: 1px
- color: #0089cb
+ fill: #0089cb
// Close button
diff --git a/_src/_assets/styl/content-link.styl b/_src/_assets/styl/content-link.styl
index f9442656..0314c5b7 100644
--- a/_src/_assets/styl/content-link.styl
+++ b/_src/_assets/styl/content-link.styl
@@ -16,4 +16,6 @@
max-width: 50%
.permalink-link
- @extend .alignright
\ No newline at end of file
+ @extend .alignright
+ .icon
+ fill: $link-color
diff --git a/_src/_assets/styl/content.styl b/_src/_assets/styl/content.styl
index 2f1d1861..a91e0b62 100644
--- a/_src/_assets/styl/content.styl
+++ b/_src/_assets/styl/content.styl
@@ -14,12 +14,6 @@
margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2)
- // icons
- &:before
- font-size: 32px
- color: rgba($text-color-dimmed, .7)
- margin-right: .5em
-
@media $breakpoint2
margin-left: -108%
diff --git a/_src/_assets/styl/footer.styl b/_src/_assets/styl/footer.styl
index b17e2d21..721cf3ec 100644
--- a/_src/_assets/styl/footer.styl
+++ b/_src/_assets/styl/footer.styl
@@ -31,10 +31,11 @@
margin-bottom: 0
font-size: $font-size-mini
- .icon:before
- font-size: inherit
+ .icon
+ width: 15px
+ height: 15px
margin-right: .2em
- line-height: inherit
+ margin-bottom: -2px
// Subscribe component
.subscribe
@@ -57,22 +58,21 @@
&:last-child
margin-right: 0
- &:before
- // Icon resets for color animations
+ .icon
transition: color .3s ease-in-out
- color: inherit
- margin: 0 !important
+ display: block
+ margin: 0 auto
+
+ .rss:hover .icon
+ fill: #e15a00
+ .twitter:hover .icon
+ fill: #019ad2
+ .google:hover .icon
+ fill: #c63b1e
+ .facebook:hover .icon
+ fill: #3b5998
.subscribe-title
@extend .h5
color: $text-color-dimmed
margin-bottom: ($line-height-computed/2)
-
-.footer:hover .subscribe .rss:before
- color: #e15a00
-.footer:hover .subscribe .twitter:before
- color: #019ad2
-.footer:hover .subscribe .google:before
- color: #c63b1e
-.footer:hover .subscribe .facebook:before
- color: #3b5998
\ No newline at end of file
diff --git a/_src/_assets/styl/icons.styl b/_src/_assets/styl/icons.styl
index 3e8a93e9..685013ab 100644
--- a/_src/_assets/styl/icons.styl
+++ b/_src/_assets/styl/icons.styl
@@ -6,18 +6,17 @@
svg
&.icon
- height: 24px
- width: 24px
+ height: 20px
+ width: 20px
display: inline-block
- fill: currentColor
+ fill: $text-color-light
vertical-align: baseline
+ transition: all .2s ease-in-out
.btn &
height: 18px
width: 18px
- margin: 4px -4px 0 4px
- filter: drop-shadow( 0 1px #eee )
- float: right
+ margin: 4px 4px -3px 4px
// Fix jQuery bug: http://bugs.jquery.com/ticket/11352
use
diff --git a/_src/_assets/styl/navigation.styl b/_src/_assets/styl/navigation.styl
index e531db0d..a88565e7 100644
--- a/_src/_assets/styl/navigation.styl
+++ b/_src/_assets/styl/navigation.styl
@@ -7,7 +7,6 @@
.menu-btn,
.search-btn
@extend .textcenter
- text-shadow: 0 1px 0 rgba(#fff, .5)
line-height: 1em
vertical-align: middle
display: inline-block
@@ -19,13 +18,17 @@
&:focus
outline: 0
- &:hover:before
- color: $link-color
+ .icon
+ &:hover,
+ &:focus
+ fill: $link-color
- &:active:before
- transition: none
- color: #fff
+ &:active
+ fill: #fff
+ &.icon-entypo-menu
+ width: 24px
+ height: 24px
// Main Navigation
/////////////////////////////////////
@@ -60,22 +63,10 @@
@media $breakpoint2
width: 33.3%
- // the icons
- &:before
- @extend .textcenter, .transition
- display: block
- margin-bottom: 5px
- width: 100%
- font-size: 32px
- height: 32px
- color: rgba($text-color-dimmed, .7)
-
&:hover,
- &:hover:before
+ &:focus
color: $link-color
border-bottom-color: $link-color
-
- &:hover
background: rgba(255,255,255,.5)
&:active
@@ -83,10 +74,6 @@
top: 0
color: #fff
- &:active:before
- color: #fff
- transition: none
-
// Paginator
/////////////////////////////////////
@@ -95,7 +82,7 @@
@extend .clearfix
.icon
- vertical-align: middle
+ margin-bottom: -3px
.paginator-next
@extend .alignright
@@ -112,24 +99,3 @@
@extend .h3, .heading-band
color: $brand-grey-light
margin-bottom: 0
-
-
-// Infinite Loader
-/////////////////////////////////////
-
-.infiniteLoader
- .next
- width: 100%
- float: none
- margin-left: 0
-
- a
- @extend .btn, .btn-block, .aligncenter
- color: $link-color
- padding-top: ($line-height-computed/1.5)
- padding-bottom: ($line-height-computed/1.5)
-
- .previous,
- .pagenumber,
- i
- @extend .hide
diff --git a/_src/_includes/articles.html b/_src/_includes/articles.html
index db8618f1..9f7772f7 100644
--- a/_src/_includes/articles.html
+++ b/_src/_includes/articles.html
@@ -5,7 +5,10 @@
@@ -14,8 +17,16 @@
{{ post.content | markdownify }}
- Go to source
- ∞
+ Go to source
+
+
+
+
+
@@ -64,12 +75,22 @@
@@ -36,7 +40,10 @@
{% else %}
href="/page/{{ paginator.next_page }}/"
{% endif %}
- rel="next">Next
+ rel="next">Next
+
{% endif %}
diff --git a/_src/_layouts/archive.html b/_src/_layouts/archive.html
index 3739a183..d792ae68 100644
--- a/_src/_layouts/archive.html
+++ b/_src/_layouts/archive.html
@@ -5,7 +5,7 @@ layout: base
{% if page.type == 'category' %}
- {{ page.title }}
+ {{ page.title }}
{% else %}
{{ page.type }} archive for {{ page.title }}
{% endif %}
diff --git a/_src/_layouts/link.html b/_src/_layouts/link.html
index b6a73816..2cc36d30 100644
--- a/_src/_layouts/link.html
+++ b/_src/_layouts/link.html
@@ -8,7 +8,10 @@ layout: base
\ No newline at end of file
+
diff --git a/gulpfile.js b/gulpfile.js
index 979880b8..1e97e888 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -40,7 +40,7 @@ var icons = {
dist: dist + '/assets/img/',
prefix: 'entypo-',
icons: [
- 'twitter', 'facebook', 'google+', 'magnifying-glass', 'menu', 'rss', 'user', 'leaf', 'link', 'image', 'camera', 'arrow-with-circle-down', 'forward.svg', 'heart', 'info', 'github', 'star', 'tools', 'chevron-right', 'chevron-left', 'gift'
+ 'twitter', 'facebook', 'google+', 'magnifying-glass', 'menu', 'rss', 'link', 'arrow-with-circle-down', 'forward', 'heart', 'info-with-circle', 'infinity', 'github', 'star', 'chevron-right', 'chevron-left'
]
}
}
@@ -51,8 +51,7 @@ spriteConfig = {
mode: {
symbol: {
dest: './',
- sprite: 'sprite.svg',
- inline: true
+ sprite: 'sprite.svg'
}
}
}
@@ -198,9 +197,7 @@ gulp.task('js', ['js-libraries', 'js-project']);
//
// Icons
//
-gulp.task('icons', ['icons-entypo']);
-
-gulp.task('icons-entypo', function() {
+gulp.task('icons', function() {
var iconset = icons.entypo
// Iterate through the icon set array
@@ -209,9 +206,7 @@ gulp.task('icons-entypo', function() {
});
return gulp.src(iconset.icons)
- .pipe($.rename({
- prefix: iconset.prefix
- }))
+ .pipe($.rename({ prefix: iconset.prefix }))
.pipe(gulp.dest(iconset.dist))
.pipe($.filter('**/*.svg'))
.pipe($.svgSprite(spriteConfig))
@@ -235,7 +230,6 @@ gulp.task('svg-fallbacks', function() {
gulp.task('images', function() {
return gulp.src([src + '/_assets/img/**/*', '!' + src + '/_assets/img/entypo/**/*'])
.pipe(gulp.dest(dist + '/assets/img/'))
- .pipe($.connect.reload());
});
@@ -245,7 +239,6 @@ gulp.task('images', function() {
gulp.task('fonts', function() {
return gulp.src(src + '/_assets/fonts/**/*')
.pipe(gulp.dest(dist + '/assets/fonts/'))
- .pipe($.connect.reload());
});
@@ -255,7 +248,6 @@ gulp.task('fonts', function() {
gulp.task('media', function() {
return gulp.src(src + '/_media/**/*')
.pipe(gulp.dest(dist + '/media/'))
- .pipe($.connect.reload());
});
@@ -272,9 +264,7 @@ gulp.task('imagemin', function() {
progressive: true, // jpg
interlaced: true, // gif
multipass: true, // svg
- svgoPlugins: [{
- removeViewBox: false
- }]
+ svgoPlugins: [{ removeViewBox: false }]
})))
.pipe(gulp.dest(dist));
});
@@ -302,9 +292,7 @@ gulp.task('revision-replace', function() {
var manifest = gulp.src(dist + '/assets/rev-manifest.json');
return gulp.src(dist + '/**/*.{html,xml,txt,json,css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
- .pipe($.revReplace({
- manifest: manifest
- }))
+ .pipe($.revReplace({ manifest: manifest }))
.pipe(gulp.dest(dist));
});
@@ -313,9 +301,7 @@ gulp.task('revision-replace', function() {
// CDN url injection
//
gulp.task('cdn', function() {
- return gulp.src([dist + '/**/*.html', dist + '/assets/css/*.css'], {
- base: dist
- })
+ return gulp.src([dist + '/**/*.html', dist + '/assets/css/*.css'], { base: dist })
.pipe($.replace('/assets/css/', cdn + '/assets/css/'))
.pipe($.replace('/assets/js/', cdn + '/assets/js/'))
.pipe($.replace('/assets/img/', cdn + '/assets/img/'))
@@ -353,13 +339,11 @@ gulp.task('watch', function() {
// Task sequences
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-// All assets tasks
-gulp.task('assets', ['css', 'js', 'icons', 'images', 'fonts', 'media']);
-
gulp.task('jekyll-build', function(cb) {
runSequence(
'jekyll',
- 'assets',
+ ['css', 'js', 'images', 'fonts', 'media'],
+ 'icons',
cb
);
});