1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-13 16:45:14 +01:00

gravatar and footer refinements, closes #9

This commit is contained in:
Matthias Kretschmann 2013-12-07 17:52:43 +01:00
parent d46f6292a0
commit 199caa0b1a
9 changed files with 85 additions and 31 deletions

View File

@ -14,6 +14,7 @@ name: kremalicious
description: 'Blog of designer & developer Matthias Kretschmann'
url: http://kremalicious.com
author: Matthias Kretschmann
email: m@kretschmann.io
# Urls

View File

@ -1,5 +1,7 @@
<footer class="entry-meta">
<p class="byline author vcard source-org"><span class="by">by</span> <a class="fn" rel="author" href="/about/">{{ page.author }}</a></p>
<p class="byline author vcard source-org">
<span class="by">by</span> <a class="fn" rel="author" href="/about/">{{ page.author }}</a>
</p>
<time class="pubdate" datetime="{{ page.date | date_to_xmlschema }}" pubdate{% if updated %} data-updated="true"{% endif %}>{{ page.date | timeago }}</time>

View File

@ -1,15 +1,16 @@
<footer role="contentinfo" class="footer container">
<div class="row">
<img class="gravatar photo" src="{{ site.email | to_secure_gravatar }}?s=160" />
<p class="footer-description">Blog of designer &amp; developer <a href="http://matthiaskretschmann.com">Matthias Kretschmann</a></p>
<aside class="subscribe">
<h1 class="subscribe-title">Subscribe</h1>
<p>
<a class="btn rss" href="http://kremalicious.com/feed"><i class="icon-rss"></i> <span>RSS</span></a>
<a class="btn twitter" href="https://twitter.com/kremaliciouscom"><i class="icon-twitter"></i> <span>Twitter</span></a>
<a class="btn google" href="https://plus.google.com/100015950464424503954" rel="publisher"><i class="icon-googleplus"></i> <span>Google+</span></a>
<a class="btn facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052"><i class="icon-facebook"></i> <span>Facebook</span></a>
<a class="btn rss icon-rss" href="http://kremalicious.com/feed"></a>
<a class="btn twitter icon-twitter" href="https://twitter.com/kremaliciouscom"></a>
<a class="btn google icon-googleplus" href="https://plus.google.com/100015950464424503954" rel="publisher"></a>
<a class="btn facebook icon-facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052"></a>
</p>
</aside>
</div>

View File

@ -10,7 +10,7 @@
<nav role="navigation" class="nav-main">
<a class="menu-btn icon-list" href="#"></a>
<div class="nav-popover">
<div class="nav-popover hide">
<a class="nav-link goodies icon-gift" href="/goodies/">goodies</a>
<a class="nav-link photos icon-pictures" href="/photos/">photos</a>
<a class="nav-link personal icon-user" href="/personal/">personal</a>

25
_src/_plugins/gravatar.rb Normal file
View File

@ -0,0 +1,25 @@
#
# https://github.com/ldesgrange/jekyll-gravatar-filter
#
require 'digest/md5'
module Jekyll
module GravatarFilter
def to_gravatar(input)
"http://www.gravatar.com/avatar/#{hash(input)}"
end
def to_secure_gravatar(input)
"https://secure.gravatar.com/avatar/#{hash(input)}"
end
private :hash
def hash(email)
email_address = email ? email.downcase.strip : ''
Digest::MD5.hexdigest(email_address)
end
end
end
Liquid::Template.register_filter(Jekyll::GravatarFilter)

View File

@ -95,9 +95,16 @@ var siteNavigation = {
// toggle menu
$('body').toggleClass('menu-open');
if ( $('body').hasClass('menu-open') ) {
$thepop.removeClass('hide');
} else {
$thepop.addClass('hide');
}
// bind the hide controls
$(document).bind('click.hidethepop', function() {
$('body').removeClass('menu-open');
$thepop.toggleClass('hide');
// unbind the hide controls
$(document).unbind('click.hidethepop');
});

View File

@ -200,6 +200,13 @@ time {
margin-top: @line-height-computed;
}
.gravatar {
width: 80px;
height: 80px;
.border-radius(80px);
border: 2px solid #fff;
}
//
// Related posts

View File

@ -38,6 +38,7 @@
.nav-popover {
padding: @line-height-computed*1.5 0;
width: 100%;
background: @body-bg;
.clearfix;
.nav-link {

View File

@ -116,8 +116,13 @@ a.close,
border-top: 1px solid rgba(255,255,255,.7);
box-shadow: inset 0 1px 4px fade(@brand-dark, 20%);
.gravatar {
margin-bottom: @line-height-computed/2;
}
.footer-description {
.h5;
a { display: block; }
}
&,
@ -143,45 +148,50 @@ a.close,
p {
margin: 0;
.clearfix;
.btn {
margin-bottom: 0;
padding: .3em 1em;
&:first-child {
margin-left:0
}
&:last-child {
margin-right: 0;
}
span {
.visuallyhidden;
}
}
text-align: center;
}
i {
display: block;
.btn {
width: 48px;
height: 40px;
line-height: 34px;
padding: 0;
margin: 0;
display: inline-block;
color: @text-color-light;
&:before {
text-align: center;
&:first-child { margin-left: 0 }
&:last-child { margin-right: 0 }
&:before {
// Icon resets for color animations
.transition(color .3s ease-in-out);
color: inherit;
margin-right: 0;
}
margin: 0 !important;
}
}
}
.footer:hover .subscribe .rss i:before {
.subscribe-title {
.h5;
color: @text-color-dimmed;
margin-bottom: @line-height-computed/2;
}
.footer:hover .subscribe .rss:before {
color: #e15a00;
}
.footer:hover .subscribe .twitter i:before {
.footer:hover .subscribe .twitter:before {
color: #019ad2;
}
.footer:hover .subscribe .google i:before {
.footer:hover .subscribe .google:before {
color: #c63b1e;
}
.footer:hover .subscribe .facebook i:before {
.footer:hover .subscribe .facebook:before {
color: #3b5998;
}
@ -213,7 +223,7 @@ a.close,
.menu-open & {
margin-top: 300px;
}
margin-bottom: 380px;
margin-bottom: 580px;
border-top: 1px solid rgba(255,255,255,.7);
border-bottom: 1px solid rgba(255,255,255,.7);
@ -233,7 +243,7 @@ a.close,
.footer {
z-index: 0;
height: 380px;
height: 580px;
bottom: 0;
box-shadow: none;