From 32ca98c2cd0b3ee177c42f78f3a5e8a32b150948 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 11 Jan 2016 11:20:22 +0800
Subject: [PATCH] update home page style

---
 scripts/home.js          | 12 +++++-------
 site/templates/home.html | 10 +++++++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/scripts/home.js b/scripts/home.js
index 5b8d18f245..f34a238175 100644
--- a/scripts/home.js
+++ b/scripts/home.js
@@ -7,7 +7,6 @@ import TweenOne from 'rc-tween-one';
 
 // 导航处理
 function scrollNavEvent() {
-  console.log(document.body.scrollTop);
   const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
   const clientHeight = document.documentElement.clientHeight;
   if (scrollTop >= clientHeight) {
@@ -37,7 +36,7 @@ class Banner extends React.Component {
     return (
       <div>
         <QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
-          <h1 key="h1">ANT <p>DESIGN</p></h1>
+          <h2 key="h2">ANT <p>DESIGN</p></h2>
           <p key="content">一个 UI 设计语言</p>
           <span className="line" key="line"/>
           <a key="button" href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
@@ -52,14 +51,13 @@ class Banner extends React.Component {
 
 ReactDOM.render(<Banner />, document.getElementById('banner'));
 
-
 // page1
 ReactDOM.render((
   <ScrollOverPack className="content-wrapper">
     <TweenOne key="image" className="image1 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>
-      <h1 key="h1">最佳实践</h1>
+      <h2 key="h2">最佳实践</h2>
       <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>
@@ -71,7 +69,7 @@ ReactDOM.render((
 ReactDOM.render((
   <ScrollOverPack className="content-wrapper">
     <QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' leaveReverse>
-      <h1 key="h1">设计模式</h1>
+      <h2 key="h2">设计模式</h2>
       <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>
@@ -88,7 +86,7 @@ ReactDOM.render((
     <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>
+      <h2 key="h2">数十个基础设计组件</h2>
       <p key="p" style={{maxWidth: 280}}>丰富而且灵活的基础组件，为业务产品提供强有力的设计支持。</p>
       <div key="button"><Button type="primary" size="large"
                                 onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon
@@ -101,7 +99,7 @@ ReactDOM.render((
 ReactDOM.render((
   <ScrollOverPack className="content-wrapper">
     <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom">
-      <h1 key="h1">微小·确定·幸福</h1>
+      <h2 key="h2">微小·确定·幸福</h2>
       <p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p>
     </QueueAnim>
     <TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}}
diff --git a/site/templates/home.html b/site/templates/home.html
index 78ea83c355..7dbaa431ce 100644
--- a/site/templates/home.html
+++ b/site/templates/home.html
@@ -3,6 +3,7 @@
 {% block bodyAttribute %}class="index-page"{% endblock %}
 
 {% block content %}
+<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
 <section id="banner"></section>
 <section id="page1" class="page"></section>
 <section id="page2" class="page"></section>
@@ -79,12 +80,13 @@
     color: #666;
   }
 
-  .banner-text-wrapper h1 {
+  .banner-text-wrapper h2 {
     font-size: 40px;
     font-weight: normal;
+    font-family: 'Raleway';
   }
 
-  .banner-text-wrapper h1 p {
+  .banner-text-wrapper h2 p {
     color: #FF3171;
     display: inline-block;
   }
@@ -199,9 +201,11 @@
     left: 10px;
   }
 
-  .content-wrapper .text-wrapper h1 {
+  .content-wrapper .text-wrapper h2,
+  .content-wrapper .text-wrapper-bottom h2 {
     font-size: 32px;
     color: #666;
+    font-weight: normal;
   }
 
   .content-wrapper .text-wrapper p {
-- 
GitLab