DualHub/static/cal.scss

:root {
  --numDays: 5;
  --numHours: 13;
  --numHalfHours: 23;
  --timeHeight: 60px;
  --halfTimeHeight: 30px;
  --calBgColor: #fff1f8;
  --eventBorderColor: #f2d3d8;
  --eventColor1: #ffd6d1;
  --eventColor2: #fafaa3;
  --eventColor3: #e2f8ff;
  --eventColor4: #d1ffe6;
}

.calendar {
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  margin: 2rem;
}

select {
  width: 300px;
  height: 40px;
  border-radius: 5px;
  border-color: transparent;
  background-color: var(--eventColor4);
  text-align: center;
}

form {
  margin-top: 5px;
}

option {
  width: 300px;
  font-size: 1rem;
}

.timeline {
  display: grid;
  grid-template-rows: repeat(12, 58px);
}

.days {
  display: grid;
  grid-column: 2;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.events {
  display: grid;
  grid-template-rows: repeat(var(--numHalfHours), var(--halfTimeHeight));
  border-radius: 5px;
  background: var(--calBgColor);
}


// Events

.title {
  font-weight: 600;
  margin-top: 0px;
  margin-bottom: 0px;
}

.room,
.time {
  display: block;
  margin-top: 0px;
  margin-bottom: 0px;
}

.event {
  border: 1px solid var(--eventBorderColor);
  border-radius: 5px;
  padding: 0.5rem;
  margin: 0 0.5rem;
  background: white;
}

.space,
.date {
  height: 100px
}

// Global / Etc

body {
  font-family: system-ui, sans-serif;
}

.corp-fi {
  background: var(--eventColor1);
}

.ent-law {
  background: var(--eventColor2);
}

.writing {
  background: var(--eventColor3);
}

.securities {
  background: var(--eventColor4);
}

.date {
  margin-bottom: 1em;
  gap: 1em;
}

.date-num {
  font-size: 3rem;
  font-weight: 600;
  display: inline;
}

.date-day {
  display: inline;
  font-size: 3rem;
  font-weight: 100;
}

// Place on Timeline
// STARTS

.start-0730 {
  grid-row-start: 2;
}

.start-0830 {
  grid-row-start: 2;
}
.start-0900 {
  grid-row-start: 3;
}
.start-0930 {
  grid-row-start: 4;
}
.start-1000 {
  grid-row-start: 5;
}

.start-1030 {
  grid-row-start: 6;
}

.start-1100 {
  grid-row-start: 7;
}

.start-1130 {
  grid-row-start: 8;
}

.start-1200 {
  grid-row-start: 9;
}

.start-1230 {
  grid-row-start: 10;
}

.start-1300 {
  grid-row-start: 11;
}

.start-1330 {
  grid-row-start: 12;
}

.start-1400 {
  grid-row-start: 13;
}

.start-1430 {
  grid-row-start: 14;
}

.start-1500 {
  grid-row-start: 15;
}

.start-1530 {
  grid-row-start: 16;
}

.start-1600 {
  grid-row-start: 17;
}

.start-1630 {
  grid-row-start: 18;
}

.start-1700 {
  grid-row-start: 19;
}

.start-1730 {
  grid-row-start: 20;
}

.start-1800 {
  grid-row-start: 21;
}

.start-1830 {
  grid-row-start: 22;
}


// ENDS

.end-0830 {
  grid-row-end: 2;
}

.end-0900 {
  grid-row-end: 3;
}

.end-0930 {
  grid-row-end: 4;
}

.end-1000 {
  grid-row-end: 5;
}

.end-1030 {
  grid-row-end: 6;
}

.end-1100 {
  grid-row-end: 7;
}

.end-1130 {
  grid-row-end: 8;
}

.end-1200 {
  grid-row-end: 9;
}

.end-1230 {
  grid-row-end: 10;
}

.end-1300 {
  grid-row-end: 11;
}

.end-1330 {
  grid-row-end: 12;
}

.end-1400 {
  grid-row-end: 13;
}

.end-1430 {
  grid-row-end: 14;
}

.end-1500 {
  grid-row-end: 15;
}

.end-1530 {
  grid-row-end: 16;
}

.end-1600 {
  grid-row-end: 17;
}

.end-1630 {
  grid-row-end: 18;
}

.end-1700 {
  grid-row-end: 19;
}

.end-1730 {
  grid-row-end: 20;
}

.end-1800 {
  grid-row-end: 21;
}

.end-1830 {
  grid-row-end: 22;
}

.end-1900 {
  grid-row-end: 23;
}