Add layouts (#60)

* Add new layouts

* Add sample collection documents and pages

* Move `footer`

* Style archive related things

* Update CHANGELOG

* Disable hero image overlay by default

* Add support for post thumbnails

* Add grid layout

* Add suggested image sizes

* Add layout for grouping posts by year

* Document new layouts

* Add issue template

* Add sample content to demo new layouts

* Add sample archive pages to navigation

* Add comma

* Release 1.4.0 💎

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,63 @@
+<!--
+  Before opening a new issue please:
+  
+  - Verify you have the latest versions of Jekyll and Minimal Mistakes 
+    installed by running `bundle update`.
+  - Thoroughly read the theme's documentation at
+    https://github.com/mmistakes/jekyll-theme-basically-basic/blob/master/README.md
+  - Search all issues at https://github.com/mmistakes/jekyll-theme-basically-basic/issues 
+    for solutions and to avoid duplication.
+  - Ask for help at https://talk.jekyllrb.com/
+  
+  After exhausting these suggestions use the format below.
+-->
+
+## Description
+
+<!--
+  Describe the issue or proposed feature enhancement.
+-->
+
+## Environment
+
+<!--
+  Please include theme version, Jekyll version, public git repository, whether 
+  you are hosting with GitHub Pages, and the operating system you tested with.
+
+  Issues without a link to a public repository or ZIP file will likely go ignored.
+  Being able to see your actual files is necessary to troubleshoot, as most 
+  issues stem from invalid/missing YAML Front Matter, a mis-configured _config.sys 
+  file, or problematic site content. 
+-->
+
+- Basically Basic version:
+- Ruby gem or remote theme version:
+- Jekyll version:
+- Git repository URL:
+- Operating system:
+- GitHub Pages hosted (if yes provide URL to site):
+
+---
+
+## Expected behavior
+
+<!--
+  Describe the intended output or what you expected to see.
+-->
+
+## Steps to reproduce the behavior
+
+<!--
+  Describe the steps you took for this problem to exist. Such as: you installed
+  the theme, customized _config.yml, added your own posts, and started up a 
+  Jekyll server locally.
+
+  If an error occurred on GitHub Pages when pushing, please test a local version
+  following these setup instructions: 
+  https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/
+
+  Then provide a complete log by running `bundle exec jekyll build --trace --verbose` 
+  and include this output in the filed issue.
+
+  Screenshots can also be included if they help illustrate a behavior.
+-->

CHANGELOG.md

@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## Unreleased
+## [1.4.0] - 2018-04-02
 
 ## Changed
 - Lint JavaScript.
@@ -13,11 +13,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 - Accessibility enhancements for Lunr search form.
-- Add SCSS `$intro-image-color-overlay` variable to disable color overlay on hero images. [#55](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/55)
+- Add SCSS `$intro-image-color-overlay` variable to enable color overlay on hero images (disabled by default). [#55](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/55)
+- Add new archive layouts: `posts`, `categories`, `category`, `collection`, `tag`, and `tags`.
+- Add grid layout via `entries_layout: grid` front matter.
+- Add support for image thumbnails vial `image.thumbnail` front matter.
 
 ### Fixed
 - Fix Firefox [flexbox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=939897) when printing pages.
 - Fix search excerpts that run together because of implied spaces.
+- Moved `<footer>` outside of `<main>` to be semantically correct.
 
 ## [1.3.1] - 2018-02-16
 

README.md

@@ -6,9 +6,8 @@
 [![Tip Me via PayPal](https://img.shields.io/badge/PayPal-tip%20me-green.svg?logo=paypal)](https://www.paypal.me/mmistakes)
 
 Basically Basic is a [Jekyll theme](https://jekyllrb.com/docs/themes/) meant as 
-a substitute for the default --- [Minima](https://github.com/jekyll/minima). 
+a substitute for the default [Minima](https://github.com/jekyll/minima), with a 
-Conventions and features found there are fully supported by **Basically Basic**, 
+few enhancements thrown in for good measure:
-with a few enhancements thrown in for good measure:
 
 - Clean responsive design with [six customizable skins](#skin)
 - Curriculum Vitæ/Resume layout powered by [JSON data](http://registry.jsonresume.org/)
@@ -25,49 +24,55 @@ with a few enhancements thrown in for good measure:
 ## Table of Contents
 
 1. [Installation](#installation)
-    1. [Ruby Gem Method](#ruby-gem-method)
+   1. [Ruby Gem Method](#ruby-gem-method)
-    2. [GitHub Pages Method](#github-pages-method)
+   2. [GitHub Pages Method](#github-pages-method)
-        1. [Remove the Unnecessary](#remove-the-unnecessary)
+      1. [Remove the Unnecessary](#remove-the-unnecessary)
 2. [Upgrading](#upgrading)
-    1. [Ruby Gem](#ruby-gem)
+   1. [Ruby Gem](#ruby-gem)
-    2. [Remote Theme](#remote-theme)
+   2. [Remote Theme](#remote-theme)
-    3. [Use Git](#use-git)
+   3. [Use Git](#use-git)
-        1. [Pull Down Updates](#pull-down-updates)
+      1. [Pull Down Updates](#pull-down-updates)
-    4. [Update Files Manually](#update-files-manually)
+   4. [Update Files Manually](#update-files-manually)
 3. [Structure](#structure)
-    1. [Starting Fresh](#starting-fresh)
+   1. [Starting Fresh](#starting-fresh)
-    2. [Starting from `jekyll new`](#starting-from-jekyll-new)
+   2. [Starting from `jekyll new`](#starting-from-jekyll-new)
 4. [Configuration](#configuration)
-    1. [Skin](#skin)
+   1. [Skin](#skin)
-    2. [Google Fonts](#google-fonts)
+   2. [Google Fonts](#google-fonts)
-    3. [Text](#text)
+   3. [Text](#text)
-    4. [Navigation](#navigation)
+   4. [Navigation](#navigation)
-    5. [Pagination](#pagination)
+   5. [Pagination](#pagination)
-    6. [Search](#search)
+   6. [Search](#search)
-        1. [Lunr (default)](#lunr-default)
+      1. [Lunr (default)](#lunr-default)
-        2. [Algolia](#algolia)
+      2. [Algolia](#algolia)
-    7. [Author](#author)
+   7. [Author](#author)
-    8. [Reading Time](#reading-time)
+   8. [Reading Time](#reading-time)
-    9. [Comments (via Disqus)](#comments-via-disqus)
+   9. [Comments (via Disqus)](#comments-via-disqus)
-    10. [Google Analytics](#google-analytics)
+   10. [Google Analytics](#google-analytics)
 5. [Layouts](#layouts)
-    1. [`layout: default`](#layout-default)
+   1. [`layout: default`](#layout-default)
-    2. [`layout: post`](#layout-post)
+   2. [`layout: post`](#layout-post)
-    3. [`layout: page`](#layout-page)
+   3. [`layout: page`](#layout-page)
-    4. [`layout: home`](#layout-home)
+   4. [`layout: home`](#layout-home)
-    5. [`layout: about`](#layout-about)
+   5. [`layout: posts`](#layout-posts)
-    6. [`layout: cv`](#layout-cv)
+   6. [`layout: categories`](#layout-categories)
-6. [Customization](#customization)
+   7. [`layout: tags`](#layout-tags)
-    1. [Overriding Includes and Layouts](#overriding-includes-and-layouts)
+   8. [`layout: collection`](#layout-collection)
-    2. [Customizing Sass (SCSS)](#customizing-sass-scss)
+   9. [`layout: category`](#layout-category)
-    3. [Customizing JavaScript](#customizing-javascript)
+   10. [`layout: tag`](#layout-tag)
-    4. [SVG Icons](#svg-icons)
+   11. [`layout: about`](#layout-about)
-    5. [Customizing Sidebar Content](#customizing-sidebar-content)
+   12. [`layout: cv`](#layout-cv)
-7. [Development](#development)
+6. [Images](#images)
-8. [Contributing](#contributing)
+7. [Customization](#customization)
-    1. [Pull Requests](#pull-requests)
+   1. [Overriding Includes and Layouts](#overriding-includes-and-layouts)
-9. [Credits](#credits)
+   2. [Customizing Sass (SCSS)](#customizing-sass-scss)
-10. [License](#license)
+   3. [Customizing JavaScript](#customizing-javascript)
+   4. [SVG Icons](#svg-icons)
+   5. [Customizing Sidebar Content](#customizing-sidebar-content)
+8. [Development](#development)
+9. [Contributing](#contributing)
+10. [Credits](#credits)
+11. [License](#license)
 
 ## Installation
 
@@ -603,10 +608,10 @@ author:
 comments: false  # disable comments on this post
 ```
 
-**Note:** Hero images are overlaid with a transparent "accent" color to unify them with the theme's palette. To disable [customize the CSS](#customizing-sass-scss) with the following Sass variable override:
+**Note:** Hero images can be overlaid with a transparent "accent" color to unify them with the theme's palette. To enable, [customize the CSS](#customizing-sass-scss) with the following Sass variable override:
 
 ```scss
-$intro-image-color-overlay: false;
+$intro-image-color-overlay: true;
 ```
 
 ### `layout: page`
@@ -624,6 +629,90 @@ addition of the following:
 
 ```yaml
 paginate: true  # enables pagination loop, see section above for additional setup
+entries_layout: # list (default), grid
+```
+
+By default, posts are shown in a list view. To change to a grid view add `entries_layout: grid` to the page's front matter.
+
+### `layout: posts`
+
+This layout displays all posts grouped by the year they were published. It accommodates the same front matter as `layout: page`.
+
+By default, posts are shown in a list view. To change to a grid view add `entries_layout: grid` to the page's front matter.
+
+### `layout: categories`
+
+This layout displays all posts grouped category. It accommodates the same front matter as `layout: page`.
+
+By default, posts are shown in a list view. To change to a grid view add `entries_layout: grid` to the page's front matter.
+
+### `layout: tags`
+
+This layout displays all posts grouped by tag. It accommodates the same front matter as `layout: page`.
+
+By default, posts are shown in a list view. To change to a grid view add `entries_layout: grid` to the page's front matter.
+
+### `layout: collection`
+
+This layout displays all documents grouped by a specific collection. It accommodates the same front matter as `layout: page` with the addition of the following:
+
+```yaml
+collection: # collection name
+entries_layout: # list (default), grid
+show_excerpts: # true (default), false
+sort_by: # date (default) title
+sort_order: # forward (default), reverse
+```
+
+To create a page showing all documents in the `recipes` collection you'd create `recipes.md` in the root of your project and add this front matter:
+
+```yaml
+title: Recipes
+layout: collection
+permalink: /recipes/
+collection: recipes
+```
+
+By default, documents are shown in a list view. To change to a grid view add `entries_layout: grid` to the page's front matter. If you want to sort the collection by title add `sort_by: title`. If you want reverse sorting, add `sort_order: reverse`.
+
+### `layout: category`
+
+This layout displays all posts grouped by a specific category. It accommodates the same front matter as `layout: page` with the addition of the following:
+
+```yaml
+taxonomy: # category name
+entries_layout: # list (default), grid
+```
+
+By default, posts are shown in a list view. To change to a grid view add `entries_layout: grid` to the page's front matter.
+
+To create a page showing all posts assigned to the category `foo` you'd create `foo.md` in the root of your project and add this front matter:
+
+```yaml
+title: Foo
+layout: category
+permalink: /categories/foo/
+taxonomy: foo
+```
+
+### `layout: tag`
+
+This layout displays all posts grouped by a specific tag. It accommodates the same front matter as `layout: page` with the addition of the following:
+
+```yaml
+taxonomy: # tag name
+entries_layout: # list (default), grid
+```
+
+By default, posts are shown in a list view. To change to a grid view add `entries_layout: grid` to the page's front matter.
+
+To create a page showing all posts assigned to the tag `foo bar` you'd create `foo-bar.md` in the root of your project and add this front matter:
+
+```yaml
+title: Foo Bar
+layout: tag
+permalink: /tags/foo-bar/
+taxonomy: foo bar
 ```
 
 ### `layout: about`
@@ -652,6 +741,17 @@ resume data to conveniently render a curriculum vitæ or resume painlessly.
 Simply use JSON Resume's [in-browser resume builder](http://registry.jsonresume.org/) 
 to export a JSON file and save to your project as `_data/cv.json`.
 
+## Images
+
+Suggested image sizes in pixels are as follows:
+
+| Image | Description | Size |
+| ----- | ----------- | ---- |
+| `page.image.path` | Large full-width document image. | Tall images will push content down the page. `1600 x 600` is a good middle-ground size to aim for. |
+| `page.image` | Short-hand for `page.image.path` when used alone (without `thumbnail`, `caption`, or other variables). | Same as `page.image.path` |
+| `page.image.thumbnail` | Small document image used in grid view. | `400 x 200` |
+| `author.picture` | Author page image. | `300 x 300` |
+
 ## Customization
 
 The default structure, style, and scripts of this theme can be overridden and 

_includes/documents-collection.html

@@ -0,0 +1,19 @@
+{% assign entries = site[include.collection] %}
+
+{% if include.sort_by == 'title' %}
+  {% if include.sort_order == 'reverse' %}
+    {% assign entries = entries | sort: 'title' | reverse %}
+  {% else %}
+    {% assign entries = entries | sort: 'title' %}
+  {% endif %}
+{% elsif include.sort_by == 'date' %}
+  {% if include.sort_order == 'reverse' %}
+    {% assign entries = entries | sort: 'date' | reverse %}
+  {% else %}
+    {% assign entries = entries | sort: 'date' %}
+  {% endif %}
+{% endif %}
+
+{%- for post in entries -%}
+  {% include entry.html %}
+{%- endfor -%}

_includes/entry.html

@@ -9,6 +9,14 @@
     <h3 class="entry-title">
       <a href="{{ post.url | relative_url }}" rel="bookmark">{{ title }}</a>
     </h3>
+    {% if post.image.thumbnail %}
+      {% assign entry_image = post.image.thumbnail %}
+      {% unless entry_image contains '://' %}
+        {% assign entry_image = entry_image | relative_url %}
+      {% endunless %}
+      {% assign entry_image = entry_image | escape %}
+      <img class="entry-image u-photo" src="{{ entry_image }}" alt="">
+    {% endif %}
   </header>
   <footer class="entry-meta">
     <ul>

_includes/footer.html

@@ -1,9 +1,11 @@
 <footer id="footer" class="site-footer">
-  <div class="copyright">
+  <div class="inner">
-    {% if site.copyright %}
+    <div class="copyright">
-      {{ site.copyright | markdownify }}
+      {% if site.copyright %}
-    {% else %}
+        {{ site.copyright | markdownify }}
-      <p>&copy; {{ site.time | date: '%Y' }} {{ site.title }}.</p>
+      {% else %}
-    {% endif %}
+        <p>&copy; {{ site.time | date: '%Y' }} {{ site.title }}.</p>
+      {% endif %}
+    </div>
   </div>
 </footer>

_includes/page-intro.html

@@ -12,7 +12,7 @@
 
   <div class="inner">
     <div class="intro-text">
-      <h1 class="intro-title">{{ page.alt_title | default: page.title | default: site.title | markdownify | strip_html }}</h1>
+      <h1 id="page-title" class="intro-title">{{ page.alt_title | default: page.title | default: site.title | markdownify | strip_html }}</h1>
       {% if page.sub_title %}
         <p class="intro-subtitle">{{ page.sub_title | markdownify | strip_html }}</p>
       {% endif %}

_includes/page-tags.html

@@ -0,0 +1,14 @@
+{% if page.tags.size > 0 %}
+  <h3 class="page-taxonomies-title">{{ site.data.text[site.locale].tags | default: 'Tags' }}</h3>
+  <ul class="page-taxonomies">
+    {%- for tag in page.tags -%}
+      <li class="page-taxonomy">
+        {%- if site.tag_archive_path -%}
+          <a href="{{ tag | slugify | prepend: site.tag_archive_path | relative_url }}" title="{{ site.data.text[site.locale].pages_tagged | default: 'Pages tagged' }} {{ tag }}" rel="tag">{{ tag }}</a>
+        {%- else -%}
+          {{ tag }}
+        {%- endif -%}
+      </li>
+    {%- endfor- %}
+  </ul>
+{% endif %}

_includes/posts-category.html

@@ -0,0 +1,3 @@
+{%- for post in site.categories[include.taxonomy] -%}
+  {% include entry.html %}
+{%- endfor -%}

_includes/posts-tag.html

@@ -0,0 +1,3 @@
+{%- for post in site.tags[include.taxonomy] -%}
+  {% include entry.html %}
+{%- endfor -%}

_layouts/about.html

@@ -17,7 +17,5 @@ layout: default
         {% endif %}
       </aside>
     </div>
-
-    {% include footer.html %}
   </div>
 </main>

_layouts/categories.html

@@ -0,0 +1,48 @@
+---
+layout: page
+---
+
+{{ content }}
+
+<ul class="taxonomy-index">
+  {% assign categories_max = 0 %}
+  {% for category in site.categories %}
+    {% if category[1].size > categories_max %}
+      {% assign categories_max = category[1].size %}
+    {% endif %}
+  {% endfor %}
+  {% for i in (1..categories_max) reversed %}
+    {% for category in site.categories %}
+      {% if category[1].size == i %}
+        <li>
+          <a href="#{{ category[0] | slugify }}">
+            <strong>{{ category[0] }}</strong> <span class="taxonomy-count">{{ i }}</span>
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  {% endfor %}
+</ul>
+
+{% assign categories_max = 0 %}
+{% for category in site.categories %}
+  {% if category[1].size > categories_max %}
+    {% assign categories_max = category[1].size %}
+  {% endif %}
+{% endfor %}
+
+{% for i in (1..categories_max) reversed %}
+  {% for category in site.categories %}
+    {% if category[1].size == i %}
+      <section id="{{ category[0] | slugify | downcase }}" class="taxonomy-section">
+        <h2 class="taxonomy-title">{{ category[0] }}</h2>
+        <div class="entries-{{ page.entries_layout | default: 'list' }}">
+          {% for post in category.last %}
+            {% include entry.html %}
+          {% endfor %}
+        </div>
+        <a href="#page-title" class="back-to-top">{{ site.data.text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
+      </section>
+    {% endif %}
+  {% endfor %}
+{% endfor %}

_layouts/category.html

@@ -0,0 +1,9 @@
+---
+layout: page
+---
+
+{{ content }}
+
+<div class="entries-{{ page.entries_layout | default: 'list' }}">
+  {% include posts-category.html taxonomy=page.taxonomy %}
+</div>

_layouts/collection.html

@@ -0,0 +1,9 @@
+---
+layout: page
+---
+
+{{ content }}
+
+<div class="entries-{{ page.entries_layout | default: 'list' }}">
+  {% include documents-collection.html collection=page.collection sort_by=page.sort_by sort_order=page.sort_order %}
+</div>

_layouts/default.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!--
-    Basically Basic Jekyll Theme 1.3.1
+    Basically Basic Jekyll Theme 1.4.0
     Copyright 2017-2018 Michael Rose - mademistakes.com | @mmistakes
     Free for personal and commercial use under the MIT license
     https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE.md
@@ -50,6 +50,7 @@
       </div>
     </div>
 
+    {% include footer.html %}
     {% include scripts.html %}
 
   </body>

_layouts/home.html

@@ -12,7 +12,7 @@ layout: default
       <header class="section-title">
         <h2>{{ site.data.theme.t.posts | default: 'Posts' }}{% if paginator.page > 1 %}{{ site.data.theme.t.page | default: 'Page' | prepend: ' - ' | append: ' ' }}{{ paginator.page }} {{ site.data.theme.t.of | default: 'of' }} {{ paginator.total_pages }}{% endif %}</h2>
       </header>
-      <div class="entries">
+      <div class="entries-{{ page.entries_layout | default: 'list' }}">
         {% if site.plugins contains 'jekyll-paginate' and page.paginate or site.gems contains 'jekyll-paginate' and page.paginate %}
           {% comment %}
             Add paginator.posts loop if jekyll-paginate plugin is enabled
@@ -24,7 +24,5 @@ layout: default
         {% endif %}
       </div>
     </div>
-
-    {% include footer.html %}
   </div>
 </main>

_layouts/page.html

@@ -11,7 +11,5 @@ layout: default
         {{ content }}
       </div>
     </article>
-
-    {% include footer.html %}
   </div>
 </main>

_layouts/post.html

@@ -14,7 +14,5 @@ layout: default
         {% include disqus_comments.html %}
       {% endif %}
     </article>
-
-    {% include footer.html %}
   </div>
 </main>

_layouts/posts.html

@@ -0,0 +1,29 @@
+---
+layout: page
+---
+
+{{ content }}
+
+<ul class="taxonomy-index">
+  {% assign postsInYear = site.posts | group_by_exp: 'post', 'post.date | date: "%Y"' %}
+  {% for year in postsInYear %}
+    <li>
+      <a href="#{{ year.name }}">
+        <strong>{{ year.name }}</strong> <span class="taxonomy-count">{{ year.items | size }}</span>
+      </a>
+    </li>
+  {% endfor %}
+</ul>
+
+{% assign postsByYear = site.posts | group_by_exp: 'post', 'post.date | date: "%Y"' %}
+{% for year in postsByYear %}
+  <section id="{{ year.name }}" class="taxonomy-section">
+    <h2 class="taxonomy-title">{{ year.name }}</h2>
+    <div class="entries-{{ page.entries_layout | default: 'list' }}">
+      {% for post in year.items %}
+        {% include entry.html %}
+      {% endfor %}
+    </div>
+    <a href="#page-title" class="back-to-top">{{ site.data.text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
+  </section>
+{% endfor %}

_layouts/tag.html

@@ -0,0 +1,9 @@
+---
+layout: page
+---
+
+{{ content }}
+
+<div class="entries-{{ page.entries_layout | default: 'list' }}">
+  {% include posts-tag.html taxonomy=page.taxonomy %}
+</div>

_layouts/tags.html

@@ -0,0 +1,48 @@
+---
+layout: page
+---
+
+{{ content }}
+
+<ul class="taxonomy-index">
+  {% assign tags_max = 0 %}
+  {% for tag in site.tags %}
+    {% if tag[1].size > tags_max %}
+      {% assign tags_max = tag[1].size %}
+    {% endif %}
+  {% endfor %}
+  {% for i in (1..tags_max) reversed %}
+    {% for tag in site.tags %}
+      {% if tag[1].size == i %}
+        <li>
+          <a href="#{{ tag[0] | slugify }}">
+            <strong>{{ tag[0] }}</strong> <span class="taxonomy-count">{{ i }}</span>
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  {% endfor %}
+</ul>
+
+{% assign tags_max = 0 %}
+{% for tag in site.tags %}
+  {% if tag[1].size > tags_max %}
+    {% assign tags_max = tag[1].size %}
+  {% endif %}
+{% endfor %}
+
+{% for i in (1..tags_max) reversed %}
+  {% for tag in site.tags %}
+    {% if tag[1].size == i %}
+      <section id="{{ tag[0] | slugify | downcase }}" class="taxonomy-section">
+        <h2 class="taxonomy-title">{{ tag[0] }}</h2>
+        <div class="entries-{{ page.entries_layout | default: 'list' }}">
+          {% for post in tag.last %}
+            {% include entry.html %}
+          {% endfor %}
+        </div>
+        <a href="#page-title" class="back-to-top">{{ site.data.text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
+      </section>
+    {% endif %}
+  {% endfor %}
+{% endfor %}

_sass/basically-basic.scss

@@ -1,5 +1,5 @@
 /*!
- * Basically Basic Jekyll Theme 1.3.1
+ * Basically Basic Jekyll Theme 1.4.0
  * Copyright 2017-2018 Michael Rose - mademistakes | @mmistakes
  * Free for personal and commercial use under the MIT license
  * https://github.com/mmistakes/jekyll-theme-basically-basic/blob/master/LICENSE.md

_sass/basically-basic/_entries.scss

@@ -27,10 +27,32 @@
   }
 }
 
+.entry-image {
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
 .entry-meta {
   @include fluid-type($min-vw, $max-vw, 12px, 16px);
   margin-bottom: 1rem;
 
+  ul {
+    @include list-unstyled();
+
+    @include breakpoint(max-width $medium) {
+      li {
+        display: inline-block;
+        margin-right: 1.5rem;
+      }
+    }
+
+    @include breakpoint($medium) {
+      li {
+        padding-bottom: 0.5rem;
+      }
+    }
+  }
+
   a {
     color: inherit;
   }
@@ -51,7 +73,7 @@
    Entry list
    ========================================================================== */
 
-.entries {
+.entries-list {
   .entry-title {
     word-wrap: break-word; /* break long words that could overflow */
 
@@ -93,23 +115,6 @@
       width: span(5 of 16 last);
       padding-left: gutter(1 of 16);
     }
-
-    ul {
-      @include list-unstyled();
-
-      @include breakpoint(max-width $medium) {
-        li {
-          display: inline-block;
-          margin-right: 1.5rem;
-        }
-      }
-
-      @include breakpoint($medium) {
-        li {
-          padding-bottom: 0.5rem;
-        }
-      }
-    }
   }
 
   > .summary {
@@ -120,6 +125,79 @@
   }
 }
 
+/*
+   Entries Grid Layout
+   ========================================================================== */
+
+   .entries-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-gap: 2em;
+
+    .entry {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      margin-bottom: 0;
+      padding-bottom: 2rem;
+      border-bottom: none;
+    }
+
+    .entry-title {
+      @include fluid-type($min-vw, $max-vw, 18px, 24px);
+      -webkit-box-ordinal-group: 2;
+      -ms-flex-order: 1;
+      order: 1;
+    }
+
+    .entry-excerpt,
+    .entry-content {
+      -webkit-box-ordinal-group: 4;
+      -ms-flex-order: 3;
+      order: 3;
+
+      /* remove space after last child element */
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .entry-excerpt {
+      /* normalize font sizes */
+      > * {
+        font-size: 1em;
+      }
+    }
+
+    .entry-meta {
+      -webkit-box-ordinal-group: 3;
+      -ms-flex-order: 2;
+      order: 2;
+      margin-bottom: 1em;
+      font-size: 0.75em;
+
+      ul {
+        li {
+          display: inline-block;
+          margin-right: 1.5rem;
+        }
+      }
+    }
+
+    .more-link {
+      margin-top: -1em;
+
+      a {
+        text-decoration: none;
+      }
+    }
+  }
+
+
 .entry-content {
   > p:first-child {
     font-size: 1.125em;

_sass/basically-basic/_footer.scss

@@ -6,6 +6,30 @@
   margin-top: 4rem;
   color: tint($text-color, 40%);
   font-size: 80%;
+
+  .inner {
+    padding: 0 0.5rem;
+
+    @include breakpoint($small) {
+      padding-right: 1rem;
+      padding-left: 1rem;
+    }
+
+    @include breakpoint($medium) {
+      padding-right: 2rem;
+      padding-left: 2rem;
+    }
+
+    @include breakpoint($large) {
+      padding-right: 3rem;
+      padding-left: 3rem;
+    }
+
+    @include breakpoint($xlarge) {
+      padding-right: 4rem;
+      padding-left: 4rem;
+    }
+  }
 }
 
 .copyright {

_sass/basically-basic/_global.scss

@@ -40,3 +40,77 @@
   margin-right: 0.5rem;
   border-radius: 50%;
 }
+
+.more-link {
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.back-to-top {
+  display: block;
+  color: lighten($text-color, 50%);
+  font-size: 0.75em;
+  text-transform: uppercase;
+  text-align: right;
+  text-decoration: none;
+}
+
+.taxonomy-section {
+  margin-bottom: 2em;
+  padding-bottom: 1em;
+
+  &:not(:last-child) {
+    border-bottom: solid 1px $border-color;
+  }
+
+  + .taxonomy-section {
+    margin-top: 2em;
+  }
+}
+
+.taxonomy-title {
+  @include fluid-type($min-vw, $max-vw, 28px, 32px);
+  margin-bottom: 0.5em;
+  color: lighten($text-color, 60%);
+  font-family: $base-font-family;
+}
+
+.taxonomy-count {
+  color: lighten($text-color, 50%);
+}
+
+.taxonomy-index {
+  display: grid;
+  grid-column-gap: 2em;
+  grid-template-columns: repeat(2, 1fr);
+  margin: 0;
+  padding: 0;
+  font-family: $base-font-family;
+  font-size: 0.9em;
+  list-style: none;
+
+  @include breakpoint($large) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  a {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 0.25em 0;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    color: inherit;
+    text-decoration: none;
+    border-bottom: 1px solid $border-color;
+
+    &:hover {
+      color: $accent-color;
+    }
+  }
+
+  + .taxonomy-section {
+    margin-top: 3em;
+  }
+}

_sass/basically-basic/_variables.scss

@@ -85,7 +85,7 @@ $sidebar-width: $small !default;
 $sidebar-background-color: #fff !default;
 
 /* Intro image color overlay */
-$intro-image-color-overlay: true !default;
+$intro-image-color-overlay: false !default;
 
 /* Border radius */
 $border-radius: 0.25em !default;

assets/javascripts/main.js

@@ -2,7 +2,7 @@
 ---
 
 /*!
- * Basically Basic Jekyll Theme 1.3.1
+ * Basically Basic Jekyll Theme 1.4.0
  * Copyright 2017-2018 Michael Rose - mademistakes | @mmistakes
  * Free for personal and commercial use under the MIT license
  * https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE.md

docs/_config.yml

@@ -88,6 +88,12 @@ paginate_path: /page:num/
 #   - vendor/gems/
 #   - vendor/ruby/
 
+# Collections
+collections:
+  recipes:
+    output: true
+    permalink: /:collection/:path/
+
 # Front Matter Defaults
 defaults:
   # _posts
@@ -97,3 +103,10 @@ defaults:
     values:
       layout: post
       read_time: true
+  # _recipes
+  - scope:
+      path: "_recipes"
+      type: recipes
+    values:
+      layout: post
+      read_time: true

docs/_data/theme.yml

@@ -35,3 +35,5 @@ google_fonts:
 navigation_pages:
   - about.md
   - cv.md
+  - recipes.md
+  - tags.md

docs/_recipes/chocolate-chip-cookies.md

@@ -0,0 +1,35 @@
+---
+title: "Chocolate Chip Cookies"
+image: 
+  path: /assets/images/chocolate-chip-cookies-lg.jpg
+  thumbnail: /assets/images/chocolate-chip-cookies-400x200.jpg
+  caption: "Photo from [Pexels](https://www.pexels.com)"
+---
+
+A chocolate chip cookie is a drop cookie that originated in the United States and features chocolate chips as its distinguishing ingredient.
+
+The traditional recipe combines a dough composed of butter and both brown and white sugar with semi-sweet chocolate chips. Variations include recipes with other types of chocolate as well as additional ingredients such as nuts or oatmeal.
+
+This recipe makes 4 dozen cookies.
+
+## Ingredients
+
+* 2 1/4 cups all-purpose flour
+* 1 teaspoon baking soda
+* 1/2 teaspoon salt
+* 1 cup butter, softened and cut to pieces
+* 1 cup sugar
+* 1 cup light brown sugar, packed
+* 2 teaspoons vanilla extract
+* 2 large eggs
+* 2 cups semi-sweet chocolate chips
+* 1/2 teaspoon nutmeg (optional)
+* 1 cup chopped pecans or walnuts (optional)
+
+## Directions
+
+1. Preheat the oven to 350 F.
+2. In a medium bowl, whisk flour with baking soda, nutmeg and salt.
+3. In a large bowl, beat butter with sugar and brown sugar until creamy and light. Add vanilla and eggs, one at a time, and mix until incorporated.
+4. Gradually add dry mixture into the butter-sugar wet blend, mixing with a spatula until combined. Add chocolate chips and nuts until just mixed.
+5. Drop tablespoon-sized clumps onto un-greased cookie sheets. Bake for 8-12 minutes, or until pale brown. Allow to cool on the pan for a minute or three, then transfer cookies to a wire rack to finish cooling.

docs/_recipes/oatmeal-cookies.md

@@ -0,0 +1,27 @@
+---
+title: "Oatmeal Cookies"
+image: 
+  path: /assets/images/oatmeal-cookies-lg.jpg
+  thumbnail: /assets/images/oatmeal-cookies-400x200.jpg
+  caption: "Photo from [Pexels](https://www.pexels.com)"
+---
+
+Oatmeal cookies are a proverbial favorite with both kids and adults. This crisp and chewy cookie is loaded with oats, dried fruit, and chopped nuts.
+
+## Ingredients
+
+* 1 cup butter, softened 1 cup white sugar
+* 1 cup packed brown sugar
+* 2 eggs
+* 1 teaspoon vanilla extract
+* 2 cups all-purpose flour
+* 1 teaspoon baking soda
+* 1 teaspoon salt
+* 1 1/2 teaspoons ground cinnamon
+* 3 cups quick cooking oats
+
+## Directions
+
+1. In a medium bowl, cream together butter, white sugar, and brown sugar. Beat in eggs one at a time, then stir in vanilla. Combine flour, baking soda, salt, and cinnamon; stir into the creamed mixture. Mix in oats. Cover, and chill dough for at least one hour.
+2. Preheat the oven to 375 degrees F (190 degrees C). Grease cookie sheets. Roll the dough into walnut sized balls, and place 2 inches apart on cookie sheets. Flatten each cookie with a large fork dipped in sugar.
+3. Bake for 8 to 10 minutes in preheated oven. Allow cookies to cool on baking sheet for 5 minutes before transferring to a wire rack to cool completely.

docs/_recipes/peanut-butter-cookies.md

@@ -0,0 +1,27 @@
+---
+title: "Peanut Butter Cookies"
+image: 
+  path: /assets/images/peanut-butter-cookies-lg.jpg
+  thumbnail: /assets/images/peanut-butter-cookies-400x200.jpg
+  caption: "Photo from [Pexels](https://www.pexels.com)"
+---
+
+A peanut butter cookie is a type of cookie that is distinguished for having peanut butter as a principal ingredient. The cookie generally originated in the United States, its development dating back to the 1910s.
+
+## Ingredients
+
+* 1 cup unsalted butter
+* 1 cup crunchy peanut butter
+* 1 cup white sugar
+* 1 cup packed brown sugar
+* 2 eggs 2 
+* 1/2 cups all-purpose flour 
+* 1 teaspoon baking powder
+* 1/2 teaspoon salt
+* 1 1/2 teaspoons baking soda
+
+## Directions
+
+1. Cream butter, peanut butter, and sugars together in a bowl; beat in eggs.
+2. In a separate bowl, sift flour, baking powder, baking soda, and salt; stir into butter mixture. Put dough in refrigerator for 1 hour.
+3. Roll dough into 1 inch balls and put on baking sheets. Flatten each ball with a fork, making a crisscross pattern. Bake in a preheated 375 degrees F oven for about 10 minutes or until cookies begin to brown.

docs/categories.md

@@ -0,0 +1,5 @@
+---
+title: Category Archive
+layout: categories
+permalink: /categories/
+---

docs/edge-case.md

@@ -0,0 +1,8 @@
+---
+title: Edge Case
+layout: category
+permalink: /categories/edge-case/
+taxonomy: Edge Case
+---
+
+Sample post listing for the category `Edge Case`.

docs/markup.md

@@ -0,0 +1,8 @@
+---
+title: Markup
+layout: tag
+permalink: /tags/markup/
+taxonomy: markup
+---
+
+Sample post listing for the tag `markup`.

docs/posts.md

@@ -0,0 +1,6 @@
+---
+title: Post Archive
+layout: posts
+permalink: /posts/
+entries_layout: list
+---

docs/recipes.md

@@ -0,0 +1,9 @@
+---
+title: Recipes
+layout: collection
+permalink: /recipes/
+collection: recipes
+entries_layout: grid
+---
+
+Sample document listing for the collection `_recipes`.

docs/tags.md

@@ -0,0 +1,5 @@
+---
+title: Tag Archive
+layout: tags
+permalink: /tags/
+---

example/_config.yml

@@ -66,6 +66,12 @@ paginate_path: /page:num/
 #   - vendor/gems/
 #   - vendor/ruby/
 
+# Collections
+collections:
+  recipes:
+    output: true
+    permalink: /:collection/:path/
+
 # Front Matter Defaults
 defaults:
   # _posts
@@ -75,3 +81,10 @@ defaults:
     values:
       layout: post
       read_time: true
+  # _recipes
+  - scope:
+      path: "_recipes"
+      type: recipes
+    values:
+      layout: post
+      read_time: true

example/_data/theme.yml

@@ -30,5 +30,9 @@ google_fonts:
 # pages that have a `title`. Add raw page paths in the order you'd like.
 
 navigation_pages:
+  - posts.md
+  - recipes.md
   - about.md
   - cv.md
+  - tags.md
+  - categories.md

example/_recipes/chocolate-chip-cookies.md

@@ -0,0 +1,35 @@
+---
+title: "Chocolate Chip Cookies"
+image: 
+  path: /assets/images/chocolate-chip-cookies-lg.jpg
+  thumbnail: /assets/images/chocolate-chip-cookies-400x200.jpg
+  caption: "Photo from [Pexels](https://www.pexels.com)"
+---
+
+A chocolate chip cookie is a drop cookie that originated in the United States and features chocolate chips as its distinguishing ingredient.
+
+The traditional recipe combines a dough composed of butter and both brown and white sugar with semi-sweet chocolate chips. Variations include recipes with other types of chocolate as well as additional ingredients such as nuts or oatmeal.
+
+This recipe makes 4 dozen cookies.
+
+## Ingredients
+
+* 2 1/4 cups all-purpose flour
+* 1 teaspoon baking soda
+* 1/2 teaspoon salt
+* 1 cup butter, softened and cut to pieces
+* 1 cup sugar
+* 1 cup light brown sugar, packed
+* 2 teaspoons vanilla extract
+* 2 large eggs
+* 2 cups semi-sweet chocolate chips
+* 1/2 teaspoon nutmeg (optional)
+* 1 cup chopped pecans or walnuts (optional)
+
+## Directions
+
+1. Preheat the oven to 350 F.
+2. In a medium bowl, whisk flour with baking soda, nutmeg and salt.
+3. In a large bowl, beat butter with sugar and brown sugar until creamy and light. Add vanilla and eggs, one at a time, and mix until incorporated.
+4. Gradually add dry mixture into the butter-sugar wet blend, mixing with a spatula until combined. Add chocolate chips and nuts until just mixed.
+5. Drop tablespoon-sized clumps onto un-greased cookie sheets. Bake for 8-12 minutes, or until pale brown. Allow to cool on the pan for a minute or three, then transfer cookies to a wire rack to finish cooling.

example/_recipes/oatmeal-cookies.md

@@ -0,0 +1,27 @@
+---
+title: "Oatmeal Cookies"
+image: 
+  path: /assets/images/oatmeal-cookies-lg.jpg
+  thumbnail: /assets/images/oatmeal-cookies-400x200.jpg
+  caption: "Photo from [Pexels](https://www.pexels.com)"
+---
+
+Oatmeal cookies are a proverbial favorite with both kids and adults. This crisp and chewy cookie is loaded with oats, dried fruit, and chopped nuts.
+
+## Ingredients
+
+* 1 cup butter, softened 1 cup white sugar
+* 1 cup packed brown sugar
+* 2 eggs
+* 1 teaspoon vanilla extract
+* 2 cups all-purpose flour
+* 1 teaspoon baking soda
+* 1 teaspoon salt
+* 1 1/2 teaspoons ground cinnamon
+* 3 cups quick cooking oats
+
+## Directions
+
+1. In a medium bowl, cream together butter, white sugar, and brown sugar. Beat in eggs one at a time, then stir in vanilla. Combine flour, baking soda, salt, and cinnamon; stir into the creamed mixture. Mix in oats. Cover, and chill dough for at least one hour.
+2. Preheat the oven to 375 degrees F (190 degrees C). Grease cookie sheets. Roll the dough into walnut sized balls, and place 2 inches apart on cookie sheets. Flatten each cookie with a large fork dipped in sugar.
+3. Bake for 8 to 10 minutes in preheated oven. Allow cookies to cool on baking sheet for 5 minutes before transferring to a wire rack to cool completely.

example/_recipes/peanut-butter-cookies.md

@@ -0,0 +1,27 @@
+---
+title: "Peanut Butter Cookies"
+image: 
+  path: /assets/images/peanut-butter-cookies-lg.jpg
+  thumbnail: /assets/images/peanut-butter-cookies-400x200.jpg
+  caption: "Photo from [Pexels](https://www.pexels.com)"
+---
+
+A peanut butter cookie is a type of cookie that is distinguished for having peanut butter as a principal ingredient. The cookie generally originated in the United States, its development dating back to the 1910s.
+
+## Ingredients
+
+* 1 cup unsalted butter
+* 1 cup crunchy peanut butter
+* 1 cup white sugar
+* 1 cup packed brown sugar
+* 2 eggs 2 
+* 1/2 cups all-purpose flour 
+* 1 teaspoon baking powder
+* 1/2 teaspoon salt
+* 1 1/2 teaspoons baking soda
+
+## Directions
+
+1. Cream butter, peanut butter, and sugars together in a bowl; beat in eggs.
+2. In a separate bowl, sift flour, baking powder, baking soda, and salt; stir into butter mixture. Put dough in refrigerator for 1 hour.
+3. Roll dough into 1 inch balls and put on baking sheets. Flatten each ball with a fork, making a crisscross pattern. Bake in a preheated 375 degrees F oven for about 10 minutes or until cookies begin to brown.

example/categories.md

@@ -0,0 +1,5 @@
+---
+title: Category Archive
+layout: categories
+permalink: /categories/
+---

example/edge-case.md

@@ -0,0 +1,8 @@
+---
+title: Edge Case
+layout: category
+permalink: /categories/edge-case/
+taxonomy: Edge Case
+---
+
+Sample post listing for the category `Edge Case`.

example/markup.md

@@ -0,0 +1,8 @@
+---
+title: Markup
+layout: tag
+permalink: /tags/markup/
+taxonomy: markup
+---
+
+Sample post listing for the tag `markup`.

example/posts.md

@@ -0,0 +1,6 @@
+---
+title: Post Archive
+layout: posts
+permalink: /posts/
+entries_layout: list
+---

example/recipes.md

@@ -0,0 +1,9 @@
+---
+title: Recipes
+layout: collection
+permalink: /recipes/
+collection: recipes
+entries_layout: grid
+---
+
+Sample document listing for the collection `_recipes`.

example/tags.md

@@ -0,0 +1,5 @@
+---
+title: Tag Archive
+layout: tags
+permalink: /tags/
+---

jekyll-theme-basically-basic.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name                    = "jekyll-theme-basically-basic"
-  spec.version                 = "1.3.1"
+  spec.version                 = "1.4.0"
   spec.authors                 = ["Michael Rose"]
 
   spec.summary                 = %q{Your new Jekyll default theme.}