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.

2 files changed, 70 insertions, 43 deletions

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;