Site design refresh part I

Highlights:

* Change font to Times/Times New Roman + Courier;
* Text slightly darkened across the board to account for the thinner
  Times;
* Eliminate line numbers;
* Use custom highlight.css (based on highlight-css supplied by Pandoc,
  but hightlight more classes when Pandoc falls short, e.g., span.im for
  Python from and import).

Closes #5 because we don't have line numbers anymore.

5 files changed, 73 insertions, 68 deletions

diff --git a/README.md b/README.md
index ec5f621b..485c4537 100644
--- a/README.md
+++ b/README.md
@@ -51,15 +51,6 @@ See `process_image_sizes` in [`pyblog`](pyblog).
 
 ### Other HTML transforms
 
-#### Line-numbering in preformatted code blocks
-
-Line numbers are added to preformatted code blocks. Note that this
-transform is only applied to `pre` tags with class `sourceCode lang`,
-where `lang` is any language, so one must use a fenced code block with
-language spec in the Markdown document to take advantage.
-
-See `number_code_lines` in [`pyblog`](pyblog).
-
 #### Link images to originals
 
 `img` tags are automatically converted to clickable links to their
diff --git a/pyblog b/pyblog
index 15ac1bd9..7c76377c 100755
--- a/pyblog
+++ b/pyblog
@@ -29,13 +29,13 @@ import sys
 import tempfile
 import time
 import urllib.parse
-import lxml.etree as ET
 
 import blessed
 import bs4
 import colorama
 import dateutil.parser
 import dateutil.tz
+import lxml.etree as ET
 
 ############################# BLOG CONFIGURATIONS ##############################
 # Safe to customize
@@ -606,16 +606,6 @@ def _pre_tag_insert_line_numbers(soup, pre_tag):
         pre_tag.code.append(ln_tag)
 
 
-def number_code_lines(soup):
-    """Insert line numbers to preformatted code blocks."""
-    for pre_tag in soup.find_all("pre"):
-        if ((pre_tag.code is None or "class" not in pre_tag.attrs or
-             not "sourceCode" in pre_tag["class"])):
-            # not really a block of source code
-            continue
-        _pre_tag_insert_line_numbers(soup, pre_tag)
-
-
 # MARKDOWN EXTENSION!
 #
 # See docstring of process_image_sizes for documentation.
@@ -690,7 +680,6 @@ def postprocess_html_file(htmlfilepath):
         soup = bs4.BeautifulSoup(htmlfileobj.read(), "lxml")
 
         # a series of postprocessing (extensible)
-        number_code_lines(soup)
         process_image_sizes(soup)
         link_img_tags(soup)
         process_footnote_backlinks(soup)
