Added use of gravatar for the profile image, added about profile section

This commit is contained in:
Benjamin Sproule 2015-07-18 16:59:13 +01:00
parent 395087e0b7
commit e5deb0624c
3 changed files with 88 additions and 61 deletions

View File

@ -1,34 +1,37 @@
<header id="header">
<div id="header-main" class="header-inner">
<div class="outer">
<a href="<%- url_for() %>" id="logo"><i class="logo"></i><span class="site-title"><%= config.title %></span></a>
<nav id="main-nav">
<% for (var i in theme.menu){ %>
<a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
<% } %>
</nav>
<% if(theme.profile) { %>
<nav id="sub-nav">
<div class="profile" id="profile-nav">
<a id="profile-anchor" href="javascript:;"><img class="avatar" src="<%- url_for(config.avatar) %>"><i class="fa fa-caret-down"></i></a>
<div id="header-main" class="header-inner">
<div class="outer">
<a href="<%- url_for() %>" id="logo"><!--<i class="logo"></i>--><span
class="site-title"><%= config.title %></span></a>
<nav id="main-nav">
<% for (var i in theme.menu){ %>
<a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
<% } %>
</nav>
<% if(theme.profile) { %>
<nav id="sub-nav">
<div class="profile" id="profile-nav">
<a id="profile-anchor" href="javascript:;"><img class="avatar" src="<%- gravatar(theme.email) %>"><i
class="fa fa-caret-down"></i></a>
</div>
</nav>
<% } %>
<div id="search-form-wrap">
<%- search_form({button: ' '}) %>
</div>
</div>
</nav>
<% } %>
<div id="search-form-wrap">
<%- search_form({button: ' '}) %>
</div>
</div>
</div>
<div id="main-nav-mobile" class="header-sub header-inner">
<table class="menu outer">
<tr>
<% for (var i in theme.menu){ %>
<td><a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a></td>
<% } %>
<td>
<%- search_form() %>
</td>
</tr>
</table>
</div>
<div id="main-nav-mobile" class="header-sub header-inner">
<table class="menu outer">
<tr>
<% for (var i in theme.menu){ %>
<td><a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a></td>
<% } %>
<td>
<%- search_form() %>
</td>
</tr>
</table>
</div>
</header>

View File

@ -1,32 +1,42 @@
<aside id="profile">
<div class="inner profile-inner">
<div class="base-info profile-block">
<img id="avatar" src="<%- url_for(config.avatar) %>">
<h2 id="name"><%= config.author %></h2>
<h3 id="title"><%= config.author_title %></h3>
<span id="location"><i class="fa fa-map-marker"></i><%= config.location %></span>
<a id="follow" href="<%= config.follow %>"><%=__('profile.follow')%></a>
</div>
<div class="article-info profile-block">
<div class="article-info-block">
<%= site.posts.length %>
<span><%= (site.posts.length > 1?__('profile.posts'):__('profile.post')) %></span>
</div>
<div class="article-info-block">
<%= site.tags.length %>
<span><%= (site.tags.length > 1?__('profile.tags'):__('profile.tag')) %></span>
</div>
</div>
<% if(theme.contacts) { %>
<div class="contact-info profile-block">
<table class="contact-list">
<tr>
<% for(var i in theme.contacts) { %>
<td><a href="<%- url_for(theme.contacts[i]) %>" target="_blank" title="<%= i %>"><i class="fa fa-<%= i %>"></i></a></td>
<div class="inner profile-inner">
<div class="base-info profile-block">
<img id="avatar" src="<%- gravatar(theme.email) %>">
<h2 id="name"><%= config.author %></h2>
<h3 id="title"><%= config.author_title %></h3>
<span id="location"><i class="fa fa-map-marker"></i><%= config.location %></span>
<a id="follow" href="<%= config.follow %>"><%= __('profile.follow') %></a>
</div>
<div class="article-info profile-block">
<div class="article-info-block">
<%= site.posts.length %>
<span><%= (site.posts.length > 1 ? __('profile.posts') : __('profile.post')) %></span>
</div>
<div class="article-info-block">
<%= site.tags.length %>
<span><%= (site.tags.length > 1 ? __('profile.tags') : __('profile.tag')) %></span>
</div>
</div>
<% if(theme.contacts) { %>
<div class="contact-info profile-block">
<table class="contact-list">
<tr>
<% for(var i in theme.contacts) { %>
<td><a href="<%- url_for(theme.contacts[i]) %>" target="_blank" title="<%= i %>"><i
class="fa fa-<%= i %>"></i></a></td>
<% } %>
</tr>
</table>
</div>
<% } %>
</tr>
</table>
<div class="article-info profile-block bio">
<h2>About</h2>
<p>I'm a software developer who likes to tweak/break gadgets and complain about everything under the
sun. When I'm not doing that, I'm usually playing games, watching films or watching sports.
</p>
</div>
</div>
<% } %>
</div>
</aside>

View File

@ -1,3 +1,17 @@
.bio
text-align: center
#profile .inner .bio h2
font-size: 1.3em
font-weight: bold
margin-top: 15px
#profile .inner .bio p
margin: 5px 20px 10px 20px
text-align: justify
max-width: 300px
line-height: 1.5em
.profile-block
padding: 15px 20px
border-bottom: 1px solid color-border
@ -8,7 +22,7 @@
display: none
@media mq-normal
display: block
column(profile-column)
column(profile-column)
.inner
@extend $block
margin-top: block-margin
@ -86,7 +100,7 @@
white-space: nowrap
border-radius: 2px
text-transform: uppercase
box-shadow: 0 0 2px rgba(0,0,0,0.2)
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)
z-index: 1
&:before
top: -12px
@ -107,7 +121,7 @@
position: absolute
.profile-inner
position: relative
box-shadow: 0 2px 5px rgba(0,0,0,0.2)
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
&:before, &:after
z-index: 1
content: ''