Style cleanup

ext/bg/js/templates.js

@@ -76,7 +76,7 @@ templates['kanji-list.html'] = template({"1":function(container,depth0,helpers,p
 },"usePartial":true,"useData":true});
 templates['term.html'] = template({"1":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", buffer = 
-  "    <div class=\"term\"><ruby>";
+  "    <div class=\"term-expression\"><ruby>";
   stack1 = ((helper = (helper = helpers.kanjiLinks || (depth0 != null ? depth0.kanjiLinks : depth0)) != null ? helper : alias2),(options={"name":"kanjiLinks","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data}),(typeof helper === alias3 ? helper.call(alias1,options) : helper));
   if (!helpers.kanjiLinks) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
@@ -89,7 +89,7 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
   return container.escapeExpression(((helper = (helper = helpers.expression || (depth0 != null ? depth0.expression : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"expression","hash":{},"data":data}) : helper)));
 },"4":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, buffer = 
-  "    <div class=\"term\">";
+  "    <div class=\"term-expression\">";
   stack1 = ((helper = (helper = helpers.kanjiLinks || (depth0 != null ? depth0.kanjiLinks : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"kanjiLinks","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},options) : helper));
   if (!helpers.kanjiLinks) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
@@ -97,7 +97,7 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
 },"6":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "    <div class=\"rules\">\n"
+  return "    <div class=\"term-rules\">\n"
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.rules : depth0),{"name":"each","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </div>\n";
 },"7":function(container,depth0,helpers,partials,data) {
@@ -113,7 +113,7 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
 },"10":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "    <div class=\"tags\">\n"
+  return "    <div class=\"term-tags\">\n"
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.tags : depth0),{"name":"each","hash":{},"fn":container.program(11, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </div>\n";
 },"11":function(container,depth0,helpers,partials,data) {
@@ -133,13 +133,13 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, alias1=depth0 != null ? depth0 : {};
 
-  return "<div class=\"definition\">\n"
+  return "<div class=\"term-definition\">\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.reading : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(4, data, 0),"data":data})) != null ? stack1 : "")
     + "\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.rules : depth0),{"name":"if","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.tags : depth0),{"name":"if","hash":{},"fn":container.program(10, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "\n    <div class=\"glossary\">\n        <ol>\n"
+    + "\n    <div class=\"term-glossary\">\n        <ol>\n"
     + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(13, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "        </ol>\n    </div>\n</div>\n";
 },"useData":true});

ext/fg/css/frame.css

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+/* common styles */
+
 body {
     background-color: #fff;
     color:            #333;
@@ -26,35 +28,18 @@ body {
     padding:          5px;
 }
 
-.term {
-    font-family: serif;
-    font-size:   24px;
-    display:     inline-block;
-}
-
-.term a {
-    border-bottom:   1px #777 dashed;
-    color:           #333;
-    text-decoration: none;
-}
-
-.rules {
-    color:   #777;
-    display: inline-block;
-}
-
 .tag {
-    border-radius:    0.25em;
+    border-radius:  0.25em;
-    color:            #fff;
+    color:          #fff;
-    cursor:           default;
+    cursor:         default;
-    display:          inline;
+    display:        inline;
-    font-size:        75%;
+    font-size:      75%;
-    font-weight:      700;
+    font-weight:    700;
-    line-height:      1;
+    line-height:    1;
-    padding:          0.2em 0.6em 0.3em;
+    padding:        0.2em 0.6em 0.3em;
-    text-align:       center;
+    text-align:     center;
-    vertical-align:   baseline;
+    vertical-align: baseline;
-    white-space:      nowrap;
+    white-space:    nowrap;
 }
 
 .tag-default {
@@ -73,18 +58,39 @@ body {
     background-color: #0275d8;
 }
 
-ol {
+/* term styles */
+
+.term-expression {
+    display:     inline-block;
+    font-family: serif;
+    font-size:   24px;
+}
+
+.term-expression a {
+    border-bottom:   1px #777 dashed;
+    color:           #333;
+    text-decoration: none;
+}
+
+.term-rules {
+    color:   #777;
+    display: inline-block;
+}
+
+.term-glossary ol {
     padding-left: 1.2em;
 }
 
-li {
+.term-glossary li {
     color: #777;
 }
 
-li span {
+.term-glossary li span {
     color: #000;
 }
 
+/* kanji styles */
+
 .kanji-glyph {
     float:          left;
     font-family:    "KanjiStrokeOrders";

util/tmpl/term.html

@@ -1,12 +1,12 @@
-<div class="definition">
+<div class="term-definition">
     {{#if reading}}
-    <div class="term"><ruby>{{#kanjiLinks}}{{expression}}{{/kanjiLinks}}<rt>{{reading}}</rt></ruby></div>
+    <div class="term-expression"><ruby>{{#kanjiLinks}}{{expression}}{{/kanjiLinks}}<rt>{{reading}}</rt></ruby></div>
     {{else}}
-    <div class="term">{{#kanjiLinks}}{{expression}}{{/kanjiLinks}}</div>
+    <div class="term-expression">{{#kanjiLinks}}{{expression}}{{/kanjiLinks}}</div>
     {{/if}}
 
     {{#if rules}}
-    <div class="rules">
+    <div class="term-rules">
         {{#each rules}}
         <span class="rule">{{.}}</span> {{#unless @last}}&laquo;{{/unless}}
         {{/each}}
@@ -14,14 +14,14 @@
     {{/if}}
 
     {{#if tags}}
-    <div class="tags">
+    <div class="term-tags">
         {{#each tags}}
         <span class="tag tag-{{class}}" title="{{desc}}">{{name}}</span>
         {{/each}}
     </div>
     {{/if}}
 
-    <div class="glossary">
+    <div class="term-glossary">
         <ol>
             {{#each glossary}}
             <li><span>{{.}}</span></li>