<div class="calendar-page calendar-page--dark calendar-page--durp">
<div class="calendar-page__month">
Feb
</div>
<div class="calendar-page__day">
7
</div>
</div>
<div class="calendar-page calendar-page--{{ background }} calendar-page--{{ siteUnit }}">
<div class="calendar-page__month">
{{ shortStartMonth }}
</div>
<div class="calendar-page__day">
{{ startDay }}
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"shortStartMonth": "Feb",
"startDay": "7"
}
breakpoint = eventCardBreakpoint
.calendar-page
--calendarBorderColor illiniOrange
--darkBackgroundColor charcoalLight
--textColor charcoalLight
&--arch
--calendarBorderColor industrialBlue
--darkBackgroundColor charcoalLight
--textColor charcoalLight
&--art
--calendarBorderColor archesBlue
--darkBackgroundColor charcoalLight
--textColor charcoalLight
&--dance
--calendarBorderColor archesBlue
--darkBackgroundColor transparent
--textColor charcoalLight
&--durp
--calendarBorderColor illiniOrange
--darkBackgroundColor charcoalLight
--textColor charcoalLight
&--theatre
--calendarBorderColor illiniOrange
--darkBackgroundColor charcoalLight
--textColor illiniBlue
&--music
--calendarBorderColor illiniOrange
--darkBackgroundColor charcoalLight
--textColor illiniBlue
&--landarch
--calendarBorderColor illiniOrange
--darkBackgroundColor charcoalDarker
--textColor charcoalLight
align-items center
border 2px solid var(--calendarBorderColor)
border-top-width 8px
color var(--textColor)
display inline-flex
padding 4px 14px 2px
+above(breakpoint)
display flex
flex-direction column
max-width 64px
&__month
font-size 16px
font-weight 700
line-height 1
text-transform uppercase
&__day
font-size 24px
font-weight 700
line-height 1
margin-left 4px
+above(breakpoint)
font-size 32px
margin-left 0
&--dark
color white
background-color var(--darkBackgroundColor)
position relative
z-index 1
.page-summary-with-image--music .calendar-page--music
color white
There are no notes for this item.