Interface Patterns

HTML

Usage: Post summaries and details on index pages. These items are from both the writing and project pages to show both styles.

Restrictions: Generally contained by .index container as shown here.

Specification: Fluid, whole- to half-width block. Large action button at the bottom. Background image pulled from post (where available). Strong link color hyperlinked headlines. Description is always shown. Metadata is more specific for projects.

HTML

Usage: Post summaries and details on index pages. These items are from both the writing and project pages to show both styles.

Restrictions: Generally contained by .index container as shown here.

Specification: Smaller than .item but largely itentical. Fluid, whole- to half-width block. Large action button at the bottom. Background image pulled from post (where available). Strong link color hyperlinked headlines. Description is never shown. Completed period not necessary.

HTML

Usage: Post title and metadata on archive pages.

Specification: Fluid, full-width typographic block. Unlike .item (main variant on other indexes), no background image. Strong link color hyperlinked headlines. Category is hyperlinked except on category-specific archives.

HTML

Usage: Linked sections of the website with summaries.

Restrictions: Only for use on the home/menu page. The included pattern sample is quite width-constrained, unlike the context the pattern appears in.

Specification: Thin hyperlinked headlines with no underline style (except on hover/focus). List first three items in category (or for non-category sections, a text summary). On large screens, alternate right/left alignment using flexbox and text-align.

HTML

Usage: Site-wide menu/home and back-to-top “return” navigation.

Restrictions: Not used on the home page.

Specification: Use standard action block style for the site, with light background and dark foreground text. Each action should have a slightly different background color but both should be strong reverse contrast on hover/focus. Home action is accompanied by logo-medium.svg.

olivermakes
HTML

Usage: Site-wide vector logo that appears on the home page and site-wide banner. On the home page, it appears large and partially obscured, and is not hyperlinked. The SVG fill property can be styled with CSS.

Restrictions: Only used for navigating home or signifying identity.

HTML

Usage: Site-wide vector logo that appears on the bottom menu navigation. The SVG fill property can be styled with CSS. Used in a static PNG form at 32 pixels for the standard size favicon.

Restrictions: Only used for navigating home or signifying identity. Not used on the home page.

HTML

Usage: Minimal path-only vector logo variant rendered at small sizes. The SVG fill property can be styled with CSS. A variant of it is used as the Safari (macOS) pinned tab icon.

Restrictions: Used only for pattern library link and Safari pinned tab icon.

HTML

Usage: Directional arrows used throughout the site. Inline SVG can be styled with CSS.

Specification: Use inline SVG with a Liquid include, like: {% include icon/arrow-down.svg %}. Arrows have a distinctive design with a cut-out arrow head.