3 files changed, 53 insertions, 9 deletions
diff --git a/TODO.md b/TODO.md
index 0431ffb..c0e33d7 100644
--- a/TODO.md
+++ b/TODO.md
@@ -9,5 +9,5 @@
  - [ ] work with search pages
  - [x] stdlib url parsing in gemini module
  - [x] nice typography
- - [ ] html templates
+ - [x] html templates
  - [ ] deal with non utf8 charsets
diff --git a/gemini.py b/gemini.py
index 2d29236..e820619 100644
--- a/gemini.py
+++ b/gemini.py
@@ -2,6 +2,7 @@ import io
 import re
 import socket
 import ssl
+import string
 import urllib.parse
 
 import fsm
@@ -12,16 +13,18 @@ def htmlescape(text: str) -> str:
 
 
 def gem2html(gem: str) -> str:
-    html = io.StringIO()
-    html.write('<!DOCTYPE html>\n<html lang="en">\n<html>\n<head>\n<meta charset="utf-8"/>\n<style type="text/css">\n')
-    html.write(open('style.css', encoding='utf8').read())
-    html.write('</style>\n</head>\n<body>\n<div id="root">')
-    parser = fsm.Parser(gem.split('\n'), html)
+    template = string.Template(open('page_template.html').read())
+    body = io.StringIO()
+    parser = fsm.Parser(gem.split('\n'), body)
     parser.parse()
-    html.write('</div>\n</body>\n</html>')
+    html = template.substitute(
+        body=body.getvalue(),
+        charset='utf-8',
+        lang='en',
+    )
     with open('latest.html', 'w') as fp:
-        fp.write(html.getvalue())
-    return html.getvalue()
+        fp.write(html)
+    return html
 
 
 def urljoin(base: str, url: str) -> str:
diff --git a/page_template.html b/page_template.html
new file mode 100644
index 0000000..2a4baf5
--- /dev/null
+++ b/page_template.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <html>
+    <head>
+      <meta charset="$charset"/>
+      <style type="text/css">
+html {
+  font-size: 18px;
+  font-family: Garamond, Georgia, sans-serif;
+}
+
+pre     {
+  font-family: Courier, monospace;
+}
+
+blockquote {
+  border-left: 5px solid #ddd;
+  padding: 0.6em 0.6em 0.2em;
+  font-style: italic;
+}
+
+blockquote:before {
+  content: "\201C";
+  display: inline-block;
+  padding-right: 0.4rem;
+  font-size: 4em;
+  line-height: 0;
+  vertical-align: -0.4em;
+  color: lightgrey;
+  margin-right: 0.1em;
+}
+
+li.link::marker {
+  content: '⇒ ';
+}
+      </style>
+    </head>
+    <body>
+$body
+    </body>
+  </html>