garth-jekyll-theme 0.5.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 01c0fdde1a7df4e68bb586be9d188bb4a0f71845
-  data.tar.gz: dee0f7ee83cf6c8edfac3656be1a6f8553615d43
+  metadata.gz: 9f6355c77eb1fa94debd4a1435e0ab170de6d755
+  data.tar.gz: 8064b1c46fd28b544b8aa4e5141a3d8ec48ec488
 SHA512:
-  metadata.gz: 40dfb5102b839a8a148bba3b5595f5bf8672a78759347845925008288a5218b0c5cf6d467200094445f5c700b2d8b5bb7840841a415004486e5c7142aa4f26db
-  data.tar.gz: 924500d2a72ca647b325d42215d4f68d570cf37766aeaf59ebf87fe0260cd6d2091fcb04f324d06bc2ced68767449b5e1febafec1ef88e0809c9a8f006fe6d3e
+  metadata.gz: 1c8493c60f4ae93c9fbb52a226e0c29209264b0f39327a4c5f1e923e5d030f9920fd37346ee91b1ae7817bc3a59fa9d7d037f03bdaf0664db27e461965c06827
+  data.tar.gz: e4f16ec71bf64202c18749debcbb532c3d384d422c9e9769100a2fd92ade3fbf154ba4495fe2fbf234a444f775070208166cb4c4dfb928c63b48d537e5ce3300

data/README.md

@@ -3,34 +3,52 @@
 
 🥁 A stupidly simple theme for Jekyll, using the official Jekyll theme implementation.
 
