From 92e57f2ebbee55d3bfccbd0216baa092ee5d84b3 Mon Sep 17 00:00:00 2001
From: Nicolas Cusan <nc@arillo.net>
Date: Thu, 10 Jan 2019 22:21:54 +0100
Subject: [PATCH] add install

---
 index.html | 58 +++++++++++++++++++++++++++++++++++++-----------------
 style.css  | 42 +++++++++++++++++++++++++++++++++++----
 2 files changed, 78 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 6f6283f..1026972 100644
--- a/index.html
+++ b/index.html
@@ -38,27 +38,49 @@
         </li>
       </ul>
 
-      <a class="btn" href="compare.html">See it in action</a>
-      <a
-        class="btn btn-outline"
-        href="https://github.com/nicolas-cusan/destyle.css/blob/master/Readme.md"
-      >
-        Docs
-      </a>
+      <div class="install">
+        <code>
+          <a href="https://www.npmjs.com/package/destyle.css">npm</a> install
+          --save destyle.css
+        </code>
 
-      <div class="social">
-        <a href="https://github.com/nicolas-cusan/destyle.css/">
-          <img src="github.svg" alt="View on Github" />
-        </a>
         <a
-          href="https://twitter.com/share?ref_src=twsrc%5Etfw"
-          class="twitter-share-button"
-          data-size="large"
-          data-text="Destyle.css - a clean slate for writing CSS without user agent styles"
-          data-url="https://nicolas-cusan.github.io/destyle.css/"
-          data-show-count="false"
-          >Tweet</a
+          class="install-link"
+          href="https://yarnpkg.com/en/package/destyle.css"
+          >CDN</a
         >
+        <span>–</span>
+        <a
+          class="install-link"
+          href="https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css"
+        >
+          Download
+        </a>
+      </div>
+
+      <div class="actions">
+        <a class="btn" href="compare.html">See it in action</a>
+        <a
+          class="btn btn-outline"
+          href="https://github.com/nicolas-cusan/destyle.css/blob/master/Readme.md"
+        >
+          Docs
+        </a>
+
+        <div class="social">
+          <a href="https://github.com/nicolas-cusan/destyle.css/">
+            <img src="github.svg" alt="View on Github" />
+          </a>
+          <a
+            href="https://twitter.com/share?ref_src=twsrc%5Etfw"
+            class="twitter-share-button"
+            data-size="large"
+            data-text="Destyle.css - a clean slate for writing CSS without user agent styles"
+            data-url="https://nicolas-cusan.github.io/destyle.css/"
+            data-show-count="false"
+            >Tweet</a
+          >
+        </div>
       </div>
     </main>
 
diff --git a/style.css b/style.css
index b5e1bac..8e5bea6 100644
--- a/style.css
+++ b/style.css
@@ -47,7 +47,7 @@ body {
 }
 
 .features {
-  margin-bottom: 60px;
+  margin-bottom: 50px;
 }
 
 .features li {
@@ -67,6 +67,42 @@ body {
   text-decoration: underline;
 }
 
+.install {
+  margin-bottom: 50px;
+  text-align: right;
+}
+
+.install code {
+  display: block;
+  background-color: #f4f4f4;
+  padding: 10px 15px;
+  margin-bottom: 10px;
+  text-align: left;
+}
+
+.install span,
+.install a {
+  color: dodgerblue;
+}
+
+.install a:active,
+.install a:focus,
+.install a:hover {
+  text-decoration: underline;
+}
+
+.install span,
+.install-link {
+  font-size: 90%;
+}
+
+@media (min-width: 500px) {
+  .actions {
+    display: flex;
+    align-items: center;
+  }
+}
+
 .btn {
   background-color: dodgerblue;
   color: #fff;
@@ -101,9 +137,7 @@ body {
 
 @media (min-width: 500px) {
   .social {
-    display: inline-block;
-    vertical-align: middle;
-    margin-left: 40px;
+    margin-left: auto;
     padding-top: 0;
   }
 }