feat(content): add advantage & footer

neko-dev · Sep 7, 2017 · d3c824a · d3c824a
1 parent 0c2dcad
commit d3c824a
Show file tree

Hide file tree

Showing 10 changed files with 256 additions and 2,247 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+PORT=3001
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+*.css linguist-language=JavaScript
+*.scss linguist-language=SCSS
diff --git a/README.md b/README.md
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon2.ico b/public/favicon2.ico
diff --git a/public/index.html b/public/index.html
@@ -9,9 +9,9 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="shortcut icon" type="image/ico" 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>
+    <title>Material Theme</title>
   </head>
   <body>
     <noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Material Theme",
+  "name": "Material Theme",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.css b/src/App.css
@@ -1,4 +1,5 @@
-body {
+body,
+p {
   margin: 0;
   padding: 0; }
 
@@ -14,23 +15,11 @@ 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, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; }
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"; }
 
 .clearfix::after {
   display: block;
@@ -45,22 +34,33 @@ a {
   padding-top: 40px;
   color: #1c1b1b;
   transition: .2s;
-  z-index: 99; }
+  z-index: 99;
+  font-family: "Lucida Grande"; }
+  @media screen and (min-width: 1000px) {
+    .App-header {
+      max-width: 700px;
+      padding-left: calc((100% - 700px) / 2);
+      padding-right: calc(((100% - 700px) / 2) - 0px); } }
   @media screen and (min-width: 1200px) {
     .App-header {
-      max-width: 900px;
-      padding-left: calc((100% - 900px) / 2);
-      padding-right: calc((100% - 900px) / 2); } }
-  @media screen and (min-width: 1440px) {
+      max-width: 850px;
+      padding-left: calc((100% - 850px) / 2);
+      padding-right: calc(((100% - 850px) / 2) - 0px); } }
+  @media screen and (min-width: 1400px) {
     .App-header {
-      max-width: 1100px;
-      padding-left: calc((100% - 1100px) / 2);
-      padding-right: calc((100% - 1100px) / 2); } }
-  @media screen and (min-width: 1920px) {
+      max-width: 1000px;
+      padding-left: calc((100% - 1000px) / 2);
+      padding-right: calc(((100% - 1000px) / 2) - 0px); } }
+  @media screen and (min-width: 1600px) {
+    .App-header {
+      max-width: 1150px;
+      padding-left: calc((100% - 1150px) / 2);
+      padding-right: calc(((100% - 1150px) / 2) - 0px); } }
+  @media screen and (min-width: 1800px) {
     .App-header {
       max-width: 1300px;
       padding-left: calc((100% - 1300px) / 2);
-      padding-right: calc((100% - 1300px) / 2); } }
+      padding-right: calc(((100% - 1300px) / 2) - 0px); } }
   .App-header.header-docked {
     padding-top: 0;
     background-color: #fff;
@@ -100,7 +100,9 @@ a {
         left: 0;
         right: 0;
         height: 2px;
+        background: #1c1b1b;
         -webkit-transform: scaleX(0);
+        -moz-transform: scaleX(0);
         transform: scaleX(0);
         transition: -webkit-transform 0.15s ease-in;
           transition-transform: .15s ease-in;
@@ -112,15 +114,38 @@ a {
         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: 300px;
   margin: 0 auto;
   padding-top: 210px; }
+  @media screen and (min-width: 1000px) {
+    .jumbotron {
+      max-width: 700px;
+      padding-left: calc((100% - 700px) / 2);
+      padding-right: calc(((100% - 700px) / 2) - 0px); } }
+  @media screen and (min-width: 1200px) {
+    .jumbotron {
+      max-width: 850px;
+      padding-left: calc((100% - 850px) / 2);
+      padding-right: calc(((100% - 850px) / 2) - 0px); } }
+  @media screen and (min-width: 1400px) {
+    .jumbotron {
+      max-width: 1000px;
+      padding-left: calc((100% - 1000px) / 2);
+      padding-right: calc(((100% - 1000px) / 2) - 0px); } }
+  @media screen and (min-width: 1600px) {
+    .jumbotron {
+      max-width: 1150px;
+      padding-left: calc((100% - 1150px) / 2);
+      padding-right: calc(((100% - 1150px) / 2) - 0px); } }
+  @media screen and (min-width: 1800px) {
+    .jumbotron {
+      max-width: 1300px;
+      padding-left: calc((100% - 1300px) / 2);
+      padding-right: calc(((100% - 1300px) / 2) - 0px); } }
   .jumbotron h1 {
     margin-bottom: 30px; }
     .jumbotron h1 span {
@@ -140,7 +165,9 @@ a {
       left: 0;
       right: 0;
       height: 2px;
+      background: #42c5d8;
       -webkit-transform: scaleX(0);
+      -moz-transform: scaleX(0);
       transform: scaleX(0);
       transition: -webkit-transform 0.15s ease-in;
         transition-transform: .15s ease-in;
@@ -152,8 +179,6 @@ a {
       transform: scale(1);
       -webkit-transform-origin: left center;
       transform-origin: left center; }
-    .jumbotron .download-link::after {
-      background: #42c5d8; }
 
 .presentation {
   width: 850px;
@@ -162,10 +187,89 @@ a {
 
 .main {
   height: 600px;
+  padding-top: 320px;
   margin-top: -160px;
   background-color: #fff; }
+  @media screen and (min-width: 1000px) {
+    .main {
+      max-width: 700px;
+      padding-left: calc((100% - 700px) / 2);
+      padding-right: calc(((100% - 700px) / 2) - 0px); } }
+  @media screen and (min-width: 1200px) {
+    .main {
+      max-width: 820px;
+      padding-left: calc((100% - 850px) / 2);
+      padding-right: calc(((100% - 850px) / 2) - 30px); } }
+  @media screen and (min-width: 1400px) {
+    .main {
+      max-width: 940px;
+      padding-left: calc((100% - 1000px) / 2);
+      padding-right: calc(((100% - 1000px) / 2) - 60px); } }
+  @media screen and (min-width: 1600px) {
+    .main {
+      max-width: 1060px;
+      padding-left: calc((100% - 1150px) / 2);
+      padding-right: calc(((100% - 1150px) / 2) - 90px); } }
+  @media screen and (min-width: 1800px) {
+    .main {
+      max-width: 1180px;
+      padding-left: calc((100% - 1300px) / 2);
+      padding-right: calc(((100% - 1300px) / 2) - 120px); } }
+  .main .advantage .item {
+    margin-bottom: 45px; }
+    .main .advantage .item h4 {
+      margin: 0;
+      margin-bottom: 15px; }
 
 .footer {
-  height: 500px;
+  padding-top: 116px;
+  padding-bottom: 135px;
   margin-top: 400px;
   background: linear-gradient(90deg, #1c1b1b 0, #1c1b1b 50%, transparent 0, transparent); }
+  @media screen and (min-width: 1000px) {
+    .footer {
+      max-width: 700px;
+      padding-left: calc((100% - 700px) / 2);
+      padding-right: calc(((100% - 700px) / 2) - 0px); } }
+  @media screen and (min-width: 1200px) {
+    .footer {
+      max-width: 850px;
+      padding-left: calc((100% - 850px) / 2);
+      padding-right: calc(((100% - 850px) / 2) - 0px); } }
+  @media screen and (min-width: 1400px) {
+    .footer {
+      max-width: 1000px;
+      padding-left: calc((100% - 1000px) / 2);
+      padding-right: calc(((100% - 1000px) / 2) - 0px); } }
+  @media screen and (min-width: 1600px) {
+    .footer {
+      max-width: 1150px;
+      padding-left: calc((100% - 1150px) / 2);
+      padding-right: calc(((100% - 1150px) / 2) - 0px); } }
+  @media screen and (min-width: 1800px) {
+    .footer {
+      max-width: 1300px;
+      padding-left: calc((100% - 1300px) / 2);
+      padding-right: calc(((100% - 1300px) / 2) - 0px); } }
+  .footer .footer-left {
+    color: #fff;
+    float: left;
+    margin-left: 80px; }
+    .footer .footer-left .logo {
+      height: 40px;
+      line-height: 40px;
+      font-size: 28px;
+      font-weight: 300;
+      margin-bottom: 116px;
+      font-family: "Lucida Grande"; }
+    .footer .footer-left .nav {
+      font-weight: 300;
+      color: rgba(255, 255, 255, 0.7);
+      margin-bottom: 116px; }
+      .footer .footer-left .nav li {
+        height: 24px;
+        line-height: 24px;
+        margin-bottom: 15px; }
+    .footer .footer-left .copyright {
+      font-weight: 300;
+      color: rgba(255, 255, 255, 0.4); }
diff --git a/src/App.js b/src/App.js
@@ -24,9 +24,9 @@ class App extends Component {
               <div className="slogan">Theme for everyone</div>
             </div>
             <ul className="navbar-right clearfix">
-              <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>
+              <li className="nav-item"><a href="https://blog.viosey.com" target="_black">Demo</a></li>
+              <li className="nav-item"><a href="#" target="_black">Docs</a></li>
+              <li className="nav-item"><a href="https://github.com/viosey/hexo-theme-material" target="_black">Github</a></li>
             </ul>
           </div>
         </div>
@@ -46,10 +46,40 @@ class App extends Component {
         </div>
 
         <div className="main">
+          <div className="advantage">
+            <div className="item">
+              <h4>优异的加载性能</h4>
+              <p>Pagespeed 得分 A (100%)，Yslow 得分 A (90±5%)</p>
+            </div>
+            <div className="item">
+              <h4>众多功能</h4>
+              <p>两款代码高亮，四款独立页面，主题自带 CDN，自定义背景与颜色风格</p>
+            </div>
+            <div className="item">
+              <h4>第三方服务</h4>
+              <p>三款网站统计服务 (Google Analytics, CNZZ, 百度统计)，六款评论系统 (Disqus, Gitment, Valine, 来必力, 友言, 畅言)</p>
+            </div>
+            <div className="item">
+              <h4>SEO</h4>
+              <p>专门设计的 Meta tag，结构化数据，OpenGraph，满足搜索引擎优化需要</p>
+            </div>
+            <div className="item">
+              <h4>多种语言支持</h4>
+              <p>感谢国际友人的贡献，Material 现已支持 10 种语言</p>
+            </div>
+          </div>
         </div>
 
-        <div className="footer">
-
+        <div className="footer clearfix">
+          <div className="footer-left">
+            <div className="logo">Material</div>
+            <ul className="nav">
+              <li>Feedback</li>
+              <li>Changelog</li>
+              <li>Team</li>
+            </ul>
+            <div className="copyright">© 2017 viosey</div>
+          </div>
         </div>
       </div>
     );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		*.css linguist-language=JavaScript
		*.scss linguist-language=SCSS