@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