The original lightbox script, finally on github. http://lokeshdhakar.com/projects/lightbox2/
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.

389 lines
6.1KB

  1. @import "compass/css3"
  2. @import "compass/utilities/general/clearfix"
  3. @import "normalize"
  4. // VARIABLES -------------------------------------------------------------------
  5. // == COLORS & BACKGROUNDS
  6. $yellow: #fdf485
  7. $orange: #e67e39
  8. $red: #ff4040
  9. $blue: #4ae
  10. $green: #61c227
  11. $gray: #777
  12. $light-gray: #f3f3f3
  13. $dark-gray: #222
  14. $color: #666
  15. $bg-color: #fff
  16. $heading-color: $dark-gray
  17. $section-heading-color: $orange
  18. $link-color: $blue
  19. $code-color: $color
  20. $code-bg-color: darken($bg-color, 4%)
  21. $border-color: darken($bg-color, 4%)
  22. $backdrop-bg-color: darken($bg-color, 4%)
  23. $header-color: $color
  24. $footer-color: $color
  25. //== TYPE
  26. $body-font-family: "Karla", "lucida grande", sans-serif
  27. $heading-font-family: "Montserrat", "Helvetica", sans-serif
  28. $code-font-family: "Karla", "lucida grande", sans-serif
  29. //== LAYOUT
  30. $gutter: 30px
  31. $max-column-width: 600px
  32. $backdrop-z-index: 5
  33. $content-z-index: 10
  34. $sharing-z-index: 20
  35. //== UI COMPONENTS
  36. $radius: 6px
  37. /* Typography
  38. *----------------------------------------------- */
  39. html
  40. font: 87% / 1.5 $body-font-family, sans-serif
  41. font-weight: 400
  42. @media (min-width: 40rem)
  43. html
  44. font-size: 100%
  45. @media (min-width: 64rem)
  46. html
  47. font-size: 106%
  48. body
  49. color: $color
  50. background-color: $bg-color
  51. h1, h2, h3, h4, h5
  52. color: $heading-color
  53. line-height: 1.2em
  54. font-family: $heading-font-family
  55. font-weight: 700
  56. h1
  57. font-size: 3.5rem
  58. margin: 0 0 0.1em 0
  59. @media (min-width: 40rem)
  60. h1
  61. font-size: 4.5rem
  62. @media (min-width: 64rem)
  63. h1
  64. font-size: 5rem
  65. h2
  66. color: $section-heading-color
  67. margin-top: 0
  68. margin-bottom: 1.5rem
  69. font-size: 1.5rem
  70. text-transform: uppercase
  71. @media (min-width: 40rem)
  72. h2
  73. font-size: 2rem
  74. h3
  75. font-size: 1.2rem
  76. margin-bottom: .5rem
  77. blockquote
  78. margin: 0
  79. p
  80. color: #bbb
  81. font-style: italic
  82. margin-bottom: 1.5rem
  83. cite
  84. color: #bbb
  85. p
  86. margin: 0 auto 2em auto
  87. text-align: left
  88. .lead
  89. max-width: 45rem
  90. margin-bottom: 1.1rem
  91. font-size: 1.25rem
  92. ol
  93. list-style-type: decimal
  94. ul, ol
  95. margin: 0 0 1.25em 0
  96. li
  97. margin-bottom: 2em
  98. &.last-list-item
  99. border-bottom: none
  100. dt
  101. font-weight: bold
  102. dd
  103. margin-bottom: 1.625em
  104. strong
  105. font-weight: bold
  106. i
  107. font-style: italic
  108. em
  109. font-style: normal
  110. a
  111. color: $link-color
  112. text-decoration: none
  113. &:hover
  114. text-decoration: underline
  115. ::-moz-selection,
  116. ::selection
  117. background: $orange
  118. color: white
  119. .sub-point
  120. display: block
  121. font-size: 0.75rem
  122. /* Code
  123. * ========================================================================== */
  124. code
  125. color: $code-color
  126. background-color: $code-bg-color
  127. +border-radius($radius)
  128. font-family: Consolas, Courier, monospace
  129. font-size: 0.9rem
  130. padding: 0.1rem 0.3rem
  131. position: relative
  132. top: -1px
  133. pre
  134. background-color: $code-bg-color
  135. +border-radius($radius)
  136. padding: 0 0.5rem 0.1rem 0.5rem
  137. code
  138. padding: 0
  139. font-size: 0.8rem
  140. border: none
  141. /* Lists
  142. * ========================================================================== */
  143. ul
  144. margin: 0
  145. text-align: left
  146. @media (min-width: 40rem)
  147. ul
  148. display: inline-block
  149. /* Buttons
  150. * ========================================================================== */
  151. .button
  152. display: block
  153. padding: 0.7rem 2rem
  154. margin-bottom: 0.5rem
  155. border: none
  156. color: #fff
  157. background-color: $link-color
  158. font-size: 1.1rem
  159. font-weight: bold
  160. text-transform: uppercase
  161. +border-radius($radius)
  162. vertical-align: middle
  163. white-space: nowrap
  164. &:hover
  165. background: darken($link-color, 10%)
  166. text-decoration: none
  167. @media (min-width: 40rem)
  168. .button
  169. display: inline-block
  170. margin: 0 0.25rem
  171. .button-minor
  172. padding: 0.3rem 1rem
  173. border: 2px solid $link-color
  174. color: $link-color
  175. background-color: transparent
  176. font-size: 0.8rem
  177. &:hover
  178. color: white
  179. background: $link-color
  180. /* Elements
  181. * ========================================================================== */
  182. hr
  183. border: 0
  184. border-top: 2px solid $border-color
  185. margin: 1rem auto 1.5rem auto
  186. width: 3rem
  187. /* -- Layout ------------------------------------------------------------------ */
  188. *, *:before, *:after
  189. +box-sizing("border-box")
  190. body
  191. margin: 0
  192. padding: 0
  193. background: $bg-color
  194. section
  195. border-top: 2px solid $border-color
  196. text-align: center
  197. padding: 2rem 0
  198. &:first-of-type
  199. border-top: none
  200. @media (min-width: 40rem)
  201. section
  202. padding: 4rem 0
  203. .container
  204. margin: 0 auto
  205. max-width: 40rem
  206. width: 90%
  207. .row
  208. +pie-clearfix
  209. //== Header
  210. .backdrop
  211. position: fixed
  212. z-index: $backdrop-z-index
  213. width: 100%
  214. height: 100%
  215. background-color: $backdrop-bg-color
  216. .picture-icon
  217. width: 2.7rem
  218. height: 2.7rem
  219. margin-right: 0.5rem
  220. +transition(transform .4s cubic-bezier(0.510, 1.285, 0.855, 1.185))
  221. &:hover
  222. +scale(3)
  223. @media (min-width: 40rem)
  224. .picture-icon
  225. width: 3.4rem
  226. height: 3.4rem
  227. @media (min-width: 64rem)
  228. .picture-icon
  229. width: 3.75rem
  230. height: 3.75rem
  231. header
  232. padding-top: 5rem
  233. text-align: center
  234. color: $header-color
  235. p
  236. text-align: center
  237. @media (min-width: 40rem)
  238. header
  239. padding-top: 6.5rem
  240. .primary-actions
  241. margin-bottom: 1.5rem
  242. .credits
  243. p
  244. text-align: center
  245. .button
  246. margin-top: 0.5rem
  247. //== Content
  248. .content
  249. position: absolute
  250. z-index: $content-z-index
  251. top: 28rem
  252. width: 100%
  253. border-top: 1px solid darken($border-color, 5%)
  254. background-color: $bg-color
  255. @media (min-width: 40rem)
  256. .content
  257. top: 34rem
  258. /* -- Examples -- */
  259. .example-image-link
  260. display: inline-block
  261. padding: 4px
  262. margin: 0 0.5rem 1rem 0.5rem
  263. background-color: $bg-color
  264. line-height: 0
  265. +border-radius($radius)
  266. +transition(background-color .5s ease-out)
  267. &:hover
  268. background-color: $link-color
  269. +transition(background-color 0)
  270. .example-image
  271. width: 7rem
  272. +border-radius($radius - 1)
  273. /* -- How to use -- */
  274. .how-to-use-section
  275. p,
  276. ol,
  277. ul,
  278. pre
  279. text-align: left
  280. /* -- Donate -- */
  281. fieldset
  282. border: none
  283. .donate-button
  284. width: 100%
  285. @media (min-width: 40rem)
  286. .donate-button
  287. width: auto
  288. /* -- Sharing -- */
  289. .sharing-section
  290. position: fixed
  291. z-index: $sharing-z-index
  292. top: 20px
  293. right: 0