Style Guide
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
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:
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
- Item 3a
- 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 information1.
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>
![](https://octodex.github.com/images/yaktocat.png)
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>
![](https://octodex.github.com/images/yaktocat.png)
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.
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 columnsprefer-4-columns
—never exceed 4 columnsprefer-3-columns
—never exceed 3 columnsprefer-2-columns
—never exceed 2 columnsdense
—minimal spacing between itemssparse
—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:
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:
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.
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>
3D Model
<x-model src="model.stl" />
-
And here it is. ↩