mirror of https://github.com/IoTcat/blog.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
357 lines
6.7 KiB
357 lines
6.7 KiB
.article |
|
margin: block-margin 0 |
|
|
|
.article-inner |
|
@extend $block |
|
overflow: hidden |
|
|
|
.article-meta |
|
clearfix() |
|
|
|
.article-date |
|
@extend $block-caption |
|
float: left |
|
|
|
.article-category |
|
float: left |
|
line-height: 1em |
|
color: #ccc |
|
text-shadow: 0 1px #fff |
|
margin-left: 8px |
|
&:before |
|
content: "\2022" |
|
|
|
.article-category-link |
|
@extend $block-caption |
|
margin: 0 12px 1em |
|
|
|
.article-header |
|
padding: article-padding article-padding 0 |
|
|
|
.article-title |
|
text-decoration: none |
|
font-size: 2em |
|
font-weight: bold |
|
color: color-default |
|
line-height: line-height-title |
|
transition: color 0.2s |
|
a&:hover |
|
color: color-link |
|
|
|
.article-entry |
|
@extend $base-style |
|
clearfix() |
|
color: color-default |
|
padding: 0 article-padding |
|
p, table |
|
line-height: line-height |
|
margin: line-height 0 |
|
h1, h2, h3, h4, h5, h6 |
|
font-weight: bold |
|
h1, h2, h3, h4, h5, h6 |
|
line-height: line-height-title |
|
margin: line-height-title 0 |
|
a |
|
color: color-link |
|
text-decoration: none |
|
&:hover |
|
text-decoration: underline |
|
ul, ol, dl |
|
margin-top: line-height |
|
margin-bottom: line-height |
|
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: bold |
|
border-bottom: 3px solid color-border |
|
padding-bottom: 0.5em |
|
td |
|
border-bottom: 1px solid color-border |
|
padding: 10px 0 |
|
blockquote |
|
font-family: font-serif |
|
font-size: 1.4em |
|
margin: line-height 20px |
|
text-align: center |
|
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-link |
|
color: #fff |
|
text-decoration: none |
|
text-shadow: 0 1px darken(color-link, 20%) |
|
|
|
.article-footer |
|
clearfix() |
|
font-size: 0.85em |
|
line-height: line-height |
|
border-top: 1px solid color-border |
|
padding-top: line-height |
|
margin: 0 article-padding article-padding |
|
a |
|
color: color-grey |
|
text-decoration: none |
|
&:hover |
|
color: color-default |
|
|
|
.article-tag-list-item |
|
float: left |
|
margin-right: 10px |
|
|
|
.article-tag-list-link |
|
&:before |
|
content: "#" |
|
|
|
.article-comment-link |
|
float: right |
|
&:before |
|
content: "\f075" |
|
font-family: font-icon |
|
padding-right: 8px |
|
|
|
.article-share-link |
|
cursor: pointer |
|
float: right |
|
margin-left: 20px |
|
&:before |
|
content: "\f064" |
|
font-family: font-icon |
|
padding-right: 6px |
|
|
|
#article-nav |
|
clearfix() |
|
position: relative |
|
@media mq-normal |
|
margin: block-margin 0 |
|
&:before |
|
absolute-center(8px) |
|
content: "" |
|
border-radius: 50% |
|
background: color-border |
|
box-shadow: 0 1px 2px #fff |
|
|
|
.article-nav-link-wrap |
|
text-decoration: none |
|
text-shadow: 0 1px #fff |
|
color: color-grey |
|
box-sizing: border-box |
|
margin-top: block-margin |
|
text-align: center |
|
display: block |
|
&:hover |
|
color: color-default |
|
@media mq-normal |
|
width: 50% |
|
margin-top: 0 |
|
|
|
#article-nav-newer |
|
@media mq-normal |
|
float: left |
|
text-align: right |
|
padding-right: 20px |
|
|
|
#article-nav-older |
|
@media mq-normal |
|
float: right |
|
text-align: left |
|
padding-left: 20px |
|
|
|
.article-nav-caption |
|
text-transform: uppercase |
|
letter-spacing: 2px |
|
color: color-border |
|
line-height: 1em |
|
font-weight: bold |
|
#article-nav-newer & |
|
margin-right: -2px |
|
|
|
.article-nav-title |
|
font-size: 0.85em |
|
line-height: line-height |
|
margin-top: 0.5em |
|
|
|
.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-shadow: 0 1px #fff |
|
&:before |
|
font-size: 20px |
|
font-family: font-icon |
|
absolute-center(@font-size) |
|
text-align: center |
|
&: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-ctrl |
|
position: absolute |
|
top: 0 |
|
height: 100% |
|
width: 60px |
|
color: #fff |
|
text-shadow: 0 0 3px rgba(0, 0, 0, 0.3) |
|
opacity: 0.3 |
|
transition: opacity 0.2s |
|
cursor: pointer |
|
&:hover |
|
opacity: 0.8 |
|
&:before |
|
font-size: 30px |
|
font-family: font-icon |
|
position: absolute |
|
top: 50% |
|
margin-top: @font-size * -0.5 |
|
|
|
.article-gallery-prev |
|
@extend $article-gallery-ctrl |
|
left: 0 |
|
&:before |
|
content: "\f053" |
|
left: 15px |
|
|
|
.article-gallery-next |
|
@extend $article-gallery-ctrl |
|
right: 0 |
|
&:before |
|
content: "\f054" |
|
right: 15px*/ |