mobile && tag fix && js md5

layout/_partial/after-footer.ejs

@@ -12,7 +12,7 @@
 	}
 </script>
 
-<%- js('./main.js?v=4.0.0') %>
+<%- partial('script') %>
 
 <% if (theme.mathjax){ %>
 <%- partial('mathjax') %>

layout/_partial/left-col.ejs

@@ -21,11 +21,9 @@
 			</ul>
 		</nav>
 		<nav class="header-smart-menu">
-	        <% var count = 0 %>
     		<% for (var i in theme.smart_menu){ %>
     			<% if(theme.smart_menu[i]){ %>
-    			<a data-idx="<%-count%>" q-on="click: openSlider(e, '<%-i%>')" href="javascript:void(0)"><%= theme.smart_menu[i] %></a>
-    			<% count++ %>
+    			<a q-on="click: openSlider(e, '<%-i%>')" href="javascript:void(0)"><%= theme.smart_menu[i] %></a>
     			<% } %>
             <%}%>
 		</nav>

layout/_partial/mobile-nav.ejs

@@ -1,36 +1,45 @@
 <nav id="mobile-nav">
-  	<div class="overlay">
-  		<div class="slider-trigger"><i class="icon-sort"></i></div>
-  		<h1 class="header-author js-mobile-header hide"><%=theme.author%></h1>
-  	</div>
+  	<div class="overlay js-overlay"></div>
+	<div class="btnctn js-mobile-btnctn">
+		<div class="slider-trigger back" style="display:none"><i class="icon icon-back1"></i></div>
+  		<div class="slider-trigger list" q-on="click: openSlider(e, 'innerArchive')"><i class="icon icon-sort"></i></div>
+	</div>
 	<div class="intrude-less">
 		<header id="header" class="inner">
 			<div class="profilepic">
 				<img src="<%=theme.avatar%>" class="js-avatar">
 			</div>
 			<hgroup>
-			  <h1 class="header-author"><%=theme.author%></h1>
+			  <h1 class="header-author js-header-author"><%=theme.author%></h1>
 			</hgroup>
 			<% if (theme.subtitle){ %>
-			<p class="header-subtitle"><%=theme.subtitle%></p>
-			<%}%>
-			<nav class="header-menu">
-				<ul>
-				<% for (var i in theme.menu){ %>
-					<li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
-		        <%}%>
-		        <% if (theme.smart_menu.innerArchive) { %>
-		        	<li><a href="/archives/"><%= theme.smart_menu.innerArchive %></a></li>
-		        <% } %>
-				</ul>
-			</nav>
+			<p class="header-subtitle"><i class="icon icon-quo-left"></i><%=theme.subtitle%><i class="icon icon-quo-right"></i></p>
+			<% } %>
+			<% var count = 0%>
+			<% for (var i in theme.menu){ %>
+				<% count++ %>
+			<% } %>
+			<% var ulWidth = count > 2 ? '70%' : '50%' %>
+
+			<% if (theme.mobile.social) { %>
 			<nav class="header-nav">
 				<div class="social">
 					<% for (var i in theme.subnav){ %>
 						<a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><i class="icon-<%= i %>"></i></a>
 			        <%}%>
 				</div>
 			</nav>
+			<% } %>
+
+			<nav class="header-menu js-header-menu">
+				<ul style="width: <%= ulWidth %>">
+				<% var divide = 100 / count + '%' %>
+				<% for (var i in theme.menu){ %>
+					<li style="width: <%= divide %>"><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
+		        <%}%>
+				</ul>
+			</nav>
 		</header>				
 	</div>
+	<div class="mobile-mask" style="display:none" q-show="isShow"></div>
 </nav>

layout/_partial/post/tag.ejs

@@ -1,9 +1,12 @@
 <% if (post.tags && post.tags.length){ %>
 	<div class="article-tag tagcloud">
 		<i class="icon-price-tags"></i>
-		<%- list_tags(post.tags, {
-		    show_count: false,
-		    class: 'article-tag'
-		  }) %>
+		<ul class="article-tag-list">
+			<% post.tags.forEach(function(tag, i){ %> 
+        <li class="article-tag-list-item">
+        	<a href="javascript:void(0)" class="article-tag-list-link color<%= tag.name.length % 5 + 1 %>"><%-tag.name%></a>
+        </li>
+      <% }) %>
+		</ul>
 	</div>
 <% } %>

layout/_partial/tools.ejs

