jekyll-oedipus-theme 0.3.0 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 106d1e7e92fa86c8b7750bfddd6e75c2c91fb263636cd898bdd60972b4180ef9
-  data.tar.gz: 76fe06c21d90753be4a76baf84a6faae0e186ac11610aa7846102419cdc92964
+  metadata.gz: b1d4c18acd8002eb209db8019127d9ad6c265b12aabea1d32309b53895327e88
+  data.tar.gz: d8a7d658503835929e3f7f922ecaa8486b87afa6e28cb3e2a2866b2893d46409
 SHA512:
-  metadata.gz: cb0f410f1085476e0cc848647b2a0b8e5f62dce0ff06968650461adbd1e0340b0b299a6a223c5103571d304c8acf0b7d64067e33a886dce4bd22e06c8d316dfa
-  data.tar.gz: e967d721f0b84aeffc9314d38c23c0c4a171a7076e56bacdc8edfddcc97f1c2c5d49bb4f91b51d2254c69f297e6783bbc55615a9629ae69cf024cfdaf6bbba4f
+  metadata.gz: 51371ada1b6668b91dc46fd5922bac9e85561336f0e9d235960a92e606339e18cd84260dde75234d69eda9991824c6b416d00eacb9cd913b72d96508a8c973ad
+  data.tar.gz: 196ac8ffc9e746be0e4f27da71363d1ce84610155f970582a8d7b5a56f05e1b7575f147549b03cb4cbb9a901d23c25c207ed7db6c8c9aae5380736df81332196

data/README.md

