Галерея
Декорируем офисы, квартиры и загородные дома в скандинавском стиле
- dayOfWeek = [ 'sun', 'mon', 'tue', 'wed', 'thr', 'fri', 'sat'] .bg #calendar header i.icons.icon-arrow-left p.month May 2016 i.icons.icon-arrow-right |
- for (i=0; i<7; i++) span(class='#{dayOfWeek[i]}')=dayOfWeek[i] |
.weeks |- for (i=1; i<=31;) - for (j=0; j<7; j++) - if(i<= 31) - if (i === 1) - j = 5 - if( j === 0) |
div(id='d#{i}' class='day') .date span.day=i span(class='#{dayOfWeek[j]} dayOfWeek')=dayOfWeek[j] .events - if(i%3===0 || i%8===0) .event .logo i.icon-music-tone-alt .title p Music Event Title - else .event .logo i.icon-game-controller .title p Game Event Title - if(i%4===0) .event .logo i.icon-camera .title p Photo Event Title - if(i%7==0) .event .logo i.icon-film .title p Movie Event Title - if (j === 6) |
- i++; // just styling/////////////////////////////// @import 'nib'; global-reset() black = #575757 gray = #F7F7F7 red = #F78686 blue = #86BBF7 .sun color red .sat color blue * box-sizing border-box :root font-size 16px font-family 'Roboto' font-weight 300 html display block height auto color black .bg, .border position fixed top 0 left 0 width 100% height 100% .bg background linear-gradient(bottom, red, #BBFCFC) z-index -1 .border border 15px solid white z-index 10 .border 15px solid white position fixed top 0 left 0 #calendar margin 0 auto display block background rgba(white, .4) header display flex justify-content space-between padding 1.5rem 0 border-bottom 1px solid red p.month text-align center font-size 1.5rem font-size 1.5rem i.icons padding 0.4rem // begin calendar css////////////////////////// #calendar .dayOfWeeks display none .week display block > .day display flex border-bottom 1px solid lightness(gray,90%) padding 1rem .5rem // background rgba(#fff, .4) min-height 80px &#d12 //today border-bottom 1px solid red .date flex 0 0 80px display flex justify-content space-between align-items baseline padding 0 2rem 0 0 text-align right span &.day font-size 1.2rem flex 0 0 30px &.dayOfWeek font-size 0.8rem margin 0 0 0 0.2em text-transform uppercase .events width 100% .event display flex margin 0 0 0.5rem 0 &:last-child margin 0 .logo flex 0 0 20px margin 0 0.5rem 0 0 font-size 1.0rem .title font-size 1.0rem @media only screen and (min-width : 700px) #calendar margin-top 5vh max-width 1000px padding 5rem header margin-bottom 4rem border none width 90% margin-left auto margin-right auto .dayOfWeeks display flex justify-content space-between text-transform uppercase margin 0 0 2rem 0 span text-align center flex 0 0 calc(100% / 7) .week display flex &:first-child justify-content flex-end > .day flex 0 0 calc(100% / 7) margin 0 padding 0.5rem height auto display block height 110px border none &#d12 //today border none .date .day &:after content '' position absolute bottom -0.2rem left 0 width 100% border-bottom 1px solid red .date justify-content center text-align center margin 0 0 1.5rem 0 padding 0 .dayOfWeek display none .day position relative .events display flex justify-content center .event margin 0 .5rem 0 0 &:last-child margin 0 .logo margin 0 .title margin 0.5rem display none View Compiled Resources