Use Libre Baskerville for the body font (v0.2.0)

This also includes a large number of spacing fixes and such that have
become apparent with the font change.

Makefile

@@ -11,7 +11,8 @@ test: compile
 	mkdir -p test_html
 	$(foreach i,$(TEST_MD),\
 		$(PANDOC) $(i) -o $(patsubst test_md/%.md,test_html/%.html,$(i)) \
-		          --standalone -t html5 --mathjax -c ../styling.css ;\
+		          --standalone -t html5 --mathjax --smart -V highlighting-css= \
+	              -V lang=en -c ../styling.css ;\
 	)
 
 clean:

README.md

@@ -15,6 +15,11 @@ Simple to Use
 -------------
 
     curl -O http://b.enjam.info/panam/styling.css
+    pandoc --css=styling.css -V lang=en -V highlighting-css= --mathjax \
+           --smart --to=html5 input.md -o output.html
+
+or, if you don't need all the fancy bells-and-whistles,
+
     pandoc --css=styling.css --to=html5 input.md -o output.html
 
 Easy to Develop
@@ -39,15 +44,19 @@ We focus on modern web standards, and target Pandoc's `html5` output target.
 Typography
 ----------
 
-We use Adobe's free *Source Sans Pro* and *Source Code Pro* for all our text.
+We use *Libre Baskerville*, a screen-optimized font based on Baskerville, and
-It's a simple and easy to read modern sans-serif font that's good for print and
+Adobe's free *Source Code Pro* for all our text. Webfonts are loaded through
-web. Webfonts are loaded through Google's Webfonts service, so you don't have to
+Google's Webfonts service, so you don't have to worry about hosting a dozen
-worry about hosting a dozen `woff`, `otf`, `svg`, and `eot` variants.
+`woff`, `otf`, `svg`, and `eot` variants.
 
 In case the user's browser doesn't support CSS3's `@font-face` directive, we
 fall back to sane defaults.
 
 To improve readability, wide responsive margins are used with justified text.
+[Experimental CSS4 hyphenation][] is used on browsers that support it, reducing
+the effects of rivers.
+
+  [Experimental CSS4 hyphenation]: http://generatedcontent.org/post/44751461516/
 
 Sectioning
 ----------

styling.sass

@@ -1,13 +1,14 @@
-// version 0.1.3
+// version 0.2.0
 
 @import "normalize"
-@import "//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,700,700italic"
+@import "//fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700"
 @import "//fonts.googleapis.com/css?family=Source+Code+Pro:400,400italic,700,700italic"
 
 // colors
 
 $background: #EEE
 $foreground: #111
+$footnote-color: #666
 $indent-color: #BBB
 $rule-color: $indent-color
 $block-border-color: $rule-color
@@ -17,36 +18,36 @@ $table-rule-color: #222
 // typography
 
 body
-  font-family: "Source Sans Pro", Helvetica, sans-serif
+  font-family: "Libre Baskerville", Baskerville, Georgia, serif
   background-color: $background
   color: $foreground
   @media (max-width: 400px)
-    font-size: 10pt
+    font-size: 12px
     margin-left: 10px
     margin-right: 10px
     margin-top: 10px
     margin-bottom: 15px
   @media (min-width: 401px) and (max-width: 600px)
-    font-size: 12pt
+    font-size: 14px
     margin-left: 10px
     margin-right: 10px
     margin-top: 10px
     margin-bottom: 15px
   @media (min-width: 601px) and (max-width: 900px)
-    font-size: 13pt
+    font-size: 15px
     margin-left: 100px
     margin-right: 100px
     margin-top: 20px
     margin-bottom: 25px
   @media (min-width: 901px) and (max-width: 1800px)
-    font-size: 14pt
+    font-size: 17px
     margin-left: 200px
     margin-right: 200px
     margin-top: 30px
     margin-bottom: 25px
     max-width: 800px
   @media (min-width: 1801px)
-    font-size: 15pt
+    font-size: 18px
     margin-left: 20%
     margin-right: 20%
     margin-top: 30px
@@ -54,6 +55,10 @@ body
     max-width: 1000px
   line-height: 1.3
   text-align: justify
