tons of logic and performance improvements

The main aim is a more logical DOM structure and more performant CSS.

5 files changed, 110 insertions, 125 deletions

diff --git a/pyblog b/pyblog
index 0cba605a..8f8e19d0 100755
--- a/pyblog
+++ b/pyblog
@@ -289,7 +289,7 @@ def generate_index(feed):
 
     # generate TOC
     tocbuff = io.StringIO()
-    tocbuff.write('<div class="indextoc" id="toc">')
+    tocbuff.write('<div class="blog-index" 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
@@ -299,21 +299,21 @@ def generate_index(feed):
             # 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
+            # write a new <h2 class="blog-index-year-title"> tag with the smaller year
             year = date.year
-            tocbuff.write(u'\n<h2 class="toc" id="{0}">{0}</h2>\n\n'.format(year))
-            tocbuff.write(u'<table>\n')
+            tocbuff.write(u'\n<h2 class="blog-index-year-title" id="{0}">{0}</h2>\n\n'.format(year))
+            tocbuff.write(u'<table class="blog-index-yearly-index">\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>
+        #     <td class="blog-index-post-date"><time class="date" datetime="2015-05-05T00:06:04-0700">May 5</time></td>
+        #     <td class="blog-index-post-title">[Blah blah](/blog/2015-05-04-blah-blah.html)</td>
         #   </tr>
         monthday = date.strftime("%b %d")
-        tocbuff.write(u'<tr><td class="date"><time class="tocdate" datetime="%s">%s</time></td>'
-                      '<td class="title">[%s](%s)</td></tr>\n' %
+        tocbuff.write(u'<tr><td class="blog-index-post-date"><time class="date" datetime="%s">%s</time></td>'
+                      '<td class="blog-index-post-title">[%s](%s)</td></tr>\n' %
                       (date.isoformat(), monthday, entry.title_text, entry.relpath))
     if table_opened:
         tocbuff.write(u'</table>\n')
@@ -395,8 +395,8 @@ def generate_sitemap(feed):
         updated = None
         with open(fullpath, encoding="utf-8") as htmlobj:
             soup = bs4.BeautifulSoup(htmlobj.read(), "lxml")
-            if soup.article.footer is not None:
-                updated_tag = soup.article.footer.find(attrs={"class": "updated"})
+            if soup.footer is not None:
+                updated_tag = soup.footer.find(attrs={"class": "updated"})
                 if updated_tag is not None:
                     updated = dateutil.parser.parse(updated_tag.text)
         sitemap.append(make_sitemap_url_element(link, updated, "monthly", 0.9))
@@ -518,8 +518,6 @@ def generate_index_and_feed():
                     article = soup.article
                     if article.header is not None:
                         tags_to_remove.append(article.header)
-                    if article.footer is not None:
-                        tags_to_remove.append(article.footer)
                     # mark line numbers for removal
                     for line_number_span in article.find_all("span",
                                                              attrs={"class": "line-number"}):
diff --git a/source/css/theme-narrow.css b/source/css/theme-narrow.css
index 56328225..86d78443 100644
--- a/source/css/theme-narrow.css
+++ b/source/css/theme-narrow.css
@@ -1,34 +1,29 @@
-nav {
-    position: static;
-    margin: 5% 0 0 0;
-    text-align: center;
-    height: 100%;
-    width: 100%;
+body {
+    margin: 40px 0 100px 0;
 }
 
-nav div {
-    text-align: center;
-    margin: auto;
+.nav {
+    position: static;
+    width: 100%;
+    height: 150px;
+    margin: 20px 0;
 }
 
-nav div .blog-icon {
-    margin: 0;
-    height: 150px;
+.nav-icon {
     width: 150px;
+    height: 150px;
     background-image: url("/img/icon-150.png");
     background-image: -webkit-image-set( url("/img/icon-150.png") 1x, url("/img/icon-300.png") 2x );
     background-size: 150px;
 }
 
-nav div.title, div.author {
+.nav-title, .nav-author {
     height: 0;
     width: 0;
     visibility: hidden;
     pointer-events: none;
 }
 
-article {
-    position: static;
+.content, .content-separator, .footer {
     width: 80%;
-    margin: 2% 10% 10% 10%;
 }
diff --git a/source/css/theme-wide.css b/source/css/theme-wide.css
index e981c014..9dfcf8fb 100644
--- a/source/css/theme-wide.css
+++ b/source/css/theme-wide.css
@@ -1,4 +1,3 @@
-article {
+.content, .content-separator, .footer {
     width: 50%;
-    left: 25%;
 }
diff --git a/source/css/theme.css b/source/css/theme.css
index 6198d979..b110ded5 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -2,21 +2,19 @@ body {
     color: #333;
     font-family: "PT Serif", serif;
     font-size: 10.99pt;
+    margin: 100px 0;
 }
 
-nav {
+.nav {
     position: fixed;
     left: 5%;
-    top: 10%;
+    top: 90px;
     height: 150px;
     width: 100px;
-}
-
-nav div {
     text-align: center;
 }
 
-nav div .blog-icon {
+.nav-icon {
     margin: 2px 0;
     width: 100px;
     height: 100px;
@@ -30,60 +28,58 @@ nav div .blog-icon {
     font-size: 0;
 }
 
-nav div.title {
+.nav-title {
     font-size: 16px;
     font-weight: bold;
     margin: 1px 0;
 }
 
-nav div.author {
+.nav-author {
     font-size: 12px;
 }
 
-nav a {
+.nav-link {
     text-decoration: none;
 }
 
-article {
-    position: absolute;
+.content, .content-separator, .footer {
     width: 60%;
-    margin: 5% 0;
-    left: 20%;
-    font-size: 1em;
-    text-align: justify;
+    margin: 0 auto;
 }
 
-article code {
-    font-size: 0.95em;
+.content-separator {
+    margin: 15px auto 3px auto;
 }
 
-h1.title {
+.content {
+    text-align: justify;
+}
+
+h1 {
     text-align: center;
     font-size: 1.65em;
+    font-weight: bold;
 }
 
 h2 {
     text-align: center;
     font-size: 1.27em;
+    font-weight: bold;
 }
 
-h2.meta {
+.article-metadata {
     font-size: 1em;
     font-weight: normal;
     font-style: italic;
 }
 
-h2.toc {
-    text-align: left;
-}
-
-h3 {
-    font-size: 1.1em;
+a {
+    color: #333;
 }
 
 code {
+    font-size: 0.95em;
     font-family: 'Droid Sans Mono', 'Courier', monospace;
-    font-weight: thin;
 }
 
 pre {
@@ -103,6 +99,38 @@ pre code {
     line-height: 135%;
 }
 
+blockquote {
+    margin: 0;
+    padding: 0 1em;
+    font-style: italic;
+    border-left: 0.4em solid #ddd;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.figure .caption {
+    text-align: center;
+    font-size: 0.91em;
+}
+
+.figure .caption code {
+    font-size: 0.87em;
+}
+
+noscript {
+    color: #ccc;
+}
+
+noscript a {
+    color: #ccc;
+}
+
 .line-number {
     position: absolute;
     left: 0;
@@ -124,26 +152,19 @@ pre code {
     vertical-align: .3em;
 }
 
-blockquote {
-    margin: 0;
-    padding: 0 1em;
-    font-style: italic;
-    border-left: 0.4em solid #ddd;
-}
-
-div.footnotes {
+.footnotes {
     font-size: 0.91em;
 }
 
-div.footnotes p {
+.footnotes p {
     margin: 0.6em 0;
 }
 
-div.footnotes code {
+.footnotes code {
     font-size: 0.87em;
 }
 
-a.footnotes-backlink {
+.footnotes-backlink {
     margin-left: 0.2em;
     font-size: 1.2em;
     vertical-align: -0.2em;
@@ -151,45 +172,24 @@ a.footnotes-backlink {
     text-decoration: none;
 }
 
-a.footnotes-backlink:hover {
+.footnotes-backlink:hover {
     background-color: #bbb;
     color: #fff;
 }
 
-img {
-    display: block;
-    max-width: 100%;
-    max-height: 100%;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.figure .caption {
-    text-align: center;
-    font-size: 0.91em;
-}
-
-.figure .caption code {
-    font-size: 0.87em;
-}
-
-a {
-    color: #333;
-}
-
-footer .lfooter {
+.lfooter {
     float: left;
 }
 
-footer .lfooter .updated:before {
+.lfooter .updated:before {
     content: "Last updated: "
 }
 
-footer .rfooter {
+.rfooter {
     float: right;
 }
 
-footer .rfooter .cc-icon {
+.cc-icon {
     width: 16px;
     height: 16px;
     margin: 0 2px;
@@ -203,7 +203,7 @@ footer .rfooter .cc-icon {
     font-size: 0;
 }
 
-footer .rfooter .atom-icon {
+.atom-icon {
     width: 16px;
     height: 16px;
     margin: 0 2px;
@@ -217,7 +217,7 @@ footer .rfooter .atom-icon {
     font-size: 0;
 }
 
-footer .rfooter .rss-icon {
+.rss-icon {
     width: 16px;
     height: 16px;
     margin: 0 2px;
@@ -231,22 +231,20 @@ footer .rfooter .rss-icon {
     font-size: 0;
 }
 
-div.indextoc table {
-    margin-left: 1em;
-}
+/* blog index */
 
-div.indextoc td {
-    vertical-align: top;
+.blog-index-year-title {
+    text-align: left;
 }
 
-div.indextoc td.date {
-    width: 5em;
+.blog-index-yearly-index {
+    margin-left: 1em;
 }
 
-noscript {
-    color: #ccc;
+.blog-index td {
+    vertical-align: top;
 }
 
-noscript a {
-    color: #ccc;
+.blog-index-post-date {
+    width: 5em;
 }
diff --git a/templates/template.html b/templates/template.html
index 6d28a581..0805c3b8 100644
--- a/templates/template.html
+++ b/templates/template.html
@@ -48,34 +48,30 @@ ga('send', 'pageview');
 </script>
 </head>
 <body>
-<nav>
-<div><a class="blog-icon" href="/">blog icon</a></div>
-<div class="title"><a href="/">dl? cmplnts?</a></div>
-<div class="author">by <a href="https://github.com/zmwangx" target="_blank">Zhiming Wang</a></div>
+<nav class="nav">
+<a class="nav-icon" href="/">blog icon</a>
+<div class="nav-title"><a href="/" class="nav-link">dl? cmplnts?</a></div>
+<div class="nav-author">by <a href="https://github.com/zmwangx" class="nav-link" target="_blank">Zhiming Wang</a></div>
 </nav>
-<article>
+<article class="content">
 $if(title)$
-<header>
-<h1 class="title">$title$</h1>
+<header class="article-header">
+<h1 class="article-title">$title$</h1>
 $if(subtitle)$
-<h1 class="subtitle">$subtitle$</h1>
+<h1 class="article-subtitle">$subtitle$</h1>
 $endif$
-<h2 class="meta">
+<h2 class="article-metadata">
 $if(date-display)$
-<time class="timestamp" $if(date)$datetime="$date$"$endif$>$date-display$,</time>
+<time class="article-timestamp" $if(date)$datetime="$date$"$endif$>$date-display$,</time>
 $endif$
-by <span class="author">Zhiming Wang</span>
+by <span class="article-author">Zhiming Wang</span>
 </h2>
 </header>
 $endif$
-$if(toc)$
-<div id="$idprefix$TOC">
-$toc$
-</div>
-$endif$
 $body$
-<footer>
-<hr/>
+</article>
+<hr class="content-separator"/>
+<footer class="footer">
 $if(updated)$
 <span class="lfooter">
 <time class="updated" datetime="$updated$"><code>$updated$</code></time>
@@ -86,6 +82,5 @@ $endif$
 <a href="https://github.com/zmwangx" target="_blank">Zhiming Wang</a>
 </span>
 </footer>
-</article>
 </body>
 </html>