开始service

layout/index.ejs

@@ -15,6 +15,7 @@
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link rel="stylesheet" href="css/libs/animate.css">
 <link rel="stylesheet" href="css/featureSection.css">
+<link rel="stylesheet" href="css/serviceSection.css">
 <link rel="stylesheet" href="css/main.css">
 
 <!-- bxSlider CSS file -->
@@ -208,7 +209,7 @@ $(document).ready(function() {
         <figure class="effect-ruby">
             <img src="images/2_03.png" alt="img15"/>
             <figcaption>
-                <h2><i class="fa fa-paper-plane fa-2x"></i></h2>
+                <h2><span class="glyphicon glyphicon-search" aria-hidden="true"></span></h2>
                 <h3><span>成熟框架</span></h3>
                 <h3><p>采用成熟的protobuf数据存储格式和gRPC通信框架，轻便快捷，可扩张能力强不受语音限制</p></h3>
                 <p class="checkDetail"><span class="plink">查看详情</span></p>
@@ -272,19 +273,20 @@ $(document).ready(function() {
 	<section class="posts">
 	<% var count = 0 %>
 	<% site.pages.each(function (post) { %>
-   	<% if (post.categories == "news") { %></p>
+   	<% if (post.categories == "news") { %>
    	<% count += 1%>
     <div class="article" style="display:none">
-    	
-      <div class="article-title"><h3><%- post.title %></h3><h5><%- date(post.date, "YYYY-MM-DD") %></h5><h5><%- count %></h5></div>
+      	<div class="article-title row">
+      		<div class="article-title-left">
+      			<a class="article-readmore" href="<%- url_for(post.path) %>"><%- post.title %></a>
+      		</div>
+      		<div>
+      			<p><%- date(post.date, "YYYY-MM-DD") %></p>
+      		</div>
+      	</div>
       	<div class="article-content">
         	<%- post.excerpt %>
       	</div>
-        <a class="article-readmore" href="<%- url_for(post.path) %>">查看详情</a>
-      
-<!--       <div class="post-meta">
-        <span class="post-time"><%- date(post.date, "YYYY-MM-DD") %></span>
-      </div> -->
     </div>
     
 <% } }) %>

source/css/main.css

@@ -175,10 +175,10 @@
 
 	
 .common_section .article{
-	margin: 30px;
-	padding:0 0 20px 0;
+	margin: 0;
+	padding:0;
 	background:#fff;
-	border:1px solid #e7e7e7;
+	border-bottom :2px dashed #e7e7e7;
 	font-family: 'open_sansregular';
 	font-size:20px;
 	color:#333;
@@ -199,6 +199,11 @@
 	border-bottom: 0.5px solid #333;
 }
 
+.article .article-title .article-title-left{
+    float: left;
+    width: 80%;
+}
+
 .article .article-content{
 	margin: 20px;
 	font-size: 16px;

source/css/serviceSection.css

+.service_grid {
+	box-sizing: border-box;
+	overflow: hidden;
+	margin: 0;
+	width: 100%;
+	list-style: none;
+	text-align: center;
+	background-color: #fff;
+}
+
+/* Common style */
+.service_grid figure {
+	box-sizing: border-box;
+	position: relative;
+	z-index: 1;
+	display: inline-block;
+	overflow: hidden;
+	margin: 1px;
+	/*background: #3085a3;*/
+	background: #3085a3;
+	text-align: center;
+	cursor: pointer;
+	width: 33%;
+}
+
+.service_grid figure img {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 100%;
+/*	min-height: 100%;*/
+	opacity: 1;
+}
+
+.service_grid figure figcaption {
+	box-sizing: border-box;
+	padding: 2em;
+	color: #fff;
+	font-size: 1.25em;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+}
+
+.service_grid figure figcaption::before,
+.service_grid figure figcaption::after {
+	box-sizing: border-box;
+	pointer-events: none;
+}
+
+.service_grid figure figcaption{
+	box-sizing: border-box;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+/* Anchor will cover the whole item by default */
+/* For some effects it will show as a button */
+
+
+
+.service_grid figure h2 {
+	box-sizing: border-box;
+	word-spacing: -0.15em;
+	
+	font-weight: 10;
+}
+
+.service_grid figure h4 {
+	margin: 0;
+}
+
+.service_grid figure h2 span {
+
+	box-sizing: border-box;
+	font-weight: 100;
+}
+.service_grid figure h3 {
+	box-sizing: border-box;
+	word-spacing: -0.15em;
+	
+	font-weight: 50;
+}
+
+.service_grid figure h3 span {
+	box-sizing: border-box;
+	font-weight: 400;
+	font-size: 1.75em;
+}
+
+.service_grid figure h4 span {
+	box-sizing: border-box;
+	font-weight: 200;
+	font-size: 1.25em;
+}
+.service_grid figure a{
+	text-decoration: none;
+	color:#fff;
+}
+
+.service_grid figure a:hover{
+	text-decoration: underline;
+	color:#fff;
+}
+
+
+.service_grid figure h2,
+.service_grid figure h3,
+.service_grid figure p {
+	
+	margin: 0;
+
+	letter-spacing: 1px;
+
+}
+
+
+
+
+/* Individual effects */
+
+/*---------------*/
+/***** Ruby *****/
+/*---------------*/
+
+figure.effect-ruby2 {
+	background-color: #000;
+}
+
+figure.effect-ruby2 img {
+	opacity: 1;
+	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+	transition: opacity 0.35s, transform 0.35s;
+	-webkit-transform: scale(1.0);
+	transform: scale(1.0);
+}
+
+figure.effect-ruby2:hover img {
+	opacity: 0.5;
+	-webkit-transform: scale(1.15);
+	transform: scale(1.15);
+}
+
+figure.effect-ruby2 h2 {
+	margin-top: 5%;
+	padding-bottom: 10px;
+	-webkit-transition: -webkit-transform 0.35s;
+	transition: transform 0.35s;
+	-webkit-transform: translate3d(0,0,0);
+	transform: translate3d(0,0,0);
+}
+
+
+figure.effect-ruby2:hover h2 {
+	-webkit-transform: translate3d(0,-130px,0);
+	transform: translate3d(0,-130px,0);
+}
+
+
+
+
+figure.effect-ruby2 h3 {
+
+	padding-bottom: 10px;
+	-webkit-transition: -webkit-transform 0.35s;
+	transition: transform 0.35s;
+	-webkit-transform: translate3d(0,0,0);
+	transform: translate3d(0,0,0);
+}
+
+
+figure.effect-ruby2:hover h3 {
+	-webkit-transform: translate3d(0,-80px,0);
+	transform: translate3d(0,-80px,0);
+}
+
+
+figure.effect-ruby2 h4 {
+
+	padding-bottom: 10px;
+	-webkit-transition: -webkit-transform 0.35s;
+	transition: transform 0.35s;
+	-webkit-transform: translate3d(0,0,0);
+	transform: translate3d(0,0,0);
+}
+
+
+figure.effect-ruby2:hover h4 {
+	-webkit-transform: translate3d(0,-80px,0);
+	transform: translate3d(0,-80px,0);
+}
+
+figure.effect-ruby2 p {
+	margin: 40px 0 80px 0;
+	opacity: 0;
+
+	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+	transition: opacity 0.35s, transform 0.35s;
+	-webkit-transform: translate3d(0,0px,0) scale(1.1);
+	transform: translate3d(0,0px,0) scale(1.1);
+} 
+
+
+
+figure.effect-ruby2:hover p {
+	opacity: 1;
+	-webkit-transform: translate3d(0,-20px,0) scale(1);
+	transform: translate3d(0,-20px,0) scale(1);
+}
+
+.plink{
+	margin: 30px;
+	
+	padding: 5px 20px 5px 20px;
+	border: 1px solid #ffffff;
+	border-radius: 3px;
+
+}
+
+.service_grid figure figcaption img{
+	margin: 0 auto;
+	width: 60px;
+}
+