1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
$background-color-active: grey
$view-border-radius: .5rem
$vertical-views-padding: 0.35em
main #statical-calendar.calendar div
flex: unset
// scoping all of these rules under the statical-calendar element
#statical-calendar.calendar
display: flex
flex-direction: column
align-items: center
justify-content: center
h1
background-color: white
text-align: center
margin: 0
padding: .6em
// header styles
.header
padding: 0.5em
margin: 0
// styles for the pagination and view elements
.pagination
width: 100%
display: flex
justify-content: space-between
margin: .5rem 0
font-size: 1.2rem
line-height: initial // here to improve styles when embedding in other pages
any-link
text-decoration: none
.views, .previous, .next
border-radius: $view-border-radius
background-color: #eee
padding: $vertical-views-padding 0
.previous, .next
width: calc( 100% / 7 )
text-align: center
.views
ul
width: 100%
justify-content: space-around
margin: 0
padding: 0
font-size: revert // here to improve styles when embedding in other pages
li
// this is mostly to suppress the list bullet points
display: inline
padding: $vertical-views-padding 1em
margin: 0 // here to improve styles when embedding in other pages
li.active
background-color: $background-color-active
border-radius: $view-border-radius
// styles for all events
div.event
background-color: #eee
padding: 0
border-radius: 1em
margin: 0.5em
overflow: hidden
any-link
color: unset
text-decoration: none
.summary
font-weight: bold
.body .content
padding: 0.5em
p
margin: 1em 0
&:first-child
margin-top: 0
&:last-child
margin-bottom: 0
div.header
background-color: grey
border-top-left-radius: 1em
border-top-right-radius: 1em
margin-bottom: 0
.time, .duration
white-space: nowrap
.header > p
margin: 0
> div.day,
> div.agenda,
> div.event
max-width: 600px
> a > p.header
font-size: 1.3em
text-align: center
padding-bottom: 0
margin-bottom: 0
> div.event
padding: 0
background-color: white
// max-width: 600px
// shared styles for week and month (for consistency)
> div.week,
> div.month
width: 100%
display: grid
// simplified the math by removing the gap
grid-template-columns: repeat(7, calc( 100% / 7))
div.day
background-color: white
padding: 0.1em
img
// Fix to keep absurdly large images contained within the .day cell
max-width: 100%
&.weekend, &.other-month
background-color: #ddd
> a > div.header
display: flex
justify-content: space-between
p.date
white-space: nowrap
text-align: right
// styles for the week view only
div.week
grid-auto-rows: 2
> .day > p.header
display: flex
justify-content: space-between
.day
border: .5px solid lightgrey
p
margin: .25em
.weekend
border-top: .5px solid grey
.weekend.first-week
border-top: unset
.weekend.Sun
border-right: .5px solid grey
.weekend.Sat
border-left: .5px solid grey
// styles for the month view only
div.month
grid-auto-rows: repeat(6, minmax(6em, auto))
> .header
font-weight: bold
text-align: center
// sticky header for days of the week
.wday.header
position: sticky
top: 0
background-color: white
// box-shadow: 0 2px 3px grey
border-bottom: 1px solid grey
.day
border: .5px solid lightgrey
p
margin: .25em
.weekend
border-top: .5px solid grey
.weekend.first-week
border-top: unset
.weekend.Sun
border-right: .5px solid grey
.weekend.Sat
border-left: .5px solid grey
// hide body until hover
div.month
div.event .body
visibility: hidden
// cannot use 100% or auto here, nor can we transition between such values on height
// more info here: https://css-tricks.com/using-css-transitions-auto-dimensions/
max-height: 0
transition: all 1s ease
&:hover
visibility: visible
// cannot use 100% or auto here, nor can we transition between such values on height
// more info here: https://css-tricks.com/using-css-transitions-auto-dimensions/
max-height: 100vh
// continue showing body on hover over body
.header:hover + .body
visibility: visible
// cannot use 100% or auto here, nor can we transition between such values on height
// more info here: https://css-tricks.com/using-css-transitions-auto-dimensions/
max-height: 100vh
// CSS all event expansion toggle UI elements
div.month
// these elemnts have to be siblings of day elements for the CSS based hack to work
// we cannot place them into a containing block until Firefox properly supports the :has() selector
input#expand-events, label.expand-events
grid-row-start: 1
grid-column-end: 7
position: relative
top: 10px
height: 1rem
margin: 1rem
font-size: 1rem
input#expand-events
// we're using vw here as that changes dynamically with the viewport width
left: 6vw
grid-column-start: 7
label.expand-events
// we're using vw here as that changes dynamically with the viewport width
left: 13vw
grid-column-start: 1
text-align: right
// CSS all event expansion toggle hack
// input#expand-events:checked ~ .month .events .event .body
// html body.calendar main div.calendar div.month input#expand-events.expand-events ~ .day .events .event .body
input#expand-events:checked ~ .day .events .event .body
visibility: visible
// cannot use 100% or auto here, nor can we transition between such values on height
// more info here: https://css-tricks.com/using-css-transitions-auto-dimensions/
max-height: 100vh