jekyll-theme-tufte 0.3.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 74393a043fe873cb442b2c7c7ac2ee0ea78886bc82eb88cfaae8b7d2a7b212bf
+  data.tar.gz: 1a1640cdc0349836de87daf17dd44b14cf7e43b8f56b93278315a4ffa7685222
+SHA512:
+  metadata.gz: f2fe188c0c3c39a5ed09a19d9f1e79f6afea16bb0a56d8811fcebf39cff9d97f6f7e7d056b778503d45739266db3ddca8be71f5a381d5591d6e5dc921d664939
+  data.tar.gz: aaae0fa97e69b528b829fe7f74c444f7378c4716ca557fe7820c37ca4841bd2e3a1aba191f217a6a6b21238dd2fba11d77b67ef734141bcec14dad022443a57f

data/LICENSE.txt

@@ -0,0 +1,24 @@
+The MIT License (MIT)
+
+Derived from work copyright (c) 2015 Clay H, used under MIT license
+Derived from work copyright (c) 2016 Stephan Druskat, used under MIT license
+Derived from work copyright (c) 2016 Jacob Zimmerman, used under MIT license
+Copyright (c) 2022 Andy Brody
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,81 @@
+# jekyll-theme-tufte
+
+## *A modern Jekyll theme based on [tufte-css](https://github.com/edwardtufte/tufte-css)*
+
+*jekyll-theme-tufte* is a [Jekyll](https://jekyllrb.com) static website theme inspired by the text design of Edward
+Tufte. It is enabled by [*tufte-css*](https://github.com/edwardtufte/tufte-css),
+a CSS file providing the Tufte styles.
+
+This is a gem-packaged theme that can be easily installed by including
+*jekyll-theme-tufte* in your `Gemfile`.
+
+Large portions of the theme are derived from prior work to bring *tufte-css* to Jekyll, including:
+
+* [*tufte-css-jekyll*](https://github.com/sdruskat/tufte-css-jekyll), a classic-style Jekyll theme
+* [*tufte-jekyll*](https://github.com/clayh53/tufte-jekyll), a classic-style theme with a lot of extra visual stuff added
+* [*tufte-pandoc-jekyll*](https://github.com/jez/tufte-pandoc-jekyll), a gem-style theme that uses pandoc under the hood
+* [*ET-Jekyll*](https://github.com/bradleytaunt/ET-Jekyll), a classic-style theme that makes a number of CSS changes
+
+This theme is minimalist and tries to stick closely to the original tufte-css styles. As a gem-based theme, it is also easier to install and manage compared to classic style themes. (Classic Jekyll themes are installed by mixing all the files in with your site’s files, which creates a big mess.)
+
+This theme is responsive and adapts to desktop and mobile screens. (Margin notes
+are displayed inline on narrow screens.) It also supports dark mode detection
+via `prefers-color-scheme`, looking good on dark and light backgrounds alike.
+
+### [Try out the demo!](https://ab.github.io/jekyll-theme-tufte/)
+
+[![demo-screenshot](./screenshot.png)](https://ab.github.io/jekyll-theme-tufte/)
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem 'jekyll-theme-tufte'
+```
+
+And add these lines to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: jekyll-theme-tufte
+plugins:
+  - jekyll-theme-tufte
+```
+
+(Adding the theme to the plugins list is necessary if you want to use the
+custom Liquid template tags like `{% marginnote ... %}`. If you already have a
+plugins list, append `- jekyll-theme-tufte` to the list.)
+
+Then, to install all the gem dependencies, run:
+
+    $ bundle
+
+Or install it manually with:
+
+    $ gem install jekyll-theme-tufte
+
+## Usage
+
+If you are new to Jekyll, check out the [Jekyll documentation](https://jekyllrb.com/docs/home/) first.
+
+### Some theme specifics
+
+- The **large site title (and subtitle)** can be switched on/off by setting the value for `header` in `_config.yml` to false.
+
+- The nav menu page order and titles can be configured in the YAML front matter at the top of each page. See [Available Page Layouts](https://ab.github.io/jekyll-theme-tufte/page/layouts) in the demo site for more info.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/ab/jekyll-theme-tufte. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
+
+## Development of the theme
+
+To set up your environment to develop this theme, clone the theme and run `bundle install`.
+
+Themes work much like normal Jekyll sites, so to test changes to the theme, run `bundle exec jekyll serve -w` and open your browser at `http://localhost:4000/jekyll-theme-tufte/`. This starts a Jekyll server running the theme demo site.
+
+Only files listed in the regex in the gemspec are included in the published theme. Custom directories can be added by editing the regex in `jekyll-theme-tufte.gemspec`.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_config.yml

@@ -0,0 +1,18 @@
+# Note: Remove the baseurl in order to deploy at the domain root
+baseurl: /jekyll-theme-tufte
+title: jekyll-theme-tufte
+# Whether the header (with large title and subtitle) should be displayed
+header: false
+subtitle: A Jekyll theme based on tufte-css
+author: Andy Brody
+description: A Jekyll theme based on tufte-css
+markdown: kramdown
+markdown_ext: "markdown,mkdown,mkdn,mkd,md"
+highlighter: rouge
+# permalink: /blog/:categories/:year/:month/:day/:title.html
+permalink: /blog/:categories/:slug
+timezone: America/New_York
+excerpt_separator: <!--more-->
+exclude: ['Gemfile', 'Gemfile.lock', 'Rakefile', 'README.md']
+plugins:
+  - jekyll-feed

data/_includes/footer.html

@@ -0,0 +1,11 @@
+<footer class="page-footer">
+  <div class="credits faded">
+    <span>&copy; {{ site.time | date: '%Y' }}
+      {% if site.email == "" or site.email == nil %}
+        {{ site.author }}
+      {% else %}
+        <a href="mailto:{{ site.email }}">{{site.author}}</a>
+      {% endif %}
+    </span>
+  </div>
+</footer>

data/_includes/head.html

@@ -0,0 +1,25 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  {% if page.head_title %}
+    <title>{{ page.head_title }}</title>
+  {% else %}
+    {% if page.collection == "posts" %}
+      <title>{{ page.title | default: "Post" }}{% if site.author %} | by {{ site.author }}{% endif %}</title>
+    {% else %}
+      <title>{% if page.nav_title or page.title %}{{ page.nav_title | default: page.title }} | {% endif %}{{ site.title }}</title>
+    {% endif %}
+  {% endif %}
+  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+
+  <link rel="stylesheet" type="text/css" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
+  <link rel="stylesheet" type="text/css" href="{{ "/assets/css/fonts-et-book.css" | prepend: site.baseurl }}">
+  <link rel="stylesheet" type="text/css" href="{{ "/assets/css/fonts-lato.css" | prepend: site.baseurl }}">
+  <link rel="stylesheet" type="text/css" href="{{ "/assets/css/latex.css" | prepend: site.baseurl }}">
+
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+
+  {% feed_meta %}{% comment %} Insert link to RSS feed via jekyll-feed plugin {% endcomment %}
+</head>

data/_includes/header.html

@@ -0,0 +1,33 @@
+<!--- Header and nav template site-wide -->
+<header>
+	{% if site.header == true %}
+		<h1 class="header-title"><a href="{{site.baseurl}}/">{{ site.title }}</a></h1>
+		{% unless site.subtitle == "" or site.subtitle == nil %}
+			<h2 class="header-subtitle">{{ site.subtitle }}</h2>
+    {% endunless %}
+	{% endif %}
+
+  <nav class="group">
+    <ul>
+    {%- assign pg = site.pages | sort: "weight" %}
+    {%- for node in pg %}
+      {%- if node.nav_exclude or node.url contains ".css" or node.url contains ".scss" %}
+        {%- continue %}
+      {%- endif %}
+
+      {%- assign title = node.nav_title | default: node.title %}
+      {%- unless title and title != "" %}
+        {%- continue %}
+      {%- endunless %}
+
+      <li>
+        <a href="{{node.url | prepend: site.baseurl}}"
+          {%- if page.url == node.url %} class="active" {% endif -%}
+        >
+          {{ title }}
+        </a>
+      </li>
+    {%- endfor %}
+    </ul>
+  </nav>
+</header>

data/_includes/print-footer.html

@@ -0,0 +1 @@
+<span class="print-footer">{% if page.date %}{{ page.title }} - {{ page.date | date: "%B %-d, %Y" }} - {{site.author}}{% else %}{{ page.title }} - {{site.author}}{% endif %}</span>

data/_layouts/blog.html

@@ -0,0 +1,30 @@
+---
+layout: default
+title: blog
+full_width: true
+---
+
+<h1>Writing</h1>
+<p class=subtitle>{{ site.author }}</p>
+
+{{ content }}
+
+{%- for post in site.posts -%}
+{%- assign currentyear = post.date | date: "%Y" -%}
+{%- if currentyear != prevyear -%}
+  {% unless forloop.first %}
+</ul>
+  {% endunless %}
+<h2 id="{{ currentyear }}">{{ currentyear }}</h2>
+<ul>
+  {%- assign prevyear = currentyear -%}
+{% endif %}
+  <li>
+    <p><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> — {{ post.date | date: '%B %-d' }}</p>
+  </li>
+{%- if forloop.last %}
+</ul>
+{%- endif -%}
+{% else %}
+<p>Watch this space for the first post!</p>
+{% endfor %}

data/_layouts/default.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  {% include head.html %}
+  <body {% if page.full_width or layout.full_width %}class="full-width"{% endif %}>
+    {% include header.html %}
+    <article class="group">
+      {{ content }}
+    </article>
+    {% include print-footer.html %}
+    {% include footer.html %}
+  </body>
+</html>

data/_layouts/page-hero.html

@@ -0,0 +1,8 @@
+---
+layout: default
+---
+<h1 class="header-title">{{ page.title }}</h1>
+<h2 class="header-subtitle">{{ page.subtitle }}</h2>
+<p class="margin-maker"/>
+
+{{ content }}

data/_layouts/page.html

@@ -0,0 +1,8 @@
+---
+layout: default
+---
+<h1>{{ page.title }}</h1>
+<p class="subtitle">{{ page.subtitle }}</p>
+<p class="margin-maker"/>
+
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,12 @@
+---
+layout: default
+---
+<h1>{{ page.title }}</h1>
+<p class="subtitle">{{ page.date | date: "%B %-d, %Y" }}</p>
+
+{{ content }}
+
+<section>
+  <div style="clear: both"></div>
+  <p class="backarrow"><a href="{% link blog/index.md %}">← Back to all posts</a></p>
+</section>

data/_sass/_extras.scss

@@ -0,0 +1,362 @@
+/* Overrides and additional CSS functionality */
+
+.contrast { color: $contrast-color;}
+.smaller { font-size: 80%;}
+.larger { font-size: 2.8rem;}
+
+.faded { color: rgba(17,17,17,0.5); }
+
+/**
+ * Make it so that top-level <p> don't need to be wrapped in <section>
+ */
+article {
+    p, li, footer, table {
+        width: 55%;
+    }
+}
+footer {
+    width: 55%;
+}
+// should still go wide on narrow screens
+@media (max-width: 760px) {
+    article {
+        p, li, footer, table {
+            width: 100%;
+        }
+    }
+    footer { width: 100%; }
+}
+
+
+/* Back home link */
+p.backarrow {
+    font-size: 1.2rem;
+    font-style: italic;
+    margin-top: 3rem;
+}
+
+
+/* Styles for nav and headers */
+
+/* Style for active menu links: bold and with surrounding angle brackets */
+nav.group a.active { font-weight: bold; }
+nav.group a.active:before { content:"\27e8"; }
+nav.group a.active:after { content:"\27e9" ; }
+
+header > nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+header > nav a {
+  font-size: 1.3rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: $contrast-color;
+  text-decoration: none;
+  background: unset !important;
+  text-shadow: unset !important;
+  display: inline-block;
+  float: left;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: 2rem;
+  margin-top: 1.5rem;
+  padding-right: 0;
+  vertical-align: baseline;
+}
+header > nav li:last-child a {
+  margin-right: inherit;
+}
+header > nav a img{
+  height: 5rem;
+  position: relative;
+  max-width: 100%;
+  top:-1.5rem;
+}
+
+header::after {
+    display: block;
+    content: '';
+    clear: both;
+}
+
+// article doesn't need top padding due to nav and h1 margins
+article {
+  padding-top: 0em;
+}
+
+
+/* Footers */
+
+ul.footer-links, .credits{
+  list-style: none;
+  text-align: center;
+  margin: 0 auto;
+}
+ul.footer-links li{
+  display: inline;
+  padding: 0.5rem 0.25rem;
+}
+.credits{
+  padding: 1rem 0rem;
+}
+
+/* End of styles for headers and footers */
+
+
+// Full width page styling stuff
+
+.full-width article {
+    p, li, footer, table {
+        width: 90%;
+    }
+}
+.full-width footer {
+    width: 90%;
+}
+
+
+li.listing hr{
+  width:100%;
+}
+.listing, .listing h3
+{
+  display: inline-block;
+  margin:0;
+}
+li.listing {
+  margin:0;
+  & p{
+    width: 100%
+  }
+}
+
+
+li.listing:last-of-type{
+  border-bottom: none;
+  margin-bottom: 1.4rem;
+}
+li.listing h3.new {
+  text-transform: uppercase;
+  font-style: normal;
+}
+hr.slender {
+    border: 0;
+    height: 1px;
+    margin-top: 2.1rem;
+    margin-bottom:2.1rem;
+    background-color: black;
+//    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
+//    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
+//    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
+//    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
+}
+// End of front listing page stuff
+
+
+// Printing ands screen media queries
+
+// Does not display a print-footer for screen display
+@media screen{
+  .print-footer{
+    display: none;
+  }
+}
+
+//printing stuff
+@media print {
+
+    * {
+    -webkit-transition: none !important;
+    transition: none !important;
+    }
+    *,
+    *:before,
+    *:after {
+        background: transparent !important;
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+    @page {
+        margin: 0.75in 0.5in 0.75in 0.5in;
+        orphans:4; widows:2;
+    }
+
+    body {
+        font-size:  12pt;
+
+    }
+    html body span.print-footer{
+      font-size: 9pt;
+      margin-top: 22.4pt;
+      padding-top: 4pt;
+      border-top: 1px solid #000;
+    }
+
+    thead {
+        display: table-header-group;
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 4;
+        widows: 4;
+    }
+    article h2, article h2 h3, article h3, article h3 h4, article h4, article h4 h5 {
+        page-break-after: avoid;
+    }
+
+    // Hide screen headers and footers
+    body header, footer.page-footer, p.backarrow {
+      display: none;
+    }
+}
+
+
+// --------- Typography stuff -----------//
+// added rational line height and margins ala http://webtypography.net/intro/
+
+// h1 { font-weight: 400;
+//     margin-top: 1.568rem;
+//     margin-bottom: 1.568rem;
+//     font-size: 2.5rem;
+//     line-height: 0.784; }
+//
+// h2 { font-style: italic;
+//     font-weight: 400;
+//     margin-top: 1.866666666666667rem;
+//     margin-bottom: 0;
+//     font-size: 2.1rem;
+//     line-height: 0.933333333333333; }
+//
+// h3 { font-style: italic;
+//      font-weight: 400;
+//      font-size: 1.8rem;
+//      margin-top: 2.1777777777777778rem;
+//      margin-bottom: 0;
+//     line-height: 1.08888888888889; }
+h1 { font-weight: 400;
+     margin-top: 4rem;
+     margin-bottom: 2rem;
+     font-size: 3.2rem;
+     line-height: 1; }
+
+h1.header-title { font-weight: 400;
+     margin-top: 4rem;
+     margin-bottom: 2rem;
+     font-size: 6rem;
+     line-height: 1;
+     a {
+       background: unset;
+       text-shadow: unset;
+     }
+}
+
+h2 { font-style: italic;
+     font-weight: 400;
+     margin-top: 5.1rem;
+     margin-bottom: 0;
+     font-size: 2.2rem;
+     line-height: 1; }
+
+h2.header-subtitle { font-weight: 400;
+     margin-top: 4rem;
+     margin-bottom: 1.5rem;
+     font-size: 3rem;
+     font-style: italic;
+     line-height: 1;
+     }
+
+h3 { font-style: italic;
+     font-weight: 400;
+     font-size: 1.7rem;
+     margin-top: 2rem;
+     margin-bottom: 0;
+     line-height: 1; }
+
+// ET style doesn't like more than 3 levels of headings
+
+
+/* Reduce size of header-title on narrow phone screens */
+@media screen and (max-width: 500px) {
+  h1.header-title {
+    font-size: 4rem;
+  }
+  h2.header-subtitle {
+    font-size: 2.5rem;
+  }
+}
+
+p.subtitle { font-style: italic;
+             margin-top: 1rem;
+             margin-bottom: 1rem;
+             font-size: 1.8rem;
+             display: block;
+             line-height: 1;   }
+
+p.margin-maker {
+             margin-top: 1rem;
+             margin-bottom: 3.4rem;
+              }
+
+p, ol, ul { font-size: 1.4rem; }
+
+p, li { line-height: 2rem;
+        margin-top: 1.4rem;
+        padding-right: 2rem; //removed because,  why?
+        vertical-align: baseline; }
+
+
+.sans { font-family: $sans-font;
+        letter-spacing: .03em; }
+
+
+// removed .code 'class' since code is an actual html tag
+// also added p code, p pre code and pre selector to account for Markdown parsing
+// of triple backticks plus rationalized line-heights and margins
+pre, pre code, p code, p pre code {
+    font-family: $code-font;
+    font-size: 1rem;
+    line-height: 1.71428571;
+    margin-top: 1.71428571rem;
+
+    // override tufte-css and make code blocks full width
+    width: inherit;
+}
+
+
+h1 code, h2 code, h3 code { font-size: 0.80em; } //left in for no real reason
+
+
+/*
+ * Fancy Blockquotes
+ * Style the blockquotes with a fancy quote character at the beginning
+ */
+blockquote.fancy p:first-child {
+  position: relative;
+}
+blockquote.fancy p:first-child::before {
+  content: "“";
+  display: block;
+  position: absolute;
+  font-size: 5rem;
+  top: 0.9rem;
+  left: -3.4rem;
+}
+/* Make all elements in a blockquote except the last line of a blockquote non-italic so it looks like an attribution line.
+ * To avoid this, either add an empty <p></p> at the end, style the p with italic, or don't use the fancy blockquote.
+ */
+blockquote.fancy p {
+  font-style: italic;
+}

data/_sass/_settings.scss

@@ -0,0 +1,16 @@
+/* This file contains all the constants for colors and font styles */
+
+$body-font: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
+/*
+ * The tufte-css preferred sans font is Gill Sans, but this is not freely available.
+ * We use Lato instead, which is royalty free.
+ */
+$sans-font:  Lato, LatoLatin, "Cabin", "Gill Sans", "Trebuchet MS", sans-serif;
+$code-font: Consolas, "Liberation Mono", Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
+$text-color: #111;
+$bg-color: #fffff8;
+$contrast-color: #111;
+$border-color: #333333;
+$link-style: color; // choices are 'color' or 'underline'. Default is color using $contrast-color set above
+
+

data/_sass/_site-style.scss

@@ -0,0 +1 @@
+/* Override this file in your site to create any custom site-local CSS */