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.

367 lines
5.9KB

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