diff --git a/Gemfile b/Gemfile index 293a6ad..3ab66c6 100644 --- a/Gemfile +++ b/Gemfile @@ -7,7 +7,8 @@ gem 'rails', '4.2.3' # Use sqlite3 as the database for Active Record gem 'pg' # Use SCSS for stylesheets -gem 'sass-rails', '~> 5.0' +gem 'sass-rails', '~> 4.0.3' +gem "compass-rails" # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .coffee assets and views @@ -30,6 +31,11 @@ gem 'sdoc', '~> 0.4.0', group: :doc # Use Unicorn as the app server gem 'unicorn' +gem 'font_assets' + +gem 'simple_form' +gem 'draper' + # Use Capistrano for deployment # gem 'capistrano-rails', group: :development diff --git a/Gemfile.lock b/Gemfile.lock index d5f765c..b455fea 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -44,6 +44,7 @@ GEM binding_of_caller (0.7.2) debug_inspector (>= 0.0.1) builder (3.2.2) + chunky_png (1.3.4) coderay (1.1.0) coffee-rails (4.1.0) coffee-script (>= 2.2.0) @@ -52,13 +53,28 @@ GEM coffee-script-source execjs coffee-script-source (1.9.1.1) + compass (0.12.7) + chunky_png (~> 1.2) + fssm (>= 0.2.7) + sass (~> 3.2.19) + compass-rails (2.0.0) + compass (>= 0.12.2) debug_inspector (0.0.2) + draper (2.1.0) + actionpack (>= 3.0) + activemodel (>= 3.0) + activesupport (>= 3.0) + request_store (~> 1.0) erubis (2.7.0) execjs (2.5.2) + font_assets (0.1.11) + rack foreman (0.78.0) thor (~> 0.19.1) + fssm (0.2.10) globalid (0.3.5) activesupport (>= 4.1.0) + hike (1.2.3) i18n (0.7.0) jbuilder (2.3.1) activesupport (>= 3.0.0, < 5) @@ -110,19 +126,25 @@ GEM raindrops (0.14.0) rake (10.4.2) rdoc (4.2.0) - sass (3.4.16) - sass-rails (5.0.3) + request_store (1.2.0) + sass (3.2.19) + sass-rails (4.0.5) railties (>= 4.0.0, < 5.0) - sass (~> 3.1) - sprockets (>= 2.8, < 4.0) - sprockets-rails (>= 2.0, < 4.0) - tilt (~> 1.1) + sass (~> 3.2.2) + sprockets (~> 2.8, < 3.0) + sprockets-rails (~> 2.0) sdoc (0.4.1) json (~> 1.7, >= 1.7.7) rdoc (~> 4.0) + simple_form (3.1.0) + actionpack (~> 4.0) + activemodel (~> 4.0) spring (1.3.6) - sprockets (3.2.0) + sprockets (2.12.4) + hike (~> 1.2) + multi_json (~> 1.0) rack (~> 1.0) + tilt (~> 1.1, != 1.3.0) sprockets-rails (2.3.2) actionpack (>= 3.0) activesupport (>= 3.0) @@ -149,13 +171,17 @@ DEPENDENCIES better_errors binding_of_caller coffee-rails (~> 4.1.0) + compass-rails + draper + font_assets foreman jbuilder (~> 2.0) jquery-rails pg rails (= 4.2.3) - sass-rails (~> 5.0) + sass-rails (~> 4.0.3) sdoc (~> 0.4.0) + simple_form spring turbolinks uglifier (>= 1.3.0) diff --git a/app/assets/images/_test_home_bg.png b/app/assets/images/_test_home_bg.png new file mode 100644 index 0000000..270f30f Binary files /dev/null and b/app/assets/images/_test_home_bg.png differ diff --git a/app/assets/images/_test_home_pel_photo.jpg b/app/assets/images/_test_home_pel_photo.jpg new file mode 100644 index 0000000..60fbf6b Binary files /dev/null and b/app/assets/images/_test_home_pel_photo.jpg differ diff --git a/app/assets/images/bg.png b/app/assets/images/bg.png new file mode 100644 index 0000000..3f7707b Binary files /dev/null and b/app/assets/images/bg.png differ diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index f9cd5b3..0000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,15 +0,0 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, - * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any styles - * defined in the other CSS/SCSS files in this directory. It is generally better to create a new - * file per style scope. - * - *= require_tree . - *= require_self - */ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss new file mode 100644 index 0000000..712351b --- /dev/null +++ b/app/assets/stylesheets/application.scss @@ -0,0 +1,21 @@ + +//Library code and config +@import 'lib/media-response'; + +//Libraries +@import 'compass'; +@import 'foundation/config'; +@import 'reset'; +@import 'shadowbox'; + +//Foundational +@import 'foundation/containers'; +@import 'foundation/forms'; +@import 'foundation/buttons'; +@import 'foundation/header'; +@import 'foundation/layout'; + +//Views +@import 'views/home'; + + diff --git a/app/assets/stylesheets/foundation/_buttons.scss b/app/assets/stylesheets/foundation/_buttons.scss new file mode 100644 index 0000000..c078f68 --- /dev/null +++ b/app/assets/stylesheets/foundation/_buttons.scss @@ -0,0 +1,270 @@ +/******************************** + BUTTONS BUTTONS BUTTONS +********************************/ + +.btn { + display: inline-block; + *display: inline; + padding: 6px 12px; + margin-bottom: 0; + *margin-left: .3em; + font-size: 1em; + font-weight: 600; + line-height: 20px; + color: $defaultColor; + text-align: center; + vertical-align: middle; + cursor: pointer; + background-color: #fffeff; + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, #fffeff 0%,#f5f6f5 100%)); + border: 1px solid #dedede; + @include border-radius(3px); + *zoom: 1; +} + +.btn:hover, +// .btn:focus, +//.btn:active, +.btn.active, +.btn.disabled, +.btn[disabled] { + background-color: #fbfbfb; + @include filter-gradient(#fbfbfb, #e8e8e6, vertical); + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, #fbfbfb 0%,#e8e8e6 100%)); +} + +.btn:hover, +.btn.active { + color: $btnHoverColor; +} + + +//.btn:active, +.btn.active { + @include box-shadow(inset 0 0 2px rgba(0,0,0,.1)); + background-color: #e8e8e6; + @include filter-gradient(#e8e8e6, #fbfbfb, vertical); + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, #e8e8e6 0%,#fbfbfb 100%)); +} + +.btn:hover, +.btn:focus { + text-decoration: none; + transition: background-color 0.1s linear; +} + +.btn:focus { + outline: thin dotted #333; +} + +.btn.disabled, +.btn[disabled] { + cursor: default; + @include opacity(.5); +} +.btn-block { + display: block; + width: 100%; + padding-right: 0; + padding-left: 0; + @include box-sizing(border-box); +} + +.btn-block + .btn-block { + margin-top: 5px; +} +.btn-primary{ + background-color: #96ae59; + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, #96ae59 0%,#7d9448 100%)); + border:1px solid #57803D; + @include box-shadow(inset 0 1px 0 rgba(255,255,255,.18)); + text-shadow:1px 1px 1px rgba(0,0,0,.33); + font-size: em(16); + padding: 10px 18px; + color: #fff; + font-weight: bold; +} +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active, +.btn-primary.active, +.btn-primary.disabled, +.btn-primary[disabled] { + color: #fff; + background-color: darken(#96ae59, 5); + @include filter-gradient(darken(#96ae59, 5), darken(#7d9448,5), vertical); + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, darken(#96ae59, 5) 0%,darken(#7d9448,5) 100%)); +} +.btn-primary.active, +.btn-primary:active{ + background-color: darken(#7d9448,5); + @include filter-gradient(darken(#7d9448,5), darken(#96ae59, 5), vertical); + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, darken(#7d9448,5) 0%,darken(#96ae59, 5) 100%)); +} +.btn-small{ + padding: 6px 12px; + font-size: 1em; +} +.btn-big{ + font-size:em(14); + padding: 12px 20px; +} +.btn-toolbar { + @extend .clearfix; + position: relative; + display: block; + *margin-left: .3em; + white-space: nowrap; + vertical-align: middle; + *zoom: 1; +} + +.btn-toolbar:first-child { + *margin-left: 0; +} +.btn-toolbar > .btn { + position: relative; + display: block; + float: left; + @include border-radius(0); +} +.btn-toolbar > .btn + .btn { + margin-left: -1px; +} +.btn-toolbar > .btn:first-child { + margin-left: 0; + @include border-radius(3px 0 0 3px); +} + +.btn-toolbar > .btn:last-child, +.btn-toolbar > .dropdown-toggle { + @include border-radius(0 3px 3px 0); +} +.btn-toolbar > .btn:hover, +.btn-toolbar > .btn:focus, +.btn-toolbar > .btn:active, +.btn-toolbar > .btn.active { + z-index: 2; +} + +.btn-danger { + background-color: #ee4d4d; + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, #ee4d4d 0%,#f40707 100%)); + border:1px solid #57803D; + @include box-shadow(inset 0 1px 0 rgba(255,255,255,.18)); + text-shadow:1px 1px 1px rgba(0,0,0,.33); + font-size: em(16); + padding: 10px 18px; + color: #fff; + font-weight: bold; +} +.btn-danger:hover, +.btn-danger:focus, +.btn-danger:active, +.btn-danger.active, +.btn-danger.disabled, +.btn-danger[disabled] { + color: #fff; + background-color: darken(#ee4d4d, 5); + @include filter-gradient(darken(#ee4d4d, 5), darken(#f40707,5), vertical); + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, darken(#ee4d4d, 5) 0%,darken(#f40707,5) 100%)); +} +.btn-danger.active, +.btn-danger:active{ + background-color: darken(#f40707,5); + @include filter-gradient(darken(#f40707,5), darken(#ee4d4d, 5), vertical); + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, darken(#f40707,5) 0%,darken(#ee4d4d, 5) 100%)); +} + +.btn-yes { + width: 30%; + margin: 0 0 20px 55px; + padding: 10px 15px; + + @include respond-below($media-768) { + margin: 0 0 20px 16%; + } +} + +.btn-no { + width: 30%; + margin: 0 0 20px 20px; + padding: 10px 15px; +} + + +/* Awesome buttons */ + +.promo-action-button { + @include box-shadow(inset 0 1px 0 rgba(255,255,255,.18)); + background-color: #B4CF2F; + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, #B4CF2F 0%,darken(#B4CF2F,10) 100%)); + border:1px solid #57803D; + text-shadow:1px 1px 1px rgba(0,0,0,.33); + font-size: 16px; + color: #fff; + + &:hover, + &:focus, + &:active, + &.disabled, + &[disabled] { + color: #fff; + background-color: darken(#B4CF2F, 5); + @include filter-gradient(darken(#B4CF2F, 5), darken(#B4CF2F,15), vertical); + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, darken(#B4CF2F, 5) 0%,darken(#B4CF2F,15) 100%)); + } + &:active{ + background-color: darken(#B4CF2F,15); + @include filter-gradient(darken(#B4CF2F,15), darken(#B4CF2F, 5), vertical); + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, darken(#B4CF2F,15) 0%,darken(#B4CF2F, 5) 100%)); + } +} + +.dropdown-toggle-button { + @include box-shadow(inset 0 1px 0 rgba(255,255,255,.18)); + background-color: #777777; + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, #777777 0%,darken(#777777,10) 100%)); + border:1px solid #777777; + text-shadow:1px 1px 1px rgba(0,0,0,.33); + font-size: 16px; + color: #fff; + + &:hover, + &:focus, + &:active, + &.disabled, + &[disabled] { + color: #fff; + background-color: darken(#777777, 5); + @include filter-gradient(darken(#777777, 5), darken(#777777,15), vertical); + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, darken(#777777, 5) 0%,darken(#777777,15) 100%)); + } + &:active{ + background-color: darken(#777777,15); + @include filter-gradient(darken(#777777,15), darken(#777777, 5), vertical); + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, darken(#777777,15) 0%,darken(#777777, 5) 100%)); + } +} + +.admin-edit { + color: red; + float: right; +} + + diff --git a/app/assets/stylesheets/foundation/_config.scss b/app/assets/stylesheets/foundation/_config.scss new file mode 100644 index 0000000..3187a7c --- /dev/null +++ b/app/assets/stylesheets/foundation/_config.scss @@ -0,0 +1,26 @@ +/////////////////////////////// +// site theme +/////////////////////////////// + +$gray-light: #eeeeee; + +$border-radius: 4px; + +/////////////////////////////// +// responsive breakpoints +/////////////////////////////// +// main container max/min size +$max-site-width: 1100px; +$min-site-width: 700px; + +// responsive breakpoints +$media-1080: 1080px; +$media-1000: 1000px; +$media-960: 960px; +$media-920: 920px; +$media-880: 880px; +$media-825: 825px; +$media-768: 719px; +$media-580: 580px; +$media-480: 480px; +$media-400: 400px; diff --git a/app/assets/stylesheets/foundation/_containers.scss b/app/assets/stylesheets/foundation/_containers.scss new file mode 100644 index 0000000..af91deb --- /dev/null +++ b/app/assets/stylesheets/foundation/_containers.scss @@ -0,0 +1,33 @@ + +/* Hide from both screenreaders and browsers: h5bp.com/u */ +.hidden { display: none !important; visibility: hidden; } +/* Hide only visually, but have it available for screenreaders: h5bp.com/v */ +.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } +/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ +.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } +/* Hide visually and from screenreaders, but maintain layout */ +.invisible { visibility: hidden; } + +.clearfix:before, .clearfix:after { content: ""; display: table; } +.clearfix:after { clear: both; } +.clearfix { zoom: 1; } + +.alignLeft{text-align:left} +.alignCenter{text-align:center} +.alignRight{text-align:right} + +.left{float:left} +.none{float:none} +.right{float:right} +.clear{clear:both} + +.half{width:50%; @include box-sizing(border-box); margin-bottom:10px;} +.full{width:100%; @include box-sizing(border-box);} + +.inline{ display:inline} +.inline-block{display:inline-block} +.block{display:block} + +.table-row{ + display:table-row; +} diff --git a/app/assets/stylesheets/foundation/_forms.scss b/app/assets/stylesheets/foundation/_forms.scss new file mode 100644 index 0000000..1914b04 --- /dev/null +++ b/app/assets/stylesheets/foundation/_forms.scss @@ -0,0 +1,87 @@ +/************************************ + FORMS +************************************/ +fieldset{ + margin: 30px 0; +} +fieldset + fieldset{ + margin-top:60px; +} +legend{ + font-size: em(18); + font-weight: bold; + color: #333; + margin: 0 0 1em 0; +} +.form-row{ + @extend .clearfix; + margin-bottom:20px; + + .left.half{ + padding-right:12px; + } +} +label{ + display: block; + font-weight: bold; + color: #343433; + padding: 0 0 5px 0; + font-size: 15px; + cursor: default; +} +.hint, +label.error{ + font-weight: normal; + color: #797979; + font-size: em(12); + font-style: italic; + margin:5px 0 0 0; +} +.hint-top{ + margin: 0 0 8px 0; +} +.hint + input, +.hint + .scSelect{ + margin-top:10px; +} +label.error{ + color:#B84223; +} +input[type=text], +input[type=email], +input[type=password], +textarea{ + border:1px solid #DEDEDE; + @include border-radius(4px); + @include box-shadow(inset 0 1px 2px rgba(13,40,44,.1)); + padding: 10px 9px; + @include box-sizing(border-box); + width:100%; + color: $defaultColor; + + &:focus{ + border-color:#D9B565; + outline:0; + @include box-shadow(inset 0 1px 2px rgba(13,40,44,.1), 0 0 5px #FAD175); + } +} +input.error,input.error:focus, textarea.error{ + border:1px solid #B84223; + @include box-shadow(inset 0 1px 2px rgba(13,40,44,.1), 0 0 5px #B84223); +} +textarea{ + height: 130px +} + +input + input{ + margin-top: 9px; +} + +.error-block { + color:#B84223; +} + +select { + background-color: white; + color: #333; +} diff --git a/app/assets/stylesheets/foundation/_header.scss b/app/assets/stylesheets/foundation/_header.scss new file mode 100644 index 0000000..e46ab78 --- /dev/null +++ b/app/assets/stylesheets/foundation/_header.scss @@ -0,0 +1,148 @@ +#header{ + background-color: #464c4d; + $experimental-support-for-svg: true; + @include background-image(linear-gradient(top, #464c4d 0%,#373c3d 100%)); + border-bottom: 1px solid #373C3D; + height: 72px; + position: relative; + z-index: 2; + + .container { + padding: 0; + + @include respond-below($media-768) { + padding: 0px 10px; + } + } + + .logo{ + float:left; + width:293px; + height:38px; + font-size: 20px; + font-weight: bold; + margin: 16px 0 0 0; + + // a{ + // height: 100%; + // display: block; + // text-indent: -9999px; + // overflow: hidden; + // body.ie8 & { + // background-image: url("/assets/sprite.png"); + // } + // @include respond-retina(nonretina) { + // background-image: url("/assets/sprite.png"); + // } + // @include respond-retina(retina) { + // background-image: url("/assets/sprite-2x.png"); + // background-size: 296px 170px; + // } + // } + + // @include respond-below($media-880) { + // width: 210px; + // height: 31px; + // margin: 21px 0 0 0; + // a{ + // background-position: 0 -133px; + // } + // } + + } + + nav { + float:right; + margin-top:18px; + width: 440px; + + a { + font-weight: bold; + color: #DADEDF; + text-shadow:0 1px 1px rgba(0,0,0,.5); + display: inline-block; + margin:9px 12px 0 12px; + text-decoration: none; + @include transition(color .2s linear); + + &:hover{ + color:#fff; + } + } + + .btn { + float: right; + border-radius: 3px; + border: 0; + padding: 8px 20px; + margin: 0; + @include background-image(linear-gradient(top, #B1C96B 0%, #829A54 100%)); + color: #333; + text-shadow: none; + + &:hover,&:active,&.active{ + @include background-image(linear-gradient(top, darken(#B1C96B, 5%) 0%, darken(#829A54, 5%) 100%)); + color: #333; + } + + } + + .btn-signup{ + background: #515758 + } + + } +} + +/* Mid-sized mobile devices */ +@include respond-between($media-580, $media-768) { + + #header { + nav { + width: 100%; + margin-left: -215px; + text-align: right; + } + + nav form { + width: 70%; + } + + nav .btn { + padding: 8px 10px; + } + } +} + +/* Phone-sized mobile devices */ +@include respond-below($media-580) { + #header { + height: 58px; + + .container { + padding: 0 8px; + } + + .logo { + margin-top: 15px; + width: 35px; + height: 27px; + + a{ + background-position: -217px -133px; + } + + } + + nav { + margin-top: 11px; + width: 250px; + } + + nav .btn { + padding: 8px 0; + width: 75px; + white-space: nowrap; + } + } +} diff --git a/app/assets/stylesheets/foundation/_layout.scss b/app/assets/stylesheets/foundation/_layout.scss new file mode 100644 index 0000000..e281df8 --- /dev/null +++ b/app/assets/stylesheets/foundation/_layout.scss @@ -0,0 +1,265 @@ +* { + margin: 0; +} + +html, body { + height: 100%; +} + +body { + overflow-y: scroll; +} + +.main { + margin: 0; + padding: 0; + min-height: 100%; + /* overflow-x: hidden; */ + width: 100%; + background: #EDEDEB; +} + +// 102px is 72px for foot height plus 30px padding +.content-wrap{ + @extend .clearfix; + padding-bottom: 102px; + + @include respond-below($media-768) { + padding-bottom: 71px; + } +} + +.mobile-app { + .content-wrap{ + padding-bottom: 0; + } +} + +.container{ + width:90%; + min-width:$min-site-width; + max-width:$max-site-width; + margin:0 auto; + clear: both; + + @include respond-below($media-768) { + width: 100%; + min-width: 100%; + margin: 0 auto; + padding: 10px; + } + + &.account-forms, + &.content.account-forms { + width: 700px; + left: 50%; + margin: 30px 0 30px -350px; + + @include respond-below($media-768) { + width: 90%; + left: 50%; + margin: 15px -45% 15px; + min-width: 0; + } + + @include respond-below($media-580) { + width: 100%; + left: 0%; + margin: 0 0 15px; + } + } + + &.single-column { + + @include respond-below($media-768) { + padding: 0; + } + + } +} + +.container-narrow{ + width:650px; +} + + +.content{ + border: 1px solid #C3C4C5; + background: #fff; + border-radius: 5px; + overflow: hidden; + position: relative; + + @include respond-below($media-768) { + } + @include respond-below($media-580) { + border: 0; + border-radius: 0; + overflow: visible; + } +} + +.container.content { + margin: 30px auto 30px auto; + + /* @include respond-below($media-768) { + margin: 15px auto 15px auto; + } */ + + @include respond-below($media-768) { + margin: 0 auto; + } +} + +.columns-container{ + @extend .clearfix; + position: relative; + display: table; + border-collapse: separate; + border-spacing: 0; + width: 100%; + + @include respond-below($media-768) { + display: block; + } +} + +/* Small left sidebar w/large right content column */ +.category-list-col{ + width: 220px; + min-width: 220px; + height: 100%; + display: table-cell; + vertical-align: top; + border-right:1px solid #C3C4C5; + background: #EDEDEB; +} + +.establishment-list-col{ + display: table-cell; + vertical-align: top; +} + +/* Split screen, 2 columns */ + +.content-column-left { + @extend .clearfix; + float: left; + width: 50%; + padding: 0 10px 0 25px; +} + +.content-column-right { + @extend .clearfix; + float: right; + width: 50%; + padding: 0 25px 0 10px; +} + +@include respond-below($media-768) { + .content-column-left, + .content-column-right { + width: 100%; + display: block; + float: none; + padding: 0; + } +} + + + +/* Pattern background */ + +.pattern-background { + background: url("/assets/camo-header-bg.png"); + background-size: cover; + text-shadow: 0 1px 1px #fff; +} + + + + +.sidebar{ + background: #F7F7F5; + @include border-radius(3px); + /*padding-bottom: 99999px; + margin-bottom:-99999px;*/ + + &.left{ + border-right:1px solid #C3C4C5; + left:0; + } + &.right{ + border-left:1px solid #C3C4C5; + right:0; + } +} + +section{ + margin: 20px 0; + @include respond-below($media-768) { + margin: 10px 0; + } +} + +/* --- Gridpak variables ---*/ +$max_columns: 12; +$padding: 0 25px; +$gutter_px: 0px; +$gutter_pc: 0; +@mixin col { + float:left; + @include box-sizing(border-box); + -moz-background-clip:padding-box !important; + -webkit-background-clip:padding-box !important; + background-clip:padding-box !important; + padding-left:25px; + padding-right:25px; + margin-left:$gutter_pc; +} + +@mixin span($num, $gutter_pc, $gutter_px, $padding, $max_columns) { + $one_col: (100% - ($gutter_pc * ($max_columns - 1))) / $max_columns; + width:($one_col * $num) + ($gutter_pc * ($num - 1)); +} + +.row { + width: 100%; + *zoom: 1; + overflow: hidden; + position: relative; +} + +.row:before, +.row:after { + display: table; + line-height: 0; + content: ""; +} + +.row:after { + clear: both; +} +.row [class*="span"] { + @include col; +} +.row [class*="span"].right { + float:right; +} +.row [class*="span"]:first-child{ + margin-left:0; +} +.row{ + .span1 {@include span(1, $gutter_pc, $gutter_px, $padding, $max_columns);} + .span2 {@include span(2, $gutter_pc, $gutter_px, $padding, $max_columns);} + .span3 {@include span(3, $gutter_pc, $gutter_px, $padding, $max_columns);} + .span4 {@include span(4, $gutter_pc, $gutter_px, $padding, $max_columns);} + .span5 {@include span(5, $gutter_pc, $gutter_px, $padding, $max_columns);} + .span6 {@include span(6, $gutter_pc, $gutter_px, $padding, $max_columns);} + .span7 {@include span(7, $gutter_pc, $gutter_px, $padding, $max_columns);} + .span8 {@include span(8, $gutter_pc, $gutter_px, $padding, $max_columns);} + .span9 {@include span(9, $gutter_pc, $gutter_px, $padding, $max_columns);} + .span10 {@include span(10, $gutter_pc, $gutter_px, $padding, $max_columns);} + .span11 {@include span(11, $gutter_pc, $gutter_px, $padding, $max_columns);} + .span12 {width:100%;} +} diff --git a/app/assets/stylesheets/lib/_media-response.sass b/app/assets/stylesheets/lib/_media-response.sass new file mode 100644 index 0000000..0c0f8cd --- /dev/null +++ b/app/assets/stylesheets/lib/_media-response.sass @@ -0,0 +1,50 @@ +// -------------------------------------------------------- +// +// Responsive image helper +// +// -------------------------------------------------------- + +@mixin respond-retina($media) + @if $media == nonretina + @media (-webkit-max-device-pixel-ratio: 1.5), (max-resolution: 143dppx) + @content + @else if $media == retina + @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dppx) + @content + +// example: +// @include respond-retina(nonretina) +// background: url($png-rollit-logo) center center no-repeat + +// -------------------------------------------------------- +// +// Responsive override helpers +// +// -------------------------------------------------------- + +// Widths +@mixin respond-above($min-size) + @media screen and (min-width: $min-size) + @content +@mixin respond-below($max-size) + @media screen and (max-width: $max-size) + @content +@mixin respond-between($min-size, $max-size) + @media screen and (min-width: $min-size) and (max-width: $max-size) + @content + +// Heights +@mixin respond-above-ht($min-size) + @media screen and (min-height: $min-size) + @content +@mixin respond-below-ht($max-size) + @media screen and (max-height: $max-size) + @content + +// example: +// .icon-small-play:after +// @include respond-below($media-768) +// top: -27px +// @include respond-below($media-600) +// top: -75px + diff --git a/app/assets/stylesheets/reset.scss b/app/assets/stylesheets/reset.scss new file mode 100644 index 0000000..6b809df --- /dev/null +++ b/app/assets/stylesheets/reset.scss @@ -0,0 +1,64 @@ +$defaultColor: #797979; +$btnHoverColor: #546D1A; +$basefont:13; + +@function em($target, $context: $basefont) { + @return ($target / $context) * 1em; +} +/******************************** + NORMALIZE +********************************/ +*, *:before, *:after { box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; } +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } +audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } +audio:not([controls]) { display: none; } +[hidden] { display: none; } +html { font-size: 100%; line-height: 1.5; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); text-size-adjust: 100%; } +body { position: relative; margin: 0; font-size: $basefont+px; line-height: 1.231; background:#D4D4D1; } +html, body { height: 100%; } +body, button, input, select, textarea { font-family: 'AvenirNext-Regular', sans-serif; color: $defaultColor; } +::-moz-selection { background: #bada55; color: #fff; text-shadow: none; } +::selection { background: #bada55; color: #fff; text-shadow: none; } +p{margin:8px 0} +a { color: #1F88A9; text-decoration: none;} +a:hover { color: #0e7292; } +a:focus { outline: thin dotted; } +a:hover, a:active { outline: 0; } +abbr[title] { border-bottom: 1px dotted; } +b, strong { font-weight: bold; } +blockquote { margin: 1em 40px; } +dfn { font-style: italic; } +hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } +ins { background: #ff9; color: #000; text-decoration: none; } +mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } +pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } +pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } +q { quotes: none; } +q:before, q:after { content: ""; content: none; } +small { font-size: 85%; } +sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } +ul, ol { margin: 1em 0; padding: 0 0 0 40px; } +dd { margin: 0; } +nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } +img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } +/* Correct overflow not hidden in IE9 */ +svg:not(:root) { overflow: hidden; } +figure { margin: 0; } +form { margin: 0 } +fieldset { border: 0; margin: 0; padding: 0 } +label { cursor: pointer } +legend { border: 0; *margin-left: -7px; padding: 0; } +button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } +button, input { line-height: normal; *overflow: visible; } +button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } +table button, table input { *overflow: auto; } +button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } +input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } +input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } +input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } +textarea { overflow: auto; vertical-align: top; resize: vertical; } +/* Colors for form validity */ +table { border-collapse: collapse; border-spacing: 0; } +td { vertical-align: top; } diff --git a/app/assets/stylesheets/shadowbox.scss b/app/assets/stylesheets/shadowbox.scss new file mode 100644 index 0000000..9c27a2c --- /dev/null +++ b/app/assets/stylesheets/shadowbox.scss @@ -0,0 +1,61 @@ +#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{} +#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;} +#sb-overlay{position:relative;height:100%;width:100%;} +#sb-wrapper{position:absolute;visibility:hidden;width:100px;} +#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;} +#sb-body{position:relative;height:100%;} +#sb-body-inner{position:absolute;height:100%;width:100%;} +#sb-player.html{height:100%;overflow:auto;} +#sb-body img{border:none;} +#sb-loading{position:relative;height:100%;} +#sb-loading-inner{position:absolute;font-size:0;line-height:24px;height:50px;top:50%;margin-top:-25px;width:100%;text-align:center;} +#sb-loading-inner span{background:url(/assets/loading.gif) no-repeat;padding-left:0;display:inline-block;height:50px;width:50px;} +#sb-body,#sb-loading{background-color:#060606;} +#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;} +#sb-title,#sb-title-inner{height:26px;line-height:26px;} +#sb-title-inner{font-size:16px;} +#sb-info,#sb-info-inner{height:53px;line-height:53px;background: #F7F7F7;} +#sb-info{ + text-indent: 40px; + @include border-radius(0 0 5px 5px); +} +#sb-info-inner{ + font-size:12px; + @include border-radius(0 0 5px 0); +} +#sb-nav{float:right;height:100%;padding:0 0;width:45%;} +#sb-nav-next,#sb-nav-previous{ + + display:block; + float: + right; + height:100%; + width:59px; + border-left:1px solid #B0B0B0; + cursor:pointer; + background-repeat:no-repeat; + opacity:.6; + @include transition(opacity .2s linear); + + &:hover{ + opacity: 1; + } +} +#sb-nav-close{ + position: absolute; + top:16px; + left:14px; + display: block; + text-indent: -9999px; + background: url('/assets/sprite.png') -62px -84px !important; + width:19px; + height:19px; } +#sb-nav-next{background:url(/assets/slideshow-nav.png) 100% 0 !important;} +#sb-nav-previous{background:url(/assets/slideshow-nav.png) 0 0 !important;} +#sb-nav-play{display: none;} +#sb-nav-pause{display: none;} +#sb-counter{float:left;width:45%;} +#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;} +#sb-counter a.sb-counter-current{text-decoration:underline;} +div.sb-message{font-size:12px;padding:10px;text-align:center;} +div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;} diff --git a/app/assets/stylesheets/views/_home.scss b/app/assets/stylesheets/views/_home.scss new file mode 100644 index 0000000..4d4e18e --- /dev/null +++ b/app/assets/stylesheets/views/_home.scss @@ -0,0 +1,87 @@ +#welcome-area { + position: absolute; + width: 100%; + top: 72px; + bottom: 0px; + + @include respond-below($media-580) { + top: 58px; + } + + #home-cover-area { + + #welcome-background { + background-image: url("/assets/_test_home_pel_photo.jpg"); + // override for mobile class and/or mobile app class + height: 100%; + width: 100%; + position: absolute; + background-size: cover; + background-position: center center; + background-repeat: no-repeat; + } + + #welcome-content { + position: absolute; + left: 50%; + top: 20%; + width: 480px; + margin-left: -240px; + text-align: center; + @include respond-below($media-480) { + width: 304px; + margin-left: -152px; + } + + a.btn { + margin-top: 20px; + + &:first-of-type { + margin-right: 10px; + } + } + } + + h1.welcome-tagline { + text-transform: uppercase; + color: #fff; + font-size: 30px; + margin-bottom: 4px; + text-shadow: 0px 1px 1px #333; + + @include respond-below($media-400) { + font-size: 22px; + } + } + + h2.welcome-subtagline { + text-transform: uppercase; + width: 400px; + margin: 0 auto; + color: #fff; + font-size: 16px; + margin-bottom: 20px; + text-shadow: 0px 1px 1px #333; + + @include respond-below($media-580) { + font-size: 15px; + width: 304px; + } + } + + } +} + +.content-wrap.home { + position: absolute; + left: 0; + right: 0; + top: 100%; + padding-bottom: 0; + background: #fff; + + .container.content { + margin: 30px auto 102px auto; + border: 0; + } +}