fix home page style

scripts/home.js

@@ -45,11 +45,17 @@ class Banner extends React.Component {
 
   render() {
     return (
-      <QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
-        <h1 key="h1">ANT DESIGN</h1>
-        <p key="content">一套 UI 设计语言</p>
-        <a key="button" href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
-      </QueueAnim>)
+      <div>
+        <QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
+          <h1 key="h1">ANT DESIGN</h1>
+          <p key="content">一个 UI 设计语言</p>
+          <a key="button" href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
+        </QueueAnim>
+        <TweenOne className='down' vars={[{opacity: 1},{y: 10, duration: 800, yoyo: true, repeat: -1}]}>
+          <Icon type="down"/>
+        </TweenOne>
+      </div>
+    )
   }
 }
 
@@ -64,7 +70,8 @@ ReactDOM.render((
     <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse>
       <h1 key="h1">实例/优秀的设计实践</h1>
       <p key="p" style={{maxWidth: 310}}>近一年的蚂蚁中后台设计实践，积累了大量的优秀案例。</p>
-      <div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon type="right"/></Button></div>
+      <div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon
+        type="right"/></Button></div>
     </QueueAnim>
   </ScrollOverPack>
 ), page1);
@@ -75,7 +82,9 @@ ReactDOM.render((
     <QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' leaveReverse>
       <h1 key="h1">设计模式库</h1>
       <p key="p" style={{maxWidth: 260}}>为中后台设计中反复出现的问题提供一套相应的解决方案</p>
-      <div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon type="right"/></Button></div>
+      <div key="button"><Button type="primary" size="large"
+                                onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon type="right"/></Button>
+      </div>
     </QueueAnim>
     <TweenOne key="image" className="image2 image-wrapper" vars={{x: 0, opacity: 1, delay: 300, duration: 550}}
               style={{transform: 'translateX(100px)', opacity: 0}}/>
@@ -84,20 +93,22 @@ ReactDOM.render((
 
 //page3
 ReactDOM.render((
-  <ScrollOverPack className="content-wrapper" >
+  <ScrollOverPack className="content-wrapper">
     <TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
               style={{transform: 'translateX(-100px)', opacity: 0}}/>
     <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}>
-      <h1 key="h1">数十个基础设计组件</h1>
+      <h1 key="h1">40+ 基础设计组件</h1>
       <p key="p" style={{maxWidth: 280}}>为中后台设计中反复出现的问题提供一套完整的解决方案</p>
-      <div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon type="right"/></Button></div>
+      <div key="button"><Button type="primary" size="large"
+                                onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon
+        type="right"/></Button></div>
     </QueueAnim>
   </ScrollOverPack>
 ), page3);
 
 //page4
 ReactDOM.render((
-  <ScrollOverPack className="content-wrapper" >
+  <ScrollOverPack className="content-wrapper">
 
     <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom">
       <h1 key="h1">微小·确定·幸福</h1>

site/static/style.css

@@ -89,7 +89,7 @@ a.logo {
   line-height: 40px;
   margin: 17px 0 17px 4%;
   text-transform: uppercase;
-  font-size: 16px;
+  font-size: 14px;
   font-family: "Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif;
   color: #2db7f5;
   width: 219px;
@@ -103,9 +103,9 @@ a.logo {
 
 .search {
   float: left;
-  height: 22px;
+  height: 20px;
   padding: 0px 0 0 30px;
-  margin: 32px auto 0;
+  margin: 28px auto 0;
   border-left: 1px solid #EBEDEE;
   position: relative;
 }

site/templates/home.html

@@ -12,11 +12,15 @@
   header {
     position: fixed;
     z-index: 999;
-    background: rgba(0, 0, 0, 0.75);
+    background: rgba(0,0,0,0.25);
     border-bottom: 1px solid transparent;
     transition: border .5s cubic-bezier(0.455, 0.03, 0.515, 0.955), background .5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
 
+  header .nav ul li a {
+    color: #eee;
+  }
+
   .global-hint {
     display: none;
   }
@@ -43,8 +47,6 @@
 
   .search {
     border-left-color: rgba(235, 237, 238, .5);
-    height: 20px;
-    margin-top: 28px;
     transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
 
@@ -128,6 +130,15 @@
     margin-left: 15px;
   }
 
+  .down {
+    text-align: center;
+    position: absolute;
+    bottom: 30px;
+    color: rgba(255, 255, 255, .75);
+    left: 50%;
+    margin-left: -7px;
+  }
+
   section {
     height: 100%;
     width: 100%;
@@ -224,7 +235,8 @@
   footer ul li > h2 {
     color: #656975;
   }
-  footer ul li > a{
+
+  footer ul li > a {
     color: #BEC4C8
   }
 </style>