update home page style, close ant-design#8238

lovekonakona · Nov 30, 2017 · f7a8d02 · f7a8d02
1 parent b44a0c9
commit f7a8d02
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 178 deletions.
diff --git a/site/theme/static/common.less b/site/theme/static/common.less
@@ -28,7 +28,7 @@ a {
 }
 
 .main-container {
-  padding: 0 194px 144px 64px;
+  padding: 0 170px 144px 64px;
   margin-left: -1px;
   background: #fff;
   min-height: 500px;

diff --git a/site/theme/static/header.less b/site/theme/static/header.less
@@ -34,18 +34,12 @@
   height: @header-height;
   line-height: @header-height;
   text-decoration: none;
-
   img {
-    height: 28px;
-    margin-right: 16px;
+    height: 32px;
+    margin-right: 14px;
   }
-  span {
-    float: right;
-    font-size: 14px;
-    font-family: 'PingFang SC', 'Raleway', 'Hiragino Sans GB', sans-serif;
-    height: @header-height;
-    line-height: @header-height;
-    text-transform: uppercase;
+  img + img {
+    height: 16.5px;
   }
 }
 

diff --git a/site/theme/static/home.less b/site/theme/static/home.less
@@ -2,77 +2,58 @@
   position: relative;
   width: 100%;
   overflow: hidden;
-  background: url("https://os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png") no-repeat center / cover;
+  background: url("https://gw.alipayobjects.com/zos/rmsportal/UuWvfiYyEArxEECAKvRt.png") no-repeat center / cover;
 }
 .banner-text-wrapper {
   position: absolute;
-  left: 13%;
-  top: 53%;
-  color: #fff;
-  text-align: right;
-  font-family: Lato, @font-family;
+  right: 9%;
+  top: 55%;
+  color: @heading-color;
 }
 .banner-text-wrapper h2 {
-  font-size: 40px;
-  font-weight: normal;
-  font-family: 'Raleway', 'Hiragino Sans GB';
-  white-space: nowrap;
-  color: #fff;
+  font-size: 56px;
+  line-height: 64px;
+  font-weight: 500;
+  color: @heading-color;
+  font-family: "Helvetica Neue", sans-serif;
   margin: 0;
 }
 .banner-text-wrapper h2 p {
-  color: #ff3171;
+  color: #f9323f;
   display: inline-block;
   margin: 0;
 }
 .banner-text-wrapper .line {
-  width: 0.8px;
-  height: 76px;
+  width: 2px;
+  height: 96px;
   position: absolute;
-  background: rgba(255, 255, 255, .44);
-  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
-  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
-  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
-  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
+  background: #d7dce0;
   top: 16px;
-  right: -25px;
+  left: -25px;
 }
 .banner-text-wrapper > p {
-  margin: 10px auto 24px;
-  font-size: 16px;
+  margin: 20px auto 32px;
+  font-size: 20px;
+  color: @text-color;
 }
 
 .banner-text-wrapper .start-button {
-  @start-button-color: tint(@primary-color, 20%);
   margin-bottom: 24px;
-  text-align: right;
-  > a {
-    display: inline-block;
+  .ant-btn {
     height: 40px;
-    padding: 0 16px;
-    font-weight: 500;
-    border-radius: @border-radius-sm;
-    border: 1px solid @start-button-color;
-    text-decoration: none;
-    color: #0ae;
-    font-size: 15px;
-    background: transparent;
-    transition: all .45s;
+    border-radius: 100px;
+    margin-right: 16px;
+    font-size: 16px;
+    width: 114px;
     text-align: center;
-    line-height: 36px;
-    margin-left: 8px;
-    &:hover {
-      color: #fff;
-      background: @start-button-color;
+    a {
+      text-decoration: none;
     }
   }
 }
 
 .banner-text-wrapper .github-btn {
-  float: right;
   line-height: 14px;
-  text-align: left;
-
   a:hover {
     color: #333;
   }
@@ -82,15 +63,15 @@
   text-align: center;
   position: absolute;
   bottom: 30px;
-  color: rgba(255, 255, 255, .75);
   left: 50%;
   margin-left: -7px;
+  color: @text-color-secondary;
   animation: upDownMove 1.2s ease-in-out infinite alternate;
 }
 
 .page {
   min-height: 700px;
-  height: 100vh;
+  height: ~"calc(100vh - 64px)";
 }
 
 .content-wrapper {
@@ -101,32 +82,34 @@
   background: #fff;
 
   .image-wrapper {
-    width: 65%;
+    width: 60%;
     float: left;
     position: relative;
   }
 
   .text-wrapper {
-    width: 35%;
+    width: 40%;
     float: left;
     position: relative;
-    top: 20%;
-    left: -30px;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 110px;
     font-family: Lato, @font-family;
     z-index: 1;
   }
   .text-wrapper h2,
   .text-wrapper-bottom h2 {
-    font-size: 32px;
-    color: @site-text-color;
-    font-weight: normal;
+    font-size: 38px;
+    color: @heading-color;
+    line-height: 46px;
+    font-weight: 500;
     white-space: nowrap;
   }
   .text-wrapper p {
-    margin: 10px 0 20px;
+    margin: 20px 0 40px;
     font-size: 16px;
-    line-height: 28px;
-    color: #999;
+    line-height: 24px;
+    color: @text-color;
   }
   .left-text {
     padding-left: 10%;
@@ -166,8 +149,8 @@
 .text-wrapper-bottom p {
   margin: 20px auto;
   font-size: 16px;
-  line-height: 28px;
-  color: #999;
+  line-height: 24px;
+  color: @text-color;
 }
 
 @keyframes upDownMove {

diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less
@@ -98,6 +98,7 @@
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
+    width: 100%;
     .start-button {
       text-align: center;
       > a {

diff --git a/site/theme/static/template.html b/site/theme/static/template.html
@@ -58,7 +58,6 @@
     })()
     </script>
     <link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
     <link rel="stylesheet" type="text/css" href="{{ root }}index-1.css"/>
     <link rel="stylesheet" type="text/css" href="{{ root }}index-2.css"/>
     <link rel="stylesheet/less" type="text/css" href="{{ root }}color.less"/>

diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx
@@ -3,40 +3,43 @@ import { Link } from 'bisheng/router';
 import { FormattedMessage } from 'react-intl';
 import ScrollElement from 'rc-scroll-anim/lib/ScrollElement';
 import GitHubButton from 'react-github-button';
-import { Icon } from 'antd';
+import { Icon, Button } from 'antd';
 import QueueAnim from 'rc-queue-anim';
 import * as utils from '../utils';
 
 function typeFunc(a) {
   if (a.key === 'line') {
-    return 'right';
+    return 'left';
   } else if (a.key === 'button') {
     return 'bottom';
   }
-  return 'left';
+  return 'right';
 }
 
-export default function Banner({ location, onEnterChange }) {
+export default function Banner({ location }) {
   const isZhCN = utils.isZhCN(location.pathname);
   return (
     <section className="page banner-wrapper">
       <ScrollElement
         className="page"
         id="banner"
-        onChange={({ mode }) => onEnterChange(mode)}
         playScale={0.9}
       >
         <QueueAnim className="banner-text-wrapper" type={typeFunc} delay={300} key="banner">
           <h2 key="h2">ANT <p>DESIGN</p></h2>
           <p key="content"><FormattedMessage id="app.home.slogan" /></p>
           <span className="line" key="line" />
-          <div key="button1" className="start-button clearfix">
-            <Link to={utils.getLocalizedPathname('/docs/spec/introduce', isZhCN)}>
-              <FormattedMessage id="app.home.introduce" />
-            </Link>
-            <Link to={utils.getLocalizedPathname('/docs/react/introduce', isZhCN)}>
-              <FormattedMessage id="app.home.start" />
-            </Link>
+          <div key="button1" className="start-button">
+            <Button type="primary" size="large">
+              <Link to={utils.getLocalizedPathname('/docs/spec/introduce', isZhCN)}>
+                <FormattedMessage id="app.home.introduce" />
+              </Link>
+            </Button>
+            <Button type="primary" ghost size="large">
+              <Link to={utils.getLocalizedPathname('/docs/react/introduce', isZhCN)}>
+                <FormattedMessage id="app.home.start" />
+              </Link>
+            </Button>
           </div>
           <GitHubButton
             key="github-button"

diff --git a/site/theme/template/Home/Page3.jsx b/site/theme/template/Home/Page3.jsx
@@ -20,7 +20,6 @@ export default function Page3({ location }) {
         className="text-wrapper"
         key="text"
         leaveReverse
-        style={{ top: '40%' }}
       >
         <h2 key="h2"><FormattedMessage id="app.home.reusable-components" /></h2>
         <p key="p" style={{ maxWidth: 280 }}><FormattedMessage id="app.home.components-intro" /></p>

diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx
@@ -9,89 +9,8 @@ import Page4 from './Page4';
 // To store style which is only for Home and has conflicts with others.
 function getStyle() {
   return `
-    html, body{
-      height: auto;
-    }
-    .page-wrapper {
-      background: #fff;
-    }
     .main-wrapper {
-      background: transparent;
-      width: auto;
-      margin: 0;
-      border-radius: 0;
       padding: 0;
-      min-height: 600px;
-    }
-    #header {
-      position: fixed;
-      width: 100%;
-      z-index: 999;
-      box-shadow: none;
-      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 .ant-select-selection,
-    #header .ant-menu {
-      background: transparent;
-    }
-    #header .ant-select-search__field {
-      color: #eee;
-    }
-    #header .ant-select-arrow {
-      color: #fff;
-    }
-    #header .ant-select-selection__placeholder {
-      color: rgba(255,255,255,0.57);
-    }
-    #header.home-nav-white .ant-select-search__field {
-      color: rgba(0, 0, 0, 0.65);
-    }
-    #header.home-nav-white .ant-select-selection__placeholder {
-      color: rgb(204, 204, 204);
-    }
-    #header.home-nav-white {
-      background: rgba(255, 255, 255, 0.91);
-      border-bottom-color: #ebedee;
-    }
-    .home-nav-white #search-box {
-      border-left-color: #ebedee;
-    }
-    .home-nav-white #nav a {
-      color: #314659;
-    }
-    #header.home-nav-white .version > .ant-select-selection {
-      color: rgba(0, 0, 0, 0.65);
-    }
-    #header.home-nav-white .version > .ant-select-selection:not(:hover) {
-      border-color: #d9d9d9;
-    }
-    #header.home-nav-white .version .ant-select-arrow {
-      color: rgba(0, 0, 0, 0.45);
-    }
-    .nav-phone-icon:before {
-      background: #eee;
-      box-shadow: 0 7px 0 0 #eee, 0 14px 0 0 #eee;
-    }
-    .home-nav-white .nav-phone-icon:before {
-      background: #777;
-      box-shadow: 0 7px 0 0 #777, 0 14px 0 0 #777;
-    }
-    .version > .ant-select-selection,
-    #nav a {
-      color: #eee;
-      transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-    }
-    #nav a.header-link {
-      color: #fff;
-    }
-    .home-nav-white #nav a.header-link {
-      color: #314659;
-    }
-    #search-box {
-      border-left-color: rgba(235, 237, 238, .5);
-      transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
     }
   `;
 }