This page collects together all the styles used on this site. It serves as a reference for me when I’m writing and adding different themes, and helps me clarify approaches for InContext.

Markdown

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Normal

Bold

Italic

~~Strikethrough~~

Bold and italic

Highlight

Link

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam risus enim, imperdiet at blandit sit amet, ullamcorper ullamcorper lectus. Curabitur lacinia, lacus a pulvinar dictum, dolor diam feugiat eros, eu porta risus nibh ut massa.

Cras vitae velit iaculis, ultricies felis in, sagittis justo.

Images

If you want to embed images, this is how you do it:

Image of Yaktocat

Yaktocat

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

<p class="caption">Yaktocat</p>

Quotes

If you’d like to quote someone, use the > character before the line:

Coffee. The finest organic suspension ever devised… I beat the Borg with it.

Captain Janeway

If you'd like to quote someone, use the > character before the line:

> Coffee. The finest organic suspension ever devised... I beat the Borg with it.
> - Captain Janeway

Code

There are many different ways to style code with GitHub’s markdown. If you have inline code blocks, wrap them in backticks: var example = true. If you’ve got a longer block of code, you can indent with four spaces:

if (isAwesome){
  return true
}

GitHub also supports something called code fencing, which allows for multiple lines without indentation:

if (isAwesome){
  return true
}

And if you’d like to use syntax highlighting, include the language:

if (isAwesome){
  return true
}

Horizontal rule

Lists

Unordered

Item 1
Item 2
- Item 2a
- Item 2b

Ordered

Item 1
Item 2
Item 3
1. Item 3a
2. Item 3b

Tables

First Header	Second Header
Content from cell 1	Content from cell 2
Content in the first column	Content in the second column

Footers

This sentence requires further information¹.

Smart Quotes

They’re really quite ‘smart’.

Syntax highlighting

Auto-detect language

def foo():
    if not bar:
        return True

Explicit language

def foo():
    if not bar:
        return True

Semantic HTML

Aside

<aside>
  Some informational text.
</aside>

Custom Styles

There are a number CSS classes that can be used and relied upon in within content.

img.invert

Images will be inverted when displayed in dark mode. This is great for things like sketches (as exported from Notes).

<img class="invert" src="sketch.png" />

p.caption

<p class="caption">Yaktocat</p>

Yaktocat

.low-priority

Images in containers with the low-priority class will be fully desaturated (grayscale(100%)) and will fully saturate on hover. This is intended to make lower priority items such as archived apps and hardware projects less visually prominent.

<div class="low-priority">
    <img src="https://octodex.github.com/images/yaktocat.png">
</div>

Float

Inline floating images and elements can be achieved with the float, left, and right classes.

<div class="float right">
  <img src="https://octodex.github.com/images/yaktocat.png">
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus porttitor mauris nec pretium. Proin bibendum pretium nisi at sollicitudin. Nunc interdum nisl eu dignissim suscipit. Nam commodo scelerisque sagittis. Etiam tempus at nisl id ultricies. Cras vel sagittis risus. Proin fermentum at diam vitae fringilla. Donec tristique eget purus ut ultricies.

Headers ( h1, h2, … etc) and informational blocks ( .info) have the clear: both property to ensure they will always get pushed below floating elements and start a new section.

Grids

Content can be organized into grids with equal width columns using the grid class on a container:

<div class="grid prefer-3-columns dense">
  <img src="issue-21-cover.png" />
  <img src="issue-22-cover.png" />
  <img src="issue-24-cover.png" />
</div>

Traits can be modified with the following additional CSS classes:

prefer-5-columns—never exceed 5 columns
prefer-4-columns—never exceed 4 columns
prefer-3-columns—never exceed 3 columns
prefer-2-columns—never exceed 2 columns
dense—minimal spacing between items
sparse—generous spacing between items

For example, the above code would generate the following:

Symbol Links

Links can be annotated with named symbols which are used to select theme-appropriate icons. Use both the symbol class, and the class of the required symbol. For example,

<a class="symbol computer">Computers</a>

Will display a suitably styled GitHub link:

Computers

The following conceptual symbols are available:

book
computer
document
game
ideas
pdf
places
scans
screenshot
style
tag
wallpaper
zip
github
thingiverse

There are also some navigational symbols:

back

Tilt Extensions

incontext provides Tilt extensions which can be used to add functionality.

Panorama

![Panorama of my office](office.jpeg)

Gallery

{% extensions.gallery("images") %}

The site includes a number of template fragments that are intended to be used directly within Markdown content.

Video

Video files can be included in one of two ways.

Using a Tilt extension:

{% extensions.video("turtle.mov") %}

Using a Markdown image tag:

![Video description here](turtle.mov)

Audio

Audio files are not currently supported as top-level media format in InContext, meaning they can only be rendered using a Tilt extension:

{% extensions.audio("rincewind.mp3") %}

Showcase

Showcase renders a media grid of posts matching a tag.

For example,

{% extensions.showcase("wallpaper") %}

Tagged Posts

{% extensions.tagged("elsewhere") %}

Elsewhere: Watching Tokyo – December 5, 2018
Projects, 2022 – January 2, 2023

Custom Tags

Location

Locations are supported through custom tags:

<x-map latitude="35.671336"
       longitude="139.702941"
       title="Harajuku Station" />

latitude and longitude are required. title is optional.

Named Location

Anonymous Location

Multiple Locations

Multiple locations can be specified using the additional x-location tag. For example,

<x-map>
    <x-location latitude="35.671336"
                longitude="139.702941">
        Harajuku Station
    </x-location>
    <x-location latitude="37.766655"
                longitude="-122.418129">
        1515 15th St
    </x-location>
</x-map>

The contents of the x-location tag will be used as the title for the location label.

Harajuku Station 1515 15th St

Controls

Controls can be enabled by adding the controls attribute (though Apple Maps may choose not to display these if the map is too small). For example,

<x-map class="large" controls>
    <x-location latitude="35.671336"
                longitude="139.702941">
        Harajuku Station
    </x-location>
    <x-location latitude="37.766655"
                longitude="-122.418129">
        1515 15th St
    </x-location>
</x-map>

Harajuku Station 1515 15th St

3D Model

<x-model src="model.stl" />

And here it is. ↩