643 lines
12 KiB
SCSS
643 lines
12 KiB
SCSS
/*-----------------------------------------------------------------------------------*/
|
|
/* 8.0 Blog Posts
|
|
/*-----------------------------------------------------------------------------------*/
|
|
.entry-thumbnail a {
|
|
max-height: 900px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.single-post .format-video .entry-thumbnail a:before,
|
|
.featured-slider .entry-date:before {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.entry-thumbnail a {
|
|
position: relative;
|
|
line-height: 0;
|
|
display: block;
|
|
}
|
|
|
|
|
|
.format-video .entry-thumbnail {
|
|
position: relative;
|
|
a:before {
|
|
content: '\25b6';
|
|
position: absolute;
|
|
display: block;
|
|
width: 40px;
|
|
height: 28px;
|
|
padding: 15px 0 0 16px;
|
|
font-size: 12px;
|
|
color: #1a1a1a;
|
|
background: #fff;
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-moz-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
-o-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
#front-section-twocolumn .format-video .entry-thumbnail a:before,
|
|
#front-section-threecolumn .format-video .entry-thumbnail a:before,
|
|
.section-one-column-one .format-video .entry-thumbnail a:before,
|
|
.blog #primary .hentry.format-video:nth-child(4n+1) .entry-thumbnail a:before,
|
|
.section-two-column-one .format-video .entry-thumbnail a:before {
|
|
width: 60px;
|
|
height: 42px;
|
|
padding: 22px 0 0 24px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.blog #primary .hentry.format-video:nth-child(4n+1) .entry-thumbnail a:before,
|
|
#front-section-four .format-video .entry-thumbnail a:before {
|
|
top: 30px;
|
|
left: 5.3125%;
|
|
-webkit-transform: translate(0, 0);
|
|
-moz-transform: translate(0, 0);
|
|
-ms-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
.featured-slider .format-video .entry-thumbnail a:before {
|
|
display: none;
|
|
}
|
|
|
|
.sticky {}
|
|
|
|
|
|
/* -- Attachment -- */
|
|
.attachment {
|
|
.entry-header {
|
|
.entry-meta {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* --- Single Post --- */
|
|
|
|
.singlepost-wrap,
|
|
.recommended-posts-wrap {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.single-post {
|
|
.hentry {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
.entry-header {
|
|
display: block;
|
|
margin: 0 0 35px;
|
|
padding: 25px 0 0;
|
|
}
|
|
}
|
|
|
|
/* --- Single Post - Header --- */
|
|
.single-attachment .entry-header {
|
|
display: block;
|
|
margin: 0 0 35px;
|
|
padding: 25px 0 0;
|
|
padding-top: 40px;
|
|
}
|
|
|
|
.single-post {
|
|
.entry-header {
|
|
|
|
h1.entry-title {
|
|
position: relative;
|
|
display: block;
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
.hentry .entry-meta {
|
|
display: block;
|
|
margin-top: 20px;
|
|
padding-top: 15px;
|
|
border-top: 3px solid #1a1a1a;
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
.single-attachment .entry-meta {
|
|
display: block;
|
|
margin-top: 20px;
|
|
padding-top: 15px;
|
|
border-top: 3px solid #1a1a1a;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.entry-header p.intro {
|
|
display: none;
|
|
margin: 0;
|
|
padding: 10px 0 0;
|
|
}
|
|
|
|
.meta-columnone {
|
|
width: 60%;
|
|
float: left;
|
|
}
|
|
|
|
.meta-columntwo, .meta-columthree {
|
|
width: 40%;
|
|
float: left;
|
|
}
|
|
|
|
.single-post .entry-comments-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.author-pic {
|
|
width: 35px;
|
|
float: left;
|
|
margin: 0 10px 0 0;
|
|
display: block;
|
|
line-height: 0;
|
|
img {
|
|
width: 35px;
|
|
height: 35px;
|
|
-moz-border-radius: 50px;
|
|
-webkit-border-radius: 50px;
|
|
border-radius: 50px;
|
|
}
|
|
}
|
|
|
|
.single-post {
|
|
.entry-author,
|
|
.entry-tags span {
|
|
font-weight: 600;
|
|
}
|
|
.entry-thumbnail {
|
|
padding-bottom: 35px;
|
|
}
|
|
|
|
.canonical-link {
|
|
padding: 5px 0 0 0;
|
|
letter-spacing: 1px;
|
|
span {
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
span:after {
|
|
content: '\2022';
|
|
padding: 0 7px;
|
|
}
|
|
}
|
|
.entry-tags {
|
|
padding: 30px 0 0 0;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
span:after {
|
|
content: '\2022';
|
|
padding: 0 7px;
|
|
}
|
|
}
|
|
.authorbox {
|
|
position: relative;
|
|
margin: 40px 0 0 0;
|
|
padding: 30px 0 0 0;
|
|
clear: both;
|
|
border-top: 1px solid #1a1a1a;
|
|
}
|
|
}
|
|
.big-thumb {
|
|
.entry-thumbnail {
|
|
margin-left: -5.94405594405594%;
|
|
/* 17px at 320px --- */
|
|
margin-right: -5.94405594405594%;
|
|
padding-bottom: 35px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.entry-meta {
|
|
margin-top: 0;
|
|
}
|
|
.entry-header {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
.title-wrap {
|
|
bottom: 88px;
|
|
width: 111.88811188811188%;
|
|
margin-left: -5.94405594405594%;
|
|
/* 17px at 320px --- */
|
|
margin-right: -5.94405594405594%;
|
|
padding-bottom: 17px;
|
|
.entry-cats {
|
|
padding-left: 5.3125%;
|
|
padding-right: 5.3125%;
|
|
}
|
|
}
|
|
.entry-header {
|
|
h1.entry-title, p.intro {
|
|
padding-left: 5.3125%;
|
|
padding-right: 5.3125%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.authorbox {
|
|
.author-pic {
|
|
width: 40px;
|
|
height: 40px;
|
|
float: left;
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
.author-heading {
|
|
padding: 0 0 0 60px;
|
|
}
|
|
h3.author-title {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
span {
|
|
padding: 0 5px 0 0;
|
|
display: inline-block;
|
|
font-style: normal;
|
|
}
|
|
&:after {
|
|
content: ':';
|
|
padding-left: 1px;
|
|
}
|
|
}
|
|
p.author-bio {
|
|
margin: 0;
|
|
padding: 15px 0 0 60px;
|
|
}
|
|
.author-links {
|
|
padding: 16px 0 0 60px;
|
|
}
|
|
}
|
|
|
|
.author-links a {
|
|
&.author-website {
|
|
position: relative;
|
|
padding: 0 0 0 20px;
|
|
display: block;
|
|
}
|
|
&.author-twitter {
|
|
position: relative;
|
|
display: block;
|
|
margin: 4px 0 0 0;
|
|
padding: 0 0 0 18px;
|
|
}
|
|
&.author-website:before,
|
|
&.author-twitter:before {
|
|
display: block;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: -4px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.single-post .hentry .entry-meta,
|
|
.single-attachment .entry-meta {
|
|
border-top: none !important;
|
|
}
|
|
|
|
|
|
article {
|
|
header {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (min-width:$breakpoint-sm) {
|
|
/* --- Single Post --- */
|
|
.single-post {
|
|
.entry-header {
|
|
margin: 0 0 20px;
|
|
padding: 25px 0 0;
|
|
.big-thumb & {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.entry-tags {
|
|
padding: 30px 0 0 0;
|
|
}
|
|
|
|
// .entry-thumbnail {
|
|
// padding-bottom: 53px;
|
|
// }
|
|
.big-thumb .entry-thumbnail {
|
|
padding-bottom: 60px;
|
|
margin-left: -7.14285714285714%;
|
|
/* 90px at 1440px */
|
|
margin-right: -7.14285714285714%;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
}
|
|
|
|
.big-thumb {
|
|
.title-wrap {
|
|
margin-left: -7.14285714285714%;
|
|
/* 90px at 1440px */
|
|
margin-right: -7.14285714285714%;
|
|
bottom: 128px;
|
|
padding-bottom: 35px;
|
|
width: 114.28571428571428%;
|
|
.entry-cats {
|
|
padding-left: 6.25%;
|
|
padding-right: 6.25%;
|
|
}
|
|
h1.entry-title, p.intro {
|
|
padding-left: 6.25%;
|
|
padding-right: 6.25%;
|
|
}
|
|
}
|
|
}
|
|
.meta-columnone {
|
|
display: block;
|
|
width: 320px;
|
|
}
|
|
.meta-columntwo {
|
|
display: block;
|
|
width: 320px;
|
|
width: 200px;
|
|
}
|
|
|
|
.author-pic {
|
|
width: 50px;
|
|
|
|
img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.authorbox & {
|
|
width: 70px;
|
|
height: 70px;
|
|
img {
|
|
width: 70px;
|
|
height: 70px;
|
|
}
|
|
}
|
|
|
|
}
|
|
.authorbox {
|
|
.author-heading,
|
|
p.author-bio,
|
|
.author-links {
|
|
padding-left: 90px;
|
|
}
|
|
}
|
|
.author-links a {
|
|
&.author-website {
|
|
display: inline-block;
|
|
margin: 0 30px 0 0;
|
|
}
|
|
&.author-twitter {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (min-width: $breakpoint-1060) {
|
|
.single-post.no-sidebar {
|
|
.contentwrap {
|
|
width: 100%;
|
|
max-width: 1260px;
|
|
float: none;
|
|
margin-left: 0;
|
|
}
|
|
.entry-content,
|
|
.entry-footer,
|
|
#comments {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 80%;
|
|
}
|
|
.entry-content .wide-content {
|
|
margin-left: -12.5%;
|
|
margin-right: -12.5%;
|
|
}
|
|
}
|
|
.big-thumb .entry-header p.intro {
|
|
font-size: 26px;
|
|
font-size: 1.625rem;
|
|
}
|
|
|
|
.entry-meta,
|
|
.entry-cats,
|
|
.search-results a.post-edit-link,
|
|
.archive a.post-edit-link {
|
|
font-size: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: normal;
|
|
}
|
|
/* --- Single Post --- */
|
|
.singlepost-wrap {
|
|
margin-top: 0;
|
|
}
|
|
.single-post .contentwrap,
|
|
.single-attachment .contentwrap {
|
|
width: 65.87301587301587%;
|
|
float: left;
|
|
}
|
|
.single-post #colophon,
|
|
.single-attachment #colophon {
|
|
margin-top: 80px;
|
|
}
|
|
.entry-header p.intro {
|
|
display: block;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (min-width: 85em) {
|
|
.single-post #primary .hentry.has-post-thumbnail:nth-child(4n+1) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.big-thumb .title-wrap {
|
|
width: 114.28571428571428%;
|
|
}
|
|
.single-post {
|
|
.entry-content {
|
|
margin-top: -8px;
|
|
}
|
|
&.no-sidebar {
|
|
.contentwrap {
|
|
width: 100%;
|
|
float: none;
|
|
margin-left: 0;
|
|
}
|
|
.entry-content,
|
|
.entry-footer,
|
|
#comments {
|
|
width: 70%;
|
|
margin-left: 100px;
|
|
margin-right: auto;
|
|
}
|
|
.entry-content .wide-content {
|
|
margin-left: 0;
|
|
margin-right: -31.5%;
|
|
}
|
|
}
|
|
#socialicons-sticky {
|
|
position: relative;
|
|
}
|
|
.sharedaddy .sd-social-icon {
|
|
display: block;
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 0;
|
|
z-index: 10000;
|
|
}
|
|
.sd-social-icon .sd-content ul {
|
|
li {
|
|
display: block;
|
|
}
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (min-width: 112.5em) {
|
|
.singlepost-wrap,
|
|
.recommended-posts-wrap {
|
|
width: 70%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.big-instagram-wrap {
|
|
width: 70%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.big-thumb {
|
|
.title-wrap .entry-cats {
|
|
padding-left: 15%;
|
|
padding-right: 15%;
|
|
}
|
|
.entry-header {
|
|
h1.entry-title, p.intro {
|
|
padding-left: 15%;
|
|
padding-right: 15%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.single-post .big-thumb {
|
|
.entry-thumbnail {
|
|
width: 142.85714285714286%;
|
|
margin-left: -21.42857142857143%;
|
|
}
|
|
.title-wrap {
|
|
width: 142.85714285714286%;
|
|
margin-left: -21.42857142857143%;
|
|
margin-right: -21.42857142857143%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Minimum width of 2200 pixels (larger desktop screens)
|
|
------------------------------------------------------------------------------------ */
|
|
@media screen and (min-width: 137.5em) {
|
|
/* --- General --- */
|
|
|
|
.singlepost-wrap,
|
|
.recommended-posts-wrap {
|
|
width: 56%;
|
|
}
|
|
|
|
.big-instagram-wrap {
|
|
width: 56%;
|
|
}
|
|
|
|
.big-thumb {
|
|
.title-wrap .entry-cats {
|
|
padding-left: 22%;
|
|
padding-right: 22%;
|
|
}
|
|
.entry-header {
|
|
h1.entry-title, p.intro {
|
|
padding-left: 22%;
|
|
padding-right: 22%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.single-post .big-thumb {
|
|
.entry-thumbnail {
|
|
width: 178.86178861788618%;
|
|
margin-left: -39.43089430894309%;
|
|
}
|
|
.title-wrap {
|
|
width: 178.86178861788618%;
|
|
margin-left: -39.43089430894309%;
|
|
margin-right: -39.43089430894309%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* --- Image Overlays, if text on image (Customizable im Theme Options) --- */
|
|
|
|
.blog #primary .hentry.has-post-thumbnail:nth-child(4n+1) .entry-thumbnail a:after,
|
|
.featured-slider .entry-thumbnail a:after,
|
|
.single-post .big-thumb .entry-thumbnail a:after,
|
|
.header-image:after, #front-section-four .entry-thumbnail a:after {
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
content: "";
|
|
}
|
|
|
|
|
|
.blog #primary .hentry.has-post-thumbnail:nth-child(4n+1) .entry-thumbnail a:after,
|
|
.featured-slider .entry-thumbnail a:after,
|
|
.single-post .big-thumb .entry-thumbnail a:after, .header-image:after {
|
|
background-color: #000000;
|
|
opacity: 0;
|
|
}
|
|
|
|
#front-section-four .meta-main-wrap,
|
|
.featured-slider .meta-main-wrap,
|
|
.blog #primary .hentry.has-post-thumbnail:nth-child(4n+1) .meta-main-wrap {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 20;
|
|
}
|
|
|
|
.big-thumb .title-wrap {
|
|
position: absolute;
|
|
}
|
|
|
|
#front-section-four .meta-main-wrap, .featured-slider .meta-main-wrap,
|
|
.blog #primary .hentry.has-post-thumbnail:nth-child(4n+1) .meta-main-wrap, .big-thumb .title-wrap {
|
|
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
|
|
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
|
|
}
|
|
|
|
|