Update

aliceperez · Apr 3, 2015 · 745119e · 745119e
1 parent 58a3ccf
commit 745119e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/public/index.html b/public/index.html
@@ -126,14 +126,20 @@ <h2>Use your OWN data</h2>
         You can use it to create a <strong>fake API</strong> in seconds with <strong>zero coding</strong>.
       </p>
 
-      <pre>
-        <code class="bash">$ npm install -g json-server</code>
-      </pre>
+      <pre><code class="bash">$ npm install -g json-server</code></pre>
+
+      <a href="https://github.com/typicode/katon" class="more" id="katon">
+        <p>
+          See also katon, a better way to work with dev servers on OS X.
+        </p>
+      </a>
+
+      <a href="http://typicode.github.io/pegasus/" class="more" id="pegasus">
+        <p>
+          See also Pegasus, a JS library that lets you load data while still loading other scripts.
+        </p>
+      </a>
 
-      <p id="os-x">
-        Hey, you seem to be on OS X. Check also <a href="https://github.com/typicode/katon">katon</a>,
-        a development tool I've built.
-      </p>
     </div>
 
     <footer>
@@ -183,7 +189,9 @@ <h2>Use your OWN data</h2>
       // Display os-x element only for OS X users
       var isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
       if (isMac) {
-        document.getElementById('os-x').style.display = 'block'
+        document.getElementById('katon').style.display = 'block'
+      } else {
+        document.getElementById('pegasus').style.display = 'block'
       }
 
       // Tell that jQuery can be used in console

diff --git a/public/style.css b/public/style.css
@@ -30,7 +30,7 @@ header {
   text-align: center;
   padding: 40px 1% 40px 1%;
   font-size: 24px;
-  border-bottom: 1px solid #CCC;
+  border-bottom: 1px solid #DDD;
   margin-bottom: 40px;
 }
 
@@ -46,7 +46,7 @@ p {
 
 footer {
   text-align: center;
-  border-top: 1px solid #CCC;
+  border-top: 1px solid #DDD;
 }
 
 h2 {
@@ -59,7 +59,7 @@ a {
 }
 
 a:hover {
-  text-decoration: underline  ;
+  text-decoration: underline;
 }
 
 pre, #result {
@@ -101,17 +101,22 @@ td.verb {
   width: 90px;
 }
 
-#os-x {
+a.more {
+  text-decoration: none;
+}
+
+.more {
   display: none;
-  background: rgb(103, 0, 255);
-  color: white;
+  border: 1px dashed #D9DDB3;
   font-weight: 200;
+  margin: 30px 0 15px 0;
   padding: 10px;
+  background-color: #FDFFE9;
+  color: #3F4134;
 }
 
-#os-x a {
-  color: white;
-  text-decoration: underline;
+.more p {
+  margin: 0;
 }
 
 @media (max-width: 700px) {