/* /public/css/components/folio-day.css */
@layer routes {
.folio-day {
display: grid;
gap: 1rem;
}
.folio-day[data-folio-day-state="ready"] .folio-day__static {
display: none;
}
.folio-day__date {
margin: 0;
font-family: var(--site-mono-font, monospace);
font-size: 0.8rem;
color: var(--ink-soft);
}
.folio-day__today {
display: grid;
gap: 0.6rem;
max-inline-size: 26rem;
}
.folio-day__piece {
display: grid;
gap: 0.4rem;
color: var(--ink);
text-decoration: none;
}
.folio-day__piece img {
inline-size: 100%;
block-size: auto;
max-inline-size: 16rem;
}
.folio-day__title {
font-weight: 600;
}
.folio-day__question {
margin: 0;
font-size: 1.15rem;
font-style: italic;
line-height: 1.4;
}
.folio-day__week ol {
display: grid;
gap: 0.3rem;
padding-inline-start: 1.1rem;
font-size: 0.9rem;
}
.folio-day__week time {
font-family: var(--site-mono-font, monospace);
font-variant-numeric: tabular-nums;
color: var(--ink-soft);
}
.folio-day__count {
margin: 0;
color: var(--ink-soft);
font-size: 0.84rem;
}
.folio-day[data-folio-day-compact] .folio-day__today {
max-inline-size: 40rem;
grid-template-columns: minmax(6rem, 9rem) 1fr;
align-items: start;
column-gap: 1rem;
}
.folio-day[data-folio-day-compact] .folio-day__date {
grid-column: 1 / -1;
}
.folio-day[data-folio-day-compact] .folio-day__piece {
grid-row: span 3;
}
.folio-day[data-folio-day-compact] .folio-day__question {
font-size: 1rem;
}
}