www.moonwalks.be/theme/static/css/old/calendar_old.css

/*
bug fix past / confirmed in both dark and light time
make sure it fit on iphone 5
make whole transition in size
add (open) button
add a [now] indicator on the timeline
decide if we leave or not the illumination level
homogenize time notation (19h30 & 8:05:30pm)
*/
/* CALENDAR SECTIONS
 ============================================================================ */
.calendar-box {
  display: grid;
  align-items: last baseline;
  grid-template-columns: repeat(4, auto) 1fr;
  grid-template-rows: auto auto;
  gap: calc(var(--pad) * 1) calc(var(--pad) * 4);
  padding: calc(var(--pad) * 2) 0;
  border-bottom: var(--border);
  position: relative;
}

.calendar-box .phase-name {
  /* has to have fixed width so both phase name have same width */
  width: 4.8em;
}

.calendar-box>.reservation-wrapper {
  flex-grow: 1;
}

/* --- date --- */
#calendar-section .day-in-full {
  display: block;
  font-size: var(--fs-big);
  margin-bottom: -0.15em;
}

#calendar-section .number-date {
  /* mono */
  font-family: 'Inconsolata', monospace;
  font-variation-settings: 'wght'220, 'wdth'120;
  font-size: calc(var(--fs-mono) * 2.4);
  line-height: 1;
  /* classic */
  /* font-size: var(--fs-big);
  line-height: 1; */
}

.number-date span:not(:last-of-type)::after {
  content: ".";
  margin: 0 -0.2em;
}

/* --- moon drawing --- */
.moon-drawing {
  --size: 0.8em;
  --illumination: 1;
  font-size: var(--fs-title);
  display: block;
  margin: auto;
  width: var(--size);
  height: var(--size);
  background-color: rgba(255, 255, 255, var(--illumination));
  border-radius: 100%;
}

/* --- phase name --- */
h2.phase-name {
  line-height: 0.76;
  text-transform: capitalize;
}

/* --- reservation link --- */
/* basic */
.reservation-wrapper {
  font-size: var(--fs-big);
  text-align: right;
  white-space: nowrap;
}

.reservation-wrapper a {
  text-transform: capitalize;
  text-decoration: none;
}

.calendar-box:not(.confirmed) .reservation-wrapper {
  display: none;
}

/* blue if confirmed */
.confirmed .reservation-wrapper {
  color: midnightblue;
}

/* underline if confirmed and not past (=has href)*/
.confirmed .reservation-wrapper a[href] {
  color: midnightblue;
}

.confirmed .reservation-wrapper a[href] span:nth-of-type(2) {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
}

/* grey if past */
.past .reservation-wrapper {
  color: grey;
}

.past .reservation-wrapper a {
  color: grey;
}

/* --- secondary info --- */
.moon-event-time {
  padding-left: 0.2em;
}

.sun {
  font-size: 1.75em;
  vertical-align: initial;
  margin-right: 0.14em;
  position: relative;
  top: 0.18em;
  line-height: 0;
}

.api-info-wrapper {
  display: contents;
}

.sunset {
  grid-column: 4 / span 2;
}

.moon-event-time {
  grid-column: 1 / span 1;
}

.distance {
  grid-column: 3 / span 1;
}

.illumination {
  display: none;
}

/* --- past & confirmed --- */
/* the past & confirmed must be visible without opening on mobile!! */
.confirmed .date-wrapper,
.confirmed .phase-name-wrapper {
  color: midnightblue;
}

.past .date-wrapper,
.past .phase-name-wrapper {
  color: grey;
}

/* .last-past:after {
  content: "\27A4";
  display: block;
  background: var(--c-light);
  position: absolute;
  top: 100%;
  grid-column: 2 / span 1;
} */

/* loading-holder */
.loading-holder {
  margin: calc(var(--pad) * 2) 0;
  animation: glowing 1s infinite alternate;
}

@keyframes glowing {
  from {
    color: var(--c-dark);
  }
  to {
    color: white;
  }
}

/* FOOTER
 ============================================================================ */

.calendar > footer{
  text-align: center;
  grid-column: 1 / span 2;
  margin-bottom: calc(var(--pad) * 2);
}

/* MOBILE
 ============================================================================ */
@media only screen and (max-width: 1050px) {
  .calendar-box {
    gap: calc(var(--pad) * 1) calc(var(--pad) * 2);
  }
}

@media only screen and (max-width: 850px) {
  .calendar-box {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 0 calc(var(--pad) * 2);
  }

  .calendar-box:not(.confirmed) {
    grid-template-rows: auto auto;
  }

  /* --- typo adjustments --- */
  .moon-drawing {
    --size: 1em;
  }

  .date-wrapper .number-date {
    font-variation-settings: 'wght'250, 'wdth'120;
    font-size: calc(var(--fs-mono) * 2.5);
  }

  /* --- open / close mobile mechanism --- */
  /* the open close button */
  .date-wrapper,
  .phase-name-wrapper,
  .moon-drawing {
    cursor: pointer;
  }

  /* hidding in mobile - when click --> .open */
  .calendar-box.open {
    gap: calc(var(--pad) * 2);
  }

  .to-hide-on-mob {
    display: none;
  }

  /* walk info placement */
  .open.confirmed .walk-info-wrapper {
    display: block;
    grid-column-end: span 3;
  }

  .open.confirmed .reservation-wrapper {
    display: block;
    padding-right: calc(var(--pad) * 1);
    grid-column: -2 / -1;
    grid-row: -2 / -1;
  }

  /* api-info placement */
  .open .api-info-wrapper {
    grid-column-end: span 2;
    display: flex;
    flex-wrap: wrap;
  }

  .api-info-wrapper>* {
    flex-basis: 100%;
    padding: 0;
  }

  .sunset {
    order: 1;
  }

  .moon-event-time {
    order: 2;
  }

  .illumination {
    order: 3;
  }

  .distance {
    order: 4;
  }
}

@media only screen and (max-width: 600px) {}