Added use of gravatar for the profile image, added about profile section
This commit is contained in:
parent
395087e0b7
commit
e5deb0624c
|
@ -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>
|
|
@ -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>
|
|
@ -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: ''
|
||||
|
|
Loading…
Reference in New Issue