/*-----------------------------------------------------------------------------------*/ /* Featured Slider + Custom Header Image /*-----------------------------------------------------------------------------------*/ .featured-content { .no-js & { display: none; } padding-bottom: 35px; } .header-image { display: block; line-height: 0; margin-bottom: 35px; img { width: 100%; } } .slider-on.slider-boxed .featured-content { padding-top: 20px; } .headerimg-on { &.slider-on.slider-boxed .featured-content { padding-top: 0 !important; } &.header-boxed .header-image { margin-top: 20px; } } .slider-on.slider-boxed .featured-slider { .entry-header, .entry-meta, .credits { padding-left: 17px; padding-right: 17px; } } .featured-slider { visibility: hidden; overflow: hidden; position: relative; padding-bottom: 35px; article header { margin-bottom: 0px; } .meta-main-wrap { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 17px; } .entry-author { display: none; } .entry-edit { margin-left: 20px; } button { &.slick-next { position: absolute; bottom: 0; width: 50%; height: 35px; background: transparent; outline: 0; border-top: none; border-left: none; border-bottom: 1px solid #ddd; text-indent: -99999px; } &.slick-prev { position: absolute; bottom: 0; width: 50%; height: 35px; background: transparent; outline: 0; border-top: none; border-left: none; border-bottom: 1px solid #ddd; text-indent: -99999px; left: 0; border-right: 1px solid #ddd; } &.slick-next { right: 0; border-right: none; } } .entry-header, .entry-meta, .credits { padding-left: 5.3125%; /* 17px at 320px */ padding-right: 5.3125%; /* 17px at 320px */ } .entry-edit, .entry-cats a:before { display: none; } .entry-date { padding-right: 20px; &::before { display: none; } } .entry-thumbnail img { position: relative; width: 100%; } .credits { @include px2rem($font-size-small); color: $color-slider-credits; text-shadow: 1px 2px 2px black; position: absolute; bottom: 0px; text-align: right; width: 100%; } } .slick-initialized { visibility: visible !important; } .slick-slide { position: relative; } .section-one-column-one { .entry-author, .entry-date:before { display: none; } } .slider-on.slider-boxed .featured-slider button { &.slick-prev { border-left: 1px solid #ddd; } &.slick-next { border-right: 1px solid #ddd; } } .featured-slider button { &.slick-prev:after, &.slick-next:after { position: absolute; display: block; @extend .fa; text-indent: 0; color: $color-text; bottom: 13px; } &.slick-prev:after { left: 47%; content: $fa-var-chevron-left; } &.slick-next:after { right: 47%; content: $fa-var-chevron-right; } } /* --- Fullscreen Slider and Header Image Option --- */ .slider-on.slider-fullscreen .featured-content, .headerimg-on.header-fullscreen .featured-content { padding-top: 0; } .home.blog { &.slider-on.slider-fullscreen #site-branding, &.headerimg-on.header-fullscreen #site-branding { background: none; border-bottom: none; } } .home.blog { &.slider-on.slider-fullscreen #site-branding { position: absolute; } } .slider-on.slider-boxed .featured-content { padding-left: 5.3125%; /* 17px at 320px */ padding-right: 5.3125%; /* 17px at 320px */ } .featured-slider .entry-thumbnail a { width: 130%; } .slider-on .front-section:first-of-type { padding-top: 0; } @media screen and (min-width: $breakpoint-600) { .featured-slider .entry-edit { display: inline-block; } .featured-slider .format-video .entry-thumbnail a:before { width: 60px; height: 42px; padding: 22px 0 0 24px; } } @media screen and (min-width: $breakpoint-sm) { .featured-slider { padding-bottom: 0; .entry-header h2.entry-title { @include px2rem($font-size-slider-title-sm); a { text-shadow: 1px 2px 2px black; } } .credits { bottom: 10px; text-align: left; } .meta-main-wrap { padding-bottom: 35px; } button { &.slick-next, &.slick-prev { position: absolute; bottom: 0; outline: 0; border-top: none; border-left: none; border-bottom: none; text-indent: -99999px; z-index: 1; background: rgba(26, 26, 26, 0.75); width: 50px; height: 50px; } &.slick-next:focus, &.slick-next:hover { background: rgba(26, 26, 26, 1); } &.slick-prev { &:focus, &:hover { background: rgba(26, 26, 26, 1); } left: auto; right: 50px; border-right: none; } &.slick-next { right: 0; } &.slick-prev:after, &.slick-next:after { color: #fff; position: absolute; bottom: 0; } &.slick-prev:after { left: 13px; bottom: 13px; } &.slick-next:after { right: 13px; bottom: 13px; } } } .slider-on.slider-boxed .featured-slider button { &.slick-prev, &.slick-next { border: none; } } .slider-on.slider-boxed .featured-slider { .entry-header, .entry-meta { padding-left: 40px; padding-right: 40px; } } .slider-on .featured-slider .entry-thumbnail a{ max-height: 400px; overflow: hidden; } } @media screen and (min-width: $breakpoint-1024) { .featured-slider .entry-thumbnail a { width: 100%; } .slider-on .featured-slider .entry-thumbnail a{ max-height: 700px; overflow: hidden; } } @media screen and (min-width: $breakpoint-1060) { .blog { &.slider-on #masthead { margin-bottom: 0; border-bottom: none; } } .slider-on.slider-boxed #masthead { border-bottom: 1px solid #ddd !important; } .featured-slider { article header { margin-bottom: 20px; } .entry-header, .entry-meta, .credits { padding-left: 0; padding-right: 0; width: 57.63888888888889%; /* -- 830px at 1440px ---*/ margin-left: 6.25%; } .entry-header h2.entry-title { @include px2rem($font-size-slider-title-1060); padding-top: 10px; } .format-video .entry-thumbnail a:before { left: 6.25%; top: 40px; } .entry-date:before { content: ' / '; padding: 0 2px; display: inline-block; .no-author & { display: none; } } .entry-meta { padding-top: 20px; } .entry-author { display: inline-block; } } .slider-on.slider-boxed .featured-content { padding-left: 0; padding-right: 0; margin-left: 6.25%; margin-right: 6.25%; padding-top: 30px; width: 87.5%; } .slider-on.slider-boxed .featured-slider { .entry-header, .entry-meta { margin-left: 0; } } } @media screen and (min-width: 85em) { .featured-slider .entry-header h2.entry-title { @include px2rem($font-size-slider-title-lg); } .slider-on .featured-slider .entry-thumbnail a{ max-height: 900px; overflow: hidden; } } @media screen and (min-width: 112.5em) { .slider-on.slider-boxed .featured-content { width: 70%; margin-left: auto; margin-right: auto; } .featured-slider { .entry-header, .entry-meta, .credits { width: 70%; margin-left: auto; margin-right: auto; } } } @media screen and (min-width: 137.5em) { .slider-on.slider-boxed .featured-content { width: 56%; } .featured-slider { .entry-header, .entry-meta, .credits { width: 56%; } } }