article.styl 6.1 KB

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