294 of 300

Platform 08

Week ring

Seven day segments placed around a circle by CSS alone: each takes its angle from sibling-index() and sibling-count(), (index − 1) ÷ count × 360° from the top, and its position from cos() and sin() of that angle.

From the Engineering page on ramtt.com

  • A segment runs outward from a 46 px radius at 11 px per planned hour, in one ink with a lighter step for easier intents; today is in the accent and a rest day is a dot.
  • The centre shows the week's total, 12 h for this week, and hovering or focusing a day shows its name, hours and intent; arrow keys move between days.
  • Without sibling-index() a script writes each segment's index and the count as custom properties and the same trigonometry places it.