-![Screenshot](https://raw.githubusercontent.com/daviddarnes/garth-jekyll-theme/master/screenshot.png)
+![Screenshot](https://raw.githubusercontent.com/daviddarnes/garth/master/screenshot.png)
 
 ## Contents
 - [Installation](#installation)
+- [Customising](#customising)
 - [Site settings](#site-settings)
 - [Page layouts](#page-layouts)
 - [Credits](#credits)
 
 ## Installation
 
-### As a Fork
+### As a Jekyll theme
 
-1. [Fork the repo](https://github.com/daviddarnes/garth-jekyll-theme#fork-destination-box)
-2. Clone down the repo with `$ git clone git@github.com:username/reponame.git`
-3. Delete the `demo/` folder and `screenshot.png` files
-4. Change the `CNAME` record to your projects' record
-5. Install bundler with `$ gem install bundler`
-6. Install gems with `$ bundle install`
-7. Run Jekyll with `$ bundle exec jekyll serve --watch`
-8. Begin hacking for your project
+1. Add `gem "garth-jekyll-theme"` to your `Gemfile` to add the theme as a dependancy
+2. Run the command `bundle install` in the root of project to install the theme and its dependancies
+3. Add `theme: garth-jekyll-theme` to your `_config.yml` file to set the site theme
+4. Run `bundle exec jekyll serve` to build and serve your site
+5. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options
 
-### As a Jekyll 3.3 theme gem
+### As a GitHub Pages remote theme
 
-1. Download the starter `/demo` content, [quick download link](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/daviddarnes/garth-jekyll-theme/tree/master/demo)
-2. Install bundler with `$ gem install bundler`
-3. Install gems with `$ bundle install`
-4. Run Jekyll with `$ bundle exec jekyll serve --watch`
-5. Begin hacking for your project
+1. Add `gem "jekyll-remote-theme"` to your `Gemfile` to add the theme as a dependancy
+2. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy
+3. Add `jekyll-remote-theme` to the list of `plugins` in your `_config.yml` file
+4. Add `remote_theme: daviddarnes/garth` to your `_config.yml` file to set the site theme
+5. Run `bundle exec jekyll serve` to build and serve your site
+6. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options
+
+### As a Boilerplate / Fork
+
+_(deprecated, not recommended)_
+
+1. [Fork the repo](https://github.com/daviddarnes/garth#fork-destination-box)
+2. Replace the `Gemfile` with one stating all the gems used in your project
+3. Delete the following unnecessary files/folders: `CODE_OF_CONDUCT.md`, `CONTRIBUTING.md`, `LICENSE`, `screenshot.png`, `CNAME` and `garth-jekyll-theme.gemspec`
+4. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy
+5. Run `bundle exec jekyll serve` to build and serve your site
+6. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options
+
+## Customising
+
+When using Garth as a theme means you can take advantage of the file overriding method. This allows you to overwrite any file in this theme with your own custom file, simply by matching the file name and path. The most common example of this would be if you want to add your own styles or change the core style settings.
+
+To add your own styles copy the [`styles.scss`](https://github.com/daviddarnes/garth/blob/master/assets/styles.scss) into your own project with the same file path (`assets/styles.scss`). From there you can add your own styles, you can even optionally ignore the theme styles by removing the `@import "garth";` line.
+
+If you're just looking to set your own colours copy the [`_colors.scss`](https://github.com/daviddarnes/garth/blob/master/_sass/_colors.scss) file into your project at the same file path (`_sass/_settings.scss`) and change variables however you wish. The settings are a mixture of custom variables and settings from [Sassline](https://medium.com/@jakegiltsoff/sassline-v2-0-e424b2881e7e) - follow the link to find out how to configure the typographic settings.
 
 ## Site settings
 

data/_includes/post-list.html

@@ -5,7 +5,7 @@
 			<li class="item  item--post">
 				<article class="article  article--post  typeset">
 
-					<h2><a href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a></h2>
+					<h2><a href="{{ site.baseurl }}{{ page.url }}">{{ page.title }}</a></h2>
 					{% include post-meta.html %}
 					{{ page.excerpt | markdownify | truncatewords: 60 }}
 
@@ -22,7 +22,7 @@
 			<li class="item  item--post">
 				<article class="article  article--post  typeset">
 
-					<h2><a href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a></h2>
+					<h2><a href="{{ site.baseurl }}{{ page.url }}">{{ page.title }}</a></h2>
 					{% include post-meta.html %}
 					{{ page.excerpt | markdownify | truncatewords: 60 }}
 

data/_includes/post-meta.html

@@ -1,3 +1,15 @@
+{% if page.categories %}
+  {% capture categories %}
+    {% for category in page.categories %}
+      <span class="label  label--category">{{ category }}</span>{% if forloop.last == false %},{% endif %}
+    {% endfor %}
+  {% endcapture %}
+{% elsif page.category %}
+  {% capture categories %}
+    <span class="label  label--category">{{ page.category }}</span>
+  {% endcapture %}
+{% endif %}
+
 <small class="small  post-meta">
-  {% if page.category %}<span class="label  label--category">{{ page.category }}</span>&nbsp;&nbsp;&middot;&nbsp;&nbsp;{% endif %}<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time>
+  {{ categories | append: "&nbsp;&middot;&nbsp;" }}<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time>
 </small>

data/_includes/post-pagination.html

@@ -1,7 +1,7 @@
 <nav class="nav  nav--paginator">
 
   {% if paginator.previous_page %}
-    <a href="{{ paginator.previous_page_path }}" class="pagination  pagination--previous">&larr; Previous</a>
+    <a href="{{ site.baseurl }}{{ paginator.previous_page_path }}" class="pagination  pagination--previous">&larr; Previous</a>
   {% else %}
     <span class="pagination  pagination--previous">&larr; Previous</span>
   {% endif %}
@@ -9,7 +9,7 @@
   <span class="pagination  pagination--counter">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
 
   {% if paginator.next_page %}
-    <a href="{{ paginator.next_page_path }}" class="pagination  pagination--next">Next &rarr;</a>
+    <a href="{{ site.baseurl }}{{ paginator.next_page_path }}" class="pagination  pagination--next">Next &rarr;</a>
   {% else %}
     <span class="pagination  pagination--next">Next &rarr;</span>
   {% endif %}

data/_includes/site-header.html

@@ -1,6 +1,6 @@
 <header class="header">
   <div class="container">
-    {% include site-logo.html %}
+    {% if site.logo %}{% include site-logo.html %}{% endif %}
     {% include site-nav.html %}
   </div>
 </header>

data/_includes/site-logo.html

@@ -1,3 +1,3 @@
-<a class="logo" href="{{ site.url }}" title="{{ site.title }}">
-  <img src="{{ site.logo }}" alt="{{ site.title }} logo"/>
+<a class="logo" href="{{ site.baseurl }}/">
+  <img src="{{ site.baseurl }}{{ site.logo }}" alt="{{ site.title }} logo"/>
 </a>

data/_includes/site-nav.html

@@ -5,9 +5,9 @@
         <li class="item  item--nav{% if item.url == page.url %}  item--current{% endif %}">
           {% if item.collectionpage %}
       			{% assign collectiondata = site.collections | where: "label", item.collectionpage | first %}
-      			<a href="{{ item.url }}">{{ collectiondata.title }}</a>
+      			<a href="{{ site.baseurl }}{{ item.url }}">{{ collectiondata.title }}</a>
       		{% else %}
-            <a href="{{ item.url }}">{{ item.title }}</a>
+            <a href="{{ site.baseurl }}{{ item.url }}">{{ item.title }}</a>
       		{% endif %}
         </li>
       {% endunless %}

data/_layouts/default.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-GB">
+<html lang="{{ site.lang | default: "en-US" }}">
 	<head>
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		{% if page.collectionpage %}

data/_sass/_colors.scss

@@ -1,9 +1,10 @@
 // Colours
-$color__site--background: #ffefc8;
-$color__site--heading: darken(#46412A, 5%);
-$color__site--body: #46412A;
-$color__site--captions: lighten($color__site--heading, 40%);
-$color__site--link: #5B5BFF;
-$color__site--link--hover: darken($color__site--link, 10%);
-$color__site--link--current: desaturate($color__site--link, 100%);
-$color__site--accent: #5B5BFF;
+$bodyColour: #46412A;
+$headingColour: darken($bodyColour, 5%);
+$linkColour: #5B5BFF;
+$hoverColour: darken($linkColour, 10%);
+$captionColour: lighten($headingColour, 40%);
+$white: #fff;
+
+$backgroundColour: #ffefc8;
+$codeBackgroundColour: darken($backgroundColour, 5%);

data/_sass/_sassline-base.scss

@@ -4,4 +4,3 @@
 @import "sassline-base/modular-scale";
 @import "sassline-base/mixins";
 @import "sassline-base/typography";
-@import "sassline-base/layouts";

data/_sass/_theme.scss

@@ -0,0 +1,176 @@
+// Structural elements
+body {
+  background: $backgroundColour;
+  color: $bodyColour;
+  height: 100%;
+  display: flex;
+  @include flex-direction(column);
+  overflow-x: hidden;
+}
+
+.container {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+
+// Header, feature and footer
+.header,
+.footer {
+  .container {
+    padding: 1rem 0;
+    @include flexbox;
+    @include flex-direction(column);
+    @include align-items(center);
+    text-align: center;
+  }
+  @include breakpoint(break-1) {
+    .container {
+      @include flex-direction(row);
+      @include justify-content(space-between);
+      text-align: inherit;
+    }
+  }
+}
+
+.header {
+  @include flex(0, 0, auto);
+  background: darken($backgroundColour, 10%);
+}
+
+.logo {
+  display: inline-block;
+  line-height: 0;
+  border-radius: 100%;
+  overflow: hidden;
+  img {
+    width: 4rem;
+    height: 4rem;
+  }
+}
+
+.small {
+  padding-top: .6rem;
+  color: $captionColour;
+  display: inline-block;
+}
+
+.footer {
+  border-top: 1px solid darken($backgroundColour, 15%);
+}
+
+
+// Nav and copyright
+.nav {
+  &--paginator {
+    @include flexbox;
+    @include justify-content(center);
+    color: $captionColour;
+    text-align: center;
+  }
+}
+
+.pagination {
+  margin: 0 1rem;
+}
+
+
+// Main content
+.main {
+  @include flexbox;
+  @include flex-direction(column);
+  @include flex(1, 0, auto);
+  margin-bottom: 1.6rem;
+  @include breakpoint(break-1) {
+    @include flex-direction(row);
+  }
+}
+
+
+// Lists
+.list {
+  &--posts {
+    list-style: none;
+  }
+  &--nav {
+    list-style: none;
+  }
+  .item--post {
+    margin-left: 0;
+  }
+}
+
+.item {
+  &--nav {
+    display: inline-block;
+    margin-left: 1rem;
+    &:first-of-type {
+      margin-left: 0;
+    }
+  }
+  &--current {
+    a {
+      color: desaturate($linkColour, 100%);
+    }
+  }
+}
+
+
+// Images and media elements
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+audio,
+video {
+  width: 100%;
+}
+
+
+// Text selection
+::selection {
+  background: $headingColour;
+  color: $white;
+  text-shadow: none;
+}
+
+
+// Sassline overrides
+.typeset {
+  a > code {
+    text-shadow: none;
+  }
+  .button,
+  button {
+    background-image: none;
+    text-shadow: none;
+    color: $backgroundColour;
+    &:hover,
+    &:active,
+    &:focus {
+      background-image: none;
+      color: $backgroundColour;
+    }
+  }
+  hr {
+    width: 100%;
+  }
+  li {
+    > p {
+      padding: 0;
+      margin: 0;
+    }
+  }
+  .nav a {
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: .2rem;
+    margin-right: .2rem;
+  }
+  pre {
+    white-space: pre;
+    overflow-x: scroll;
+  }
+}

data/_sass/garth.scss

@@ -0,0 +1,11 @@
+@charset "utf-8";
+
+// Import frameworks & theme styles
+@import
+  "normalize",
+  "colors",
+  "sassline-base",
+  "syntax",
+  "flex",
+  "theme"
+;

data/_sass/sassline-base/_variables.scss

@@ -94,15 +94,3 @@ $white: #FFFFFF !default;
 // Background colours.
 $backgroundColour: #FCFCFC !default;
 $codeBackgroundColour: #F5F4F2 !default;
-
-
-// Alembic reassigned variables
-$headingColour: $color__site--heading;
-$bodyColour: $color__site--body;
-$linkColour: $color__site--link;
-$hoverColour: $color__site--link--hover;
-$captionColour: $color__site--captions;
-$white: #fff;
-
-$backgroundColour: $color__site--background;
-$codeBackgroundColour: darken($color__site--background, 5%);

data/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><g fill="none" fill-rule="evenodd"><path fill="#8549FC" fill-rule="nonzero" d="M11 16.21V26c.4.31 1.1.64 1.99.93A27.1 27.1 0 0 0 21 28c3.08 0 5.95-.4 8.01-1.07A7.1 7.1 0 0 0 31 26v-9.79C28.85 17.3 25.17 18 21 18s-7.85-.71-10-1.79zM33 14v12c0 2.2-5.37 4-12 4S9 28.2 9 26V14c0-2.2 5.37-4 12-4s12 1.8 12 4zm-3.99-.93A27.1 27.1 0 0 0 21 12c-3.08 0-5.95.4-8.01 1.07-.9.3-1.58.62-1.99.93.4.31 1.1.64 1.99.93A27.1 27.1 0 0 0 21 16c3.08 0 5.95-.4 8.01-1.07A7.1 7.1 0 0 0 31 14a7.1 7.1 0 0 0-1.99-.93zM15 24.5a1 1 0 0 1-2 0v-5a1 1 0 0 1 2 0v5zm7 1a1 1 0 0 1-2 0v-5a1 1 0 0 1 2 0v5zm7-1a1 1 0 0 1-2 0v-5a1 1 0 0 1 2 0v5z"/><rect width="42" height="42"/></g></svg>

data/assets/styles.scss

@@ -2,170 +2,4 @@
 title: false
 ---
 
-
-// Frameworks & Imports
-@charset "utf-8";
-@import "colors.scss";
-@import "normalize";
-@import "sassline-base";
-@import "syntax";
-@import "flex";
-
-
-// Structural elements
-body {
-  background: $color__site--background;
-  color: $color__site--body;
-  height: 100%;
-  display: flex;
-  @include flex-direction(column);
-  overflow-x: hidden;
-}
-
-.container {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-}
-
-
-// Header, feature and footer
-.header,
-.footer {
-  .container {
-    padding: 1rem 0;
-    @include flexbox;
-    @include flex-direction(column);
-    @include align-items(center);
-    text-align: center;
-  }
-  @include breakpoint(break-1) {
-    .container {
-      @include flex-direction(row);
-      @include justify-content(space-between);
-      text-align: inherit;
-    }
-  }
-}
-
-.header {
-  @include flex(0, 0, auto);
-  background: darken($color__site--background, 10%);
-}
-
-.logo {
-  display: inline-block;
-  line-height: 0;
-  border-radius: 100%;
-  overflow: hidden;
-  img {
-    width: 4rem;
-    height: 4rem;
-  }
-}
-
-.small {
-  padding-top: .6rem;
-  color: $color__site--captions;
-  display: inline-block;
-}
-
-.footer {
-  border-top: 1px solid darken($color__site--background, 15%);
-}
-
-
-// Nav and copyright
-.nav {
-  &--paginator {
-    @include flexbox;
-    @include justify-content(center);
-    color: $color__site--captions;
-    text-align: center;
-  }
-}
-
-.pagination {
-  margin: 0 1rem;
-}
-
-
-// Main content
-.main {
-  @include flexbox;
-  @include flex-direction(column);
-  @include flex(1, 0, auto);
-  margin-bottom: 1.6rem;
-  @include breakpoint(break-1) {
-    @include flex-direction(row);
-  }
-}
-
-
-// Lists
-.list {
-  &--posts {
-    list-style: none;
-  }
-  &--nav {
-    list-style: none;
-  }
-  .item--post {
-    margin-left: 0;
-  }
-}
-
-.item {
-  &--nav {
-    display: inline-block;
-    margin-left: 1rem;
-    &:first-of-type {
-      margin-left: 0;
-    }
-  }
-  &--current {
-    a {
-      color: $color__site--link--current;
-    }
-  }
-}
-
-
-// Images and media elements
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-audio,
-video {
-  width: 100%;
-}
-
-
-// Text selection
-::selection {
-  background: $color__site--heading;
-  color: $color__site--background;
-  text-shadow: none;
-}
-
-
-// Sassline overrides
-.typeset {
-  .button,
-  button {
-    background-image: none;
-    text-shadow: none;
-    color: lighten(invert($color__site--body), 15%);
-    &:hover,
-    &:active,
-    &:focus {
-      background-image: none;
-      color: lighten(invert($color__site--body), 15%);
-    }
-  }
-  hr {
-    width: 100%;
-  }
-}
+@import "garth";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: garth-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 1.0.0
 platform: ruby
 authors:
 - David Darnes
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-01-08 00:00:00.000000000 Z
+date: 2018-01-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.3'
+        version: '3.6'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.3'
+        version: '3.6'
 - !ruby/object:Gem::Dependency
   name: jekyll-paginate
   requirement: !ruby/object:Gem::Requirement
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.12'
+        version: '1.14'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.12'
+        version: '1.14'
 description: A stupidly simple theme for Jekyll, using the official Jekyll theme implementation.
 email:
 - me@daviddarnes.com
@@ -77,17 +77,20 @@ files:
 - _sass/_normalize.scss
 - _sass/_sassline-base.scss
 - _sass/_syntax.scss
-- _sass/sassline-base/_layouts.scss
+- _sass/_theme.scss
+- _sass/garth.scss
 - _sass/sassline-base/_mixins.scss
 - _sass/sassline-base/_modular-scale.scss
 - _sass/sassline-base/_reset.scss
 - _sass/sassline-base/_typography.scss
 - _sass/sassline-base/_variables.scss
+- assets/logo.svg
 - assets/styles.scss
 homepage: https://garth.darn.es
 licenses:
 - MIT
-metadata: {}
+metadata:
+  plugin_type: theme
 post_install_message: 
 rdoc_options: []
 require_paths:
@@ -104,7 +107,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.5
+rubygems_version: 2.6.8
 signing_key: 
 specification_version: 4
 summary: A stupidly simple theme for Jekyll.

data/_sass/sassline-base/_layouts.scss

@@ -1,282 +0,0 @@
-// Layouts
-// ---------------------------------------
-
-// Container.
-.section {
-  @include clearfix;
-
-  margin: 0 auto;
-  position: relative;
-  width: 94%;
-
-  @include breakpoint(break-3) {
-    @include maxwidth(3);
-  }
-
-  @include breakpoint(break-4) {
-    @include maxwidth(4);
-  }
-}
-
-// Single column (based on measure for typeset content).
-.single-measure {
-  @include measure(all);
-
-  margin: 0 auto;
-}
-
-// Base column styles.
-.column {
-  @include measure(0);
-
-  margin: 0 auto;
-  width: 100%;
-
-  @include breakpoint(break-1) {
-    float: left;
-    margin: initial;
-    max-width: initial;
-    padding-left: map-get($gutterwidths, small);
-    padding-right: map-get($gutterwidths, small);
-  }
-
-  @include breakpoint(break-3) {
-    padding-left: map-get($gutterwidths, medium);
-    padding-right: map-get($gutterwidths, medium);
-  }
-}
-
-// Two columns.
-.column--duo {
-
-  @include breakpoint(break-1) {
-    width: 50%;
-
-    &:nth-of-type(2n+3) {
-      clear: left;
-    }
-
-    &:nth-of-type(n+3) {
-      margin-top: 3rem;
-    }
-  }
-}
-
-// Three columns.
-.column--trio {
-
-  @include breakpoint(break-1) {
-    width: 33.333%;
-
-    &:nth-of-type(3n+4) {
-      clear: left;
-    }
-
-    &:nth-of-type(n+4) {
-      margin-top: 3rem;
-    }
-  }
-}
-
-// Four columns. Two at smaller breakpoints.
-.column--quad {
-
-  @include breakpoint(break-1) {
-    width: 50%;
-  }
-
-  @include breakpoint(break-2) {
-    width: 25%;
-  }
-}
-
-// Two column layout with a main text column and a sidebar.
-
-// Main column.
-.column--main {
-
-  @include breakpoint(break-1) {
-    @include ideal-measure(1, small);
-  }
-
-  @include breakpoint(break-2) {
-    @include ideal-measure(2, small);
-  }
-
-  @include breakpoint(break-3) {
-    @include ideal-measure(3, medium);
-  }
-
-  @include breakpoint(break-4) {
-    @include ideal-measure(4, medium);
-  }
-}
-
-// Sidebar.
-.column--sidebar {
-
-  @include breakpoint(break-1) {
-    @include ideal-measure(1, small, false);
-
-    padding-right: map-get($gutterwidths, medium);
-  }
-
-  @include breakpoint(break-2) {
-    @include ideal-measure(2, small, false);
-  }
-
-  @include breakpoint(break-3) {
-    @include ideal-measure(3, medium, false);
-
-    padding-right: map-get($gutterwidths, large);
-  }
-
-  @include breakpoint(break-4) {
-    @include ideal-measure(4, medium, false);
-  }
-}
-
-// If sidebar on the right side.
-.column--main + .column--sidebar {
-  @include breakpoint(break-1) {
-    padding-left: map-get($gutterwidths, medium);
-    padding-right: map-get($gutterwidths, small);
-  }
-
-  @include breakpoint(break-3) {
-    padding-left: map-get($gutterwidths, large);
-    padding-right: map-get($gutterwidths, medium);
-  }
-}
-
-// Set the main text one level down in the modular scale for narrower columns.
-.column--trio,
-.column--quad,
-.column--sidebar {
-
-  @include breakpoint(break-3) {
-
-    p {
-      @include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 3);
-    }
-
-    li {
-      @include fontsize(eta, 3);
-    }
-  }
-
-  @include breakpoint(break-4) {
-
-    p {
-      @include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 4);
-    }
-
-    li {
-      @include fontsize(eta, 4);
-    }
-  }
-}
-
-// Main column on the right with inline sidenotes.
-// The sidenotes will move out the column into the sidebar position aligned to the baseline.
-.column--right {
-
-  @include breakpoint(break-1) {
-    @include ideal-measure(1, small);
-    @include ideal-measure(1, small, false, margin-left);
-  }
-
-  @include breakpoint(break-2) {
-    @include ideal-measure(2, small);
-    @include ideal-measure(2, small, false, margin-left);
-  }
-
-  @include breakpoint(break-3) {
-    @include ideal-measure(3, medium);
-    @include ideal-measure(3, medium, false, margin-left);
-  }
-
-  @include breakpoint(break-4) {
-    @include ideal-measure(4, medium);
-    @include ideal-measure(4, medium, false, margin-left);
-  }
-
-  .sidenote {
-
-    @include breakpoint(break-1) {
-      @include ideal-measure(1, small, false);
-
-      left: 0;
-      padding-left: map-get($gutterwidths, small);
-      padding-right: map-get($gutterwidths, medium);
-      position: absolute;
-    }
-
-    @include breakpoint(break-2) {
-      @include ideal-measure(2, small, false);
-    }
-
-    @include breakpoint(break-3) {
-      @include ideal-measure(3, medium, false);
-
-      padding-right: map-get($gutterwidths, large);
-    }
-
-    @include breakpoint(break-4) {
-      @include ideal-measure(4, medium, false);
-
-      padding-left: map-get($gutterwidths, medium);
-    }
-  }
-}
-
-// Main column on the left with inline sidenotes.
-.column--left {
-
-  @include breakpoint(break-1) {
-    @include ideal-measure(1, small);
-  }
-
-  @include breakpoint(break-2) {
-    @include ideal-measure(2, small);
-  }
-
-  @include breakpoint(break-3) {
-    @include ideal-measure(3, medium);
-  }
-
-  @include breakpoint(break-4) {
-    @include ideal-measure(4, medium);
-  }
-
-  .sidenote {
-
-    @include breakpoint(break-1) {
-      @include ideal-measure(1, small, false);
-      @include ideal-measure(1, small, true, left);
-
-      padding-left: map-get($gutterwidths, medium);
-      padding-right: map-get($gutterwidths, small);
-      position: absolute;
-    }
-
-    @include breakpoint(break-2) {
-      @include ideal-measure(2, small, false);
-      @include ideal-measure(2, small, true, left);
-    }
-
-    @include breakpoint(break-3) {
-      @include ideal-measure(3, medium, false);
-      @include ideal-measure(3, medium, true, left);
-
-      padding-left: map-get($gutterwidths, large);
-    }
-
-    @include breakpoint(break-4) {
-      @include ideal-measure(4, medium, false);
-      @include ideal-measure(4, medium, true, left);
-
-      padding-right: map-get($gutterwidths, medium);
-    }
-  }
-}