gdd grid; hosting

src/views/bf-gdd.tpl

@@ -2,13 +2,32 @@
 % rebase('frame.tpl')
     <div class="content-grid"><div class="center">
 <h1>blessfrey game design document </h1>
-    <p>The vision for Blessfrey <br></p>
-    <br>
-    <ul>
+    <p>The vision for Blessfrey</p>
 
-        % for i in ["achievement", "ai", "armor-rating", "attack-loop", "attribute", "attribute-point", "cast", "character", "collision", "controls", "credits", "damage-type", "death-penalty", "design-philosophy", "dialogue", "docs", "environment-effect", "gear", "gig", "groups", "highlight", "ID", "inspect menu",  "inventory", "item", "job", "keyword", "language", "life", "marketing", "mechanics", "Mercur", "milestones", "miracles", "pathfinding", "perk", "pip", "projectile", "proxemics", "punishment", "setting", "skill", "smartphone", "spirit", "status-effect", "story", "style guide", "terms", "vibe", "website", "xp", "xp-bar", "zone"]:
-
-        <li class="list">{{random.choice(['.','•','☆','★'])}}&#9;<a href=/blessfrey-gdd/{{i}}>{{i}}</a></li>
+    <table>
+    % # find longest column, since html tables need to be doled out row by row
+    % longcol = topics[0]
+    % for t in topics:
+        % if len(t) > len(longcol):
+            % longcol = t    
         % end
-    </ul>
+    % end
+
+
+    % # build a table out of an array that looks like [[col1 items],[col2 items],[col3 items]]
+    % i = 0
+    % for k in range(len(longcol)):
+        <tr>
+        % for j in topics:
+            % if len(j) > i:
+            <td><a href=/blessfrey-gdd/{{j[i]}}>{{j[i]}}</a></td>
+            % else:
+            <td></td>
+            % end
+        % end
+        </tr>
+        % i += 1
+    % end
+    </table>
+
     </div></div>