From bb6b5ffbbbc1c5bab01138beaf68502c7a2e27b3 Mon Sep 17 00:00:00 2001
From: Jeff Atwood <jatwood@codinghorror.com>
Date: Sat, 4 Jun 2016 15:14:51 -0700
Subject: make interact more button-like and clearer

---
 tools/make_spec.lua |  2 +-
 tools/template.html | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

(limited to 'tools')

diff --git a/tools/make_spec.lua b/tools/make_spec.lua
index 3425f35..60bcb18 100644
--- a/tools/make_spec.lua
+++ b/tools/make_spec.lua
@@ -209,7 +209,7 @@ local create_anchors = function(doc, meta, to)
         local examplenum_div = make_html_block('div', {{'class', 'examplenum'}})
         local interact_link = make_html_inline('a', {{'class', 'dingus'},
                     {'title', 'open in interactive dingus'}})
-        cmark.node_append_child(interact_link, make_text("(interact)"))
+        cmark.node_append_child(interact_link, make_text("Try It"))
         local examplenum_link = cmark.node_new(cmark.NODE_LINK)
         cmark.node_set_url(examplenum_link, '#example-' .. tostring(example))
         cmark.node_append_child(examplenum_link,
diff --git a/tools/template.html b/tools/template.html
index ca63146..2bc32c0 100644
--- a/tools/template.html
+++ b/tools/template.html
@@ -44,7 +44,7 @@ pre > code { background-color: transparent; }
            padding-bottom: 6pt; }
 .column pre  { font-size: 11pt; padding-left: 6pt; padding-right: 6pt;
                padding-top: 2pt; padding-bottom: 2pt; }
-div.examplenum { font-size: 11pt; text-align: left; }
+div.examplenum { font-size: 11pt; text-align: left; margin-bottom:10px; }
 div.column { display: inline-block; width: 50%; vertical-align: top; }
 div.example > div:nth-child(2) { clear:left; background-color: #D3E1E4; }
 div.example > div:nth-child(3) { clear:right; background-color: #C9CaCE; }
@@ -60,7 +60,18 @@ div.example > div:nth-child(3) { clear:right; background-color: #C9CaCE; }
  color: white;
 }
 #watermark a { color: white; }
-a.dingus { margin-left: 1em; color: red; cursor: pointer; }
+a.dingus { 
+  margin-left: 1em;
+  cursor: pointer;
+  line-height: 30px;
+  padding: 4px 7px;
+  color: #FFF;
+  background-color: #33C3F0;
+  box-shadow: 2px 2px 2px rgba(0,0,0,.2);
+  border-color: #4FCAEF;
+  border-bottom: 2px #2A9EC1 solid;
+  border-right: 2px #2A9EC1 solid;
+}
 a.footnoteRef > sup:before {
   content: "[";
 }
-- 
cgit v1.2.3