From 00253d31483eac45a9cad367659b1f199530f9ff Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Sun, 1 Jan 2017 12:01:01 +0800
Subject: [PATCH] Tweak style

---
 CHANGELOG.md                    |  4 ++++
 src/render.js                   |  2 +-
 src/themes/basic/_coverpage.css |  6 +++++-
 src/themes/basic/_layout.css    | 22 ++++++++++++++++++----
 src/themes/buble.css            |  4 +---
 src/themes/pure.css             |  1 +
 src/themes/vue.css              |  2 +-
 src/tpl.js                      | 12 ++++++------
 8 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd787c63..57f92128 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 1.4.3
+### Bug fixes
+- Tweak style.
+
 ## 1.4.2
 
 ### Bug fixes
diff --git a/src/render.js b/src/render.js
index 13d1fd1c..f0168e8b 100644
--- a/src/render.js
+++ b/src/render.js
@@ -30,7 +30,7 @@ renderer.heading = function (text, level) {
 
   toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })
 
-  return `<a href="${route}#${slug}" data-id="${slug}" class="anchor"><h${level} id="${slug}">${text}</h${level}></a>`
+  return `<h${level} id="${slug}"><a href="${route}#${slug}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
 }
 // highlight code
 renderer.code = function (code, lang = '') {
diff --git a/src/themes/basic/_coverpage.css b/src/themes/basic/_coverpage.css
index e8df5fe1..6503cb91 100644
--- a/src/themes/basic/_coverpage.css
+++ b/src/themes/basic/_coverpage.css
@@ -20,7 +20,7 @@ section.cover {
   .cover-main {
     flex: 1;
     text-align: center;
-    margin: 0 16px;
+    margin: -20px 16px 0;
     z-index: 1;
   }
 
@@ -46,6 +46,10 @@ section.cover {
     font-weight: 300;
     color: inherit;
 
+    a {
+      display: block;
+    }
+
     small {
       position: absolute;
       bottom: -.4375rem;
diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css
index 4fd34c7b..010b7826 100644
--- a/src/themes/basic/_layout.css
+++ b/src/themes/basic/_layout.css
@@ -31,6 +31,7 @@ body {
   letter-spacing: 0;
   margin: 0;
   overflow-x: hidden;
+  color: $color-text;
 }
 
 img {
@@ -159,14 +160,18 @@ nav {
 
 /* main */
 main {
-  size: 100% 100%;
+  size: 100vw 100%;
   position: relative;
 }
 
 .anchor {
   text-decoration: none;
   transition: all .3s;
-  display: block;
+  display: inline-block;
+
+  span {
+    color: $color-text;
+  }
 
   &:hover {
     text-decoration: underline;
@@ -313,6 +318,11 @@ body.close {
     top: 30px;
   }
 
+  main {
+    height: auto;
+    overflow-x: hidden;
+  }
+
   .sidebar {
     left: -$sidebar-width;
     transition: transform 250ms ease-out;
@@ -320,7 +330,8 @@ body.close {
 
   .content {
     left: 0;
-    min-width: 100vw;
+    max-width: 100vw;
+    position: static;
     transition: transform 250ms ease;
   }
 
@@ -330,6 +341,7 @@ body.close {
 
   .sidebar-toggle {
     width: auto;
+    background-color: transparent;
   }
 
   body.close {
@@ -339,6 +351,8 @@ body.close {
 
     .sidebar-toggle {
       width: calc($sidebar-width - 16px);
+      background-color: rgba($color-bg, .8);
+      transition: 1s background-color;
     }
 
     .content {
@@ -346,7 +360,7 @@ body.close {
     }
 
     nav, .github-corner {
-      transform: translateX($sidebar-width);
+      display: none;
     }
   }
 
diff --git a/src/themes/buble.css b/src/themes/buble.css
index d4b99c59..5aec3ce0 100644
--- a/src/themes/buble.css
+++ b/src/themes/buble.css
@@ -2,14 +2,12 @@
 
 $color-primary: #0074D9;
 $color-bg: #fff;
+$color-text: #34495e;
 $sidebar-width: 16em;
 
 @import "basic/layout";
 @import "basic/coverpage";
 
-body {
-  color: #34495e;
-}
 /* sidebar */
 .sidebar {
   color: #364149;
diff --git a/src/themes/pure.css b/src/themes/pure.css
index a9f73bf7..070c0702 100644
--- a/src/themes/pure.css
+++ b/src/themes/pure.css
@@ -1,4 +1,5 @@
 $color-primary: #000;
 $color-bg: #fff;
+$color-text: #000;
 $sidebar-width: 300px;
 @import "basic/layout";
diff --git a/src/themes/vue.css b/src/themes/vue.css
index 5eaaaee2..a21ac514 100644
--- a/src/themes/vue.css
+++ b/src/themes/vue.css
@@ -2,6 +2,7 @@
 
 $color-primary: #42b983;
 $color-bg: #fff;
+$color-text: #34495e;
 $sidebar-width: 300px;
 
 @import "basic/layout";
@@ -9,7 +10,6 @@ $sidebar-width: 300px;
 
 body {
   background-color: $color-bg;
-  color: #34495e;
 }
 
 /* sidebar */
diff --git a/src/tpl.js b/src/tpl.js
index d9cd691c..6a35f681 100644
--- a/src/tpl.js
+++ b/src/tpl.js
@@ -1,4 +1,4 @@
-
+import { isMobile } from './util'
 /**
  * Render github corner
  * @param  {Object} data
@@ -23,13 +23,13 @@ export function corner (data) {
  * Render main content
  */
 export function main (tpl) {
-  return `<main>
-    ${tpl}
-    <aside class="sidebar"></aside>
-    <section class="content">
+  const aside = `${tpl}<aside class="sidebar"></aside>`
+
+  return (isMobile() ? `${aside}<main>` : `<main>${aside}`) +
+    `<section class="content">
       <article class="markdown-section"></article>
     </section>
-  </main>`
+    </main>`
 }
 
 /**