A development site for Fire and Lion (http://fireandlion.com).
This site is built with Jekyll. Follow the installation and running instructions for Jekyll to install and run it locally.
The site's main pages (index or home page, portfolio, thinking, about, find) are markdown files in the project root.
To create a new post in our portfolio, add a markdown file in _portfolio
. It should have the following YAML frontmatter:
---
title: We design a new Great Expectations
excerpt: "Fire and Lion was commissioned to create a new look for Charles Dickens' classic, Great Expectations."
category: literature
image: great-expectations.jpg
order: 5
---
Strictly speaking, the excerpt, image and order are optional, in that the post will still appear without them; but make sure you include them for a good quality post.
The available categories are defined in _data/categories.yml`.
On the main portfolio page, set which categories show on the page in the YAML frontmatter of portfolio.md
, as show-categories
.
To create a new Thinking piece, add a markdown file to thinking/_posts
. The file name must include the date of the post at the beginning in YYYY-MM-DD
format, like 2017-05-15-i-love-you-indesign-but.md
.
In the file, include at least a title
, excerpt
and author
in the YAML frontmatter, like this:
---
title: "I love you, InDesign, but it's time to let you go"
excerpt: "I love you, InDesign, but it’s time to let you go. We just can’t be together in a multi-format world."
author: Arthur Attwell
---
You can also include an image
in the frontmatter, as for portfolio posts.
This site uses variously sized versions of images for different devices. To generate these, place the original, high-res versions of your images in _source/images
, then from the Terminal or Command Prompt, in the project root (fireandlion
), run gulp
.
Of course, for this to work you must first install gulp.
To create a caption for an image, insert a markdown image inline in a paragraph, and give the paragraph the class image-with-caption
, like this:
![Great Expectations]({{ site.baseurl }}/images/great-expectations.jpg)
The cover of Great Expectations
{:.image-with-caption}
To create a gallery of images that tiles on the page, add all the images one after the other, each on a new line. Then add a {:.gallery}
tag on the last line after the images.
![The Park]({{site.baseurl}}/images/the-park.jpg)
![Ties that Bind]({{site.baseurl}}/images/ties-that-bind.jpg)
![We, the People]({{site.baseurl}}/images/we-the-people.jpg)
{:.gallery}
By default, a gallery fits three images in a row on a large screen. To get two, larger images per row, use {:.gallery-larger}
instead of {:.gallery}
.
You can keep unfinished drafts of posts in _drafts
.
Various site settings are stored in _data/settings.yml
, such as the site name, description, default image, canonical URL and Google Analytics Code.