yogsototh/pan-am
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
This also includes a large number of spacing fixes and such that have
become apparent with the font change.
This commit is contained in:
Benjamin Woodruff 2013-10-31 00:07:17 -04:00
parent 22be1e85fa
commit f1167d6389
4 changed files with 103 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Makefile
View file

@ -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:

17
README.md
View file

@ -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.
It's a simple and easy to read modern sans-serif font that's good for print and
web. Webfonts are loaded through Google's Webfonts service, so you don't have to
worry about hosting a dozen `woff`, `otf`, `svg`, and `eot` variants.
We use *Libre Baskerville*, a screen-optimized font based on Baskerville, and
Adobe's free *Source Code Pro* for all our text. Webfonts are loaded through
Google's Webfonts service, so you don't have to worry about hosting a dozen
`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
----------

70
styling.sass
View file

@ -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
margin: 0px 0px 15px 0px
font-size: 200%
padding: 0
margin: 0
font-size: 225%
&>h2
border: none
padding: 0px
margin: 0px 0px 10px 0px
padding: 0
margin: 0
font-style: normal
font-size: 150%
font-size: 175%
&>h3
padding: 0px
margin: 0px 0px 10px 0px
padding: 0
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
padding-left: 10px
margin: 0px
border-left: .35em $indent-color solid
padding-left: 1.15em
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: 15px
margin-right: 1.5em
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
font-size: (70%/0.9)
blockquote pre, ul pre, ol pre
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

45
test_md/titles.md Normal file
View file

@ -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.