Add Overpass-Mono. Title styling

Author: avivace

package-lock.json

@@ -29,19 +29,20 @@
     "babel-core": "^6.24.1",
     "babel-loader": "^6.4.0",
     "babel-preset-vue-app": "^1.2.0",
+    "copyfiles": "^2.1.0",
     "css-loader": "^0.27.0",
     "file-loader": "^0.10.1",
     "html-webpack-plugin": "^2.24.1",
+    "npm-run-all": "^4.1.5",
     "postcss-loader": "^1.3.3",
     "rimraf": "^2.5.4",
     "style-loader": "^0.13.2",
+    "typeface-overpass-mono": "0.0.71",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",
     "vue-template-compiler": "^2.5.16",
     "webpack": "^2.4.1",
-    "webpack-dev-server": "^2.4.2",
     "webpack-cli": "^3.1.2",
-    "npm-run-all": "^4.1.5",
-    "copyfiles": "^2.1.0"
+    "webpack-dev-server": "^2.4.2"
   }
 }

package.json

@@ -1,6 +1,8 @@
 <template>
     <div id="page">
-        <h1> CoderBot files </h1>
+                        <div class="logo">CoderBot</div>
+<div class="subtitle">files repository</div>
+<br> <br>
         <el-row>
             <el-col :xs="{span:0}" :span="4" hidden-md-and-down>
                 <div class="grid-content"></div>
@@ -119,6 +121,26 @@ export default {
 }
 </script>
 <style>
+.logo {
+    font-size: 60px;
+    font-family: 'Overpass Mono';
+    font-weight: 600;
+    letter-spacing: -5px;
+    background-color: #070300;
+    color: transparent;
+    text-shadow: 3px 3px 3px rgba(255, 255, 255, 0.25);
+    -webkit-background-clip: text;
+    -moz-background-clip: text;
+    background-clip: text;
+}
+.subtitle {
+    color: #606266;
+    font-size: 30px;
+    font-family: 'Overpass Mono';
+    font-weight: 600;
+    letter-spacing: -4px;
+    margin-top: -20px;
+}
 a {
     text-decoration: none;
     transition: ease-out;

src/App.vue

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import App from './App.vue'
+import 'typeface-overpass-mono'
 
 Vue.use(ElementUI)