liftie

clearfix() &:after content " " display block clear both ellipsis() text-overflow ellipsis overflow hidden white-space nowrap user-select() -webkit-user-select arguments user-select arguments // colors: http://colorschemedesigner.com/#0542cw0w0w0w0 $blue=hsl(217, 83, 36) $red=hsl(7, 100, 50) $yellow=hsl(38, 100, 50) $green=hsl(136, 100, 36) $link-color=hsl(197, 100, 43) $background-color=hsl(220, 96, 98) $text-color=hsl(0, 0, 20) $column-width=320px $column-gutter=16px $panel-padding = 12px $column-content-width = $column-width - 2 * $panel-padding gradient-background($color = $background-color, $lighten = 5%, $darken = 5%) background-color $color background linear-gradient(to bottom, lighten($color, $lighten), darken($color, $darken)) @import './icons' @import './weather' * padding 0 margin 0 // fast click on Windows: see - http://bit.ly/1aPOfxR a, input, button -ms-touch-action: none !important /* * Hide from both screenreaders and browsers: h5bp.com/u */ .hidden display none !important visibility hidden .visible clearfix() /* * Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden border 0 clip rect(0 0 0 0) height 1px margin -1px overflow hidden padding 0 position absolute width 1px // To be used for links rendered with font icons // Chrome 19 was weird with clickability without this: http://css-tricks.com/examples/IconFont .icon-alone display inline-block cursor pointer .left float left .right float right body font-size: 1em font-family: Ubuntu, "Lucida Grande", Helvetica, Arial, sans-serif color $text-color a color $link-color text-shadow 0 1px white transition color .3s ease text-decoration none user-select none -webkit-tap-highlight-color rgba(0,0,0,0) -webkit-tap-highlight-color transparent &:hover, &:active color saturate($link-color, 20%) .panel clearfix() box-sizing border-box margin 0 ($column-gutter/2) $column-gutter width $column-width padding 0 $panel-padding float left background-color $background-color &:last-child margin-bottom 0 header .ls-furkot font-size .9em .add-to-trip cursor pointer display block ellipsis() span + span margin-left .2em .resort footer .add-to-trip margin-top .3em .panel header, footer transition all .4s ease clearfix() header padding .7em 0 .5em footer padding 0 0 .7em header font-size 1.2em border-bottom solid 2px transparent vertical-align middle display flex align-items baseline gap .2em a outline none &.open header border-color rgba(black,.3) .open .expandable opacity 1 max-height 4500px min-height 5em .lifts-status position relative .opening-date position absolute width 100% height 100% z-index 1 background-color rgba($background-color, .9) a position absolute top 50% margin-top -.6em font-size 1.2em width 100% text-align center .expandable transition all .4s ease max-height 0 overflow-y hidden opacity 0 .lifts list-style none margin .2em 0 .lift display block line-height 2 clearfix() .name float left max-width 90% cursor default ellipsis() .status font-size 1.1em float right text-shadow 1px 1px white padding-right 2px .auto-refresh-reminder color lighten($text-color, 30%) font-style italic text-align right font-size .8em padding-right 2px .ls-minimax:before content "\e031" // plus .open .ls-minimax:before content "\e032" // minus .ls-star:before content "\e036" // outline star .starred .ls-star:before content "\e035" // full star .resort-link font-size .9em .resort-name flex 1 ellipsis() .summary list-style none clearfix() font-size .8em li float left margin-right .5em &:last-child margin-right 0 [class^="ls-"], [class*=" ls-"], [class^="ls-"]:before, [class*=" ls-"]:before margin-right 2px [class^="ls-"]:before, [class*=" ls-"]:before text-shadow 1px 1px white .summary-color-bar clearfix() width 100% margin-bottom .5em .open, .hold, .scheduled, .closed height 2px float left .open background-color $green .hold background-color $yellow .scheduled background-color $blue .closed background-color $red .extras padding-bottom .7em .tile font-size .9em padding .5em 0 .tile border-bottom solid 2px rgba(black, .3) &:last-child padding-bottom 0 border-bottom none .notice margin-top .5em font-size .8em font-style italic display flex align-items center justify-content flex-end gap .5em .weather .weather-icon float left height 70px margin-top -10px .temperature float right font-size 1.5em .snow-conditions clear right float right font-size 1.1em margin-left 60px text-align right .snowforecast margin-left .5em font-weight bold .text clear both .notice img float none width 126px vertical-align bottom .webcams .swipe overflow hidden * touch-action pan-y !important .pager text-align center font-weight: bold; line-height 1.3 a margin 0 2px padding 0 .3em .active:before content '●' .inactive:before content '○' li list-style none display inline-block max-width $column-content-width vertical-align top .webcam max-width 100% display inline-block >a display block position relative overflow-x hidden img margin 0 auto user-select none pointer-events none &.active display block &.inactive display none .title margin-bottom .5em text-align center .snow .value display inline-block min-width 2em text-align right .deals padding-bottom 0 .deal clearfix() padding .4em 0 line-height 1.5 span float left a float right .resort .deal font-size .9em margin-bottom .5em padding .5em 0 border-bottom solid 2px rgba(black, .3) a float right .stats .pie margin 1em 0 width 294px height 294px border-radius 50% background-image conic-gradient( $green 0 var(--open), $yellow 0 var(--hold), $blue 0 var(--scheduled), $red 0 ) footer .summary li float none clear both line-height 2 text-align right width 55% margin 0 auto span:first-child float left span:first-child:before margin-right .5em span:last-child float right body > footer clear both margin-top 1em padding 0 .2em line-height 1 text-align center .text display inline margin-left .2em a margin 0 .2em span color #666666 transition color .3s ease &:hover span color black .ls-twitter color $twitter-color .ls-facebook color #3B5998 @import './about' @import './tags' contentWidth(n) return n == 1 ? $column-width : n * ($column-width + $column-gutter) maxContent(n) .content-{n} max-width contentWidth(n) .content clearfix() margin $column-gutter auto width contentWidth(7) .widget font-size .8em .panel width 100% margin 0 display block float none &.naked .panel background-color transparent padding 0 for col in 4 3 2 1 maxContent(col) $max = contentWidth(col + 1) $media_query = 'screen and (max-width:' + $max + ')' @media $media_query .content width contentWidth(col) if col == 1 .panel margin-right 0 margin-left 0 .tags margin 0 @media screen and (max-width: 720px) body > footer font-size 1.3em .text display none @media screen and (max-width: 400px) .extras &.desktop display none img display none &.mobile display block img display block @media screen and (min-width: 500px) .widget .lift float left margin-right 3% @media screen and (min-width: 500px) and (max-width: 749px) .widget .lift width 48.5% &:nth-child(2n) margin-right 0 @media screen and (min-width: 750px) and (max-width: 999px) .widget .lift width 31.333% &:nth-child(3n) margin-right 0 @media screen and (min-width: 1000px) .widget .lift width 22.75% &:nth-child(4n) margin-right 0