File: /www/wwwroot/www.cytocare.cn/wp-content/themes/peakshops/assets/sass/blog/_posts.scss
.post {
margin-bottom: 30px;
@include min-break($break-small) {
margin-bottom: 40px;
}
.post-gallery {
position: relative;
margin-bottom: 25px;
>a {
display: block;
line-height: 0;
}
.post-category {
display: block;
font-size: 11px;
font-weight: 600;
text-align: left;
text-transform: uppercase;
position: absolute;
top: 20px;
left: 20px;
max-width: calc(70% - 20px);
.rtl & {
left: auto;
right: 20px;
text-align: right;
}
a {
display: inline-flex;
justify-content: center;
align-items: center;
background: rgba(#000, 0.3);
padding: 0 6px;
margin-bottom: 3px;
height: 18px;
color: #fff;
line-height: 0;
&:hover {
background: rgba(#000, 0.9);
}
}
}
}
.post-excerpt {
font-size: 14px;
p {
font-size: inherit;
}
}
.thb-post-bottom {
font-size: 10px;
text-transform: uppercase;
color: #4f4f4f;
font-weight: 400;
}
.post-title {
overflow-wrap: break-word;
h3 {
font-weight: 500;
}
}
.thb-read-more {
color: $accent;
display: inline-flex;
align-items: center;
line-height: 1;
font-size: 14px;
font-weight: 500;
svg {
fill: $accent;
height: 8px;
width: auto;
margin-left: 10px;
@include translateX(-4px);
@include transition(all .15s linear);
.bar {
fill: $accent;
@include scale(0,1);
@include transition(all .15s linear);
}
}
&:hover {
svg {
@include translateX(0px);
.bar {
@include scale(1,1);
}
}
}
}
&.sticky {
.post-title {
a {
text-decoration: underline;
}
}
}
&.style0 {
padding-bottom: 30px;
border-bottom: 1px solid $border;
}
&.style2 {
text-align: center;
h3 {
font-size: 20px;
}
.thb-post-bottom {
margin-bottom: 10px;
}
}
&.style3 {
@extend .quick-transition;
.post-gallery {
margin: 0;
}
h3 {
font-size: 16px;
}
.post-content-inner {
padding: 15px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
@include min-break($break-small) {
padding: 25px;
}
}
&:hover {
@include box-shadow(0 4px 18px rgba(#000,0.06));
}
}
&.style4 {
margin-bottom: 30px;
.post-content-inner {
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
text-align: center;
padding: 0 15px 10px;
@extend .quick-transition;
}
.post-gallery {
margin-bottom: 0;
overflow: hidden;
>a {
&:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
@include background-image(linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.65)));
}
}
}
h3 {
display: block;
text-transform: uppercase;
position: relative;
font-size: 14px;
font-weight: 600;
&:after {
content: '';
background: $accent;
width: 40px;
height: 2px;
position: absolute;
left: 50%;
margin-left: -20px;
top: calc( 100% + 15px );
@extend .quick-transition;
}
a {
color: #fff;
}
}
.thb-read-more {
text-transform: uppercase;
font-weight: 600;
opacity: 0;
}
&:hover {
.post-content-inner {
padding-bottom: 20px;
}
h3:after {
opacity: 0;
}
.thb-read-more {
opacity: 1;
}
}
}
&.style5 {
margin-bottom: 30px;
.post-content-inner {
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
padding: 15px;
transition: none;
background: rgba(#000,0.4);
@include min-break($break-medium) {
padding: 30px;
}
}
.post-gallery {
margin-bottom: 0;
overflow: hidden;
}
h3 {
display: block;
font-size: 24px;
font-weight: 500;
a {
color: #fff;
}
}
.post-excerpt {
height: auto;
max-height: 0;
overflow: hidden;
color: #fff;
@extend .quick-transition;
p {
margin: 0;
}
}
&:hover {
.post-excerpt {
max-height: 300px;
}
}
}
&.related {
.post-gallery {
margin-bottom: 15px;
}
h6 {
margin-bottom: 5px;
}
}
}
.archive-title {
margin-bottom: 40px;
p {
font-size: 14px;
}
}
.thb-posts-shortcode {
&.thb-carousel {
.post {
margin-bottom: 0;
}
}
.post {
&.style1 {
.post-gallery {
margin-bottom: 15px;
}
h3 {
font-size: 18px;
}
.post-title + .thb-post-bottom {
margin-top: -5px;
}
}
}
}