www.moonwalks.be/theme/static/css/calendar.css

/* CALENDAR
 =========================================================================== */

#calendar-section{
  /* padding-top: calc(var(--lh) * 1); */
  /* padding-left: calc(var(--lh) * 1); */
}

/* loading */
.cal-loading {
  margin: calc(var(--lh) * 1) 0;
  animation: glowing 1s infinite alternate;
}
@keyframes glowing {
  from { color: var(--clr-text); }
  to { color: var(--clr-back); }
}

/* layout */
#calendar-section{
  /* padding-bottom: calc(var(--lh) * 1); */
}
#calendar-section header{
  padding-bottom: calc(var(--lh) * 0.5);
  border-bottom: var(--border);
  border-style: dotted;
  margin-bottom: calc(var(--lh) * 0.5);
}
#calendar-section .calendar-content{
  /* padding-left: calc(var(--lh) * 1); */
}
#calendar-section footer{
  padding-top: calc(var(--lh) * 0.5);
  border-top: var(--border);
  border-style: dotted;
  margin-top: calc(var(--lh) * 0.5);
}

/* AN ENTRY
 =========================================================================== */

/* layout */
.cal-entry{
  padding: calc(var(--lh) * 1) 0 calc(var(--lh) * 1);

  display: grid;
  grid-template-columns: min-content min-content 1fr;
  grid-auto-rows: min-content;
  align-items: last baseline;
  gap: 0 calc(var(--lh) * 1.5);
  
}
.cal-entry:not(:last-of-type){
  border-bottom: var(--border);
}

.cal-entry__date,
.cal-entry__moon,
.cal-entry__phase,
.cal-entry__reservation{

}
.cal-entry__description,
.cal-entry__data{
  grid-column: 1 / span all;
}

.cal-entry__description{
  font-size: var(--fs-up);
  margin-top: calc(var(--lh) * 0.5);
}
.cal-entry__data{
  margin-top: calc(var(--lh) * 0.5);
}


/* --- date */
.cal-entry__date .day{
  text-transform: capitalize;
}

/* --- past --- */


/* --- moon drawing */
.cal-entry__moon .moon-drawing {
  font-size: var(--fs-big);
  width: 1em;
  height: 1em;
  border-radius: 100%;
}
.cal-entry.fullmoon .moon-drawing{
  background: white;
}
.cal-entry.newmoon .moon-drawing{
  border: 5px dotted white;
  box-sizing: border-box;
}

/* --- phase-name */
.cal-entry__phase{
  flex-grow: 1;
}
.cal-entry__phase h2.phase-name {
  line-height: calc(var(--lh) * 1.5);
  white-space: nowrap;
  width: 6em;
}

/* --- reservation */
.cal-entry__reservation{
  text-align: right;
  white-space: nowrap;
}
/* .cal-entry__reservation .picto{
  position: relative;
  top: 0.16em;
  margin-right: 0.1em;
  line-height: 0;
} */
.cal-entry__reservation .signup{
  border: var(--border);
  border-radius: calc(var(--lh) * 0.5);
  padding: calc(var(--lh) * 0.5) calc(var(--lh) * 0.75) calc(var(--lh) * 0.25);
  text-decoration: none;
}
.cal-entry__reservation .signup:hover{
  background: rgba(255,255,255,0.35);
}

.cal-entry:not(.confirmed) .cal-entry__reservation,
.cal-entry.past .cal-entry__reservation{
  color: var(--clr-soft-text);
}

/* --- data */

.cal-entry__data{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.cal-entry__data > *:not(:last-child)::after{
  content: "•";
  margin: 0 0.5em;
}
.cal-entry__data > *:not(:first-child)::before{
  content: " ";
}


/* ANIMATION
 =========================================================================== */

.cal-entry{
  --animation-duration: 2s;
  animation-timing-function: linear;
}
.cal-entry:not(.past).confirmed.newmoon.animated h2{
  animation: newmoon var(--animation-duration);
}
.cal-entry:not(.past).confirmed.fullmoon.animated h2{
  animation: fullmoon var(--animation-duration);
}
@keyframes newmoon {
  0% { font-variation-settings: "SERI"0, "slnt"0; }
  50% { font-variation-settings: "SERI"100, "slnt"0; }
  100% { font-variation-settings: "SERI"0, "slnt"0; }
}
@keyframes fullmoon {
  0% { font-variation-settings: "SERI"100, "slnt"0; }
  50% { font-variation-settings: "SERI"0, "slnt"0; }
  100% { font-variation-settings: "SERI"100, "slnt"0; }
}

/* RESPONSIVE
 =========================================================================== */

 /* @media only screen and (max-width: 920px)  */

/* smaller date */
@media only screen and (max-width: 1450px) {

  .cal-entry{
    grid-template-columns: min-content 1fr;
    align-items: last baseline;
  }

  /* first line */
  .cal-entry__moon{
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
  }
  .cal-entry__phase{
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
  }
  .cal-entry__reservation{
    grid-row: 1 / span 1;
    grid-column: 3 / span 1;
  }

  /* second line */
  :root{
    --fs-mono-big: calc(var(--fs-up) * 1.125);
    --fvs-mono-big: 'wght' 300, 'wdth' 100;
  }
  .cal-entry__date .day::before{
    content: "— ";
  }
  .cal-entry__date{
    grid-row: 2 / span 1;
    grid-column: 1 / span all;

    display: flex;
    align-items: baseline;
    gap: 0.5em;
    margin-top: calc(var(--lh) * 0.5);
  }
  .cal-entry__date .date{
    order: 0;
    line-height: var(--lh);
  }
  .cal-entry__date .day{
    order: 1;
  }


  .cal-entry__description,
  .cal-entry__data{
    order: 4;
    grid-column: 1 / span all;
  }

}

/* mobile */
@media only screen and (max-width: 680px) {

  #calendar-section .calendar-content{
    padding-left: 0;
  }

  .cal-entry{
    grid-template-columns: min-content min-content;
    gap: 0 calc(var(--lh) * 1);
  }

  /* --- reservation */
  .cal-entry__reservation{
    grid-column: 1 / span all;
    grid-row: auto;
    text-align: left;
    margin-top: calc(var(--lh) * 0.5);
  }
  .cal-entry__reservation .signup{
    display: inline-block;
  }

  /* --- data */
  .cal-entry__data{
    display: block;
  }
  .cal-entry__data > *:not(:last-child)::after{
    content: none;
  }
}