From 3f3f41eb08666d4be5ed71521f85bba61d3ad7af Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Tue, 27 Sep 2016 00:53:25 -0300
Subject: [PATCH] Create introduction page without images

---
 src/components/mdButton/mdButton.scss      |  2 +-
 src/components/mdToolbar/mdToolbar.scss    |  2 -
 src/core/stylesheets/core.theme            | 20 ++++--
 src/core/stylesheets/structure.scss        |  5 +-
 src/core/stylesheets/type.scss             | 77 ++++++++++++++++++++++
 src/docs/App.vue                           | 28 ++++----
 src/docs/components/demo-page.vue          |  2 +-
 src/docs/components/single-page-banner.vue | 15 +++--
 src/docs/components/single-page.vue        | 28 ++++----
 src/docs/config.js                         |  2 +-
 src/docs/index.js                          | 12 +++-
 src/docs/pages/Introduction.vue            | 54 ++++++++++++++-
 12 files changed, 191 insertions(+), 56 deletions(-)

diff --git a/src/components/mdButton/mdButton.scss b/src/components/mdButton/mdButton.scss
index 2ab3b18..2fe2f1f 100644
--- a/src/components/mdButton/mdButton.scss
+++ b/src/components/mdButton/mdButton.scss
@@ -15,7 +15,7 @@ $button-icon-size: 40px;
   min-width: $button-width;
   min-height: $button-height;
   margin: 6px 8px;
-  padding: 0 8px;
+  padding: 0 16px;
   display: inline-block;
   position: relative;
   align-items: center;
