File: //home/madepabj/hc-cosmetics.com/wp-content/themes/dbea/assets/scss/theme/_post.scss
/***************************************************
scss file: /assets/scss/theme/_post.scss
+ Style for post
- Post in blog page
- Post in signle page
****************************************************/
article.type-product,
article.type-page,
article.type-post{
.inner-post{
@include clearfix();
.part-left{
float: left; width: 50%; padding: 0 15px 0 0;
@media(max-width: $screen-md-max){
padding: 0 10px 0 0;
}
}
.part-right{ float: left; width: 50%; padding: 0 0 0 15px;
@media(max-width: $screen-md-max){
padding: 0 0 0 10px;
}
}
@media(max-width: $screen-phone){
.part-left,
.part-right{
float: none; width: 100%; padding: 0 0;
}
}
}
// .post-info-inner,
.post-info-wrap{
margin: 0 0; padding: 0 0; @include clearfix();
.post-categories{ padding-left: 30px; position: relative; margin-bottom: 0px;
&:before{ position: absolute; content: ""; height: 1px; width: 20px; background: $gray;
left: 0px; top: 50%;
}
color: $low-color;
a{ color: inherit;
&:hover{ color: $color1; }
}
}
}
.gallery-thumb,
.video-thumb,
.audio-thumb,
.post-thumb,
.quote-info,
.link-info{
position: relative;
& + .post-info-wrap{
padding-top: 32px; padding-left: 50px; padding-right: 50px;
@media(max-width: $screen-md-max){ padding-left: 30px; padding-right: 30px; }
@media(max-width: $screen-xs-max){ padding-left: 10px; padding-right: 10px; }
}
}
.quote-info,
.link-info{
}
.video-thumb{
z-index: 1;
}
&:hover{
.gallery-thumb,
.video-thumb,
.audio-thumb,
.post-thumb,
.quote-info,
.link-info{
& + .post-meta{
@include opacity(1);
}
}
.gallery-thumb{
&:before{ @include opacity(1); }
.item{
&:before{ background: rgba(0,0,0,0.2); }
}
}
.video-thumb{
&:before{ @include opacity(1); }
}
.post-thumb{
&:before{ @include opacity(1); }
a{
&:before{ background: rgba(0,0,0,0.2); }
}
}
}
.gallery-thumb{
position: relative; overflow: hidden;
@include navslider2();
.item{
&:before{
position: absolute;content: ""; height: 100%; width: 100%; left: 0px; top: 0px; @include transition(all 0.25s ease-out); background: transparent;
}
}
}
.link-info{
padding: 80px 30px 80px; text-align: center; background: url(#{$base-url}/global.png) #f9f9f9 no-repeat -40px center; border: 1px solid $line-border-color;
@media(max-width: $screen-phone){ padding: 80px 30px; }
> a{
font-size: 1.5em; text-transform: uppercase; font-weight: bold; position: relative;
@media(max-width: $screen-md-max){
font-size: 1.7142em;
}
@media(max-width: $screen-xs-max){
font-size: 1.5em;
}
&:before{ position: absolute; content: ""; height: 2px; left: 0px; bottom: -2px; width: 100%; background: $link-color; }
&:hover{ color: $color1;
&:before{
background: $color1;
-webkit-animation: snsResetWidth 0.25s;
-ms-animation: snsResetWidth 0.25s;
-o-animation: snsResetWidth 0.25s;
animation: snsResetWidth 0.25s;
}
}
}
}
.quote-info{
padding: 120px 90px 60px; background: #f9f9f9; border: 1px solid $line-border-color; text-align: center; position: relative;
@media(max-width: $screen-phone){ padding: 80px 25px; }
&:before{ @include font-ionicons('\f347', 60px); font-size: 60px; position: absolute; top: 45px; left: calc(50% - 30px); text-align: center; color: $low-color;
@media(max-width: $screen-md-max){ font-size: 80px; top: 35px; left: 25px; }
@media(max-width: $screen-xs-max){ font-size: 60px; top: 10px; left: 10px; }
@media(max-width: $screen-phone){ left: 0px; top: 40px; }
}
.quote-content{
display: block; margin-bottom: 40px; position: relative; color: $link-color;
font-size: 1.7142em; font-style: italic; font-weight: bold; line-height: 1.42857;
@media(max-width: $screen-md-max){
font-size: 1.7142em;
}
@media(max-width: $screen-xs-max){
font-size: 1.5em;
}
}
.quote-author{
display: block; margin: 0px; padding: 0; position: relative; @include transition(all 0.25s ease-out); text-transform: uppercase; font-weight: bold; color: $low-color;
&:before{
position: absolute; content: ""; height: 20px; width: 1px; background: $low-color; left: 50%; top: -30px;
}
}
}
.post-thumb{
position: relative; overflow: hidden;
a{ display: inline-block; position: relative;
&:before{
position: absolute; z-index: 1; content: ""; height: 100%; width: 100%; left: 0px; top: 0px; @include transition(all 0.25s ease-out); background: transparent;
}
}
}
.video-responsive{
position: relative; padding-bottom: 56%;overflow: hidden; padding-top: 3px; height: 0;
embed,
iframe,
object,
video{
width: 100%; height: 100%;position: absolute; left: 0px; top: 0px;
}
}
.audio-responsive{
position: relative;padding-bottom: 54.5%;padding-top: 8px;height: 0;
embed,
iframe,
object,
audio{
width: 100%; height: 100%;position: absolute; left: 0px; top: 0px;
}
}
.media-post{ position: relative; }
h3.post-title{
margin: 0 0 10px; position: relative; font-size: 2.5em; line-height: 1.1; font-weight: bold;
@media(max-width: $screen-xs-max){
font-size: 2.2857em;
}
}
.post-content{
@include clearfix(); overflow-x: hidden;
> *:not(h1,h2,h3,h4,h5,h6) { margin-bottom: 18px;
& + .wp-block-columns{ margin-top: 18px; }
table{ margin-bottom: 0px; }
}
> [class^=" wp-block"],
> [class^="wp-block"] {
margin-bottom: 18px;
&.wp-block-image{ margin-bottom: 0px; }
&.wp-block-group.has-background{
padding: 30px; margin: 0;
p{
&:last-child{ margin-bottom: 0px; }
}
> .wp-block-group__inner-container > *:not(p,ul,ol){
margin-bottom: 18px;
}
}
&.wp-block-columns{
.wp-block-column{
> * {
&:last-child{ margin-bottom: 0px; }
}
}
}
select{
height: 40px; line-height: 40px; border-color: $line-border-color;
}
}
.has-drop-cap{
&:not(:focus){
&:first-letter{
font-size: 3em; font-weight: inherit; margin: .15em .15em 0 0;
}
}
}
.wp-block-quote{ padding-top: 10px;
> * { line-height: 1.42857; }
&.is-style-large{
padding: 5px 25px;
> *:not(cite){ margin-left: 48px; font-style: italic; font-size: 1.5em; }
cite{ font-size: 1em; text-align: inherit; }
&:after{ @include font-ionicons('\f347', 40px); font-size: 40px; color: $low-color; position: absolute; left: 20px; top: 5px; }
}
}
.wp-block-pullquote{
padding: 45px 0 0; margin-top: 30px; position: relative;
&:before{ @include font-ionicons('\f347', 40px); font-size: 40px; color: $low-color; position: absolute; left: calc( 50% - 20px); top: 0px; }
blockquote{
&:before{ display: none; }
cite{ color: $low-color; font-size: 1em; }
}
&.is-style-solid-color{
padding: 45px 0; margin-top: 0px;
&:before{ display: none; }
cite{ color: inherit; }
}
}
.wp-block-calendar{
caption{ text-align: inherit; color: $low-color; }
}
.wp-block-search {
.wp-block-search__input{
border-color: $base-border-color;
}
.wp-block-search__button{
padding: 0 25px; background: $link-color; color: #fff; line-height: 50px; border: none;
&:hover{
background: $color1;
}
}
}
.wp-block-tag-cloud{
a.tag-cloud-link{ text-decoration: underline; margin-left: 5px;
&:hover{ text-decoration: none; }
}
}
}
.page-links{ margin-top: 30px; margin-bottom: 15px; clear: left; font-weight: bold;
a{display: inline-block; padding: 0 3px; margin: 0 0 3px;}
}
.more-link{
text-transform: uppercase; color: $link-color; margin-top: 18px; display: inline-block; position: relative; font-weight: bold;
padding: 8px 15px; line-height: 24px; height:24px; @include transition(all 0.25s ease-out); background: none;
&:before{ position: absolute; content: ""; height: 25px; width: 25px; background: $color1; @include border-radius(100%);
left: 0px; top: 0px; z-index: -1; //@include transition(all 0.1s ease-out);
}
&:after{
@include font-ionicons('\f30f', 12px); width: 12px; margin-left: 6px; font-size: 16px; text-align: right;
}
&:hover{ color: #FFF; padding: 8px 15px; background: none;
&:before{
height: 100%; width: 100%; @include border-radius(4px);
}
}
.meta-nav{
display: none;
}
}
.post-meta{
display: block; margin: 0 0; @include transition(all 0.25s ease-out); @include opacity(1); visibility: visible; color: $low-color;
a{ position: relative; color: inherit;
&:hover{ color: $color1;}
}
> *{
margin: 0 15px 0 0; padding: 0 15px 0 0; position: relative; display: inline-block;
&:before{ position: absolute; content: ""; height: 12px; width: 1px; background: $gray;
right: 0px; top: calc(50% - 6px);
}
&:last-child{
margin: 0px; padding: 0;
&:before{ display: none; }
}
}
.edit-post{
.vc_inline-link{ margin-left: 8px;}
}
}
&.sticky{
.post-meta{
.sticky-content{ padding: 0 6px; text-transform: uppercase; color: #fff; background: $link-color; margin-top: 5px;
}
}
}
.post-content{ position: relative;
> *{
&:last-child{ margin-bottom: 0px; }
}
.more-link{ display: table; margin-top: 32px; }
}
.post-foot{
margin: 15px -15px 0; @include clearfix();
.tags-links{ float: left; position: relative;
a{
margin: 0 0; display: inline-block;
}
}
.post-share-block{
float: right; max-width: 300px; padding: 0 15px;
@media(max-width: $screen-phone){ max-width: 100%; width: 100%; }
// Override style
.ssbp-wrap,
.ssba-wrap{
> div{ float: right;
@media(max-width: $screen-phone){ float: left; }
}
br{ display: none; }
}
}
}
}
// Blog standard
.blog-standard{
> article{
margin-bottom: 65px; min-height: 110px; @include clearfix();
.post-content{ margin-top: 25px; }
}
}
// Blog layout2
.blog-layout2{
> article{
margin-bottom: 60px;
&:last-child{ margin-bottom: 100px; }
h3.post-title{
font-size: 1.5em;
}
.quote-info{
padding: 30px 20px;
&:before{ @include font-ionicons('\f347', 60px); font-size: 60px; position: absolute; top: 20px; left: 20px; text-align: center; color: $line-border-color; }
.quote-content{
font-size: 1.2857em;
}
}
.link-info{
padding: 100px 0;
a{
font-size: 1.2857em;
}
}
}
}
// Blog Masonry
.sns-blog-masonry{
@include opacity(0);
&.actived{ @include opacity(1); }
}
.sns-grid-masonry{
margin: 0 -15px 60px;
@media(max-width: $screen-md-min){
margin-left: -($sns-wgutter-md / 2); margin-right: -($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
margin-left: -($sns-wgutter-xs / 2); margin-right: -($sns-wgutter-xs / 2);
}
article{
margin-bottom: 35px;
h3.post-title{
margin-bottom: 0px; font-size: 1em; line-height: 1.42857; font-size: 1.2857em; font-weight: bold;
}
.gallery-thumb,
.video-thumb,
.audio-thumb,
.post-thumb,
.quote-info,
.link-info{
position: relative; margin-bottom: 0px;
.post-cat{
background: #c17262;
padding: 3px 10px;
text-transform: uppercase;
color: #fff;
font-size: 0.8571em;
position: absolute;
left: 0px;
bottom: 0px;
z-index: 2;
}
}
.quote-info,
.link-info{
}
.post-content .more-link{ margin-top: 15px; }
.quote-info{
padding: 50px 35px 50px;
@media(max-width: $screen-phone){ padding: 50px 0; }
&:before{ @include font-ionicons('\f347', 50px); font-size: 50px; position: absolute; top: 35px; left: 20px; text-align: center; color: $line-border-color; }
.quote-content{
font-size: 1.4285em;
}
}
.link-info{
padding: 60px 0 60px;
@media(max-width: $screen-phone){ padding: 60px 0; }
a{
font-size: 1.2857em;
}
}
.post-meta{ margin-bottom: 11px; }
.post-content{ margin-top: 10px; }
}
.sns-grid-item{
width: calc(100% / 3);
padding-right: 15px;
padding-left: 15px;
overflow: hidden;
@media(max-width: $screen-md-min){
width: 50%; padding-left: ($sns-wgutter-md / 2); padding-right: ($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
padding-left: ($sns-wgutter-xs / 2); padding-right: ($sns-wgutter-xs / 2);
}
@media(max-width: $screen-phone){
width: 100%;
}
body.layout-type-l-m-r & ,
body.layout-type-m-r & ,
body.layout-type-l-m & {
width: 50%;
@media(max-width: $screen-phone){
width: 100%;
}
}
}
& + .navigation{
margin-top: 10px;
}
}
// Single post
.single{
article.post{ margin: 0 0 100px;
h1.post-title{
position: relative; font-size: 3em; font-weight: bold; line-height: 1.1; margin: 0 0 12px;
@media(max-width: $screen-md-max){
font-size: 2.2857em;
}
@media(max-width: $screen-xs-max){
font-size: 1.7142em;
}
}
.post-meta{
}
.post-content{ margin-top: 35px; margin-bottom: 38px; }
.post-info-inner{ padding-top: 10px; position: relative; }
.quote-info{
}
.link-info{
}
.post-thumb,
.gallery-thumb{
&:before{ display: none; }
}
.content-inner{
}
.post-foot{ margin: 0 0; padding: 0 0 25px 0;
& + .post-navigation{ }
.left-part{ float: left; width: calc(100% - 60px);
}
.post-share-block{
float: right; max-width: 300px; padding: 0 0; display: inline-flex;
position: relative; width: 36px; height: 36px;
right: 0px; margin: 5px 0;
&:before{
@include font-ionicons('\f3ac', 36px); font-size: 16px; line-height: 36px; position: absolute; top: 0px; left: 0px;color: #FFF; cursor: pointer;
background: $button-bg-color; @include transition(0.25s ease-out); @include border-radius(4px);
}
.ssbp-wrap,
.ssba-wrap{
a.ssba_share_link{ line-height:36px !important; height:36px !important; width:36px !important; background: #f9f9f9; margin: 1.5px 0;
border: 1px solid $line-border-color; @include border-radius(4px);
&:hover{ background: #FFF; border-color: $gray;
}
}
}
&:hover{
&:before{ background: $color1; }
}
.ssba-share-text{ display: none !important; }
> *{
@include opacity(0); visibility: hidden; position: absolute; bottom: 66px; left: 0px; margin: 0; @include transition(0.25s ease-out); padding-bottom: 1.5px;
}
&:hover{
> *{ @include opacity(1); visibility: visible; bottom: 36px;
}
}
}
.tags-links{
display: block; width: 100%; padding: 0 15px 0 0;
.label{ color: $link-color !important; font-size: 1em; padding: 0; margin-right: 5px; text-transform: uppercase; font-weight: bold;
position: relative; top: 1px;
& + a {
&:before{ display: none; }
}
}
a{
display: inline-block; @include transition(all 0.25s ease-out 0s); position:relative; border: 1px solid $base-border-color; @include border-radius(4px);
height: 36px; line-height: 36px; padding: 0 12px; background: #f9f9f9; margin: 5px;
&:first-child{
&:before{ display: none; }
}
&:hover{
background: $color1; border-color: $color1; color: #FFF;
}
}
}
}
.author-info{
padding: 0; margin: 90px 0 0; @include clearfix();
.bio-title{
margin: 0 0 53px; font-size: 1.2857em; font-weight: bold; text-transform: uppercase; color: $link-color; text-align: center; line-height: 1.1; position: relative;
&:before{ position: absolute; content: ""; height: 1px; width: 120px; left: calc(50% - 60px); bottom: -17px; background: $color; }
&:after{ position: absolute; content: ""; height: 1px; width: 80px; left: calc(50% - 40px); bottom: -23px; background: $color; }
}
.content{
padding: 30px; border: 1px solid $line-border-color; background: #f7f7f7; @include border-radius(8px); @include clearfix();
}
.author-description{ position: relative; top: 15px;
@media(max-width: $screen-md-max){ top: 1px; }
}
.author-title{
margin: -3px 0 5px; font-size: 1em; color: $color; font-weight: bold; text-transform: uppercase;
> span{ margin-right: 5px; }
a{ color: $link-color;
&:hover{ color: $color1; }
}
}
p.author-bio{ margin-bottom: 0;}
.author-avatar{
float: left; margin: 0 20px 0 0; overflow: hidden; @include border-radius(8px);
@media(max-width: $screen-xs-max){
margin-right: 15px;
}
@media(max-width: $screen-phone){
max-width: 90px;
}
}
.author-desc{
display: block;
}
}
.post-related{
position: relative; margin: 83px 0 0;
@include owl-nav1();
.owl-nav{ @include opacity(0); @include transition(0.25s ease-out);
}
h2.related-title{
margin: 0 0 31px; font-size: 1.71428em; font-weight: bold; text-transform: uppercase; color: $link-color; line-height: 1.1; position: relative;
@media (max-width: $screen-phone){ font-size: 1.5em; }
}
.related-content{ margin: 0 -15px;
@media(max-width: $screen-md-max){
margin: 0 -($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
margin: 0 -($sns-wgutter-xs / 2);
}
}
.item{ padding: 0 15px;
@media(max-width: $screen-md-max){
padding: 0 ($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
padding: 0 ($sns-wgutter-xs / 2);
}
.image{
display: block; max-width: 100%; position: relative; margin-bottom: 15px;
&:before{
content: ""; position: absolute; background: rgba(0, 0, 0, 0.1);width: 100%; height: 100%; z-index: 1;
@include opacity(0); @include transition(0.25s ease-out);
}
}
.title{
margin: 8px 0 0; font-size: 1.1428em;
}
.post-meta{ margin: 0;
@media(max-width: $screen-md-max){
.post-cat{ margin-left: 0; }
}
}
&:hover{
.image{
&:before{
@include opacity(1);
}
}
}
}
&:hover{
.owl-nav{ @include opacity(1); }
}
}
.post-navigation{
@include clearfix(); margin: 0 0; padding: 30px 0 30px; width: 100%; position: relative;
border-top: 1px solid $line-border-color; border-bottom: 1px solid $line-border-color;
&:before{ position: absolute; content: ""; height: 40px; width: 1px; background: $base-border-color; top: calc(50% - 20px); left: 50%; }
h2{ display: none; }
.nav-next,
.nav-previous{
float: left; text-align: left; padding: 0 0 0 50px; width: calc(50% - 30px); margin: 0 25px 0 0; position: relative; overflow: hidden;
min-height: 60px;
@media(max-width: $screen-phone){ min-height: 45px; }
.nav-post-link{
margin: 3px 0 0; display: inline-block; text-transform: uppercase;
@media(max-width: $screen-phone){ margin: 10px 0; }
a{ color: $low-color;
&:before{
content: ""; height: 60px; width: 30px; @include border-radius(4px); background: $button-bg-color; position: absolute; left: 0px; top: 0px;
@media(max-width: $screen-phone){ height: 45px; }
}
&:after{ @include font-ionicons('\f124', 14px); width: 14px; font-size: 14px; text-align: center; margin: 0 0; color: #FFF;
@include transition(all 0.25s ease-out); position: absolute; top: calc(50% - 7px); left: 8px; @include border-radius(100%);
}
&:hover{ color: $color1;
&:after{
color: #FFF;
}
&:before{ background: $color1; }
}
}
.screen-reader-text{ text-transform: uppercase;}
}
.nav-post-title{ font-weight: bold; font-size: 1.1428em; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
@media(max-width: $screen-phone){
display: none;
}
}
}
.nav-next{
float: right; text-align: right; padding: 0 50px 0 0; margin: 0 0 0 25px;
.nav-post-link{
a{
&:before{ left: auto; right: 0; }
&:after{
@include font-ionicons('\f125', 14px); width: 14px; left: auto; right: 8px;
}
}
}
}
}
}
}
.archive,
.blog{
.format-status,
.format-aside{
.post-title{ display: none;}
}
}
article.type-attachment{ margin: 0 0 100px;
h1.post-title{
margin: 0 0 20px; position: relative; font-size: 3em; font-weight: bold; line-height: 1.1;
@media(max-width: $screen-md-max){
font-size: 2.5em;
}
@media(max-width: $screen-xs-max){
font-size: 2.2857em;
}
@media(max-width: $screen-phone){
margin-bottom: 18px;
}
}
.more-link{
.meta-nav{
display: none;
}
}
.post-meta{
display: block; margin: -5px 0 11px; @include transition(all 0.25s ease-out); @include opacity(1); visibility: visible; color: $low-color;
a{ position: relative; font-weight: bold;
}
> *{
margin: 0 15px 0 0 ; padding: 0 15px 0 0 ; position: relative; display: inline-block;
&:before{ position: absolute; content: ""; height: 12px; width: 1px; background: $base-border-color;
right: 0px; top: calc(50% - 6px);
}
&:last-child{
margin: 0px; padding: 0;
&:before{ display: none; }
}
}
}
.entry-attachment{ margin-top: 35px; text-align: center; }
.entry-caption{
margin: 5px 0 15px; text-align: center; font-size: 0.8571em; color: $low-color;
}
.image-navigation{
@include clearfix(); margin: 50px 0 0; width: 100%; padding: 0 0; position: relative;
h2{ display: none; }
.nav-next,
.nav-previous{
float: left; text-align: left; padding: 0 0 0 45px; width: calc(50% - 60px); min-height: 30px; margin: 0 30px 0 0; position: relative;
@media(max-width: $screen-md-max){
width: calc(50% - 15px); margin: 0 15px 0 0;
}
@media(max-width: $screen-phone){ min-height: auto; }
a{
&:before{
@include font-ionicons('\f124', 30px); width: 30px; font-size: 14px; text-align: center; margin: 0 0; color: #FFF; background: $link-color;
border: none; @include transition(all 0.25s ease-out); position: absolute; top: -2px; left: 0px;
@media(max-width: $screen-phone){ height: 30px; line-height: 30px; }
}
&:hover{ color: $color1;
&:before{
border-color: $color1; background-color: $color1; color: #FFF;
}
}
}
}
.nav-next{
float: right; text-align: right; padding: 0 45px 0 0; margin: 0 0 0 30px;
@media(max-width: $screen-md-max){
margin: 0 0 0 15px;
}
a{
&:before{
@include font-ionicons('\f125', 30px); width: 30px; font-size: 14px; text-align: center; margin: 0 0; color: #FFF; background: $link-color;
border: none; @include transition(all 0.25s ease-out); position: absolute; left: 0px; left: auto; right: 0px;
@media(max-width: $screen-phone){ height: 30px; line-height: 30px; }
}
}
}
}
}
.page.type-page{
.page-links{ margin-top: 20px; margin-bottom: 15px; clear: left; font-weight: bold;
a{display: inline-block; padding: 0 3px; margin: 0 0 3px;}
}
}
body{
&.layout-type-m-r:not(.no-rightcol) {
.sns-content {
> .sns-main{
@media(min-width: $screen-md-max){
padding-right: 60px;
}
}
> .sns-right{
}
}
}
&.layout-type-l-m:not(.no-leftcol) {
.sns-content {
> .sns-main{
@media(min-width: $screen-md-max){ padding-left: 60px; }
}
> .sns-left{
}
}
}
}