lit · Feb 5, 2019 · Feb 4, 2019 · Feb 5, 2019 · Feb 5, 2019 · Feb 5, 2019
diff --git a/docs/_includes/project.html b/docs/_includes/project.html
@@ -1,4 +1,5 @@
 <stack-blitz
     folder="{{ site.baseurl }}/{{ site.projects }}/{{ include.folder | default: template }}"
-    openFile="{{ include.openFile | default: my-element.js }}">
+    openFile="{{ include.openFile | default: my-element.js }}"
+    label="{{ include.label | default: 'Launch Code Editor' }}">
 </stack-blitz>
diff --git a/docs/_includes/projects/index-typescript/custom-greeting.ts b/docs/_includes/projects/index-typescript/custom-greeting.ts
@@ -6,4 +6,4 @@ export class CustomGreeting extends LitElement {
   render() {
     return html`<p>Hello, ${this.name}!</p>`;
   }
-}
+}
diff --git a/docs/css/main.css b/docs/css/main.css
@@ -292,6 +292,17 @@ section p {
   padding: 0 20px;
 }
 
+.fixed-width-caption {
+  min-width: 300px;
+  max-width: 300px;
+  margin-bottom: 0;
+}
+
+.inline-action-buttons > * {
+  display: inline-block;
+  margin-right: 20px;
+}
+
 .center {
   align-items: center;
   justify-content: center;
@@ -628,6 +639,12 @@ th, td {
   .responsive-row {
     flex-direction: column;
   }
+
+  .fixed-width-caption {
+    min-width: unset;
+    max-width: unset;
+  }
+
   #logo-lockup {
     margin-bottom: -20px;
   }

diff --git a/docs/index.md b/docs/index.md
@@ -11,73 +11,34 @@ layout: default
 </div>
 </header>
 
-<section>
+<section id="section-snippet">
 <div class="wrapper">
 <h1 class="title">
-About
+Easily Create Fast, Lightweight Web Components
 </h1>
 
 <div class="responsive-row">
 
-<div style="flex:1;">
-<h2>
-Fast, lightweight web components
-</h2>
-<p>
-LitElement is a simple base class for creating fast, lightweight web components that work in any web page with any framework.
-</p>
-</div>
-
-<div style="flex:1;">
-<h2>
-Using lit-html
-</h2>
-<p>
-For rendering, LitElement uses [lit-html](https://lit-html.polymer-project.org/)—a fast HTML templating library. To build an app out of LitElement components, check out [PWA Starter Kit](https://pwa-starter-kit.polymer-project.org/).
-</p>
-</div>
-
-<div style="flex:1;">
-<h2>
-Who are we?
-</h2>
-<p>
-LitElement is brought to you by developers on the Google Chrome team with the input of web developers at organizations big and small around the world.
-</p>
-</div>
-
-</div>
+<div class="fixed-width-caption">
+<h3 class="description">LitElement makes it easy to define Web Components – ideal for sharing elements across your organization or building a UI design system.</h3>
+<h3 class="description">Use your components anywhere you use HTML: in your main document, in a CMS, in Markdown, or in views built with frameworks like React and Vue.</h3>
 </div>
-</section>
-
-<section>
-<div class="wrapper">
 
-<h1 class="title">Get started</h1>
-
-<h2>Define a component</h2>
-
-It's easy to define a Web Component with LitElement:
 
+<div>
 ```js
 {% include projects/index-typescript/custom-greeting.ts %}
 ```
-
-<h2 style="margin-top: 40px;">Use a component</h2>
-
-Then use it anywhere you use HTML:
-
 ```html
-<custom-greeting></custom-greeting>
+<custom-greeting name="Everyone"></custom-greeting>
 ```
+</div>
+</div>
 
-Click **Launch code editor** to see a live sample.
-
-{% include project.html folder="index-typescript" openFile="custom-greeting.js" %}
-
-The example above uses TypeScript and decorators. You can also easily write LitElements in plain JavaScript. Click **Launch code editor** for an example.
-
-{% include project.html folder="index" openFile="custom-greeting.js" %}
+<div class="inline-action-buttons">
+{% include project.html label="Launch Code Editor (TypeScript)" folder="index-typescript" openFile="custom-greeting.ts" %}
+{% include project.html label="Launch Code Editor (JavaScript)" folder="index" openFile="custom-greeting.js" %}
+</div>
 
 </div>
 </section>
@@ -90,51 +51,36 @@ The example above uses TypeScript and decorators. You can also easily write LitE
 <div class="responsive-row">
 <div style="flex: 1">
 
-<h2 class="caption">Fast and light</h2>
+<h2 class="caption">Delightfully Declarative</h2>
 
-Whether your end users are in emerging markets or Silicon Valley, they’ll appreciate that LitElement is extremely fast.
+Express your UI declaratively, as a function of state. Levergage the full expressiveness of JavaScript in your templates – no custom syntax required.
 
-LitElement uses [lit-html](https://github.com/Polymer/lit-html) to define and render HTML templates. DOM updates are lightning-fast, because lit-html only re-renders the data that changes.
+Elements update automatically when their properties change. And they update fast, without diffing.
 
 </div>
 <div style="flex: 1">
 
-<h2 class="caption">Standards-based</h2>
+<h2 class="caption">Fast and light</h2>
 
-LitElement follows the [web components standards](https://developer.mozilla.org/en-US/docs/Web/Web_Components), so your components will work with any framework.
+Whether your end users are in emerging markets or Silicon Valley, they’ll appreciate that LitElement is extremely fast.
 
-LitElement uses custom elements for easy inclusion in web pages, and shadow DOM for encapsulation. There’s no new abstraction on top of the web platform.
+LitElement uses [lit-html](https://github.com/Polymer/lit-html) to define and render HTML templates. DOM updates are lightning-fast, because lit-html only re-renders the dynamic parts of your UI.
 
 </div>
 <div style="flex: 1">
 
-<h2 class="caption">Made to share</h2>
+<h2 class="caption">Seamlessly Interoperable</h2>
+
+LitElement follows the [Web Components standards](https://developer.mozilla.org/en-US/docs/Web/Web_Components), so your components will work with any framework.
 
-Web components built with LitElement are made to share with the world and with others across your organization, no matter what libraries or frameworks they use.
+LitElement uses Custom Elements for easy inclusion in web pages, and Shadow DOM for encapsulation. There’s no new abstraction on top of the web platform.
 
 </div>
 </div>
 </div>
 </section>
 
 
-<section>
-<div class="wrapper">
-
-<h1 class="title">Browser Compatibility</h1>
-<h2 class="description">LitElement works in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera). </h2>
-<div id="browser-thumbnails" style="margin-bottom: 20px;">
-<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/chrome_128x128.png" alt="chrome logo">
-<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/firefox_128x128.png" alt="firefox logo">
-<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/internet-explorer_128x128.png" alt="internet explorer logo">
-<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/edge_128x128.png" alt="edge logo">
-<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/safari_128x128.png" alt="safari logo">
-<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/opera_128x128.png" alt="opera logo">
-</div>
-
-</div>
-</section>
-
 <section style="margin-bottom: 60px;">
 <div class="wrapper">
 <h1 class="title">Next Steps</h1>
@@ -157,3 +103,20 @@ Web components built with LitElement are made to share with the world and with o
 </div>
 </div>
 </section>
+
+<section>
+<div class="wrapper">
+
+<h1 class="title">Browser Compatibility</h1>
+<h2 class="description">LitElement works in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera). </h2>
+<div id="browser-thumbnails" style="margin-bottom: 20px;">
+<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/chrome_128x128.png" alt="chrome logo">
+<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/firefox_128x128.png" alt="firefox logo">
+<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/internet-explorer_128x128.png" alt="internet explorer logo">
+<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/edge_128x128.png" alt="edge logo">
+<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/safari_128x128.png" alt="safari logo">
+<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/opera_128x128.png" alt="opera logo">
+</div>
+
+</div>
+</section>
diff --git a/docs/src/stack-blitz.js b/docs/src/stack-blitz.js
@@ -6,13 +6,15 @@ class StackBlitz extends LitElement {
     return {
       folder: { type: String },
       openFile: { type: String },
+      label: { type: String },
       _loading: { type: Boolean },
     };
   }
 
   constructor() {
     super();
     this.openFile = 'index.html';
+    this.label = 'Launch Code Editor';
     this._loading = false;
     this._vm = null;
   }
@@ -65,12 +67,13 @@ class StackBlitz extends LitElement {
       <div id="container">
         <button class="pretty-button" @click="${this.loadProject}"
             .disabled="${this._loading}">
-          ${this._loading ? 'Loading Code Editor...' : 'Launch Code Editor'}
+          ${this._loading ? 'Loading Code Editor...' : this.label}
         </button>
       </div>`;
   }
 
   async loadProject() {
+    this.style.display = 'block';
     const folder = this.folder;
     if (folder && !this._loading) {
       try {
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,4 +6,4 @@ export class CustomGreeting extends LitElement { @@
       render() {
         return html`<p>Hello, ${this.name}!</p>`;
       }
-    }
+    }