├── .gitignore ├── .gitmodules ├── LICENSE ├── test_md ├── screenshot.md ├── nesting.md ├── code.md ├── schedule.md ├── titles.md ├── toplevel-readme.md ├── quick_example.md ├── flow.md └── footnotes.md ├── Makefile ├── normalize.license.md ├── README.md ├── styling.sass └── _normalize.scss /.gitignore: -------------------------------------------------------------------------------- 1 | styling.css 2 | test_html/ 3 | .sass-cache/ 4 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "noisy-uris"] 2 | path = noisy-uris 3 | url = git://github.com/markdurrant/noisy-uris.git 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2004 Sam Hocevar 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. 14 | -------------------------------------------------------------------------------- /test_md/screenshot.md: -------------------------------------------------------------------------------- 1 | % Lorem ipsum 2 | % dolor sit amet 3 | % consectetuer adipiscing elit 4 | 5 | Sed Diam Nonummy 6 | ================ 7 | 8 | nibh euismod tincidunt 9 | --------- -------- ---------- 10 | ut laoreet dolore 11 | magna aliquam erat 12 | volutpat ut wisi 13 | 14 | Enim ad *minim veniam, quis* **nostrud** ***exerci*** `tation ullamcorper` 15 | suscipit lobortis nisl ut aliquip ex ea commodo consequat. 16 | 17 | Duis Autem vel Eum Iriure 18 | ------------------------- 19 | 20 | $$f(x) = \sqrt{\frac{\sin{x}}{x^2}}$$ 21 | 22 | Dolor in Hendrerit 23 | ================== 24 | 25 | In Vulputate 26 | : Velit esse molestie consequat 27 | 28 | Vel Illum 29 | : dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 30 | dignissim qui blandit praesent luptatum zzril 31 | -------------------------------------------------------------------------------- /test_md/nesting.md: -------------------------------------------------------------------------------- 1 | % Nesting 2 | 3 | This page tests how well certain elements nest deeply. 4 | 5 | - Nested 6 | - lists 7 | - should 8 | - still 9 | - be 10 | - readable 11 | 12 | 1. Don't 13 | 2. forget 14 | 3. about 15 | 4. ordered 16 | 5. lists 17 | - either 18 | 19 | > and 20 | > 21 | > > so 22 | > > 23 | > > > should 24 | > > > 25 | > > > > nested 26 | > > > > 27 | > > > > > blockquotes 28 | 29 | > And 30 | > 31 | > - what 32 | > 33 | > > about 34 | > > 35 | > > - alternated lists 36 | > > 37 | > > > and blockquotes? 38 | > > 39 | 40 | > Code blocks can go inside blockquotes 41 | > 42 | > Like this 43 | 44 | - Or inside lists 45 | 46 | Like this 47 | -------------------------------------------------------------------------------- /test_md/code.md: -------------------------------------------------------------------------------- 1 | % Inline Code Blocks 2 | 3 | If the `line-height` isn't high enough, inline code boxes may intersect. 4 | 5 | `This would` be a `rather unfortunate` event, and we'd `like to keep` it from 6 | happening, `so this is just some writing` with a `bunch of ` tags mixed 7 | in to `make it likely` that `such an issue` would `become apparent`. 8 | 9 | > `This would` be a `rather unfortunate` event, and we'd `like to keep` it from 10 | > happening, `so this is just some writing` with a `bunch of ` tags mixed 11 | > in to `make it likely` that `such an issue` would `become apparent`. 12 | 13 | Footnote[^1] 14 | 15 | [^1]: `This would` be a `rather unfortunate` event, and we'd `like to keep` it 16 | from happening, `so this is just some writing` with a `bunch of ` tags 17 | mixed in to `make it likely` that `such an issue` would `become apparent`. 18 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | .PHONY: all clean check-size 2 | SASSC=sass 3 | SASSC_ARGS=--style compressed 4 | PANDOC=pandoc 5 | PANDOC_ARGS=--css=../styling.css -V lang=en -V highlighting-css= --mathjax \ 6 | --smart --to=html5 7 | TEST_MD=$(wildcard test_md/*.md) 8 | TEST_HTML=$(patsubst test_md/%.md,test_html/%.html,$(TEST_MD)) 9 | 10 | all: styling.css $(TEST_HTML) check-size 11 | 12 | styling.css: styling.sass 13 | $(SASSC) $(SASSC_ARGS) styling.sass styling.css 14 | 15 | check-size: styling.css 16 | @echo "raw size: $(shell stat -c%s styling.css) bytes" 17 | @echo "gziped size:" \ 18 | "$(shell gzip -c styling.css | wc -c | awk '{print $1;}') bytes" 19 | 20 | define TEST_TARGET 21 | $(patsubst test_md/%.md,test_html/%.html,$(1)): $(1) 22 | @mkdir -p test_html 23 | $(PANDOC) $(PANDOC_ARGS) $$< -o $$@ 24 | endef 25 | 26 | $(foreach i,$(TEST_MD),$(eval $(call TEST_TARGET,$(i)))) 27 | 28 | clean: 29 | rm -rf styling.css test_html 30 | -------------------------------------------------------------------------------- /test_md/schedule.md: -------------------------------------------------------------------------------- 1 | % Schedule *(Fall 2013)* 2 | 3 | Course Matrix 4 | ============= 5 | 6 | Time Monday Tuesday Wednesday Thursday Friday 7 | ----- -------------- -------------- -------------- -------------- -------------- 8 | 7:25 EGN4034 9 | 8:30 10 | 9:35 11 | 10:40 EEL4712C EEL4712C EEL4712C 12 | 11:45 13 | 12:50 14 | 1:55 CNT5106C CNT5106C 15 | 3:00 MAD4401 MAD4401 CNT5106C MAD4401 16 | 4:05 EEL4712C EEL3135 EEL3135 17 | 5:10 EEL4712C EEL3135 EEL3135 18 | 6:15 EEL4712C 19 | 20 | Course Titles 21 | ============= 22 | 23 | EEL4712C 24 | : Digital Design (and associated lab) 25 | 26 | MAD4401 27 | : Numerical Analysis 28 | 29 | CNT5106C 30 | : Computer Networking 31 | 32 | EEL3135 33 | : Signals and Systems 34 | 35 | EGN4034 36 | : Engineering Ethics 37 | -------------------------------------------------------------------------------- /test_md/titles.md: -------------------------------------------------------------------------------- 1 | % Page Title 2 | % John Doe 3 | % October 30th, 2013 4 | 5 | Content goes here. 6 | 7 | # H1 Header 8 | 9 | Content goes here. 10 | 11 | ## H2 Header 12 | 13 | Content goes here. 14 | 15 | ### H3 Header 16 | 17 | Content goes here. 18 | 19 | # H1 Header 20 | 21 | ## H2 Header 22 | 23 | ### H3 Header 24 | 25 | Content goes here. 26 | 27 | # This a really long H1 header that hopefully should wrap around a little bit 28 | 29 | Content goes here. 30 | 31 | ## This a really long H2 header that hopefully should wrap around a little bit 32 | 33 | Content goes here. 34 | 35 | ### This a really long H3 header that hopefully should wrap around a little bit 36 | 37 | Content goes here. 38 | 39 | # This a really long H1 header that hopefully should wrap around a little bit 40 | 41 | ## This a really long H2 header that hopefully should wrap around a little bit 42 | 43 | ### This a really long H3 header that hopefully should wrap around a little bit 44 | 45 | Content goes here. 46 | -------------------------------------------------------------------------------- /normalize.license.md: -------------------------------------------------------------------------------- 1 | Copyright (c) Nicolas Gallagher and Jonathan Neal 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /test_md/toplevel-readme.md: -------------------------------------------------------------------------------- 1 | Pan Am: *Simple CSS for Pandoc* 2 | =============================== 3 | 4 | ![](http://b.enjam.info/panam/screenshot.png) 5 | 6 | Pandoc outputs HTML without any styling. That's boring and ugly. This is some 7 | simple CSS for stand-alone Pandoc documents that serves as a good default. 8 | Regardless of how your compose your document, we'll make it look good. 9 | 10 | This should work with markdown, reStructuredText, textile, LaTeX, MediaWiki 11 | markup, or any other format Pandoc supports. It should even work for your 12 | semantically structured HTML5 documents, if they're written well enough. 13 | 14 | Simple to Use 15 | ------------- 16 | 17 | curl -O http://b.enjam.info/panam/styling.css 18 | pandoc --css=styling.css --to=html5 input.md -o output.html 19 | 20 | Easy to Develop 21 | --------------- 22 | 23 | gem install sass 24 | make 25 | 26 | Trivial to Test 27 | --------------- 28 | 29 | python -m SimpleHTTPServer & 30 | firefox http://localhost:8000 & 31 | chromium http://localhost:8000 & 32 | ... 33 | 34 | Modern Standards 35 | ---------------- 36 | 37 | We focus on modern web standards, and target Pandoc's `html5` output target. 38 | 39 | Typography 40 | ---------- 41 | 42 | We use Adobe's free *Source Sans Pro* and *Source Code Pro* for all our text. 43 | It's a simple and easy to read modern sans-serif font that's good for print and 44 | web. Webfonts are loaded through Google's Webfonts service, so you don't have to 45 | worry about hosting a dozen `woff`, `otf`, `svg`, and `eot` variants. 46 | 47 | In case the user's browser doesn't support CSS3's `@font-face` directive, we 48 | fall back to sane defaults. 49 | 50 | To improve readability, wide responsive margins are used with justified text. 51 | 52 | Sectioning 53 | ---------- 54 | 55 | Clean horizontal rules are used to section off top-level headers. Styling is 56 | provided for `h1`, `h2`, and `h3` tags, as well as Pandoc's title extension for 57 | markdown. 58 | 59 | CSS' sibling selectors are used to collapse duplicate horizontal rules to ensure 60 | clean transitions between trouble elements, such as `h1` and `table`. 61 | 62 | Readable Tables 63 | --------------- 64 | 65 | Pandoc's markdown supports multiple syntaxes for tables. Vertical lines destroy 66 | table readability. Our tables use only horizontal rules and alternating shading 67 | between even and odd rows, improving comprehension. 68 | 69 | Test Cases 70 | ---------- 71 | 72 | There's all sorts of possible edge-cases, so we have a collection of example 73 | documents that we automatically build and then review by hand before each 74 | release. Upgrading shouldn't break semantic documents. 75 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Pan Am: *Simple CSS for Pandoc* 2 | =============================== 3 | 4 | ![](http://b.enjam.info/panam/screenshot.png#updated) 5 | 6 | Pandoc outputs HTML without any styling. That's boring and ugly. This is some 7 | simple CSS for stand-alone Pandoc documents that serves as a good default. 8 | Regardless of how your compose your document, we'll make it look good. 9 | 10 | This should work with markdown, reStructuredText, textile, LaTeX, MediaWiki 11 | markup, or any other format Pandoc supports. It should even work for your 12 | semantically structured HTML5 documents, if they're written well enough. 13 | 14 | Simple to Use 15 | ------------- 16 | 17 | curl -LO http://b.enjam.info/panam/styling.css 18 | pandoc --css=styling.css -V lang=en -V highlighting-css= --mathjax \ 19 | --smart --to=html5 input.md -o output.html 20 | 21 | or, if you don't need all the fancy bells-and-whistles, 22 | 23 | pandoc --css=styling.css --to=html5 input.md -o output.html 24 | 25 | Easy to Develop 26 | --------------- 27 | 28 | gem install sass 29 | make 30 | 31 | Trivial to Test 32 | --------------- 33 | 34 | python -m SimpleHTTPServer & 35 | firefox http://localhost:8000 & 36 | chromium http://localhost:8000 & 37 | ... 38 | 39 | Modern Standards 40 | ---------------- 41 | 42 | We focus on modern web standards, and target Pandoc's `html5` output target. 43 | 44 | Typography 45 | ---------- 46 | 47 | We use *Libre Baskerville*, a screen-optimized font based on Baskerville, and 48 | Adobe's free *Source Code Pro* for all our text. Webfonts are loaded through 49 | Google's Webfonts service, so you don't have to worry about hosting a dozen 50 | `woff`, `otf`, `svg`, and `eot` variants. 51 | 52 | In case the user's browser doesn't support CSS3's `@font-face` directive, we 53 | fall back to sane defaults. 54 | 55 | To improve readability, wide responsive margins are used with justified text. 56 | [Experimental CSS4 hyphenation][] is used on browsers that support it, reducing 57 | the effects of rivers. 58 | 59 | [Experimental CSS4 hyphenation]: http://generatedcontent.org/post/44751461516/ 60 | 61 | Sectioning 62 | ---------- 63 | 64 | Clean horizontal rules are used to section off top-level headers. Styling is 65 | provided for `h1`, `h2`, and `h3` tags, as well as Pandoc's title extension for 66 | markdown. 67 | 68 | CSS' sibling selectors are used to collapse duplicate horizontal rules to ensure 69 | clean transitions between trouble elements, such as `h1` and `table`. 70 | 71 | Readable Tables 72 | --------------- 73 | 74 | Pandoc's markdown supports multiple syntaxes for tables. Vertical lines destroy 75 | table readability. Our tables use only horizontal rules and alternating shading 76 | between even and odd rows, improving comprehension. 77 | 78 | Test Cases 79 | ---------- 80 | 81 | There's all sorts of possible edge-cases, so we have a collection of example 82 | documents that we automatically build and then review by hand before each 83 | release. Upgrading shouldn't break semantic documents. 84 | -------------------------------------------------------------------------------- /test_md/quick_example.md: -------------------------------------------------------------------------------- 1 | An h1 header 2 | ============ 3 | 4 | Paragraphs are separated by a blank line. 5 | 6 | 2nd paragraph. *Italic*, **bold**, `monospace`. Itemized lists 7 | look like: 8 | 9 | * this one 10 | * that one 11 | * the other one 12 | 13 | Note that --- not considering the asterisk --- the actual text 14 | content starts at 4-columns in. 15 | 16 | > Block quotes are 17 | > written like so. 18 | > 19 | > They can span multiple paragraphs, 20 | > if you like. 21 | 22 | Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex. "it's all in 23 | chapters 12--14"). Three dots ... will be converted to an ellipsis. 24 | 25 | 26 | 27 | An h2 header 28 | ------------ 29 | 30 | Here's a numbered list: 31 | 32 | 1. first item 33 | 2. second item 34 | 3. third item 35 | 36 | Note again how the actual text starts at 4 columns in (4 characters 37 | from the left side). Here's a code sample: 38 | 39 | # Let me re-iterate ... 40 | for i in 1 .. 10 { do-something(i) } 41 | 42 | As you probably guessed, indented 4 spaces. By the way, instead of 43 | indenting the block, you can use delimited blocks, if you like: 44 | 45 | ~~~ 46 | define foobar() { 47 | print "Welcome to flavor country!"; 48 | } 49 | ~~~ 50 | 51 | (which makes copying & pasting easier). You can optionally mark the 52 | delimited block for Pandoc to syntax highlight it: 53 | 54 | ~~~python 55 | import time 56 | # Quick, count to ten! 57 | for i in range(10): 58 | # (but not *too* quick) 59 | time.sleep(0.5) 60 | print i 61 | ~~~ 62 | 63 | 64 | 65 | ### An h3 header ### 66 | 67 | Now a nested list: 68 | 69 | 1. First, get these ingredients: 70 | 71 | * carrots 72 | * celery 73 | * lentils 74 | 75 | 2. Boil some water. 76 | 77 | 3. Dump everything in the pot and follow 78 | this algorithm: 79 | 80 | find wooden spoon 81 | uncover pot 82 | stir 83 | cover pot 84 | balance wooden spoon precariously on pot handle 85 | wait 10 minutes 86 | goto first step (or shut off burner when done) 87 | 88 | Do not bump wooden spoon or it will fall. 89 | 90 | Notice again how text always lines up on 4-space indents (including 91 | that last line which continues item 3 above). Here's a link to [a 92 | website](http://foo.bar). Here's a link to a [local 93 | doc](local-doc.html). Here's a footnote [^1]. 94 | 95 | [^1]: Footnote text goes here. 96 | 97 | Tables can look like this: 98 | 99 | size material color 100 | ---- ------------ ------------ 101 | 9 leather brown 102 | 10 hemp canvas natural 103 | 11 glass transparent 104 | 105 | Table: Shoes, their sizes, and what they're made of 106 | 107 | (The above is the caption for the table.) Here's a definition list: 108 | 109 | apples 110 | : Good for making applesauce. 111 | oranges 112 | : Citrus! 113 | tomatoes 114 | : There's no "e" in tomatoe. 115 | 116 | Again, text is indented 4 spaces. (Alternately, put blank lines in 117 | between each of the above definition list lines to spread things 118 | out more.) 119 | 120 | Inline math equations go in like so: $\omega = d\phi / dt$. Display 121 | math should get its own line and be put in in double-dollarsigns: 122 | 123 | $$I = \int \rho R^{2} dV$$ 124 | 125 | Done. 126 | -------------------------------------------------------------------------------- /test_md/flow.md: -------------------------------------------------------------------------------- 1 | Document Flow 2 | ============= 3 | 4 | This document tests how well long documents flow: line height and line width are 5 | important here. 6 | 7 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum 8 | ante id tortor imperdiet commodo. Suspendisse bibendum cursus urna in interdum. 9 | Sed sagittis nunc sit amet tellus lacinia eleifend. Duis consectetur diam a 10 | justo cursus vulputate. Fusce non viverra nulla. Pellentesque aliquam ante 11 | eleifend dolor suscipit, vitae feugiat quam bibendum. Vivamus non pellentesque 12 | nunc, sed feugiat eros. 13 | 14 | Nunc vel mi facilisis, condimentum nunc non, sagittis tellus. Nullam blandit eu 15 | sapien eget lacinia. Proin adipiscing urna nec adipiscing eleifend. Etiam 16 | scelerisque lectus nec lacus eleifend, at iaculis lorem suscipit. Integer vel 17 | massa in odio consequat fringilla. Integer vel turpis metus. Maecenas consequat 18 | molestie urna, non cursus dolor congue eu. Vivamus dapibus nec odio ac 19 | scelerisque. Integer vitae libero vitae odio posuere imperdiet et mollis augue. 20 | Aenean consequat enim sed odio tincidunt pharetra. Vivamus dictum porta aliquet. 21 | Aliquam quis lacus eu leo lacinia commodo. Nam tincidunt dictum pulvinar. In 22 | lobortis condimentum lectus, nec pellentesque libero imperdiet sit amet. 23 | 24 | Aenean rhoncus nisl id massa ornare sollicitudin. Nam elementum turpis lobortis, 25 | rhoncus massa eu, gravida metus. Fusce id erat dapibus augue suscipit venenatis. 26 | Suspendisse augue nibh, feugiat eget facilisis ac, tristique nec massa. Fusce 27 | non libero erat. Mauris rhoncus rutrum venenatis. Morbi elementum risus nec 28 | velit gravida vestibulum. Proin quis pellentesque eros. In tincidunt orci 29 | ullamcorper, aliquet lectus nec, porttitor magna. Pellentesque dictum nisi sit 30 | amet velit ornare sollicitudin. Vivamus bibendum velit sed egestas bibendum. 31 | Donec ac commodo erat. Morbi risus ligula, semper eget aliquet ullamcorper, 32 | aliquet ut lectus. 33 | 34 | Donec convallis felis ligula, sed vehicula sapien interdum sed. Etiam aliquet, 35 | justo at consectetur fringilla, lorem orci volutpat sem, eu molestie turpis 36 | lectus in mi. Donec malesuada non velit at viverra. Integer porttitor purus quis 37 | ligula porta, eu consequat magna condimentum. Duis dictum nunc libero, a commodo 38 | odio interdum at. Sed ut leo pharetra tortor rutrum fermentum. Aliquam euismod 39 | leo eu mi bibendum, eu laoreet neque commodo. Praesent at dolor mollis, porta 40 | dui quis, pulvinar mi. Vestibulum bibendum diam justo, non convallis enim 41 | egestas quis. Ut quis diam ut mauris auctor viverra sit amet et felis. Donec 42 | mattis tincidunt lectus sit amet scelerisque. Suspendisse euismod risus id 43 | ultricies vestibulum. Pellentesque turpis dolor, ornare non sagittis ac, semper 44 | et leo. Etiam orci tellus, rhoncus sit amet risus eget, vestibulum pulvinar 45 | quam. Pellentesque non massa lacus. 46 | 47 | Ut semper lacus id mollis feugiat. Quisque a metus volutpat, aliquet lorem non, 48 | suscipit velit. Maecenas vulputate cursus consectetur. Vivamus tincidunt 49 | consequat elit ac auctor. Vivamus a dolor nec justo tempus scelerisque tincidunt 50 | sit amet tellus. Curabitur porttitor mi nec malesuada blandit. Nulla suscipit 51 | est libero, eget rhoncus justo aliquet sit amet. Cum sociis natoque penatibus et 52 | magnis dis parturient montes, nascetur ridiculus mus. 53 | -------------------------------------------------------------------------------- /test_md/footnotes.md: -------------------------------------------------------------------------------- 1 | % Footnotes 2 | 3 | We'd[^1] like[^2] to[^3] test[^4] how[^5] well[^6] things[^7] work[^8] with[^9] 4 | a[^10] large[^11] number[^12] of[^13] footnotes[^14]. 5 | 6 | [^1]: Lorem ipsum dolar sit amet. 7 | 8 | [^2]: Lorem ipsum dolar sit amet. 9 | 10 | [^3]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar 11 | purus id convallis fringilla. Maecenas diam velit, auctor tempor ipsum 12 | pretium, venenatis dapibus libero. Nam quis est imperdiet diam blandit 13 | consequat nec vel lectus. Suspendisse metus nunc, semper ut malesuada sed, 14 | vulputate eu enim. Mauris elit nisi, vestibulum ut magna vel, condimentum 15 | blandit nisi. Etiam venenatis ullamcorper nunc eget iaculis. Sed lobortis 16 | luctus mauris, et convallis urna vulputate id. Pellentesque bibendum, odio 17 | vel elementum imperdiet, arcu felis ullamcorper turpis, nec mollis nisl nisl 18 | sit amet libero. Vestibulum id sem semper, venenatis mi quis, venenatis 19 | orci. In quam eros, rhoncus vel laoreet id, tempor sed nunc. Aenean faucibus 20 | odio a nisi tempus, nec tempor orci faucibus. 21 | 22 | [^4]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar 23 | purus id convallis fringilla. Maecenas diam velit, auctor tempor ipsum 24 | pretium, venenatis dapibus libero. Nam quis est imperdiet diam blandit 25 | consequat nec vel lectus. Suspendisse metus nunc, semper ut malesuada sed, 26 | vulputate eu enim. Mauris elit nisi, vestibulum ut magna vel, condimentum 27 | blandit nisi. Etiam venenatis ullamcorper nunc eget iaculis. Sed lobortis 28 | luctus mauris, et convallis urna vulputate id. Pellentesque bibendum, odio 29 | vel elementum imperdiet, arcu felis ullamcorper turpis, nec mollis nisl nisl 30 | sit amet libero. Vestibulum id sem semper, venenatis mi quis, venenatis 31 | orci. In quam eros, rhoncus vel laoreet id, tempor sed nunc. Aenean faucibus 32 | odio a nisi tempus, nec tempor orci faucibus. 33 | 34 | [^5]: Lorem ipsum dolar sit amet. 35 | 36 | [^6]: Lorem ipsum dolar sit amet. 37 | 38 | [^7]: Lorem ipsum dolar sit amet. 39 | 40 | [^8]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar 41 | purus id convallis fringilla. Maecenas diam velit, auctor tempor ipsum 42 | pretium, venenatis dapibus libero. Nam quis est imperdiet diam blandit 43 | consequat nec vel lectus. Suspendisse metus nunc, semper ut malesuada sed. 44 | 45 | [^9]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar 46 | purus id convallis fringilla. Maecenas diam velit, auctor tempor ipsum 47 | pretium, venenatis dapibus libero. Nam quis est imperdiet diam blandit 48 | consequat nec vel lectus. Suspendisse metus nunc, semper ut malesuada sed. 49 | 50 | [^10]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 51 | pulvinar purus id convallis fringilla. Maecenas diam velit, auctor tempor 52 | ipsum pretium, venenatis dapibus libero. Nam quis est imperdiet diam blandit 53 | consequat nec vel lectus. Suspendisse metus nunc, semper ut malesuada sed. 54 | 55 | [^11]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 56 | pulvinar purus id convallis fringilla. Maecenas diam velit, auctor tempor 57 | ipsum pretium, venenatis dapibus libero. Nam quis est imperdiet diam blandit 58 | consequat nec vel lectus. Suspendisse metus nunc, semper ut malesuada sed. 59 | 60 | [^12]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 61 | pulvinar purus id convallis fringilla. Maecenas diam velit, auctor tempor 62 | ipsum pretium, venenatis dapibus libero. Nam quis est imperdiet diam blandit 63 | consequat nec vel lectus. Suspendisse metus nunc, semper ut malesuada sed. 64 | 65 | [^13]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 66 | pulvinar purus id convallis fringilla. Maecenas diam velit, auctor tempor 67 | ipsum pretium, venenatis dapibus libero. Nam quis est imperdiet diam blandit 68 | consequat nec vel lectus. Suspendisse metus nunc, semper ut malesuada sed. 69 | 70 | [^14]: Lorem ipsum dolar sit amet. 71 | -------------------------------------------------------------------------------- /styling.sass: -------------------------------------------------------------------------------- 1 | // version 0.2.3 2 | 3 | @import "normalize" 4 | @import "noisy-uris/sass_vars/base-noise-uris" 5 | @import "noisy-uris/sass_vars/dark-noise-uris" 6 | @import "noisy-uris/sass_vars/light-noise-uris" 7 | @import "//fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700" 8 | @import "//fonts.googleapis.com/css?family=Source+Code+Pro:400,400italic,700,700italic" 9 | 10 | // colors 11 | 12 | $background: #F8F8F8 13 | $foreground: #111 14 | $footnote-color: #666 15 | $indent-color: #BBB 16 | $rule-color: $indent-color 17 | $block-border-color: $rule-color 18 | $block-background: #DDD 19 | $table-rule-color: #222 20 | 21 | %background-noise 22 | background-image: url($base-noise-005) 23 | 24 | // typography 25 | 26 | body 27 | font-family: "Libre Baskerville", Baskerville, Georgia, serif 28 | @extend %background-noise 29 | background-color: $background 30 | color: $foreground 31 | @media (max-width: 400px) 32 | font-size: 12px 33 | margin-left: 10px 34 | margin-right: 10px 35 | margin-top: 10px 36 | margin-bottom: 15px 37 | @media (min-width: 401px) and (max-width: 600px) 38 | font-size: 14px 39 | margin-left: 10px 40 | margin-right: 10px 41 | margin-top: 10px 42 | margin-bottom: 15px 43 | @media (min-width: 601px) and (max-width: 900px) 44 | font-size: 15px 45 | margin-left: 100px 46 | margin-right: 100px 47 | margin-top: 20px 48 | margin-bottom: 25px 49 | @media (min-width: 901px) and (max-width: 1800px) 50 | font-size: 17px 51 | margin-left: 200px 52 | margin-right: 200px 53 | margin-top: 30px 54 | margin-bottom: 25px 55 | max-width: 800px 56 | @media (min-width: 1801px) 57 | font-size: 18px 58 | margin-left: 20% 59 | margin-right: 20% 60 | margin-top: 30px 61 | margin-bottom: 25px 62 | max-width: 1000px 63 | line-height: 1.3 64 | text-align: justify 65 | -moz-hyphens: auto 66 | -ms-hyphens: auto 67 | -webkit-hyphens: auto 68 | hyphens: auto 69 | 70 | p 71 | margin-top: 10px 72 | margin-bottom: 18px 73 | 74 | em 75 | font-style: italic 76 | 77 | strong 78 | font-weight: bold 79 | 80 | // headers 81 | 82 | h1, h2, h3, h4, h5, h6 83 | font-weight: bold 84 | padding-top: .25em 85 | margin-bottom: .15em 86 | 87 | header 88 | &>h1 89 | border: none 90 | padding: 0 91 | margin: 0 92 | font-size: 225% 93 | &>h2 94 | border: none 95 | padding: 0 96 | margin: 0 97 | font-style: normal 98 | font-size: 175% 99 | &>h3 100 | padding: 0 101 | margin: 0 102 | font-size: 125% 103 | font-style: italic 104 | line-height: 2.25*1.1em 105 | padding-bottom: 0.7em 106 | border-bottom: 1px solid $rule-color 107 | margin-bottom: 1.2em 108 | & + h1 109 | border-top: none 110 | padding-top: 0px 111 | 112 | h1 113 | border-top: 1px solid $rule-color 114 | &:first-of-type 115 | border: none 116 | padding-top: 15px 117 | font-size: 150% 118 | margin-bottom: 10px 119 | 120 | h2 121 | font-size: 125% 122 | font-style: italic 123 | 124 | h3 125 | font-size: 105% 126 | font-style: italic 127 | 128 | // horizonal rules 129 | 130 | hr 131 | border: 0px 132 | border-top: 1px solid $rule-color 133 | width: 100% 134 | height: 0px 135 | & + h1 136 | border-top: none 137 | padding-top: 0px 138 | 139 | // lists 140 | 141 | %list 142 | font-size: 90% 143 | margin-top: 10px 144 | margin-bottom: 15px 145 | padding-left: 30px 146 | 147 | ul 148 | @extend %list 149 | list-style: circle 150 | 151 | ol 152 | @extend %list 153 | list-style: decimal 154 | 155 | ul ul, ol ol, ul ol, ol ul 156 | font-size: inherit 157 | 158 | li 159 | margin-top: 5px 160 | margin-bottom: 7px 161 | 162 | // quotes 163 | 164 | q 165 | font-style: italic 166 | font-size: 90% 167 | 168 | blockquote 169 | @extend q 170 | quotes: none 171 | border-left: .35em $indent-color solid 172 | padding-left: 1.15em 173 | margin: 0 1.5em 0 0 174 | 175 | blockquote blockquote, ol blockquote, ul blockquote, blockquote ol, 176 | blockquote ul 177 | font-size: inherit 178 | 179 | // links 180 | 181 | a, a:link, a:visited, a:hover 182 | color: inherit 183 | text-decoration: none 184 | border-bottom: 1px dashed $foreground 185 | &:hover 186 | border-bottom-style: solid 187 | &.footnoteRef 188 | border-bottom: none 189 | color: $footnote-color 190 | 191 | // inline code and code blocks 192 | 193 | code 194 | font-family: "Source Code Pro", "Consolas", "Monaco", monospace 195 | font-size: 85% 196 | @extend %background-noise 197 | background-color: $block-background 198 | border: 1px solid $block-border-color 199 | padding: 0px 0.15em 0px 0.15em 200 | -webkit-border-radius: 3px 201 | -moz-border-radius: 3px 202 | border-radius: 3px 203 | 204 | pre 205 | margin-right: 1.5em 206 | display: block 207 | &>code 208 | display: block 209 | font-size: 70% 210 | padding: 10px 211 | -webkit-border-radius: 5px 212 | -moz-border-radius: 5px 213 | border-radius: 5px 214 | overflow-x: auto 215 | 216 | blockquote pre, ul pre, ol pre 217 | margin-left: 0 218 | margin-right: 0 219 | &>code 220 | font-size: (70%/0.9) 221 | 222 | // tabular data 223 | 224 | caption 225 | &:empty 226 | display: none 227 | font-size: 80% 228 | font-style: italic 229 | text-align: right 230 | margin-bottom: 5px 231 | 232 | table 233 | width: 100% 234 | margin-top: 1em 235 | margin-bottom: 1em 236 | & + h1 237 | border-top: none 238 | 239 | tr 240 | td, th 241 | padding: 0.2em 0.7em 242 | 243 | &.header 244 | border-top: 1px solid $table-rule-color 245 | border-bottom: 1px solid $table-rule-color 246 | font-weight: 700 247 | 248 | &.odd 249 | @extend %background-noise 250 | background-color: #EEEEEE 251 | 252 | &.even 253 | @extend %background-noise 254 | background-color: #CCCCCC 255 | 256 | tbody:last-child // last row 257 | border-bottom: 1px solid $table-rule-color 258 | 259 | // definition lists 260 | 261 | dt 262 | font-weight: 700 263 | &:after 264 | font-weight: normal 265 | content: ":" 266 | 267 | dd 268 | @extend blockquote 269 | margin-bottom: 10px 270 | 271 | // images 272 | 273 | figure 274 | margin: 1.3em 0 1.3em 0 275 | text-align: center 276 | padding: 0px 277 | width: 100% 278 | @extend %background-noise 279 | background-color: $block-background 280 | border: 1px solid $block-border-color 281 | -webkit-border-radius: 8px 282 | -moz-border-radius: 8px 283 | border-radius: 8px 284 | overflow: hidden 285 | 286 | img 287 | display: block 288 | margin: 0px auto 289 | padding: 0px 290 | max-width: 100% 291 | 292 | figcaption 293 | @extend caption 294 | margin: 5px 10px 5px 30px 295 | 296 | // footnotes 297 | 298 | .footnotes 299 | color: $footnote-color 300 | font-size: 70% 301 | font-style: italic 302 | // don't use an underline for the return link icon 303 | li p:last-child a:last-child 304 | border-bottom: none 305 | -------------------------------------------------------------------------------- /_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.0 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined in IE 8/9. 28 | */ 29 | 30 | article, 31 | aside, 32 | details, 33 | figcaption, 34 | figure, 35 | footer, 36 | header, 37 | hgroup, 38 | main, 39 | nav, 40 | section, 41 | summary { 42 | display: block; 43 | } 44 | 45 | /** 46 | * 1. Correct `inline-block` display not defined in IE 8/9. 47 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; /* 1 */ 55 | vertical-align: baseline; /* 2 */ 56 | } 57 | 58 | /** 59 | * Prevent modern browsers from displaying `audio` without controls. 60 | * Remove excess height in iOS 5 devices. 61 | */ 62 | 63 | audio:not([controls]) { 64 | display: none; 65 | height: 0; 66 | } 67 | 68 | /** 69 | * Address `[hidden]` styling not present in IE 8/9. 70 | * Hide the `template` element in IE, Safari, and Firefox < 22. 71 | */ 72 | 73 | [hidden], 74 | template { 75 | display: none; 76 | } 77 | 78 | /* Links 79 | ========================================================================== */ 80 | 81 | /** 82 | * Remove the gray background color from active links in IE 10. 83 | */ 84 | 85 | a { 86 | background: transparent; 87 | } 88 | 89 | /** 90 | * Improve readability when focused and also mouse hovered in all browsers. 91 | */ 92 | 93 | a:active, 94 | a:hover { 95 | outline: 0; 96 | } 97 | 98 | /* Text-level semantics 99 | ========================================================================== */ 100 | 101 | /** 102 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 103 | */ 104 | 105 | abbr[title] { 106 | border-bottom: 1px dotted; 107 | } 108 | 109 | /** 110 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 111 | */ 112 | 113 | b, 114 | strong { 115 | font-weight: bold; 116 | } 117 | 118 | /** 119 | * Address styling not present in Safari 5 and Chrome. 120 | */ 121 | 122 | dfn { 123 | font-style: italic; 124 | } 125 | 126 | /** 127 | * Address variable `h1` font-size and margin within `section` and `article` 128 | * contexts in Firefox 4+, Safari 5, and Chrome. 129 | */ 130 | 131 | h1 { 132 | font-size: 2em; 133 | margin: 0.67em 0; 134 | } 135 | 136 | /** 137 | * Address styling not present in IE 8/9. 138 | */ 139 | 140 | mark { 141 | background: #ff0; 142 | color: #000; 143 | } 144 | 145 | /** 146 | * Address inconsistent and variable font size in all browsers. 147 | */ 148 | 149 | small { 150 | font-size: 80%; 151 | } 152 | 153 | /** 154 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 155 | */ 156 | 157 | sub, 158 | sup { 159 | font-size: 75%; 160 | line-height: 0; 161 | position: relative; 162 | vertical-align: baseline; 163 | } 164 | 165 | sup { 166 | top: -0.5em; 167 | } 168 | 169 | sub { 170 | bottom: -0.25em; 171 | } 172 | 173 | /* Embedded content 174 | ========================================================================== */ 175 | 176 | /** 177 | * Remove border when inside `a` element in IE 8/9. 178 | */ 179 | 180 | img { 181 | border: 0; 182 | } 183 | 184 | /** 185 | * Correct overflow displayed oddly in IE 9. 186 | */ 187 | 188 | svg:not(:root) { 189 | overflow: hidden; 190 | } 191 | 192 | /* Grouping content 193 | ========================================================================== */ 194 | 195 | /** 196 | * Address margin not present in IE 8/9 and Safari 5. 197 | */ 198 | 199 | figure { 200 | margin: 1em 40px; 201 | } 202 | 203 | /** 204 | * Address differences between Firefox and other browsers. 205 | */ 206 | 207 | hr { 208 | -moz-box-sizing: content-box; 209 | box-sizing: content-box; 210 | height: 0; 211 | } 212 | 213 | /** 214 | * Contain overflow in all browsers. 215 | */ 216 | 217 | pre { 218 | overflow: auto; 219 | } 220 | 221 | /** 222 | * Address odd `em`-unit font size rendering in all browsers. 223 | */ 224 | 225 | code, 226 | kbd, 227 | pre, 228 | samp { 229 | font-family: monospace, monospace; 230 | font-size: 1em; 231 | } 232 | 233 | /* Forms 234 | ========================================================================== */ 235 | 236 | /** 237 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 238 | * styling of `select`, unless a `border` property is set. 239 | */ 240 | 241 | /** 242 | * 1. Correct color not being inherited. 243 | * Known issue: affects color of disabled elements. 244 | * 2. Correct font properties not being inherited. 245 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 246 | */ 247 | 248 | button, 249 | input, 250 | optgroup, 251 | select, 252 | textarea { 253 | color: inherit; /* 1 */ 254 | font: inherit; /* 2 */ 255 | margin: 0; /* 3 */ 256 | } 257 | 258 | /** 259 | * Address `overflow` set to `hidden` in IE 8/9/10. 260 | */ 261 | 262 | button { 263 | overflow: visible; 264 | } 265 | 266 | /** 267 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 268 | * All other form control elements do not inherit `text-transform` values. 269 | * Correct `button` style inheritance in Firefox, IE 8+, and Opera 270 | * Correct `select` style inheritance in Firefox. 271 | */ 272 | 273 | button, 274 | select { 275 | text-transform: none; 276 | } 277 | 278 | /** 279 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 280 | * and `video` controls. 281 | * 2. Correct inability to style clickable `input` types in iOS. 282 | * 3. Improve usability and consistency of cursor style between image-type 283 | * `input` and others. 284 | */ 285 | 286 | button, 287 | html input[type="button"], /* 1 */ 288 | input[type="reset"], 289 | input[type="submit"] { 290 | -webkit-appearance: button; /* 2 */ 291 | cursor: pointer; /* 3 */ 292 | } 293 | 294 | /** 295 | * Re-set default cursor for disabled elements. 296 | */ 297 | 298 | button[disabled], 299 | html input[disabled] { 300 | cursor: default; 301 | } 302 | 303 | /** 304 | * Remove inner padding and border in Firefox 4+. 305 | */ 306 | 307 | button::-moz-focus-inner, 308 | input::-moz-focus-inner { 309 | border: 0; 310 | padding: 0; 311 | } 312 | 313 | /** 314 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 315 | * the UA stylesheet. 316 | */ 317 | 318 | input { 319 | line-height: normal; 320 | } 321 | 322 | /** 323 | * It's recommended that you don't attempt to style these elements. 324 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 325 | * 326 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 327 | * 2. Remove excess padding in IE 8/9/10. 328 | */ 329 | 330 | input[type="checkbox"], 331 | input[type="radio"] { 332 | box-sizing: border-box; /* 1 */ 333 | padding: 0; /* 2 */ 334 | } 335 | 336 | /** 337 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 338 | * `font-size` values of the `input`, it causes the cursor style of the 339 | * decrement button to change from `default` to `text`. 340 | */ 341 | 342 | input[type="number"]::-webkit-inner-spin-button, 343 | input[type="number"]::-webkit-outer-spin-button { 344 | height: auto; 345 | } 346 | 347 | /** 348 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 349 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 350 | * (include `-moz` to future-proof). 351 | */ 352 | 353 | input[type="search"] { 354 | -webkit-appearance: textfield; /* 1 */ 355 | -moz-box-sizing: content-box; 356 | -webkit-box-sizing: content-box; /* 2 */ 357 | box-sizing: content-box; 358 | } 359 | 360 | /** 361 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 362 | * Safari (but not Chrome) clips the cancel button when the search input has 363 | * padding (and `textfield` appearance). 364 | */ 365 | 366 | input[type="search"]::-webkit-search-cancel-button, 367 | input[type="search"]::-webkit-search-decoration { 368 | -webkit-appearance: none; 369 | } 370 | 371 | /** 372 | * Define consistent border, margin, and padding. 373 | */ 374 | 375 | fieldset { 376 | border: 1px solid #c0c0c0; 377 | margin: 0 2px; 378 | padding: 0.35em 0.625em 0.75em; 379 | } 380 | 381 | /** 382 | * 1. Correct `color` not being inherited in IE 8/9. 383 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 384 | */ 385 | 386 | legend { 387 | border: 0; /* 1 */ 388 | padding: 0; /* 2 */ 389 | } 390 | 391 | /** 392 | * Remove default vertical scrollbar in IE 8/9. 393 | */ 394 | 395 | textarea { 396 | overflow: auto; 397 | } 398 | 399 | /** 400 | * Don't inherit the `font-weight` (applied by a rule above). 401 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 402 | */ 403 | 404 | optgroup { 405 | font-weight: bold; 406 | } 407 | 408 | /* Tables 409 | ========================================================================== */ 410 | 411 | /** 412 | * Remove most spacing between table cells. 413 | */ 414 | 415 | table { 416 | border-collapse: collapse; 417 | border-spacing: 0; 418 | } 419 | 420 | td, 421 | th { 422 | padding: 0; 423 | } 424 | --------------------------------------------------------------------------------