Fix templates

src/diffenator2/templates/_base.html

@@ -211,37 +211,6 @@ <h2>{% block content_name %}{% endblock %}</h2>
 		fontToggle.addEventListener("click", switchFonts);
 	}
 
-	function render(node, toplevel) {
-		var wrapper = $("<div> </div>");
-		if (!node) { return wrapper }
-		if (Array.isArray(node)) {
-			var before = $("<span/>");
-			before.addClass("attr-before");
-			before.html(" " + node[0] + " ");
-			var after = $("<span/>");
-			after.addClass("attr-after");
-			after.append(node[1]);
-			wrapper.append(before);
-			wrapper.append(after);
-			return wrapper
-		}
-		for (const [key, value] of Object.entries(node)) {
-			var display = $("<div/>");
-			display.addClass("node")
-			if (!toplevel && ! key.match(/^\d+$/)) {
-				display.hide()
-			}
-			display.append(key);
-			display.append(render(value, false).children());
-			wrapper.append(display)
-		}
-		return wrapper
-
-	}
-	$(function() {
-		$("#difftable").append(render(fontdiff, true).children())
-		$(".node").on("click", function(event){ $(this).children().toggle(); event.stopPropagation() })
-	});
     {% block js %}
 	{% endblock %}
 

src/diffenator2/templates/diffbrowsers_glyphs.html

@@ -22,7 +22,7 @@
   {% for font_class in font_styles or font_styles_old or font_styles_new %}
       <div class="box">
 	<div class="box-title">{{ font_class.class_name }} {{ pt_size }}pt</div>
-	  <span class="{{ font_class.class_name }}" style="font-size: {{ pt_size }}pt">
+	  <span class="box-text {{ font_class.class_name }}" style="font-size: {{ pt_size }}pt">
 	    {% for character in characters %}
 	      <div class="cell">{{ character }}</div>
 	    {% endfor %}

src/diffenator2/templates/diffbrowsers_waterfall.html

@@ -8,13 +8,13 @@
   {% for font_class in font_styles or font_styles_old or font_styles_new %}
     {% for pt_size in [7, 10, 11, 12, 14, 16, 18, 21, 27, 32] %}
       <div class="box">
-	<div class="box-title">{{ font_class.class_name }} {{ pt_size }}pt</div>
-	<span class="{{ font_class.class_name }}" style="font-size: {{ pt_size }}pt">
+        <div class="box-title">{{ font_class.class_name }} {{ pt_size }}pt</div>
+        <div class="box-text {{ font_class.class_name }}" style="font-size: {{ pt_size }}pt">
             QUICK WAFTING ZEPHYRS VEX BOLD JIM.<br>
             quick wafting zephyrs vex bold jim.<br>
             $14.95<br>
-          </span>
-       </div>
+        </div>
+      </div>
     {% endfor %}
   {% endfor %}
 {% endblock %}

src/diffenator2/templates/diffenator.html

@@ -113,6 +113,37 @@
   {% endfor %}
 {% endblock %}
 {% block js %}
+	function render(node, toplevel) {
+		var wrapper = $("<div> </div>");
+		if (!node) { return wrapper }
+		if (Array.isArray(node)) {
+			var before = $("<span/>");
+			before.addClass("attr-before");
+			before.html(" " + node[0] + " ");
+			var after = $("<span/>");
+			after.addClass("attr-after");
+			after.append(node[1]);
+			wrapper.append(before);
+			wrapper.append(after);
+			return wrapper
+		}
+		for (const [key, value] of Object.entries(node)) {
+			var display = $("<div/>");
+			display.addClass("node")
+			if (!toplevel && ! key.match(/^\d+$/)) {
+				display.hide()
+			}
+			display.append(key);
+			display.append(render(value, false).children());
+			wrapper.append(display)
+		}
+		return wrapper
+
+	}
+	$(function() {
+		$("#difftable").append(render(fontdiff, true).children())
+		$(".node").on("click", function(event){ $(this).children().toggle(); event.stopPropagation() })
+	});
 
 function wordBreaks() {
   words = document.getElementsByClassName("cell-word")