article.styl 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. .article
  2. margin: block-margin 0
  3. .article-inner
  4. @extend $block
  5. overflow: hidden
  6. .article-banner
  7. width:100%
  8. height:auto
  9. .article-meta
  10. clearfix()
  11. & > div
  12. margin-bottom: 5px
  13. .article-date, .article-category
  14. margin-right: 10px
  15. color: color-default + #444
  16. a
  17. color: color-default + #444
  18. &:hover
  19. color: color-link
  20. .article-date
  21. @extend $block-caption
  22. float: left
  23. .article-category
  24. float: left
  25. line-height: 1em
  26. color: color-default
  27. .fa-angle-right
  28. margin: 0 5px
  29. .article-category-link
  30. @extend $block-caption
  31. .article-header
  32. padding: article-padding article-padding 0
  33. .article-title
  34. display: block
  35. margin-bottom: 14px
  36. .article-title
  37. text-decoration: none
  38. font-size: 2em
  39. color: color-default
  40. line-height: line-height-title
  41. transition: color 0.2s
  42. a&:visited
  43. color: color-default
  44. a&:hover
  45. color: color-link
  46. .article-entry
  47. @extend $base-style
  48. clearfix()
  49. color: color-default
  50. padding: 0 article-padding
  51. line-height: line-height
  52. p, table
  53. line-height: line-height
  54. margin: line-height 0
  55. h1, h2, h3, h4, h5, h6
  56. font-weight: bold
  57. h1, h2, h3, h4, h5, h6
  58. line-height: line-height-title
  59. margin: line-height-title 0
  60. a
  61. color: color-link
  62. text-decoration: none
  63. &:hover
  64. text-decoration: underline
  65. ul, ol, dl
  66. margin-top: line-height
  67. margin-bottom: line-height
  68. img, video
  69. max-width: 100%
  70. height: auto
  71. display: block
  72. margin: auto
  73. iframe
  74. border: none
  75. table
  76. width: 100%
  77. border-collapse: collapse
  78. border-spacing: 0
  79. th
  80. font-weight: bold
  81. border-bottom: 3px solid color-border
  82. padding-bottom: 0.5em
  83. td
  84. border-bottom: 1px solid color-border
  85. padding: 10px 0
  86. blockquote
  87. position: relative
  88. font-family: font-serif
  89. font-size: 1.1em
  90. margin: 0 -20px
  91. padding: 10px 20px 10px 54px
  92. background: #fcfcfc
  93. border-left: 4px solid #eee
  94. &:before
  95. top: 20px
  96. left: 10px
  97. content: "\f10d"
  98. color: #e2e2e2
  99. font-size: 32px;
  100. font-family: FontAwesome
  101. text-align: center
  102. position: absolute
  103. footer
  104. font-size: font-size
  105. margin: line-height 0
  106. font-family: font-sans
  107. cite
  108. &:before
  109. content: "—"
  110. padding: 0 0.5em
  111. .pullquote
  112. text-align: left
  113. width: 45%
  114. margin: 0
  115. &.left
  116. margin-left: 0.5em
  117. margin-right: 1em
  118. &.right
  119. margin-right: 0.5em
  120. margin-left: 1em
  121. .caption
  122. color: color-grey
  123. display: block
  124. font-size: 0.9em
  125. margin-top: 0.5em
  126. position: relative
  127. text-align: center
  128. // http://webdesignerwall.com/tutorials/css-elastic-videos
  129. .video-container
  130. position: relative
  131. padding-top: (9 / 16 * 100)% // 16:9 ratio
  132. height: 0
  133. overflow: hidden
  134. iframe, object, embed
  135. position: absolute
  136. top: 0
  137. left: 0
  138. width: 100%
  139. height: 100%
  140. margin-top: 0
  141. .article-more-link a
  142. display: inline-block
  143. line-height: 1em
  144. padding: 6px 15px
  145. border-radius: 15px
  146. background: color-background
  147. color: color-grey
  148. text-shadow: 0 1px #fff
  149. text-decoration: none
  150. &:hover
  151. background: color-link
  152. color: #fff
  153. text-decoration: none
  154. text-shadow: 0 1px darken(color-link, 20%)
  155. .article-footer
  156. clearfix()
  157. font-size: 0.85em
  158. line-height: line-height
  159. border-top: 1px solid color-border
  160. padding-top: line-height
  161. margin: 0 article-padding article-padding
  162. a
  163. color: color-grey
  164. text-decoration: none
  165. &:hover
  166. color: color-default
  167. .article-tag-list-item
  168. float: left
  169. margin-right: 10px
  170. .article-tag-list-link
  171. &:before
  172. content: "#"
  173. .article-comment-link
  174. float: right
  175. &:before
  176. content: "\f075"
  177. font-family: FontAwesome
  178. padding-right: 8px
  179. .article-share-link
  180. cursor: pointer
  181. float: right
  182. margin-left: 20px
  183. &:before
  184. content: "\f064"
  185. font-family: FontAwesome
  186. padding-right: 6px
  187. #article-nav
  188. clearfix()
  189. position: relative
  190. @media mq-normal
  191. margin: block-margin 0
  192. &:before
  193. absolute-center(8px)
  194. content: ""
  195. border-radius: 50%
  196. background: color-default + #222
  197. .article-nav-link-wrap
  198. text-decoration: none
  199. color: color-grey
  200. box-sizing: border-box
  201. margin-top: block-margin
  202. text-align: center
  203. display: block
  204. &:hover
  205. color: color-default
  206. @media mq-normal
  207. width: 50%
  208. margin-top: 0
  209. #article-nav-newer
  210. @media mq-normal
  211. float: left
  212. text-align: right
  213. padding-right: 20px
  214. #article-nav-older
  215. @media mq-normal
  216. float: right
  217. text-align: left
  218. padding-left: 20px
  219. .article-nav-caption
  220. letter-spacing: 2px
  221. line-height: 1em
  222. font-weight: bold
  223. color: color-default
  224. text-transform: uppercase
  225. #article-nav-newer &
  226. margin-right: -2px
  227. .article-nav-title
  228. font-size: 0.85em
  229. line-height: line-height
  230. margin-top: 0.5em
  231. .article-share-box
  232. position: absolute
  233. display: none
  234. background: #fff
  235. box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1)
  236. border-radius: 3px
  237. margin-left: -145px
  238. overflow: hidden
  239. z-index: 1
  240. &.on
  241. display: block
  242. .article-share-input
  243. width: 100%
  244. background: none
  245. box-sizing: border-box
  246. font: 14px font-sans
  247. padding: 0 15px
  248. color: color-default
  249. outline: none
  250. border: 1px solid color-border
  251. border-radius: 3px 3px 0 0
  252. height: 36px
  253. line-height: 36px
  254. .article-share-links
  255. clearfix()
  256. background: color-background
  257. $article-share-link
  258. width: 50px
  259. height: 36px
  260. display: block
  261. float: left
  262. position: relative
  263. color: #999
  264. text-shadow: 0 1px #fff
  265. &:before
  266. font-size: 20px
  267. absolute-center(@font-size)
  268. text-align: center
  269. &:hover
  270. color: #fff
  271. .article-share-twitter
  272. @extend $article-share-link
  273. &:hover
  274. background: color-twitter
  275. text-shadow: 0 1px darken(color-twitter, 20%)
  276. .article-share-facebook
  277. @extend $article-share-link
  278. &:hover
  279. background: color-facebook
  280. text-shadow: 0 1px darken(color-facebook, 20%)
  281. .article-share-pinterest
  282. @extend $article-share-link
  283. &:hover
  284. background: color-pinterest
  285. text-shadow: 0 1px darken(color-pinterest, 20%)
  286. .article-share-google
  287. @extend $article-share-link
  288. &:hover
  289. background: color-google
  290. text-shadow: 0 1px darken(color-google, 20%)
  291. .article-gallery
  292. background: #000
  293. position: relative
  294. .article-gallery-photos
  295. position: relative
  296. overflow: hidden
  297. .article-gallery-img
  298. display: none
  299. max-width: 100%
  300. &:first-child
  301. display: block
  302. &.loaded
  303. position: absolute
  304. display: block
  305. img
  306. display: block
  307. max-width: 100%
  308. margin: 0 auto
  309. /* toc */
  310. .toc-article
  311. background #F9F9F9
  312. margin 2em 0 0 0.2em
  313. padding 1em
  314. border-radius 0px
  315. .toc-title
  316. font-size 120%
  317. strong
  318. padding 0.3em 1
  319. ol.toc
  320. width 100%
  321. margin 1em 2em 0 0
  322. #toc
  323. line-height 1em
  324. font-size 0.8em
  325. float right
  326. .toc
  327. padding 0
  328. li
  329. list-style-type none
  330. .toc-child
  331. padding-left 0em
  332. #toc.toc-aside
  333. display none
  334. width 13%
  335. position fixed
  336. right 2%
  337. top 320px
  338. overflow hidden
  339. line-height 1.5em
  340. font-size 1em
  341. color color-heading
  342. opacity .6
  343. transition opacity 1s ease-out
  344. strong
  345. padding 0.3em 0
  346. color color-font
  347. &:hover
  348. transition opacity .3s ease-out
  349. opacity 1
  350. a
  351. transition color 1s ease-out
  352. &:hover
  353. color color-theme
  354. transition color .3s ease-out