From 2d4500b61fe0895dfb3d19c2ee3d6def7931119c Mon Sep 17 00:00:00 2001
From: Dan Holmsand <holmsand@gmail.com>
Date: Tue, 13 Oct 2015 13:03:07 +0200
Subject: [PATCH] Tweak demo site styling a little

---
 demo/reagentdemo/news/news050.cljs | 19 ++-------
 site/public/css/main.css           | 66 +++++++++++++++++++++---------
 2 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/demo/reagentdemo/news/news050.cljs b/demo/reagentdemo/news/news050.cljs
index a571d65..acfb9da 100644
--- a/demo/reagentdemo/news/news050.cljs
+++ b/demo/reagentdemo/news/news050.cljs
@@ -9,7 +9,7 @@
 (def url "/news/news050.html")
 (def title "News in 0.5.0")
 
-(def new-in-alpha [:strong "New since 0.5.0-alpha: "])
+(def new-in-alpha nil)
 
 (def ns-src (s/syntaxed "(ns example
   (:require [reagent.core :as r]))"))
@@ -29,24 +29,11 @@
    [:input {:value @val
             :on-change #(reset! val (.-target.value %))}]])
 
-(defn name-part [key]
-  (get-in @person [:name key]))
-
-(def track reagent.ratom/track)
-
-(defn foo [])
-
 (defn name-edit [n]
   (let [{:keys [first-name last-name]} @n]
     [:div
      [:p "I'm editing " first-name " " last-name "."]
-     [:p "I'm editing " @(track name-part :first-name) " "
-      @(track name-part :last-name) "."]
-     [:p "I'm editing " @(track name-part :first-name) " "
-      @(track name-part :last-name) "."]
-     [:p "I'm editing " @(track name-part :first-name) " "
-      @(track name-part :last-name) "."]
-     
+
      [input "First name: " (r/wrap first-name
                                    swap! n assoc :first-name)]
      [input "Last name:  " (r/wrap last-name
@@ -224,7 +211,7 @@
        the getter function will re-run to change the value of the
        cursor just like a Reagent component does."]
 
-       [:h3 "Values and references"]
+       [:h2 "Values and references"]
 
        [:p "So what’s the difference between wraps and cursors? Why
        have both?"]
diff --git a/site/public/css/main.css b/site/public/css/main.css
index 4cd17e8..5b38162 100644
--- a/site/public/css/main.css
+++ b/site/public/css/main.css
@@ -15,6 +15,11 @@
     clear: both;
 }
 
+body {
+    background-color: #eeeeec;
+    text-rendering: optimizeLegibility;
+}
+
 div.nav {
     position: absolute;
     top: 0;
@@ -27,7 +32,7 @@ ul.nav {
     width: 750px;
     height: 40px;
     padding-left: 60px;
-    padding-top: 10px;
+    padding-top: 18px;
     list-style-type: none;
 }
 
@@ -39,7 +44,7 @@ ul.nav > li {
 ul.nav > li > a {
     text-decoration: none;
     text-transform: uppercase;
-    letter-spacing: 3px;
+    letter-spacing: 4px;
     font-size: 11px;
     color: #777;
 }
@@ -66,12 +71,12 @@ ul.nav > li.brand > a {
 .reagent-demo {
     background-color: #fff;
     margin: 60px -100px;
-    padding: 36px 60px;
+    padding: 29px 60px 45px 60px;
 }
 
 .reagent-demo > h1 {
     font-size: 48px;
-    color: #555;
+    color: rgba(0, 0, 0, 0.75);
     font-family: 'HelveticaNeue-Light', 'Helvetica Neue', arial;
     font-weight: normal;
     line-height: 1.25em;
@@ -111,24 +116,30 @@ ul.nav > li.brand > a {
 }
 
 .reagent-demo h2 {
-    font-size: 20px;
-    line-height: 1.25em;
-    margin-top: 48px;
-    color: #555;
+    font-size: 19px;
+    line-height: 26px;
+    margin-top: 45px;
+    margin-bottom: 3px;
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.reagent-demo h2 + p {
+    margin-top: 0;
 }
 
 .demo-text > p, .demo-text > ul {
     font-family: georgia, serif;
     font-size: 18px;
-    line-height: 1.5em;
-    color: #444;
+    line-height: 1.611em;
+    color: rgba(0, 0, 0, 0.8);
+    margin-bottom: 29px;
+    margin-top: 29px;
 }
 
 .demo-text > p > code, .demo-text > ul > li > code {
-    font-size: 17px;
-    color: #554;
-    background-color: #f6f6f2;
-    padding: 0 2px;
+    font-size: 16px;
+    background-color: #f5f5f2;
+    padding: 0 3px;
 }
 
 .demo-text > ul > li {
@@ -136,17 +147,28 @@ ul.nav > li.brand > a {
 }
 
 .demo-example {
-    background-color: #ebebeb;
+    background-color: #f3f3f2;
 }
 
 .demo-source {
-    background-color: #f8f8f5;
-    color: #555;
+    background-color: #fbfbfa;
+    color: rgba(0, 0, 0, 0.75);
+}
+
+.demo-source pre {
+    font-family: Consolas, Menlo, Courier, monospace;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.demo-example div, .demo-example p {
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 1.2em;
 }
 
 .demo-example, .demo-source {
-    margin: 0px -22px;
-    padding: 22px 22px;
+    margin: 0px -60px;
+    padding: 21px 60px;
 }
 
 .simple-demo, .simple-demo input {
@@ -155,13 +177,17 @@ ul.nav > li.brand > a {
 
 .demo-heading {
     margin-top: 0;
-    color: #999;
+    color: #aaa;
     font-size: 14px;
+    line-height: 29px;
+    margin-top: 3px;
 }
 
 .demo-example-hide {
+    margin-top: 3px;
     float: right;
     cursor: pointer;
+    color: #bbb;
 }
 
 .news-read-more {