This page ex­ists to show the dif­fer­ent com­po­nents of my site. More than any­thing, I main­tain it be­cause I think style guides are in­ter­est­ing. There’s also a writ­ing style guide if you en­joy that type of stuff.

This web­site is cur­rently set in Whitney for pri­mary and sec­ondary text, and Whitney Narrow for head­ings.

Keyboard from the left angle

This is what a cap­tion looks like.

Heading Two #

Secondary head­ings are used to sep­a­rate por­tions of text. I don’t ever use links in head­ings un­less it’s a link post. Primary head­ings are only used once in the page ti­tle or post ti­tle. Links in reg­u­lar text look like this.

Keyboard from the left angle

This is what a cap­tion looks like

As nor­mal, you’ve got styles for inline code, ital­ics, and bold text. Inline code is used when the code is­n’t multi-line. Italics are used for em­pha­sis, and bold is hardly used but when it is, it’s used for the nec­es­sary vi­sual con­trast. This is high­lighted text.

I use hor­i­zon­tal rules for sep­a­rat­ing ideas in an ar­ti­cle.


  • This is an un­ordered list.
  • Second list item
    • Here’s a sec­ond-level list item
    • Here’s an­other sec­ond-level list item
  1. Goal ti­tle one
    Some text that ex­plains the goal
  2. Goal ti­tle two
    More text that ex­plains the goal and gives con­text. Tells you why I’m set­ting this as a goal.

Here’s a level three head­ing #

Here’s a blockquote for you. These are mostly used in link posts to quote writ­ing from else­where. They’re usu­ally pre­ceded by the per­son who said or wrote the quote.

Keyboard from the left angle

This is what a cap­tion looks like

Ben Brooks on The Brooks Review:

There’s a lot of good look­ing op­tions out there, but I wanted to be able to test some­thing af­ford­able for a change. So I reached out to Tom Bihn and asked if I could stop by to test out a few dif­fer­ent bags, and pos­si­bly swipe one for a while to test out.

Keyboard from the left angle

This is what a cap­tion looks like

I use Github Flavored Markdown for code blocks. In other words, I use three back ticks. I al­ways de­clare the lan­guage that’s be­ing used in the code block.

// _data/lastfm.js

const Cache = require('@11ty/eleventy-cache-assets');
require('dotenv').config();

const API_KEY = process.env.LASTFM_KEY;
const USERNAME = 'timothybsmith';
const API = 'http://ws.audioscrobbler.com/2.0/'

module.exports = async () => {
try {
const json = await Cache(
`${API}?method=user.getrecenttracks&user=${USERNAME}&limit=10&api_key=${API_KEY}&format=json`,
{
duration: '2h',
type: 'json',
}
);
return json;
} catch (ex) {
console.log(ex);

return [];
}
};

What about a table? #

Let’s look at some data!

PageInternet SpeedDOMContentLoaded
Home (Before)110mb/s1.10s
Home (After)110mb/s331ms
Home (Before)3G Slow9.35s
Home (After)3G Slow2.50s
Article (Before)3G Slow9.01s
Article (After)3G Slow2.30s

Here’s some CSS since I tend to write about it.

//--------------------------------
// _footer.scss
// -------------------------------

.site__footer {
background-color: $slate;
color: rgba(white, 0.6);
margin-top: 4rem;
padding: 2rem 0;

small {
color: rgba(white, 0.4);
display: block;
font-size: 0.9rem;
margin-top: 2rem;
width: 100%;
@media #{$medium-up} {
font-size: 0.75rem;
}
}

p {
font-size: 1rem;
line-height: 1.5;
}

a {
text-decoration: none;
}

.container {
margin-left: auto;
margin-right: auto;
width: 90%;

@media #{$large-up} {
width: 100%;
}
}
}

Let’s Test That Fluid Type #

Lorem ip­sum do­lor sit amet, con­secte­tur adip*isic­ing elit, sed do eius­mod *tempor in­ci­didunt ut la­bore et do­lore magna ali­qua.

And that’s it. Oh wait… I for­got some­thing.1


  1. Yep. These are foot­notes, and this is what they look like. Not a huge deal, but some­times very nec­es­sary. ↩︎