You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2017/10/14 10:51:41 UTC
incubator-weex-site git commit: update landing page styles
Repository: incubator-weex-site
Updated Branches:
refs/heads/master 12e3a8bcd -> a11dfa464
update landing page styles
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/a11dfa46
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/a11dfa46
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/a11dfa46
Branch: refs/heads/master
Commit: a11dfa464163b3f416e41ad56f6827e6aa8c56dc
Parents: 12e3a8b
Author: Hanks <zh...@gmail.com>
Authored: Sat Oct 14 18:51:16 2017 +0800
Committer: Hanks <zh...@gmail.com>
Committed: Sat Oct 14 18:51:16 2017 +0800
----------------------------------------------------------------------
_drafts/get-started.md | 67 ++++++++++++
source/cn/wiki/design-principle.md | 8 --
source/cn/wiki/design-principles.md | 8 ++
source/guide/images/native-component.png | Bin 0 -> 82080 bytes
source/guide/images/tut-cli-qrcode.png | Bin 45480 -> 0 bytes
source/guide/images/tut-first.png | Bin 51434 -> 0 bytes
source/guide/images/tut-second.png | Bin 78519 -> 0 bytes
source/guide/images/tut1.jpg | Bin 47442 -> 0 bytes
source/guide/images/tut2.jpg | Bin 52428 -> 0 bytes
source/guide/images/tut3.png | Bin 52198 -> 0 bytes
source/guide/images/tut4.gif | Bin 218245 -> 0 bytes
source/guide/images/vue-rax.png | Bin 0 -> 120960 bytes
source/guide/images/weex-example-yo.png | Bin 0 -> 200510 bytes
source/guide/index.md | 115 ++++++++++++++-------
source/wiki/design-principle.md | 7 --
source/wiki/design-principles.md | 7 ++
themes/weex/layout/_partial/article.ejs | 4 +-
themes/weex/layout/_partial/footer.ejs | 1 +
themes/weex/layout/_partial/header.ejs | 2 +-
themes/weex/layout/_partial/post/nav.ejs | 2 +-
themes/weex/layout/_partial/post/summary.ejs | 7 --
themes/weex/layout/layout.ejs | 5 +-
themes/weex/layout/page.ejs | 20 +++-
themes/weex/source/css/common.scss | 15 ++-
themes/weex/source/css/media-queries.scss | 13 ++-
themes/weex/source/css/partial/article.scss | 31 ++++--
themes/weex/source/css/partial/header.scss | 4 +-
themes/weex/source/css/partial/highlight.scss | 3 +-
themes/weex/source/css/partial/summary.scss | 2 +-
themes/weex/source/css/post.scss | 17 +--
themes/weex/source/css/variable.scss | 1 +
31 files changed, 234 insertions(+), 105 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/_drafts/get-started.md
----------------------------------------------------------------------
diff --git a/_drafts/get-started.md b/_drafts/get-started.md
new file mode 100644
index 0000000..98d8060
--- /dev/null
+++ b/_drafts/get-started.md
@@ -0,0 +1,67 @@
+---
+title: Get Started
+type: guide
+group: Overview
+order: 1.1
+version: 2.1
+has_chapter_content: true
+---
+
+# Get Started
+
+Weex is a framework for building Mobile cross-platform high performance UI applications. Developers can leverage their existing knowledge of VueJS (a powerful JavaScript view library), by writing `*.vue` files to build native applications or pages. This page will help you to write a **Weex** application in 2 minutes.
+
+## Introduction to VueJS
+
+>[VueJS](https://vuejs.org/) (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
+
+**VueJS is developed by [Evan You](https://twitter.com/youyuxi).**
+
+Weex now fully supports VueJS 2.x officailly. Weex put Vue 2.x as its built-in JS Framework, making it powerful for building native apps!.
+
+## Hello world Example
+
+The easiest way to try Weex is to use the [Playground App](../playground.html) to write a [Hello World](http://dotwe.org/vue/4d5a0471ece3daabd4681bc6d703c4c1) example at [dotWe](http://dotwe.org). No installation is required and you do not even have to write native code.
+
+To test Weex online using our Playground App:
+
+- Install the [Playground App](../playground.html) on your phone.
+- Open [the Hello World example](http://dotwe.org/vue/4d5a0471ece3daabd4681bc6d703c4c1) in a new tab, click run, and then use the Playground App to scan the QR code.
+
+Nailed it!
+
+If you took the procedure above, you can see simple HTML semantic tags, CSS styles and Javascript code. This is one of the simplest Weex examples. The demo applications renders a "Hello World" in the page. Please note that this is not a Web page. You are running native!.
+
+
+
+### What happened?
+
+As shown in the following code：
+
+```html
+<template>
+ <div>
+ <text class="text">{{text}}</text>
+ </div>
+</template>
+
+<style>
+ .text {
+ font-size: 50;
+ }
+</style>
+
+<script>
+ export default {
+ data () {
+ return {
+ text: 'Hello World.'
+ }
+ }
+ }
+</script>
+```
+
+It's too easy，right? Take a look at the syntax, that is vue.
+
+You can try to modify the Hello World example if you have previous knowledge of building VueJS examples, then generate a new QR code to scan. If you don't have previous knowledge of VueJS, don't worry, this guide will teach you just that. Moreover, you can always learn from the [VueJS Guide](https://vuejs.org/v2/guide).
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/cn/wiki/design-principle.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/design-principle.md b/source/cn/wiki/design-principle.md
deleted file mode 100644
index c72ba3a..0000000
--- a/source/cn/wiki/design-principle.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: 设计理念
-type: wiki
-group: Design
-order: 1.4
-has_chapter_content: false
-version: 2.1
----
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/cn/wiki/design-principles.md
----------------------------------------------------------------------
diff --git a/source/cn/wiki/design-principles.md b/source/cn/wiki/design-principles.md
new file mode 100644
index 0000000..c72ba3a
--- /dev/null
+++ b/source/cn/wiki/design-principles.md
@@ -0,0 +1,8 @@
+---
+title: 设计理念
+type: wiki
+group: Design
+order: 1.4
+has_chapter_content: false
+version: 2.1
+---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/guide/images/native-component.png
----------------------------------------------------------------------
diff --git a/source/guide/images/native-component.png b/source/guide/images/native-component.png
new file mode 100644
index 0000000..9dd5550
Binary files /dev/null and b/source/guide/images/native-component.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/guide/images/tut-cli-qrcode.png
----------------------------------------------------------------------
diff --git a/source/guide/images/tut-cli-qrcode.png b/source/guide/images/tut-cli-qrcode.png
deleted file mode 100644
index 9068c14..0000000
Binary files a/source/guide/images/tut-cli-qrcode.png and /dev/null differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/guide/images/tut-first.png
----------------------------------------------------------------------
diff --git a/source/guide/images/tut-first.png b/source/guide/images/tut-first.png
deleted file mode 100755
index c8505e6..0000000
Binary files a/source/guide/images/tut-first.png and /dev/null differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/guide/images/tut-second.png
----------------------------------------------------------------------
diff --git a/source/guide/images/tut-second.png b/source/guide/images/tut-second.png
deleted file mode 100755
index 1259abf..0000000
Binary files a/source/guide/images/tut-second.png and /dev/null differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/guide/images/tut1.jpg
----------------------------------------------------------------------
diff --git a/source/guide/images/tut1.jpg b/source/guide/images/tut1.jpg
deleted file mode 100644
index 8af0f3f..0000000
Binary files a/source/guide/images/tut1.jpg and /dev/null differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/guide/images/tut2.jpg
----------------------------------------------------------------------
diff --git a/source/guide/images/tut2.jpg b/source/guide/images/tut2.jpg
deleted file mode 100644
index c3e8a6e..0000000
Binary files a/source/guide/images/tut2.jpg and /dev/null differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/guide/images/tut3.png
----------------------------------------------------------------------
diff --git a/source/guide/images/tut3.png b/source/guide/images/tut3.png
deleted file mode 100644
index 5473905..0000000
Binary files a/source/guide/images/tut3.png and /dev/null differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/guide/images/tut4.gif
----------------------------------------------------------------------
diff --git a/source/guide/images/tut4.gif b/source/guide/images/tut4.gif
deleted file mode 100644
index eed4395..0000000
Binary files a/source/guide/images/tut4.gif and /dev/null differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/guide/images/vue-rax.png
----------------------------------------------------------------------
diff --git a/source/guide/images/vue-rax.png b/source/guide/images/vue-rax.png
new file mode 100644
index 0000000..1e6e57e
Binary files /dev/null and b/source/guide/images/vue-rax.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/guide/images/weex-example-yo.png
----------------------------------------------------------------------
diff --git a/source/guide/images/weex-example-yo.png b/source/guide/images/weex-example-yo.png
new file mode 100644
index 0000000..81e78c1
Binary files /dev/null and b/source/guide/images/weex-example-yo.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/guide/index.md
----------------------------------------------------------------------
diff --git a/source/guide/index.md b/source/guide/index.md
index 98d8060..e36234b 100644
--- a/source/guide/index.md
+++ b/source/guide/index.md
@@ -4,64 +4,101 @@ type: guide
group: Overview
order: 1.1
version: 2.1
-has_chapter_content: true
---
-# Get Started
+## What is Weex?
-Weex is a framework for building Mobile cross-platform high performance UI applications. Developers can leverage their existing knowledge of VueJS (a powerful JavaScript view library), by writing `*.vue` files to build native applications or pages. This page will help you to write a **Weex** application in 2 minutes.
+> Weex is A framework for building Mobile cross-platform UIs.
-## Introduction to VueJS
+Weex enables developers to use web development experience to build both Android, iOS and web apps with a single codebase.
->[VueJS](https://vuejs.org/) (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
+## Overview
-**VueJS is developed by [Evan You](https://twitter.com/youyuxi).**
+Here is an example writing in Weex and Vue.js:
-Weex now fully supports VueJS 2.x officailly. Weex put Vue 2.x as its built-in JS Framework, making it powerful for building native apps!.
+
-## Hello world Example
+This example is written in Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) syntax. Vue.js 2.0
-The easiest way to try Weex is to use the [Playground App](../playground.html) to write a [Hello World](http://dotwe.org/vue/4d5a0471ece3daabd4681bc6d703c4c1) example at [dotWe](http://dotwe.org). No installation is required and you do not even have to write native code.
+You can see and edit this example at [Weex online playground](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380). Use the [Weex playground app]() to scan the QR code on the right you will see the result rendered on your own phone.
-To test Weex online using our Playground App:
+### Native Component
-- Install the [Playground App](../playground.html) on your phone.
-- Open [the Hello World example](http://dotwe.org/vue/4d5a0471ece3daabd4681bc6d703c4c1) in a new tab, click run, and then use the Playground App to scan the QR code.
+
-Nailed it!
+In this example, the `<div>` and the `<text>` is rendered into corresponding native components.
-If you took the procedure above, you can see simple HTML semantic tags, CSS styles and Javascript code. This is one of the simplest Weex examples. The demo applications renders a "Hello World" in the page. Please note that this is not a Web page. You are running native!.
+### Write Once, Run Everywhere
-
+You can read *[How it works](../wiki/index.html)* and *[Design Principles](../wiki/design-principles.html)* to know more about the technologies and ideas behind Weex.
-### What happened?
+### More Examples
-As shown in the following code：
+## Support Multiple Front-End Frameworks
-```html
-<template>
- <div>
- <text class="text">{{text}}</text>
- </div>
-</template>
+Vue.js 2.0 and Rax
-<style>
- .text {
- font-size: 50;
- }
-</style>
+
-<script>
- export default {
- data () {
- return {
- text: 'Hello World.'
- }
- }
- }
-</script>
+~~You can call it *"Weex VR"*, but it has nothing with the *Virtual Reality*.~~
+
+Those frameworks are packaged into Weex SDK, you don't need to require them manually. upgrade.
+
+Weex isn't binding with any specific front-end frameworks, the DOM operations will convert into render directives send to native render engine. Weex can give the ability of rendering native components to them.
+
+## Create Your Own App
+
+Weex offered a command line tool, [weex-toolkit](), to help developers to get start easily.
+
+### Setup
+
+Make sure you have already installed the [Node.js](https://nodejs.org/), and then install the `weex-toolkit` globally.
+
+```bash
+npm install weex-toolkit -g
+```
+
+It will add a `weex` command to your global path, run `weex --help` can see the manual of all its sub commands. The most useful command is `weex create [project-name]`:
+
+```bash
+weex create awesome-app
+```
+
+After doing that, you'll get a standard **Weex + Vue.js** project under the `awesome-app` folder.
+
+> Currently, the `weex-toolkit` only supports to create Vue.js project. If you want to use Rax, the `rax-cli` maybe helpful, please go to [Rax's official website](https://alibaba.github.io/rax/) for more details.
+
+### Develop
+
+
+```bash
+cd awesome-app
+npm install
+npm run start
+```
+
+It will start a web server on the `8080` port. You can open `http://localhost:8080/index.html` to see the result rendered on the web. Besides, You can also open the `http://localhost:8080/preview.html` to preview the web render result in iframe and with a QR code generated on the right, which you can use the [Weex plaground app]() to scan it to see the render result on the mobile.
+
+![Preview]()
+
+### Build and Run
+
+```bash
+weex platform add ios
+weex platform add android
+```
+
+```bash
+weex run ios
+weex run android
+```
+
+### Debug
+
+```bash
+weex debug
```
-It's too easy，right? Take a look at the syntax, that is vue.
+## Next Steps
-You can try to modify the Hello World example if you have previous knowledge of building VueJS examples, then generate a new QR code to scan. If you don't have previous knowledge of VueJS, don't worry, this guide will teach you just that. Moreover, you can always learn from the [VueJS Guide](https://vuejs.org/v2/guide).
+(read other documents)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/wiki/design-principle.md
----------------------------------------------------------------------
diff --git a/source/wiki/design-principle.md b/source/wiki/design-principle.md
deleted file mode 100644
index e2e9dab..0000000
--- a/source/wiki/design-principle.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Design Principle
-type: wiki
-group: Design
-order: 1.4
-version: 2.1
----
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/source/wiki/design-principles.md
----------------------------------------------------------------------
diff --git a/source/wiki/design-principles.md b/source/wiki/design-principles.md
new file mode 100644
index 0000000..b223c34
--- /dev/null
+++ b/source/wiki/design-principles.md
@@ -0,0 +1,7 @@
+---
+title: Design Principles
+type: wiki
+group: Design
+order: 1.4
+version: 2.1
+---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/layout/_partial/article.ejs
----------------------------------------------------------------------
diff --git a/themes/weex/layout/_partial/article.ejs b/themes/weex/layout/_partial/article.ejs
index 9ab4340..e0dbcbf 100644
--- a/themes/weex/layout/_partial/article.ejs
+++ b/themes/weex/layout/_partial/article.ejs
@@ -6,12 +6,14 @@
<%- page_anchor(post.content) %>
<div class="article-tips">
<p class="tips-text">
+ <a class="xx" href="">Rank this page</a>
+ <span class="spliter"> | </span>
<a class="xx" href="">Edit this page on GitHub.</a>
</p>
</div>
</div>
<% if (page_type === 'article') { %>
- <%- partial('_partial/post/nav') %>
+ <%- partial('_partial/post/nav') %>
<% } %>
<%- partial('_partial/footer') %>
</article>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/layout/_partial/footer.ejs
----------------------------------------------------------------------
diff --git a/themes/weex/layout/_partial/footer.ejs b/themes/weex/layout/_partial/footer.ejs
index 093db9d..1ea1ef1 100644
--- a/themes/weex/layout/_partial/footer.ejs
+++ b/themes/weex/layout/_partial/footer.ejs
@@ -13,4 +13,5 @@
<a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>
</p>
</div>
+ <%- partial('_partial/after-footer') %>
</footer>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/layout/_partial/header.ejs
----------------------------------------------------------------------
diff --git a/themes/weex/layout/_partial/header.ejs b/themes/weex/layout/_partial/header.ejs
index 5087677..47bb730 100644
--- a/themes/weex/layout/_partial/header.ejs
+++ b/themes/weex/layout/_partial/header.ejs
@@ -17,7 +17,7 @@
<li class="<%= page.path.match(/\/?tools\/?/i) ? 'current': '' %>">
<a href="<%= url_for_lang('tools') %>"><%= _p('menu.tools') %></a>
</li>
- <li class="dropdown">
+ <li class="dropdown <%= page.path.match(/\/?community\/?/i) ? 'current': '' %>">
<a href="javascript:;"><%= _p('menu.community') %></a>
<ul class="dropdown-menu subnav">
<li>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/layout/_partial/post/nav.ejs
----------------------------------------------------------------------
diff --git a/themes/weex/layout/_partial/post/nav.ejs b/themes/weex/layout/_partial/post/nav.ejs
index bc0f773..2000915 100644
--- a/themes/weex/layout/_partial/post/nav.ejs
+++ b/themes/weex/layout/_partial/post/nav.ejs
@@ -5,4 +5,4 @@
<a href="<%- post.next ? url_for(post.next.path) : '' %>" id="article-nav-older" class="article-nav-link <%- post.next ? 'enable' : 'disable' %>">
Next
</a>
-</nav>
\ No newline at end of file
+</nav>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/layout/_partial/post/summary.ejs
----------------------------------------------------------------------
diff --git a/themes/weex/layout/_partial/post/summary.ejs b/themes/weex/layout/_partial/post/summary.ejs
index a9853c6..a3b4744 100644
--- a/themes/weex/layout/_partial/post/summary.ejs
+++ b/themes/weex/layout/_partial/post/summary.ejs
@@ -30,12 +30,5 @@
<% } %>
</li>
<% }) %>
-
</ul>
</div>
-<div class="sponsor">
- <a class="sponsor-poster" target="_blank" href="https://render.alipay.com/p/s/taobaonpm_click/weex_banner_click">
- <img src="https://render.alipay.com/p/s/taobaonpm_click/weex_banner" alt="" width="180px">
- </a>
- <div class="sponsor-title">本站点由阿里云赞助支持</div>
-</div>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/layout/layout.ejs
----------------------------------------------------------------------
diff --git a/themes/weex/layout/layout.ejs b/themes/weex/layout/layout.ejs
index 17ba619..d5774d1 100644
--- a/themes/weex/layout/layout.ejs
+++ b/themes/weex/layout/layout.ejs
@@ -42,10 +42,7 @@
</script>
<%- partial('_partial/header') %>
<%- partial('_partial/sidebar', {post: page, page_type: page_type}) %>
- <div class="main-content">
- <%- body %>
- <%- partial('_partial/after-footer') %>
- </div>
+ <%- body %>
<%- js('js/reqwest.js') %>
<%- js('js/common.js') %>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/layout/page.ejs
----------------------------------------------------------------------
diff --git a/themes/weex/layout/page.ejs b/themes/weex/layout/page.ejs
index c1cae73..1905758 100644
--- a/themes/weex/layout/page.ejs
+++ b/themes/weex/layout/page.ejs
@@ -1,6 +1,18 @@
-<div class="article-wrapper page-layout">
- <div class="doc-nav">
- <%- partial('_partial/post/summary', {post: page, index: false, type: page.type ? page.type : ''}) %>
+<% var layout_type = page.has_chapter_content === false ? 'no-chapter' : 'with-chapter' %>
+
+<div class="main-content">
+ <div class="article-wrapper page-layout <%= layout_type %>">
+ <% if (page.has_chapter_content !== false) { %>
+ <div class="doc-nav">
+ <%- partial('_partial/post/summary', {post: page, index: false, type: page.type ? page.type : ''}) %>
+ <div class="sponsor">
+ <a class="sponsor-poster" target="_blank" href="https://render.alipay.com/p/s/taobaonpm_click/weex_banner_click">
+ <img src="https://render.alipay.com/p/s/taobaonpm_click/weex_banner" alt="" width="180px">
+ </a>
+ <div class="sponsor-title">本站点由阿里云赞助支持</div>
+ </div>
+ </div>
+ <% } %>
+ <%- partial('_partial/article', {post: page, index: false}) %>
</div>
- <%- partial('_partial/article', {post: page, index: false}) %>
</div>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/source/css/common.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/common.scss b/themes/weex/source/css/common.scss
index 5c29ef2..c9c2cb8 100644
--- a/themes/weex/source/css/common.scss
+++ b/themes/weex/source/css/common.scss
@@ -77,7 +77,7 @@ img {
p {
font-weight: normal;
- margin: 0 0 1.2em;
+ margin: 0 0 1.4em;
}
h1, h2, h3, h4, h5, h6 {
@@ -92,10 +92,17 @@ h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
blockquote {
- margin: 0;
- padding: 1em 0 1px 20px;
- border-left: 5px solid #ddd;
+ margin: 1.3em;
+ margin-left: 0;
+ padding: 1em;
+ border-left: 5px solid #C6C6C6;
+ background-color: #F6F6F6;
+
+ p {
+ margin: 0;
+ }
}
+
/***********************
* Common style
***********************/
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/source/css/media-queries.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/media-queries.scss b/themes/weex/source/css/media-queries.scss
index e9bd9a9..d223fbb 100644
--- a/themes/weex/source/css/media-queries.scss
+++ b/themes/weex/source/css/media-queries.scss
@@ -1,7 +1,7 @@
@import "variable.scss";
-@media screen and (max-width: 1100px) {
+@media screen and (max-width: 1080px) {
#header {
padding: 0 30px;
@@ -14,16 +14,16 @@
.main-nav {
li > a {
- font-size: 1.16em;
+ font-size: 1.1em;
padding: 0 12px;
}
}
}
- .article-wrapper {
- .doc-nav {
- // padding:
+ .article {
+ .article-entry {
+ margin: 40px 0 20px 20px;
}
}
}
@@ -145,6 +145,9 @@
.article-entry {
margin: 10px;
padding: 5px;
+ img {
+ max-width: 100%;
+ }
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/source/css/partial/article.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/partial/article.scss b/themes/weex/source/css/partial/article.scss
index 5f8b6a7..9845d05 100644
--- a/themes/weex/source/css/partial/article.scss
+++ b/themes/weex/source/css/partial/article.scss
@@ -4,7 +4,7 @@
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid $border-light;
- margin-bottom: 3.5em;
+ margin-bottom: 30px;
h1 {
font-size: 2em;
@@ -27,12 +27,21 @@
}
}
+.no-chapter {
+ .article {
+ .article-entry {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ }
+}
+
.article {
display: flex;
flex: 1;
flex-direction: column;
position: relative;
- line-height: 1.6;
+ line-height: 1.45;
overflow-y: auto;
color: $text-dark;
@@ -42,10 +51,20 @@
.article-entry {
flex: 1;
- max-width: 800px;
- margin-top: 50px;
- margin-left: 40px;
- margin-bottom: 60px;
+ max-width: 720px;
+ margin: 40px 0 20px 40px;
+ padding: 0 1.4em;
+
+ > h1 {
+ display: none;
+ }
+
+ img {
+ display: block;
+ max-width: 95%;
+ margin: 20px auto;
+ }
+
}
h2 {
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/source/css/partial/header.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/partial/header.scss b/themes/weex/source/css/partial/header.scss
index 07e87ba..1e8d81a 100644
--- a/themes/weex/source/css/partial/header.scss
+++ b/themes/weex/source/css/partial/header.scss
@@ -9,7 +9,7 @@ $menu-active-bg: #EEE;
padding: 0 40px;
position: absolute;
background-color: $header-bg;
- box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.05);
top: 0;
left: 0;
right: 0;
@@ -68,7 +68,7 @@ $menu-active-bg: #EEE;
li > a {
display: block;
height: 100%;
- font-size: 1.2em;
+ font-size: 1.16em;
color: $text-light-black;
padding: 0 16px;
}
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/source/css/partial/highlight.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/partial/highlight.scss b/themes/weex/source/css/partial/highlight.scss
index 3fa65c2..aea8cd0 100644
--- a/themes/weex/source/css/partial/highlight.scss
+++ b/themes/weex/source/css/partial/highlight.scss
@@ -1,10 +1,11 @@
code {
// color: #c7254e;
font-family: "Source Code Pro", Consolas, "Liberation Mono", Menlo, Courier, monospace;
- background: rgba(27, 31, 35, 0.08);
+ background: rgba(134, 146, 158, 0.08);
padding: 0 5px;
border-radius: 4px;
font-size: 0.9em;
+ color: #c97fd2;
}
pre {
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/source/css/partial/summary.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/partial/summary.scss b/themes/weex/source/css/partial/summary.scss
index ec1b6d9..422971d 100644
--- a/themes/weex/source/css/partial/summary.scss
+++ b/themes/weex/source/css/partial/summary.scss
@@ -39,7 +39,7 @@
.doc-summary {
& > li {
- margin-bottom: 20px;
+ margin-bottom: 30px;
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/source/css/post.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/post.scss b/themes/weex/source/css/post.scss
index d98f21a..11dbb4d 100644
--- a/themes/weex/source/css/post.scss
+++ b/themes/weex/source/css/post.scss
@@ -29,17 +29,6 @@ body {
max-width: 850px;
}
- // &.page-layout {
- // max-width: 1400px;
- // }
-
- .article-entry {
- padding: 0 1.2em;
-
- > h1 {
- display: none;
- }
- }
.article-heading {
color: $text-black;
}
@@ -67,10 +56,10 @@ body {
.doc-nav {
padding-top: 50px;
- background: $bg-white;
- width: 22%;
+ background: $bg-super-light;
+ width: 23%;
max-width: 450px;
- min-width: 260px;
+ min-width: 250px;
display: flex;
flex-direction: column;
align-items: center;
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/a11dfa46/themes/weex/source/css/variable.scss
----------------------------------------------------------------------
diff --git a/themes/weex/source/css/variable.scss b/themes/weex/source/css/variable.scss
index db47711..f1eaea2 100644
--- a/themes/weex/source/css/variable.scss
+++ b/themes/weex/source/css/variable.scss
@@ -12,6 +12,7 @@ $text-blue: #1FB5FC;
$bg-blue: $text-blue;
$bg-light-blue: #23CEFD;
$bg-white: #fff;
+$bg-super-light: #FDFDFD;
$bg-gray: #fafafa;
$border-light: #ddd;
$border-blue: $text-blue;