sophstad / alpine

tumblr theme

Alpine

Alpine is a theme for Tumblr. Check out a live demo here. Alpine looks something like this:

Content Types

Photosets

Responsive photosets had been the bane of my existence since day one. For most of Alpine's existence, I was using a hacky method that simply took the raw images from the photosets and arranged them using floats and stuff. However, it wouldn't allow you to click on the photos to enlarge, and was a bit slow. But now, thanks to the new {Photoset} tag, they're responsive! (Previously, photosets looked like {Photoset-700} with a fixed dimension.) This is exciting stuff!

Video

I've worked hard to make video as close to responsive as possible. This works better for certain video aspects than others, but it works.

Customization

Alpine allows for some visual customization, allowing users to set background images and accent colors.

CSS

Tumblr CSS goes at the beginning of the file (or inline). It sucks.

Workflow

This is the worst part about developing Tumblr themes, in my opinion. Tumblargh wasn't useful for me. I'm going to try some of the strategies outlined here next. Until then, it's not fun.

alpine's Issues

Add hanging quotes

For typographic spotlessness! See Dan Eden's commit here.

Fix width of photoset on mobile

Photos get cut off

Use Google Fonts

Work Sans is now available on Google Fonts—modify CSS accordingly and prepare to see it everywhere.

Adjust position of magnifying glass

Make magnifying glass icon next to search box a few pixels lower.

Adjust Tumblr buttons position

With the introduction of instant messaging on Tumblr, adjusting the dashboard button appears to be different now.

Add interaction buttons to mobile

New mobile format includes like and reblog buttons on the blog's feed page. Update accordingly

Ordered list in post doesn't work

OL styling is disabled because each post object is a list item, but the theme should still be able to display lists within a post

Remove italics from quotes

Work Sans doesn't offer real italics.

Adjust width of body container

If I can figure out how 😥

Update hr

Define hr style