diff --git a/source/css/highlight.css b/source/css/highlight.css
new file mode 100644
index 00000000..665dea4f
--- /dev/null
+++ b/source/css/highlight.css
@@ -0,0 +1,35 @@
+/* Based on Pandoc's Pygments color theme */
+table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
+    margin: 0; padding: 0; vertical-align: baseline; border: none; }
+table.sourceCode { width: 100%; line-height: 100%; }
+td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
+td.sourceCode { padding-left: 5px; }
+code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
+code > span.dt { color: #902000; } /* DataType */
+code > span.dv { color: #40a070; } /* DecVal */
+code > span.bn { color: #40a070; } /* BaseN */
+code > span.fl { color: #40a070; } /* Float */
+code > span.ch { color: #4070a0; } /* Char */
+code > span.st { color: #4070a0; } /* String */
+code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
+code > span.ot { color: #007020; } /* Other */
+code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
+code > span.fu { color: #06287e; } /* Function */
+code > span.er { color: #ff0000; font-weight: bold; } /* Error */
+code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
+code > span.cn { color: #880000; } /* Constant */
+code > span.sc { color: #4070a0; } /* SpecialChar */
+code > span.vs { color: #4070a0; } /* VerbatimString */
+code > span.ss { color: #bb6688; } /* SpecialString */
+code > span.im { color: #007020; font-weight: bold; } /* Import */
+code > span.va { color: #19177c; } /* Variable */
+code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
+code > span.op { color: #666666; } /* Operator */
+code > span.bu { } /* BuiltIn */
+code > span.ex { } /* Extension */
+code > span.pp { color: #bc7a00; } /* Preprocessor */
+code > span.at { color: #7d9029; } /* Attribute */
+code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
+code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
+code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
+code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
diff --git a/source/css/theme.css b/source/css/theme.css
index 74522d24..83ceacb2 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -1,7 +1,7 @@
 body {
-    color: #333;
-    font-family: "PT Serif", serif;
-    font-size: 10.99pt;
+    color: #000;
+    font-family: Times, "Times New Roman", serif;
+    font-size: 16px;
     -webkit-font-smoothing: antialiased;
     margin: 100px 0;
 }
@@ -88,52 +88,61 @@ hr {
 
 h1 {
     text-align: center;
-    font-size: 1.65em;
+    font-size: 150%;
     font-weight: bold;
 }
 
 h2 {
     text-align: center;
-    font-size: 1.27em;
+    font-size: 125%;
     font-weight: bold;
 }
 
 .article-metadata {
     text-align: center;
-    font-size: 1em;
+    font-size: 100%;
     font-weight: normal;
     font-style: italic;
 }
 
 a {
-    color: #333;
+    color: #000;
     word-wrap: break-word;
 }
 
 code {
-    font-size: 0.95em;
-    color: #777;
-    font-family: 'Droid Sans Mono', 'Courier', monospace;
+    font-size: 14px;
+    color: #333;
+    font-family: Courier, monospace;
     white-space: pre-wrap;
     word-wrap: break-word;
 }
 
+h1 code {
+    font-size: 22px;
+    color: #000;
+}
+
+h2 code {
+    font-size: 18px;
+    color: #000
+}
+
 pre {
     padding: 1em;
     background: #fbfbfb;
     border-left: 0.4em solid #ddd;
 }
 
+/* Pandoc wraps pre[class*=sourceCode] in a div tag, so it is necessary to
+eliminate the margins of such pre tags to avoid too much spacing.*/
 pre[class*=sourceCode] {
-    position: relative;
-    padding-left: 2em;
     margin: 0;
 }
 
 pre code {
-    font-size: 0.91em;
-    line-height: 135%;
-    color: #333;
+    font-size: 13px;
+    color: #000;
     white-space: pre;
     word-wrap: normal;
 }
@@ -156,44 +165,28 @@ img {
     width: 80%;
     margin: auto;
     text-align: center;
-    font-size: 0.91em;
+    font-size: 90%;
 }
 
 .figure .caption code {
-    font-size: 0.87em;
+    font-size: 13px;
 }
 
-noscript {
-    color: #ccc;
-}
-
-noscript a {
-    color: #ccc;
+sup {
+    font-size: 11px;
+    margin: 0 0 0 1px;
 }
 
-.line-number {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin-top: 0.8em;
-    pointer-events: none;
-    white-space: pre;
+noscript {
+    color: #999;
 }
 
-.line-number:before {
-    content: attr(data-line);
-    position: absolute;
-    top: .4em;
-    left: .5em;
-    min-width: 2em;
-    color: #ccc;
-    font-size: 0.65em;
-    text-align: center;
-    vertical-align: .3em;
+noscript a {
+    color: #999;
 }
 
 .footnotes {
-    font-size: 0.91em;
+    font-size: 90%;
 }
 
 .footnotes ol {
@@ -205,12 +198,11 @@ noscript a {
 }
 
 .footnotes code {
-    font-size: 0.87em;
+    font-size: 13px;
 }
 
 .footnotes-backlink {
     margin-left: 0.2em;
-    font-size: 1.2em;
     vertical-align: -0.2em;
     color: #bbb;
     text-decoration: none;
diff --git a/templates/template.html b/templates/template.html
index ec6fad90..8ac8a2ef 100644
--- a/templates/template.html
+++ b/templates/template.html
@@ -19,12 +19,10 @@ $endif$
     <link href="/css/theme-wide.css" media="only screen and (min-width: 1441px)" rel="stylesheet" type="text/css"/>
     <link href="/css/theme-narrow.css" media="only screen and (max-width: 1023px)" rel="stylesheet" type="text/css"/>
     <link href="/css/theme-ultranarrow.css" media="only screen and (max-width: 500px)" rel="stylesheet" type="text/css"/>
-    <link href="/css/print.css" media="print" rel="stylesheet" type="text/css"/>
 $if(highlighting-css)$
-    <style type="text/css">
-$highlighting-css$
-    </style>
+    <link href="/css/highlight.css" media="all" rel="stylesheet" type="text/css"/>
 $endif$
+    <link href="/css/print.css" media="print" rel="stylesheet" type="text/css"/>
   </head>
   <body>
     <nav class="nav">