Living styleguide
The Haute Couture of my blogposts

Foto by herlitz_pbs (https://www.flickr.com/photos/herlitzpbs/10800093004) released under CC-BY-ND 2.0 (https://creativecommons.org/licenses/by-nd/2.0/)

The header section above is a container which takes up ~40% vertical space. It is intended to show a full size image. The headline (and subheadline) for the blogpost is centered and the letters have one of the available colors (see below) as background.

Basic styling

Typography

The font face has a technical look goes nicely with this blog, whose topics cover coding and technology mainly. The font is called “input” and was created by David Jonathan Ross1. The fact that it comes with a whole bunch of different styles is a strong advantage, since typography is the most important stylistic device on text-heavy sites. However, because using webfonts is also a matter of frontend performance, just the following styles are included:

Inline styles

Colors

brown: #5a3e35

purple: #8d1699

blue: #0d668d

red: #c0253e

orange: #f34c17

green: #65c858

yellow: #cac43b

Block elements

Table

Nr. First Sentence Book Author
1 Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt Die Verwandlung Franz Kafka
2 Stately, plump Buck Mulligan came from the stairhead, bearing a bowl of lather on which a mirror and a razor lay crossed. Ulysses James Joyce
3 In principio era il Verbo e il Verbo era presso Dio, e il Verbo era Dio. Il Nome Della Rosa Umberto Eco
4 It was a bright, cold day in April, and the clocks were striking thirteen 1984 George Orwell
5 In der Mottengasse elf, oben unter dem Dach hinter dem siebten Balken in dem Haus, wo der alte Eisenbahnsignalvorsteher Herr Gleisenagel wohnt, steht eine sehr geheimnisvolle Kiste. Lari Fari Mogelzahn Janosch

Code

2

# Returns a personalized salutation string
def greet(name)
  return "Hey, #{name}! How are you doing?"
end

puts greet("Mary")

List

  1. Ordered list
  2. Another list item
  3. Third list item

Image

3

A climber abseils from a very exposed summit needle

Blockquote

4

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother’s keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who attempt to poison and destroy my brothers. And you will know my name is the Lord when I lay my vengeance upon thee.


  1. Check out the website, it’s worth having a look there. [return]
  2. Some fancy ruby code… [return]
  3. Abseiling from the salbit summit needle in the swiss alps [return]
  4. Source: Ezekiel 25,17 (in the Pulp Fiction translation) [return]