354 lines
8.6 KiB
Sass
354 lines
8.6 KiB
Sass
/*******************************************************/
|
|
/******************** ## Blog Area ********************/
|
|
/*******************************************************/
|
|
.blog-meta
|
|
line-height: 1
|
|
flex-wrap: wrap
|
|
+flexcenter(center)
|
|
text-transform: uppercase
|
|
font-family: $heading-font
|
|
background: $primary-color
|
|
li
|
|
font-size: 18px
|
|
margin: 3px 15px
|
|
+res-bl(xs)
|
|
font-size: 16px
|
|
+gapLR(margin, 8px)
|
|
a
|
|
color: white
|
|
|
|
.blog-meta-two
|
|
line-height: 1
|
|
flex-wrap: wrap
|
|
+flexcenter(start)
|
|
text-transform: uppercase
|
|
font-family: $heading-font
|
|
li
|
|
font-size: 18px
|
|
margin-right: 30px
|
|
margin-bottom: 5px
|
|
+res-bl(xs)
|
|
font-size: 16px
|
|
margin-right: 16px
|
|
i
|
|
margin-right: 5px
|
|
a:hover
|
|
color: $primary-color
|
|
&.style-two
|
|
font-family: $base-font
|
|
text-transform: capitalize
|
|
li
|
|
font-size: 16px
|
|
|
|
.blog-item
|
|
margin-bottom: 30px
|
|
.image
|
|
position: relative
|
|
margin-bottom: 35px
|
|
img
|
|
width: 100%
|
|
.blog-meta
|
|
+poLB(0)
|
|
width: 100%
|
|
padding-top: 15px
|
|
padding-bottom: 10px
|
|
.content
|
|
h4
|
|
margin-bottom: 15px
|
|
+res-bl(xs)
|
|
font-size: 22px
|
|
|
|
&.style-two
|
|
.blog-meta-two
|
|
margin-bottom: 13px
|
|
.read-more
|
|
color: $base-color
|
|
text-decoration: none
|
|
&:hover
|
|
color: $heading-color
|
|
.content
|
|
h3
|
|
max-width: 650px
|
|
+res-ab(md)
|
|
font-size: 35px
|
|
+res-bl(ms)
|
|
font-size: 25px
|
|
line-height: 1.4
|
|
.theme-btn
|
|
color: white
|
|
font-size: 16px
|
|
padding: 7px 30px
|
|
background: $heading-color
|
|
i
|
|
font-size: 12px
|
|
&.image-left
|
|
+res-ab(md)
|
|
display: flex
|
|
.image
|
|
+res-ab(md)
|
|
flex: none
|
|
width: 300px
|
|
margin-right: 50px
|
|
margin-bottom: 0
|
|
&.style-three
|
|
+res-ab(md)
|
|
display: flex
|
|
.image
|
|
flex: none
|
|
margin-bottom: 0
|
|
align-self: center
|
|
+res-ab(md)
|
|
width: 46%
|
|
.content
|
|
padding: 50px
|
|
display: flex
|
|
transition: 0.5s
|
|
flex-direction: column
|
|
border: 1px solid $border-color
|
|
+res-bl(ms)
|
|
+gapLR(padding, 25px)
|
|
.blog-meta-two
|
|
margin-bottom: 15px
|
|
li a:hover
|
|
color: $secondary-color
|
|
p
|
|
margin-top: auto
|
|
margin-bottom: 25px
|
|
.read-more
|
|
line-height: 1.2
|
|
&:hover
|
|
.content
|
|
background: #F4F1EA
|
|
border-color: #F4F1EA
|
|
&.black-bg
|
|
background: #0D0D0D
|
|
.content
|
|
border: none
|
|
background: transparent
|
|
.blog-meta-two
|
|
li a
|
|
color: #ACACAC
|
|
&:hover
|
|
color: $secondary-color
|
|
h4 a
|
|
color: white
|
|
p
|
|
color: #ACACAC
|
|
|
|
.blog-two-wrap
|
|
max-width: 750px
|
|
|
|
.blog-item-two
|
|
margin-bottom: 30px
|
|
.image
|
|
position: relative
|
|
margin-bottom: 27px
|
|
img
|
|
width: 100%
|
|
.date
|
|
+poRT(10px)
|
|
max-width: 55px
|
|
color: white
|
|
padding: 12px 13px
|
|
line-height: 1.2
|
|
border-radius: 7px
|
|
background: $primary-color
|
|
.content
|
|
.tag
|
|
margin-bottom: 10px
|
|
display: inline-block
|
|
i
|
|
color: $primary-color
|
|
margin-right: 6px
|
|
h4
|
|
margin-bottom: 14px
|
|
|
|
/* Blog Standard */
|
|
.blog-details-wrap,
|
|
.blog-standard-wrap
|
|
max-width: 800px
|
|
.blog-item.style-two
|
|
margin-bottom: 50px
|
|
|
|
/* Blog Details */
|
|
.blog-details-wrap
|
|
h3
|
|
margin-bottom: 20px
|
|
img
|
|
width: 100%
|
|
|
|
blockquote
|
|
@extend %h3
|
|
position: relative
|
|
padding: 30px 60px 40px
|
|
background: $lighter-color
|
|
+res-bl(md)
|
|
font-size: 25px
|
|
line-height: 1.4
|
|
padding-left: 35px
|
|
padding-right: 15px
|
|
+res-bl(xs)
|
|
font-size: 22px
|
|
line-height: 1.4
|
|
padding-right: 10px
|
|
.text
|
|
span
|
|
line-height: 1
|
|
font-size: 1.7em
|
|
.blockquote-footer
|
|
display: block
|
|
margin-bottom: 0
|
|
margin-top: 26px
|
|
font-size: 0.7em
|
|
font-family: $base-font
|
|
&:before
|
|
content: '———'
|
|
margin-right: 20px
|
|
letter-spacing: -4px
|
|
|
|
.tag-share
|
|
flex-wrap: wrap
|
|
+flexcenter(space-between)
|
|
.item
|
|
display: flex
|
|
align-items: center
|
|
margin-bottom: 15px
|
|
h6
|
|
margin-top: 10px
|
|
margin-right: 25px
|
|
.tags
|
|
a
|
|
&:not(:last-child):after
|
|
content: ','
|
|
.social-style-one
|
|
a
|
|
&:not(:hover)
|
|
background: $lighter-color
|
|
+res-bl(xs)
|
|
+size(35px)
|
|
line-height: 35px
|
|
|
|
/* Next Prev Blog */
|
|
.next-prev-blog
|
|
display: flex
|
|
flex-wrap: wrap
|
|
justify-content: space-between
|
|
.item
|
|
display: flex
|
|
max-width: 322px
|
|
align-items: center
|
|
margin-bottom: 20px
|
|
.image
|
|
flex: none
|
|
max-width: 80px
|
|
margin-right: 30px
|
|
h6
|
|
font-size: 18px
|
|
margin-bottom: 0
|
|
line-height: 1.5
|
|
|
|
/* Comments */
|
|
.comment-body
|
|
margin-bottom: 35px
|
|
+res-ab(ms)
|
|
display: flex
|
|
.author-thumb
|
|
flex: none
|
|
max-width: 80px
|
|
margin-right: 40px
|
|
margin-bottom: 20px
|
|
+res-bl(sm)
|
|
margin-right: 25px
|
|
img
|
|
border-radius: 50%
|
|
.content
|
|
.comment-header
|
|
display: flex
|
|
flex-wrap: wrap
|
|
margin-bottom: 2px
|
|
align-items: center
|
|
li
|
|
margin-bottom: 5px
|
|
&:not(:last-child)
|
|
margin-right: 15px
|
|
h6
|
|
margin-bottom: 0
|
|
+res-ab(sm)
|
|
font-size: 22px
|
|
p
|
|
margin-bottom: 5px
|
|
.read-more
|
|
color: $base-color
|
|
text-decoration: none
|
|
&.comment-child
|
|
margin-left: 60px
|
|
+res-bl(md)
|
|
margin-left: 30px
|
|
+res-bl(xs)
|
|
margin-left: 20px
|
|
|
|
.comment-title
|
|
+res-ab(md)
|
|
font-size: 35px
|
|
|
|
.comments.rattings
|
|
.comment-body
|
|
margin-bottom: 30px
|
|
padding-bottom: 10px
|
|
border-bottom: 1px solid $border-color
|
|
.author-thumb
|
|
max-width: 135px
|
|
margin-right: 30px
|
|
.content
|
|
.ratting
|
|
margin-bottom: 12px
|
|
i
|
|
margin: 0 8px 0 0
|
|
color: $primary-color
|
|
|
|
.admin-comment
|
|
.comment-body
|
|
max-width: none
|
|
margin-bottom: 0
|
|
padding: 30px 40px
|
|
align-items: center
|
|
+res-bl(md)
|
|
+gapLR(padding, 25px)
|
|
.author-thumb
|
|
+res-ab(xl)
|
|
max-width: 160px
|
|
+res-ab(sm)
|
|
margin-bottom: 0
|
|
margin-right: 40px
|
|
.content
|
|
h4
|
|
margin-bottom: 0
|
|
.author
|
|
display: block
|
|
margin-bottom: 15px
|
|
.social-icons
|
|
margin-top: 10px
|
|
a
|
|
margin-right: 20px
|
|
&:hover
|
|
color: $primary-color
|
|
|
|
/* Comment Form */
|
|
.review-form,
|
|
.comment-form
|
|
.form-group
|
|
+res-ab(lg)
|
|
margin-bottom: 30px
|
|
.form-control
|
|
font-size: 16px
|
|
font-weight: 400
|
|
font-family: $base-font
|
|
background: $lighter-color
|
|
border-color: $lighter-color
|
|
&:focus
|
|
border-color: $heading-color
|
|
.ratting
|
|
b
|
|
margin-right: 20px
|
|
i
|
|
color: $base-color |