maximal/clock-icon.md

## clock-icon.md

      
    Raw
  

              clock-icon.md
            
          
    Крутая иконка времени

Челендж в Сиджеке.
В ФонтОсоме и Бутстрапе говно — http://fontawesome.io/icon/clock-o/
Нужно не говно: стрелки показывают то время, которое они изображают.
Статично, не двигаются, ничего. Стоят на нужном времени.
Ещё раз: двигаться ничего не должно.
Минимальные требования


Круг циферблата.
Четыре (3, 6 и 9 и 12 часов) или, в крайнем случае, 12 часовых отметок.
Часовая стрелка: потолще и покороче.
Минутная стрелка: потоньше и подлиннее (ну ты понел).
Часы и минуты задаются либо дата-атрибутами, либо инлайн-стилями (чтобы можно было вывести иконку бекендом).
Я не знаю возможностей современного CSS, поэтому тут на выбор. Идеал — дата-атрибуты.
Размер иконки должен автоматически наследоваться от font-size родительского элемента.
Как это сделано во всех наборах векторных (шрифтовых) иконок.
Автоматическое наследование цвета иконки от цвета текста родительского элемента. Аналогично.

Формулы углов


Поворот часовой стрелки: (hours % 12) * 30 + mins * 0.5.
Поворот минутной стрелки: mins * 6.

Формулы даны с отсчётом от вертикального положения по часовой стрелке.
Если в CSS нужно отсчитывать от горизонтального положения, сделать действия самостоятельно.
Пример статичного положения: http://sijeko.ru/temp/clock.html
Скорее всего, сделать на чистом CSS вычисление углов из дата-атрибутов не получится (или получится?).
Можно написать небольшой яваскрипт, который повернёт стрелки на нужные углы, а по умолчанию (яваскрипт не подключён) поставить стрелки, например, на 3:00, 9:00 или 10:10 (как в рекламе).
Примерный дом

<time datetime="2015-07-15T16:48:00+03:00">
	<span class="clock">
		<span class="hour-arr" data-hours="16" />
		<span class="min-arr" data-mins="48" />
	</span>
	<span class="datetime-text">16:48</span>
</time>