From effd834bd74c3b6a25ebaf59adcab6bd6d29cbdc Mon Sep 17 00:00:00 2001
From: Zhiming Wang <zmwangx@gmail.com>
Date: Fri, 17 Jul 2015 12:31:06 -0700
Subject: index.html TOC: use <table> instead of <ul>

For better formatting.

The following screenshots illustrate the difference:

* https://i.imgur.com/ZfkUpBG.png
* https://i.imgur.com/S6cRK00.png

I also reduced the indentation on the left of each year's index from 2em
to 1em.
---
 pyblog               | 22 +++++++++++++++++-----
 source/css/theme.css | 12 +++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/pyblog b/pyblog
index 6cb0db90..ef6f6d6e 100755
--- a/pyblog
+++ b/pyblog
@@ -292,19 +292,31 @@ def generate_index(feed):
     tocbuff.write('<div class="indextoc" id="toc">')
     year = 10000  # will be larger than the latest year for quite a while
     # recall that entries are in reverse chronological order
+    table_opened = False
     for entry in feed.entries:
         date = entry.updated_datetime
         if date.year < year:
+            # close the previous table if there is one
+            if table_opened:
+                tocbuff.write(u'</table>\n')
             # write a new <h2 class="toc"> tag with the smaller year
             year = date.year
             tocbuff.write(u'\n<h2 class="toc" id="{0}">{0}</h2>\n\n'.format(year))
-
-        # write a new <li> entry (<ul>) in Markdown, in the format:
-        # * <time class="tocdate" datetime="2015-05-05T00:06:04-0700">May 5</time>
-        #   [Blah blah](/blog/2015-05-04-blah-blah.html)
+            tocbuff.write(u'<table>\n')
+            table_opened = True
+
+        # write a new table row entry in Markdown, in the format:
+        #
+        #   <tr>
+        #     <td class="date"><time class="tocdate" datetime="2015-05-05T00:06:04-0700">May 5</time></td>
+        #     <td class="title">[Blah blah](/blog/2015-05-04-blah-blah.html)</td>
+        #   </tr>
         monthday = date.strftime("%b %d")
-        tocbuff.write(u'* <time class="tocdate" datetime="%s">%s</time> [%s](%s)\n' %
+        tocbuff.write(u'<tr><td class="date"><time class="tocdate" datetime="%s">%s</time></td>'
+                      '<td class="title">[%s](%s)</td></tr>\n' %
                       (date.isoformat(), monthday, entry.title_text, entry.relpath))
+    if table_opened:
+        tocbuff.write(u'</table>\n')
     tocbuff.write('</div>')
 
     # create tempfile with index.md and the TOC concatenated, and generate index.html from that
diff --git a/source/css/theme.css b/source/css/theme.css
index 3a01e5b4..cbcb6750 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -185,13 +185,15 @@ footer .rfooter .rss-icon {
     font-size: 0;
 }
 
-div.indextoc ul {
-    list-style-type: none;
-    padding-left: 2em;
+div.indextoc table {
+    margin-left: 1em;
 }
 
-div.indextoc ul li time.tocdate {
-    float: left;
+div.indextoc td {
+    vertical-align: top;
+}
+
+div.indextoc td.date {
     width: 5em;
 }
 
-- 
cgit v1.2.1