256 lines
4.5 KiB
Stylus
256 lines
4.5 KiB
Stylus
|
|
||
|
|
.article
|
||
|
|
padding 5rem 0 3rem
|
||
|
|
.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
|
||
|
|
position absolute
|
||
|
|
top 0
|
||
|
|
left -3rem
|
||
|
|
color: #ea434a
|
||
|
|
&>i
|
||
|
|
font-size 2rem
|
||
|
|
line-height 1.7
|
||
|
|
|
||
|
|
|
||
|
|
.article-meta
|
||
|
|
clearfix()
|
||
|
|
|
||
|
|
.article-date
|
||
|
|
@extend $block-caption
|
||
|
|
&::before
|
||
|
|
content '\eaf2'
|
||
|
|
margin-right .5rem
|
||
|
|
font-family remixicon
|
||
|
|
opacity .5
|
||
|
|
|
||
|
|
.article-category
|
||
|
|
display inline-block
|
||
|
|
margin-left 1.5rem
|
||
|
|
&:before
|
||
|
|
content "\efde"
|
||
|
|
font-family remixicon
|
||
|
|
margin-right .5rem
|
||
|
|
opacity 0.6
|
||
|
|
.article-category-link
|
||
|
|
@extend $block-caption
|
||
|
|
|
||
|
|
.archive-article-header
|
||
|
|
+ .article-category
|
||
|
|
margin-left 0
|
||
|
|
|
||
|
|
.article-entry
|
||
|
|
font-size 110%
|
||
|
|
margin-top 1rem
|
||
|
|
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 1.8em
|
||
|
|
font-weight bold
|
||
|
|
margin-bottom 3rem
|
||
|
|
text-decoration none
|
||
|
|
color body-color
|
||
|
|
padding-left 2rem
|
||
|
|
border-left 4px solid body-color
|
||
|
|
|
||
|
|
.article-footer
|
||
|
|
clearfix()
|
||
|
|
margin-top 3rem
|
||
|
|
|
||
|
|
// 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 3rem
|
||
|
|
margin-top 5rem
|
||
|
|
border-top border-width border-color solid
|
||
|
|
|
||
|
|
.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"
|
||
|
|
|
||
|
|
@media (max-width: 768px)
|
||
|
|
.article-entry
|
||
|
|
font-size 120%
|