gilroyhacks.com/css/schedule.css

.schedule-container {
  display: grid;
  margin: auto;
  grid-gap: 0.2rem;
  grid-template-columns: 4rem repeat(4, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-template-areas: "time800 stage stage stage stage" "time900 stage stage stage stage" "time1000 stage stage stage stage" "time1100 stage stage stage stage" "time1200 stage stage stage stage" "time1300 stage stage stage stage" "time1400 stage stage stage stage" "time1500 stage stage stage stage" "time1600 stage stage stage stage" "time1700 stage stage stage stage" "time1800 stage stage stage stage" "time1900 stage stage stage stage" "time2000 stage stage stage stage" "time2100 stage stage stage stage";
}

/**
 * Time
 */
.time {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  padding: 0 0.5rem;
}
.time.start-800 {
  grid-area: time800;
}
.time.start-900 {
  grid-area: time900;
}
.time.start-1000 {
  grid-area: time1000;
}
.time.start-1100 {
  grid-area: time1100;
}
.time.start-1200 {
  grid-area: time1200;
}
.time.start-1300 {
  grid-area: time1300;
}
.time.start-1400 {
  grid-area: time1400;
}
.time.start-1500 {
  grid-area: time1500;
}
.time.start-1600 {
  grid-area: time1600;
}
.time.start-1700 {
  grid-area: time1700;
}
.time.start-1800 {
  grid-area: time1800;
}
.time.start-1900 {
  grid-area: time1900;
}
.time.start-2000 {
  grid-area: time2000;
}
.time.start-2100 {
  grid-area: time2100;
}

/**
 * Event
 */
.event {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0.5rem 1rem;
  background-color: orange;
  border-radius: 0.2rem;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.4;
  border-top: thin solid rgb(68, 68, 68);
}
.event span {
  display: block;
  width: 100%;
  font-size: 0.8em;
  font-weight: normal;
}
.event.empty {
  background-color: unset;
}

.event.start-800 {
  grid-row-start: time800;
}
.event.start-900 {
  grid-row-start: time900;
}
.event.start-1000 {
  grid-row-start: time1000;
}
.event.start-1100 {
  grid-row-start: time1100;
}
.event.start-1200 {
  grid-row-start: time1200;
}
.event.start-1300 {
  grid-row-start: time1300;
}
.event.start-1400 {
  grid-row-start: time1400;
}
.event.start-1500 {
  grid-row-start: time1500;
}
.event.start-1600 {
  grid-row-start: time1600;
}
.event.start-1700 {
  grid-row-start: time1700;
}
.event.start-1800 {
  grid-row-start: time1800;
}
.event.start-1900 {
  grid-row-start: time1900;
}
.event.start-2000 {
  grid-row-start: time2000;
}
.event.start-2100 {
  grid-row-start: time2100;
}
.event.end-800 {
  grid-row-end: time800;
}
.event.end-900 {
  grid-row-end: time900;
}
.event.end-1000 {
  grid-row-end: time1000;
}
.event.end-1100 {
  grid-row-end: time1100;
}
.event.end-1200 {
  grid-row-end: time1200;
}
.event.end-1300 {
  grid-row-end: time1300;
}
.event.end-1400 {
  grid-row-end: time1400;
}
.event.end-1500 {
  grid-row-end: time1500;
}
.event.end-1600 {
  grid-row-end: time1600;
}
.event.end-1700 {
  grid-row-end: time1700;
}
.event.end-1800 {
  grid-row-end: time1800;
}
.event.end-1900 {
  grid-row-end: time1900;
}
.event.end-2000 {
  grid-row-end: time2000;
}
.event.end-2100 {
  grid-row-end: time2100;
}
.event.length-1 {
  grid-column-end: span 1;
}
.event.length-2 {
  grid-column-end: span 2;
}
.event.length-3 {
  grid-column-end: span 3;
}
.event.length-4 {
  grid-column-end: span 4;
}
.event.stage-earth {
  background-color: #ffa726;
}
.event.stage-mercury {
  background-color: #9ccc65;
}
.event.stage-venus {
  background-color: #ff8a65;
}
.event.stage-mars {
  background-color: #b3e5fc;
}
.event.stage-jupiter {
  background-color: #81d4fa;
}
.event.stage-saturn {
  background-color: #26c6da;
}

/*# sourceMappingURL=schedule.css.map */