Improve components

build/webpack/base.js

@@ -4,14 +4,13 @@ import autoprefixer from 'autoprefixer';
 import eslintFormatter from 'eslint-friendly-formatter';
 import config from '../config';
 
-
 const buildAssetsPath = (_path) => {
   return path.posix.join(_path);
 };
 
 export default {
   entry: {
-    'docs/docs': './docs/src/index.js'
+    docs: './docs/src/index.js'
   },
   output: {
     path: config.rootPath,

build/webpack/prod-docs.js

@@ -1,11 +1,18 @@
 import webpack from 'webpack';
+import path from 'path';
 import merge from 'webpack-merge';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import config from '../config';
-import baseWebpackConfig from './base';
+import baseConfig from './base';
 
-export default merge(baseWebpackConfig, {
+
+export default merge(baseConfig, {
+  output: {
+    path: path.join(config.rootPath, 'docs'),
+    filename: '[name].[chunkhash:8].js',
+    chunkFilename: '[id].[chunkhash:8].js'
+  },
   vue: {
     loaders: {
       css: ExtractTextPlugin.extract('css'),
@@ -19,7 +26,7 @@ export default merge(baseWebpackConfig, {
       }
     }),
     new webpack.optimize.OccurenceOrderPlugin(),
-    new ExtractTextPlugin('[name].css'),
+    new ExtractTextPlugin('[name].[contenthash:8].css'),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: config.indexPath,
@@ -42,6 +49,18 @@ export default merge(baseWebpackConfig, {
         useShortDoctype: true
       },
       chunksSortMode: 'dependency'
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: (module) => {
+        let resource = module.resource;
+
+        return resource && (/\.js$/).test(resource) && resource.indexOf(config.nodePath) === 0;
+      }
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
     })
   ]
 });

docs/src/components/code-block.vue

@@ -10,12 +10,12 @@
   .code-block {
     width: auto;
     max-width: 600px;
-    padding: 8px 32px;
+    padding: 4px 32px;
     margin: 0;
     position: relative;
     overflow: auto;
     border-radius: 2px;
-    background-color: #ededed;
+    background-color: #eee;
     color: #455A64;
     font-family: "Operator Mono", "Fira Code", Menlo, Hack, "Roboto Mono", "Liberation Mono", Monaco, monospace;
     font-size: 14px;

docs/src/components/single-page.vue

@@ -76,7 +76,7 @@
     margin: 0;
     position: fixed;
     top: 12px;
-    left: 12px;
+    left: 8px;
     z-index: 3;
     color: #fff;
   }

src/core/stylesheets/core.theme

@@ -14,8 +14,8 @@
 }
 
 body.THEME_NAME {
-  color: #{'BACKGROUND-CONTRAST-0.87'};
   background-color: #{'BACKGROUND-COLOR-50'};
+  color: #{'BACKGROUND-CONTRAST-0.87'};
 }
 
 /* Typography */

src/core/stylesheets/typography.scss

@@ -1,4 +1,5 @@
-/* Text and Titles */
+/*  Text and Titles
+   ========================================================================== */
 
 .md-caption {
   font-size: 12px;
@@ -70,8 +71,16 @@
   line-height: 112px;
 }
 
-/* Links */
+
+/*  Links & Buttons
+   ========================================================================== */
 
 a {
   text-decoration: none;
 }
+
+button {
+  &:focus {
+    outline: none;
+  }
+}