From 9ba9fd365cbed597388e33829d3b19c29cc8b6f0 Mon Sep 17 00:00:00 2001
From: Zhiming Wang <zmwangx@gmail.com>
Date: Fri, 8 Jan 2016 16:34:54 -0800
Subject: 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.
---
README.md | 9 ------
pyblog | 13 +-------
source/css/highlight.css | 35 ++++++++++++++++++++++
source/css/theme.css | 78 ++++++++++++++++++++++--------------------------
templates/template.html | 6 ++--
5 files changed, 73 insertions(+), 68 deletions(-)
create mode 100644 source/css/highlight.css
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">
--
cgit v1.2.1