You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
181 lines
3.9 KiB
CSS
181 lines
3.9 KiB
CSS
3 years ago
|
|
||
|
|
|
||
|
|
/* 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(--c-dark); }
|
||
|
|
to { color: var(--c-light); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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) * 0.5);
|
||
|
|
}
|
||
|
|
#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 */
|
||
|
|
.cal-entry{
|
||
|
|
padding: calc(var(--lh) * 1) 0 calc(var(--lh) * 0.5);
|
||
|
|
|
||
|
|
/* padding: calc(var(--lh) * 1) 0 calc(var(--lh) * 1);
|
||
|
|
border-left: calc(var(--lh) * 0.5) solid white;
|
||
|
|
padding-left: calc(var(--lh) * 1); */
|
||
|
|
}
|
||
|
|
.cal-entry.newmoon{
|
||
|
|
/* border-style: dotted; */
|
||
|
|
}
|
||
|
|
.cal-entry:not(:last-of-type){
|
||
|
|
border-bottom: var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cal-entry__prime{
|
||
|
|
display: flex;
|
||
|
|
align-items: last baseline;
|
||
|
|
gap: calc(var(--lh) * 1.5);
|
||
|
|
}
|
||
|
|
.cal-entry__second{
|
||
|
|
margin-top: calc(var(--lh) * 0.75);
|
||
|
|
}
|
||
|
|
.cal-entry__tertary{
|
||
|
|
margin-top: calc(var(--lh) * 0.75);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* --- date */
|
||
|
|
.cal-entry__date .day{
|
||
|
|
text-transform: capitalize;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- past --- */
|
||
|
|
.cal-entry.past .cal-entry__date .date{
|
||
|
|
text-decoration-line: line-through;
|
||
|
|
text-decoration-thickness: calc(var(--lh) * 0.2);
|
||
|
|
}
|
||
|
|
.cal-entry.past h2{
|
||
|
|
color: var(--c-soft-text);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- moon drawing */
|
||
|
|
.cal-entry__moon .moon-drawing {
|
||
|
|
font-size: var(--fs-big);
|
||
|
|
width: 1em;
|
||
|
|
height: 1em;
|
||
|
|
border-radius: 100%;
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
top: 0.12em;
|
||
|
|
}
|
||
|
|
.cal-entry.fullmoon .moon-drawing{
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
.cal-entry.newmoon .moon-drawing{
|
||
|
|
border: 3px dotted white;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- phase-name */
|
||
|
|
.cal-entry__phase{
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
h2.phase-name {
|
||
|
|
line-height: calc(var(--lh) * 1.5);
|
||
|
|
text-transform: capitalize;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- reservation */
|
||
|
|
.cal-entry__reservation{
|
||
|
|
/* flex-grow: 1; */
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
.reservation {
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.cal-entry__reservation .picto{
|
||
|
|
position: relative;
|
||
|
|
top: 0.16em;
|
||
|
|
margin-right: 0.1em;
|
||
|
|
}
|
||
|
|
.cal-entry:not(.confirmed) .cal-entry__reservation .picto{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.cal-entry:not(.confirmed) .cal-entry__reservation a{
|
||
|
|
color: var(--c-soft-text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cal-entry.past.confirmed .cal-entry__reservation{
|
||
|
|
color: var(--c-soft-text);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* activvve */
|
||
|
|
/* .cal-entry.confirmed:not(.past) :is(h2, .cal-entry__description, .cal-entry__reservation a), */
|
||
|
|
.cal-entry.confirmed:not(.past) :is(.cal-entry__description, .cal-entry__reservation){
|
||
|
|
/* color: midnightblue; */
|
||
|
|
/* color: navy; */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- tertary */
|
||
|
|
|
||
|
|
.cal-entry__tertary{
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 0.5em;
|
||
|
|
}
|
||
|
|
.cal-entry__tertary > *:not(:last-child)::after{
|
||
|
|
content: "•";
|
||
|
|
margin: 0 0.5em;
|
||
|
|
}
|
||
|
|
.cal-entry__tertary > *:not(:first-child)::before{
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* typo animation */
|
||
|
|
.cal-entry{
|
||
|
|
--animation-duration: 2s;
|
||
|
|
/* --animation-duration: 0.5s; */
|
||
|
|
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; color: white;}
|
||
|
|
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; color: white;}
|
||
|
|
100% { font-variation-settings: "SERI"100, "slnt"0; }
|
||
|
|
}
|