After creating the Haml calendar, I decided to go for a Haml clock.
How it works:
Haml provides the initial time.
- Internal Sass rotates the hands of the clock to portray that time.
- CSS animation keeps the hands ticking.
Initially I only used an inline style to set the rotation of each hand. I wanted to write the animation/keyframes in the external stylesheet, but that wasn’t going to work. The animation kept reseting to 0. For example, if it’s 1:15, the minute hand would initially start at 15 (rotate 90 degrees) and then rotate slowly to the next minute (96 degrees). Instead the animation would only start 0 degrees; I couldn’t get the inline rotation to speak with my external animation. To make the animation work, I wrote internal Sass so that the first keyframe was at the starting time and not reverting to 0.
I spent some extra time figuring out how to support different timezones. I set the clock at UTC-4 (EST). You can easily change the timezone in the Haml, it’s the first variable.
The CSS is all em-based and happily responsive. When the width/height is too small, then the digital time displays.
For an added bonus: the background color darkens as the day progresses. (My better half suggested that one.)
Did you enjoy this post? Support Soul Fire Farm. Soul Fire Farm is committed to ending racism and injustice in the food system.