Merge branch 'add-new-sidebar-behavior' into dev

LouisBarranqueiro · Jul 10, 2016 · 68ca78f · 68ca78f
2 parents f175f0e + 55305c5
commit 68ca78f
Show file tree

Hide file tree

Showing 19 changed files with 325 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -21,8 +21,8 @@ A gorgeous responsive theme for Hexo blog framework
 ## General ##
 
 - **Author** : Louis Barranqueiro
-- **Version** : 1.8.0
-- **Compatibility** : Hexo 3.0.0 or later
+- **Version** : 1.8.1
+- **Compatibility** : Node v4 or later, Hexo 3.0.0 or later 
 
 ## Features ##
 
@@ -66,8 +66,8 @@ A gorgeous responsive theme for Hexo blog framework
 
 ##### For people who want to use the original version of Tranquilpeak without modifications (users)
 
-1. Download the latest version ready for production use here : [hexo-theme-tranquilpeak-prod-1.8.0]
-(https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/releases/download/v1.8.0/hexo-theme-tranquilpeak-built-for-production-1.8.0.zip)
+1. Download the latest version ready for production use here : [hexo-theme-tranquilpeak-prod-1.8.1]
+(https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/releases/download/v1.8.1/hexo-theme-tranquilpeak-built-for-production-1.8.1.zip)
 2. Follow [user documentation](https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/blob/master/docs/user.md) to install and configure the theme  
 
 ##### For people who want to create their own version of tranquilpeak (developers) 

diff --git a/_config.yml b/_config.yml
@@ -1,5 +1,5 @@
 # Tranquilpeak
-# Version : 1.8.0
+# Version : 1.8.1
 # Author : Louis Barranqueiro
 
 # I STRONGLY recommend you to use a CDN to speed up loading of pages.
@@ -131,12 +131,12 @@ author:
 
 # Customization
 # Define the behavior of the sidebar
-# 1: Display large sidebar on large screen, medium sidebar on medium screen and header bar on small screen
+# 1: Display extra large sidebar on extra large screen, large sidebar on large screen, medium sidebar on medium screen and header bar on small screen (default)
 # and large sidebar is swiped
-# 2: Display medium sidebar on large and medium screen and header bar on small screen and medium sidebar is swiped (default)
-# 3: Display header bar on all screens and large sidebar is swiped
+# 2: Display medium sidebar on large and medium screen and header bar on small screen and medium sidebar is swiped
+# 3: Display header bar on all screens, large sidebar is swiped on large screen and extra large bar on extra large screen
 # 4: Display header bar on all screens and medium sidebar is swiped
