docs(website): improve layout and add introduction summary

Author: christianalfoni

packages/node_modules/overmind/src/index.ts

@@ -289,7 +289,7 @@ export class Overmind<Config extends Configuration> implements Configuration {
           })
           setTimeout(() => {
             const flushData = this.proxyStateTree.flush(true)
-            if (flushData.mutations.length) {
+            if (this.devtools && flushData.mutations.length) {
               this.devtools.send({
                 type: 'flush',
                 data: {

packages/overmind-website/src/components/Doc/styles.ts

@@ -19,7 +19,7 @@ export const content = css`
 
   @media (max-width: 700px) {
     width: 100%;
-    padding: var(--padding-5) var(--padding-4);
+    padding: var(--padding-5);
   }
 
   ol {

packages/overmind-website/src/components/FrontPage/index.tsx

@@ -38,6 +38,14 @@ const FrontPage: SFC = () => {
         >
           <Logo />
           <h1>frictionless webapp development</h1>
+          <div className={styles.summary}>
+            Web application development is about <strong>defining</strong>,{' '}
+            <strong>changing</strong> and <strong>consuming state</strong> to
+            produce a user experience. Overmind aims for a developer experience
+            where that is all you focus on, reducing the orchestration of state
+            management to a minimum. Making you a <strong>happier</strong> and
+            more <strong>productive</strong> developer!
+          </div>
         </div>
         <div
           className={css(

packages/overmind-website/src/components/FrontPage/styles.ts

@@ -8,12 +8,22 @@ export const wrapper = css`
   height: 100vh;
   justify-content: center;
 
+  @media (max-width: 700px) {
+    padding: var(--padding-5);
+  }
+
   h1,
   h2 {
     color: var(--color-dark-1);
   }
 `
 
+export const summary = css`
+  margin-top: 50px;
+  font-size: var(--font-size-4);
+  text-align: center;
+`
+
 export const container = css`
   margin-left: auto;
   margin-right: auto;
@@ -72,7 +82,7 @@ export const banner = css`
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 150px;
+  margin-bottom: 100px;
   > h1 {
     font-weight: normal;
     letter-spacing: 0.2rem;