Objects

Decorative SVG illustrations — Game Boy, Switch, iPod, calendars, Polaroid and more.

Objects are decorative SVG illustrations used at the top of posts. Each SVG already carries the object and object--{kind} classes that control its sizing.

Game Boy

{% include "components/objects/game-boy.svg" %}

Switch

PlayStation

PC

iOS

The iOS app icon has a squircle background driven by object.color.{h,s,l} on the post's frontmatter. The SVG composes those values into an hsl() fill, multiplying l by 0.8. If no colour is provided, the fill falls back to currentColor. An optional object.image is clipped inside the squircle; without one, the default /images/me/me.svg is used.

object:
  type: "iOS"
  platform: "iOS"
  color:
    h: 35
    s: 97
    l: 65
  image: "/images/games/mini-motorways.jpeg"

iPod nano

Calendar — now

Calendar — weeknotes

Polaroid

Pocket

The pocket SVG has a live <image> element on its screen. The image URL is composed from object.screenshot (a directory), screenshotCount (defaults to 001), and screenshotFormat (defaults to .png). Pass any of them via the post's frontmatter object, or as loose Liquid variables.

object:
  platform: "Game Boy"
  trophy: "100%"
  image: "/images/games/super-mario-land-2-6-golden-coins/label-art.jpg"
  screenshot: "/images/games/super-mario-land-2-6-golden-coins/"

Note

<div class="object object--note">
  <div class="post-it yellow">A short note on yellow paper.</div>
</div>

List

<div class="object object--list">
  <header class="list-header">
    <h1 class="list-title">Things to do</h1>
  </header>
  <ul class="list-body">
    <li class="list-item list-item--done">Feed the fox</li>
    <li class="list-item">Walk the dog</li>
    <li class="list-item list-item--secondary">Nap</li>
  </ul>
</div>