150 lines
2.7 KiB
SCSS
150 lines
2.7 KiB
SCSS
@use "@styles/color";
|
|
@use "@styles/var";
|
|
|
|
/* The calendar. A month at a time, with a mark under every day that has
|
|
* writing on it - so it doubles as a picture of how the journal is kept. */
|
|
.calendar {
|
|
width: 19rem;
|
|
padding: 0.75rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.calendar__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var.$elem-spacing;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.calendar__month {
|
|
font-family: var.$font-hand;
|
|
font-size: 1.35rem;
|
|
line-height: 1;
|
|
color: color.$ink;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.calendar__step {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.9rem;
|
|
height: 1.9rem;
|
|
border-radius: var.$block-radius;
|
|
color: color.$ink-soft;
|
|
transition: background-color var.$trans-quick, color var.$trans-quick;
|
|
|
|
&:hover:not(:disabled) {
|
|
color: color.$ink;
|
|
background-color: color.$paper-shade;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.3;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.calendar__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 0.1rem;
|
|
}
|
|
|
|
.calendar__weekday {
|
|
text-align: center;
|
|
font-size: 0.66rem;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
color: color.$ink-faint;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
|
|
.calendar__day {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var.$block-radius;
|
|
color: color.$ink;
|
|
transition: background-color var.$trans-quick, color var.$trans-quick;
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: color.$paper-shade;
|
|
}
|
|
|
|
&:disabled {
|
|
color: color.$ink-faint;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.calendar__day--outside {
|
|
color: color.$ink-faint;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
/* A day with writing on it. The dot is the affordance; the weight change is
|
|
* what you actually notice when scanning a month. */
|
|
.calendar__day--written {
|
|
font-weight: 600;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0.18rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 0.3rem;
|
|
height: 0.3rem;
|
|
border-radius: 50%;
|
|
background-color: color.$ribbon;
|
|
}
|
|
}
|
|
|
|
.calendar__day--today {
|
|
box-shadow: inset 0 0 0 1px color.$caramel;
|
|
}
|
|
|
|
.calendar__day--current {
|
|
color: #fff6e6;
|
|
background-color: color.$ribbon;
|
|
|
|
&:hover {
|
|
background-color: color.$ribbon;
|
|
}
|
|
|
|
&::after {
|
|
background-color: #fff6e6;
|
|
}
|
|
}
|
|
|
|
.calendar__foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var.$elem-spacing;
|
|
margin-top: 0.55rem;
|
|
padding-top: 0.5rem;
|
|
border-top: 1px solid color.$paper-edge;
|
|
}
|
|
|
|
.calendar__link {
|
|
font-size: 0.78rem;
|
|
color: color.$ink-soft;
|
|
padding: 0.25rem 0.4rem;
|
|
border-radius: var.$block-radius;
|
|
|
|
&:hover {
|
|
color: color.$ink;
|
|
background-color: color.$paper-shade;
|
|
}
|
|
}
|
|
|
|
.calendar__count {
|
|
font-size: 0.72rem;
|
|
color: color.$ink-faint;
|
|
}
|