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 💎
This commit is contained in:
Michael Rose 2018-04-02 20:55:22 -04:00 committed by GitHub
parent 1d2cad2a00
commit 9a0a95fc24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
62 changed files with 914 additions and 85 deletions

63
.github/ISSUE_TEMPLATE.md vendored Normal file
View File

@ -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.
-->

View File

@ -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

188
README.md
View File

@ -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).
Conventions and features found there are fully supported by **Basically Basic**,
with a few enhancements thrown in for good measure:
a substitute for the default [Minima](https://github.com/jekyll/minima), 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)
2. [GitHub Pages Method](#github-pages-method)
1. [Remove the Unnecessary](#remove-the-unnecessary)
1. [Ruby Gem Method](#ruby-gem-method)
2. [GitHub Pages Method](#github-pages-method)
1. [Remove the Unnecessary](#remove-the-unnecessary)
2. [Upgrading](#upgrading)
1. [Ruby Gem](#ruby-gem)
2. [Remote Theme](#remote-theme)
3. [Use Git](#use-git)
1. [Pull Down Updates](#pull-down-updates)
4. [Update Files Manually](#update-files-manually)
1. [Ruby Gem](#ruby-gem)
2. [Remote Theme](#remote-theme)
3. [Use Git](#use-git)
1. [Pull Down Updates](#pull-down-updates)
4. [Update Files Manually](#update-files-manually)
3. [Structure](#structure)
1. [Starting Fresh](#starting-fresh)
2. [Starting from `jekyll new`](#starting-from-jekyll-new)
1. [Starting Fresh](#starting-fresh)
2. [Starting from `jekyll new`](#starting-from-jekyll-new)
4. [Configuration](#configuration)
1. [Skin](#skin)
2. [Google Fonts](#google-fonts)
3. [Text](#text)
4. [Navigation](#navigation)
5. [Pagination](#pagination)
6. [Search](#search)
1. [Lunr (default)](#lunr-default)
2. [Algolia](#algolia)
7. [Author](#author)
8. [Reading Time](#reading-time)
9. [Comments (via Disqus)](#comments-via-disqus)
10. [Google Analytics](#google-analytics)
1. [Skin](#skin)
2. [Google Fonts](#google-fonts)
3. [Text](#text)
4. [Navigation](#navigation)
5. [Pagination](#pagination)
6. [Search](#search)
1. [Lunr (default)](#lunr-default)
2. [Algolia](#algolia)
7. [Author](#author)
8. [Reading Time](#reading-time)
9. [Comments (via Disqus)](#comments-via-disqus)
10. [Google Analytics](#google-analytics)
5. [Layouts](#layouts)
1. [`layout: default`](#layout-default)
2. [`layout: post`](#layout-post)
3. [`layout: page`](#layout-page)
4. [`layout: home`](#layout-home)
5. [`layout: about`](#layout-about)
6. [`layout: cv`](#layout-cv)
6. [Customization](#customization)
1. [Overriding Includes and Layouts](#overriding-includes-and-layouts)
2. [Customizing Sass (SCSS)](#customizing-sass-scss)
3. [Customizing JavaScript](#customizing-javascript)
4. [SVG Icons](#svg-icons)
5. [Customizing Sidebar Content](#customizing-sidebar-content)
7. [Development](#development)
8. [Contributing](#contributing)
1. [Pull Requests](#pull-requests)
9. [Credits](#credits)
10. [License](#license)
1. [`layout: default`](#layout-default)
2. [`layout: post`](#layout-post)
3. [`layout: page`](#layout-page)
4. [`layout: home`](#layout-home)
5. [`layout: posts`](#layout-posts)
6. [`layout: categories`](#layout-categories)
7. [`layout: tags`](#layout-tags)
8. [`layout: collection`](#layout-collection)
9. [`layout: category`](#layout-category)
10. [`layout: tag`](#layout-tag)
11. [`layout: about`](#layout-about)
12. [`layout: cv`](#layout-cv)
6. [Images](#images)
7. [Customization](#customization)
1. [Overriding Includes and Layouts](#overriding-includes-and-layouts)
2. [Customizing Sass (SCSS)](#customizing-sass-scss)
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

View File

@ -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 -%}

View File

@ -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>

View File

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

View File

@ -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 %}

14
_includes/page-tags.html Normal file
View File

@ -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 %}

View File

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

3
_includes/posts-tag.html Normal file
View File

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

View File

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

48
_layouts/categories.html Normal file
View File

@ -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 %}

9
_layouts/category.html Normal file
View File

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

9
_layouts/collection.html Normal file
View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

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

View File

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

29
_layouts/posts.html Normal file
View File

@ -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 %}

9
_layouts/tag.html Normal file
View File

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

48
_layouts/tags.html Normal file
View File

@ -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 %}

View File

@ -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

View File

@ -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;

View File

@ -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 {

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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

View File

@ -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

View File

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

View File

@ -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.

View File

@ -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.

View File

@ -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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 325 KiB

5
docs/categories.md Normal file
View File

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

8
docs/edge-case.md Normal file
View File

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

8
docs/markup.md Normal file
View File

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

6
docs/posts.md Normal file
View File

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

9
docs/recipes.md Normal file
View File

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

5
docs/tags.md Normal file
View File

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

View File

@ -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

View File

@ -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

View File

@ -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.

View File

@ -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.

View File

@ -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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 325 KiB

5
example/categories.md Normal file
View File

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

8
example/edge-case.md Normal file
View File

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

8
example/markup.md Normal file
View File

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

6
example/posts.md Normal file
View File

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

9
example/recipes.md Normal file
View File

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

5
example/tags.md Normal file
View File

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

View File

@ -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.}