WIP

ext/bg/js/templates.js

@@ -17,9 +17,8 @@ templates['header.html'] = template({"compiler":[7,">= 4.0.0"],"main":function(c
 templates['kanji.html'] = template({"1":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "        <dl>\n            <dt>Kunyomi</dt>\n"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.kunyomi : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "        </dl>\n";
+  return "            <dt>Kunyomi</dt>\n"
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.kunyomi : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
 },"2":function(container,depth0,helpers,partials,data) {
     return "            <dd>"
     + container.escapeExpression(container.lambda(depth0, depth0))
@@ -27,9 +26,8 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
 },"4":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "        <dl>\n            <dt>Onyomi</dt>\n"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.onyomi : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "        </dl>\n";
+  return "            <dt>Onyomi</dt>\n"
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.onyomi : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
 },"6":function(container,depth0,helpers,partials,data) {
     return "            <li><span>"
     + container.escapeExpression(container.lambda(depth0, depth0))
@@ -39,11 +37,11 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
 
   return "<div class=\"definition\">\n    <div class=\"kanji\">"
     + 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    <div class=\"readings\">\n"
+    + "</div>\n\n    <div class=\"readings\">\n        <dl>\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.kunyomi : 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.onyomi : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "    </div>\n\n    <div class=\"glossary\">\n        <ol>\n"
+    + "        </dl>\n    </div>\n\n    <div class=\"glossary\">\n        <ol>\n"
     + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "        </ol>\n    </div>\n</div>\n";
 },"useData":true});

ext/fg/css/frame.css

@@ -44,7 +44,16 @@ body {
 }
 
 .kanji {
+    background-color: #eee;
+    display:          inline-block;
     font-size:        82px;
+    line-height:      82px;
+    vertical-align:   top;
+}
+
+.readings {
+    display:        inline-block;
+    vertical-align: top;
 }
 
 .tag {

util/tmpl/kanji.html

@@ -2,23 +2,21 @@
     <div class="kanji">{{character}}</div>
 
     <div class="readings">
-        {{#if kunyomi}}
         <dl>
+            {{#if kunyomi}}
             <dt>Kunyomi</dt>
             {{#each kunyomi}}
             <dd>{{.}}</dd>
             {{/each}}
-        </dl>
             {{/if}}
 
             {{#if onyomi}}
-        <dl>
             <dt>Onyomi</dt>
             {{#each onyomi}}
             <dd>{{.}}</dd>
             {{/each}}
-        </dl>
             {{/if}}
+        </dl>
     </div>
 
     <div class="glossary">