441 lines
10 KiB
Stylus
441 lines
10 KiB
Stylus
|
.article-single
|
||
|
|
padding: 30px 30px 20px
|
||
|
|
|
||
|
|
.article-inner
|
||
|
|
overflow: hidden
|
||
|
|
|
||
|
|
.article-row
|
||
|
|
clearfix()
|
||
|
|
width: 100%
|
||
|
|
float: left
|
||
|
|
position: relative
|
||
|
|
padding: 30px 0px 0px 30px
|
||
|
|
border-bottom: 1px solid #eee
|
||
|
|
box-sizing: border-box
|
||
|
|
|
||
|
|
.article-summary
|
||
|
|
width: 50%
|
||
|
|
float: left
|
||
|
|
margin-bottom: 30px
|
||
|
|
a
|
||
|
|
text-decoration: none
|
||
|
|
color: color-theme
|
||
|
|
.article-summary-inner
|
||
|
|
margin-right: 30px
|
||
|
|
.thumbnail
|
||
|
|
height: 0
|
||
|
|
width: 100%
|
||
|
|
display: block
|
||
|
|
overflow: hidden
|
||
|
|
position: relative
|
||
|
|
margin-bottom: 1em
|
||
|
|
padding-bottom: 47.11%
|
||
|
|
.comment-counter
|
||
|
|
right: 0
|
||
|
|
top: 15px
|
||
|
|
color: white
|
||
|
|
font-size: 12px
|
||
|
|
padding: 2px 7px
|
||
|
|
line-height: 19px
|
||
|
|
position: absolute
|
||
|
|
display: inline-block
|
||
|
|
background-color: #82b965
|
||
|
|
&:before
|
||
|
|
top: 3px
|
||
|
|
left: -16px
|
||
|
|
content: ''
|
||
|
|
position: absolute
|
||
|
|
display: inline-block
|
||
|
|
border: 9px solid transparent
|
||
|
|
border-right-color: #82b965
|
||
|
|
.thumbnail-image
|
||
|
|
display: block
|
||
|
|
position: absolute
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
opacity: 1
|
||
|
|
background-size: cover
|
||
|
|
background-position: center
|
||
|
|
transition: opacity 0.3s ease-in
|
||
|
|
.thumbnail-none
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
background-size: 100% 100%
|
||
|
|
background-image: url(thumbnail-default)
|
||
|
|
.article-title
|
||
|
|
margin-bottom: 10px
|
||
|
|
font-size: 22px
|
||
|
|
font-weight: 400
|
||
|
|
line-height: 1.5em
|
||
|
|
word-wrap: break-word
|
||
|
|
a
|
||
|
|
transition: color 0.3s ease-in
|
||
|
|
color: #444
|
||
|
|
.article-excerpt
|
||
|
|
position: relative
|
||
|
|
color: rgb(170, 170, 170)
|
||
|
|
font-size: 16px
|
||
|
|
line-height: line-height
|
||
|
|
overflow: hidden
|
||
|
|
height: 4 * line-height
|
||
|
|
&:hover
|
||
|
|
.thumbnail
|
||
|
|
.thumbnail-image
|
||
|
|
opacity: 0.7
|
||
|
|
.article-title
|
||
|
|
a
|
||
|
|
color: color-theme
|
||
|
|
|
||
|
|
.article-category
|
||
|
|
float: left
|
||
|
|
line-height: 1em
|
||
|
|
color: #ccc
|
||
|
|
text-shadow: 0 1px #fff
|
||
|
|
margin-left: 8px
|
||
|
|
&:before
|
||
|
|
content: "\2022"
|
||
|
|
|
||
|
|
.article-title
|
||
|
|
text-decoration: none
|
||
|
|
font-size: 38px
|
||
|
|
letter-spacing: -1px
|
||
|
|
color: color-default
|
||
|
|
line-height: line-height-title
|
||
|
|
transition: color 0.2s
|
||
|
|
margin-bottom: 10px
|
||
|
|
a&:hover
|
||
|
|
color: color-theme
|
||
|
|
|
||
|
|
.article-meta
|
||
|
|
@extend $block-caption
|
||
|
|
clearfix()
|
||
|
|
line-height: line-height
|
||
|
|
& > div
|
||
|
|
float: left
|
||
|
|
margin-right: 10px
|
||
|
|
.fa
|
||
|
|
margin-right: 3px
|
||
|
|
a
|
||
|
|
color: color-default
|
||
|
|
&:hover
|
||
|
|
color: color-link
|
||
|
|
.category
|
||
|
|
text-transform: uppercase
|
||
|
|
a, i
|
||
|
|
margin-left: 0
|
||
|
|
margin-right: 6px
|
||
|
|
|
||
|
|
.article-summary
|
||
|
|
.article-meta
|
||
|
|
height: line-height
|
||
|
|
overflow: hidden
|
||
|
|
a
|
||
|
|
color: color-theme
|
||
|
|
& > div
|
||
|
|
margin-right: 0
|
||
|
|
|
||
|
|
.article-tag
|
||
|
|
.tag-link
|
||
|
|
&:before
|
||
|
|
content: "#"
|
||
|
|
|
||
|
|
.article-entry
|
||
|
|
@extend $base-style
|
||
|
|
clearfix()
|
||
|
|
color: color-default
|
||
|
|
font-size: font-size-article
|
||
|
|
font-weight: 300
|
||
|
|
line-height: line-height
|
||
|
|
p, table
|
||
|
|
margin: line-height 0
|
||
|
|
h1, h2, h3, h4, h5, h6
|
||
|
|
font-weight: 600
|
||
|
|
h1, h2, h3, h4, h5, h6
|
||
|
|
line-height: line-height-title
|
||
|
|
margin: line-height-title 0
|
||
|
|
a
|
||
|
|
color: color-theme
|
||
|
|
text-decoration: none
|
||
|
|
&:hover
|
||
|
|
text-decoration: underline
|
||
|
|
ul, ol, dl
|
||
|
|
margin-top: line-height
|
||
|
|
margin-bottom: line-height
|
||
|
|
list-style-position: outside
|
||
|
|
padding-left: 1.4em
|
||
|
|
p
|
||
|
|
margin: 0
|
||
|
|
img, video
|
||
|
|
max-width: 100%
|
||
|
|
height: auto
|
||
|
|
display: block
|
||
|
|
margin: auto
|
||
|
|
iframe
|
||
|
|
border: none
|
||
|
|
table
|
||
|
|
width: 100%
|
||
|
|
border-collapse: collapse
|
||
|
|
border-spacing: 0
|
||
|
|
th
|
||
|
|
font-weight: 600
|
||
|
|
border-bottom: 3px solid color-border
|
||
|
|
padding-bottom: 0.5em
|
||
|
|
td
|
||
|
|
border-bottom: 1px solid color-border
|
||
|
|
padding: 10px 0
|
||
|
|
blockquote
|
||
|
|
color: #777
|
||
|
|
quote: none
|
||
|
|
margin: 0 0 20px 0
|
||
|
|
position: relative
|
||
|
|
font-style: italic
|
||
|
|
padding-left: 50px
|
||
|
|
&:before
|
||
|
|
top: 0
|
||
|
|
left: 0
|
||
|
|
color: #ccc
|
||
|
|
font-size: 32px
|
||
|
|
content: "\f10d"
|
||
|
|
position: absolute
|
||
|
|
text-align: center
|
||
|
|
font-style: normal
|
||
|
|
font-family: 'FontAwesome'
|
||
|
|
footer
|
||
|
|
font-size: font-size
|
||
|
|
margin: line-height 0
|
||
|
|
font-family: font-sans
|
||
|
|
cite
|
||
|
|
&:before
|
||
|
|
content: "—"
|
||
|
|
padding: 0 0.5em
|
||
|
|
.pullquote
|
||
|
|
text-align: left
|
||
|
|
width: 45%
|
||
|
|
margin: 0
|
||
|
|
&.left
|
||
|
|
margin-left: 0.5em
|
||
|
|
margin-right: 1em
|
||
|
|
&.right
|
||
|
|
margin-right: 0.5em
|
||
|
|
margin-left: 1em
|
||
|
|
.caption
|
||
|
|
color: color-grey
|
||
|
|
display: block
|
||
|
|
font-size: 0.9em
|
||
|
|
margin-top: 0.5em
|
||
|
|
position: relative
|
||
|
|
text-align: center
|
||
|
|
// http://webdesignerwall.com/tutorials/css-elastic-videos
|
||
|
|
.video-container
|
||
|
|
position: relative
|
||
|
|
padding-top: (9 / 16 * 100)% // 16:9 ratio
|
||
|
|
height: 0
|
||
|
|
overflow: hidden
|
||
|
|
iframe, object, embed
|
||
|
|
position: absolute
|
||
|
|
top: 0
|
||
|
|
left: 0
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
margin-top: 0
|
||
|
|
|
||
|
|
.article-more-link a
|
||
|
|
display: inline-block
|
||
|
|
line-height: 1em
|
||
|
|
padding: 6px 15px
|
||
|
|
border-radius: 15px
|
||
|
|
background: color-background
|
||
|
|
color: color-grey
|
||
|
|
text-shadow: 0 1px #fff
|
||
|
|
text-decoration: none
|
||
|
|
&:hover
|
||
|
|
background: color-theme
|
||
|
|
color: #fff
|
||
|
|
text-decoration: none
|
||
|
|
text-shadow: 0 1px darken(color-theme, 20%)
|
||
|
|
|
||
|
|
.article-footer
|
||
|
|
clearfix()
|
||
|
|
font-size: font-size
|
||
|
|
line-height: line-height
|
||
|
|
border-top: 1px solid color-border
|
||
|
|
padding-top: line-height
|
||
|
|
a
|
||
|
|
color: color-grey
|
||
|
|
text-decoration: none
|
||
|
|
&:hover
|
||
|
|
color: color-default
|
||
|
|
|
||
|
|
.article-comment-link,
|
||
|
|
.article-share-link
|
||
|
|
i
|
||
|
|
padding-right: 8px
|
||
|
|
|
||
|
|
.article-comment-link
|
||
|
|
float: right
|
||
|
|
|
||
|
|
.article-share-link
|
||
|
|
cursor: pointer
|
||
|
|
float: right
|
||
|
|
margin-left: 20px
|
||
|
|
|
||
|
|
.article-share-box
|
||
|
|
position: absolute
|
||
|
|
display: none
|
||
|
|
background: #fff
|
||
|
|
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
|
||
|
|
border-radius: 3px
|
||
|
|
margin-left: -145px
|
||
|
|
overflow: hidden
|
||
|
|
z-index: 1
|
||
|
|
&.on
|
||
|
|
display: block
|
||
|
|
|
||
|
|
.article-share-input
|
||
|
|
width: 100%
|
||
|
|
background: none
|
||
|
|
box-sizing: border-box
|
||
|
|
font: 14px font-sans
|
||
|
|
padding: 0 15px
|
||
|
|
color: color-default
|
||
|
|
outline: none
|
||
|
|
border: 1px solid color-border
|
||
|
|
border-radius: 3px 3px 0 0
|
||
|
|
height: 36px
|
||
|
|
line-height: 36px
|
||
|
|
|
||
|
|
.article-share-links
|
||
|
|
clearfix()
|
||
|
|
background: color-background
|
||
|
|
|
||
|
|
$article-share-link
|
||
|
|
width: 50px
|
||
|
|
height: 36px
|
||
|
|
display: block
|
||
|
|
float: left
|
||
|
|
position: relative
|
||
|
|
color: #999
|
||
|
|
text-align: center
|
||
|
|
line-height: 36px
|
||
|
|
text-decoration: none
|
||
|
|
&:before
|
||
|
|
font-size: 20px
|
||
|
|
font-family: FontAwesome
|
||
|
|
absolute-center(@font-size)
|
||
|
|
&:hover
|
||
|
|
color: #fff
|
||
|
|
|
||
|
|
.article-share-twitter
|
||
|
|
@extend $article-share-link
|
||
|
|
&:before
|
||
|
|
content: "\f099"
|
||
|
|
&:hover
|
||
|
|
background: color-twitter
|
||
|
|
text-shadow: 0 1px darken(color-twitter, 20%)
|
||
|
|
|
||
|
|
.article-share-facebook
|
||
|
|
@extend $article-share-link
|
||
|
|
&:before
|
||
|
|
content: "\f09a"
|
||
|
|
&:hover
|
||
|
|
background: color-facebook
|
||
|
|
text-shadow: 0 1px darken(color-facebook, 20%)
|
||
|
|
|
||
|
|
.article-share-pinterest
|
||
|
|
@extend $article-share-link
|
||
|
|
&:before
|
||
|
|
content: "\f0d2"
|
||
|
|
&:hover
|
||
|
|
background: color-pinterest
|
||
|
|
text-shadow: 0 1px darken(color-pinterest, 20%)
|
||
|
|
|
||
|
|
.article-share-google
|
||
|
|
@extend $article-share-link
|
||
|
|
&:before
|
||
|
|
content: "\f0d5"
|
||
|
|
&:hover
|
||
|
|
background: color-google
|
||
|
|
text-shadow: 0 1px darken(color-google, 20%)
|
||
|
|
|
||
|
|
.article-gallery
|
||
|
|
background: #000
|
||
|
|
position: relative
|
||
|
|
|
||
|
|
.article-gallery-photos
|
||
|
|
position: relative
|
||
|
|
overflow: hidden
|
||
|
|
|
||
|
|
.article-gallery-img
|
||
|
|
display: none
|
||
|
|
max-width: 100%
|
||
|
|
&:first-child
|
||
|
|
display: block
|
||
|
|
&.loaded
|
||
|
|
position: absolute
|
||
|
|
display: block
|
||
|
|
img
|
||
|
|
display: block
|
||
|
|
max-width: 100%
|
||
|
|
margin: 0 auto
|
||
|
|
|
||
|
|
.article-gallery
|
||
|
|
overflow: hidden
|
||
|
|
background: black
|
||
|
|
position: relative
|
||
|
|
text-align: center
|
||
|
|
margin: line-height 0
|
||
|
|
.gallery-item
|
||
|
|
display: none
|
||
|
|
max-width: 100%
|
||
|
|
&:before,
|
||
|
|
&:after
|
||
|
|
top: 50%
|
||
|
|
width: 40px
|
||
|
|
height: 36px
|
||
|
|
font-size: 36px
|
||
|
|
line-height: 36px
|
||
|
|
margin-top: -18px
|
||
|
|
position: absolute
|
||
|
|
font-family: FontAwesome
|
||
|
|
color: rgba(255, 255, 255, .5)
|
||
|
|
&:hover
|
||
|
|
&:before,
|
||
|
|
&:after
|
||
|
|
color: rgba(255, 255, 255, .8)
|
||
|
|
&:before
|
||
|
|
left: 0
|
||
|
|
content: "\f104"
|
||
|
|
&:after
|
||
|
|
right: 0
|
||
|
|
content: "\f105"
|
||
|
|
&:first-child
|
||
|
|
display: block
|
||
|
|
img
|
||
|
|
display: block
|
||
|
|
max-width: 100%
|
||
|
|
margin: 0 auto
|
||
|
|
|
||
|
|
|
||
|
|
/* right-to-left languages */
|
||
|
|
.article.rtl
|
||
|
|
.article-title,
|
||
|
|
.article-excerpt,
|
||
|
|
.article-entry p
|
||
|
|
direction: rtl
|
||
|
|
.article-meta
|
||
|
|
& > div
|
||
|
|
float: right
|
||
|
|
margin-left: 10px
|
||
|
|
margin-right: 0
|
||
|
|
.category
|
||
|
|
a, i
|
||
|
|
margin-right: 0
|
||
|
|
margin-left: 6px
|
||
|
|
&:first-child
|
||
|
|
margin-left: 0
|
||
|
|
|
||
|
|
/* lightgallery */
|
||
|
|
.lg-outer
|
||
|
|
.lg-thumb-item
|
||
|
|
border-radius: 0 !important
|