@@ -4,6 +4,10 @@ Build a motherfucking website with Jekyll (patricide optional).
 
 [![Gem Version](https://badge.fury.io/rb/jekyll-oedipus-theme.svg)](https://badge.fury.io/rb/jekyll-oedipus-theme)
 
+## Screenshot
+
+![Oedipus rendered on a Thinkpad T60 in Firefox ESR](https://raw.githubusercontent.com/matthewgraybosch/jekyll-oedipus-theme/main/screenshot.png)
+
 ## Installation
 
 Add this line to your Jekyll site's `Gemfile`:
@@ -28,15 +32,114 @@ Or install it yourself as:
 
 ## Usage
 
-TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+**Oedipus** can be customized to a great extent in [`_config.yml`](https://github.com/matthewgraybosch/jekyll-oedipus-theme/blob/main/_config.yml), but if you want to [override any part of the theme](https://jekyllrb.com/docs/themes/), you'll want a list of what's included.
+
+### _config.yml
+
+All options for this theme are contained under the "site.oedipus" root. Therefore, the "rights" option listed below is actually "site.oedipus.rights".
+
+- **rights**: a string that goes into the copyright line in the page footer
+- **license.text.name**: a string identifying the license for your site's text
+- **license.text.url**: the URL of the license for your site's text
+- **license.code.name**: a string identifying the license for your site's code
+- **license.code.url**: the URL of the license for your site's code
+- **made-with**: a string indicating how the site was made.
+
+The stylesheet for Oedipus is also configurable, and all style options are contained under "site.oedipus.style". The default colors were selected from [Color Safe](http://colorsafe.co/) for accessibility. The dark theme takes each of these variables and applies the [Sass `invert()`](https://sass-lang.com/documentation/modules/color) function to them.
+
+- **bg-color**: set background color
+- **fg-color**: set text color
+- **link-color**: set default link color
+- **link-hover-color**: change a link to this color on mouseover
+- **link-active-color**: change a link to this color when clicked
+- **link-visited-color**: change visited links to this color
+- **border-thickness**: set the thickness for borders
+- **hr-border-thickness**: set thickness for <hr> elements. Set this to half your intended value.
+- **html-font-size**: allows use of [rem units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) for consistent scaling. Defaults to "medium".
+- **body-margin**: control distance between text and screen edges
+- **content-font-size**: Sets font-size for most text.
+- **content-font-family**: Sets the font-family for most text. Use this to define a custom font stack.
+- **content-line-height**: Sets separation between lines of text.
+- **preformatted-font-size**: Sets font-size for preformatted-text and code.
+- **preformatted-font-family**: Sets the font-family for most preformatted-text and code. Use this to define a custom font stack.
+- **content-width**: Sets the content width in <main> and <article>
+- **content-centered**: When true, Oedipus will horizontally center content.
+- **compact-header**: When true, Oedipus will place the site title and description inside the masthead's <h1>.
+- **home-header-icon** When true, any page assigned the "home" layout will show `/assets/favicon.svg` as part of the masthead.
+
+### Layouts
+
+* **base.html**: a wrapper layout that sets language and encoding, sets up a skip navigation link, and links to favicons, stylesheets, and feeds. Also provides a target for `jekyll-seo-tag`.
+* **default.html**: this wraps around **page.html** and **post.html** to provide headers, footers, and navigation.
+* **home.html**: for your site's home page. It provides custom headers and footers in case you don't want nav bars on your landing page.
+* **page.html**: for pages and other non-blog material. It wraps content inside a <main> element.
+* **post.html**: for blog posts. It wraps content inside an <article> element and provides a footer for subscription and contact info.
+
+### Includes
+
+* **masthead.html**: displays the site's title and description.
+* **skip.html**: implements a [skip navigation](https://webaim.org/techniques/skipnav/) link.
+* **navbar.html**: implements a navigation bar. It accepts "id", "label", and "source" arguments. Source is a data source accessible via `site.data`.
+* **navlist.html**: implements an unordered navigation list and takes the same arguments as navbar.html.
+* **header.html**: the default header for most pages and posts. Includes a navigation bar.
+* **article-header.html**: a sub-header for posts that contains the post title and summary
+* **home-header.html**: a header for the home page, sans nav bar.
+* **footer.html**: the default footer for most pages and posts. Includes a navigation bar.
+* **article-footer.html**: a sub-footer for posts that contains feed and contact links in lieu of a comments section
+* **home-footer.html**: a footer for the home page, sans nav bar.
+* **posts-list.html**: lists all posts as a set of <article> blocks.
+* **recent-posts-list.html**: lists the *n* most recent posts, where the "limit" argument = *n*.
+* **posts-table.html**: lists all posts in a table
+* **recent-posts-table.html**: lists the *n* most recent posts in a table, where the "limit" argument = *n*.
+* **copyright.html**: shows copyright info. used in footers.
+* **license.html**: shows license links for text and code. used in footers.
+* **made-with.html**: can be used to credit tools or represent a location. used in footers.
+
+### Sass
+
+Oedipus' stylesheets are built with Sass, which is included with Jekyll.
+
+- **assets/style.scss**: wrapper file for the main stylesheet. It contains logic to override Sass variables with custom values from `_config.yml`.
+- **assets/print.scss**: wrapper file for the print stylesheet
+- **_sass/variables.scss**: contains variables with default values
+- **_sass/main.scss**: contains style definitions for the screen
+- **_sass/skip.scss**: implements Sass to hide the [skip navigation](https://webaim.org/techniques/skipnav/) link until tabbed into
+- **_sass/dark.scss**: provides dark mode support.
+
+### Data
+
+Oedipus comes with two _data files: `header-nav.yml` and `footer-nav.yml`, which I use to build nav bars. They both contain entries in the following format:
+
+```
+- name: home
+  url: /
+  desc: front page
+```
+
+### Assets
+
+The only asset Oedipus provides, in addition to the stylesheets, is [favicon.svg](https://raw.githubusercontent.com/matthewgraybosch/jekyll-oedipus-theme/main/assets/favicon.svg). You can and should generate your own. I recommend using [Formito's generator](https://formito.com/tools/favicon). You can also use [favicon.io](https://favicon.io/), but you'll want to modify **base.html** and **home-header.html** since this site doesn't generate SVG.
 
 ## Contributing
 
-I built this theme for my own use. If you find this theme useful, you are welcome to it. If you wish to customize it, by all means fork it. However, I will not accept pull requests unless they suit my tastes. Any support I provide is at my own discretion.
+I built this theme for my own use. If you find this theme useful, you are welcome to it. If you wish to customize it, by all means fork it. I will fix bugs and consider pull requests at my own discretion.
+
+### Code of Conduct
+
+This is not a professional project, and I am not interested in collaborating with others here. I am most certainly *not* interested in fostering "community", let alone providing an "open and welcoming environment". Nevertheless, I suppose a rudimentary and informal code of conduct is necessary.
 
-The code of conduct is simple: **don't annoy me**.
+1. If you mess with me, you're banned.
+2. If you mess with other contributors on this project, you're fucking with me.
+3. When in doubt, refer to rule 1.
+
+(with apologies to Matthew Woodring Stover)
 
 ## License
 
 The theme is available as open source under the terms of the [GNU GPL-3.0](https://opensource.org/licenses/GPL-3.0).
 
+### Commercial/Corporate/Government Use
+
+I cannot prevent commercial use of this theme, but under no circumstance will I provide free technical support for commercial, corporate, or government projects. Issues and pull requests from people using Oedipus in a commercial, corporate, or government project will be summarily dismissed.
+
+Note: I regard inclusion of this theme on a curated site supported by advertising as commercial use. Don't do it and then expect me to provide support to your visitors.

data/_config.yml

@@ -9,9 +9,6 @@ github_username: matthewgraybosch
 lang: en
 encoding: utf-8
 locale: en_US
-rights: most rights reserved
-license: "text: CC BY-NC-SA 4.0 / code: GNU GPLv3"
-madeWith: "♥ in Pennsylvania"
 
 # Build settings
 theme: jekyll-oedipus-theme
@@ -24,4 +21,35 @@ plugins:
 sass:
   style: compressed
 
-permalink: /blog/:year/:month/:day/:title/
+permalink: /blog/:year/:month/:day/:title/
+
+oedipus:
+  rights: most rights reserved
+  license:
+    text:
+      name: "CC BY-NC-SA 4.0"
+      url: "https://creativecommons.org/licenses/by-nc-sa/4.0/"
+    code:
+      name: "GNU GPL-3.0"
+      url: "https://opensource.org/licenses/GPL-3.0/"
+  made-with: "♥ in Pennsylvania"
+  style:
+    bg-color: "#FFFFFF"
+    fg-color: "#000000"
+    link-color: "#0000B5"
+    link-hover-color: "#3A539B"
+    link-active-color: "#20603C"
+    link-visited-color: "#550000"
+    border-thickness: 2px
+    hr-border-thickness: 1px
+    html-font-size: medium
+    body-margin: 1rem
+    content-font-size: 1rem
+    content-line-height: 1.62
+    content-font-family: sans-serif
+    preformatted-font-size: 1rem
+    preformatted-font-family: monospace
+    content-width: 40rem
+    content-centered: true
+    compact-header: false
+    home-header-icon: true

data/_includes/article-footer.html

@@ -0,0 +1,9 @@
+<footer>
+  <p>
+    Thanks for reading.<br />
+    The best way to subscribe is with a feed reader:
+    <a href="/feed.xml" title="subscribe to the Atom feed">Atom</a>
+    <a href="/feed.json" title="subscribe to the JSON feed">JSON</a><br />
+    Questions or comments? Email <a href="mailto:{{ site.email }}" title="please allow up to 7 days for a reply">{{ site.email }}</a>.
+  </p>
+</footer>

data/_includes/article-header.html

@@ -0,0 +1,4 @@
+<header>
+  <h1>{{ page.title }}</h1>
+  <p><em>{{ page.description }}</em></p>
+</header>

data/_includes/copyright.html

@@ -0,0 +1,6 @@
+{% if site.oedipus.rights %}
+© {{ site.time | date: "%Y" }} {{ site.author }}, {{ site.oedipus.rights }}
+{% else %}
+© {{ site.time | date: "%Y" }} {{ site.author }}
+{% endif %}
+<br />

data/_includes/footer.html

@@ -1,8 +1,8 @@
 <footer>
   <p>
-    &copy; {{ site.time | date: "%Y" }} {{ site.author }}, {{ site.rights }}<br />
-    {{ site.license }}<br />
-    made with {{ site.madeWith }}
+    {% include copyright.html %}
+    {% include license.html %}
+    {% include made-with.html %}
   </p>
   {% include navbar.html id="footer-nav" label="bottom navigation" source=site.data.footer-nav %}
 </footer>

data/_includes/header.html

@@ -1,5 +1,4 @@
 <header>
-  <h1>{{ site.title }}</h1>
-  <p>{{ site.description }}</p>
+  {% include masthead.html %}
   {% include navbar.html id="header-nav" label="main navigation" source=site.data.header-nav %}
 </header>

data/_includes/home-footer.html

@@ -1,7 +1,7 @@
 <footer>
   <p>
-    &copy; {{ site.time | date: "%Y" }} {{ site.author }}, {{ site.rights }}<br />
-    {{ site.license }}<br />
-    made with {{ site.madeWith }}
+    {% include copyright.html %}
+    {% include license.html %}
+    {% include made-with.html %}
   </p>
 </footer>

data/_includes/home-header.html

@@ -1,8 +1,9 @@
 <header>
+  {% if site.oedipus.style.home-header-icon %}
   <img src="/assets/favicon.svg"
        height="128"
        width="128"
        alt="favicon for the Oedipus theme for Jekyll website">
-  <h1>{{ site.title }}</h1>
-  <p>{{ site.description }}</p>
+  {% endif %}
+  {% include masthead.html %}
 </header>

data/_includes/license.html

@@ -0,0 +1,12 @@
+{% if site.oedipus.license.text %}
+text: <a href="{{ site.oedipus.license.text.url }}">{{ site.oedipus.license.text.name }}</a>
+{% endif %}
+{% if site.oedipus.license.text and site.oedipus.license.code %}
+/
+{% endif %}
+{% if site.oedipus.license.code %}
+code: <a href="{{ site.oedipus.license.code.url }}">{{ site.oedipus.license.code.name }}</a>
+{% endif %}
+{% if site.oedipus.license.text or site.oedipus.license.code %}
+<br />
+{% endif %}

data/_includes/made-with.html

@@ -0,0 +1,3 @@
+{% if site.oedipus.made-with %}
+made with {{ site.oedipus.made-with }}
+{% endif %}

data/_includes/masthead.html

@@ -0,0 +1,6 @@
+{% if site.oedipus.style.compact-header %}
+<h1>{{ site.title }}<em>{{ site.description }}</em></h1>
+{% else %}
+<h1>{{ site.title }}</h1>
+<p>{{ site.description }}</p>
+{% endif %}

data/_includes/navbar.html

@@ -1,3 +1,4 @@
+{% if include.source %}
 <nav id="{{ include.id }}" aria-label=" {{include.label }}">
   <p>
     {% for item in include.source %}
@@ -5,3 +6,4 @@
     {% endfor %}
   </p>
 </nav>
+{% endif %}

data/_includes/navlist.html

@@ -1,3 +1,4 @@
+{% if include.source %}
 <nav id="{{ include.id }}" aria-label=" {{include.label }}">
   <ul>
     {% for item in include.source %}
@@ -7,3 +8,4 @@
     {% endfor %}
   </ul>
 </nav>
+{% endif %}

data/_includes/posts-table.html

@@ -1,15 +1,15 @@
 <table>
   <thead>
     <tr>
-      <th>Date</th>
       <th>Title</th>
+      <th>Date</th>
     </tr>
   </thead>
   <tbody>
     {% for post in site.posts %}
     <tr>
-      <td>{{ post.date | date: "%Y-%m-%d" }}</td>
       <td><a href="{{ post.url }}">{{ post.title }}</a></td>
+      <td>{{ post.date | date: "%Y-%m-%d" }}</td>
     </tr>
     {% endfor %}
   </tbody>

data/_includes/recent-posts-list.html

@@ -1,4 +1,4 @@
-{% for post in site.posts | limit: 10 %}
+{% for post in site.posts | limit: include.limit %}
 <article>
   <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
   <p><em>{{ post.description }}</em></p>

data/_includes/recent-posts-table.html

@@ -1,15 +1,15 @@
 <table>
   <thead>
     <tr>
-      <th>Date</th>
       <th>Title</th>
+      <th>Date</th>
     </tr>
   </thead>
   <tbody>
-    {% for post in site.posts | limit: 10 %}
+    {% for post in site.posts | limit: include.limit %}
     <tr>
-      <td>{{ post.date | date: "%Y-%m-%d" }}</td>
       <td><a href="{{ post.url }}">{{ post.title }}</a></td>
+      <td>{{ post.date | date: "%Y-%m-%d" }}</td>
     </tr>
     {% endfor %}
   </tbody>

data/_includes/skip.html

@@ -0,0 +1,3 @@
+<aside id="skip">
+  <a href="#content">Skip to Main Content</a>
+</aside>

data/_layouts/base.html

@@ -4,13 +4,15 @@
     <meta charset="{{ site.encoding }}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
-    <link rel="icon" type="image/ico" href="/assets/favicon.ico" />
+    <link rel="icon" href="data:,">
     <link rel="stylesheet" type="text/css" href="/assets/style.css" />
     <link rel="alternate" type="application/atom+xml" href="/feed.xml" title="{{ site.title }} Atom Feed">
     <link rel="alternate" type="text/json" href="/feed.json" title="{{ site.title }} JSON Feed">
     {% seo %}
   </head>
   <body>
+    {% include skip.html %}
     {{ content }}
+    <link rel="stylesheet" type="text/css" href="/assets/print.css" />
   </body>
 </html>

data/_layouts/default.html

@@ -3,7 +3,5 @@ layout: base
 ---
 
 {% include header.html %}
-<hr />
 {{ content }}
-<hr />
 {% include footer.html %}

data/_layouts/home.html

@@ -3,9 +3,7 @@ layout: base
 ---
 
 {% include home-header.html %}
-<hr />
 <main id="content">
   {{ content }}
 </main>
-<hr />
 {% include home-footer.html %}

data/_layouts/page.html

@@ -3,5 +3,6 @@ layout: default
 ---
 
 <main id="content">
+  <h1>{{ page.title }}</h1>
   {{ content }}
 </main>

data/_layouts/post.html

@@ -3,20 +3,9 @@ layout: default
 ---
 
 <article id="content">
-  <header>
-    <h1>{{ page.title }}</h1>
-    <p><em>{{ page.description }}</em></p>
-  </header>
+  {% include article-header.html %}
   <section>
     {{ content }}
   </section>
-  <hr />
-  <footer>
-    <p>
-      Thanks for reading.<br />
-      The best way to subscribe is with a feed reader:
-      <a href="/feed.xml" title="subscribe to the Atom feed">Atom</a>
-      <a href="/feed.json" title="subscribe to the JSON feed">JSON</a><br />
-      Questions or comments? Email <a href="mailto:{{ site.email }}" title="please allow up to 7 days for a reply">{{ site.email }}</a>.</p>
-    </footer>
+  {% include article-footer.html %}
 </article>

data/_sass/dark.scss

@@ -7,6 +7,14 @@
             background: invert($bg-color);
             color: invert($fg-color);
 
+            header {
+                border-bottom: $border-thickness solid invert($fg-color);
+            }
+
+            footer {
+                border-top: $border-thickness solid invert($fg-color);
+            }
+
             a {
                 color: invert($link-color);
             }
@@ -27,13 +35,17 @@
                 border-left: $border-thickness solid invert($fg-color);
             }
 
+            figure {
+                border: $border-thickness solid invert($fg-color);
+            }
+
             hr {
                 border: $hr-border-thickness solid invert($fg-color);
             }
 
             article {
-                hr {
-                    border: $hr-border-thickness dashed invert($fg-color);
+                footer {
+                    border-top: $hr-border-thickness dashed invert($fg-color);
                 }
             }
             
@@ -43,6 +55,26 @@
                     border: $border-thickness solid invert($fg-color);
                 }
             }
+
+            nav {
+                p {
+                    a {
+                        border: $border-thickness solid invert($link-color);
+                    }
+
+                    a:hover {
+                        border: $border-thickness solid invert($link-hover-color);
+                    }
+                    
+                    a:active {
+                        border: $border-thickness solid invert($link-active-color);
+                    }
+                    
+                    a:visited {
+                        border: $border-thickness solid invert($link-visited-color);
+                    }
+                }
+            }
         }
     }
 }

data/_sass/main.scss

@@ -1,16 +1,23 @@
 html {
-    font-size: medium;
+    font-size: $html-font-size;
     background-color: $bg-color;
     color: $fg-color;
 
     body {
         background-color: $bg-color;
         color: $fg-color;
-        margin: 1rem;
-        font: 1rem/1.62 sans-serif;
+        margin: $body-margin;
+        font-size: $content-font-size;
+        font-family: $content-font-family;
+        line-height: $content-line-height;
 
         a {
             color: $link-color;
+            text-underline-offset: $underline-offset;
+        }
+
+        abbr {
+            text-underline-offset: $underline-offset;
         }
         
         a:hover {
@@ -30,34 +37,64 @@ html {
         }
         
         header, footer, nav {
-            text-align: center;
+            text-align: $content-alignment;
 
             h1 {
+                font-size: $content-font-size;
                 margin-bottom: 1rem;
+
+                em {
+                    margin-left: .5rem;
+                    font-weight: normal;
+                }
             }
         }
 
         header {
             margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: $border-thickness solid $fg-color;
         }
 
         footer {
             margin-top: 2rem;
+            padding-top: 1rem;
+            border-top: $border-thickness solid $fg-color;
         }
         
         nav {
+            margin-top: 1.5rem;
             p {
                 a {
-                    margin-left: .5rem;
-                    margin-right: .5rem;
+                    margin-right: 1rem;
+                    border: $border-thickness solid $link-color;
+                    border-radius: .5rem;
+                    padding: .5rem;
+                    text-decoration: none;
+                }
+
+                a:last-child {
+                    margin-right: 0;
+                }
+
+                a:hover {
+                    border: $border-thickness solid $link-hover-color;
+                }
+                
+                a:active {
+                    border: $border-thickness solid $link-active-color;
+                }
+                
+                a:visited {
+                    border: $border-thickness solid $link-visited-color;
                 }
             }
         }
         
         main {
-            margin: 2rem auto;
-		        max-width: 40rem;
-		        padding: 0 .62rem;
+            margin: $content-margin;
+		        max-width: $content-width;
+		        padding: $content-padding;
 
             article {
                 margin-left: 2rem;
@@ -69,9 +106,9 @@ html {
         }
 
         article {
-            margin: 2rem auto;
-		        max-width: 40rem;
-		        padding: 0 .62rem;
+            margin: $content-margin;
+		        max-width: $content-width;
+		        padding: $content-padding;
 
             header, footer {
                 text-align: left;
@@ -79,15 +116,40 @@ html {
             }
 
             section {
-                    margin: 2rem auto;
+                margin: 2rem auto;
+            }
+
+            header {
+                margin-bottom: 1rem;
+                padding-bottom: 0;            
+                border: none;
+            }
+
+            footer {
+                border-top: $hr-border-thickness dashed $fg-color;
+            }
+        }
+
+        main, article {
+            h1 {
+                font-size: $content-font-size * 2;
+            }
+            
+            h2 {
+                font-size: $content-font-size * 1.6;
+            }
+
+            h3 {
+                font-size: $content-font-size * 1.2;
             }
 
-            hr {
-                border: $hr-border-thickness dashed $fg-color;
+            h4, h5, h6 {
+                font-size: $content-font-size * 1.1;
             }
         }
         
         blockquote {
+            font-size: $blockquote-font-size;
             margin: 2rem 4rem;
             padding: 0 1rem;
             border-left: $border-thickness solid $fg-color;
@@ -98,6 +160,33 @@ html {
             }
         }
 
+        figure {
+            font-size: $blockquote-font-size;
+            margin: 2rem 4rem;
+            padding: 1rem;
+            border: $border-thickness solid $fg-color;
+
+            img {
+                width: 100%;
+            }
+            
+            figcaption {
+                font-style: normal;
+                font-weight: bold;
+            }
+        }
+
+        dl {
+            dt {
+                font-size: 1.1rem;
+                font-weight: bold;
+            }
+
+            dd {
+                margin-bottom: 1.1rem;
+            }
+        }
+
         hr {
             border: $hr-border-thickness solid $fg-color;
         }
@@ -112,5 +201,10 @@ html {
                 text-align: left;
             }
         }
+
+        pre, code {
+            font-size: $preformatted-font-size;
+            font-family: $preformatted-font-family;
+        }
     }
 }

data/_sass/paper.scss

@@ -0,0 +1,66 @@
+@media print {
+    html, body {
+        font: 12pt/1.3 serif !important;
+        background: $bg-color !important;
+        color: $fg-color !important;
+    }
+
+    body {
+        header {
+            display: none;
+        }
+        
+        footer {
+            nav {
+                display: none;
+            }
+        }
+        
+        a, a:hover, a:active, a:visited {
+            color: $fg-color !important;
+        }
+    }
+    
+    
+    main, article {
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        float: none;
+    }
+
+    h1 {
+        font-size: 2rem;
+    }
+
+    h2, h3, h4 {
+        font-size: 1.2rem;
+        margin-top: 2rem;
+    }
+
+    a {
+        page-break-inside: avoid
+    }
+
+    blockquote {
+        page-break-inside: avoid;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        page-break-after: avoid; 
+        page-break-inside: avoid
+    }
+
+    img {
+        page-break-inside: avoid; 
+        page-break-after: avoid;
+    }
+
+    table, pre {
+        page-break-inside: avoid
+    }
+
+    ul, ol, dl  {
+        page-break-before: avoid
+    }
+}

data/_sass/skip.scss

@@ -0,0 +1,16 @@
+#skip a
+{
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+#skip a:focus
+{
+    position: static;
+    width: auto;
+    height: auto;
+}

data/_sass/variables.scss

@@ -6,3 +6,17 @@ $link-active-color: #20603C;
 $link-visited-color: #550000;
 $border-thickness: 2px;
 $hr-border-thickness: 1px;
+$html-font-size: medium;
+$body-margin: 2rem;
+$content-font-size: 1rem;
+$content-line-height: 1.62;
+$content-font-family: sans-serif;
+$preformatted-font-size: 1rem;
+$preformatted-font-family: monospace;
+$content-width: 40rem;
+$content-alignment: center;
+$content-margin: 2rem auto;
+$content-padding: 0 .62rem;
+$blockquote-font-size: 1.1rem;
+$figure-font-size: 1.1rem;
+$underline-offset: 5px;

data/assets/print.scss

@@ -0,0 +1,13 @@
+---
+---
+
+@import "variables";
+
+// now that our variables are defined, let's override them from the config.
+
+{% if site.oedipus.style.content-width %}
+$content-width: {{ site.oedipus.style.content-width }};
+{% endif %}
+
+
+@import "paper";

data/assets/style.scss

@@ -2,5 +2,83 @@
 ---
 
 @import "variables";
+
+// now that our variables are defined, let's override them from the config.
+
+{% if site.oedipus.style.bg-color %}
+$bg-color: {{ site.oedipus.style.bg-color }};
+{% endif %}
+
+{% if site.oedipus.style.fg-color %}
+$fg-color: {{ site.oedipus.style.fg-color }};
+{% endif %}
+
+{% if site.oedipus.style.link-color %}
+$link-color: {{ site.oedipus.style.link-color }};
+{% endif %}
+
+{% if site.oedipus.style.link-hover-color %}
+$link-hover-color: {{ site.oedipus.style.link-hover-color }};
+{% endif %}
+
+{% if site.oedipus.style.link-active-color %}
+$link-active-color: {{ site.oedipus.style.link-active-color }};
+{% endif %}
+
+{% if site.oedipus.style.link-visited-color %}
+$link-visited-color: {{ site.oedipus.style.link-visited-color }};
+{% endif %}
+
+{% if site.oedipus.style.border-thickness %}
+$border-thickness: {{ site.oedipus.style.border-thickness }};
+{% endif %}
+
+{% if site.oedipus.style.hr-border-thickness %}
+$hr-border-thickness: {{ site.oedipus.style.hr-border-thickness }};
+{% endif %}
+
+{% if site.oedipus.style.body-margin %}
+$body-margin: {{ site.oedipus.style.body-margin }};
+{% endif %}
+
+{% if site.oedipus.style.html-font-size %}
+$html-font-size: {{ site.oedipus.style.html-font-size }};
+{% endif %}
+
+{% if site.oedipus.style.content-font-size %}
+$content-font-size: {{ site.oedipus.style.content-font-size }};
+{% endif %}
+
+{% if site.oedipus.style.content-font-family %}
+$content-font-family: {{ site.oedipus.style.content-font-family }};
+{% endif %}
+
+{% if site.oedipus.style.content-line-height %}
+$content-line-height: {{ site.oedipus.style.content-line-height }};
+{% endif %}
+
+{% if site.oedipus.style.preformatted-font-size %}
+$preformatted-font-size: {{ site.oedipus.style.preformatted-font-size }};
+{% endif %}
+
+{% if site.oedipus.style.preformatted-font-family %}
+$preformatted-font-family: {{ site.oedipus.style.preformatted-font-family }};
+{% endif %}
+
+{% if site.oedipus.style.content-width %}
+$content-width: {{ site.oedipus.style.content-width }};
+{% endif %}
+
+{% if site.oedipus.style.content-centered %}
+$content-alignment: center;
+$content-margin: 2rem auto;
+$content-padding: 0 .62rem;
+{% else %}
+$content-alignment: left;
+$content-margin: 0;
+$content-padding: auto;
+{% endif %}
+
 @import "main";
+@import "skip";
 @import "dark";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-oedipus-theme
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 1.0.2
 platform: ruby
 authors:
 - Matthew Graybosch
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-06-24 00:00:00.000000000 Z
+date: 2021-07-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -102,16 +102,23 @@ files:
 - LICENSE.txt
 - README.md
 - _config.yml
+- _includes/article-footer.html
+- _includes/article-header.html
+- _includes/copyright.html
 - _includes/footer.html
 - _includes/header.html
 - _includes/home-footer.html
 - _includes/home-header.html
+- _includes/license.html
+- _includes/made-with.html
+- _includes/masthead.html
 - _includes/navbar.html
 - _includes/navlist.html
 - _includes/posts-list.html
 - _includes/posts-table.html
 - _includes/recent-posts-list.html
 - _includes/recent-posts-table.html
+- _includes/skip.html
 - _layouts/base.html
 - _layouts/default.html
 - _layouts/home.html
@@ -119,9 +126,11 @@ files:
 - _layouts/post.html
 - _sass/dark.scss
 - _sass/main.scss
+- _sass/paper.scss
+- _sass/skip.scss
 - _sass/variables.scss
-- assets/favicon.ico
 - assets/favicon.svg
+- assets/print.scss
 - assets/style.scss
 homepage: https://github.com/matthewgraybosch/jekyll-oedipus-theme
 licenses:
@@ -135,7 +144,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: '2.7'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="