Miles Barger

Introducing hand.made. - A Friendly Tumblr Theme

I use Tumblr like a scrap book and wanted it to look more the part. The result: hand.made. The aesthetic is simple — ink on paper.

Features

Hand drawn elements:

  • header
    Header images and icons
  • navigation
    Navigation icons
  • permalink
    Permalink icons
  • hr
    Horizontal rules
  • underline
    Underscores + link underlines
  • blockquote
    Blockquote lines
  • quotes
    Quotation marks for quote posts

  • Video outlines
  • photooutline
    Photo outlines
  • audioplayer
    Audio player background
  • via
    “Via” text

Functionality:

  • Good combination of fixed (posts) and variable (header+footer) widths.1
  • Visually minimal but functionally rich navigation — page, post, and day page links and navigation.
  • A “via” class with automatic generation for re-blogs.
  • Clear :hover attributes with combinations of background highlighting and hand-drawn underlines.
  • Styling of small elements like lists, blockquotes, emphasis, strong, etc.
  • Footnote styling.
  • Great response to text resizing.2
  • Valid XHTML 1.0 Transitional and CSS33 with complete use of alt text and link titles.

Development

On the to-do list:

  1. Squash bugs (please send me an email if you find one).
  2. Make the code as clear and minimal as possible.
  3. Rename images for clarity.
  4. Replace colors with Tumblr theme variables.
  5. Release for public use with packaged CSS, javascript, theme, images, enableable (?) comments, and instructions on using your own images.

Limitations

I don’t know what this looks like in IE6 and earlier, but it’s probably pretty terrible. This is especially true because I’m using a LOT of .pngs with transparency, and IE6 hates that. But guess what? I don’t care. At all. If this were a commercial site or something I was doing for someone else, I would, but it’s not, so I don’t.

If you insist on using IE, upgrade to 7. And then 8. But really, it would be better to download Safari, Firefox, Camino, or any other standards-compliant browser. They are free, and they don’t suck.

  1. In non-shitty browsers, i.e. NOT IE (har har), the left and right margins will shrink to zero when the window is narrowed. Normally, a variable width body makes this impossible: a 50% body with {margin:0 auto;} means the left quarter of the screen will always be white space. However, using {display:table;} on the body wrapper removes this idiocy. ↩

  2. The “tricks” are pretty obvious. Tops and bottoms of posts are fixed width and height “caps”. Left and right sides are a fixed width background that repeats on the y axis. To ensure that the post body and bottom bracket always meet, there’s a nested div with bottom padding. ↩

  3. The XHTML seems to fail; however, this is only because of the google maps link in the header. The CSS is all valid 2.1 except for the p:last-child selector, which is CSS3 and gets rid of unnecessary white space below last paragraphs and blockquotes. ↩