<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"
}
  • Content:
    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
    
  • URL: /components/raw/calendar-page/calendar-page.styl
  • Filesystem Path: components/bits/calendar-page/calendar-page.styl
  • Size: 1.9 KB

There are no notes for this item.