+  -moz-hyphens: auto
+  -ms-hyphens: auto
+  -webkit-hyphens: auto
+  hyphens: auto
 
 p
   margin-top: 10px
@@ -75,23 +80,24 @@ h1, h2, h3, h4, h5, h6
 header
   &>h1
     border: none
-    padding: 0px
+    padding: 0
-    margin: 0px 0px 15px 0px
+    margin: 0
-    font-size: 200%
+    font-size: 225%
   &>h2
     border: none
-    padding: 0px
+    padding: 0
-    margin: 0px 0px 10px 0px
+    margin: 0
     font-style: normal
-    font-size: 150%
+    font-size: 175%
   &>h3
-    padding: 0px
+    padding: 0
-    margin: 0px 0px 10px 0px
+    margin: 0
     font-size: 125%
     font-style: italic
-  padding-bottom: 5px
+  line-height: 2.25*1.1em
+  padding-bottom: 0.7em
   border-bottom: 1px solid $rule-color
-  margin-bottom: 20px
+  margin-bottom: 1.2em
   & + h1
     border-top: none
     padding-top: 0px
@@ -155,9 +161,9 @@ q
 blockquote
   @extend q
   quotes: none
-  border-left: 5px $indent-color solid
+  border-left: .35em $indent-color solid
-  padding-left: 10px
+  padding-left: 1.15em
-  margin: 0px
+  margin: 0 1.5em 0 0
 
 blockquote blockquote, ol blockquote, ul blockquote, blockquote ol,
 blockquote ul
@@ -171,6 +177,9 @@ a, a:link, a:visited, a:hover
   border-bottom: 1px dashed $foreground
   &:hover
     border-bottom-style: solid
+  &.footnoteRef
+    border-bottom: none
+    color: $footnote-color
 
 // inline code and code blocks
 
@@ -185,8 +194,7 @@ code
   border-radius: 3px
 
 pre
-  margin-left: 25px
+  margin-right: 1.5em
-  margin-right: 15px
   display: block
   &>code
     display: block
@@ -197,8 +205,11 @@ pre
     border-radius: 5px
     overflow-x: auto
 
-blockquote pre>code, ul pre>code, ol pre>code
+blockquote pre, ul pre, ol pre
-  font-size: (70%/0.9)
+  margin-left: 0
+  margin-right: 0
+  &>code
+    font-size: (70%/0.9)
 
 // tabular data
 
@@ -222,7 +233,7 @@ tr
   &.header
     border-top: 1px solid $table-rule-color
     border-bottom: 1px solid $table-rule-color
-    font-weight: 600
+    font-weight: 700
 
   &.odd
     background: #EEEEEE
@@ -236,7 +247,7 @@ tbody:last-child // last row
 // definition lists
 
 dt
-  font-weight: 600
+  font-weight: 700
   &:after
     font-weight: normal
     content: ":"
@@ -246,6 +257,7 @@ dd
   margin-bottom: 10px
 
 // images
+
 figure
   margin: 1.3em 0 1.3em 0
   text-align: center
@@ -271,5 +283,9 @@ figcaption
 // footnotes
 
 .footnotes
+  color: $footnote-color
   font-size: 70%
   font-style: italic
+  // don't use an underline for the return link icon
+  li p:last-child a:last-child
+    border-bottom: none

test_md/titles.md

@@ -0,0 +1,45 @@
+% Page Title
+% John Doe
+% October 30th, 2013
+
+Content goes here.
+
+# H1 Header
+
+Content goes here.
+
+## H2 Header
+
+Content goes here.
+
+### H3 Header
+
+Content goes here.
+
+# H1 Header
+
+## H2 Header
+
+### H3 Header
+
+Content goes here.
+
+# This a really long H1 header that hopefully should wrap around a little bit
+
+Content goes here.
+
+## This a really long H2 header that hopefully should wrap around a little bit
+
+Content goes here.
+
+### This a really long H3 header that hopefully should wrap around a little bit
+
+Content goes here.
+
+# This a really long H1 header that hopefully should wrap around a little bit
+
+## This a really long H2 header that hopefully should wrap around a little bit
+
+### This a really long H3 header that hopefully should wrap around a little bit
+
+Content goes here.