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.

339 lines
5.9KB

  1. @import "compass/css3"
  2. @import "compass/utilities/general/clearfix"
  3. // COLORS & BACKGROUNDS --------------------------------------------------------
  4. $yellow: #fdf485
  5. $orange: #ff8000
  6. $red: #ff4040
  7. $blue: #4ae
  8. $green: #61c227
  9. $gray: #ccc
  10. $light-gray: #eeeeee
  11. $dark-gray: #222
  12. $color: $gray
  13. $bg-color: $dark-gray
  14. $heading-color: $orange
  15. $link-color: $blue
  16. // TYPE --------------------------------------------------------
  17. $body-font-family: "Karla", "lucida grande", sans-serif
  18. $heading-font-family: "Montserrat", "Helvetica", sans-serif
  19. $code-font-family: "Karla", "lucida grande", sans-serif
  20. $font-size: 18px
  21. // LAYOUT --------------------------------------------------------
  22. $gutter: 40px
  23. $base-line-height: 1.7em
  24. $max-column-width: 800px
  25. // UI COMPONENTS --------------------------------------------------------
  26. $radius: 6px
  27. /* Typography
  28. *----------------------------------------------- */
  29. body,
  30. input,
  31. textarea
  32. color: $color
  33. font-size: $font-size
  34. font-family: $body-font-family
  35. h1,
  36. h2,
  37. h3,
  38. h4,
  39. h5,
  40. h6
  41. line-height: 1.2em
  42. color: $heading-color
  43. font-family: $heading-font-family
  44. font-weight: normal
  45. h1
  46. font-size: 72px
  47. line-height: 1em
  48. h2
  49. font-size: 36px
  50. line-height: 1.2em
  51. margin-bottom: 0.3em
  52. text-transform: uppercase
  53. h3
  54. margin-bottom: 0.5em
  55. color: $heading-color
  56. font-size: $font-size
  57. letter-spacing: 0.1em
  58. text-align: center
  59. text-transform: uppercase
  60. h4
  61. font-size: $font-size
  62. p
  63. line-height: $base-line-height
  64. margin-bottom: $base-line-height
  65. ol
  66. list-style-type: decimal
  67. ul, ol
  68. margin: 0 0 1.25em 0
  69. li
  70. margin-bottom: 2em
  71. line-height: $base-line-height - 0.2
  72. &.last-list-item
  73. border-bottom: none
  74. dt
  75. font-weight: bold
  76. dd
  77. margin-bottom: 1.625em
  78. strong
  79. font-weight: bold
  80. i
  81. font-style: italic
  82. em
  83. font-style: normal
  84. pre
  85. padding: $gutter/4
  86. margin-top: $gutter/8
  87. margin-bottom: $gutter/4
  88. background-color: darken($bg-color, 5%)
  89. font-family: $code-font-family
  90. line-height: 1.5em
  91. +border-radius($radius)
  92. overflow-x: auto
  93. code, kbd
  94. padding: 2px 4px
  95. color: desaturate($orange, 65%)
  96. background-color: darken($bg-color, 5%)
  97. font-family: $code-font-family
  98. +border-radius($radius)
  99. code
  100. position: relative
  101. top: -1px
  102. pre code
  103. top: 0
  104. padding: 0
  105. background: transparent
  106. a
  107. color: $link-color
  108. text-decoration: none
  109. &:hover
  110. color: lighten($link-color, 30%)
  111. ::-moz-selection,
  112. ::selection
  113. background: $orange
  114. color: white
  115. .sub-point
  116. display: block
  117. font-size: $font-size - 4
  118. code
  119. font-size: $font-size - 6
  120. padding: $gutter/20
  121. /* -- Layout ------------------------------------------------------------------ */
  122. body
  123. margin: 0
  124. padding: 0
  125. background: $bg-color
  126. .section
  127. padding: 0 0 40px 0
  128. +pie-clearfix
  129. &.last
  130. border-bottom: none
  131. .section-header
  132. position: relative
  133. z-index: 1
  134. margin-top: 0
  135. margin-bottom: $gutter * 2
  136. color: lighten($bg-color, 12%)
  137. text-align: center
  138. font-size: 72px
  139. &:before
  140. border-top: 2px solid lighten($bg-color, 12%)
  141. content: ""
  142. margin: 0 auto // this centers the line to the full width specified
  143. position: absolute // positioning must be absolute here, and relative positioning must be applied to the parent
  144. top: 50%
  145. left: 0
  146. right: 0
  147. bottom: 0
  148. z-index: -1
  149. .line-cover
  150. /* to hide the lines from behind the text, you have to set the background color the same as the container */
  151. background: $bg-color
  152. padding: 0 15px
  153. .section-content
  154. margin: 0 auto
  155. padding-bottom: $gutter
  156. max-width: $max-column-width
  157. .row
  158. +pie-clearfix
  159. /* -- Sections ------------------------------------------------------------------ */
  160. /* -- Intro -- */
  161. .intro-section
  162. text-align: center
  163. .logo
  164. color: white
  165. margin-bottom: 0.07em
  166. .version
  167. color: $heading-color
  168. .author
  169. margin-top: -9px
  170. padding-left: 23px
  171. line-height: 1.2em
  172. .author-links
  173. font-size: $font-size - 2
  174. .lead
  175. font-size: $font-size + 4
  176. /* -- Examples -- */
  177. .examples-section
  178. text-align: center
  179. .image-row
  180. +pie-clearfix
  181. margin-bottom: $gutter/2
  182. .example-image-link
  183. display: inline-block
  184. margin: 0 $gutter/4 $gutter/2 $gutter/4
  185. line-height: 0
  186. +border-radius($radius)
  187. border: 4px solid transparent
  188. +transition(all .1s ease-out)
  189. &:hover
  190. border: 4px solid $link-color
  191. .example-image
  192. +border-radius(2px)
  193. /* -- Download -- */
  194. .download-section
  195. text-align: center
  196. .download-button
  197. display: block
  198. max-width: 300px
  199. margin: 0 auto $gutter/2 auto
  200. padding-top: $gutter/4 + 10
  201. padding-bottom: $gutter/4
  202. background-color: darken($bg-color, 10%)
  203. border: 4px solid $bg-color
  204. +border-radius($radius)
  205. +transition(all .1s ease-out)
  206. +pie-clearfix
  207. &:hover
  208. border-color: $link-color
  209. background-color: #444
  210. .file
  211. font-size: 36px
  212. color: white
  213. line-height: 1em
  214. .version
  215. font-size: 24px
  216. color: $link-color
  217. /* -- Donate -- */
  218. fieldset
  219. border: none
  220. .donate-button-form
  221. text-align: center
  222. .donate-button
  223. border: 4px solid rgba(0, 0, 0, 0)
  224. +border-radius($radius)
  225. +transition(all .1s ease-out)
  226. &:hover
  227. background-color: #444
  228. border-color: $link-color
  229. /* -- Credits -- */
  230. .credits-section
  231. text-align: center
  232. /* -- Sharing -- */
  233. .sharing-section
  234. position: fixed
  235. top: 20px
  236. right: 0
  237. /* -- Responsive design -------------------------------------------------------------- */
  238. @media only screen and (max-width : 640px)
  239. body
  240. font-size: $font-size - 4
  241. h1
  242. font-size: 48px // from 72px
  243. h2
  244. font-size: 26px // from 48px
  245. h3
  246. font-size: 16px // from 18px
  247. ol
  248. list-style-position: inside
  249. code,
  250. kbd,
  251. pre,
  252. pre code
  253. font-size: $font-size - 7
  254. .sub-point
  255. font-size: $font-size - 6
  256. code
  257. font-size: $font-size - 9
  258. .lead
  259. font-size: $font-size - 2
  260. .section
  261. padding-bottom: $gutter/2
  262. margin-bottom: $gutter/2
  263. .author
  264. margin-top: -5px
  265. padding-left: 30px
  266. .author-links
  267. font-size: $font-size - 6