hexo-theme-ayer/source-src/css/_partial/article.styl
2020-05-03 09:53:04 +08:00

267 lines
4.7 KiB
Stylus

.article
padding 5rem 0 3rem
font-size 110%
.sea-center
text-align center
color black
&::after
border-bottom: 2px dashed water;
content: '';
width: 100px;
display: block;
margin: .2em auto 0;
height: 2px
//.article-inner
// overflow hidden
.article-topping
display inline-block
margin-left 10px
padding 0 10px
border-radius 4px
font-style normal
font-size 12px
background-color #ea434a
color #fff
height 22px
line-height 24px
transform translateY(-8px)
.article-meta
clearfix()
.article-date
@extend $block-caption
&::before
content '\eaf2'
margin-right .15rem
font-family remixicon
opacity .5
.article-category
display inline-block
margin-left 1.5rem
&:before
content "\efde"
font-family remixicon
margin-right .15rem
opacity 0.6
.article-category-link
@extend $block-caption
.archive-article-header
+ .article-category
margin-left 0
.article-entry
font-size 100%
margin-top .5rem
line-height 1.6
clearfix()
@extend $base-style
color body-color
.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-header
position relative
h1, h2
margin 0
.article-title
display block
font-size 34px
font-weight bold
margin-bottom 3rem
text-decoration none
color body-color
padding-left 2rem
border-left 4px solid body-color
.article-footer
clearfix()
.declare
margin 0 0 1rem
padding-bottom 1rem
color #999
border-bottom 1px solid #f6f6f6
ul
list-style none
li
list-style none
// Tags
.article-tag-list
list-unstyled()
margin 0
&:before
color: tag-color
content "\eec3"
font-family remixicon
margin-right .5rem
.article-tag-list-item
display inline-block
padding-right 1rem
.article-tag-list-link
font-size: 11px
text-decoration: none
display: block;
color: white;
float: left;
height 18px
line-height 18px
padding 0px 8px;
position: relative;
border-radius: 9px;
background-color tag-color
.article-comment-link
float right
&:before
content "\ee0d"
font-family remixicon
padding-right 8px
.article-share-link
cursor pointer
float right
margin-left 20px
&:before
content "\ef76"
font-family remixicon
padding-right 6px
// Nav Older & Newer
.article-nav
clearfix()
position relative
padding-top 1.5rem
margin 1rem 0 2rem
border-top border-width solid #eee
.article-nav-link
display block
text-decoration none
&:first-child
float left
&:last-child
float right
text-align right
.article-nav-caption
color sea-lighter
.article-nav-title
font-size inherit
// Share
.article-share-box
position absolute
display none
background white
border-radius(.4rem)
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
padding 0 1.5rem
outline none
border none
border-bottom border-width border-color solid
height 3.6rem
line-height 3.6rem
.article-share-links
clearfix()
$article-share-link
position relative
display block
float left
width 5rem
height 3.6rem
color body-color
text-align center
text-decoration none
&:before
font-size 20px
font-family remixicon
absolute-center(font-size-base)
&:hover
color white
.article-share-twitter
@extend $article-share-link
&:before
content "\f068"
&:hover
background twitter-color
text-shadow 0 1px darken(twitter-color, 20%)
.article-share-facebook
@extend $article-share-link
&:before
content "\ec30"
&:hover
background facebook-color
text-shadow 0 1px darken(facebook-color, 20%)
.article-share-pinterest
@extend $article-share-link
&:before
content "\eea8"
&:hover
background pinterest-color
text-shadow 0 1px darken(pinterest-color, 20%)
.article-share-google
@extend $article-share-link
&:before
content "\ed15"
&:hover
background google-color
text-shadow 0 1px darken(google-color, 20%)
@import "tocbot"
@import "gallery"
@import "albums"
@import "justifiedGallery"