extract css for calendar
1 file changed, 71 insertions(+), 0 deletions(-)
changed files
A domain/web/templates/calendar.css
@@ -0,0 +1,71 @@ +.calendar-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 0.5ch; +} + +.day { + min-height: 6rem; +} + +.past { + opacity: 0.5; +} + +.day h3 { + margin-block: 0 0.5ch; + font-size: 1.1rem; + font-weight: normal; +} + +.day.today h3 { + font-weight: bold; +} + +.event { + font-size: 0.9rem; +} + +.tentative { + opacity: 0.75; +} + +.today { + background-color: var(--today-background-color); +} + +.calendar footer { + font-size: small; + color: var(--muted-color); + padding: 1ch 0; +} + +.calendar footer p { + margin: 0; +} + +.only-small-portrait { + display: none; +} + +@media only screen and (max-width: 768px) { + .calendar-grid { + display: flex; + flex-direction: column; + } + + .past { + display: none; + } + + .day { + min-height: revert; + } +} + +@media only screen and (max-width: 768px) and (orientation: portrait) and (min-height: 768px) { + .only-small-portrait { + display: revert; + } +}