Haml clock
After creating the Haml calendar, I decided to go for a Haml clock.
See the Pen Haml Clock by Katy DeCorah (@katydecorah) on CodePen
How it works:
- Haml provides the 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.
Features
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.)
Credits
I received design and color inspiration from Dribbble. Also, I used Hugo Giraudel’s items on a circle mixin. I really love that mixin!