lightbox2/sass/screen.sass

@import "compass/reset"
@import "compass/css3"
@import "compass/utilities/general/clearfix"

@import "variables"

/* Typography
 *----------------------------------------------- */

body,
input,
textarea
  color: $color
  font-size: $fontSize
  font-family: $fontFamily

h1,
h2,
h3,
h4,
h5,
h6
  line-height: 1.2em
  color: $headingColor

h1
  font-size: 72px
  line-height: 1em

h2
  font-size: 48px
  line-height: 1.2em
  margin-bottom: 0.3em

h3
  font-size: $fontSize
  text-transform: uppercase
  letter-spacing: 0.1em
  color: darken($headingColor, 30%)
  margin-bottom: 0.3em

h4
  font-size: $fontSize

p
  line-height: 1.4em
  margin-bottom: 1em

ul, ol
  margin: 0 0 1.25em 0

li
  line-height: 1.4em

dt
  font-weight: bold

dd
  margin-bottom: 1.625em

strong
  font-weight: bold

i
  font-style: italic

pre
  padding: $gutter/4
  margin-bottom: $gutter/2
  background-color: darken($bgColor, 10%)
  font: $fontSize - 6 "Andale Mono", "DejaVu Sans Mono", monospace
  line-height: 1.5em
  +border-radius($radius)

code, kbd
  padding: $gutter/10
  background-color: darken($bgColor, 10%)
  font: $fontSize - 6 "Andale Mono", "DejaVu Sans Mono", monospace
  +border-radius($radius)

pre code
  font-size: 13px
  background: transparent
  +box-shadow(none)
  padding: 0

a
  color: $linkColor
  text-decoration: none
  &:hover
    color: lighten($linkColor, 30%)

::-moz-selection,
::selection
  background: $orange
  color: white

/* -- Layout ------------------------------------------------------------------ */

body
  margin: $gutter $gutter $gutter*2 $gutter
  background: $bgColor

.wrapper
  max-width: $maxColumnWidth
  margin: 0 auto

.section
  padding: 0 0 $gutter 0
  margin-bottom: $gutter
  +pie-clearfix
  border-bottom: 4px solid darken($bgColor, 5%)
  &:last-child
    border-top: none

.section-header
  text-align: center

.row
  +pie-clearfix

/* -- Sections ------------------------------------------------------------------ */

/* -- Intro -- */

.intro-section
  text-align: center

.logo
  color: white
  margin-bottom: 0.05em
  .version
    color: $yellow

.author
  line-height: 1.2em

.author-links
  font-size: $fontSize - 4

.lead
  font-size: $fontSize + 4

/* -- Examples -- */

.image-row
  +pie-clearfix
  margin-bottom: $gutter/2

.example-image-link
  display: block
  float: left
  margin-right: $gutter/2
  line-height: 0
  +border-radius($radius)
  border: 6px solid lighten($bgColor, 10%)
  +transition(all .1s ease-out)
  &:hover
    border: 6px solid $linkColor

.last-example-image-link-in-set
  margin-right: 0

.example-image
  +border-radius(2px)

/* -- Sharing -- */

.sharing
  position: fixed
  top: 20px
  right: 0

/* content
 *----------------------------------------------- */

.download-section
  text-align: center

.download-button
  display: block
  width: 300px
  margin: 0 auto $gutter/2 auto
  padding: $gutter/4
  background-color: darken($bgColor, 10%)
  border: 6px solid $bgColor
  +border-radius($radius)
  +transition(all .1s ease-out)
  +pie-clearfix
  &:hover
    border-color: $linkColor
    background-color: #444
  .file
    font-size: 36px
    color: white
    line-height: 1em
    .version
      font-size: 24px
      color: $linkColor


.changelog
  margin-bottom: 0.5em
  li
    list-style: none
    padding: 0 0 0 14px
    background: url(../img/bullet.gif) no-repeat 0 11px
    color: #999
    .version
      color: #88A616
    .date
      color: #fff
  .old
    display: none

.showOlderChanges
  color: #999


.forums
  float: left
  margin: 0 $gutter $gutter 0
  padding: 10px
  background-color: #333
  border: 5px solid #333
  +border-radius($radius)
  +transition( all .1s ease-out)
  &:hover
    border-color: $linkColor
    background-color: #444
  .speech
    float: left
    margin-right: 20px
  .link
    float: left
    font-size: 36px
    font-weight: 400
    color: white
    line-height: 1.1em
    .sub
      color: $linkColor

.donate-button
  border: 5px solid rgba(0, 0, 0, 0)
  +border-radius($radius)
  +transition(all .1s ease-out)
  &:hover
    background-color: #444
    border-color: $linkColor