Opening the doors on advent

For the last few years, my friend Jon Hodges has been making an online advent calendar. Every day in December he publishes one or more photos or videos capturing the modern festive season.

This year I helped him to spruce up the site, streamlining his publishing workflow and adding some shininess. In the past, the site had a visual metaphor of images on a TV screen, but we went for a good old-fashioned advent calendar, with doors opening to reveal the images beneath.

The back end is quite straightforward - a Drupal 7 site with a content type for the days, allowing Jon to add photos and videos using the Media module, with a view showing combined with scheduled publishing, and an RSS feed being picked up by Twitterfeed to push links to Facebook and Twitter. It’s one of the few times where I’ve needed a public view that included unpublished nodes - the theme implements template_preprocess_views_view_fields to set up the template.

There’s a bit more going on on the front end, but it’s nearly all CSS (although I’m using Compass to make life easier). There’s a little bit of JavaScript to add classes for the open doors, and to store visited days in a cookie.

Open doors

My first adventure in 3D transforms was aided by being able to pinch a few ideas from around the web, particularly a StackOverflow answer by Ana Tudor and David De Sandro’s introduction to 3D transforms. I’m still not entirely happy with the timing of the door opening and the picture below being revealed, but the day job keeps me pretty busy…

@mixin door-closed {
  border: 1px solid $keyline;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  @include transform-origin(0);
  @include transform(rotateY(0deg));
}

@mixin door-open {
  background: $keyline;
  @include transform-origin(0 50% 0);
  @include transform(rotateY(-120deg));
  width: 15%;
}

The downside of this is that it doesn’t work in older browsers. The upside is that I was able to include a banner from http://theie8countdown.com/ - incidentally I had a recent win where I managed to persuade a client to let us put something similar on their site.

A star for Christmas Day

With CSS borders, - a pair of triangles forms a six-pointed star - this is lifted from http://www.css3shapes.com/

$star_size: 25px;
$star_offset: 15px;

.christmas-day .date {
  position: absolute;
  width: 0;
  height: 0;
  border-left: $star_size solid transparent;
  border-right: $star_size solid transparent;
  border-bottom: ($star_size + $star_offset) solid $link_colour;
  top: $star_size - $star_offset;
  left: $star_size;
  line-height: 0;
  font-size: 0;

  &:after {
    content:"";
    position: absolute;
    width: 0;
    height: 0;
    border-left: $star_size solid transparent;
    border-right: $star_size solid transparent;
    border-top: ($star_size + $star_offset) solid $link_colour;
    margin: $star_offset 0 0 -$star_size;
    top: 0;
    left: -$star_size;
    line-height: 0;
  }
}

Here's a simplified version on CodePen.

Touch titles

In previous years, Jon has used the image title element to provide a comment or extra information on the images. The problem with this is that they wouldn’t show on touch devices. After some tinkering, we settled on an approach based on David Walsh’s folding animation.