Old Jekyll home page with modern CSS

Tribute to the minimalist 2009-2013 Jekyll site, but using flexbox and blend modes.

This project was originally completed .

This writing was last updated 2016-01-21.

I loved the original home page for Jekyll as it existed from 2009-2013. The stark, contrastive split layout and the blunt text “transform your text into a monster” had a mystique that only hinted at what the tool actually does: make websites. 1

Over eight years and three major versions later, the Jekyll project has matured and dropped the old design. I decided to revive the design with a CodePen demo with new web standards that didn’t exist back then. The initial implementation relied on a lot of hacks to achieve its uncommon split layout. I used CSS flexbox for layout, vh (viewport height) units, a two-tone linear-gradient background, and mix-blend-mode to create the text contrast. The blend mode bit is the most forward-looking (and least well-supported) part of this demo, but it is usable on production websites with proper care.

See the Pen transform your text into a monster by Oliver Pattison (@opattison) on CodePen.

HTML and CSS used

<h1>jekyll</h1>
<h2>transform your text into a monster</h2>

/* Tested in latest Chrome and Safari only */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  height: 100vh;

  background-image: linear-gradient(90deg, #ddd 50%, #000 50%);
}

h1,
h2 {
  color: #ddd;
  font-weight: 400;
  margin: 0;
  mix-blend-mode: difference;
  text-align: center;
  width: 100%;
}

h1 {
  font-family: georgia, serif;
  font-size: 10em;
  transform: translateX(-19.5px)
}

h2 {
  font-family: verdana, sans-serif;
  font-size: 1em;
  margin-top: 2em;
  transform: translateX(-20px)
}
  1. Jekyll is the technology behind this website – it is a static site generator that helps build and publish very fast websites, and I have used it for much of my recent work on the web. I have written quite a bit about it as well.