Theme introduction

This post is a showcase of what Holo Alfa looks like, and a reference guide for how you can use it to make your blog shine.

You can write posts using the familiar Markdown syntax, plus some extra’s from GFM. All HTML output generated when using these syntaxes is styled with care and precision. Generous whitespace is used to give your content some breathing room.

The image in the background can be set as cover-image in the Front Matter of a post or page. The “fade to white” will be created automatically. Cover images are stored in /img/covers/.

Look, a H2 heading!

Add hierarchy to your content by using headings. It’s recommended that you only use headings of H2 and H3. This is because H1 headings are used by the post title.

H3 Heading

Are smaller than H2 headings.

H4 Heading

Too many heading sizes will make the content hierarchy less clear, so you are limited to three sizes: H2, H3 and H1. H1 being occupied by the title.

• The quick brown fox jumps over the lazy dog.
• Pa’s wijze lynx bezag vroom het fikse aquaduct.
• Portez ce whisky au vieux juge blond qui fume.

Lists work as expected.

1. Blowzy night-frumps vex’d Jack Q. (A perfect pangram)
2. Alve bazige froulju wachtsje op dyn komst.
3. Flygande bäckasiner söka hwila på mjuka tuvor.

Quotes, images and code blocks

Use Markdown’s > to create a quote.

It’ll be nipper heaps trent from punchy oldies. Trent from punchy no dramas when flat out like a tucker-bag. He hasn’t got a piker flamin frog in a sock. — Bogan Ipsum

Large enough images will be wider than the page.

Source: imgur.com

Pro tip: Use <small></small> tags on the same line as an image to create a source.

Next up is a code block with syntax highlighting, generated by Pygments.

nav a:hover {
  color: rgba(0,0,0,.72);
}
nav a.current {
  color: rgba(0, 0, 0, .72)
}
.subtitle {
  margin: 30px 0;
}

@media all and (min-width: 370px) {
  .website-title {
    font-size: 32px;
  }
  body {
    font-size: 24px;
  }
  a {
    background-position: 0 18px;
  }
}

Here’s one without syntax highlighting, generated by GFM:

// this code block is generated by Github Flavoured Markdown
el.each(function() {
  if(s.remotePath != null && s.remoteTarget != null) {
    $.get(s.remotePath, function(data) {  
      setTime($('<div>').html(data).find(s.remoteTarget).text());
    });
  } else {
    setTime(el.text());
  }
});

Video’s

If you embed a video from YouTube, Vimeo or another popular video website FitVids.js takes care of it being responsive.

It’s time for a break.

In Markdown you can create a horizontal rule with ---.

Tables

Tables are a part of GFM, and are also styled in this theme.

That’s it, for now…

You can get Holo Alfa at the Github repository. Maybe add/suggest new features. Or report bugs.

22 Jul 2015