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.
 
 
 

338 lines
5.9 KiB

@import "compass/css3"
@import "compass/utilities/general/clearfix"
// COLORS & BACKGROUNDS --------------------------------------------------------
$yellow: #fdf485
$orange: #ff8000
$red: #ff4040
$blue: #4ae
$green: #61c227
$gray: #ccc
$light-gray: #eeeeee
$dark-gray: #222
$color: $gray
$bg-color: $dark-gray
$heading-color: $orange
$link-color: $blue
// TYPE --------------------------------------------------------
$body-font-family: "Karla", "lucida grande", sans-serif
$heading-font-family: "Montserrat", "Helvetica", sans-serif
$code-font-family: "Karla", "lucida grande", sans-serif
$font-size: 18px
// LAYOUT --------------------------------------------------------
$gutter: 40px
$base-line-height: 1.7em
$max-column-width: 800px
// UI COMPONENTS --------------------------------------------------------
$radius: 6px
/* Typography
*----------------------------------------------- */
body,
input,
textarea
color: $color
font-size: $font-size
font-family: $body-font-family
h1,
h2,
h3,
h4,
h5,
h6
line-height: 1.2em
color: $heading-color
font-family: $heading-font-family
font-weight: normal
h1
font-size: 72px
line-height: 1em
h2
font-size: 36px
line-height: 1.2em
margin-bottom: 0.3em
text-transform: uppercase
h3
margin-bottom: 0.5em
color: $heading-color
font-size: $font-size
letter-spacing: 0.1em
text-align: center
text-transform: uppercase
h4
font-size: $font-size
p
line-height: $base-line-height
margin-bottom: $base-line-height
ol
list-style-type: decimal
ul, ol
margin: 0 0 1.25em 0
li
margin-bottom: 2em
line-height: $base-line-height - 0.2
&.last-list-item
border-bottom: none
dt
font-weight: bold
dd
margin-bottom: 1.625em
strong
font-weight: bold
i
font-style: italic
em
font-style: normal
pre
padding: $gutter/4
margin-top: $gutter/8
margin-bottom: $gutter/4
background-color: darken($bg-color, 5%)
font-family: $code-font-family
line-height: 1.5em
+border-radius($radius)
overflow-x: auto
code, kbd
padding: 2px 4px
color: desaturate($orange, 65%)
background-color: darken($bg-color, 5%)
font-family: $code-font-family
+border-radius($radius)
code
position: relative
top: -1px
pre code
top: 0
padding: 0
background: transparent
a
color: $link-color
text-decoration: none
&:hover
color: lighten($link-color, 30%)
::-moz-selection,
::selection
background: $orange
color: white
.sub-point
display: block
font-size: $font-size - 4
code
font-size: $font-size - 6
padding: $gutter/20
/* -- Layout ------------------------------------------------------------------ */
body
margin: 0
padding: 0
background: $bg-color
.section
padding: 0 0 40px 0
+pie-clearfix
&.last
border-bottom: none
.section-header
position: relative
z-index: 1
margin-top: 0
margin-bottom: $gutter * 2
color: lighten($bg-color, 12%)
text-align: center
font-size: 72px
&:before
border-top: 2px solid lighten($bg-color, 12%)
content: ""
margin: 0 auto // this centers the line to the full width specified
position: absolute // positioning must be absolute here, and relative positioning must be applied to the parent
top: 50%
left: 0
right: 0
bottom: 0
z-index: -1
.line-cover
/* to hide the lines from behind the text, you have to set the background color the same as the container */
background: $bg-color
padding: 0 15px
.section-content
margin: 0 auto
padding-bottom: $gutter
max-width: $max-column-width
.row
+pie-clearfix
/* -- Sections ------------------------------------------------------------------ */
/* -- Intro -- */
.intro-section
text-align: center
.logo
color: white
margin-bottom: 0.07em
.version
color: $heading-color
.author
margin-top: -9px
padding-left: 23px
line-height: 1.2em
.author-links
font-size: $font-size - 2
.lead
font-size: $font-size + 4
/* -- Examples -- */
.examples-section
text-align: center
.image-row
+pie-clearfix
margin-bottom: $gutter/2
.example-image-link
display: inline-block
margin: 0 $gutter/4 $gutter/2 $gutter/4
line-height: 0
+border-radius($radius)
border: 4px solid transparent
+transition(all .1s ease-out)
&:hover
border: 4px solid $link-color
.example-image
+border-radius(2px)
/* -- Download -- */
.download-section
text-align: center
.download-button
display: block
max-width: 300px
margin: 0 auto $gutter/2 auto
padding-top: $gutter/4 + 10
padding-bottom: $gutter/4
background-color: darken($bg-color, 10%)
border: 4px solid $bg-color
+border-radius($radius)
+transition(all .1s ease-out)
+pie-clearfix
&:hover
border-color: $link-color
background-color: #444
.file
font-size: 36px
color: white
line-height: 1em
.version
font-size: 24px
color: $link-color
/* -- Donate -- */
fieldset
border: none
.donate-button-form
text-align: center
.donate-button
border: 4px solid rgba(0, 0, 0, 0)
+border-radius($radius)
+transition(all .1s ease-out)
&:hover
background-color: #444
border-color: $link-color
/* -- Credits -- */
.credits-section
text-align: center
/* -- Sharing -- */
.sharing-section
position: fixed
top: 20px
right: 0
/* -- Responsive design -------------------------------------------------------------- */
@media only screen and (max-width : 640px)
body
font-size: $font-size - 4
h1
font-size: 48px // from 72px
h2
font-size: 26px // from 48px
h3
font-size: 16px // from 18px
ol
list-style-position: inside
code,
kbd,
pre,
pre code
font-size: $font-size - 7
.sub-point
font-size: $font-size - 6
code
font-size: $font-size - 9
.lead
font-size: $font-size - 2
.section
padding-bottom: $gutter/2
margin-bottom: $gutter/2
.author
margin-top: -5px
padding-left: 30px
.author-links
font-size: $font-size - 6