From fd6080a87bdd3e7afe38f020179042633dd16370 Mon Sep 17 00:00:00 2001
From: SukkaW <isukkaw@gmail.com>
Date: Sat, 2 Nov 2019 11:26:28 +0800
Subject: [PATCH] feat: add api section

---
 source/index.pug                           |  4 +--
 themes/navy/layout/index.swig              | 20 +++++++++++++++
 themes/navy/source/css/_partial/index.styl | 30 ++++++++++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/source/index.pug b/source/index.pug
index 5014c2ec0a..6280078d33 100644
--- a/source/index.pug
+++ b/source/index.pug
@@ -21,10 +21,10 @@ ul#intro-feature-list
       .intro-feature-icon
         i.fa.fa-cloud-upload
       h3.intro-feature-title One-Command Deployment
-      p.intro-feature-desc You only need one command to deploy your site to GitHub Pages, Heroku or other platforms.
+      p.intro-feature-desc You only need one command to deploy your site to GitHub Pages, Firebase Hosting, Heroku, Netlify, ZEIT or other platforms.
   li.intro-feature-wrap
     .intro-feature
       .intro-feature-icon
         i.fa.fa-cog
       h3.intro-feature-title Plugins
-      p.intro-feature-desc Features powerful APIs for limitless extensibility. Various plugins are available to support most template engines (EJS, Pug, Nunjucks, and many others). Easily integrate with existing NPM packages (Babel, PostCSS, Less/Sass, etc).
\ No newline at end of file
+      p.intro-feature-desc Various plugins are available to generate sitemap and RSS, insert player for music or video, intergrate search engine and support most template engines.
\ No newline at end of file
diff --git a/themes/navy/layout/index.swig b/themes/navy/layout/index.swig
index 8401d0c78e..c5d6a1f7c5 100644
--- a/themes/navy/layout/index.swig
+++ b/themes/navy/layout/index.swig
@@ -57,3 +57,23 @@
     </div>
   </div>
 </div>
+
+<div id="plugin-wrap">
+  <div class="wrapper">
+    <div class="inner plugin-wrapper">
+      <div class="plugin-thumbnail">
+        <div class="plugin-thumbnail-container">
+          <img src="/img/carbon.svg">
+        </div>
+      </div>
+      <div class="plugin-intro">
+        <div class="plugin-intro-container">
+          <h2 class="plugin-intro-title">Powerful API</h2>
+          <p class="plugin-intro-text">Features powerful APIs for limitless extensibility. Easily integrate with your existing toolchains (Babel, UglifyJS, PostCSS, HTMLMinifier and many others).</p>
+          <a href="/plugins/" class="plugin-link">Explore Plugins</a>
+          <a href="/plugins/" class="plugin-link">View API docs</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/themes/navy/source/css/_partial/index.styl b/themes/navy/source/css/_partial/index.styl
index b944ea363e..91b2a3d247 100644
--- a/themes/navy/source/css/_partial/index.styl
+++ b/themes/navy/source/css/_partial/index.styl
@@ -4,6 +4,7 @@
 
 #banner-title,
 .theme-intro-title
+.plugin-intro-title
   line-height: 1.15
   font-weight: 300
   font-family: font-title
@@ -17,6 +18,7 @@
     padding-top: 100px
 
 .theme-intro-title
+.plugin-intro-title
   margin-bottom: 24px
   padding-top: 24px
   @media mq-normal
@@ -156,6 +158,7 @@
 
 #intro-get-started-link
 #theme-link
+.plugin-link
   font-size: 18px
   font-family: font-title
   display: inline-block
@@ -180,6 +183,13 @@
     background: @border-color
     color: lighten(color-navy, 10%)
 
+.plugin-link
+  color: color-border
+  border-color: color-border
+  &:hover
+    background: @border-color
+    color: lighten(color-navy, 20%)
+
 #theme-wrap
   background: lighten(color-navy, 10%)
   border-top: 1px solid #161d24
@@ -191,7 +201,16 @@
   @media mq-normal
     padding: 96px 64px
 
+#plugin-wrap
+  background: lighten(color-navy, 20%)
+  padding: 32px
+  @media mq-tablet
+    padding: 64px 64px
+  @media mq-normal
+    padding: 96px 64px
+
 .theme-wrapper
+.plugin-wrapper
   display: flex
   flex-wrap: wrap
   color: rgba(255, 255, 255, 0.8)
@@ -202,21 +221,31 @@
     order: 0
     width: 50%
 
+.plugin-thumbnail
+  width: 100%
+  @media mq-normal
+    order: 2
+    width: 50%
+
 .theme-thumbnail-container
+.plugin-thumbnail-container
   margin-right: auto
   margin-left: auto
   width: 90%
 
 .theme-thumbnail img
+.plugin-thumbnail img
   max-width: 100%
   box-shadow: 6px 6px 12px 0 rgba(0,0,0,.4)
 
 .theme-intro
+.plugin-intro
   width: 100%
   @media mq-normal
     width: 50%
 
 .theme-intro-container
+.plugin-intro-container
   margin-right: auto
   margin-left: auto
   text-align: center
@@ -224,6 +253,7 @@
     width: 80%
 
 .theme-intro-text
+.plugin-intro-text
   color: rgba(255, 255, 255, 0.6)
   line-height: 1.5
   font-size: 16px