433 lines
7.9 KiB
SCSS
433 lines
7.9 KiB
SCSS
/*-----------------------------------------------------------------------------------*/
|
|
/* 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%;
|
|
}
|
|
}
|
|
} |