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.

386 lines
6.2KB

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