diff --git a/package.json b/package.json index e65650d..2c96401 100644 --- 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 index b98750d..a0751c2 100644 --- a/public/index.html +++ b/public/index.html @@ -10,6 +10,7 @@ --> + React App diff --git a/src/App.css b/src/App.css index cad48c5..05b6c65 100644 --- a/src/App.css +++ b/src/App.css @@ -7,12 +7,32 @@ 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; @@ -20,31 +40,46 @@ ul { 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,11 +90,70 @@ 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; @@ -67,6 +161,11 @@ ul { 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 index 715f39b..ba77b20 100644 --- 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 (
@@ -13,20 +24,31 @@ class App extends Component {
Theme for everyone
-
+
+

+ Nature, Pure + 原质，纯粹 +

+
+ Get Material Free +
+
+
+ +
diff --git a/src/App.scss b/src/App.scss index 8817539..0d289d1 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,3 +1,32 @@ +@mixin link-underline { + position: relative; + &::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 .15s ease-in { + transform: .15s ease-in; + transform: .15s ease-in,-webkit-transform .15s ease-in; + } + -webkit-transform-origin: right center; + transform-origin: right center; + } + + &:hover::after { + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transform-origin: left center; + transform-origin: left center; + } + +} + body { margin: 0; padding: 0; @@ -9,13 +38,37 @@ ul { padding: 0; } +h1 { + margin: 0; +} + +a { + color: inherit; + text-decoration: none; +} + +.responsive-width { + @media screen and (min-width: 1200px) { + max-width: 900px; + } + @media screen and (min-width: 1440px) { + max-width: 1100px; + } + @media screen and (min-width: 1920px) { + 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; @@ -23,18 +76,39 @@ ul { visibility:hidden; } -.App-header { +.App-header{ + width: 100%; + position: fixed; padding-top: 40px; - margin: 0 auto; color: #1c1b1b; + transition: .2s; + z-index: 99; + @extend .responsive-width; + @media screen and (min-width: 1200px) { max-width: 900px; + padding-left: calc((100% - 900px) / 2); + padding-right: calc((100% - 900px) / 2); } @media screen and (min-width: 1440px) { max-width: 1100px; + padding-left: calc((100% - 1100px) / 2); + padding-right: calc((100% - 1100px) / 2); } @media screen and (min-width: 1920px) { max-width: 1300px; + padding-left: calc((100% - 1300px) / 2); + padding-right: calc((100% - 1300px) / 2); + } + + &.header-docked { + padding-top: 0; + background-color: #fff; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10); + + .slogan { + display: none; + } } } @@ -42,9 +116,9 @@ ul { float: left; .logo { - height: 50px; - line-height: 50px; - padding-top: 10px; + height: 40px; + line-height: 40px; + padding-top: 20px; font-size: 24px; } @@ -52,7 +126,7 @@ ul { height: 20px; line-height: 20px; font-size: 14px; - font-weight: 100; + font-weight: 300; margin-top: -3px; } } @@ -66,6 +140,14 @@ ul { line-height: 80px; float: left; margin-left: 30px; + + a { + @include link-underline; + + &::after { + background: #1c1b1b; + } + } } .nav-item:first-child{ @@ -74,7 +156,33 @@ ul { } .jumbotron { - height: 400px; + height: 300px; + margin: 0 auto; + padding-top: 210px; + @extend .responsive-width; + + h1 { + margin-bottom: 30px; + + span { + display: block; + font: { + size: 46px; + weight: 100; + } + } + } + + .download-link { + color: #42c5d8; + font-size: 14px; + text-transform: uppercase; + @include link-underline; + + &::after { + background: #42c5d8; + } + } } .presentation { @@ -84,8 +192,13 @@ ul { } .main { - height: 500px; - background-color: #fff; + height: 600px; margin-top: -160px; + background-color: #fff; } +.footer { + height: 500px; + margin-top: 400px; + background: linear-gradient(90deg,#1c1b1b 0,#1c1b1b 50%,transparent 0,transparent); +} diff --git a/yarn.lock b/yarn.lock index 57b420c..cdcb182 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3655,6 +3655,10 @@ jest@20.0.4: dependencies: jest-cli "^20.0.4" +jquery@^3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787" + js-base64@^2.1.8, js-base64@^2.1.9: version "2.1.9" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"