Fire and Lion

A development site for Fire and Lion (http://fireandlion.com).

Usage

This site is built with Jekyll. Follow the installation and running instructions for Jekyll to install and run it locally.

Editing

Main site pages

The site's main pages (index or home page, portfolio, thinking, about, find) are markdown files in the project root.

Portfolio

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.

Thinking posts

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.

Images

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.

Captions

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}

Gallery

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

Drafts

You can keep unfinished drafts of posts in _drafts.

Site settings

Various site settings are stored in _data/settings.yml, such as the site name, description, default image, canonical URL and Google Analytics Code.

DioneMentis / fireandlion