Kanji page cleanup

ext/bg/js/templates.js

@@ -46,15 +46,15 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : {};
 
-  return "<div class=\"definition\">\n    <div class=\"kanji-info kanji-glyph\">"
+  return "<div class=\"kanji-definition\">\n    <div class=\"kanji-glyph\">"
     + container.escapeExpression(((helper = (helper = helpers.character || (depth0 != null ? depth0.character : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"character","hash":{},"data":data}) : helper)))
-    + "</div>\n\n    <dl class=\"kanji-info\">\n"
+    + "</div>\n    <div class=\"kanji-info\">\n        <dl>\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.kunyomi : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.onyomi : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "    </dl>\n</div>\n</div>\n";
+    + "        </dl>\n    </div>\n</div>\n</div>\n";
 },"useData":true});
 templates['kanji-link.html'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var helper;

ext/fg/css/frame.css

@@ -73,17 +73,6 @@ body {
     background-color: #0275d8;
 }
 
-.kanji-glyph {
-    font-family:      "KanjiStrokeOrders";
-    font-size:        140px;
-    line-height:      140px;
-    vertical-align:   top;
-}
-
-.kanji-info {
-    display: inline-block;
-}
-
 ol {
     padding-left: 1.2em;
 }
@@ -96,23 +85,25 @@ li span {
     color: #000;
 }
 
-dl {
-    padding: 0.5em;
+.kanji-glyph {
+    float:          left;
+    font-family:    "KanjiStrokeOrders";
+    font-size:      140px;
+    line-height:    140px;
+    padding:        0.01em;
+    vertical-align: top;
 }
 
-dt {
-    float: left;
-    clear: left;
-    width: 100px;
-    text-align: right;
+.kanji-info {
+    display:  block;
+    overflow: hidden;
+}
+
+.kanji-info dt {
     font-weight: bold;
 }
 
-dt:after {
-    content: ":";
+.kanji-info dd {
+    margin-left: 1.2em;
 }
 
-dd {
-    margin: 0 0 0 110px;
-    padding: 0 0 0.5em 0;
-}

util/tmpl/kanji.html

@@ -1,7 +1,7 @@
-<div class="definition">
-    <div class="kanji-info kanji-glyph">{{character}}</div>
-
-    <dl class="kanji-info">
+<div class="kanji-definition">
+    <div class="kanji-glyph">{{character}}</div>
+    <div class="kanji-info">
+        <dl>
             {{#if glossary}}
             <dt>Meanings</dt>
             <dd>
@@ -31,3 +31,4 @@
         </dl>
     </div>
 </div>
+</div>