make interact more button-like and clearer

commonmark · Jun 4, 2016 · bb6b5ff · bb6b5ff
1 parent 36d2b7e
commit bb6b5ff
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git 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
@@ -44,7 +44,7 @@
            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 @@
  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: "[";
 }