article.styl 8.1 KB

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