Consistent, WSK-based styles for all the examples.

2014-09-16 12:58:21 -04:00 · 2014-09-16 12:58:21 -04:00 · 49b2f4d5de
--- a/beacon/index.html
+++ b/beacon/index.html
@ -15,14 +15,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <html>
-  <head>
+  <head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="description" content="Sample illustrating the use of Beacon.">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Beacon Sample</title>

-    <link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-title" content="Beacon Sample">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <link rel="icon" href="../images/favicon.ico">
+
    <link rel="stylesheet" href="../styles/main.css">
  </head>
  <body>
@ -56,13 +75,13 @@ limitations under the License.

    <!-- // [START code-block] -->
    <script>
-    window.addEventListener('unload', logData, false);
+      window.addEventListener('unload', logData, false);

-    var diagnosticData = 'Sent by a beacon!';
+      var diagnosticData = 'Sent by a beacon!';

-    function logData() {
-        navigator.sendBeacon("https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop", diagnosticData);
-    }
+      function logData() {
+          navigator.sendBeacon("https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop", diagnosticData);
+      }
    </script>
    <!-- // [END code-block] -->

@ -72,8 +91,9 @@ limitations under the License.
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-53563471-1');
+      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
    </script>
+    <!-- Built with love using Web Starter Kit -->
  </body>
 </html>
--- a/collections-iterators-es6/index.html
+++ b/collections-iterators-es6/index.html
@ -14,14 +14,34 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="description" content="Sample illustrating the use of ES6 Collections and Iterators.">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Collections and Iterators (ES6) Sample</title>

+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-title" content="Collections and Iterators (ES6) Sample">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <link rel="icon" href="../images/favicon.ico">
+
    <link rel="stylesheet" href="../styles/main.css">
  </head>
  <body>
@ -40,7 +60,9 @@ limitations under the License.
    </p>

    <!-- // [START code-block] -->
