Demo: Update demo page + add demo.css + comment out legacy host styling

gorork · Oct 31, 2016 · ac2bd30 · ac2bd30
1 parent f6182bc
commit ac2bd30
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 7 deletions.
diff --git a/demo/demo.css b/demo/demo.css
@@ -0,0 +1,94 @@
+/* Styling demo page */
+h1, h3, p {
+  font-family: 'Roboto Mono', 'Helvetica Neue', Arial, sans-serif;
+  font-weight: 400; }
+
+h1, h3 {
+  color: #fff; }
+
+p {
+  font-size: 15px;
+  color: #bbb;
+  top: 10px; }
+
+.row,
+.col {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  align-items: center;
+  justify-content: center; }
+  .row.row-horizontal,
+  .col.row-horizontal {
+    flex-direction: row; }
+  .row.row-vertical,
+  .col.row-vertical {
+    flex-direction: column; }
+
+.row {
+  width: 100%;
+  height: 185px;
+  position: relative;
+  overflow: hidden; }
+  .row:last-child {
+    border-top: 1px dotted lightgrey; }
+  .row.logos {
+    height: 100px; }
+    .row.logos p {
+      top: -20px; }
+  .row.error {
+    height: 160px; }
+  .row.image {
+    height: 400px; }
+  .row p {
+    position: absolute;
+    text-align: center;
+    width: 100%; }
+  .row .logo {
+    width: 120px; }
+
+#header {
+  position: absolute;
+  top: 40px;
+  z-index: 10;
+  text-align: center;
+  width: 100%; }
+  #header h1 {
+    font-size: 25px;
+    margin-bottom: 3px; }
+  #header h3 {
+    font-size: 16px;
+    margin-top: 0;
+    font-weight: 100; }
+  #header a {
+    color: #fff;
+    border-bottom: 3px solid rgba(240, 92, 56, 0.25); }
+    #header a:hover {
+      color: #F05C38;
+      border-bottom: 3px solid #f05c38; }
+
+.image {
+  background: url("https://unsplash.com/photos/t7YycgAoVSw/download") no-repeat;
+  background-size: 100%; }
+
+.col {
+  width: 33%; }
+
+paper-audio-player {
+  width: 80%; }
+
+#footer {
+  margin-bottom: 15px;
+  text-align: center; }
+  #footer p {
+    width: 100%;
+    font-size: 12px;
+    margin: 0; }
+
+a {
+  color: #F05C38;
+  text-decoration: none; }
+  a:hover {
+    border-bottom: 2px solid #F05C38; }
diff --git a/demo/index.html b/demo/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
@@ -27,8 +27,9 @@
   </head>
   <body>
   <div id="header">
-    <h1>Flat Audio Player</h1>
-    <h3>Open source custom audio element built with Polymer 1.0. Grab it on <a href="https://github.com/gorork/paper-audio-player" target="_blank">Github</a>!</h3>
+    <h1>Paper Audio Player</h1>
+    <h3>Open source custom audio element built with Polymer 1+. Grab it on <a href="https://github.com/gorork/paper-audio-player" target="_blank">Github</a>!</h3>
+    <p><img src="https://img.shields.io/badge/version-1.1.0-brightgreen.svg"> <img src="https://travis-ci.org/gorork/paper-audio-player.svg?branch=master"></p>
   </div>
 
     <!-- row -->
@@ -65,12 +66,12 @@ <h3>Open source custom audio element built with Polymer 1.0. Grab it on <a href=
 
     <div class="row row-vertical logos">
       <p>In production by</p>
-      <img src="googlelogo.png" alt="Google logo new small" class="logo">
+      <img src="http://nadikun.com/code/paper-audio-player/demo/googlelogo.png" alt="Google logo new small" class="logo">
     </div>
 
   <!-- footer -->
     <div id="footer">
-      <p>&copy; 2015 Paper-Audio-Player Created by <a href="http://nadikun.com">Nadi Dikun</a>. Open source Polymer 1.0 element, grab it on <a
+      <p>&copy; 2015-2016 "Paper Audio Player" created by <a href="http://nadikun.com" target="_blank">Nadi Dikun</a>. Open source Polymer element, grab it on <a
           href="https://github.com/gorork/paper-audio-player" target="_blank">Github</a>.</p>
       <p>All audio tracks belong to their respective owners and were shared on this webpage under Creative Common License.</p>
     </div>

diff --git a/paper-audio-player.html b/paper-audio-player.html
@@ -50,9 +50,9 @@
 
       :host {
         display: block;
-        margin: auto 10px;
+        /*margin: auto 10px;
+        width: 100%;*/
         box-sizing: border-box;
-        width: 100%;
         font-family: 'Roboto Mono', 'Helvetica Neue', Arial, sans-serif;
       }