1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-09-24 01:58:50 +02:00

switch all the icons

This commit is contained in:
Matthias Kretschmann 2015-06-08 21:22:09 +02:00
parent 238993f949
commit cee7bdc70c
14 changed files with 158 additions and 132 deletions

View File

@ -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

View File

@ -17,3 +17,5 @@
.permalink-link
@extend .alignright
.icon
fill: $link-color

View File

@ -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%

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -5,7 +5,10 @@
<header>
<h1 class="entry-title">
<a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
{{ post.title | titlecase }} <i class="icon icon-forward"></i>
{{ post.title | titlecase }}
<svg class="icon icon-entypo icon-entypo-forward">
<use xlink:href="/assets/img/sprite.svg#entypo-forward"></use>
</svg>
<span class="linkurl">{{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
</a>
</h1>
@ -14,8 +17,16 @@
<section class="entry-content">
{{ post.content | markdownify }}
<p>
<a class="more-link" href="{{ post.linkurl }}">Go to source <i class="icon icon-forward"></i></a>
<a class="permalink-link" href="{{ post.url }}" rel="tooltip" title="Permalink">&#8734;</a>
<a class="more-link" href="{{ post.linkurl }}">Go to source
<svg class="icon icon-entypo icon-entypo-forward">
<use xlink:href="/assets/img/sprite.svg#entypo-forward"></use>
</svg>
</a>
<a class="permalink-link" href="{{ post.url }}" rel="tooltip" title="Permalink">
<svg class="icon icon-entypo icon-entypo-infinity">
<use xlink:href="/assets/img/sprite.svg#entypo-infinity"></use>
</svg>
</a>
</p>
</section>
</article>
@ -64,12 +75,22 @@
<footer class="goodie-actions">
<p class="info col3">
<a class="btn icon icon-info" href="{{ post.url }}">Release Post</a>
<a class="btn icon icon-info" href="{{ post.url }}">
<svg class="icon icon-entypo icon-entypo-info-with-circle">
<use xlink:href="/assets/img/sprite.svg#entypo-info-with-circle"></use>
</svg>
Release Post
</a>
</p>
{% if post.download %}
<p class="download col3">
<a class="btn icon icon-download" href="/media/{{ post.download }}">Download <span>zip</span></a>
<a class="btn" href="/media/{{ post.download }}">
<svg class="icon icon-entypo icon-entypo-arrow-with-circle-down">
<use xlink:href="/assets/img/sprite.svg#entypo-arrow-with-circle-down"></use>
</svg>
Download <span>zip</span>
</a>
</p>
{% endif %}
@ -77,7 +98,12 @@
{% endif %}
{% unless page.path contains "goodies" %}
<a class="more-link" href="{{ post.url }}">Continue reading <i class="icon icon-arrow-right"></i></a>
<a class="more-link" href="{{ post.url }}">
Continue reading
<svg class="icon icon-entypo icon-entypo-chevron-right">
<use xlink:href="/assets/img/sprite.svg#entypo-chevron-right"></use>
</svg>
</a>
{% endunless %}
</section>

View File

@ -2,6 +2,13 @@
<aside class="comments">
<p>You should tweet this post</p>
<p class="btn-wrap"><a class="btn twitter-share icon icon-twitter" target="_blank" href="https://twitter.com/intent/tweet?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&text={{ page.title | cgi_escape }}&via=kremalicious&related=kremaliciouscom,ezeep">Tweet</a></p>
<p class="btn-wrap">
<a class="btn twitter-share" target="_blank" href="https://twitter.com/intent/tweet?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&text={{ page.title | cgi_escape }}&via=kremalicious&related=kremaliciouscom">
<svg class="icon icon-entypo icon-entypo-twitter">
<use xlink:href="/assets/img/sprite.svg#entypo-twitter"></use>
</svg>
Tweet
</a>
</p>
</aside>

View File

@ -10,10 +10,26 @@
<aside class="subscribe">
<h1 class="subscribe-title">Subscribe</h1>
<p>
<a class="btn rss icon icon-rss" href="http://kremalicious.com/feed"></a>
<a class="btn twitter icon icon-twitter" href="https://twitter.com/kremaliciouscom"></a>
<a class="btn google icon icon-googleplus" href="https://plus.google.com/100015950464424503954" rel="publisher"></a>
<a class="btn facebook icon icon-facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052"></a>
<a class="btn rss" href="http://kremalicious.com/feed">
<svg class="icon icon-entypo icon-entypo-rss">
<use xlink:href="/assets/img/sprite.svg#entypo-rss"></use>
</svg>
</a>
<a class="btn twitter" href="https://twitter.com/kremaliciouscom">
<svg class="icon icon-entypo icon-entypo-twitter">
<use xlink:href="/assets/img/sprite.svg#entypo-twitter"></use>
</svg>
</a>
<a class="btn google" href="https://plus.google.com/100015950464424503954" rel="publisher">
<svg class="icon icon-entypo icon-entypo-google+">
<use xlink:href="/assets/img/sprite.svg#entypo-google+"></use>
</svg>
</a>
<a class="btn facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052">
<svg class="icon icon-entypo icon-entypo-facebook">
<use xlink:href="/assets/img/sprite.svg#entypo-facebook"></use>
</svg>
</a>
</p>
</aside>
</div>
@ -21,11 +37,17 @@
<p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
<p><a class="icon icon-github" href="https://github.com/kremalicious/kremalicious3">View source</a> &brvbar; Hosted by <a href="http://www.mediatemple.net#a_aid=4f37f8fe3e47e" title="Media Temple">(mt)</a></p>
<p>
<a href="https://github.com/kremalicious/kremalicious3">
<svg class="icon icon-entypo icon-entypo-github">
<use xlink:href="/assets/img/sprite.svg#entypo-github"></use>
</svg>
View source
</a> &brvbar; Hosted by <a href="http://www.mediatemple.net#a_aid=4f37f8fe3e47e" title="Media Temple">(mt)</a></p>
<p class="license">
Posts &amp; goodies: <a rel="item-license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA</a> &brvbar;
Photos &amp; images: © Copyright &brvbar;
Photos &amp; images: &copy; Copyright &brvbar;
Code: <a rel="item-license" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>
</p>

View File

@ -9,18 +9,28 @@
</header>
<nav role="navigation" class="nav-main">
<button type="button" class="menu-btn icon icon-list"></button>
<button type="button" class="menu-btn">
<svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
<title id="title">Menu</title>
<use xlink:href="/assets/img/sprite.svg#entypo-menu"></use>
</svg>
</button>
<div class="nav-popover hide">
<a class="nav-link goodies icon icon-gift" href="/goodies/">goodies</a>
<a class="nav-link photos icon icon-pictures" href="/photos/">photos</a>
<a class="nav-link personal icon icon-user" href="/personal/">personal</a>
<a class="nav-link design icon icon-tools" href="/design/">design</a>
<a class="nav-link photography icon icon-camera" href="/photography/">photography</a>
<a class="nav-link goodies" href="/goodies/">goodies</a>
<a class="nav-link photos" href="/photos/">photos</a>
<a class="nav-link personal" href="/personal/">personal</a>
<a class="nav-link design" href="/design/">design</a>
<a class="nav-link photography" href="/photography/">photography</a>
</div>
</nav>
<section class="site-search">
<button type="button" class="search-btn icon icon-search"></button>
<button type="button" class="search-btn">
<svg class="icon icon-entypo icon-entypo-search" role="img" aria-labelledby="title">
<title id="title">Search</title>
<use xlink:href="/assets/img/sprite.svg#entypo-magnifying-glass"></use>
</svg>
</button>
<div class="search-area">
<input type="search" class="form-control input-search search-field" placeholder="Search everything">
<button class="close search-close">&times;</button>

View File

@ -18,7 +18,11 @@
href="/page/{{ paginator.previous_page }}/"
{% endif %}
{% endif %}
rel="prev"><i class="icon icon-arrow-left"></i> Previous
rel="prev">
<svg class="icon icon-entypo icon-entypo-chevron-left">
<use xlink:href="/assets/img/sprite.svg#entypo-chevron-left"></use>
</svg>
Previous
</a>
{% endif %}
</p>
@ -36,7 +40,10 @@
{% else %}
href="/page/{{ paginator.next_page }}/"
{% endif %}
rel="next">Next <i class="icon icon-arrow-right"></i>
rel="next">Next
<svg class="icon icon-entypo icon-entypo-chevron-right">
<use xlink:href="/assets/img/sprite.svg#entypo-chevron-right"></use>
</svg>
</a>
{% endif %}
</p>

View File

@ -5,7 +5,7 @@ layout: base
<section role="main" id="main" class="row">
{% if page.type == 'category' %}
<h1 class="page-title icon icon-{{ page.title }}">{{ page.title }}</h1>
<h1 class="page-title">{{ page.title }}</h1>
{% else %}
<h1 class="page-title">{{ page.type }} archive for {{ page.title }}</h1>
{% endif %}

View File

@ -8,7 +8,10 @@ layout: base
<header>
<h1 class="entry-title">
<a href="{{ page.linkurl }}" title="Go to source: {{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
{{ page.title | titlecase }} <i class="icon icon-forward"></i>
{{ page.title | titlecase }}
<svg class="icon icon-entypo icon-entypo-forward">
<use xlink:href="/assets/img/sprite.svg#entypo-forward"></use>
</svg>
<span class="linkurl">{{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
</a>
</h1>
@ -17,7 +20,11 @@ layout: base
<section class="entry-content">
{{ content }}
<p>
<a class="more-link" href="{{ page.linkurl }}">Go to source <i class="icon icon-forward"></i></a>
<a class="more-link" href="{{ page.linkurl }}">Go to source
<svg class="icon icon-entypo icon-entypo-forward">
<use xlink:href="/assets/img/sprite.svg#entypo-forward"></use>
</svg>
</a>
<a class="permalink-link" href="{{ page.url }}" rel="tooltip" title="Permalink">&#8734;</a>
</p>
</section>

View File

@ -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
);
});