-    <pre id="log"></pre>
+    <div class="output">
+      <pre id="log"></pre>
+    </div>

    <script>
      function log() {
@ -110,8 +132,9 @@ limitations under the License.
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-53563471-1');
+      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
    </script>
+    <!-- Built with love using Web Starter Kit -->
  </body>
 </html>
--- a/css-shapes/index.html
+++ b/css-shapes/index.html
@ -14,53 +14,75 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="description" content="Sample illustrating the use of CSS Shapes Level 1.">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
    <title>CSS Shapes Level 1 Sample</title>
-    <link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
+
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-title" content="CSS Shapes Level 1 Sample">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <link rel="icon" href="../images/favicon.ico">
+
    <link rel="stylesheet" href="../styles/main.css">
  </head>
+
  <body>
    <h1>CSS Shapes Level 1 Sample</h1>
    <p>Available in <a href="http://www.chromestatus.com/feature/5163890719588352">Chrome 37+</a></p>

    <style>
-    .shape {
-      width: 160px;
-      height: 160px;
-      background-color: red;
-      background-size: 260px 260px;
-    }
-    p {
-      width: 100%;
-      max-width: 500px;
-      font-size: 14px;
-    }
+      .shape {
+        width: 160px;
+        height: 160px;
+        background-color: red;
+        background-size: 260px 260px;
+      }
+      p {
+        width: 100%;
+        max-width: 500px;
+        font-size: 14px;
+      }

-    p:after {
-      content: '';
-      display:block;
-      clear: both;
-    }
+      p:after {
+        content: '';
+        display:block;
+        clear: both;
+      }

-    .polygon {
-      -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
-      clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
-    }
+      .polygon {
+        -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
+        clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
+      }

-    .circle {
-      -webkit-clip-path: circle(80px at 50% 50%);
-      clip-path: circle(80px at 50% 50%);
-    }
+      .circle {
+        -webkit-clip-path: circle(80px at 50% 50%);
+        clip-path: circle(80px at 50% 50%);
+      }

-    .inset {
-      border-radius: 40px;
-      width: 140px;
-      height: 140px;
-    }
+      .inset {
+        border-radius: 40px;
+        width: 140px;
+        height: 140px;
+      }
    </style>

    <h2>Defining the shape</h2>
@ -256,8 +278,9 @@ limitations under the License.
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-53563471-1');
+      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
    </script>
+    <!-- Built with love using Web Starter Kit -->
  </body>
 </html>
--- a/dialog/index.html
+++ b/dialog/index.html
@ -14,17 +14,37 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="description" content="Sample illustrating the use of the dialog element.">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>&lt;dialog&gt; Element Sample</title>

-    <link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-title" content="dialog Element Sample">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <link rel="icon" href="../images/favicon.ico">
+
    <link rel="stylesheet" href="../styles/main.css">
  </head>
+
  <body>
    <h1>&lt;dialog&gt; Element Sample</h1>
    <p>Available in <a href="http://www.chromestatus.com/feature/5770237022568448">Chrome 37+</a></p>
@ -54,8 +74,9 @@ limitations under the License.
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-53563471-1');
+      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
    </script>
+    <!-- Built with love using Web Starter Kit -->
  </body>
 </html>
--- a/encoding-api/index.html
+++ b/encoding-api/index.html
@ -14,16 +14,37 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="description" content="Sample illustrating the use of the Encoding API.">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Encoding API Sample</title>

+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-title" content="Encoding API Sample">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <link rel="icon" href="../images/favicon.ico">
+
    <link rel="stylesheet" href="../styles/main.css">
  </head>
+
  <body>
    <h1>Encoding API Sample</h1>
    <p>Available in <a href="http://www.chromestatus.com/feature/5714368087982080">Chrome 38+</a></p>
@ -42,7 +63,9 @@ limitations under the License.
    </p>

    <!-- // [START code-block] -->
-    <pre id="results"></pre>
+    <div class="output">
+      <pre id="results"></pre>
+    </div>

    <script>
      if ('TextDecoder' in window) {
@ -90,8 +113,9 @@ limitations under the License.
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-53563471-1');
+      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
    </script>
+    <!-- Built with love using Web Starter Kit -->
  </body>
 </html>
--- a/file-constructor/index.html
+++ b/file-constructor/index.html
@ -14,16 +14,37 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="description" content="Sample illustrating the use of the File Constructor.">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>File Constructor Sample</title>

+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-title" content="File Constructor Sample">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <link rel="icon" href="../images/favicon.ico">
+
    <link rel="stylesheet" href="../styles/main.css">
  </head>
+
  <body>
    <h1>File Constructor Sample</h1>
    <p>Available in <a href="http://www.chromestatus.com/feature/5731244088229888">Chrome 38+</a></p>
@ -41,8 +62,10 @@ limitations under the License.
      attribute to provide links to the generated files for download.
    </p>

-    <p>Download these auto-generated files:</p>
-    <ul id="files"></ul>
+    <div class="output">
+      <p>Download these auto-generated files:</p>
+      <ul id="files"></ul>
+    </div>

    <!-- // [START code-block] -->
    <script>
@ -93,8 +116,9 @@ limitations under the License.
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-53563471-1');
+      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
    </script>
+    <!-- Built with love using Web Starter Kit -->
  </body>
 </html>
--- a/image-rendering-pixelated/index.html
+++ b/image-rendering-pixelated/index.html
@ -14,17 +14,37 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="description" content="Sample illustrating the use of Pixelated Image Rendering.">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Pixelated Image Rendering Sample</title>

-    <link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-title" content="Pixelated Image Rendering Sample">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <link rel="icon" href="../images/favicon.ico">
+
    <link rel="stylesheet" href="../styles/main.css">
  </head>
+
  <body>
    <h1>Pixelated Image Rendering Sample</h1>
    <p>Available in <a href="http://www.chromestatus.com/feature/5118058116939776">Chrome 38+</a></p>
@ -52,8 +72,9 @@ limitations under the License.
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-53563471-1');
+      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
    </script>
+    <!-- Built with love using Web Starter Kit -->
  </body>
 </html>
--- a/network-information/index.html
+++ b/network-information/index.html
@ -14,16 +14,37 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="description" content="Sample illustrating the use of Network Information.">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Network Information Sample</title>

+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-title" content="Network Information Sample">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <link rel="icon" href="../images/favicon.ico">
+
    <link rel="stylesheet" href="../styles/main.css">
  </head>
+
  <body>
    <h1>Network Information Sample</h1>
    <p>Available in <a href="http://www.chromestatus.com/feature/6338383617982464">Chrome 38+</a> (Android, iOS, ChromeOS)</p>
@ -41,7 +62,9 @@ limitations under the License.
    <p>On supported devices, changing your network connection will update the type on this page.</p>

    <!-- // [START code-block] -->
-    <p>Your current network type is <strong id="type"></strong>.</p>
+    <div class="output">
+      <p>Your current network type is <strong id="type"></strong>.</p>
+    </div>

    <script>
      function updateDisplayedType() {
@ -62,8 +85,9 @@ limitations under the License.
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-53563471-1');
+      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
    </script>
+    <!-- Built with love using Web Starter Kit -->
  </body>
 </html>
--- a/picture-element/index.html
+++ b/picture-element/index.html
@ -14,15 +14,37 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="description" content="Sample illustrating the use of the picture element.">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
    <title>&lt;picture&gt; Element Sample</title>
-    <link href='//fonts.googleapis.com/css?family=Roboto:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
+
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-title" content="Picture Element Sample">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <link rel="icon" href="../images/favicon.ico">
+
    <link rel="stylesheet" href="../styles/main.css">
  </head>
+
  <body>
    <h1>&lt;picture&gt; Element Sample</h1>
    <p>Available in <a href="http://www.chromestatus.com/feature/5910974510923776">Chrome 38+</a></p>
@ -83,8 +105,9 @@ limitations under the License.
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-53563471-1');
+      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
    </script>
+    <!-- Built with love using Web Starter Kit -->
  </body>
 </html>
--- a/screen-orientation/index.html
+++ b/screen-orientation/index.html
@ -1,13 +1,50 @@
 <!doctype html>
-<html>
+<!--
+Copyright 2014 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="description" content="Sample illustrating the use of Screen Orientation.">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
    <title>Screen Orientation Sample</title>
-    <link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
+
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-title" content="Screen Orientation Sample">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+    <link rel="icon" href="../images/favicon.ico">
+
    <link rel="stylesheet" href="../styles/main.css">
  </head>
+
  <body>
    <h1>Screen Orientation Sample</h1>
    <p>Available in <a href="http://www.chromestatus.com/feature/6191285283061760">Chrome 38+</a></p>
@ -44,8 +81,8 @@
    /* // [END listen-orientation] */
    </script>

-    <p>You can lock the orientation to a supported value (
-      landscape,
+    <p>You can lock the orientation to a supported value
+      (landscape,
      landscape-primary,
      landscape-secondary,
      portrait,
@ -81,8 +118,9 @@
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-53563471-1');
+      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
    </script>
+    <!-- Built with love using Web Starter Kit -->
  </body>
 </html>