Add wide modifier to archive layout

This commit is contained in:
Michael Rose 2018-03-20 14:47:13 -04:00
parent ba5d25c419
commit 31b20a6ad0
3 changed files with 26 additions and 1 deletions

View file

@ -317,3 +317,19 @@
font-size: 1em;
}
}
/*
Wide Pages
========================================================================== */
.wide {
.archive {
@include breakpoint($large) {
padding-right: 0;
}
@include breakpoint($x-large) {
padding-right: 0;
}
}
}

View file

@ -84,7 +84,7 @@ The layout you'll likely use the most --- sidebar and main content combo.
{% include gallery id="single_layout_gallery" caption="Image header and meta info examples for `single` layout" %}
Assign with `layout: single`, or better yet apply as a [Front Matter default]({{ "/docs/configuration/#front-matter-defaults" | absolute_url }}) in `_config.yml`.
Assign with `layout: single` , or better yet apply as a [Front Matter default]({{ "/docs/configuration/#front-matter-defaults" | absolute_url }}) in `_config.yml`.
### Wide Page
@ -154,6 +154,14 @@ Post and page excerpts are auto-generated by Jekyll which grabs the first paragr
excerpt: "A unique line of text to describe this post that will display in an archive listing and meta description with SEO benefits."
```
### Wide Page
To expand the main content to the right, filling the space of what is normally occupied by the table of contents. Add the following to a post or page's YAML Front Matter:
```yaml
classes: wide
```
### Grid View
Adding `type=grid` to the `archive-single` helper will display archive posts in a 4 column grid. For example to create an archive displaying all documents in the portfolio collection:

View file

@ -4,6 +4,7 @@ layout: collection
permalink: /portfolio/
collection: portfolio
entries_layout: grid
classes: wide
---
Sample document listing for the collection `_portfolio`.