feat(UI): improve jumbotron & some styles

neko-dev · Sep 6, 2017 · 0c2dcad · 0c2dcad
1 parent 35a75e7
commit 0c2dcad
Show file tree

Hide file tree

Showing 6 changed files with 270 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "jquery": "^3.2.1",
     "node-sass-chokidar": "^0.0.3",
     "react": "^15.6.1",
     "react-dom": "^15.6.1"

diff --git a/public/index.html b/public/index.html
@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700"rel="stylesheet">
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -7,44 +7,79 @@ ul {
   margin: 0;
   padding: 0; }
 
+h1 {
+  margin: 0; }
+
+a {
+  color: inherit;
+  text-decoration: none; }
+
+@media screen and (min-width: 1200px) {
+  .responsive-width, .App-header, .jumbotron {
+    max-width: 900px; } }
+
+@media screen and (min-width: 1440px) {
+  .responsive-width, .App-header, .jumbotron {
+    max-width: 1100px; } }
+
+@media screen and (min-width: 1920px) {
+  .responsive-width, .App-header, .jumbotron {
+    max-width: 1300px; } }
+
 .App {
+  color: #303D49;
   background: #f8f8f9;
   min-height: 100vh;
-  font-family: Roboto; }
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; }
 
-.clearfix:after {
+.clearfix::after {
   display: block;
   content: ".";
   clear: both;
   line-height: 0;
   visibility: hidden; }
 
 .App-header {
+  width: 100%;
+  position: fixed;
   padding-top: 40px;
-  margin: 0 auto;
-  color: #1c1b1b; }
+  color: #1c1b1b;
+  transition: .2s;
+  z-index: 99; }
   @media screen and (min-width: 1200px) {
     .App-header {
-      max-width: 900px; } }
+      max-width: 900px;
+      padding-left: calc((100% - 900px) / 2);
+      padding-right: calc((100% - 900px) / 2); } }
   @media screen and (min-width: 1440px) {
     .App-header {
-      max-width: 1100px; } }
+      max-width: 1100px;
+      padding-left: calc((100% - 1100px) / 2);
+      padding-right: calc((100% - 1100px) / 2); } }
   @media screen and (min-width: 1920px) {
     .App-header {
-      max-width: 1300px; } }
+      max-width: 1300px;
+      padding-left: calc((100% - 1300px) / 2);
+      padding-right: calc((100% - 1300px) / 2); } }
+  .App-header.header-docked {
+    padding-top: 0;
+    background-color: #fff;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
+    .App-header.header-docked .slogan {
+      display: none; }
 
 .navbar-brand {
   float: left; }
   .navbar-brand .logo {
-    height: 50px;
-    line-height: 50px;
-    padding-top: 10px;
+    height: 40px;
+    line-height: 40px;
+    padding-top: 20px;
     font-size: 24px; }
   .navbar-brand .slogan {
     height: 20px;
     line-height: 20px;
     font-size: 14px;
-    font-weight: 100;
+    font-weight: 300;
     margin-top: -3px; }
 
 .navbar-right {
@@ -55,18 +90,82 @@ ul {
     line-height: 80px;
     float: left;
     margin-left: 30px; }
+    .navbar-right .nav-item a {
+      position: relative; }
+      .navbar-right .nav-item a::after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: calc(100% + 8px);
+        left: 0;
+        right: 0;
+        height: 2px;
+        -webkit-transform: scaleX(0);
+        transform: scaleX(0);
+        transition: -webkit-transform 0.15s ease-in;
+          transition-transform: .15s ease-in;
+          transition-transform: .15s ease-in,-webkit-transform .15s ease-in;
+        -webkit-transform-origin: right center;
+        transform-origin: right center; }
+      .navbar-right .nav-item a:hover::after {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        -webkit-transform-origin: left center;
+        transform-origin: left center; }
+      .navbar-right .nav-item a::after {
+        background: #1c1b1b; }
   .navbar-right .nav-item:first-child {
     margin-left: 0; }
 
 .jumbotron {
-  height: 400px; }
+  height: 300px;
+  margin: 0 auto;
+  padding-top: 210px; }
+  .jumbotron h1 {
+    margin-bottom: 30px; }
+    .jumbotron h1 span {
+      display: block;
+      font-size: 46px;
+      font-weight: 100; }
+  .jumbotron .download-link {
+    color: #42c5d8;
+    font-size: 14px;
+    text-transform: uppercase;
+    position: relative; }
+    .jumbotron .download-link::after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: calc(100% + 8px);
+      left: 0;
+      right: 0;
+      height: 2px;
+      -webkit-transform: scaleX(0);
+      transform: scaleX(0);
+      transition: -webkit-transform 0.15s ease-in;
+        transition-transform: .15s ease-in;
+        transition-transform: .15s ease-in,-webkit-transform .15s ease-in;
+      -webkit-transform-origin: right center;
+      transform-origin: right center; }
+    .jumbotron .download-link:hover::after {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+      -webkit-transform-origin: left center;
+      transform-origin: left center; }
+    .jumbotron .download-link::after {
+      background: #42c5d8; }
 
 .presentation {
   width: 850px;
   height: 525px;
   margin: 0 auto; }
 
 .main {
+  height: 600px;
+  margin-top: -160px;
+  background-color: #fff; }
+
+.footer {
   height: 500px;
-  background-color: #fff;
-  margin-top: -160px; }
+  margin-top: 400px;
+  background: linear-gradient(90deg, #1c1b1b 0, #1c1b1b 50%, transparent 0, transparent); }
diff --git a/src/App.js b/src/App.js
@@ -1,8 +1,19 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import $ from 'jquery';
 import './App.css';
 
+
 class App extends Component {
+  componentDidMount() {
+    $(window).scroll(function (event) {
+      var scroll = $(window).scrollTop();
+      if (scroll > 40) {
+        $('.App-header').addClass('header-docked');
+      } else {
+        $('.App-header').removeClass('header-docked');
+      }
+    });
+  }
   render() {
     return (
       <div className="App">
@@ -13,20 +24,31 @@ class App extends Component {
               <div className="slogan">Theme for everyone</div>
             </div>
             <ul className="navbar-right clearfix">
-              <li className="nav-item">Demo</li>
-              <li className="nav-item">Docs</li>
-              <li className="nav-item">Github</li>
+              <li className="nav-item"><a href="#">Demo</a></li>
+              <li className="nav-item"><a href="#">Docs</a></li>
+              <li className="nav-item"><a href="#">Github</a></li>
             </ul>
           </div>
         </div>
 
-        <div className="jumbotron"></div>
+        <div className="jumbotron">
+          <h1>
+            <span>Nature, Pure</span>
+            <span>原质，纯粹</span>
+          </h1>
+          <div>
+            <a href="#" className="download-link">Get Material Free</a>
+          </div>
+        </div>
 
         <div className="presentation">
           <img src={require('./img/render_phone.png')} />
         </div>
 
         <div className="main">
+        </div>
+
+        <div className="footer">
 
         </div>
       </div>