Initial Release (v0.1.0)
This commit is contained in:
Benjamin Woodruff
commit
a2bd12bfed
11 changed files with 1052 additions and 0 deletions
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
styling.css
|
||||||
|
test_html/
|
||||||
|
.sass-cache/
|
||||||
13
LICENSE
Normal file
13
LICENSE
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||||
|
Version 2, December 2004
|
||||||
|
|
||||||
|
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
|
||||||
|
|
||||||
|
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.
|
||||||
19
Makefile
Normal file
19
Makefile
Normal file
|
|
@ -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
|
||||||
74
README.md
Normal file
74
README.md
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
Pan Am: *Simple CSS for Pandoc*
|
||||||
|
===============================
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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.
|
||||||
406
_normalize.scss
Normal file
406
_normalize.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
19
normalize.license.md
Normal file
19
normalize.license.md
Normal file
|
|
@ -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.
|
||||||
253
styling.sass
Normal file
253
styling.sass
Normal file
|
|
@ -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
|
||||||
125
test_md/quick_example.md
Normal file
125
test_md/quick_example.md
Normal file
|
|
@ -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.
|
||||||
36
test_md/schedule.md
Normal file
36
test_md/schedule.md
Normal file
|
|
@ -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
|
||||||
30
test_md/screenshot.md
Normal file
30
test_md/screenshot.md
Normal file
|
|
@ -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
|
||||||
74
test_md/toplevel-readme.md
Normal file
74
test_md/toplevel-readme.md
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
Pan Am: *Simple CSS for Pandoc*
|
||||||
|
===============================
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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.
|
||||||
Loading…
Reference in a new issue