From d5dc27ce7206a070b70d9787be3bc2252a04dee8 Mon Sep 17 00:00:00 2001 From: Seth Vargo Date: Mon, 20 Oct 2014 13:55:50 -0400 Subject: [PATCH] Update CSS for Bootstrap 3 --- website/source/assets/javascripts/.keep | 0 .../source/assets/stylesheets/_buttons.scss | 52 ++ .../source/assets/stylesheets/_columns.scss | 50 ++ .../assets/stylesheets/_components.scss | 533 +++++++++--------- .../source/assets/stylesheets/_footer.scss | 92 ++- .../source/assets/stylesheets/_helpers.scss | 104 ++-- website/source/assets/stylesheets/_nav.scss | 94 +-- website/source/assets/stylesheets/_reset.scss | 44 +- .../source/assets/stylesheets/_sidebar.scss | 74 +-- .../source/assets/stylesheets/_styles.scss | 260 ++++----- .../assets/stylesheets/application.scss | 15 + 11 files changed, 692 insertions(+), 626 deletions(-) create mode 100644 website/source/assets/javascripts/.keep create mode 100644 website/source/assets/stylesheets/_buttons.scss create mode 100644 website/source/assets/stylesheets/_columns.scss create mode 100644 website/source/assets/stylesheets/application.scss diff --git a/website/source/assets/javascripts/.keep b/website/source/assets/javascripts/.keep new file mode 100644 index 000000000..e69de29bb diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss new file mode 100644 index 000000000..0edc0c7c4 --- /dev/null +++ b/website/source/assets/stylesheets/_buttons.scss @@ -0,0 +1,52 @@ +@mixin button { + font-family: $mono; + height: $button-height; + line-height: $button-height; + background-color: transparent; + border-width: 2px; + border-style: solid; + display: block; + padding: 0 30px; + text-transform: uppercase; + letter-spacing: 3px; + @include rounded(5px); + + &.spaced { + margin-right: 20px; + } + + &.primary { + color: $green; + border-color: $green; + + &:hover { + background-color: transparentize($green, .7); + } + + &:active { + background-color: transparentize($green, .5); + } + } + + &.secondary { + color: $black; + border-color: $black; + + &:hover { + background-color: transparentize($black, .9); + } + + &:active { + background-color: transparentize($black, .7); + } + } + + &.inline { + margin: auto $baseline; + @include respond-to(mobile) { + display: block; + width: 100%; + margin: $baseline 0; + } + } +} diff --git a/website/source/assets/stylesheets/_columns.scss b/website/source/assets/stylesheets/_columns.scss new file mode 100644 index 000000000..71f1a099e --- /dev/null +++ b/website/source/assets/stylesheets/_columns.scss @@ -0,0 +1,50 @@ +.container-xs-height { + display:table; + padding-left:0px; + padding-right:0px; +} + + +.col-xs-height { + display:table-cell; + float:none; +} + +@media (min-width: 768px) { + .container-sm-height { + display:table; + padding-left:0px; + padding-right:0px; + } + + .col-sm-height { + display:table-cell; + float:none; + } +} + +@media (min-width: 992px) { + .container-md-height { + display:table; + padding-left:0px; + padding-right:0px; + } + + .col-md-height { + display:table-cell; + float:none; + } +} + +@media (min-width: 1200px) { + .container-lg-height { + display:table; + padding-left:0px; + padding-right:0px; + } + + .col-lg-height { + display:table-cell; + float:none; + } +} diff --git a/website/source/assets/stylesheets/_components.scss b/website/source/assets/stylesheets/_components.scss index c2dcff55c..c17c9dc1b 100644 --- a/website/source/assets/stylesheets/_components.scss +++ b/website/source/assets/stylesheets/_components.scss @@ -1,323 +1,332 @@ header .header { - height: 200px; - background: #000000; + height: 200px; + background: #000000; - h1 { - margin-bottom: -8px; - margin-top: 60px; - text-transform: uppercase; - } + h1 { + margin-bottom: -8px; + margin-top: 60px; + text-transform: uppercase; + } - span { - font-size: 20px; - } + span { + font-size: 20px; + } } .hero { + height: $hero-height + 100px; + background: #000000 image-url('hero_image.jpg') no-repeat; + background-position: 35px -40px; + background-size: 100%; + + h2 { + margin-top: 70px; + } + + @media (max-width: $screen-md-max) { height: $hero-height; - background: #000000 image-url('hero_image.jpg') no-repeat 35px -40px; - background-size: 960px 467px; h2 { - margin-top: 70px; + font-size: 2.1em; } + } + + @media (max-width: $screen-sm-max) { + height: auto; + background: none; + + h2 { + margin: 0; + padding: 1em; + } + } } .belt { - &.download { - background-color: $white; - @extend .padded-sm; + &.download { + background-color: $white; + @extend .padded-sm; + } + + .download-container { + background: image-url('down_arrow.png') no-repeat top left; + display: inline-block; + min-height: 73px; + margin: 0 auto; + padding-left: 100px; + + @media (max-width: $screen-sm) { + background: none; + font-size: 75%; + min-height: 50px; + padding: 0; } + } - .download-container { - background: image-url('down_arrow.png') no-repeat top left; - display: inline-block; - min-height: 73px; - margin: 0 auto; - padding-left: 100px; + .download-row { + text-align: center; + + .small { + text-align: left; } + } - .download-row { - text-align: center; + h2 { + font-family: $serif; + font-size: 44px; + color: #7bc6b1; + margin: 0px; + padding: 0px; + padding-top: 7px; + padding-bottom: 3px; + line-height: 1.0; + white-space: nowrap; - .small { - text-align: left; - } + &:hover { + color: $dark-background; } + } - h2 { - font-family: $serif; - font-size: 44px; - color: #7bc6b1; - margin: 0px; - padding: 0px; - padding-top: 7px; - padding-bottom: 3px; - line-height: 1.0; - white-space: nowrap; - - &:hover { - color: $dark-background; - } - } - - span { - color: $gray-dark; - } + span { + color: $gray-dark; + } } .downloads { + margin-top: 20px; + + .description { + margin-bottom: 20px; + } + + .download { + border-bottom: 1px solid #b2b2b2; + padding-bottom: 15px; + margin-bottom: 15px; + + .details { + padding-left: 95px; + + li { + display: inline-block; + + &:after { + content: " | "; + } + + &:last-child:after { + content: ""; + } + } + + a { + font-size: 22px; + color: darken($green, 15%); + + &:hover { + color: darken($green, 30%); + } + + &:active { + color: darken($green, 50%); + } + } + } + + .icon { + img { + width: 75px; + } + } + + .os-name { + font-size: 40px; + margin-bottom: -3px; + } + } + + .poweredby { margin-top: 20px; + margin-bottom: 20px; - .description { - margin-bottom: 20px; - } - - .download { - border-bottom: 1px solid #b2b2b2; - padding-bottom: 15px; - margin-bottom: 15px; - - .details { - padding-left: 95px; - - li { - display: inline-block; - - &:after { - content: " | "; - } - - &:last-child:after { - content: ""; - } - } - - a { - font-size: 22px; - color: darken($green, 15%); - - &:hover { - color: darken($green, 30%); - } - - &:active { - color: darken($green, 50%); - } - } - } - - .icon { - img { - width: 75px; - } - } - - .os-name { - font-size: 40px; - margin-bottom: -3px; - } - } - - .poweredby { - margin-top: 20px; - margin-bottom: 20px; - - img { - display: block; - margin: 0 auto; - width: 122px; - } + img { + display: block; + margin: 0 auto; + width: 122px; } + } } .marketting { - p { - padding-left: 10px; - padding-right: 10px; - text-align: justify; - } + p { + padding-left: 10px; + padding-right: 10px; + text-align: justify; + } } .docs-wrapper { - clear: right; + .docs-body { + @extend .white-background; - .docs-body { - float: left; - width: 70%; - max-width: 760px; - display: block; - @extend .white-background; + .docs-content { + padding: $docs-top-margin 80px; + max-width: 960px; + display: block; - .docs-content { - padding: $docs-top-margin 80px; - display: block; + code { + background-color: #000; + border: 0; + color: #b1d631; + font-size: 14px; + } - code { - background-color: #000; - border: 0; - color: #b1d631; - font-size: 14px; - } + a { + color: darken($green, 15%); - a { - color: darken($green, 15%); - - &:hover { - color: darken($green, 30%); - } - - &:active { - color: darken($green, 50%); - } - } - - ul, - ol { - list-style-position: inside; - margin-top: $baseline; - margin-left: 20px; - margin-right: 20px; - - li { - font-family: $serif; - font-size: 17px; - line-height: (30/17) !important; - margin-bottom: $baseline; - } - } - - ul { - list-style-type: circle; - } - - ol { - list-style-type: decimal; - } - - div.alert { - font-family: $serif; - font-size: 17px; - line-height: 1.5; - letter-spacing: 1px; - margin-left: -80px; - margin-right: -80px; - padding-top: 15px; - padding-bottom: 15px; - padding-left: 80px; - padding-right: 80px; - border-radius: 0; - } - - pre { - border: 0; - font-size: 14px; - margin-left: -80px; - margin-right: -80px; - padding-top: 40px; - padding-bottom: 40px; - padding-left: 80px; - padding-right: 80px; - border-radius: 0; - } + &:hover { + color: darken($green, 30%); } - .docs-background { - @extend .white-background; - height: 100%; - width: 70%; - max-width: 760px; - position: fixed; - top: 0; - left: $sidebar-width; - z-index: -9999; + &:active { + color: darken($green, 50%); } + } - section { - margin-top: $docs-top-margin; - } + ul, ol { + list-style-position: inside; + margin-top: $baseline; + margin-left: 20px; + margin-right: 20px; - h1 { - font-size: 40px; - line-height: (25/20); - text-transform: uppercase; + li { + font-family: $serif; + font-size: 17px; + line-height: (30/17) !important; + margin-bottom: $baseline; } + } - h2 { - margin-top: $baseline * 2; - text-transform: capitalize; - } + ul { + list-style-type: circle; + } - h3 { - margin-top: $baseline; - text-transform: capitalize; - font-size: 26px; - } + ol { + list-style-type: decimal; + } + + div.alert { + font-family: $serif; + font-size: 17px; + line-height: 1.5; + letter-spacing: 1px; + margin-left: -95px; + margin-right: -95px; + padding-top: 40px; + padding-bottom: 40px; + padding-left: 80px; + padding-right: 80px; + border-radius: 0; + } + + pre { + border: 0; + font-size: 14px; + margin-left: -95px; + margin-right: -95px; + padding-top: 40px; + padding-bottom: 40px; + padding-left: 80px; + padding-right: 80px; + border-radius: 0; + } } + + section { + margin-top: $docs-top-margin; + } + + h1 { + font-size: 40px; + line-height: (25/20); + text-transform: uppercase; + } + + h2 { + margin-top: $baseline * 2; + text-transform: capitalize; + } + + h3 { + margin-top: $baseline; + text-transform: capitalize; + font-size: 26px; + } + } } .pagination { - $border: 1px solid $gray-mid; + $border: 1px solid $gray-mid; + height: $nav-height; + border-top: $border; + font-size: 20px; + margin: 0 -15px -40px -15px; + display: block; + + h4 { + display: inline-block; + margin-top: ($baseline * 1.7); + margin-left: $baseline; + + @include respond-to(mobile) { + margin-top: 10px; + } + } + + span { + @include respond-to(mobile) { + display: block; + } + } + + .previous-section, + .next-section { height: $nav-height; - border-top: $border; - font-size: 20px; - margin: 0px; + display: block; - h4 { - display: inline-block; - margin-top: ($baseline * 1.7); - margin-left: $baseline; - - @include respond-to(mobile) { - margin-top: 10px; - } + &:hover { + background-color: transparentize($gray-light, .7); } + } - span { - - @include respond-to(mobile) { - display: block; - } + .previous-section { + width: $nav-height; + border-right: $border; + float: left; + background: $white image-url('arrow-left.png') no-repeat center center; + @include respond-to(mobile) { + width: 50%; + background-position: left center; } + } - .previous-section, - .next-section { - height: $nav-height; - display: block; - - &:hover { - background-color: transparentize($gray-light, .7); - } - } - - .previous-section { - width: $nav-height; - border-right: $border; - float: left; - background: $white image-url('arrow-left.png') no-repeat center center; - @include respond-to(mobile) { - width: 50%; - background-position: left center; - } - } - - .next-section { - background: $white image-url('arrow-right.png') no-repeat center right; - } + .next-section { + background: $white image-url('arrow-right.png') no-repeat center right; + } } .people { - margin-top: 30px; + margin-top: 30px; - .person { - margin-bottom: 30px; + .person { + margin-bottom: 30px; - h3 { - text-transform: none; - } - - .bio { - padding-left: 150px; - } + h3 { + text-transform: none; } + + .bio { + padding-left: 150px; + } + } } diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss index b20aabcf5..7f771340f 100644 --- a/website/source/assets/stylesheets/_footer.scss +++ b/website/source/assets/stylesheets/_footer.scss @@ -1,72 +1,70 @@ footer { -height: $nav-height; -max-height: $nav-height; -background-color: $black !important; -padding: 0; -margin: 0; -text-transform: uppercase; -color: $white; -font-family: $sans; -@include respond-to(mobile) { -margin-right: -20px; -margin-left: -20px; -} + height: $nav-height; + max-height: $nav-height; + background-color: $black !important; + padding: 0; + margin: 0; + text-transform: uppercase; + color: $white; + font-family: $sans; + @include respond-to(mobile) { + margin-right: -20px; + margin-left: -20px; + } ul { - margin-top: 40px; - @include respond-to(mobile) { - margin-left: $baseline; - margin-top: $baseline; - } + margin-top: 40px; + @include respond-to(mobile) { + margin-left: $baseline; + margin-top: $baseline; + } li { - display: inline; - margin-right: 50px; - @include respond-to(mobile) { - margin-right: 20px; - display: list-item; - } - } + display: inline; + margin-right: 50px; + @include respond-to(mobile) { + margin-right: 20px; + display: list-item; + } + } .hashi-logo { - background: image-url('logo_footer.png') no-repeat center top; - height: 40px; - width: 40px; - background-size: 37px 40px; - text-indent: -999999px; - display: inline-block; - margin-top: -10px; - margin-right: 0; - @include respond-to(mobile) { - margin-top: -50px; - margin-right: $baseline; - } + background: image-url('logo_footer.png') no-repeat center top; + height: 40px; + width: 40px; + background-size: 37px 40px; + text-indent: -999999px; + display: inline-block; + margin-top: -10px; + margin-right: 0; + @include respond-to(mobile) { + margin-top: -50px; + margin-right: $baseline; + } } } .active { - color: $green; + color: $green; } button { - margin-top: 20px; + margin-top: 20px; } - - } .page-wrap { -min-height: 100%; -/* equal to footer height */ -margin-bottom: -($nav-height); + min-height: 100%; + /* equal to footer height */ + margin-bottom: -($nav-height); } .page-wrap:after { -content: ""; -display: block; + content: ""; + display: block; } .page-wrap:after { -/* .push must be the same height as footer */ -height: $nav-height; + /* .push must be the same height as footer */ + height: $nav-height; } diff --git a/website/source/assets/stylesheets/_helpers.scss b/website/source/assets/stylesheets/_helpers.scss index fc481f359..d28b5265c 100644 --- a/website/source/assets/stylesheets/_helpers.scss +++ b/website/source/assets/stylesheets/_helpers.scss @@ -23,7 +23,7 @@ $base-line-height: 20px; $button-height: 60px; .center { - margin: 0 auto; + margin: 0 auto; } .padded-lg {padding: ($baseline * 2) 0;} @@ -44,17 +44,17 @@ $serif: 'myriad-pro', helvetica, Georgia, serif; $sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif; $mono: 'Inconsolata', 'courier new', courier, mono-space; -.serif {font-family: $serif;} -.sans {font-family: $sans;} -.mono {font-family: $mono;} +.serif { font-family: $serif; } +.sans { font-family: $sans; } +.mono { font-family: $mono; } -.text-center {text-align: center !important;} -.text-left {text-align: left !important;} -.text-right {text-align: right !important;} +.text-center { text-align: center !important; } +.text-left { text-align: left !important; } +.text-right { text-align: right !important; } -.text-green {color: $green;} +.text-green { color: $green; } -.uppercase {text-transform: uppercase !important;} +.uppercase { text-transform: uppercase !important; } @font-face { font-family: 'HeimatStencil-SemiBold'; @@ -65,47 +65,45 @@ $mono: 'Inconsolata', 'courier new', courier, mono-space; font-style: normal; } - //color .dark-background { - background-color: #000; - color: $white; + background-color: #000; + color: $white; a { - color: inherit; - &:hover { - color: $green; + color: inherit; + + &:hover { + color: $green; } + &:active { - color: darken($green, 30%); + color: darken($green, 30%); } } } .white-background { -background-color: $white; + background-color: $white; } - //elements .divider { -background: image-url('divider.png') no-repeat center bottom; -height: 70px; -width: 70px; -background-size: 70px 70px; -display: table-cell; -text-align: center; -vertical-align: middle; + background: image-url('divider.png') no-repeat center bottom; + height: 70px; + width: 70px; + background-size: 70px 70px; + display: table-cell; + text-align: center; + vertical-align: middle; } .packer { -color: $orange; -font-size: 20px; + color: $orange; + font-size: 20px; - a:hover, - a:active, - a:visited { - color: inherit; + a:hover, a:active, a:visited { + color: inherit; } } @@ -141,39 +139,39 @@ $break-lg: 980px; /* utlities */ .d { -border-bottom: 1px solid $red; -border-top: 1px solid $red; -background-color: transparentize($red, .9); + border-bottom: 1px solid $red; + border-top: 1px solid $red; + background-color: transparentize($red, .9); } .hyphenate { --webkit-hyphens: auto; --moz-hyphens: auto; -hyphens: auto; + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; } .full-width { -margin-right: -20px; -margin-left: -20px; + margin-right: -20px; + margin-left: -20px; } .add-transition { -transition: all .1s ease-in-out; --moz-transition: all .1s ease-in-out; --webkit-transition: all .1s ease-in-out; --o-transition: all .1s ease-in-out; + -webkit-transition: all .1s ease-in-out; + -moz-transition: all .1s ease-in-out; + -o-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; } @mixin opacity($opacity) { --khtml-opacity: $opacity; --moz-opacity: $opacity; -opacity: $opacity; + -khtml-opacity: $opacity; + -moz-opacity: $opacity; + opacity: $opacity; } @mixin transform-scale($value) { - -moz-transform: scale($value); --webkit-transform: scale($value); - transform: scale($value); + -webkit-transform: scale($value); + -moz-transform: scale($value); + transform: scale($value); } @mixin transition($type, $speed, $easing) { @@ -184,8 +182,8 @@ opacity: $opacity; } @mixin rounded($radius) { --moz-border-radius: $radius; --webkit-border-radius: $radius; --khtml-border-radius: $radius; -border-radius: $radius; + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + -khtml-border-radius: $radius; + border-radius: $radius; } diff --git a/website/source/assets/stylesheets/_nav.scss b/website/source/assets/stylesheets/_nav.scss index 4ad3fcb33..13acc3ff2 100644 --- a/website/source/assets/stylesheets/_nav.scss +++ b/website/source/assets/stylesheets/_nav.scss @@ -1,42 +1,70 @@ nav { - height: $nav-height; - padding: $baseline 0; + height: $nav-height; + height: $nav-height; + padding: 0; + margin: 0; + min-width: 940px; + text-transform: uppercase; + color: $white; + font-family: $sans; + font-size: 16px; + border-bottom: 1px solid $border-dark; + + ul { + margin-top: ($baseline * 2); + margin-left: $nav-height; + + li { + display: inline-block; + margin-right: 50px; + } + } + + .packer-logo { + background: image-url('logo_nav.png') no-repeat center top; + height: 80px; + width: 80px; + background-size: 34px 50px; + text-indent: -999999px; + display: inline-block; + margin-top: 25px; + } + + @media (min-width: $screen-md-min) { + ul { + li { + &.featured { + margin: -20px 0 0 10px; + float: right; + + a { + @include button; + font-weight: bold; + } + } + } + } + } + + @media (max-width: $screen-sm-max) { + height: auto; padding: 0; - margin: 0; - min-width: 940px; - text-transform: uppercase; - color: $white; - font-family: $sans; - font-size: 16px; - border-bottom: 1px solid $border-dark; + min-width: auto; ul { - margin-top: ($baseline * 2); - margin-left: $nav-height; - - li { - display: inline-block; - margin-right: 50px; - } + margin: 1em 0 1em 80px; + li { + display: block; + margin: 0; + padding: 1em; + } } + } - .packer-logo { - background: image-url('logo_nav.png') no-repeat center top; - height: 80px; - width: 80px; - background-size: 34px 50px; - text-indent: -999999px; - display: inline-block; - margin-top: 25px; - } - - .active { - color: $green; - } - + @media (max-width: $screen-xs-max) { button { - margin-top: $baseline; - } -} //nav + } + } +} diff --git a/website/source/assets/stylesheets/_reset.scss b/website/source/assets/stylesheets/_reset.scss index d4f7f0383..4ebb5fd27 100644 --- a/website/source/assets/stylesheets/_reset.scss +++ b/website/source/assets/stylesheets/_reset.scss @@ -1,27 +1,23 @@ -form, -input, -textarea, -button { -padding: 0; -margin: 0; -vertical-align: middle; -border: 0; -box-shadow: none; --moz-border-radius: 0; --webkit-border-radius: 0; --khtml-border-radius: 0; -border-radius: 0; -background-color: transparent; -font-family: $mono; -font-size: $base-font-size; -line-height: 1.0; -color: inherit; +form, input, textarea, button { + padding: 0; + margin: 0; + vertical-align: middle; + border: 0; + box-shadow: none; + -moz-border-radius: 0; + -webkit-border-radius: 0; + -khtml-border-radius: 0; + border-radius: 0; + background-color: transparent; + font-family: $mono; + font-size: $base-font-size; + line-height: 1.0; + color: inherit; &:focus { - line-height: 1.0; - box-shadow: none !important; - outline: none; - vertical-align: middle; - + line-height: 1.0; + box-shadow: none !important; + outline: none; + vertical-align: middle; } -} \ No newline at end of file +} diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss index ea822aa3b..0814efdcf 100644 --- a/website/source/assets/stylesheets/_sidebar.scss +++ b/website/source/assets/stylesheets/_sidebar.scss @@ -1,49 +1,37 @@ .sidebar { - $border: 1px solid $gray-dark; - font-size: 16px; - font-family: $mono; - color: $gray-light; - width: $sidebar-width; - float: left; - background-color: $sidebar-background-color; - height: 100%; + $border: 1px solid $gray-dark; + font-size: 16px; + font-family: $mono; + color: $gray-light; + background-color: $sidebar-background-color; + min-height: 100%; - h2 { - color: $green; - text-transform: uppercase; - padding: $docs-top-margin 20px 0; + h2 { + color: $green; + text-transform: uppercase; + padding: $docs-top-margin 20px 0; + } + + h4 { + color: $white; + text-transform: uppercase; + margin-bottom: -10px; + } + + ul { + @extend .padded-sm; + + li { + border-bottom: $border; + padding: 15px 0; + text-align: left; } - h4 { - color: $white; - text-transform: uppercase; - margin-bottom: -10px; - } - - ul { - @extend .padded-sm; - - li { - border-bottom: $border; - padding: 15px 0; - text-align: left; - } - - li > * { - padding: auto 20px; - margin-left: 20px; - display: block; - width: 100%; - } - } - - .sidebar-background { - background-color: $sidebar-background-color; - height: 100%; - width: $sidebar-width; - position: fixed; - top: 0; - left: 0; - z-index: -9999; + li > * { + padding: auto 20px; + margin-left: 20px; + display: block; + width: 100%; } + } } diff --git a/website/source/assets/stylesheets/_styles.scss b/website/source/assets/stylesheets/_styles.scss index 777e00495..1ce4a566c 100644 --- a/website/source/assets/stylesheets/_styles.scss +++ b/website/source/assets/stylesheets/_styles.scss @@ -1,241 +1,173 @@ * { - margin: 0; + margin: 0; } html, body { - margin: 0; - height: 100%; + margin: 0; + height: 100%; } html { - -webkit-tap-highlight-color: transparent; - -webkit-font-smoothing: antialiased; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; } body { - background-color: $background; - font-family: $sans; - letter-spacing: 1px; - font-size: $base-font-size; - line-height: $base-line-height; + background-color: $background; + font-family: $sans; + letter-spacing: 1px; + font-size: $base-font-size; + line-height: $base-line-height; } -h1, -h2, -h3, -h4, -h5, -h6 { - letter-spacing: 2px; - font-weight: normal; +h1, h2, h3, h4, h5, h6 { + letter-spacing: 2px; + font-weight: normal; } h1 { - font-family: $sans; - font-size: 70px; - line-height: (80/70); - @include respond-to(mobile) { - font-size: 50px; - line-height: (50/45); - } + font-family: $sans; + font-size: 70px; + line-height: (80/70); + @include respond-to(mobile) { + font-size: 50px; + line-height: (50/45); + } } h2 { - font-family: $sans; - font-size: 40px; - line-height: (50/40); + font-family: $sans; + font-size: 40px; + line-height: (50/40); - &.has-dividers { - //overflow: auto !important; - display: table-cell; - text-align: center; - vertical-align: middle; - @include respond-to(mobile) { - display: block; - } + &.has-dividers { + //overflow: auto !important; + display: table-cell; + text-align: center; + vertical-align: middle; + @include respond-to(mobile) { + display: block; } + } } h3 { - font-family: $sans; - font-size: 20px; - line-height: (30/20); + font-family: $sans; + font-size: 20px; + line-height: (30/20); } h4 { - font-family: $mono; - font-size: 20px; - line-height: (30/20); + font-family: $mono; + font-size: 20px; + line-height: (30/20); } h5 { - font-family: $sans; - font-size: 16px; - line-height: (22/16); + font-family: $sans; + font-size: 16px; + line-height: (22/16); } h6 { - font-family: $mono; - font-size: 16px; - line-height: (22/16); + font-family: $mono; + font-size: 16px; + line-height: (22/16); } p { - font-family: $serif; - font-size: 17px; - line-height: (30/17); - letter-spacing: 1px; + font-family: $serif; + font-size: 17px; + line-height: (30/17); + letter-spacing: 1px; - &.large-text { - font-size: 20px; - line-height: (35/20); - } + &.large-text { + font-size: 20px; + line-height: (35/20); + } - a { - color: $green; - &:hover { - color: darken($green, 30%); - } - &:active { - color: darken($green, 50%); - } - } -} - -a { - color: inherit; - text-decoration: none; + a { + color: $green; &:hover { - color: inherit; - text-decoration: none; - } - - &:visited { - + color: darken($green, 30%); } &:active { - + color: darken($green, 50%); } + } +} +a { + color: inherit; + text-decoration: none; + + &:hover { + color: inherit; + text-decoration: none; + } } dt { - font-size: 18px; + font-size: 18px; } dd { - font-family: $serif; - font-size: 17px; - line-height: 1.5; - letter-spacing: 1px; - margin-bottom: 30px; + font-family: $serif; + font-size: 17px; + line-height: 1.5; + letter-spacing: 1px; + margin-bottom: 30px; } -ul, -ol { - margin: 0; - padding: 0; - list-style-type: none; +ul, ol { + margin: 0; + padding: 0; + list-style-type: none; } em { - font-style: italic; + font-style: italic; } strong { - font-weight: bold; + font-weight: bold; } -small, -.small { - font-size: 13px; +small, .small { + font-size: 13px; } hr { - margin: ($baseline * 2) 0; - border-color: $gray-mid; - border-bottom: 0; + margin: ($baseline * 2) 0; + border-color: $gray-mid; + border-bottom: 0; } pre { - background-color: $black; - color: $white; - margin: $baseline 0; + background-color: $black; + color: $white; + margin: $baseline 0; } table { - font-family: $mono; - margin: ($baseline * 2) 0; - color: $gray-dark; + font-family: $mono; + margin: ($baseline * 2) 0; + color: $gray-dark; - th { - color: $black; - font-weight: normal !important; - } + th { + color: $black; + font-weight: normal !important; + } } ::selection { - background: #ffff00; /* Safari */ - color: $black; + background: #ffff00; /* Safari */ + color: $black; } ::-moz-selection { - background: #ffff00; /* Firefox */ - color: $black; -} - -input { - -} - -button { - height: $button-height; - background-color: transparent; - border-width: 2px; - border-style: solid; - padding: 0 30px; - text-transform: uppercase; - letter-spacing: 3px; - @include rounded(5px); - - &.spaced { - margin-right: 20px; - } - - &.primary { - color: $green; - border-color: $green; - - &:hover { - background-color: transparentize($green, .7); - } - - &:active { - background-color: transparentize($green, .5); - } - } - - &.secondary { - color: $black; - border-color: $black; - - &:hover { - background-color: transparentize($black, .9); - } - - &:active { - background-color: transparentize($black, .7); - } - } - - &.inline { - margin: auto $baseline; - @include respond-to(mobile) { - display: block; - width: 100%; - margin: $baseline 0; - } - } + background: #ffff00; /* Firefox */ + color: $black; } diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss new file mode 100644 index 000000000..984a43f4b --- /dev/null +++ b/website/source/assets/stylesheets/application.scss @@ -0,0 +1,15 @@ +@import "bootstrap-sprockets"; +@import "bootstrap"; + +@import url("http://fonts.googleapis.com/css?family=Inconsolata"); + +@import "_helpers"; +@import "_reset"; + +@import "_columns"; +@import "_buttons"; +@import "_styles"; +@import "_nav"; +@import "_footer"; +@import "_components"; +@import "_sidebar";