From fb6365e222d6e7fc3bf56ffdbfe4586d609eea16 Mon Sep 17 00:00:00 2001
From: Zeno Rocha <hi@zenorocha.com>
Date: Sat, 19 Sep 2015 01:38:46 -0700
Subject: [PATCH] Adds better demo styling, footer and GA

---
 demo.css   | 126 +++++++++++++++++++++++++++++++++++++++++++++++++----
 index.html |  45 ++++++++++++++++---
 2 files changed, 156 insertions(+), 15 deletions(-)

diff --git a/demo.css b/demo.css
index 12a0022..15ce830 100644
--- a/demo.css
+++ b/demo.css
@@ -2,11 +2,7 @@ body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-/* ==========================================================================
-   Header
-   ========================================================================== */
-
-header {
+.gradient {
     background: #4cd964;
     background: -moz-linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%);
     background: -webkit-gradient(left bottom, right top, color-stop(0%, #4cd964), color-stop(100%, #5ac8fa));
@@ -19,7 +15,11 @@ header {
     padding: 36px 0;
 }
 
-header .title {
+/* ==========================================================================
+   Header
+   ========================================================================== */
+
+.title {
     font-size: 64px;
     color: white;
     font-weight: 700;
@@ -27,7 +27,7 @@ header .title {
     letter-spacing: -1px;
 }
 
-header .subtitle {
+.subtitle {
     font-size: 27px;
     color: #16a085;
     font-weight: 400;
@@ -41,18 +41,43 @@ header .subtitle {
 
 .wrap {
     margin: 0 auto 30px;
-    width: 480px;
+    width: 500px;
 }
 
 h3 {
     color: #333;
     margin-top: 30px;
+    text-align: center;
+    font-size: 18px;
+}
+
+p {
+    color: #333;
+    font-size: 16px;
+    line-height: 1.6;
+}
+
+code {
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 3px;
+    font-size: 85%;
+    margin: 0;
+    padding: 0.2em;
+}
+
+.hljs-keyword {
+    color: #008080;
+    font-weight: normal;
 }
 
 .form-actions {
     margin-top: 15px;
 }
 
+.form-actions .btn {
+    float: left;
+}
+
 textarea {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -63,5 +88,88 @@ textarea {
 pre code {
     font-size: 14px;
     line-height: 20px;
-    margin-top: 15px;
+}
+
+/* Example
+   ========================================================================== */
+
+.example {
+    position: relative;
+    margin: 15px 0 0;
+    padding: 39px 19px 14px;
+    background-color: #fff;
+    border-radius: 4px 4px 0 0;
+    border: 1px solid #ddd;
+}
+
+.example p {
+    color: #666;
+}
+
+.example:after {
+    content: "Example";
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 2px 8px;
+    font-size: 12px;
+    font-weight: bold;
+    background-color: #f5f5f5;
+    color: #9da0a4;
+    border-radius: 4px 0 4px 0;
+}
+
+.example + pre {
+    background: #f8f8f8;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    clear: both;
+    margin-top: -20px;
+    padding: 20px 5px 0;
+}
+
+/* ==========================================================================
+   Footer
+   ========================================================================== */
+
+.credits {
+    font-weight: 400;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 16px;
+    color: #16a085;
+}
+
+.credits-link {
+    color: white;
+    text-decoration: none;
+    border-bottom: 1px dotted white;
+}
+
+.credits-link:hover,
+.credits-link:focus {
+    text-decoration: none;
+}
+
+.love {
+    display: inline-block;
+    position: relative;
+    top: .2em;
+    font-size: 1.4em;
+    -webkit-transform: scale(.9);
+    -moz-transform: scale(.9);
+    transform: scale(.9);
+    -webkit-animation: love .5s infinite linear alternate-reverse;
+    -moz-animation: love .5s infinite linear alternate-reverse;
+    animation: love .5s infinite linear alternate-reverse;
+}
+
+@-webkit-keyframes love {
+    to {-webkit-transform: scale(1.2);}
+}
+
+@-moz-keyframes love {
+    to {-moz-transform: scale(1.2);}
+}
+@keyframes love {
+    to {transform: scale(1.2);}
 }
diff --git a/index.html b/index.html
index 2774272..4c775ea 100644
--- a/index.html
+++ b/index.html
@@ -6,27 +6,41 @@
 
     <link rel="stylesheet" href="bower_components/primer-css/css/primer.css">
     <link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">
+    <link rel="stylesheet" href="bower_components/highlightjs/styles/github.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
     <link rel="stylesheet" href="demo.css">
 </head>
 <body>
-    <header class="text-center">
+    <header class="gradient text-center">
         <h1 class="title">clipboard.js</h1>
         <h2 class="subtitle">A modern approach to copy &amp; cut to the clipboard</h2>
         <h2 class="subtitle" style="color: white">No Flash. No dependencies. Just 2kb</h2>
     </header>
 
     <main class="wrap">
+        <h1>Usage</h1>
+
+        <p>First, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <code>&lt;button&gt;</code>.</p>
+
+        <pre><code class="js">new Clipboard('.btn');</code></pre>
+
         <h3>Copy text from attribute</h3>
 
-        <button class="btn" data-action="copy" data-value="Just because you can doesn't mean you should — clipboard.js">Copy to the clipboard</button>
+        <p>The easiest way to copy some content to the clipboard, is to include a <code>data-value</code> attribute in your trigger element.</p>
+
+        <form class="example">
+            <button class="btn" data-action="copy" data-value="Just because you can doesn't mean you should — clipboard.js">Copy to the clipboard</button>
+        </form>
 
         <pre><code class="html">&lt;!-- Trigger --&gt;
 &lt;button class="btn" data-value="Heya!"&gt;Copy&lt;/button&gt;</code></pre>
 
         <h3>Copy text from another element</h3>
 
-        <form>
+        <p>Alternatively, you can copy content from another element by adding a <code>data-target</code> attribute in your trigger element.</p>
+        <p>The value you include on this attribute needs to match another's element <code>id</code> attribute.</p>
+
+        <form class="example">
             <div class="input-group">
                 <input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git">
                 <span class="input-group-button">
@@ -45,7 +59,10 @@
 
         <h3>Cut text from another element</h3>
 
-        <form>
+        <p>Additionally, you can define a <code>data-action</code> attribute to specify if you want to either <code>copy</code> or <code>cut</code> content.</p>
+        <p>If you omit this attribute, <code>copy</code> will be used by default.</p>
+
+        <form class="example">
             <div class="input-group">
                 <textarea id="bar" cols="62" rows="4" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
             </div>
@@ -63,9 +80,15 @@
 &lt;button class="btn" data-action="cut" data-target="bar"&gt;
     Copy
 &lt;/button&gt;</code></pre>
+
+        <p>As you may expect, the <code>cut</code> action only works on <code>&lt;input&gt;</code> or <code>&lt;textarea&gt;</code> elements.</p>
     </main>
 
-    <script src="dist/clipboard.min.js"></script>
+    <footer class="gradient text-center">
+        <p class="credits">
+            Made with <span class="love">♥</span> by <a class="credits-link" href="http://zenorocha.com/">Zeno Rocha</a> under <a class="credits-link" href="http://zenorocha.mit-license.org/">MIT license</a>
+        </p>
+    </footer>
 
     <!-- Clipboard.js -->
     <script src="dist/clipboard.min.js"></script>
@@ -76,8 +99,18 @@
     </script>
 
     <!-- Highlight.js -->
-    <link rel="stylesheet" href="bower_components/highlightjs/styles/github.css">
     <script src="bower_components/highlightjs/highlight.pack.min.js"></script>
     <script>hljs.initHighlightingOnLoad();</script>
+
+    <!-- Google Analytics -->
+    <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (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-4114546-44', 'auto');
+    ga('send', 'pageview');
+    </script>
 </body>
 </html>