-sidebar_behavior: 2
+sidebar_behavior: 1
 # Hide sidebar on all article page to let article take full width to improve reading, and enjoy wide images and cover images. (true: enable, false: disable)
 clear_reading: true
 # Display thumbnail image of each post on index pages (false: disabled, true: enabled)

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "hexo-theme-tranquilpeak",
-    "version": "1.8.0",
+    "version": "1.8.1",
     "description": "A gorgeous responsive theme for Hexo blog framework",
     "authors": [
         "Louis Barranqueiro"

diff --git a/docs/developer.md b/docs/developer.md
@@ -32,11 +32,11 @@ If you want to report a bug or ask a question, [create an issue](https://github.
 
 - **Author** : Louis Barranqueiro
 - **Version** : 1.8.1
-- **Compatibility** : Hexo 3.0.0 or later
+- **Compatibility** : Node v4 or later, Hexo v3.0.0 or later
 
 ## Requirements ##
 
-1. **Node** : v0.10.35 or higher. Download [Node](https://nodejs.org/download/)
+1. **Node** : v4 or higher. Download [Node](https://nodejs.org/download/)
 2. **Hexo CLI** : v0.1.4 or higher. Run `npm install hexo-cli -g`
 3. **Grunt CLI** : v0.1.13 or higher. Run `npm install grunt-cli -g`
 4. **Bower** : v1.4.1 or higher. Run `npm install bower -g`

diff --git a/docs/user.md b/docs/user.md
@@ -57,7 +57,7 @@ If you want to report a bug or ask a question, [create an issue](https://github.
 
 - **Author** : Louis Barranqueiro
 - **Version** : 1.8.1
-- **Compatibility** : Hexo 3.0.0 or later
+- **Compatibility** : Node v4 or later, Hexo v3.0.0 or later
 
 ## Features ##
 
@@ -97,7 +97,7 @@ If you want to report a bug or ask a question, [create an issue](https://github.
 
 ## Requirements ##
 
-1. **Node** : v0.10.35 or higher. Download [Node](https://nodejs.org/download/)
+1. **Node** : v4 or higher. Download [Node](https://nodejs.org/download/)
 2. **Hexo CLI** : v0.1.4 or higher. Run `npm install hexo-cli -g`
 
 ## Installation ##
@@ -307,7 +307,7 @@ author:
 
 ``` yaml
 # Customization
-sidebar_behavior: 2
+sidebar_behavior: 1
 toc_title: Table of contents
 thumbnail_image: true
 thumbnail_image_position: right
@@ -322,7 +322,7 @@ tag_pagination: true
 
 |Variable|Description|
 |---|---|
-|sidebar_behavior|Define the behavior of the header and sidebar :<ul><li>1: Display large sidebar on large screen, medium sidebar on medium screen and header bar on small screen and large sidebar is swiped when open button is clicked</li><li>2: Display medium sidebar on large and medium screen and header bar on small screen and medium sidebar is swiped when open button is clicked (default)</li><li>3: Display header bar on all screens and large sidebar is swiped when open button is clicked  </li><li>4: Display header bar on all screens and medium sidebar is swiped when open button is clicked)</li></ul>|
+|sidebar_behavior|Define the behavior of the header and sidebar :<ul><li>1: Display extra large sidebar on extra large screen, large sidebar on large screen, medium sidebar on medium screen and header bar on small screen and large sidebar is swiped when open button is clicked (default)</li><li>2: Display medium sidebar on large and medium screen and header bar on small screen and medium sidebar is swiped when open button is clicked</li><li>3: Display header bar on all screens and large or extra large sidebar is swiped when open button is clicked  </li><li>4: Display header bar on all screens and medium sidebar is swiped when open button is clicked)</li></ul>|
 |clear_reading|Hide sidebar on all article page to let article take full width to improve reading, and enjoy wide images and cover images. Useless if `sidebar_behavior` is equal to `3` or `4`. (true: enable, false: disable). Default behavior : `theme.clear_reading` value in theme configuration file.|
 |toc_title|Head title displayed at the top of the table of contents.|
 |thumbnail_image|Display thumbnail image of each post on index pages|

diff --git a/layout/_partial/sidebar.ejs b/layout/_partial/sidebar.ejs
@@ -10,32 +10,37 @@
     <% } %>
 <% } %>
 <nav id="sidebar" data-behavior="<%= sidebarBehavior %>">
-    <% if (authorPicture) { %>
-        <div class="sidebar-profile">
-            <a href="<%- url_for('/#about') %>">
-                    <img class="sidebar-profile-picture" src="<%= authorPicture %>"/>
-            </a>
-            <span class="sidebar-profile-name"><%= config.author %></span>
-        </div>
-    <% } %>
-    <% for (var i in theme.sidebar) { %>
-        <ul class="sidebar-buttons">
-        <% for (var n in theme.sidebar[i]) { %>
-            <li class="sidebar-button">
-                <% if (url_for(theme.sidebar[i][n].url).indexOf(config.url) < 0 && url_for(theme.sidebar[i][n].url).indexOf(':') >= 0) { %>
-                    <a  class="sidebar-button-link <% if (theme.sidebar[i][n].class) { %><%= theme.sidebar[i][n].class %><% } %>" href="<%- url_for(theme.sidebar[i][n].url) %>" target="_blank">
-                <% } else { %>
-                    <a  class="sidebar-button-link <% if (theme.sidebar[i][n].class) { %><%= theme.sidebar[i][n].class %><% } %>"
-                        <% if (theme.sidebar[i][n].url.indexOf("/") === 0 && theme.sidebar[i][n].url.length === 1) { %> href="<%- url_for(' ') %>"
-                        <% } else if (theme.sidebar[i][n].url.indexOf("/") === 0) { %> href="<%- url_for(theme.sidebar[i][n].url.substr(1)) %>"
-                        <% } else { %> href="<%- url_for(theme.sidebar[i][n].url) %>"<% } %>
-                    >
-                <% } %>
-                    <i class="sidebar-button-icon fa fa-lg <%= 'fa-' + theme.sidebar[i][n].icon %>"></i>
-                    <span class="sidebar-button-desc"><%= __(theme.sidebar[i][n].title) %></span>
+    <div class="sidebar-container">
+        <% if (authorPicture) { %>
+            <div class="sidebar-profile">
+                <a href="<%- url_for('/#about') %>">
+                        <img class="sidebar-profile-picture" src="<%= authorPicture %>"/>
                 </a>
-        </li>
+                <h4 class="sidebar-profile-name"><%= config.author %></h4>
+                <% if (__('author.bio')) { %>
+                    <h5 class="sidebar-profile-bio"><%- markdown(__('author.bio')) %></h5>
+                <% } %>
+            </div>
         <% } %>
-    </ul>
-    <% } %>
+        <% for (var i in theme.sidebar) { %>
+            <ul class="sidebar-buttons">
+            <% for (var n in theme.sidebar[i]) { %>
+                <li class="sidebar-button">
+                    <% if (url_for(theme.sidebar[i][n].url).indexOf(config.url) < 0 && url_for(theme.sidebar[i][n].url).indexOf(':') >= 0) { %>
+                        <a  class="sidebar-button-link <% if (theme.sidebar[i][n].class) { %><%= theme.sidebar[i][n].class %><% } %>" href="<%- url_for(theme.sidebar[i][n].url) %>" target="_blank">
+                    <% } else { %>
+                        <a  class="sidebar-button-link <% if (theme.sidebar[i][n].class) { %><%= theme.sidebar[i][n].class %><% } %>"
+                            <% if (theme.sidebar[i][n].url.indexOf("/") === 0 && theme.sidebar[i][n].url.length === 1) { %> href="<%- url_for(' ') %>"
+                            <% } else if (theme.sidebar[i][n].url.indexOf("/") === 0) { %> href="<%- url_for(theme.sidebar[i][n].url.substr(1)) %>"
+                            <% } else { %> href="<%- url_for(theme.sidebar[i][n].url) %>"<% } %>
+                        >
+                    <% } %>
+                        <i class="sidebar-button-icon fa fa-lg <%= 'fa-' + theme.sidebar[i][n].icon %>"></i>
+                        <span class="sidebar-button-desc"><%= __(theme.sidebar[i][n].title) %></span>
+                    </a>
+            </li>
+            <% } %>
+        </ul>
+        <% } %>
+    </div>
 </nav>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-tranquilpeak",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "A gorgeous responsive theme for Hexo blog framework",
   "main": "Gruntfile.js",
   "scripts": {

diff --git a/source/_css/components/_post-header-cover.scss b/source/_css/components/_post-header-cover.scss
@@ -140,7 +140,7 @@
     }
 }
 
-@media #{$large-and-up} {
+@media #{$large-only} {
     // Increase the font size of the post's title on large screen
     .post-header-cover {
         .post-header {
@@ -168,4 +168,34 @@
             @include post-header-cover-pushed-md;
         }
     }
+}
+
+@media #{$xlarge-and-up} {
+    // Increase the font size of the post's title on large screen
+    .post-header-cover {
+        .post-header {
+            .post-title {
+                font-size:   map-get($headings-font-size, h1) + 3.7rem;
+                line-height: 1.3em;
+            }
+        }
+        // Display post header cover div in extra small size
+        &[data-behavior="1"] {
+            @include post-header-cover-xs;
+        }
+        // Display post header cover div in medium size
+        &[data-behavior="2"] {
+            @include post-header-cover-md;
+        }
+        // Display post header cover div in large size and push it from the size of the extra large sidebar
+        &[data-behavior="3"] {
+            @include post-header-cover-lg;
+            @include post-header-cover-pushed-xlg;
+        }
+        // Display post header cover div in large size and push it from the size of the medium sidebar
+        &[data-behavior="4"] {
+            @include post-header-cover-lg;
+            @include post-header-cover-pushed-md;
+        }
+    }
 }
diff --git a/source/_css/layouts/_bottom-bar.scss b/source/_css/layouts/_bottom-bar.scss
@@ -72,4 +72,29 @@
             @include bottom-bar-pushed-md;
         }
     }
+}
+
+@media #{$large-and-up} {
+    #bottom-bar {
+        // Display bottom bar in small size and push it from the size of the extra large sidebar
+        &[data-behavior="1"] {
+            @include bottom-bar-xs;
+            @include bottom-bar-pushed-xlg;
+        }
+        // Display bottom bar in medium size and push it from the size of the medium sidebar
+        &[data-behavior="2"] {
+            @include bottom-bar-md;
+            @include bottom-bar-pushed-md;
+        }
+        // Display bottom bar in large size and push it from the size of the extra large sidebar
+        &[data-behavior="3"] {
+            @include bottom-bar-lg;
+            @include bottom-bar-pushed-xlg;
+        }
+        // Display bottom bar in large size and push it from the size of the medium sidebar
+        &[data-behavior="4"] {
+            @include bottom-bar-lg;
+            @include bottom-bar-pushed-md;
+        }
+    }
 }
diff --git a/source/_css/layouts/_header.scss b/source/_css/layouts/_header.scss
@@ -70,11 +70,13 @@
     &.header-up {
         @include prefix(transform, translate3d(0, -#{map-get($header, height)}, 0), 'webkit' 'moz');
     }
+
     // Push the header from the size of the large sidebar
     &[data-behavior="1"],
     &[data-behavior="3"] {
         @include header-pushed-lg;
     }
+
     // Push the header from the size of the medium sidebar
     &[data-behavior="2"],
     &[data-behavior="4"] {
@@ -89,4 +91,14 @@
             display: none;
         }
     }
+}
+
+// Push the header from the size of the extra large sidebar
+@media #{$xlarge-and-up} {
+    #header {
+        &[data-behavior="1"],
+        &[data-behavior="3"] {
+            @include header-pushed-xlg;
+        }
+    }
 }
diff --git a/source/_css/layouts/_main.scss b/source/_css/layouts/_main.scss
@@ -62,7 +62,7 @@
     }
 }
 
-@media #{$large-and-up} {
+@media #{$large-only} {
     #main {
         // Display `main` div in small size
         &[data-behavior="1"] {
@@ -83,4 +83,27 @@
             @include main-pushed-md;
         }
     }
+}
+
+@media #{$xlarge-and-up} {
+    #main {
+        // Display `main` div in extra small size
+        &[data-behavior="1"] {
+            @include main-xs;
+        }
+        // Display `main` div in medium size
+        &[data-behavior="2"] {
+            @include main-md;
+        }
+        // Display `main` div in large size and push it from the size of the extra large sidebar
+        &[data-behavior="3"] {
+            @include main-lg;
+            @include main-pushed-xlg;
+        }
+        // Display `main` div in large size and push it from the size of the medium sidebar
+        &[data-behavior="4"] {
+            @include main-lg;
+            @include main-pushed-md;
+        }
+    }
 }
diff --git a/source/_css/layouts/_sidebar.scss b/source/_css/layouts/_sidebar.scss
@@ -26,6 +26,10 @@
             display: block;
             margin:  0 auto;
         }
+        .sidebar-profile-name {
+            font-size: 1.1em;
+            color: map-get($sidebar, color);
+        }
     }
     // Sidebar's buttons
     ul.sidebar-buttons {
@@ -72,6 +76,7 @@
         }
     }
 }
+
 // Define sidebar behavior configured in `_config.yml` for medium screen
 @media #{$medium-only} {
     #sidebar {
@@ -89,8 +94,9 @@
         }
     }
 }
+
 // Define sidebar behavior configured in `_config.yml` for large screen
-@media #{$large-and-up} {
+@media #{$large-only} {
     #sidebar {
         &[data-behavior="1"] {
             @include sidebar-lg;
@@ -108,3 +114,29 @@
         }
     }
 }
+
+@media #{$xlarge-and-up} {
+    #sidebar {
+        &[data-behavior="1"] {
+            @include sidebar-xlg;
+        }
+        &[data-behavior="2"] {
+            @include sidebar-md;
+        }
+        &[data-behavior="3"] {
+            left: -#{map-get($sidebar, xlg-screen-width)};
+            @include sidebar-xlg;
+        }
+        &[data-behavior="4"] {
+            left: -#{map-get($sidebar, md-screen-width)};
+            @include sidebar-md;
+        }
+    }
+}
+
+// display author bio only on extra large screen
+@media #{$large-and-down} {
+    #sidebar .sidebar-profile-bio {
+        display: none;
+    }
+}