Browse Source

Merge pull request #31 from gigaSproule/master

Allow gravatar to be used for the images, about section to exist under the profile and able to hide the logo on the header
ppoffice 10 years ago
parent
commit
8b78173fa3
6 changed files with 68 additions and 25 deletions
  1. 19 0
      .editorconfig
  2. 3 1
      .gitignore
  3. 2 0
      _config.yml.example
  4. 12 12
      layout/_partial/header.ejs
  5. 15 9
      layout/_partial/profile.ejs
  6. 17 3
      source/css/_partial/profile.styl

+ 19 - 0
.editorconfig

@@ -0,0 +1,19 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,py}]
+charset = utf-8
+
+# 4 space indentation
+[{*.json,*.yml,*.styl,*.ejs}]
+indent_style = space
+indent_size = 2

+ 3 - 1
.gitignore

@@ -1 +1,3 @@
-_config.yml
+_config.yml
+*.iml
+.idea

+ 2 - 0
_config.yml.example

@@ -12,6 +12,8 @@ fancybox: true
 
 
 # Profile
 # Profile
 profile: true # whether to show profile bar
 profile: true # whether to show profile bar
+gravatar: false # whether to use gravatar with the email
+showlogo: false # whether to show the logo in the header
 
 
 # Sidebar
 # Sidebar
 sidebar: right # set to false if you don't want a sidebar
 sidebar: right # set to false if you don't want a sidebar

+ 12 - 12
layout/_partial/header.ejs

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

+ 15 - 9
layout/_partial/profile.ejs

@@ -1,32 +1,38 @@
 <aside id="profile">
 <aside id="profile">
   <div class="inner profile-inner">
   <div class="inner profile-inner">
-  	<div class="base-info profile-block">
-		  <img id="avatar" src="<%- url_for(config.avatar) %>">
+    <div class="base-info profile-block">
+      <img id="avatar" src="<%= ( theme.gravatar ? gravatar(theme.email) : url_for(config.avatar)) %>">
       <h2 id="name"><%= config.author %></h2>
       <h2 id="name"><%= config.author %></h2>
       <h3 id="title"><%= config.author_title %></h3>
       <h3 id="title"><%= config.author_title %></h3>
       <span id="location"><i class="fa fa-map-marker"></i><%= config.location %></span>
       <span id="location"><i class="fa fa-map-marker"></i><%= config.location %></span>
-      <a id="follow" href="<%= config.follow %>"><%=__('profile.follow')%></a>
-  	</div>
+      <a id="follow" href="<%= config.follow %>"><%= __('profile.follow') %></a>
+    </div>
     <div class="article-info profile-block">
     <div class="article-info profile-block">
       <div class="article-info-block">
       <div class="article-info-block">
         <%= site.posts.length %>
         <%= site.posts.length %>
-        <span><%= (site.posts.length > 1?__('profile.posts'):__('profile.post')) %></span>
+        <span><%= (site.posts.length > 1 ? __('profile.posts') : __('profile.post')) %></span>
       </div>
       </div>
       <div class="article-info-block">
       <div class="article-info-block">
         <%= site.tags.length %>
         <%= site.tags.length %>
-        <span><%= (site.tags.length > 1?__('profile.tags'):__('profile.tag')) %></span>
+        <span><%= (site.tags.length > 1 ? __('profile.tags') : __('profile.tag')) %></span>
       </div>
       </div>
     </div>
     </div>
     <% if(theme.contacts) { %>
     <% if(theme.contacts) { %>
     <div class="contact-info profile-block">
     <div class="contact-info profile-block">
       <table class="contact-list">
       <table class="contact-list">
         <tr>
         <tr>
-        <% for(var i in theme.contacts) { %>
+          <% 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>
           <td><a href="<%- url_for(theme.contacts[i]) %>" target="_blank" title="<%= i %>"><i class="fa fa-<%= i %>"></i></a></td>
-        <% } %>
+          <% } %>
         </tr>
         </tr>
       </table>
       </table>
     </div>
     </div>
     <% } %>
     <% } %>
+    <% if(theme.about) { %>
+    <div class="article-info profile-block bio">
+      <h2>About</h2>
+      <p><%- theme.about %></p>
+    </div>
+    <% } %>
   </div>
   </div>
-</aside>
+</aside>

+ 17 - 3
source/css/_partial/profile.styl

@@ -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
 .profile-block
   padding: 15px 20px
   padding: 15px 20px
   border-bottom: 1px solid color-border
   border-bottom: 1px solid color-border
@@ -8,7 +22,7 @@
   display: none
   display: none
   @media mq-normal
   @media mq-normal
     display: block
     display: block
-    column(profile-column)
+  column(profile-column)
   .inner
   .inner
     @extend $block
     @extend $block
     margin-top: block-margin
     margin-top: block-margin
@@ -86,7 +100,7 @@
                 white-space: nowrap
                 white-space: nowrap
                 border-radius: 2px
                 border-radius: 2px
                 text-transform: uppercase
                 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
                 z-index: 1
               &:before
               &:before
                 top: -12px
                 top: -12px
@@ -107,7 +121,7 @@
     position: absolute
     position: absolute
     .profile-inner
     .profile-inner
       position: relative
       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
       &:before, &:after
         z-index: 1
         z-index: 1
         content: ''
         content: ''