Optimize Responsive Behavoir

[thomasfrobieter]

I've used your fantastic lib in multiple projects now, and I came across some responsive issues.

Beyond some Ideas to improve this, probably in a new Major release (I think this will need markup changes, so it would destroy existing countdowns with custom style) :

1. Switch from Text-Numbers to SVG-Numbers: I think this is the most important point here, if multiple countdowns are used inside columns, the layout of the countdown will fail. If we have the numbers as Inline-SVG Codeblocks instead we have text who sizes with the container width. Examples: https://codepen.io/pcorey/pen/wdGcq or https://codepen.io/chriscoyier/pen/DKcad
2. Improve the countdown layout with Flexbox: This is a perfect case to use Flexbox - I can't imagine a case where anyone wants the countdown to break apart, so it's always in one row: Days | Hours | Minutes | Seconds. To do so, we should change the Markup:

• .rotor-group-heading => This needs to be moved to a new outer wrapper (.flipdown__group.flipdown__group--seconds or something), so the .rotors are alone in this wrapper. Furthermore this labels should be truncated (white-space:nowrap; text-overflow:ellipsis; ...) by default i think.
• The time devider dots should be inline SVGs so they scale down with the SVG Text, so they also need a seperate wrapper
• (Add SCSS files or use CSS variables, so themers can change colors, font-family, etc. more easy)
• (Consider switching to BEM naming - but that's just my personal preference. I would also like to have modifier classes like bla-group--seconds ..bla-group--hours to prevent the nth-child stuff, which just make the CSS more complicated to understand)

I will hopefully find some time next month to try this out in a fork!