Merge pull request #10 from keanulee/disclaimer-browser-compat

Add disclaimer and browser compat

Author: Kate

docs/_includes/article.html

@@ -3,6 +3,8 @@
 
 <h1><a href="{{site.baseurl}}{{topic.url}}">{{topic.title}}</a></h1>
 
+<div class="disclaimer">This documentation is a work in progress. It describes prerelease software, and is subject to change.</div>
+
 {% if page.addsectiontoc %}
 {% include sectiontoc.html %}
 {% endif %}

docs/css/main.css

@@ -243,6 +243,15 @@ article {
   min-width: 1px;
 }
 
+.disclaimer {
+  border: 1px solid blue;
+  margin: 20px 20px;
+  padding: 6px;
+  border-radius: 4px;
+  color: #666;
+  background-color: #eee;
+}
+
 .prevnext {
   display: flex;
   justify-content: space-between;

docs/images/browsers/chrome_128x128.png

@@ -98,8 +98,20 @@ LitElement is brought to you by developers on the Google Chrome team with the in
 </div>
 </section>
 
-<section class="grey-bg">
-<div class="wrapper">
+<section>
+  <div class="wrapper" style="text-align: center">
+    <h2>Browser Compatibility</h2>
+    <p>Polymer products work in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera). </p>
+    <div>
+      <img width="70" height="70" src="/images/browsers/chrome_128x128.png" alt="chrome logo">
+      <img width="70" height="70" src="/images/browsers/firefox_128x128.png" alt="firefox logo">
+      <img width="70" height="70" src="/images/browsers/internet-explorer_128x128.png" alt="internet explorer logo">
+      <img width="70" height="70" src="/images/browsers/edge_128x128.png" alt="edge logo">
+      <img width="70" height="70" src="/images/browsers/safari_128x128.png" alt="safari logo">
+      <img width="70" height="70" src="/images/browsers/opera_128x128.png" alt="opera logo">
+    </div>
+  </div>
+</section>
 
 <section class="grey-bg">
 <div class="wrapper">