@@ -20,7 +20,7 @@
           <ul class="article-tag-list" q-show="showTags">
             <% site.tags.forEach(function(tag, i){ %> 
               <li class="article-tag-list-item">
-                <a href="javascript:void(0)"><%-tag.name%></a>
+                <a href="javascript:void(0)" class="color<%= tag.name.length % 5 + 1 %>"><%-tag.name%></a>
               </li>
             <% }) %>
             <div class="clearfix"></div>

package.json

@@ -34,6 +34,7 @@
     "css-loader": "^0.25.0",
     "dom101": "^1.3.0",
     "extract-text-webpack-plugin": "^1.0.1",
+    "html-webpack-plugin": "^2.24.1",
     "node-sass": "^3.9.3",
     "postcss-loader": "^1.0.0",
     "sass-loader": "^4.0.2",

source-src/css/core/_animation.scss

@@ -310,7 +310,6 @@
 
 %anmLeftOut {
     animation-duration: .8s;
-    animation-fill-mode: both;
     animation-name: leftOut;
 }
 

source-src/css/fonts.scss

@@ -46,6 +46,8 @@
 
 .icon-share:before { content: "\e618"; }
 
+.icon-back:before { content: "\e625"; }
+
 .icon-qq:before { content: "\e62d"; }
 
 .icon-weibo:before { content: "\e619"; }
@@ -74,6 +76,8 @@
 
 .icon-quo-right:before { content: "\e7f6"; }
 
+.icon-back1:before { content: "\e64e"; }
+
 .icon-github:before { content: "\e735"; }
 
 .icon-film:before { content: "\e7b7"; }

source-src/css/grid.scss

@@ -14,6 +14,9 @@ html, body, #container {
     overflow-x: hidden;
     overflow-y: auto;
 }
+#mobile-nav {
+	display: none;
+}
 #container{
 	position:relative;
 	min-height:100%;
@@ -52,38 +55,4 @@ html, body, #container {
 	&.hide {
 		@extend %anmLeftOut;
 	}
-}
-#mobile-nav{
-	display: none;
-	.overlay{
-		height: 110px;
-		position: absolute;
-		width: 100%;
-		background: #4d4d4d;
-		&.fixed{
-	        position: fixed;
-	        height: 42px;
-	        z-index: 99;
-	    }
-	}
-	#header{
-		padding: 10px 0 0 0;
-		.profilepic{
-			display: block;
-			position: relative;
-			z-index: 100;
-		}
-		.header-menu{
-			height: auto;
-			margin: 10px;
-			ul{
-				text-align: center;
-				cursor: default;
-			}
-			li{
-				display: inline-block;
-				margin: 3px;
-			}
-		}
-	}
 }

source-src/css/mobile-slider.scss

@@ -39,84 +39,4 @@
 }
 .header-subtitle {
     padding: 0 24px;
-}
-#viewer{
-	position: fixed;
-	z-index: 1000000;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	overflow: hidden;
-}
-#viewer-box{
-	width: 100%;
-	height: 100%;
-	position: relative;
-	color: #ccc;
-	-webkit-transform: translate3d(-100%, 0, 0 );
-	-webkit-transition: -webkit-transform .25s ease-in-out;
-	.viewer-box-l{
-		background: url('./img/checkered-pattern.png') repeat #5d5d5d;
-		width: 80%;
-		height: 100%;
-		float: left;
-		a {
-			color: #5ac8ff;
-		}
-		.viewer-box-wrap{
-			margin: 20px 10px 0px 20px;
-		}
-		.viewer-title{
-			line-height: 32px;
-			font-weight: bold;
-			color: #d6d6d6;
-			&:before{
-				content: "";
-				width: 6px;
-				height: 6px;
-				border: 1px solid #999;
-				-webkit-border-radius: 10px;
-				border-radius: 10px;
-				background: #aaa;
-				display: inline-block;
-				margin-right: 10px;
-			}
-		}
-		.viewer-div{
-			border-bottom: 1px dotted #666;
-			padding-bottom: 13px;
-			line-height: 20px;
-			&:last-child{
-				border-bottom: none;
-			}
-			.switch-friends-link{
-				line-height: 20px;
-			}
-		}
-		.tagcloud a {
-			color: #fff;
-		}
-	}
-	.viewer-box-r{
-		background: rgba(0,0,0,0);
-		width: 20%;
-		height: 100%;
-		float: right;
-	}
-}
-#viewer-box.anm-swipe{
-	-webkit-transform:  translate3d(0, 0, 0);
-	.viewer-box-r{
-		background: rgba(0,0,0,0);
-	}
-}
-.hide{
-	display: none;
-}
-#viewer-box .viewer-list{
-	margin: 0;
-	padding: 0;
-	height: 100%;
-	overflow: hidden;
 }