diff options
| -rwxr-xr-x | pyblog | 22 | ||||
| -rw-r--r-- | source/css/theme-narrow.css | 27 | ||||
| -rw-r--r-- | source/css/theme-wide.css | 3 | ||||
| -rw-r--r-- | source/css/theme.css | 150 | ||||
| -rw-r--r-- | templates/template.html | 33 |
5 files changed, 110 insertions, 125 deletions
@@ -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> |