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.
 
 
 

385 lines
6.2 KiB

@import "compass/css3"
@import "compass/utilities/general/clearfix"
@import "normalize"
// COLORS & BACKGROUNDS --------------------------------------------------------
$yellow: #fdf485
$orange: #e67e39
$red: #ff4040
$blue: #4ae
$green: #61c227
$gray: #777
$light-gray: #f3f3f3
$dark-gray: #222
$color: $gray
$bg-color: #fff
$border-color: darken($bg-color, 5%)
$header-bg-color: #f7f7f7
$section-heading-color: $orange
$heading-color: $dark-gray
$link-color: $blue
$code-color: $color
$code-bg-color: darken($bg-color, 5%)
// 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: 16px
// LAYOUT --------------------------------------------------------
$gutter: 30px
$max-column-width: 600px
$sharing-section-z-index: 10
// UI COMPONENTS --------------------------------------------------------
$radius: 6px
/* Typography
*----------------------------------------------- */
html
font: 100% / 1.5 $body-font-family, sans-serif
font-weight: 400
@media (min-width: 40rem)
html
font-size: 112%
@media (min-width: 64rem)
html
font-size: 120%
body
color: $color
background-color: $bg-color
h1, h2, h3, h4, h5
color: $heading-color
line-height: 1.2em
font-family: $heading-font-family
font-weight: 600
h1
font-size: 3.5rem
margin: 0 0 0.2em 0
@media (min-width: 40rem)
h1
font-size: 4.5rem
@media (min-width: 64rem)
h1
font-size: 5rem
h2
color: $section-heading-color
margin-bottom: 1.5rem
font-size: 1.5rem
text-transform: uppercase
@media (min-width: 40rem)
h2
font-size: 2rem
h3
font-size: 1.2rem
margin-bottom: .5rem
blockquote
margin: 0
p
color: #bbb
font-style: italic
margin-bottom: 1.5rem
cite
color: #bbb
p
margin: 0 auto 2em auto
max-width: 35rem
.lead
max-width: 45rem
font-size: 1.25rem
ol
list-style-type: decimal
ul, ol
margin: 0 0 1.25em 0
li
margin-bottom: 2em
&.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
a
color: $link-color
text-decoration: none
&:hover
text-decoration: underline
::-moz-selection,
::selection
background: $orange
color: white
.sub-point
display: block
font-size: 0.75rem
/* -- Layout ------------------------------------------------------------------ */
*, *:before, *:after
+box-sizing("border-box")
body
margin: 0
padding: 0
background: $bg-color
section
border-top: 2px solid $border-color
text-align: center
padding: 2rem 0
&:first-of-type
border-top: none
@media (min-width: 40rem)
section
padding: 4rem 0
.container
margin: 0 auto
max-width: 53rem
width: 90%
.row
+pie-clearfix
/* -- Header -- */
header
padding: 2rem 0
background-color: $header-bg-color
text-align: center
/* -- Examples -- */
.example-image-link
display: inline-block
padding: 4px
margin: 0 0.5rem 1rem 0.5rem
background-color: $bg-color
line-height: 0
+transition(background-color .1s ease-out)
+border-radius($radius)
&:hover
background-color: $link-color
.example-image
width: 7rem
+border-radius($radius - 1)
/* -- How to use -- */
.how-to-use-section
p,
ol,
ul,
pre
text-align: left
/* -- Donate -- */
fieldset
border: none
.donate-button
width: 100%
@media (min-width: 40rem)
.donate-button
width: auto
/* -- Credits -- */
footer
padding: 2rem 0
background-color: $header-bg-color
text-align: center
.button
margin-top: 0.5rem
/* -- Sharing -- */
.sharing-section
position: fixed
z-index: $sharing-section-z-index
top: 20px
right: 0
/* Code
* ========================================================================== */
code
color: $code-color
background-color: $code-bg-color
+border-radius($radius)
font-family: Consolas, Courier, monospace
font-size: 0.9rem
padding: 0.1rem 0.3rem
position: relative
top: -1px
pre
background-color: $code-bg-color
+border-radius($radius)
code
font-size: 0.7rem
border: none
/* Mobile First Grid
* ========================================================================== */
.column
margin-bottom: 1.5rem
@media (min-width: 40rem)
.column
float: left
margin: 0
padding-left: 1rem
padding-right: 1rem
&.full
width: 100%
&.two-thirds
width: 66.7%
&.half
width: 50%
&.third
width: 33.3%
&.fourth
width: 24.95%
&.flow-opposite
float: right
/* Lists
* ========================================================================== */
ul
margin: 0
text-align: left
@media (min-width: 40rem)
ul
display: inline-block
/* Buttons
* ========================================================================== */
.button
display: block
padding: 0.7rem 2rem
margin-bottom: 0.5rem
border: none
color: #fff
background-color: $link-color
font-size: 1.2rem
font-weight: bold
text-transform: uppercase
+border-radius($radius)
vertical-align: middle
white-space: nowrap
&:hover
background: darken($link-color, 10%)
text-decoration: none
@media (min-width: 40rem)
.button
display: inline-block
margin: 0 0.25rem
.button-minor
padding: 0.35rem 1rem
border: 2px solid $link-color
color: $link-color
background-color: transparent
font-size: 0.8rem
&:hover
color: white
/* Elements
* ========================================================================== */
hr
border: 0
border-top: 2px solid $border-color
margin: 2rem auto
width: 3rem
@media (min-width: 40rem)
hr
margin: 2.5rem auto
/* Gist Overrides
* ========================================================================== */
.gist .gist-file
font-size: .9rem !important
margin: 0 auto
max-width: 39rem
overflow: hidden !important
text-align: left
.gist-data
background: #f8f8f8 !important
border-bottom: none !important
.gist-meta
display: none !important
.gist-syntax .k
color: #555 !important
font-weight: normal !important