Chore chart

by Laura Kishimoto

HTML

<section class="group">
  <ol class="timeline" data-period="4">
    <li class="timeline__range" style="grid-column-end: span 6;">
      <button class="doer">
        +
      </button>
    </li>
    <li class="timeline__range" style="grid-column-end: span 2;">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
  </ol>
  <ol class="timeline" data-period="1">
    <li class="timeline__range" style="grid-column-end: span 16;">
      <button class="doer">
        +
      </button>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range" style="grid-column-end: span 2;">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
    <li class="timeline__range">
      <span class="doer"></span>
    </li>
  </ol>
  <ol class="timeline"...

SCSS

$grid-size: 5rem;

$colour-gold: #ffc107;

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: sans-serif;
  color: #888;
  padding-right: 10rem;
}

.group {
  padding: 0.2em 0 15px;
  font-size: $grid-size;
  overflow-x: scroll;
  direction: rtl;
}

.timeline {
  display: grid;
  grid-template: 1em / repeat(60, 1em);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 60em;
  border: 1px solid #aaa;
  border-bottom-width: 0;
  background-image: repeating-linear-gradient(
    to left,
    #ddd,
    transparent 0,
    transparent calc(1em - 1px),
    #ddd calc(1em - 1px),
    #ddd 1em
  );
  
  &:last-of-type {
    border-bottom-width: 1px;
  }
  
  &__range {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 1em; // actual duration
    min-height: 0.9em;
    padding: 0;
    background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.25) 1em, rgba(0, 0, 0, 0.25) 1em);
    direction: ltr;
    border-left: 1px solid #aaa;
    
    &:after {
      content: '';
      position: absolute;
      bottom: -1px;
      right: 0;
      left: 1em; // period
      border-bottom: 3px solid currentColor;
      color: red;
    }
    
    @for $i from 1 through 30 {
      [data-period="#{$i}"] & {
        grid-column-end: span #{$i};
        background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.25) #{$i}em, rgba(0, 0, 0, 0.25) #{$i}em);
        
        &:after {
          left: calc(#{$i}em + 1px);
        }
      }
    }
  }
}

.doer {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.45em;
  
  font-size: 0.4em;
  background: white;
  
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #aaa;
  
  &:hover {
    cursor: pointer;
    color: $colour-gold;
  }
}