diff --git a/LICENSE b/LICENSE index d19381822..231f5e8f5 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -Copyright 2012 Apigy Inc. and other contributors +Copyright 2012—2014 Apigy Inc. and other contributors http://api.gy/ Permission is hereby granted, free of charge, to any person obtaining @@ -19,4 +19,3 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - diff --git a/app/assets/stylesheets/footer.css.scss b/app/assets/stylesheets/footer.css.scss index 074e3d026..71b38be80 100644 --- a/app/assets/stylesheets/footer.css.scss +++ b/app/assets/stylesheets/footer.css.scss @@ -1,22 +1,25 @@ -.footer +.footer { padding: 40px 0; - ul + @media (max-width: $wrapper_breakpoint) { + padding: 40px; + } + ul { float: left; } - li + li { margin-bottom: 10px; } - a + a { font-size: 18px; color: #525252; font-family: $primary_font, $secondary_font, $tertiary_font; } - p + p { font-size: 18px; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/homepage.css.scss b/app/assets/stylesheets/homepage.css.scss index 838fa1e46..bb3705ce0 100644 --- a/app/assets/stylesheets/homepage.css.scss +++ b/app/assets/stylesheets/homepage.css.scss @@ -10,24 +10,38 @@ margin-top: 5px; } -.fb-like +.fb-like { - margin-left: 5px; - float:left; + margin-left: 5px; + float: left; } -#video +#video { float: left; width: 512px; - height: 385px; background: #fff; -moz-box-shadow: 0 2px 6px rgba(0,0,0,.39); /* drop shadow */ -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.39); /* drop shadow */ box-shadow: 0 2px 6px rgba(0,0,0,.39); /* drop shadow */ - img:hover + img { - opacity: 0.5; - cursor: pointer; + width: 100%; + height: 100%; + &:hover { + opacity: 0.5; + cursor: pointer; + } + } + @media (max-width: $wrapper_breakpoint) { + float: none; + width: auto; + height: auto; + margin-left: auto; + margin-right: auto; } -} \ No newline at end of file + @media (max-width: $mobile_breakpoint) { + width: 100%; + height: auto; + } +} diff --git a/app/assets/stylesheets/homepage/call_to_action.css.scss b/app/assets/stylesheets/homepage/call_to_action.css.scss index 078f6c572..abe5e158a 100644 --- a/app/assets/stylesheets/homepage/call_to_action.css.scss +++ b/app/assets/stylesheets/homepage/call_to_action.css.scss @@ -47,9 +47,14 @@ #middle_reserve { - padding: 60px; + padding: 60px 0; + @media (max-width: $wrapper_breakpoint) { + width: auto; + } h2 { margin-bottom: 26px; + margin-left: 50px; + margin-right: 50px; } } diff --git a/app/assets/stylesheets/homepage/faq.css.scss b/app/assets/stylesheets/homepage/faq.css.scss index ab3b8217d..ca9ca79a1 100644 --- a/app/assets/stylesheets/homepage/faq.css.scss +++ b/app/assets/stylesheets/homepage/faq.css.scss @@ -1,10 +1,19 @@ #faqs { padding-bottom: 30px; border-bottom: 1px solid #dfdfdf; + @media (max-width: $wrapper_breakpoint) { + padding-left: 50px; + padding-right: 50px; + width: auto; + } ul { margin-top: 50px; float: left; width: 50%; + @media (max-width: $wrapper_breakpoint) { + float: none; + width: auto; + } li { width: 400px; @@ -16,6 +25,10 @@ line-height: 1.4; font-size: 18px; } + @media (max-width: $wrapper_breakpoint) { + width: 100%; + margin: 0 0 30px 0; + } } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/homepage/key_points.css.scss b/app/assets/stylesheets/homepage/key_points.css.scss index 9bded1f50..2a823af46 100644 --- a/app/assets/stylesheets/homepage/key_points.css.scss +++ b/app/assets/stylesheets/homepage/key_points.css.scss @@ -8,6 +8,11 @@ .point_copy { width: 440px; + @media (max-width: $wrapper_breakpoint) { + width: auto; + padding-left: 50px; + padding-right: 50px; + } h3 { margin: 20px 0 30px 0; } @@ -27,7 +32,10 @@ h3 { #one { background: url(image_path("1-background.png")) no-repeat bottom left; height: 320px; - width: 936px; + width: $wrapper_width; + @media (max-width: $wrapper_breakpoint) { + width: 100%; + } } #two { @@ -45,6 +53,15 @@ h3 { height: 320px; } +@media (max-width: $mobile_breakpoint) { + #one, #two, #three, #four { + height: auto; + } +} + .right { margin-left: 500px; + @media (max-width: $wrapper_breakpoint) { + margin-left: 0; + } } diff --git a/app/assets/stylesheets/homepage/other_points.css.scss b/app/assets/stylesheets/homepage/other_points.css.scss index 4471031c7..6dcbc6d61 100644 --- a/app/assets/stylesheets/homepage/other_points.css.scss +++ b/app/assets/stylesheets/homepage/other_points.css.scss @@ -1,11 +1,17 @@ -#other_points +#other_points { - li + li { width: 400px; float: left; margin: 0 120px 50px 0; padding-top: 60px; + @media (max-width: $wrapper_breakpoint) { + margin: 0; + padding: 0 50px 50px 50px; + width: auto; + float: none; + } } #section-1 { background: url(asset-path("", "images")) no-repeat center top; @@ -24,5 +30,8 @@ h4 { width: 400px; text-align: center; + @media (max-width: $wrapper_breakpoint) { + width: 100%; + } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/homepage/press.css.scss b/app/assets/stylesheets/homepage/press.css.scss index 9cc907b99..3b42c8a20 100644 --- a/app/assets/stylesheets/homepage/press.css.scss +++ b/app/assets/stylesheets/homepage/press.css.scss @@ -8,11 +8,18 @@ { float: left; margin: 0 16px; + @media (max-width: $wrapper_breakpoint) { + float: none; + text-align: center; + } a { display: block; height: 48px; opacity: 0.2; text-indent: -10000px; + @media (max-width: $wrapper_breakpoint) { + margin: 10px auto; + } } a:hover { opacity: 1; diff --git a/app/assets/stylesheets/homepage/stats.css.scss b/app/assets/stylesheets/homepage/stats.css.scss index b07cd6081..5aa024c7c 100644 --- a/app/assets/stylesheets/homepage/stats.css.scss +++ b/app/assets/stylesheets/homepage/stats.css.scss @@ -31,6 +31,16 @@ padding-right: 26px; padding-left: 26px; text-align: left; + @media (max-width: $mobile_breakpoint) { + padding-right: 10px; + padding-left: 10px; + &:first { + padding-left: 0; + } + &:last { + padding-right: 0; + } + } span { color: #868686; @@ -40,6 +50,12 @@ font-family: $primary_font, $secondary_font, $tertiary_font; } } + @media (max-width: $wrapper_breakpoint) { + float: none; + width: auto; + padding: 0 50px; + margin: 40px auto 0 auto; + } } body.lt-ie9 { @@ -62,6 +78,7 @@ body.lt-ie9 border-radius: 30px; width: 383px; background: #dbdbdb; + overflow: hidden; #progress { height: 40px; @@ -93,6 +110,9 @@ body.lt-ie9 position: relative; top: -35px; } + @media (max-width: $wrapper_breakpoint) { + width: 100%; + } } .small { diff --git a/app/assets/stylesheets/main.css.scss b/app/assets/stylesheets/main.css.scss index 2fc6ba1b5..08c79e04b 100644 --- a/app/assets/stylesheets/main.css.scss +++ b/app/assets/stylesheets/main.css.scss @@ -1,8 +1,9 @@ @import "variables"; +@import "responsive_embed"; @import "primitives"; @import "header"; @import "footer"; @import "homepage"; @import "share"; -@import "checkout"; \ No newline at end of file +@import "checkout"; diff --git a/app/assets/stylesheets/primitives.css.scss b/app/assets/stylesheets/primitives.css.scss index c9d32fd8e..c00fd12ce 100644 --- a/app/assets/stylesheets/primitives.css.scss +++ b/app/assets/stylesheets/primitives.css.scss @@ -1,12 +1,12 @@ /* For modern browsers */ .clearfix:before, -.clearfix:after +.clearfix:after { content:""; display:table; } -.clearfix:after +.clearfix:after { clear:both; } @@ -44,7 +44,7 @@ form margin-top: 15px; } -body, input, textarea +body, input, textarea { font-size: $font_size; font-family: $primary_font, $secondary_font, $tertiary_font; @@ -53,18 +53,18 @@ body, input, textarea -webkit-font-smoothing: antialiased; } -a +a { text-decoration: none; color: $link_color; } -a:hover +a:hover { text-decoration: underline; } -i +i { font-style: italic; } @@ -111,6 +111,9 @@ h1 { color: $h1_color; letter-spacing: -.05em; float: left; + @media (max-width: $wrapper_breakpoint) { + margin-left: 50px; + } a { color: $h1_color; @@ -143,15 +146,18 @@ h5 { } .wrapper { - width: 935px; + width: $wrapper_width; margin: 0 auto; + @media (max-width: $wrapper_breakpoint) { + width: 100%; + } } .center { text-align: center; } -.gray_background +.gray_background { width: 100%; padding: 50px 0; @@ -221,7 +227,7 @@ body.lt-ie9 { background-image: -o-linear-gradient(90deg, $button_top_gradient_hover 0%, $button_bottom_gradient_hover 100%); /* gradient fill */ background-image: -webkit-linear-gradient(90deg, $button_top_gradient_hover 0%, $button_bottom_gradient_hover 100%); /* gradient fill */ background-image: linear-gradient(90deg, $button_top_gradient_hover 0%, $button_bottom_gradient_hover 100%); /* gradient fill */ - text-decoration: none; + text-decoration: none; } .blue_button:active { @@ -239,4 +245,4 @@ body.lt-ie9 { background-image: -o-linear-gradient(90deg, $button_top_gradient_active 0%, $button_bottom_gradient_active 100%); /* gradient fill */ background-image: -webkit-linear-gradient(90deg, $button_top_gradient_active 0%, $button_bottom_gradient_active 100%); /* gradient fill */ background-image: linear-gradient(90deg, $button_top_gradient_active 0%, $button_bottom_gradient_active 100%); /* gradient fill */ -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/responsive_embed.css.scss b/app/assets/stylesheets/responsive_embed.css.scss new file mode 100644 index 000000000..1c259c219 --- /dev/null +++ b/app/assets/stylesheets/responsive_embed.css.scss @@ -0,0 +1,37 @@ +// Bootstrap3 Embeds responsive +// +// Credit: Nicolas Gallagher and SUIT CSS +// +// @link https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_responsive-embed.scss + +.embed-responsive { + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; + + .embed-responsive-item, + iframe, + embed, + object, + video { + position: absolute; + top: 0; + left: 0; + bottom: 0; + height: 100%; + width: 100%; + border: 0; + } + + // Modifier class for 16:9 aspect ratio + &.embed-responsive-16by9 { + padding-bottom: 56.25%; + } + + // Modifier class for 4:3 aspect ratio + &.embed-responsive-4by3 { + padding-bottom: 75%; + } +} diff --git a/app/assets/stylesheets/variables.css.scss b/app/assets/stylesheets/variables.css.scss index b01cb55a0..d90d7b523 100644 --- a/app/assets/stylesheets/variables.css.scss +++ b/app/assets/stylesheets/variables.css.scss @@ -25,39 +25,44 @@ $secondary_font: "Helvetica"; $tertiary_font: "Arial"; // Gray background is a gradient -- top == 0%, middle == 50%, bottom == 100% -$gray_background_top_color: #F6F6F6; -$gray_background_middle_color: #FAFAFA; -$gray_background_bottom_color: #FAFAFA; +$gray_background_top_color: #F6F6F6; +$gray_background_middle_color: #FAFAFA; +$gray_background_bottom_color: #FAFAFA; // The bottom border on the gray backgrounds -$gray_background_border_color: #C4C4C4; +$gray_background_border_color: #C4C4C4; // Button colors/background/border -$button_color: white; -$button_hovered_color: #0088d6; -$button_active_background: #FAFAFA; -$button_active_border: #C8C8C8; +$button_color: white; +$button_hovered_color: #0088d6; +$button_active_background: #FAFAFA; +$button_active_border: #C8C8C8; // This only affects .blue_button, which is the "Reserve Now" button you see on Lockitron's homepage -$button_text_shadow_color: rgba(0,0,0,.37); -$button_box_shadow_color: rgba(255,255,255,.92); +$button_text_shadow_color: rgba(0,0,0,.37); +$button_box_shadow_color: rgba(255,255,255,.92); $button_box_shadow_inset_color: rgba(0,0,0,.22); -$button_border_radius: 10px; +$button_border_radius: 10px; // Default State -$button_ie9_gradient: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwZTk2ZTQiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMmEwZmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); -$button_top_gradient: #0E96E4; -$button_bottom_gradient: #02A0FA; +$button_ie9_gradient: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwZTk2ZTQiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMmEwZmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); +$button_top_gradient: #0E96E4; +$button_bottom_gradient: #02A0FA; // Hover State -$button_ie9_gradient_hover: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyZGE0ZTkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMWFlZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); -$button_top_gradient_hover: #2DA4E9; -$button_bottom_gradient_hover: #21AEFF; +$button_ie9_gradient_hover: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyZGE0ZTkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMWFlZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); +$button_top_gradient_hover: #2DA4E9; +$button_bottom_gradient_hover: #21AEFF; // Active State -$button_ie9_gradient_active: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMzlmZjciIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMzlmZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); -$button_top_gradient_active: #039FF7; +$button_ie9_gradient_active: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMzlmZjciIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMzlmZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); +$button_top_gradient_active: #039FF7; $button_bottom_gradient_active: #039ff7; // FAQ Entry -$summary_color: #0088D6; \ No newline at end of file +$summary_color: #0088D6; + +// Wrapper break point +$wrapper_width: 935px; +$wrapper_breakpoint: $wrapper_width - 1; +$mobile_breakpoint: 479px; diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 7ec9d818c..e0420661e 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,8 +1,18 @@ - +
- +Selfstarter is an open source starting point for building your own ad-hoc crowdfunding site. It was put together by Lockitron after they were turned down from Kickstarter. -
+
@@ -19,7 +19,7 @@Selfstarter is a starting point for you to build your own solution. It is set up to collect reservations using Amazon Payments, but you can choose your own provider too. -
+
@@ -32,7 +32,7 @@We've kept Selfstarter really simple, but that also means that you should beef it up with your own authentication, administration and product management code. -
+
@@ -45,7 +45,7 @@Most of what you need to get started is in the Readme. Selfstarter is based on Ruby on Rails, and we've tried to break up all of the different parts in a sensible fashion. -
+
diff --git a/app/views/preorder/homepage/_stats.html.erb b/app/views/preorder/homepage/_stats.html.erb index e5324a66c..93c750689 100644 --- a/app/views/preorder/homepage/_stats.html.erb +++ b/app/views/preorder/homepage/_stats.html.erb @@ -1,20 +1,15 @@
- <%= Settings.ships %>
<%= Settings.call_to_action %> @@ -61,7 +56,7 @@<%= Settings.dont_give_them_a_reason_to_say_no %>
<%= like_button %>