article.styl 8.0 KB

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