commit a2bd12bfeda1cde1dd4096560b23236600a8d3ef Author: Benjamin Woodruff Date: Tue Oct 15 18:59:44 2013 -0400 Initial Release (v0.1.0) diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d3e78f6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +styling.css +test_html/ +.sass-cache/ diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..456c488 --- /dev/null +++ b/LICENSE @@ -0,0 +1,13 @@ + DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE + Version 2, December 2004 + + Copyright (C) 2004 Sam Hocevar + + Everyone is permitted to copy and distribute verbatim or modified + copies of this license document, and changing it is allowed as long + as the name is changed. + + DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE + TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION + + 0. You just DO WHAT THE FUCK YOU WANT TO. diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..8bedd74 --- /dev/null +++ b/Makefile @@ -0,0 +1,19 @@ +SASSC=sass +PANDOC=pandoc +TEST_MD=$(wildcard test_md/*.md) + +all: clean compile test + +compile: + $(SASSC) -t compressed styling.sass styling.css + +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 ;\ + ) + +clean: + rm -rf test_html + rm -f styling.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..7353dfd --- /dev/null +++ b/README.md @@ -0,0 +1,74 @@ +Pan Am: *Simple CSS for Pandoc* +=============================== + +![](http://b.enjam.info/panam/screenshot.png) + +Pandoc outputs HTML without any styling. That's boring and ugly. This is some +simple CSS for stand-alone Pandoc documents that serves as a good default. +Regardless of how your compose your document, we'll make it look good. + +This should work with markdown, reStructuredText, textile, LaTeX, MediaWiki +markup, or any other format Pandoc supports. It should even work for your +semantically structured HTML5 documents, if they're written well enough. + +Simple to Use +------------- + + curl -O http://b.enjam.info/panam/styling.css + pandoc --css=styling.css --to=html5 input.md -o output.html + +Easy to Develop +--------------- + + gem install sass + make + +Trivial to Test +--------------- + + python -m SimpleHTTPServer & + firefox http://localhost:8000 & + chromium http://localhost:8000 & + ... + +Modern Standards +---------------- + +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. + +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. + +Sectioning +---------- + +Clean horizontal rules are used to section off top-level headers. Styling is +provided for `h1`, `h2`, and `h3` tags, as well as Pandoc's title extension for +markdown. + +CSS' sibling selectors are used to collapse duplicate horizontal rules to ensure +clean transitions between trouble elements, such as `h1` and `table`. + +Readable Tables +--------------- + +Pandoc's markdown supports multiple syntaxes for tables. Vertical lines destroy +table readability. Our tables use only horizontal rules and alternating shading +between even and odd rows, improving comprehension. + +Test Cases +---------- + +There's all sorts of possible edge-cases, so we have a collection of example +documents that we automatically build and then review by hand before each +release. Upgrading shouldn't break semantic documents. diff --git a/_normalize.scss b/_normalize.scss new file mode 100644 index 0000000..c2de8df --- /dev/null +++ b/_normalize.scss @@ -0,0 +1,406 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/normalize.license.md b/normalize.license.md new file mode 100644 index 0000000..c6bcc9b --- /dev/null +++ b/normalize.license.md @@ -0,0 +1,19 @@ +Copyright (c) Nicolas Gallagher and Jonathan Neal + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/styling.sass b/styling.sass new file mode 100644 index 0000000..93a4995 --- /dev/null +++ b/styling.sass @@ -0,0 +1,253 @@ +// version 0.1.0 + +@import "normalize" +@import "//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,700,700italic" +@import "//fonts.googleapis.com/css?family=Source+Code+Pro:400,400italic,700,700italic" + +// colors + +$background: #EEE +$foreground: #111 +$indent-color: #BBB +$rule-color: $indent-color +$block-border-color: $rule-color +$block-background: #DDD +$table-rule-color: #222 + +// typography + +body + font-family: "Source Sans Pro", Helvetica, sans-serif + background-color: $background + color: $foreground + @media (max-width: 400px) + font-size: 10pt + margin-left: 10px + margin-right: 10px + margin-top: 10px + margin-bottom: 15px + @media (min-width: 401px) and (max-width: 600px) + font-size: 12pt + margin-left: 10px + margin-right: 10px + margin-top: 10px + margin-bottom: 15px + @media (min-width: 601px) and (max-width: 900px) + font-size: 13pt + margin-left: 100px + margin-right: 100px + margin-top: 20px + margin-bottom: 25px + @media (min-width: 901px) + font-size: 14pt + margin-left: 200px + margin-right: 200px + margin-top: 30px + margin-bottom: 25px + max-width: 800px + line-height: 1.1em + text-align: justify + +p + margin-top: 10px + margin-bottom: 15px + +em + font-style: italic + +strong + font-weight: bold + +// headers + +h1, h2, h3, h4, h5, h6 + font-weight: bold + padding-top: .2em + margin-bottom: .1em + +header + &>h1 + border: none + padding: 0px + margin: 0px 0px 15px 0px + font-size: 200% + &>h2 + border: none + padding: 0px + margin: 0px 0px 10px 0px + font-style: normal + font-size: 150% + &>h3 + padding: 0px + margin: 0px 0px 10px 0px + font-size: 125% + font-style: italic + padding-bottom: 5px + border-bottom: 1px solid $rule-color + margin-bottom: 20px + & + h1 + border-top: none + padding-top: 0px + +h1 + border-top: 1px solid $rule-color + &:first-of-type + border: none + padding-top: 15px + font-size: 150% + margin-bottom: 10px + +h2 + font-size: 125% + font-style: italic + +h3 + font-size: 105% + font-style: italic + +// horizonal rules + +hr + border: 0px + border-top: 1px solid $rule-color + width: 100% + height: 0px + & + h1 + border-top: none + padding-top: 0px + +// lists + +%list + font-size: 90% + margin-top: 10px + margin-bottom: 15px + padding-left: 30px + +ul + @extend %list + list-style: circle + +ol + @extend %list + list-style: decimal + +li + margin-top: 5px + margin-bottom: 7px + +// quotes + +q + font-style: italic + font-size: 90% + +blockquote + @extend q + quotes: none + border-left: 5px $indent-color solid + padding-left: 10px + margin: 0px + +// links + +a, a:link, a:visited, a:hover + color: inherit + text-decoration: none + border-bottom: 1px dashed $foreground + &:hover + border-bottom-style: solid + +// inline code and code blocks + +code + font-family: "Source Code Pro", "Consolas", "Monaco", monospace + font-size: 90% + background: $block-background + border: 1px solid $block-border-color + padding: 0px 2px 0px 2px + -webkit-border-radius: 3px + -moz-border-radius: 3px + border-radius: 3px + +pre + margin-left: 25px + margin-right: 15px + display: block + &>code + display: block + font-size: 70% + padding: 10px + -webkit-border-radius: 5px + -moz-border-radius: 5px + border-radius: 5px + +// tabular data + +caption + font-size: 80% + font-style: italic + text-align: right + margin-bottom: 5px + +table + width: 100% + margin-top: 1em + margin-bottom: 1em + & + h1 + border-top: none + +tr + td, th + padding: 0.2em 0.7em + + &.header + border-top: 1px solid $table-rule-color + border-bottom: 1px solid $table-rule-color + font-weight: 600 + + &.odd + background: #EEEEEE + + &.even + background: #CCCCCC + +tbody:last-child // last row + border-bottom: 1px solid $table-rule-color + +// definition lists + +dt + font-weight: 600 + &:after + font-weight: normal + content: ":" + margin-bottom: 3px + +dd + @extend blockquote + margin-bottom: 10px + +// images +img + max-width: 100% + padding: 0px + margin-top: 15px + margin-bottom: 10px + background: $block-background + border: 1px solid $block-border-color + -webkit-border-radius: 5px + -moz-border-radius: 5px + border-radius: 5px + & + figcaption + margin-top: -10px + margin-bottom: 15px + +figcaption + @extend caption + +// footnotes + +.footnotes + font-size: 70% + font-style: italic diff --git a/test_md/quick_example.md b/test_md/quick_example.md new file mode 100644 index 0000000..26eadce --- /dev/null +++ b/test_md/quick_example.md @@ -0,0 +1,125 @@ +An h1 header +============ + +Paragraphs are separated by a blank line. + +2nd paragraph. *Italic*, **bold**, `monospace`. Itemized lists +look like: + + * this one + * that one + * the other one + +Note that --- not considering the asterisk --- the actual text +content starts at 4-columns in. + +> Block quotes are +> written like so. +> +> They can span multiple paragraphs, +> if you like. + +Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex. "it's all in +chapters 12--14"). Three dots ... will be converted to an ellipsis. + + + +An h2 header +------------ + +Here's a numbered list: + + 1. first item + 2. second item + 3. third item + +Note again how the actual text starts at 4 columns in (4 characters +from the left side). Here's a code sample: + + # Let me re-iterate ... + for i in 1 .. 10 { do-something(i) } + +As you probably guessed, indented 4 spaces. By the way, instead of +indenting the block, you can use delimited blocks, if you like: + +~~~ +define foobar() { + print "Welcome to flavor country!"; +} +~~~ + +(which makes copying & pasting easier). You can optionally mark the +delimited block for Pandoc to syntax highlight it: + +~~~python +import time +# Quick, count to ten! +for i in range(10): + # (but not *too* quick) + time.sleep(0.5) + print i +~~~ + + + +### An h3 header ### + +Now a nested list: + + 1. First, get these ingredients: + + * carrots + * celery + * lentils + + 2. Boil some water. + + 3. Dump everything in the pot and follow + this algorithm: + + find wooden spoon + uncover pot + stir + cover pot + balance wooden spoon precariously on pot handle + wait 10 minutes + goto first step (or shut off burner when done) + + Do not bump wooden spoon or it will fall. + +Notice again how text always lines up on 4-space indents (including +that last line which continues item 3 above). Here's a link to [a +website](http://foo.bar). Here's a link to a [local +doc](local-doc.html). Here's a footnote [^1]. + +[^1]: Footnote text goes here. + +Tables can look like this: + +size material color +---- ------------ ------------ +9 leather brown +10 hemp canvas natural +11 glass transparent + +Table: Shoes, their sizes, and what they're made of + +(The above is the caption for the table.) Here's a definition list: + +apples + : Good for making applesauce. +oranges + : Citrus! +tomatoes + : There's no "e" in tomatoe. + +Again, text is indented 4 spaces. (Alternately, put blank lines in +between each of the above definition list lines to spread things +out more.) + +Inline math equations go in like so: $\omega = d\phi / dt$. Display +math should get its own line and be put in in double-dollarsigns: + +$$I = \int \rho R^{2} dV$$ + +Done. diff --git a/test_md/schedule.md b/test_md/schedule.md new file mode 100644 index 0000000..691783e --- /dev/null +++ b/test_md/schedule.md @@ -0,0 +1,36 @@ +% Schedule *(Fall 2013)* + +Course Matrix +============= + + Time Monday Tuesday Wednesday Thursday Friday +----- -------------- -------------- -------------- -------------- -------------- + 7:25 EGN4034 + 8:30 + 9:35 +10:40 EEL4712C EEL4712C EEL4712C +11:45 +12:50 + 1:55 CNT5106C CNT5106C + 3:00 MAD4401 MAD4401 CNT5106C MAD4401 + 4:05 EEL4712C EEL3135 EEL3135 + 5:10 EEL4712C EEL3135 EEL3135 + 6:15 EEL4712C + +Course Titles +============= + +EEL4712C +: Digital Design (and associated lab) + +MAD4401 +: Numerical Analysis + +CNT5106C +: Computer Networking + +EEL3135 +: Signals and Systems + +EGN4034 +: Engineering Ethics diff --git a/test_md/screenshot.md b/test_md/screenshot.md new file mode 100644 index 0000000..4f22919 --- /dev/null +++ b/test_md/screenshot.md @@ -0,0 +1,30 @@ +% Lorem ipsum +% dolor sit amet +% consectetuer adipiscing elit + +Sed Diam Nonummy +================ + +nibh euismod tincidunt +--------- -------- ---------- +ut laoreet dolore +magna aliquam erat +volutpat ut wisi + +Enim ad *minim veniam, quis* **nostrud** ***exerci*** `tation ullamcorper` +suscipit lobortis nisl ut aliquip ex ea commodo consequat. + +Duis Autem vel Eum Iriure +------------------------- + +$$f(x) = \sqrt{\frac{\sin{x}}{x^2}}$$ + +Dolor in Hendrerit +================== + +In Vulputate +: Velit esse molestie consequat + +Vel Illum +: dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio + dignissim qui blandit praesent luptatum zzril diff --git a/test_md/toplevel-readme.md b/test_md/toplevel-readme.md new file mode 100644 index 0000000..7353dfd --- /dev/null +++ b/test_md/toplevel-readme.md @@ -0,0 +1,74 @@ +Pan Am: *Simple CSS for Pandoc* +=============================== + +![](http://b.enjam.info/panam/screenshot.png) + +Pandoc outputs HTML without any styling. That's boring and ugly. This is some +simple CSS for stand-alone Pandoc documents that serves as a good default. +Regardless of how your compose your document, we'll make it look good. + +This should work with markdown, reStructuredText, textile, LaTeX, MediaWiki +markup, or any other format Pandoc supports. It should even work for your +semantically structured HTML5 documents, if they're written well enough. + +Simple to Use +------------- + + curl -O http://b.enjam.info/panam/styling.css + pandoc --css=styling.css --to=html5 input.md -o output.html + +Easy to Develop +--------------- + + gem install sass + make + +Trivial to Test +--------------- + + python -m SimpleHTTPServer & + firefox http://localhost:8000 & + chromium http://localhost:8000 & + ... + +Modern Standards +---------------- + +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. + +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. + +Sectioning +---------- + +Clean horizontal rules are used to section off top-level headers. Styling is +provided for `h1`, `h2`, and `h3` tags, as well as Pandoc's title extension for +markdown. + +CSS' sibling selectors are used to collapse duplicate horizontal rules to ensure +clean transitions between trouble elements, such as `h1` and `table`. + +Readable Tables +--------------- + +Pandoc's markdown supports multiple syntaxes for tables. Vertical lines destroy +table readability. Our tables use only horizontal rules and alternating shading +between even and odd rows, improving comprehension. + +Test Cases +---------- + +There's all sorts of possible edge-cases, so we have a collection of example +documents that we automatically build and then review by hand before each +release. Upgrading shouldn't break semantic documents.