Women-in-Computing-at-RIT/wichacks.io

$blockTimes: 800,830,900,930,1000,1030,1100,1130,1200,1230,1300,1330,1400,1430,1500,1530,1600,1630,1700,1730,1800,1830,1900,1930,2000,2030,2100,2130;
$blockLengths: 1, 2, 3, 4;

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 4rem 0;
  font-family: -system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.scheduleContainer {
  display: grid;
  grid-gap: 0.2rem;
  
  grid-template-columns: 5rem repeat(4, 1fr); 
  grid-template-rows: repeat(28, 1fr);
  grid-template-areas:
    "time800 stage stage stage stage"
    "time830 stage stage stage stage"
    "time900 stage stage stage stage"
    "time930 stage stage stage stage"
    "time1000 stage stage stage stage"
    "time1030 stage stage stage stage"
    "time1100 stage stage stage stage"
    "time1130 stage stage stage stage"
    "time1200 stage stage stage stage"
    "time1230 stage stage stage stage"
    "time1300 stage stage stage stage"
    "time1330 stage stage stage stage"
    "time1400 stage stage stage stage"
    "time1430 stage stage stage stage"
    "time1500 stage stage stage stage"
    "time1530 stage stage stage stage"
    "time1600 stage stage stage stage"
    "time1630 stage stage stage stage"
    "time1700 stage stage stage stage"
    "time1730 stage stage stage stage"
    "time1800 stage stage stage stage"
    "time1830 stage stage stage stage"
    "time1900 stage stage stage stage"
    "time1930 stage stage stage stage"
    "time2000 stage stage stage stage"
    "time2030 stage stage stage stage"
    "time2100 stage stage stage stage"
    "time2130 stage stage stage stage";
}

/**
 * Time
 */
.time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: thin dotted #ccc;
  height: 100%;
  padding: 0 0.5rem;
  
  @each $time in $blockTimes {
    &.start-#{$time} {grid-area: time#{$time} }
  }
  
  &[class*="30"]:not(.start-1300) {
    font-size: 0.8rem;
    color: #ccc;
  }
}


/**
 * 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;}
  
  span {
    display: block;
    width: 100%;
    font-size: 0.8em;
    font-weight: normal;
  }
  
  @each $time in $blockTimes {
    &.start-#{$time} {grid-row-start: time#{$time} }
  }
  
  @each $time in $blockTimes {
    &.end-#{$time} {grid-row-end: time#{$time} }
  }
  
  @each $length in $blockLengths {
    &.length-#{$length} {
      grid-column-end: span #{$length};
    }
  }
  
  &.stage-earth {background-color: #FFA726};
  &.stage-mercury {background-color: #9CCC65};
  &.stage-venus {background-color: #FF8A65};
  &.stage-mars {background-color: #B3E5FC};
  &.stage-jupiter {background-color: #81D4FA};
  &.stage-saturn {background-color: #26C6DA};