Style Guide

Colophon

The site is hand coded by me using HTML, CSS, PHP, and jQuery. It's built with Kirby CMS, and hosted on Media Temple. The current version was 'launched September 1st 2015 and is the 8th revision since 2008. unveil.js is used to lazy load images and improve speed. Wow.js is used to animate images on scroll.


Logo

Portrait illustrated by Mitzi Ahaha in 2014.

jaimec

Colors

There are 5 primary colors

#fbfaf9 #f0ede5 #bfbfbf #ce664c #5e5c57

Header styles

Main Header is used for titles

Second Level Header 2 is used to separate sections

Third Level Header 3 is used for introductions and descriptions

Forth Level Header is used for metadata and figure captions.


Basics

An example of a paragraph body and footnote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Expectoque quid ad id, quod quaerebam, respondeas. Sapiens autem semper beatus est et est aliquando in dolore; Si autem id non concedatur, non continuo vita beata tollitur. Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris? That's some text with a footnote.1


An example of a block quote

Sapiens autem semper beatus est et est aliquando in dolore; Si autem id non concedatur, non continuo vita beata tollitur.


italic / bold

Lists

  1. Numbered
  2. List

Images

There are four primary image sizes2, on mobile they all become the same size:

Thirds

eleanor-misc1
eleanor-misc1
eleanor-misc1

Halves

eleanor-misc2
eleanor-misc2

Standard (100% of post)

eleanor-misc3

Cover (full width of browser with more padding)

eleanorcover

  1. Footnote 1 

  2. Some images (like devices) have their own custom sizes.