In this first iteration of the Tufte-Jekyll theme, a post and a page have exactly the same layout. That means that all the typographic and structural details are identical between the two.
2 | 3 |Jekyll provides for both pages and posts in its default configuration. I have left this as-is.
6 | 7 |Conceptually, posts are for recurring pieces of similar content such as might be found in a typical blog entry. Post content all sits in a folder named _posts and files are created in this folderYes, a page has essentially the same old shit as a post that are names with a date pre-pended to the title of the post. For instance 2105-02-20-this-is-a-post.md is a perfectly valid post filename.
Posts will always have a section above the content itself consisting of YAML front matter, which is meta-data information about the post. Minimally, a post title must always be present for it to be processed properly.
12 | 13 |---
14 | Title: Some Title
15 | ---
16 | ## Content
17 |
18 | Markdown formatted content *here*.
19 | Pages are any HTML documents or Markdown documents with YAML front matter that are then converted to content. Page material is more suited to static, non-recurring types of content. Like this
24 | 25 |I am not going to re-write the Jekyll documentation. Read it and you will figure out how the site is structured.
26 | 27 | :ET -------------------------------------------------------------------------------- /.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b4/7d3fa39973ab04879b728ece40ebbf5bdddd2dbf70b0773de973fdef1cbf74: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b4/7d3fa39973ab04879b728ece40ebbf5bdddd2dbf70b0773de973fdef1cbf74 -------------------------------------------------------------------------------- /.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/dc/24cb68c45a356cb89f20ecf139df4c27937468a0a13ca5c972fc8bbd94103b: -------------------------------------------------------------------------------- 1 | I"&The Tufte Jekyll theme is an attempt to create a website design with the look and feel of Edward Tufte’s books and handouts. Tufte’s style is known for its extensive use of sidenotes, tight integration of graphics with text, and well-set typography.
2 | :ET -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'jekyll' 4 | gem 'rouge' -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | addressable (2.8.0) 5 | public_suffix (>= 2.0.2, < 5.0) 6 | colorator (1.1.0) 7 | concurrent-ruby (1.1.8) 8 | em-websocket (0.5.2) 9 | eventmachine (>= 0.12.9) 10 | http_parser.rb (~> 0.6.0) 11 | eventmachine (1.2.7) 12 | ffi (1.15.0) 13 | forwardable-extended (2.6.0) 14 | http_parser.rb (0.6.0) 15 | i18n (1.8.9) 16 | concurrent-ruby (~> 1.0) 17 | jekyll (4.2.0) 18 | addressable (~> 2.4) 19 | colorator (~> 1.0) 20 | em-websocket (~> 0.5) 21 | i18n (~> 1.0) 22 | jekyll-sass-converter (~> 2.0) 23 | jekyll-watch (~> 2.0) 24 | kramdown (~> 2.3) 25 | kramdown-parser-gfm (~> 1.0) 26 | liquid (~> 4.0) 27 | mercenary (~> 0.4.0) 28 | pathutil (~> 0.9) 29 | rouge (~> 3.0) 30 | safe_yaml (~> 1.0) 31 | terminal-table (~> 2.0) 32 | jekyll-sass-converter (2.1.0) 33 | sassc (> 2.0.1, < 3.0) 34 | jekyll-watch (2.2.1) 35 | listen (~> 3.0) 36 | kramdown (2.3.1) 37 | rexml 38 | kramdown-parser-gfm (1.1.0) 39 | kramdown (~> 2.0) 40 | liquid (4.0.3) 41 | listen (3.5.0) 42 | rb-fsevent (~> 0.10, >= 0.10.3) 43 | rb-inotify (~> 0.9, >= 0.9.10) 44 | mercenary (0.4.0) 45 | pathutil (0.16.2) 46 | forwardable-extended (~> 2.6) 47 | public_suffix (4.0.6) 48 | rb-fsevent (0.10.4) 49 | rb-inotify (0.10.1) 50 | ffi (~> 1.0) 51 | rexml (3.2.5) 52 | rouge (3.26.0) 53 | safe_yaml (1.0.5) 54 | sassc (2.4.0) 55 | ffi (~> 1.9) 56 | terminal-table (2.0.0) 57 | unicode-display_width (~> 1.1, >= 1.1.1) 58 | unicode-display_width (1.7.0) 59 | 60 | PLATFORMS 61 | ruby 62 | 63 | DEPENDENCIES 64 | jekyll 65 | rouge 66 | 67 | BUNDLED WITH 68 | 2.1.4 69 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Clay H 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tufte-jekyll theme 2 | 3 | The *Tufte-Jekyll* blog theme is based on the github repository by Edward Tufte [here](https://github.com/edwardtufte/tufte-css), which was orginally created by Dave Leipmann, but is now labeled under Edward Tufte's moniker. I borrowed freely from the Tufte-CSS repo and have transformed many of the typographic and page-structural features into a set of custom Liquid tags that make creating content using this style much easier than writing straight HTML. Essentially, if you know markdown, and mix in a few custom Liquid tags, you can be creating a website with this document style in short order. 4 | 5 | Please be aware that the feature parity between the tufte-css repository and this project is not perfect. It is very close, but this Jekyll theme has additional CSS to scratch some of my own itches. One example is that the sidenote's typography is vertically spaced in my CSS so they are on the same baseline grid as the body text and it doesn't hurt my eyes when I look at them. Another example is the optional use of color to style links. The current tufte.css repo doesn't allow that, but my opinion is that hey, this is the web. It shouldn't have to ape the way a book looks exactly. I attempt to stay true to the overall sensibility of the tufte.css repo, but I am not going to sacrifice anything that I think reduces the usability or esthetics of this theme in the service of exact feature parity. Just as I have 'forked' the tufte.css, you are more than welcome to modify this theme to suit your own tastes and specific needs. 6 | 7 | ## Demo 8 | 9 | A sample site with self-documenting content is available [here](http://clayh53.github.io/tufte-jekyll/) on github pages. 10 | 11 | ## Installation 12 | 13 | I'm not going to go into great detail here. I am just going to assume that anyone interested in either Jekyll, Edward Tufte's work or Github has some basic skills. I created this with Ruby 2.2.0 and Jekyll 2.5.3. There is absolutely nothing exotic going on here, so you can probably make any recent version of Jekyll work with this setup. 14 | 15 | So copy, pull, download a zipfile or whatever and fire it up. 16 | 17 | ``` 18 | cd ~/thatPlaceYouPutIt/tufte-jekyll 19 | jekyll build 20 | jekyll serve -w 21 | ``` 22 | 23 | And then point your browser at localhost:4000/tufte-jekyll 24 | 25 | You can also use `jekyll serve -w --baseurl ''` to remove `/tufte-jekyll` from the url and serve your site directly from localhost:4000. This only affects your local preview. See [Setting your baseurl correctly](#setting-your-baseurl-correctly) for more details. 26 | 27 | ## Configuration 28 | 29 | ### Jekyll site building options 30 | 31 | I have created a very simple site options file in the ```_data``` directory that contains two settings currently. The file in the github repo looks like this: 32 | ``` 33 | mathjax: true 34 | lato_font_load: true 35 | ``` 36 | Removing either 'true' value will prevent the jekyll site building process from adding links to either the Mathjax library or the Google Fonts Lato font as a fallback for the Gill Sans. Set these values to blank if you want to really streamline your page loading time. 37 | 38 | ### SASS 39 | 40 | I am using Sass to create the css file used by this theme. If you would like to change things like fonts, text colors, background colors and so forth, edit the ```_scss/_settings.scss``` file. This file gets loaded first when Jekyll constructs the master CSS file from the tufte.scss SASS file, and contains SASS variables that influence the appearance of the site. The one variable that may be of interest to some is the ```$link-style``` variable, which can be set to either ```underline``` or ```color```. This will determine if your links are styled using the ```$contrast-color``` variable with no underlining, or whether they are styled using light underlining as seen on the [*tufte-css*](https://github.com/edwardtufte/tufte-css) repo. 41 | 42 | ### Social icons 43 | 44 | You can edit the ```_data/social.yml``` file and put in your own information for the footer links 45 | 46 | ### Silly-ass badge in the upper left 47 | 48 | In the ```assets/img``` directory is a file called ```badge_1.png```. This file's parent is ```badge_1.psd``` and is an editable photoshop file with layers for the letters comprising the initials. Change them to suit your fancy. Or just substitute another badge in its place. You can edit the ```_includes/header.html``` file and change the file that it points too. Find your favorite Tufte emoji and fly your freak flag proudly. 49 | 50 | ## Some things about the things 51 | 52 | I needed to create several custom Liquid tags to wrap content in the right kind of tags. You will create your posts in the normal way in the ```_posts``` directory, and then edit them with Github-Flavored Markdown. In addition to all that GFM goodness, you can use the following custom Liquid tags in your content area. 53 | 54 | Note that these tags *have been altered* from Version 1 of this theme to accommodate some responsive features, namely the ability to reveal hidden sidenotes, margin notes and margin figures by tapping either a superscript or a symbol on small screens. This requires you to add a parameter to the tag that is a unique *ID* for each tag instance on the page. What the id is called is not important, but it is important that it be unique for each individual element on the page. I would recommend in the interest of sanity to give names that are descriptive, like ```'sn-id-1'``` or ```'mf-id-rhino'```. 55 | 56 | ### Notes about quotes in Liquid tags 57 | 58 | The custom Liquid tags are designed to simplify writing content and displaying it with the *tufte-css* look. Here are a few notes on using quotes inside the tags. 59 | 60 | * Liquid tags work with either double or single quotes to surround the tag parameters, as you'll see in all the examples below. 61 | 62 | * You can use single quotes and apostrophes in the text inside tag parameters, as long as all the parameters are surrounded by double quotes. Liquid will automatically process them correctly. For example: `{% newthought "I'm so smart!" %}` will render as `I'm so smart!`. If the text inside one of the parameters contains a single quote, then use double quotes to surround the parameters. Conversely, if the text inside one of the parameters contains a double quote, use single quotes to surround the parameters. 63 | 64 | * One can also use a double quote in the text inside a tag parameter by 'escaping' the double quote by placing a backslash directly in front of it, for example: `{% newthought "\"I'm so smart!\", she thought." %}` will render as `"I'm so smart!", she thought.` 65 | 66 | * You can use HTML inside of a tag parameter. Originally, Markdown support inside the Liquid parameters strings was spotty, but I recently added some code that should allow most Markdown inside the tag parameter strings. You can use either single quotes, or escaped double quotes in the HTML. For example, both of the following tags will work: 67 | 68 | ``` 69 | {% newthought "Example website: example label" %} 70 | ``` 71 | ``` 72 | {% newthought "Example website: example label" %} 73 | ``` 74 | 75 | The [demo site's Edge Cases entry](https://clayh53.github.io/tufte-jekyll/articles/20/Edge-Cases.html) has an example toward the bottom illustrating HTML inside of a tag parameter. 76 | 77 | ### Epigraph 78 | 79 | This tag will render its three components into a standalone epigraph. This can be used as an introduction to a page or to a section within a page. As with most things Markdown, surround the epigraph with a blank line above and below it. 80 | 81 | ``` 82 | {% epigraph ' "How did you go bankrupt?" Two ways. Gradually, then suddenly.' 'Ernest Hemingway' ' "The Sun Also Rises" ' %} 83 | ``` 84 | 85 | ### New thought 86 | 87 | This tag will render its contents in small caps. Useful at the beginning of new sections: 88 | 89 | ``` 90 | {% newthought "This will be rendered in small caps" %} blah blah 91 | ``` 92 | 93 | ### Sidenote 94 | 95 | This tag inserts a *sidenote* in the content, which is like a footnote, only its in the spacious right-hand column. It is automatically numbered, starting over on each page. Just put it in the content like you would insert a footnote like so: 96 | 97 | ``` 98 | blah lorem blah{% sidenote "sidenote-id" "This is a random sidenote" %} blah blah 99 | ``` 100 | And it will add the html spans and superscripts. On smaller screens, tapping on the number will reveal the sidenote! 101 | 102 | The `full-width` page layout will not display side notes. (It's a full-width page and has no margin) 103 | 104 | ### Margin note 105 | 106 | This tag is essentially the same as a sidenote, but heh, no number. Like this: 107 | 108 | ``` 109 | lorem nobeer toasty critters{% marginnote "margin-note-id" "Random thought when drinking" %} continue train of thought 110 | ``` 111 | On smaller screens, tapping on the ⊕ symbol will open up the margin note. 112 | 113 | The `full-width` page layout will not display margin notes. (It's a full-width page and has no margin) 114 | 115 | ### Full width image 116 | 117 | This tag inserts an image that spans both the main content column and the side column: 118 | 119 | ``` 120 | blah blah 121 | {% fullwidth "assets/img/rhino.png" "A caption for the image" %} 122 | blah 123 | ``` 124 | 125 | or 126 | 127 | ``` 128 | blah blah 129 | {% fullwidth "http://example.com/image.jpg" "A caption for the image" %} 130 | blah 131 | ``` 132 | 133 | Note the absence of a leading slash in the image url when using relative file paths. (This is incorrect: `/assets/img/rhino.png`) 134 | 135 | Also note that fullwidth images need to be included *on their own line* in order for the captions to work correctly. 136 | 137 | ### Main column image 138 | 139 | This tag inserts an image that is confined to the main content column: 140 | 141 | ``` 142 | blah blah 143 | {% maincolumn "assets/img/rhino.png" "This is the caption" %} 144 | blah 145 | ``` 146 | 147 | or 148 | 149 | ``` 150 | blah blah 151 | {% maincolumn "http://example.com/image.jpg" "This is the caption" %} 152 | blah 153 | ``` 154 | 155 | No need for an ID in this tag because it doesn't have any doohickies that open and close on narrow screens. Again note the absence of the leading slash in the image url when using relative file paths. (This is incorrect: `/assets/img/rhino.png`) 156 | 157 | And just like fullwidth images, main column images need to be included on their own line in order for the captions to work correctly. 158 | 159 | ### Margin figure 160 | 161 | This tag inserts and image in the side column area. Note that an id needs to be specified: 162 | 163 | ``` 164 | blah blah {% marginfigure "margin-figure-id" "assets/img/rhino.png" "This is the caption" %} blah 165 | ``` 166 | 167 | or 168 | 169 | ``` 170 | blah blah {% marginfigure "margin-figure-id" "http://example.com/image.jpg" "This is the caption" %} blah 171 | ``` 172 | 173 | This needs an ID parameter so that it can be clicked and opened on small screens. Again note the absence of the leading slash in the image url when using relative file paths. (This is incorrect: `/assets/img/rhino.png`) 174 | 175 | The `full-width` page layout will not display margin figures. (It's a full-width page and has no margin) 176 | 177 | ### Mathjax 178 | 179 | For those wanting to use this Jekyll theme for academic writing, the new Kramdown Markdown engine will accurately parse *MathJax* expressions as long as they are enclosed in a pair of double dollar signs like this: 180 | 181 | ```$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$``` 182 | 183 | As a side note - if you do not need the math ability, navigate to the ```_data/options.yml``` file and change the mathjax to 'false' and it will not load the mathjax javascript. 184 | 185 | ### Setting your baseurl correctly 186 | 187 | In the `_config.yml` file is a setting called `baseurl`. This is used by the Jekyll engine to construct all the proper links in the static site. Right now it is set to `/tufte-jekyll` since this project is using Github Pages and you are required to set the project name as the baseurl to serve from Github Pages. 188 | 189 | Set this to your own project name if you're going to serve your site from Github Pages. Be sure to include the leading slash, and no trailing slash. For example: `/my-project-name` 190 | 191 | For a full explanation of setting your baseurl to work with Github Pages, see the [Project Page URL Structure](http://jekyllrb.com/docs/github-pages/#project-page-url-structure) section of the Jekyll documentation. 192 | 193 | To serve from anywhere else besides Github Pages, use a blank baseurl in your `_config.yml` file: 194 | 195 | ``` 196 | baseurl: 197 | ``` 198 | 199 | This is `baseurl:` with nothing after it. Not even a space. 200 | 201 | ### Rakefile 202 | 203 | I have added a boilerplate Rakefile directly from the [jekyll-rake-boilerplate repo](https://github.com/gummesson/jekyll-rake-boilerplate). This saves you a small amount of time by prepending the date on a post name and populated the bare minimum of YAML front matter in the file. Please visit the link to the repo to find out how it runs. One thing to note is that there should be *no* space between the task and the opening bracket of your file name. ```rake post["Title"]``` will work while ```rake post ["Title"]``` will not. 204 | 205 | There is another rakefile (UploadtoGithub.Rakefile) included that only has one task in it - an automated upload to a *Github Pages* location of the site. This is necessary because of the plugins used by this theme. It does scary stuff like move your ```_site``` somewhere safe, delete everything, move the ```_site``` back and then do a commit to the ```gh-pages``` branch of your repository. You can read about it [here](http://blog.nitrous.io/2013/08/30/using-jekyll-plugins-on-github-pages.html). You would only need to use this if you are using Github project pages to host your site. Integration with the existing Rakefile is left as an exercise for the reader. 206 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require 'rubygems' 2 | require 'rake' 3 | require 'rdoc' 4 | require 'date' 5 | require 'yaml' 6 | require 'tmpdir' 7 | require 'jekyll' 8 | 9 | desc "Generate blog files" 10 | task :generate do 11 | Jekyll::Site.new(Jekyll.configuration({ 12 | "source" => ".", 13 | "destination" => "_site" 14 | })).process 15 | end 16 | 17 | 18 | desc "Generate and publish blog to gh-pages" 19 | task :publish => [:generate] do 20 | Dir.mktmpdir do |tmp| 21 | system "mv _site/* #{tmp}" 22 | system "git checkout -B gh-pages" 23 | system "rm -rf *" 24 | system "mv #{tmp}/* ." 25 | message = "Site updated at #{Time.now.utc}" 26 | system "git add ." 27 | system "git commit -am #{message.shellescape}" 28 | system "git push origin gh-pages --force" 29 | system "git checkout master" 30 | system "echo yolo" 31 | end 32 | end 33 | 34 | task :default => :publish -------------------------------------------------------------------------------- /UploadToGithub.Rakefile: -------------------------------------------------------------------------------- 1 | require 'rubygems' 2 | require 'rake' 3 | require 'rdoc' 4 | require 'date' 5 | require 'yaml' 6 | require 'tmpdir' 7 | require 'jekyll' 8 | 9 | desc "Generate blog files" 10 | task :generate do 11 | Jekyll::Site.new(Jekyll.configuration({ 12 | "source" => ".", 13 | "destination" => "_site" 14 | })).process 15 | end 16 | 17 | 18 | desc "Generate and publish blog to gh-pages" 19 | task :publish => [:generate] do 20 | Dir.mktmpdir do |tmp| 21 | system "mv _site/* #{tmp}" 22 | system "git checkout -B gh-pages" 23 | system "rm -rf *" 24 | system "mv #{tmp}/* ." 25 | message = "Site updated at #{Time.now.utc}" 26 | system "git add ." 27 | system "git commit -am #{message.shellescape}" 28 | system "git push origin gh-pages --force" 29 | system "git checkout master" 30 | system "echo yolo" 31 | end 32 | end 33 | 34 | task :default => :publish 35 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | baseurl: /tufte-jekyll 2 | title: Tufte-Jekyll 3 | subtitle: Content-centric blogging 4 | author: clay harmon 5 | simple_search: http://google.com/search 6 | description: A Jekyll theme for content-rich sites 7 | name: tufte 8 | markdown: kramdown 9 | markdown_ext: "markdown,mkdown,mkdn,mkd,md" 10 | permalink: /articles/:short_year/:title 11 | timezone: America/New_York 12 | excerpt_separator: # you can specify your own separator, of course. 13 | exclude: ['Gemfile', 'Gemfile.lock', 'Rakefile', 'UploadToGithub.Rakefile', 'README.md'] 14 | post: 15 | template: _post.txt 16 | extension: md 17 | page: 18 | template: _page.txt 19 | extension: md 20 | editor: gvim 21 | git: 22 | branch: master 23 | transfer: 24 | command: rsync 25 | settings: -av 26 | source: _site/ 27 | destination: ~/Git/clayh53.github.com/ 28 | -------------------------------------------------------------------------------- /_data/options.yml: -------------------------------------------------------------------------------- 1 | mathjax: true 2 | lato_font_load: true -------------------------------------------------------------------------------- /_data/social.yml: -------------------------------------------------------------------------------- 1 | - link: //www.twitter.com/twitter_handle 2 | icon: icon-twitter 3 | - link: //plus.google.com/+googlePlusName 4 | icon: icon-google2 5 | - link: //github.com/GithubHandle 6 | icon: icon-github 7 | - link: //www.flickr.com/photos/FlickrUserID 8 | icon: icon-flickr3 9 | - link: /feed 10 | icon: icon-rss2 11 | - link: //vimeo.com/vimeo-id 12 | icon: icon-vimeo2 13 | - link: //www.linkedin.com/ 14 | icon: icon-linkedin 15 | -------------------------------------------------------------------------------- /_drafts/a-test-draft.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "A test draft" 3 | layout: post 4 | --- -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |{{ page.date | date: "%B %-d, %Y" }}
6 | 7 | 8 | {{ content }} 9 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |{{ page.date | date: "%B %-d, %Y" }}
6 | 7 | {{ content }} 8 | 9 | -------------------------------------------------------------------------------- /_page.txt: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3 | layout: page 4 | --- -------------------------------------------------------------------------------- /_plugins/epigraph.rb: -------------------------------------------------------------------------------- 1 | ## Liquid tag 'epigraph' used to add an epigraph 2 | ## in the main text area of the layout 3 | ## Usage {% epigraph 'text-body-of-epigraph' 'author-of-epigraph' 'citation-of-epigraph' %} 4 | # 5 | module Jekyll 6 | class RenderEpigraphTag < Liquid::Tag 7 | 8 | require "shellwords" 9 | 10 | def initialize(tag_name, text, tokens) 11 | super 12 | @text = text.shellsplit 13 | end 14 | 15 | def render(context) 16 | "#{@text[0]}
"+ 17 | "
tags from render output
25 |
26 | if @text[0].start_with?('http://', 'https://','//')
27 | ""+
28 | "
"+
31 | "
tags from render output
25 |
26 | if @text[0].start_with?('http://', 'https://','//')
27 | "
#{@text[2]}"
21 | else
22 | ""+
23 | ""+
24 | "
#{@text[2]}"
25 | end
26 | end
27 | end
28 | end
29 |
30 | Liquid::Template.register_tag('marginfigure', Jekyll::RenderMarginFigureTag)
31 |
--------------------------------------------------------------------------------
/_plugins/marginnote.rb:
--------------------------------------------------------------------------------
1 | module Jekyll
2 | class RenderMarginNoteTag < Liquid::Tag
3 |
4 | require "shellwords"
5 |
6 | def initialize(tag_name, text, tokens)
7 | super
8 | @text = text.shellsplit
9 | end
10 |
11 | def render(context)
12 | "#{@text[1]} "
13 | end
14 | end
15 | end
16 |
17 | Liquid::Template.register_tag('marginnote', Jekyll::RenderMarginNoteTag)
18 |
19 |
--------------------------------------------------------------------------------
/_plugins/mathjaxtag.rb:
--------------------------------------------------------------------------------
1 | module Jekyll
2 | class MathJaxBlockTag < Liquid::Tag
3 | def render(context)
4 | '
list item 1
119 |list item 2
122 |``` with class ```code``` for the document subtitle, ```
| ``` nonsense. *And* you must wrap the unholy mess in a ``` ``` tag to ensure that the table stays centered in the main content column.
201 |
202 | Tables are designed with an ```overflow:scroll``` property to create slider bars when the viewport is narrow. This is so that you do not collapse all your beautiful data into a jumble of letters and numbers when you view it on your smartphone.
203 |
204 | {% marginnote 'table-1-id' '*Table 1*: A table with default style formatting' %}
205 |
206 |
262 |
263 |
264 | This is not the One True Table. Such a style does not exist. One must craft each data table with custom care to the narrative one is telling with that specific data. So take this not as “the table style to use”, but rather as “a table style to start from”. From here, use principles to guide you: avoid chartjunk, optimize the data-ink ratio (“within reason”, as Tufte says), and “mobilize every graphical element, perhaps several times over, to show the data.{% sidenote 'table-id' 'Page 139, *The Visual Display of Quantitative Information*, Edward Tufte 2001.'%} Furthermore, one must know when to reach for more complex data presentation tools, like a custom graphic or a JavaScript charting library.
265 |
266 | As an example of alternative table styles, academic publications written in LaTeX often rely on the ```booktabs``` package to produce clean, clear tables. Similar results can be achieved in Tufte CSS with the ```booktabs``` class, as demonstrated in this table:
267 |
268 | {% marginnote 'table-2-id' '*Table 2*: A table with booktabs style formatting' %}
269 |
270 |
284 |
285 | The table above was written in HTML as follows:
286 |
287 | ```
288 |
289 |
303 | ```
304 |
305 |
306 | {% newthought 'I like this style of table,' %} so I have made it the default for unstyled tables. This allows use of the [*Markdown Extra*](https://michelf.ca/projects/php-markdown/extra/) features built into the [*Kramdown*](http://kramdown.gettalong.org/parser/kramdown.html) parser. Here is a table created using the Markdown Extra table syntax to make a nice table which has the side benefit of being human readable in the raw Markdown file:
307 |
308 | {% marginnote 'tableID-3' 'Table 3: a table created with *Markdown Extra* markup using only the default table styling' %}
309 |
310 | | |mpg | cyl | disp | hp | drat | wt |
311 | |:----------------|----:|-----:|-------:|-------:|-------:|----:|
312 | |Mazda RX4 |21 |6 |160 |110 |3.90 |2.62 |
313 | |Mazda RX4 Wag |21 |6 |160 |110 |3.90 |2.88 |
314 | |Datsun 710 |22.8 |4 |108 |93 |3.85 |2.32 |
315 | |Hornet 4 Drive |21.4 |6 |258 |110 |3.08 |3.21 |
316 | |Hornet Sportabout|18.7 |8 |360 |175 |3.15 |3.44 |
317 | |Valiant |18.1 |6 |160 |105 |2.76 |3.46 |
318 |
319 |
320 | Using the following Markdown formatting:
321 |
322 | ```
323 | | |mpg | cyl | disp | hp | drat | wt |
324 | |:----------------|----:|-----:|-------:|-------:|-------:|----:|
325 | |Mazda RX4 |21 |6 |160 |110 |3.90 |2.62 |
326 | |Mazda RX4 Wag |21 |6 |160 |110 |3.90 |2.88 |
327 | |Datsun 710 |22.8 |4 |108 |93 |3.85 |2.32 |
328 | etc...
329 | ```
330 |
331 | The following is a more simple table, showing the Markdown-style table markup. Remember to label the table with a *marginnote* Liquid tag, and you *must* separate the label from the table with a single blank line. This markup:
332 |
333 | ```
334 | {{ "{% marginnote 'Table-ID4' 'Table 4: a simple table showing left, center, and right alignment of table headings and data' "}} %}
335 |
336 | |**Left** |**Center**|**Right**|
337 | |:--------|:--------:|--------:|
338 | Aardvarks| 1|$3.50
339 | Cat| 5 |$4.23
340 | Dogs |3 |$5.29
341 | ```
342 |
343 | Yields this table:
344 |
345 | {% marginnote 'Table-ID4' 'Table 4: a simple table showing left, center, and right alignment of table headings and data' %}
346 |
347 | |**Left** |**Center**|**Right**|
348 | |:--------|:--------:|--------:|
349 | Aardvarks| 1|$3.50
350 | Cat| 5 |$4.23
351 | Dogs |3 |$5.29
352 |
353 |
354 | ## Code
355 |
356 | Code samples use a monospace font using the 'code' class. The Kramdown parser has the 'GFM' option enabled, which stands for 'Github Flavored Markdown', and this means that both inline code such as ```#include
#{@text[1]} " 380 | end 381 | end 382 | end 383 | 384 | Liquid::Template.register_tag('fullwidth', Jekyll::RenderFullWidthTag) 385 | ``` 386 | 387 | Enclose the code block in three backticks, followed by a space and then the language name, like this: 388 | 389 |
393 |
394 |
395 |
--------------------------------------------------------------------------------
/_sass/_fonts.scss:
--------------------------------------------------------------------------------
1 | // Font imports file. If you don't want these fonts, comment out these and add your own into the fonts directory
2 | // and point the src attribute to the file.
3 | //
4 |
5 | @charset "UTF-8";
6 |
7 | @font-face {
8 | font-family: ETbook;
9 | src: url("../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");
10 | src: url("../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), url("../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), url("../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbemboromanosf") format("svg");
11 | font-weight: normal;
12 | font-style: normal
13 | }
14 |
15 | @font-face {
16 | font-family: ETbook;
17 | src: url("../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot");
18 | src: url("../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"), url("../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"), url("../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype"), url("../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbemboromanosf") format("svg");
19 | font-weight: normal;
20 | font-style: italic
21 | }
22 |
23 | @font-face {
24 | font-family: ETbook;
25 | src: url("../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot");
26 | src: url("../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), url("../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"), url("../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"), url("../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbemboromanosf") format("svg");
27 | font-weight: bold;
28 | font-style: normal
29 | }
30 |
31 | @font-face {
32 | font-family: ETbookRomanOldStyle;
33 | src: url("../fonts/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot");
34 | src: url("../fonts/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix") format("embedded-opentype"), url("../fonts/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff"), url("../fonts/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf") format("truetype"), url("../fonts/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbemboromanosf") format("svg");
35 | font-weight: normal;
36 | font-style: normal;
37 | }
--------------------------------------------------------------------------------
/_sass/_settings.scss:
--------------------------------------------------------------------------------
1 | /* This file contains all the constants for colors and font styles */
2 |
3 | $body-font: ETBembo, "Chronicle Text G2", Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
4 | // Note that Gill Sans is the top of the stack and corresponds to what is used in Tufte's books
5 | // However, it is not a free font, so if it is not present on the computer that is viewing the webpage
6 | // The free Google 'Lato' font is used instead. It is similar.
7 | $sans-font: "Gill Sans", "Gill Sans MT", "Gotham Narrow", "Lato", Calibri, sans-serif;
8 | $code-font: Consolas, "Liberation Mono", Menlo, Courier, monospace;
9 | $url-font: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
10 | $text-color: #111;
11 | $bg-color: #fffff8;
12 | $contrast-color: #a00000;
13 | $border-color: #333333;
14 | $link-style: underline; // choices are 'color' or 'underline'. Color option styles links with $contrast-color set above
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/_sass/_syntax-highlighting.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Syntax highlighting styles
3 | */
4 | $spacing-unit: 30px;
5 | %vertical-rhythm {
6 | margin-bottom: $spacing-unit / 2;
7 | }
8 |
9 | .highlight {
10 | background: #fffff8;
11 | @extend %vertical-rhythm;
12 |
13 | .c { color: #998; font-style: italic } // Comment
14 | .err { color: #a61717; background-color: #e3d2d2 } // Error
15 | .k { font-weight: bold } // Keyword
16 | .o { font-weight: bold } // Operator
17 | .cm { color: #998; font-style: italic } // Comment.Multiline
18 | .cp { color: #999; font-weight: bold } // Comment.Preproc
19 | .c1 { color: #998; font-style: italic } // Comment.Single
20 | .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
21 | .gd { color: #000; background-color: #fdd } // Generic.Deleted
22 | .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
23 | .ge { font-style: italic } // Generic.Emph
24 | .gr { color: #a00 } // Generic.Error
25 | .gh { color: #999 } // Generic.Heading
26 | .gi { color: #000; background-color: #dfd } // Generic.Inserted
27 | .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
28 | .go { color: #888 } // Generic.Output
29 | .gp { color: #555 } // Generic.Prompt
30 | .gs { font-weight: bold } // Generic.Strong
31 | .gu { color: #aaa } // Generic.Subheading
32 | .gt { color: #a00 } // Generic.Traceback
33 | .kc { font-weight: bold } // Keyword.Constant
34 | .kd { font-weight: bold } // Keyword.Declaration
35 | .kp { font-weight: bold } // Keyword.Pseudo
36 | .kr { font-weight: bold } // Keyword.Reserved
37 | .kt { color: #458; font-weight: bold } // Keyword.Type
38 | .m { color: #099 } // Literal.Number
39 | .s { color: #d14 } // Literal.String
40 | .na { color: #008080 } // Name.Attribute
41 | .nb { color: #0086B3 } // Name.Builtin
42 | .nc { color: #458; font-weight: bold } // Name.Class
43 | .no { color: #008080 } // Name.Constant
44 | .ni { color: #800080 } // Name.Entity
45 | .ne { color: #900; font-weight: bold } // Name.Exception
46 | .nf { color: #900; font-weight: bold } // Name.Function
47 | .nn { color: #555 } // Name.Namespace
48 | .nt { color: #000080 } // Name.Tag
49 | .nv { color: #008080 } // Name.Variable
50 | .ow { font-weight: bold } // Operator.Word
51 | .w { color: #bbb } // Text.Whitespace
52 | .mf { color: #099 } // Literal.Number.Float
53 | .mh { color: #099 } // Literal.Number.Hex
54 | .mi { color: #099 } // Literal.Number.Integer
55 | .mo { color: #099 } // Literal.Number.Oct
56 | .sb { color: #d14 } // Literal.String.Backtick
57 | .sc { color: #d14 } // Literal.String.Char
58 | .sd { color: #d14 } // Literal.String.Doc
59 | .s2 { color: #d14 } // Literal.String.Double
60 | .se { color: #d14 } // Literal.String.Escape
61 | .sh { color: #d14 } // Literal.String.Heredoc
62 | .si { color: #d14 } // Literal.String.Interpol
63 | .sx { color: #d14 } // Literal.String.Other
64 | .sr { color: #009926 } // Literal.String.Regex
65 | .s1 { color: #d14 } // Literal.String.Single
66 | .ss { color: #990073 } // Literal.String.Symbol
67 | .bp { color: #999 } // Name.Builtin.Pseudo
68 | .vc { color: #008080 } // Name.Variable.Class
69 | .vg { color: #008080 } // Name.Variable.Global
70 | .vi { color: #008080 } // Name.Variable.Instance
71 | .il { color: #099 } // Literal.Number.Integer.Long
72 | }
73 |
--------------------------------------------------------------------------------
/about/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: full-width
3 | title: About
4 | ---
5 |
6 | The *Tufte-Jekyll* theme is a natural extension of the work done by [Edward Tufte](https://github.com/edwardtufte/tufte-css) and his collaborators on Github who created a CSS file that allows web writers to use the same simple and elegant style employed in his published materials.
7 |
8 | To incorporate these styles into a Jekyll theme, I have made some very slight modifications that attempt to maintain the feel of the CSS styles in his Github repo.
9 |
10 | Note that this is a full-width layout. This was accomplished by including ```layout: full-width``` in the YAML front matter for this page. Keep in mind that all the Tufte-Jekyll sidenote and marginnote goodness will not work on full-width layouts!
11 |
12 | You can find the source code for Jekyll at [github.com/jekyll/jekyll](https://github.com/jekyll/jekyll).
13 |
14 |
15 |
--------------------------------------------------------------------------------
/assets/img/badge.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/badge.png
--------------------------------------------------------------------------------
/assets/img/badge_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/badge_1.png
--------------------------------------------------------------------------------
/assets/img/badge_1.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/badge_1.psd
--------------------------------------------------------------------------------
/assets/img/badge_1a.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/badge_1a.psd
--------------------------------------------------------------------------------
/assets/img/badge_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/badge_2.png
--------------------------------------------------------------------------------
/assets/img/badge_3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/badge_3.png
--------------------------------------------------------------------------------
/assets/img/exports-imports.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/exports-imports.png
--------------------------------------------------------------------------------
/assets/img/figure1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/figure1.png
--------------------------------------------------------------------------------
/assets/img/figure2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/figure2.png
--------------------------------------------------------------------------------
/assets/img/figure3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/figure3.png
--------------------------------------------------------------------------------
/assets/img/napoleons-march.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/napoleons-march.png
--------------------------------------------------------------------------------
/assets/img/rhino.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clayh53/tufte-jekyll/d54bfd83aaa46f6bc8023a162637ce9c4005f62f/assets/img/rhino.png
--------------------------------------------------------------------------------
/css/print.scss:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | ---
4 | @import "../_sass/settings";
5 | * {
6 | -webkit-transition: none !important;
7 | transition: none !important;
8 | }
9 | *,
10 | *:before,
11 | *:after {
12 | background: transparent !important;
13 | box-shadow: none !important;
14 | text-shadow: none !important;
15 | }
16 | *{transition:none!important}
17 | @page {
18 | margin: 0.75in 0.5in 0.75in 0.5in;
19 | orphans:4; widows:2;
20 | }
21 |
22 | body {
23 | font-size: 12pt;
24 |
25 | }
26 | html body span.print-footer{
27 | font-family: $sans-font;
28 | font-size: 9pt;
29 | margin-top: 22.4pt;
30 | padding-top: 4pt;
31 | border-top: 1px solid #000;
32 | }
33 |
34 | thead {
35 | display: table-header-group;
36 | }
37 |
38 | tr,
39 | img {
40 | page-break-inside: avoid;
41 | }
42 |
43 | img {
44 | max-width: 100% !important;
45 | }
46 |
47 | p,
48 | h2,
49 | h3 {
50 | orphans: 4;
51 | widows: 4;
52 | }
53 | article h2, article h2 h3, article h3, article h3 h4, article h4, article h4 h5 {
54 | page-break-after: avoid;
55 | }
56 |
57 | body header , body footer {
58 | display:none;
59 | }
60 |
--------------------------------------------------------------------------------
/css/tufte.scss:
--------------------------------------------------------------------------------
1 | ---
2 | # this ensures Jekyll reads the file to be transformed into CSS later
3 | # only Main files contain this front matter, not partials.
4 | nav_exclude: true
5 | ---
6 | /*****************************************************************************/
7 | /*
8 | /* Tufte Jekyll blog theme
9 | /* Based on Tufte CSS by Dave Liepmann ( https://github.com/edwardtufte/tufte-css )
10 | /*
11 | /* The README.md will show you how to set up your site along with other goodies
12 | /*****************************************************************************/
13 |
14 | // Imports to create final
15 |
16 | @import "../_sass/fonts";
17 | @import "../_sass/settings";
18 | @import "../_sass/syntax-highlighting";
19 |
20 | // Global Resets
21 | //
22 | * { margin: 0; padding: 0; }
23 |
24 | /* clearfix hack after Cederholm (group class name) */
25 | .group:after {
26 | content: "";
27 | display: table;
28 | clear: both;
29 | }
30 |
31 | html, body { height: 100%; }
32 |
33 | // First significant deviation from CSS on tufte.css site - variable font size as browser width expands or contracts
34 | //html { font-size: 15px; }
35 |
36 | html{
37 | text-align: baseline;
38 | font-size: 11px;
39 | -webkit-font-smoothing: antialiased;
40 | -moz-osx-font-smoothing: grayscale;
41 |
42 | }
43 |
44 | @media screen and (min-width: 800px){ html{ font-size: 12px;} }
45 |
46 | @media screen and (min-width: 900px){ html{ font-size: 13px;} }
47 |
48 | @media screen and (min-width: 1000px){ html{ font-size: 14px;} }
49 |
50 | @media screen and (min-width: 1100px){ html{ font-size: 15px; } }
51 |
52 | @media screen and (min-width: 1200px){ html{ font-size: 16px; } }
53 |
54 | @media screen and (min-width: 1300px){ html{ font-size: 17px; } }
55 |
56 | // Mathjax fonts need TLC
57 | .mjx-math{
58 | font-size: 1.3rem;
59 | }
60 | // sets link style according to values in _settings.scss
61 | a {
62 | color: $contrast-color;
63 | text-decoration: none;
64 | }
65 |
66 | p > a, cite > a, span > a { @if $link-style == underline
67 | {
68 | color: $text-color;
69 | text-decoration: none;
70 | background: -webkit-linear-gradient($bg-color, $bg-color), -webkit-linear-gradient($bg-color, $bg-color), -webkit-linear-gradient(currentColor, currentColor);
71 | background: linear-gradient($bg-color, $bg-color), linear-gradient($bg-color, $bg-color), linear-gradient(currentColor, currentColor);
72 | -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
73 | -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
74 | background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
75 | background-repeat: no-repeat, no-repeat, repeat-x;
76 | text-shadow: 0.03em 0 $bg-color, -0.03em 0 $bg-color, 0 0.03em $bg-color, 0 -0.03em $bg-color, 0.06em 0 $bg-color, -0.06em 0 $bg-color, 0.09em 0 $bg-color, -0.09em 0 $bg-color, 0.12em 0 $bg-color, -0.12em 0 $bg-color, 0.15em 0 $bg-color, -0.15em 0 $bg-color;
77 | background-position: 0% 93%, 100% 93%, 0% 93%;
78 | }
79 | @else
80 | {
81 | color: $contrast-color;
82 | text-decoration: none;
83 | }
84 | }
85 |
86 | body { width: 87.5%;
87 | margin-left: auto;
88 | margin-right: auto;
89 | padding-left: 12.5%;
90 | font-family: $body-font;
91 | background-color: $bg-color;
92 | color: $text-color;
93 | max-width: 1400px;
94 | counter-reset: sidenote-counter; }
95 |
96 | // --------- Typography stuff -----------//
97 | // added rational line height and margins ala http://webtypography.net/intro/
98 |
99 | h1 { font-weight: 400;
100 | margin-top: 1.568rem;
101 | margin-bottom: 1.568rem;
102 | font-size: 2.5rem;
103 | line-height: 0.784; }
104 |
105 | h2 { font-style: italic;
106 | font-weight: 400;
107 | margin-top: 1.866666666666667rem;
108 | margin-bottom: 0;
109 | font-size: 2.1rem;
110 | line-height: 0.933333333333333; }
111 |
112 | h3 { font-style: italic;
113 | font-weight: 400;
114 | font-size: 1.8rem;
115 | margin-top: 2.1777777777777778rem;
116 | margin-bottom: 0;
117 | line-height: 1.08888888888889; }
118 |
119 | // ET says a need for more than 3 levels of headings is the sign of a diseased mind
120 |
121 | p .subtitle { font-style: italic;
122 | margin-top: 2.1777777777777778rem;
123 | margin-bottom: 2.1777777777777778rem;
124 | font-size: 1.8rem;
125 | display: block;
126 | line-height: 1.08888888888889; }
127 |
128 |
129 | p, ol, ul { font-size: 1.4rem; }
130 |
131 | p, li { line-height: 2rem;
132 | margin-top: 1.4rem;
133 | padding-right: 2rem; //removed because, why?
134 | vertical-align: baseline; }
135 |
136 | /* Chapter Epigraphs */
137 | div.epigraph { margin: 3.5636rem 0; }
138 |
139 | div.epigraph > blockquote { margin-top: 3rem;
140 | margin-bottom: 3rem;
141 | }
142 |
143 | div.epigraph > blockquote, div.epigraph > blockquote > p { font-style: italic; }
144 |
145 | div.epigraph > blockquote > footer { font-style: normal;
146 | width: 45%;
147 | padding-left: 2.5%;
148 | padding-right: 2.5%;
149 | padding-top: 0;
150 | margin-top: 0.4455rem;
151 | margin-bottom: 3.1182rem }
152 |
153 | div.epigraph > blockquote > footer > cite { font-style: italic; }
154 | /* end chapter epigraphs styles */
155 |
156 | blockquote p, blockquote footer{ width: 45%;
157 | padding-left: 2.5%;
158 | padding-right: 2.5%;}
159 |
160 | blockquote footer { font-size: 1.1rem;
161 | line-height: 1.78181818;
162 | margin-top: 1.78181818rem;
163 | margin-bottom: 1.78181818rem;
164 | text-align: right;
165 | }
166 |
167 | /* blockquote footer { width: 45%;
168 | text-align: right; }
169 | */
170 |
171 | .sans { font-family: $sans-font;
172 | letter-spacing: .03em; }
173 |
174 | pre, pre code, p code, p pre code { font-family: $code-font; // removed .code 'class' since code is an actual html tag
175 | font-size: 1.2rem; // also added p code, p pre code and pre selector to account for Markdown parsing
176 | line-height: 1.71428571; // of triple backticks plus rationalized line-heights and margins
177 | margin-top: 1.71428571rem; }
178 |
179 |
180 | h1 code, h2 code, h3 code { font-size: 0.80em; } //left in for no real reason
181 |
182 | /*-- Table styling section - For Tufte-Jekyll, booktabs style is default for Markdown tables --*/
183 |
184 | table, table.booktabs { width: auto; //making booktabs style tables the unstyled default in case someone uses Markdown styling
185 | //margin: 0 auto;
186 | border-spacing: 0px;
187 | border-top: 2px solid $border-color;
188 | border-bottom: 2px solid $border-color; }
189 |
190 | .booktabs th, th { border-bottom: 1px solid $border-color;
191 | padding: 0.65ex 0.5em 0.4ex 0.5em;
192 | font-weight: normal;
193 | //text-align: center;
194 | }
195 |
196 | th, td{ font-size: 1.2rem;
197 | line-height: 1.71428571; }
198 |
199 | .booktabs th.cmid, th { border-bottom: 1px solid lighten($border-color, 25%); }
200 |
201 | .booktabs th.nocmid { border-bottom: none; }
202 |
203 | .booktabs tbody tr:first-child td, tr:first-child td { padding-top: 0.65ex; } /* add space between thead row and tbody */
204 |
205 | .booktabs td, td { padding-left: 0.5em;
206 | padding-right: 0.5em;
207 | text-align: left; }
208 |
209 | .booktabs caption, caption { font-size: 90%;
210 | text-align: left;
211 | width: auto;
212 | margin-left: auto;
213 | margin-right: auto;
214 | margin-top: 1ex;
215 | caption-side: top; }
216 |
217 | .booktabs tbody tr, .booktabs thead tr th.l, .booktabs td.l { text-align: left !important; }
218 | .booktabs tbody tr, .booktabs thead tr th.c, .booktabs td.c { text-align: center !important; }
219 | .booktabs tbody tr, .booktabs thead tr th.r, .booktabs td.r { text-align: right !important; }
220 |
221 | .table-caption { float:right;
222 | clear:right;
223 | margin-right: -60%;
224 | width: 50%;
225 | margin-top: 0;
226 | margin-bottom: 0;
227 | font-size: 1.0rem;
228 | line-height: 1.96; }
229 | /* -- End of Table Styling section --*/
230 |
231 | /* Basic Layout stuff --*/
232 |
233 | article { position: relative;
234 | padding: 1
235 |
236 | rem 0rem 2.5rem 0rem; } // reduced top and bottom padding by 50%
237 |
238 | section { padding-top: 1rem;
239 | padding-bottom: 1rem; }
240 |
241 | ul,ol { width: 45%;
242 | -webkit-padding-start: 5%;
243 | -webkit-padding-end: 5%;
244 | list-style-type: none; }
245 |
246 | //li { padding: 0.5em 0; } //vertical padding on list items screws up vertical rhythym
247 |
248 | figure, figure img.maincolumn { max-width: 55%;
249 | -webkit-margin-start: 0;
250 | -webkit-margin-end: 0;
251 | margin-bottom: 3em; }
252 |
253 | figcaption { float: right;
254 | clear: right;
255 | margin-right: -50%;
256 | margin-top: 0;
257 | margin-bottom: 0;
258 | font-size: 1.0rem;
259 | line-height: 1.6;
260 | vertical-align: baseline;
261 | position: relative;
262 | max-width: 40%; }
263 |
264 | figure.fullwidth figcaption { float: left; margin-right: 0%; margin-left: 33%; max-width: 100%; }
265 |
266 | img { max-width: 100%; }
267 |
268 | .sidenote, .marginnote { float: right;
269 | clear: right;
270 | margin-right: -60%;
271 | width: 50%;
272 | margin-top: 0;
273 | margin-bottom: 1.96rem;
274 | font-size: 1.0rem;
275 | line-height: 1.96; //changed to bring line heights into rational pattern
276 | vertical-align: baseline;
277 | position: relative; }
278 |
279 |
280 | li .sidenote, li .marginnote{ margin-right: -80%; } //added to allow for the fact that lists are indented and marginnotes and sidenotes push to right
281 |
282 | blockquote .sidenote, blockquote .marginnote { margin-right: -79% }
283 |
284 | .sidenote-number { counter-increment: sidenote-counter; }
285 |
286 | .sidenote-number:after, .sidenote:before { content: counter(sidenote-counter) " ";
287 | font-family: et-bembo-roman-old-style;
288 | color: $contrast-color; //added color
289 | position: relative;
290 | vertical-align: baseline; }
291 |
292 | .sidenote-number:after { content: counter(sidenote-counter);
293 | font-size: 1rem;
294 | top: -0.5rem;
295 | left: 0.1rem; }
296 |
297 | .sidenote:before { content: counter(sidenote-counter) ".\000a0"; // this is unicode for a non-breaking space
298 | color: $contrast-color;
299 | top: 0rem; } //removed superscripting for numerical reference in sidenote
300 |
301 | p, footer, div.table-wrapper, .MJXc-display, .MathJax { width: 55%; }
302 |
303 | div.table-wrapper, table { overflow-x: auto; } //changed all overflow values to 'auto' so scroll bars appear only as needed
304 |
305 | @media screen and (max-width: 760px) { p, footer { width: 90%; }
306 | pre code { width: 87.5%; }
307 | ul { width: 85%; }
308 | figure { max-width: 90%; }
309 | figcaption, figure.fullwidth figcaption { margin-right: 0%;
310 | max-width: none; }
311 | blockquote p, blockquote footer, div.epigraph > blockquote > footer,.MJXc-display { width: 80%;
312 | padding-left: 5%;
313 | padding-right: 5%;
314 | }}
315 |
316 | .marginnote code, .sidenote code { font-size: 1rem; } //more .code class removal
317 |
318 | pre { width: 52.5%; //, pre code, p pre code are both selectors in tufte.css - they have been removed here to fix alignment issues
319 | padding-left: 2.5%;
320 | overflow-x: auto; }
321 |
322 | .fullwidth, li.listing div{ max-width: 90%; }
323 |
324 | .full-width { .sidenote, .sidenote-number, .marginnote { display: none; } }
325 |
326 | span.newthought { font-variant: small-caps;
327 | font-size: 1.2em;
328 | letter-spacing: 0.05rem; }
329 |
330 | input.margin-toggle { display: none; }
331 |
332 | label.sidenote-number { display: inline; }
333 |
334 | label.margin-toggle:not(.sidenote-number) { display: none; }
335 |
336 | @media (max-width: 760px) { label.margin-toggle:not(.sidenote-number) { display: inline; color: $contrast-color; }
337 | .sidenote, .marginnote { display: none; }
338 | .margin-toggle:checked + .sidenote,
339 | .margin-toggle:checked + .marginnote { display: block;
340 | float: left;
341 | left: 1rem;
342 | clear: both;
343 | width: 95%;
344 | margin: 1rem 2.5%;
345 | vertical-align: baseline;
346 | position: relative; }
347 | label { cursor: pointer; }
348 | pre, pre code, p code, p pre code { width: 90%;
349 | padding: 0; }
350 | .table-caption { display: block;
351 | float: right;
352 | clear: both;
353 | width: 98%;
354 | margin-top: 1rem;
355 | margin-bottom: 0.5rem;
356 | margin-left: 1%;
357 | margin-right: 1%;
358 | vertical-align: baseline;
359 | position: relative; }
360 | div.table-wrapper, table, table.booktabs { width: 85%; }
361 | div.table-wrapper { border-right: 1px solid #efefef; }
362 | img { max-width: 100%; }
363 | figcaption.maincolumn-figure, figure.fullwidth figcaption { float:none; text-align: center;}
364 | figure.fullwidth figcaption { margin-left: 0; }
365 | }
366 | /*--- End of Basic Layout stuff from tufte.css ---*/
367 |
368 | /* -- Jekyll specific styling --*/
369 | //helper classes
370 |
371 | .contrast { color: $contrast-color;}
372 | .smaller { font-size: 80%;}
373 | //Nav and Footer styling area
374 |
375 | header > nav.group, body footer {
376 | width: 95%;
377 | padding-top: 2rem;
378 | }
379 |
380 | nav.group a.active:before{ content:"\0003c\000a0";} // escaped unicode for the carats and then a space on active menu links
381 | nav.group a.active:after{ content:"\000a0\0003e" ;}
382 |
383 | header > nav a{
384 | font-size: 1.2rem;
385 | font-family: $sans-font;
386 | letter-spacing: 0.15em;
387 | text-transform: uppercase;
388 | color: $contrast-color;
389 | padding-top: 1.5rem;
390 | text-decoration: none;
391 | display: inline-block;
392 | float: left;
393 | margin-top: 0;
394 | margin-bottom: 0;
395 | padding-right: 2rem;
396 | //margin-left: 1rem;
397 | vertical-align: baseline;
398 | }
399 | header > nav a img{
400 | height: 5rem;
401 | position: relative;
402 | max-width: 100%;
403 | top:-1.5rem;
404 | }
405 | ul.footer-links, .credits{
406 | list-style: none;
407 | text-align: center;
408 | margin: 0 auto;
409 | }
410 | ul.footer-links li{
411 | display: inline;
412 | padding: 0.5rem 0.25rem;
413 | }
414 | .credits{
415 | padding: 1rem 0rem;
416 | }
417 |
418 | //change font color for credit links in footer
419 |
420 | .credits{
421 | font-family: $sans-font;
422 | & a{
423 | color: $contrast-color;
424 | }
425 | }
426 |
427 | // End of Nav and Footer styling area
428 |
429 | //Full width page styling stuff
430 |
431 | body.full-width, .content-listing, ul.content-listing li.listing{ width: 90%;
432 | margin-left: auto;
433 | margin-right: auto;
434 | padding: 0% 5%;
435 |
436 | }
437 | .full-width article p{
438 | width: 90%;
439 | }
440 |
441 |
442 | h1.content-listing-header{
443 | font-style: normal;
444 | text-transform: uppercase;
445 | letter-spacing: 0.2rem;
446 | font-size: 1.8rem;
447 | }
448 |
449 | li.listing hr{
450 | width:100%;
451 | }
452 | .listing, .listing h3
453 | {
454 | display: inline-block;
455 | margin:0;
456 | }
457 | li.listing {
458 | margin:0;
459 | & p{
460 | width: 100%
461 | }
462 | }
463 |
464 |
465 | li.listing:last-of-type{
466 | border-bottom: none;
467 | margin-bottom: 1.4rem;
468 | }
469 | li.listing h3.new {
470 | text-transform: uppercase;
471 | font-style: normal;
472 | }
473 | hr.slender {
474 | border: 0;
475 | height: 1px;
476 | margin-top: 1.4rem;
477 | margin-bottom:1.4rem;
478 | background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
479 | background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
480 | background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
481 | background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
482 | }
483 | // End of front listing page stuff
484 |
485 |
486 | // Printing ands screen media queries
487 |
488 | // Does not display a print-footer for screen display
489 | @media screen{
490 | .print-footer{
491 | display: none;
492 | }
493 | }
494 |
495 | //printing stuff
496 | @media print {
497 |
498 | * {
499 | -webkit-transition: none !important;
500 | transition: none !important;
501 | }
502 | *,
503 | *:before,
504 | *:after {
505 | background: transparent !important;
506 | box-shadow: none !important;
507 | text-shadow: none !important;
508 | }
509 | @page {
510 | margin: 0.75in 0.5in 0.75in 0.5in;
511 | orphans:4; widows:2;
512 | }
513 |
514 | body {
515 | font-size: 12pt;
516 |
517 | }
518 | html body span.print-footer{
519 | font-family: $sans-font;
520 | font-size: 9pt;
521 | margin-top: 22.4pt;
522 | padding-top: 4pt;
523 | border-top: 1px solid #000;
524 | }
525 |
526 | thead {
527 | display: table-header-group;
528 | }
529 |
530 | tr,
531 | img {
532 | page-break-inside: avoid;
533 | }
534 |
535 | img {
536 | max-width: 100% !important;
537 | }
538 |
539 | p,
540 | h2,
541 | h3 {
542 | orphans: 4;
543 | widows: 4;
544 | }
545 | article h2, article h2 h3, article h3, article h3 h4, article h4, article h4 h5 {
546 | page-break-after: avoid;
547 | }
548 |
549 | body header , body footer {
550 | display:none;
551 | }
552 | }
553 |
554 |
555 | /* --- Icomoon icon fonts CSS --*/
556 | @font-face {
557 | font-family: 'icomoon';
558 | src: url('../fonts/icomoon.eot?pmc8bw');
559 | src: url('../fonts/icomoon.eot?pmc8bw#iefix') format('embedded-opentype'),
560 | url('../fonts/icomoon.ttf?pmc8bw') format('truetype'),
561 | url('../fonts/icomoon.woff?pmc8bw') format('woff'),
562 | url('../fonts/icomoon.svg?pmc8bw#icomoon') format('svg');
563 | font-weight: normal;
564 | font-style: normal;
565 | font-display: block;
566 | }
567 |
568 | [class^="icon-"], [class*=" icon-"] {
569 | /* use !important to prevent issues with browser extensions that change fonts */
570 | font-family: 'icomoon' !important;
571 | speak: none;
572 | font-style: normal;
573 | font-weight: normal;
574 | font-variant: normal;
575 | text-transform: none;
576 | line-height: 1;
577 |
578 | /* Better Font Rendering =========== */
579 | -webkit-font-smoothing: antialiased;
580 | -moz-osx-font-smoothing: grayscale;
581 | }
582 |
583 | .icon-mail3:before {
584 | content: "\ea85";
585 | }
586 | .icon-amazon:before {
587 | content: "\ea87";
588 | }
589 | .icon-google2:before {
590 | content: "\ea89";
591 | }
592 | .icon-facebook2:before {
593 | content: "\ea91";
594 | }
595 | .icon-twitter:before {
596 | content: "\ea96";
597 | }
598 | .icon-rss2:before {
599 | content: "\ea9c";
600 | }
601 | .icon-youtube:before {
602 | content: "\ea9d";
603 | }
604 | .icon-vimeo2:before {
605 | content: "\eaa1";
606 | }
607 | .icon-lanyrd:before {
608 | content: "\eaa2";
609 | }
610 | .icon-flickr3:before {
611 | content: "\eaa5";
612 | }
613 | .icon-behance2:before {
614 | content: "\eaa9";
615 | }
616 | .icon-dropbox:before {
617 | content: "\eaae";
618 | }
619 | .icon-github:before {
620 | content: "\eab0";
621 | }
622 | .icon-blogger2:before {
623 | content: "\eab8";
624 | }
625 | .icon-soundcloud2:before {
626 | content: "\eac4";
627 | }
628 | .icon-skype:before {
629 | content: "\eac5";
630 | }
631 | .icon-reddit:before {
632 | content: "\eac6";
633 | }
634 | .icon-linkedin:before {
635 | content: "\eac9";
636 | }
637 | .icon-pinterest:before {
638 | content: "\ead1";
639 | }
640 | .icon-paypal:before {
641 | content: "\ead8";
642 | }
643 | .icon-html-five:before {
644 | content: "\eae4";
645 | }
646 | /*-- End of Icomoon icon font section --*/
647 |
--------------------------------------------------------------------------------
/feed.xml:
--------------------------------------------------------------------------------
1 | ---
2 | layout: null
3 | nav_exclude: true
4 | ---
5 |
6 | Articles8 |
| ||
|---|---|---|