hexo-theme-ayer/source-src/css/_partial/article.styl

276 lines
4.9 KiB
Stylus
Raw Normal View History

2019-12-03 11:37:44 +00:00
.article
padding 5rem 0 3rem
2019-12-04 11:45:48 +00:00
font-size 110%
2019-12-03 11:37:44 +00:00
.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
2020-03-21 09:20:59 +00:00
display inline-block
margin-left 10px
padding 0 10px
border-radius 4px
font-style normal
2020-05-03 01:53:04 +00:00
font-size 12px
2020-03-21 09:20:59 +00:00
background-color #ea434a
color #fff
2020-05-03 01:53:04 +00:00
height 22px
line-height 24px
2020-03-21 09:20:59 +00:00
transform translateY(-8px)
2019-12-03 11:37:44 +00:00
.article-meta
clearfix()
.article-date
@extend $block-caption
&::before
content '\eaf2'
2020-01-13 12:58:07 +00:00
margin-right .15rem
2019-12-03 11:37:44 +00:00
font-family remixicon
opacity .5
.article-category
display inline-block
margin-left 1.5rem
&:before
content "\efde"
font-family remixicon
2020-01-13 12:58:07 +00:00
margin-right .15rem
2019-12-03 11:37:44 +00:00
opacity 0.6
.article-category-link
@extend $block-caption
.archive-article-header
+ .article-category
margin-left 0
.article-entry
2020-07-05 12:52:25 +00:00
font-size 103%
2020-01-07 12:13:38 +00:00
margin-top .5rem
2020-02-12 06:02:20 +00:00
line-height 1.6
2019-12-03 11:37:44 +00:00
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
2021-07-01 02:14:42 +00:00
color froth
2019-12-03 11:37:44 +00:00
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
2020-05-03 01:53:04 +00:00
font-size 34px
2019-12-03 11:37:44 +00:00
font-weight bold
margin-bottom 3rem
text-decoration none
color body-color
padding-left 2rem
border-left 4px solid body-color
.article-author
display block
font-size 20px
margin-bottom 3rem
text-decoration none
color body-color
padding-left 2rem
2019-12-03 11:37:44 +00:00
.article-footer
clearfix()
2020-02-07 04:42:33 +00:00
.declare
margin 0 0 1rem
padding-bottom 1rem
2020-02-07 07:12:49 +00:00
color #999
border-bottom 1px solid #f6f6f6
2020-02-07 04:42:33 +00:00
ul
list-style none
li
list-style none
2019-12-03 11:37:44 +00:00
// 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
2020-02-07 04:42:33 +00:00
padding-top 1.5rem
margin 1rem 0 2rem
2020-02-07 07:12:49 +00:00
border-top border-width solid #eee
2019-12-03 11:37:44 +00:00
.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%)
2021-07-01 02:14:42 +00:00
.pswp__caption__center
text-align center !important
2019-12-03 11:37:44 +00:00
@import "tocbot"
@import "gallery"
@import "albums"
2019-12-04 12:29:34 +00:00
@import "justifiedGallery"