gilroyhacks.com/css/schedule.scss

110 lines
2.0 KiB
SCSS
Raw Normal View History

2022-12-15 20:09:54 -08:00
$blockTimes: 800, 900, 1000, 1100, 1200, 1300,
1400, 1500, 1600, 1700, 1800, 1900, 2000,
2100;
$blockLengths: 1, 2, 3, 4;
.schedule-container {
display: grid;
grid-gap: 0.2rem;
grid-template-columns: 5rem 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;
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;
}
}