docs: tweak screenshot sizes

docs/assets/styles.css

@@ -4,7 +4,13 @@
 }
 
 .screenshots > img {
-  height: 160px;
-  width: auto;
+  width: 280px;
+  height: auto;
   margin: 4px;
 }
+
+@media (min-width: 1100px) {
+  .screenshots > img {
+    width: 240px;
+  }
+}

docs/package.json

@@ -21,7 +21,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "component-docs": "^0.8.1",
+    "component-docs": "^0.8.2",
     "linaria": "^0.4.1"
   }
 }

docs/pages/src/Home.js

@@ -4,12 +4,8 @@
 import * as React from 'react';
 import { css, styles, include } from 'linaria';
 
-const transition = css`
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-`;
-
 const elevated = css`
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.24);
 `;
 
 const container = css`
@@ -43,15 +39,16 @@ const buttons = css`
 const button = css`
   appearance: none;
   margin: 8px;
+  min-width: 120px;
+  text-align: center;
   font-size: 15px;
   font-weight: bold;
-  padding: 12px 24px;
+  padding: 8px 16px;
   border: 0;
   border-radius: 3px;
   cursor: pointer;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
-
-  ${include(transition)};
+  transition: 0.3s;
 
   &:hover {
     ${include(elevated)};

docs/yarn.lock

@@ -1456,9 +1456,9 @@ commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
 
-component-docs@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/component-docs/-/component-docs-0.8.1.tgz#c3b3b0db62ac6edc2702ab427fbb292b74ce717e"
+component-docs@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/component-docs/-/component-docs-0.8.2.tgz#a38b8b0c00dcbf3743ca73a301ebad3c35569283"
   dependencies:
     babel-core "^6.26.0"
     babel-loader "^7.1.2"