diff --git a/src/components/mdToolbar/mdToolbar.scss b/src/components/mdToolbar/mdToolbar.scss
index 03961c5..119a7d7 100644
--- a/src/components/mdToolbar/mdToolbar.scss
+++ b/src/components/mdToolbar/mdToolbar.scss
@@ -112,9 +112,7 @@
 
   .md-title {
     margin: 0;
-    font-size: 20px;
     font-weight: 400;
-    line-height: 24px;
 
     &:first-child {
       margin-left: 8px;
diff --git a/src/core/stylesheets/core.theme b/src/core/stylesheets/core.theme
index c82961d..2da3887 100644
--- a/src/core/stylesheets/core.theme
+++ b/src/core/stylesheets/core.theme
@@ -1,5 +1,5 @@
 .THEME_NAME {
-  color: rgba(0, 0, 0, .87);
+  color: #{'BACKGROUND-CONTRAST-0.87'};
   background-color: #{'BACKGROUND-COLOR-A100'};
 
   :not(input):not(textarea)::selection {
@@ -8,11 +8,23 @@
   }
 
   a:not(.md-button) {
-    color: #{'PRIMARY-COLOR'};
-    text-decoration: none;
+    color: #{'ACCENT-COLOR'};
 
     &:hover {
-      color: #{'PRIMARY-COLOR-800'};
+      color: #{'ACCENT-COLOR-800'};
     }
   }
 }
+
+
+/* Typography */
+
+.THEME_NAME {
+  .md-caption,
+  .md-display-1,
+  .md-display-2,
+  .md-display-3,
+  .md-display-4 {
+    color: #{'BACKGROUND-CONTRAST-0.57'};
+  }
+}
diff --git a/src/core/stylesheets/structure.scss b/src/core/stylesheets/structure.scss
index 56c0be6..1df1501 100644
--- a/src/core/stylesheets/structure.scss
+++ b/src/core/stylesheets/structure.scss
@@ -10,10 +10,7 @@ body {
   -webkit-font-smoothing: antialiased;
   color: rgba(#000, .87);
   font-family: $font-roboto;
-  font-size: 14px;
-  font-weight: 400;
-  letter-spacing: .010em;
-  line-height: 20px;
+  @extend .md-body-1;
 }
 
 ::-webkit-scrollbar {
diff --git a/src/core/stylesheets/type.scss b/src/core/stylesheets/type.scss
index e69de29..aaf6ee5 100644
--- a/src/core/stylesheets/type.scss
+++ b/src/core/stylesheets/type.scss
@@ -0,0 +1,77 @@
+/* Text and Titles */
+
+.md-caption {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: .02em;
+  line-height: 17px;
+}
+
+.md-body-1 {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: .01em;
+  line-height: 20px;
+}
+
+.md-body-2 {
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: .01em;
+  line-height: 24px;
+}
+
+.md-subheading {
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: .01em;
+  line-height: 24px;
+}
+
+.md-title {
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: .005em;
+  line-height: 26px;
+}
+
+.md-headline {
+  font-size: 24px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 32px;
+}
+
+.md-display-1 {
+  font-size: 34px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 40px;
+}
+
+.md-display-2 {
+  font-size: 45px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 48px;
+}
+
+.md-display-3 {
+  font-size: 56px;
+  font-weight: 400;
+  letter-spacing: -.005em;
+  line-height: 58px;
+}
+
+.md-display-4 {
+  font-size: 112px;
+  font-weight: 400;
+  letter-spacing: -.01em;
+  line-height: 112px;
+}
+
+/* Links */
+
+a {
+  text-decoration: none;
+}
diff --git a/src/docs/App.vue b/src/docs/App.vue
index c0fa2a2..b767c57 100644
--- a/src/docs/App.vue
+++ b/src/docs/App.vue
@@ -173,10 +173,6 @@
     }
   }
 
-  .md-theme-default .main-header {
-    color: #fff;
-  }
-
   .main-header {
     position: relative;
     z-index: 3;
@@ -187,6 +183,11 @@
       }
     }
 
+    .md-toolbar,
+    .md-title {
+      color: #fff;
+    }
+
     .md-title {
       .page-title {
         margin-left: 0;
@@ -206,11 +207,11 @@
 
   .main-sidebar.md-sidenav {
     .md-sidenav-content {
+      width: $sizebar-size;
       display: flex;
       flex-flow: column;
 
       @media (min-width: 1280px) {
-        width: $sizebar-size;
         top: 0;
         pointer-events: auto;
         transform: translate3d(0, 0, 0);
@@ -288,23 +289,22 @@
     position: absolute;
     top: 0;
     right: 0;
-    left: 280px;
+    left: 0;
     transition: $swift-ease-out;
+
+    @media (min-width: 1280px) {
+      left: 280px;
+    }
   }
 
   .md-router-enter,
   .md-router-leave-active {
-    opacity: 0;
+    opacity: .2;
   }
 
   .md-router-enter {
-    .single-page-banner .md-toolbar {
-      min-height: 64px;
-      padding-top: 0;
-
-      .md-title {
-        font-size: 20px;
-      }
+    .md-display-2 {
+      transform: translate3D(0, -36px, 0);
     }
   }
 </style>
diff --git a/src/docs/components/demo-page.vue b/src/docs/components/demo-page.vue
index cd01a8e..1c13a16 100644
--- a/src/docs/components/demo-page.vue
+++ b/src/docs/components/demo-page.vue
@@ -66,7 +66,7 @@
     }
 
     .md-tab {
-      max-width: 960px;
+      max-width: 1024px;
       font-size: 16px;
       line-height: 1.6em;
     }
diff --git a/src/docs/components/single-page-banner.vue b/src/docs/components/single-page-banner.vue
index 2363c1c..2f300bd 100644
--- a/src/docs/components/single-page-banner.vue
+++ b/src/docs/components/single-page-banner.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="single-page-banner">
     <md-toolbar class="single-page-banner">
-      <h1 class="md-title">{{ label }}</h1>
+      <h1 class="md-display-2">{{ label }}</h1>
     </md-toolbar>
 
     <md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github-button">
@@ -28,12 +28,13 @@
     transition: $swift-ease-out;
     color: #fff !important;
 
-    .md-title:first-child {
-      margin-left: 48px;
-      font-size: 45px;
-      font-weight: 400;
-      line-height: 1.3em;
+    .md-display-2 {
+      width: 100%;
+      max-width: 1024px;
+      padding-left: 16px;
+      margin: 0 auto;
       transition: $swift-ease-out;
+      color: #fff;
     }
   }
 
@@ -41,7 +42,7 @@
     margin: 0;
     position: fixed;
     top: 12px;
-    left: 2px;
+    left: 12px;
     z-index: 3;
     color: #fff;
   }
diff --git a/src/docs/components/single-page.vue b/src/docs/components/single-page.vue
index a5d2290..db4df6e 100644
--- a/src/docs/components/single-page.vue
+++ b/src/docs/components/single-page.vue
@@ -21,25 +21,14 @@
 <style lang="scss">
   @import '../../core/stylesheets/variables.scss';
 
-  .single-page:not(.single-page-home),
   .single-page-content {
+    max-width: 1024px;
     padding: 16px;
+    margin: 0 auto;
   }
 
-  .single-page-content {
-    font-size: 16px;
-    line-height: 1.6em;
-
-    .introduction {
-      margin-top: 2px;
-      margin-bottom: 1.5em;
-      font-size: 20px;
-      line-height: 1.6em;
-    }
-  }
-
-  .single-page-home {
-    padding-top: 256px;
+  .single-page {
+    padding-top: 64px;
 
     .main-header {
       position: fixed;
@@ -53,12 +42,17 @@
         padding-left: 280px;
       }
 
-      .md-toolbar {
+      .md-toolbar,
+      .md-title {
         color: #fff;
       }
     }
   }
 
+  .single-page-home {
+    padding-top: 256px;
+  }
+
   .single-page-banner {
     min-height: 256px;
     padding-top: 98px;
@@ -81,7 +75,7 @@
     margin: 0;
     position: fixed;
     top: 12px;
-    left: 2px;
+    left: 12px;
     z-index: 3;
     color: #fff;
   }
diff --git a/src/docs/config.js b/src/docs/config.js
index 3b2218b..78266ea 100644
--- a/src/docs/config.js
+++ b/src/docs/config.js
@@ -26,7 +26,7 @@ Vue.use(VueMaterial.MdTheme, {
   },
   blue: {
     primary: 'blue',
-    accent: 'purple'
+    accent: 'pink'
   },
   green: {
     primary: 'green',
diff --git a/src/docs/index.js b/src/docs/index.js
index 03c3ee1..1ebac0a 100644
--- a/src/docs/index.js
+++ b/src/docs/index.js
@@ -21,12 +21,18 @@ let router = new VueRouter({
 
 let Docs = Vue.component('app', App);
 let handleSectionTheme = (route) => {
-  if (route.name.indexOf('components') >= 0) {
+  if (route.name.indexOf('introduction') >= 0) {
+    Docs.theme = 'blue';
+  } else if (route.name.indexOf('components') >= 0) {
     Docs.theme = 'indigo';
   } else if (route.name.indexOf('themes') >= 0) {
     Docs.theme = 'teal';
   } else if (route.name.indexOf('ui-elements') >= 0) {
     Docs.theme = 'dark-pink';
+  } else if (route.name.indexOf('changelog') >= 0) {
+    Docs.theme = 'orange';
+  } else if (route.name.indexOf('about') >= 0) {
+    Docs.theme = 'green';
   } else {
     Docs.theme = 'default';
   }
@@ -51,7 +57,7 @@ router.afterEach((currentRoute) => {
     mainContent.scrollTop = 0;
   }
 
-  handleSectionTheme(currentRoute);
-
   Docs.closeSidenav();
+
+  handleSectionTheme(currentRoute);
 });
diff --git a/src/docs/pages/Introduction.vue b/src/docs/pages/Introduction.vue
index 3620dff..378c5d0 100644
--- a/src/docs/pages/Introduction.vue
+++ b/src/docs/pages/Introduction.vue
@@ -2,7 +2,57 @@
   <single-page class="single-page-home" label="Introduction">
     <single-page-banner label="Vue Material"></single-page-banner>
 
-    <p class="introduction">Vue Material is a lightweight implementation <a href="http://material.google.com" target="_blank" rel="noopener">Google Material Design</a> specifications.</p>
-    <p>This project provides reusable components and a series of UI Elements to build crafted Material Design applications. It aims to support the latest version of Vue and to have the same <a href="https://saucelabs.com/u/vuejs" target="_blank" rel="noopener">compatibility</a> with Web Browsers.</p>
+    <div class="button-actions">
+      <div class="introduction">Build well-crafted apps with Material Design and Vue 2.0</div>
+
+      <md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
+      <md-button class="md-primary md-raised" href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">Github</md-button>
+    </div>
+
+    <div class="row">
+      <div class="column">
+        <h2 class="md-headline">Material Design</h2>
+        <p>Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank" rel="noopener">Material Design</a> specs. Build powerful and well-designed web apps that can can fit on every screen.</p>
+      </div>
+
+      <div class="column">
+        <h2 class="md-headline">Full-featured</h2>
+        <p>You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API and more...</p>
+      </div>
+
+      <div class="column">
+        <h2 class="md-headline">Compatible</h2>
+        <p>It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to <a href="https://saucelabs.com/u/vuejs" target="_blank" rel="noopener">modern Web Browsers</a> through Vue 2.0.</p>
+      </div>
+    </div>
   </single-page>
 </template>
+
+<style lang="scss" scoped>
+  .button-actions {
+    margin-bottom: 24px;
+    text-align: center;
+
+    .introduction {
+      margin-bottom: .8em;
+      font-size: 20px;
+      line-height: 1.6em;
+    }
+
+    .md-button {
+      margin-left: 0;
+      color: #fff !important;
+    }
+  }
+
+  .row {
+    margin: 0 -10px;
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  .column {
+    margin: 0 10px;
+    flex: 1 1 30%;
+  }
+</style>