/*------------------------------------------------------------------
[Table of contents]
BLOG STYLES
1. Blog archive
2. Blog page
3. Search block
4. Sidebar
-------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------
1. Blog archive
-----------------------------------------------------------------------------------*/
.blog-list {
padding-bottom: 150px;
.portfolio-block {
display: block;
}
.blog-item {
height: 552px;
position: relative;
padding: 30px 0;
margin-bottom: 53px;
display: block;
float: left;
width: 100%;
&:last-child {
margin-bottom: 0;
}
&:hover {
.content ._title {
color: #A200FF;
transition: all .4s ease;
}
.img {
.sq_parent {
transform: scale(1.1);
transition: all .4s ease;
}
}
}
&:not(.next-post):first-child {
&:before {
background: #000;
opacity: .21;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: '';
z-index: 1;
}
.sq_parent {
padding-bottom: 43%;
}
.img {
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
}
.content {
width: 100%;
background: none;
max-width: 970px;
padding: 30px 100px;
justify-content: flex-end;
z-index: 2;
._title {
color: #fff;
font-size: 45px;
}
.author {
margin-bottom: 0;
.name {
color: #fff;
}
}
.text {
display: none;
}
}
}
&:not(.next-post):nth-child(odd) {
.img {
left: auto;
right: 0;
}
.content {
float: left;
}
}
.img {
overflow: hidden;
width: 49%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
.sq_parent {
width: 100%;
position: relative;
padding-bottom: 87%;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transition: all .4s ease;
.sq_wrap {
position: absolute;
width: 100%;
height: 100%;
.sq_content {
float: left;
width: 100%;
height: 100%;
}
}
}
}
.content {
height: 100%;
position: relative;
background: #fff;
width: 57%;
float: right;
padding: 20px 50px;
display: flex;
flex-direction: column;
justify-content: center;
.tags {
margin-bottom: 20px;
.tag {
background: #191919;
height: 34px;
width: auto;
padding: 0 13px;
line-height: 34px;
font-size: 17px;
color: #fff;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
}
._title {
font-size: 28px;
color: #191919;
font-weight: 600;
margin-bottom: 30px;
transition: all .4s ease;
}
.author {
position: relative;
padding-left: 80px;
margin-bottom: 22px;
.userpic {
width: 62px;
height: 62px;
border-radius: 50%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}
.name {
font-size: 17px;
color: #191919;
display: flex;
flex-direction: column;
justify-content: center;
height: 62px;
}
}
.text {
font-size: 17px;
color: #8C8C8C;
line-height: 1.8;
}
}
}
.wrap_float {
position: relative;
}
&.blog-list--sidebar {
.no-result {
background: #F4F4F4;
font-size: 22px;
font-weight: 700;
color: #191919;
padding: 40px 44px;
margin-bottom: 40px;
}
.blog-list--sidebar_left {
max-width: 848px;
.blog-item:not(.next-post):first-child .content ._title {
font-size: 28px;
}
.blog-item {
height: 450px;
}
.blog-item:not(.next-post):first-child .sq_parent {
padding-bottom: 54%;
}
.blog-item:not(.next-post):first-child .content {
padding: 10px 50px;
}
.blog-item .content {
width: 71%;
}
.blog-item .img .sq_parent {
padding-bottom: 108%;
}
.blog-item .content ._title {
margin-bottom: 18px;
}
.blog-item .content .author .userpic {
width: 52px;
height: 52px;
}
.blog-item .content .author .name {
height: 50px;
line-height: 50px;
font-size: 14px;
}
.blog-item .content .author {
margin-bottom: 18px;
}
.blog-item .content .text {
font-size: 15px;
}
.blog-item .content .tags {
margin-bottom: 12px;
}
}
.blog-list--sidebar_right {
max-width: 396px;
float: right;
border-top: 3px solid #E5E5E5;
padding-top: 35px;
}
}
}
.blog__tabs-section {
.wrap_float {
position: relative;
padding-right: 100px;
}
}
/*----------------------------------------------------------------------------------
2. Blog page
-----------------------------------------------------------------------------------*/
.blog-single {
&.blog-single--right-sidebar {
.single-content {
padding-bottom: 0;
}
}
.single-head {
padding-top: 250px;
margin-bottom: 25px;
.tags {
margin-bottom: 23px;
.tag {
background: #191919;
height: 34px;
width: auto;
padding: 0 13px;
line-height: 34px;
font-size: 17px;
color: #fff;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
}
.title_wrap {
position: relative;
}
.title {
color: #191919;
font-size: 45px;
font-weight: 600;
max-width: 800px;
}
.author {
position: absolute;
padding-left: 80px;
margin-bottom: 22px;
bottom: 0;
right: 0;
width: auto;
margin-bottom: 0;
.userpic {
width: 62px;
height: 62px;
border-radius: 50%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.name {
font-size: 17px;
color: #191919;
display: flex;
flex-direction: column;
justify-content: center;
height: 62px;
}
}
}
.single-content {
padding-bottom: 130px;
}
.foot-block {
padding: 130px 0 150px;
background: #F4F4F4;
}
.next-post-wrap {
padding: 150px 0;
.blog-item {
&:hover {
.link>span span.link-text {
opacity: 1;
margin-left: 0;
transition: all .2s ease-out;
}
}
}
.link {
position: relative;
color: #191919;
font-size: 22px;
font-weight: 500;
display: block;
float: left;
margin-top: 0;
margin-bottom: 40px;
& > span {
padding-left: 130px;
position: relative;
span.link-text {
opacity: 0;
margin-left: 8px;
transition: all .2s ease-out;
}
&:before {
width: 116px;
height: 8px;
background: url(../img/arrow-black.svg) center center no-repeat;
background-size: contain;
content: '';
left: 0;
top: 50%;
margin-top: -4px;
position: absolute;
}
}
}
}
.img-block {
margin: 15px 0;
img {
max-width: 100%;
display: block;
float: left;
}
}
.caption {
font-size: 17px;
color: #8C8C8C;
font-weight: 500;
font-style: italic;
margin-top: 13px;
display: inline-block;
}
.text {
color: #8C8C8C;
font-size: 33px;
font-weight: 600;
line-height: 1.3;
b, strong {
color: #191919;
}
}
p {
font-size: 17px;
color: #8C8C8C;
line-height: 1.7;
margin: 20px 0;
}
.video-block {
margin: 15px 0;
.video {
padding-bottom: 56.25%;
height: 0;
position: relative;
background: #000;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
}
}
.two-columns {
.col {
width: 47%;
&:last-child {
float: right;
}
}
}
.fixed-bg {
position: relative;
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
min-height: 760px;
padding: 80px 0;
display: flex;
align-items: center;
.wrap_float {
position: relative;
z-index: 1;
}
&:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
background: #000;
opacity: .5;
}
.title {
font-size: 33px;
color: #fff;
font-weight: 600;
line-height: 1.4;
margin-bottom: 34px;
}
.text {
font-size: 22px;
color: #fff;
max-width: 720px;
font-weight: 400;
line-height: 1.5;
}
}
.share {
margin: 40px 0 0;
.p {
line-height: 50px;
width: auto;
font-size: 22px;
color: #191919;
font-weight: 500;
margin: 0;
}
.links {
width: auto;
margin-left: 22px;
.link {
width: 50px;
height: 50px;
position: relative;
border-radius: 50%;
margin-right: 15px;
margin-top: 0;
&:before {
position: absolute;
top: 50%;
left: 50%;
content: '';
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
&.facebook {
background: #33589E;
&:before {
background-image: url(../img/facebook-logo.svg);
width: 16px;
height: 28px;
margin-top: -14px;
margin-left: -8px;
}
}
&.pinterest {
background: #C8232C;
&:before {
background-image: url(../img/pinterest.svg);
width: 22px;
height: 28px;
margin-top: -14px;
margin-left: -11px;
}
}
&.twitter {
background: #4BA0EB;
&:before {
background-image: url(../img/twitter-logo-silhouette.svg);
width: 28px;
height: 24px;
margin-top: -12px;
margin-left: -14px;
}
}
&.linked {
background: #007AB9;
&:before {
background-image: url(../img/linked-in.svg);
width: 24px;
height: 22px;
margin-top: -11px;
margin-left: -12px;
}
}
&.email {
background: #F7F7F7;
&:before {
background-image: url(../img/email.svg);
width: 26px;
height: 18px;
margin-top: -9px;
margin-left: -13px;
}
}
}
}
}
.comments_section {
padding-bottom: 150px;
.title {
font-size: 33px;
font-weight: 700;
color: #191919;
margin-bottom: 36px;
span {
color: #BABABA;
}
}
.comment_item {
margin-bottom: 40px;
&:last-child {
margin-bottom: 0;
}
&:nth-child(even) {
width: 90%;
float: right;
.comment-text {
background: #F4F4F4;
color: #8C8C8C;
}
}
.comment-text {
background: #AB4EE0;
font-size: 17px;
color: #fff;
padding: 35px;
line-height: 1.6;
margin-bottom: 20px;
}
.author {
position: relative;
.left {
width: 100%;
padding-left: 80px;
position: relative;
.userpic {
width: 63px;
height: 63px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
background: #000;
font-size: 25px;
font-weight: 700;
color: #fff;
text-align: center;
line-height: 63px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
.name {
color: #9A9A9A;
font-weight: 700;
height: 63px;
display: flex;
align-items: center;
}
}
.right {
position: absolute;
top: 0;
width: 100px;
right: 0;
line-height: 63px;
text-align: right;
a {
color: #AB4EE0;
font-weight: 700;
}
}
}
}
}
.contacts-form {
background: #F4F4F4;
.form .input {
background: none;
}
.form .textarea {
background: none;
}
.text {
font-size: inherit;
color: #fff;
}
}
.blog-single--sidebar_left {
max-width: 848px;
.col {
width: 100%;
}
.fixed-bg {
flex-direction: column;
min-height: 600px;
justify-content: center;
padding-left: 50px;
padding-right: 50px;
.title,
.text {
position: relative;
z-index: 1;
max-width: 100%;
}
}
.foot-block {
background: none;
padding-top: 44px;
padding-bottom: 0;
}
.blog-item .img .sq_parent {
padding-bottom: 133%;
}
.comments_section {
padding-bottom: 20px;
}
.wp_content {
position: relative;
z-index: 1;
}
}
.blog-single--sidebar_right {
max-width: 396px;
float: right;
border-top: 3px solid #E5E5E5;
padding-top: 35px;
}
}
/*----------------------------------------------------------------------------------
3. Search block
-----------------------------------------------------------------------------------*/
.search_block {
width: 30px;
height: 30px;
position: absolute;
right: 0;
top: 0;
.search_block_open {
width: 30px;
height: 30px;
position: absolute;
&:before {
width: 22px;
height: 22px;
background: url(../img/search.svg) center center no-repeat;
background-size: contain;
position: absolute;
content: '';
top: 50%;
left: 50%;
margin-top: -11px;
margin-left: -11px;
}
&:hover {
cursor: pointer;
}
}
.search_block_field {
height: 32px;
width: 1300px;
position: absolute;
right: 0;
top: 0;
padding-left: 60px;
padding-right: 70px;
display: none;
background: #fff;
.close {
width: 30px;
height: 30px;
background: url(../img/search-close.svg) center center no-repeat;
background-size: 14px 14px;
position: absolute;
left: 0;
top: 0;
&:hover {
cursor: pointer;
}
}
input {
font-size: 22px;
font-weight: 700;
width: 100%;
display: block;
height: 30px;
border: 0;
padding: 0;
&::-webkit-input-placeholder {color: #BABABA;}
&::-moz-placeholder {color: #BABABA;}
&:-moz-placeholder {color: #BABABA;}
&:-ms-input-placeholder {color: #BABABA;}
&:focus {
outline: 0;
}
}
.submit {
width: 30px;
height: 30px;
position: absolute;
right: 0;
top: 0;
background: none;
z-index: 2;
&:before {
width: 22px;
height: 22px;
background: url(../img/search.svg) center center no-repeat;
background-size: contain;
position: absolute;
content: '';
top: 50%;
left: 50%;
margin-top: -11px;
margin-left: -11px;
}
&:hover {
cursor: pointer;
}
}
}
}
/*----------------------------------------------------------------------------------
4. Sidebar
-----------------------------------------------------------------------------------*/
.sidebar {
._block {
margin-bottom: 34px;
&_title {
font-size: 22px;
font-weight: 700;
color: #191919;
margin-bottom: 30px;
}
}
.archives {
background: #F4F4F4;
padding: 38px;
ul {
li {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
a {
font-size: 18px;
font-weight: 500;
display: block;
float: left;
&:hover {
color: #AB4EE0;
}
}
}
}
}
.tags {
padding-right: 93px;
.tag {
height: 34px;
width: auto;
background: #191919;
line-height: 34px;
padding: 0 12px;
font-size: 17px;
color: #fff;
margin-right: 10px;
display: block;
float: left;
margin-bottom: 10px;
transition: all .2s linear;
&:hover {
background: #AB4EE0;
transition: all .2s linear;
}
}
}
.recent-posts {
.slick-prev {
width: 35px;
height: 35px;
border: 1px solid #fff;
border-radius: 50%;
top: 38px;
right: 84px;
z-index: 2;
left: auto;
background: none;
margin-top: 0;
&:before {
width: 14px;
height: 6px;
background: url(../img/post-arrow.svg) center center no-repeat;
background-size: contain;
content: '';
position: absolute;
top: 50%;
left: 50%;
margin-top: -4px;
margin-left: -7px;
}
}
.slick-next {
width: 35px;
height: 35px;
border: 1px solid #fff;
border-radius: 50%;
top: 38px;
right: 50px;
z-index: 2;
left: auto;
right: 38px;
background: none;
margin-top: 0;
&:before {
width: 14px;
height: 6px;
background: url(../img/post-arrow.svg) center center no-repeat;
background-size: contain;
content: '';
position: absolute;
top: 50%;
transform: rotate(180deg);
left: 50%;
margin-top: -3px;
margin-left: -7px;
}
}
.item {
display: block;
width: 100%;
float: left;
}
.sq_parent {
width: 100%;
position: relative;
padding-bottom: 106%;
overflow: hidden;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
&:before {
background: #000;
opacity: .25;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.sq_wrap {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
.sq_content {
float: left;
width: 100%;
height: 100%;
padding: 38px;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
}
.bottom {
.date {
font-size: 15px;
color: #fff;
font-weight: 700;
margin-bottom: 12px;
}
._title {
font-size: 20px;
font-weight: 700;
color: #fff;
}
}
}
}
}
}
}