Add custom cover background

src/themes/basic/_coverpage.css

@@ -1,16 +1,27 @@
 section.cover {
-  height: 100vh;
-  display: flex;
   align-items: center;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 100vh;
+  display: none;
 
-  &.hidden {
-    display: none;
+  &.show {
+    display: flex;
+  }
+
+  &.has-mask .mask {
+    position: absolute;
+    size: 100%;
+    background-color: $color-bg;
+    opacity: .8;
   }
 
   .cover-main {
     flex: 1;
     text-align: center;
     margin: 0 16px;
+    z-index: 1;
   }
 
   a {

src/themes/basic/_layout.css

@@ -95,7 +95,7 @@ nav {
     display: inline-block;
 
     ul {
-      background-color: rgba(#fff, .6);
+      background-color: rgba($color-bg, .6);
       border: 1px solid $color-primary;
       opacity: 0;
       overflow: hidden;
@@ -150,7 +150,7 @@ nav {
   }
 
   svg {
-    color: #fff;
+    color: $color-bg;
     height: 80px;
     width: 80px;
     fill: $color-primary;

src/themes/buble.css

@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold');
 
 $color-primary: #0074D9;
+$color-bg: #fff;
 $sidebar-width: 16em;
 
 @import "basic/layout";
@@ -12,7 +13,7 @@ body {
 /* sidebar */
 .sidebar {
   color: #364149;
-  background-color: #fff;
+  background-color: $color-bg;
 
   a {
     color: #666;

src/themes/pure.css

@@ -1,3 +1,4 @@
 $color-primary: #000;
+$color-bg: #fff;
 $sidebar-width: 300px;
 @import "basic/layout";

src/themes/vue.css

@@ -1,20 +1,21 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
 
 $color-primary: #42b983;
+$color-bg: #fff;
 $sidebar-width: 300px;
 
 @import "basic/layout";
 @import "basic/coverpage";
 
 body {
-  background-color: #fff;
+  background-color: $color-bg;
   color: #34495e;
 }
 
 /* sidebar */
 .sidebar {
   color: #364149;
-  background-color: #fff;
+  background-color: $color-bg;
 
   li {
     margin: 6px 15px;