From 845509b0c032d102b2e5563a87fa48ab6bbc2ab3 Mon Sep 17 00:00:00 2001 From: Rohan Mitchell Date: Tue, 12 May 2015 13:51:31 +1000 Subject: [PATCH] Style shops signup page --- .../stylesheets/darkswarm/home_panes.css.sass | 40 +++++--- .../stylesheets/darkswarm/signup.css.sass | 11 ++- app/views/home/_cta2.html.haml | 1 - app/views/producers/signup.html.haml | 68 ++++++------- app/views/shops/index.html.haml | 1 - app/views/shops/signup.html.haml | 98 +++++++++---------- 6 files changed, 112 insertions(+), 107 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/home_panes.css.sass b/app/assets/stylesheets/darkswarm/home_panes.css.sass index af7862fd2e..fbf9714c2a 100644 --- a/app/assets/stylesheets/darkswarm/home_panes.css.sass +++ b/app/assets/stylesheets/darkswarm/home_panes.css.sass @@ -104,10 +104,11 @@ h2 font-weight: 300 font-size: 45px + margin-bottom: 2rem #stats.pane .row.header - padding-bottom: 0 + padding-bottom: 2rem .row.content padding-top: 0 @@ -121,14 +122,15 @@ font-weight: normal font-size: 75px -#shops.pane +#shops.pane, #producer-signup.pane, #shops-signup.pane &, & * color: white h2 - color: white + margin-bottom: 2rem + font-size: 4.4rem font-weight: 300 - font-size: 70px + color: white .cta.cta-producers.pane @include fullwidthbg @@ -142,12 +144,12 @@ #producer-signup.pane, #shops-signup.pane background-color: lighten($clr-turquoise, 10%) - &, h1, h2, h3, h4, h5, h6, p - color: white - h2 - color: white - font-weight: 300 - font-size: 3rem + +#producer-signup.pane + .row.header + padding-bottom: 0 + .row.content + padding-top: 0 #producer-case-studies padding-top: 100px @@ -172,7 +174,7 @@ background-color: lighten($ofn-grey, 44%) #shops-signup.pane - background-color: lighten($clr-brick, 26%) + background-color: $australia-orange #producer-case-studies, #shops-case-studies padding-top: 100px @@ -202,8 +204,16 @@ opacity: 0.75 #shops-case-studies - background-color: lighten($clr-brick, 56%) + background-image: url("/assets/hubs-bg.jpg") + background-position: center center + -webkit-filter: brightness(1.1) + filter: brightness(1.1) + + h2 + color: $australia-orange + font-size: 3rem .case-study - border: 1px solid rgba($clr-brick-bright, 0.5) - a - color: $clr-brick + background-color: rgba(255, 255, 255, 0.5) + border: none + h4, a + color: $australia-orange diff --git a/app/assets/stylesheets/darkswarm/signup.css.sass b/app/assets/stylesheets/darkswarm/signup.css.sass index f2c8796973..9c84bd6f16 100644 --- a/app/assets/stylesheets/darkswarm/signup.css.sass +++ b/app/assets/stylesheets/darkswarm/signup.css.sass @@ -2,6 +2,7 @@ @import mixins @import typography @import animations +@import variables table.signup-table width: 100% @@ -19,9 +20,9 @@ table.signup-table.hubs-table, table.signup-table.producers-table background-color: lighten($ofn-grey, 41%) td:last-child &, & i - color: $clr-brick - border-bottom: 1px solid rgba($clr-brick, 0.3) - background-color: lighten($clr-brick, 48%) + color: $australia-orange + border-bottom: 1px solid rgba($australia-orange, 0.3) + background-color: lighten($australia-orange, 48%) thead background-color: transparent tr @@ -36,7 +37,7 @@ table.signup-table.hubs-table, table.signup-table.producers-table td:last-child &, & * color: white - background: $clr-brick + background: $australia-orange h5 text-transform: uppercase color: $ofn-grey @@ -58,7 +59,7 @@ table.signup-table.hubs-table, table.signup-table.producers-table td:last-child &, & * color: white - background: $clr-brick + background: $australia-orange h2 .text-small text-transform: uppercase diff --git a/app/views/home/_cta2.html.haml b/app/views/home/_cta2.html.haml index 3f982b9376..ab95bae95d 100644 --- a/app/views/home/_cta2.html.haml +++ b/app/views/home/_cta2.html.haml @@ -3,6 +3,5 @@ .small-12.columns.text-center %h2 Shopping that makes the world a better place. %br - %br %a.button.transparent{href: "/shops"} I'm Ready diff --git a/app/views/producers/signup.html.haml b/app/views/producers/signup.html.haml index 3d5589c656..8fcd543aec 100644 --- a/app/views/producers/signup.html.haml +++ b/app/views/producers/signup.html.haml @@ -1,9 +1,11 @@ #panes #producer-signup.pane - .row + .row.header + .small-12.medium-12.columns.text-center + %h2 Food producers, empowered. + .row.content .small-12.medium-6.medium-offset-3.columns.text-center - %h2 Food producers, unstoppable. - %p.text-big Sell your food and tell your stories to diverse new markets. Save time and money on every overhead. We support innovation without the risk. We've levelled the playing field. + %p.text-big Sell your food and tell your stories to diverse new markets. Save time and money on every overhead. We support innovation without the risk. We've levelled the playing field. .cta.cta-producers.pane .row .small-12.medium-6.medium-offset-3.columns.text-center @@ -16,15 +18,15 @@ .row .small-12.medium-10.medium-offset-1.columns.text-center %h2 Pricing - %p.text-big + %p.text-big / If there is a time-sensitive offer you can write it here, e.g. Sign up before 30th June for an extra month free! %br %table.signup-table.producers-table{cellpadding: "0", cellspacing: "0"} %thead %tr - %td - %h5 + %td + %h5 %td.text-center{width: "20%"} %h5 Profile %td.text-center{width: "24%"} @@ -32,20 +34,20 @@ %tr %td %p - %strong Profile + %strong Profile %br %span.text-small Get a profile on the Open Food Network - including a listing on the Producers page and a pin on the OFN Map. These help people to find and connect with you. - %td.text-center + %td.text-center %i.ofn-i_003-check.text-big %td.text-center %i.ofn-i_003-check.text-big %tr %td %p - %strong Producer + %strong Producer %br - %span.text-small Add and manage your products on OFN, enabling you to act as a supplier to other OFN shopfronts. - %td.text-center + %span.text-small Add and manage your products on OFN, enabling you to act as a supplier to other OFN shopfronts. + %td.text-center %i.ofn-i_003-check.text-big %td.text-center %i.ofn-i_003-check.text-big @@ -53,14 +55,14 @@ %td %p %strong Producer shop - %p.text-small Get a shopfront on OFN to sell your produce direct! + %p.text-small Get a shopfront on OFN to sell your produce direct! %p.text-small Basic support included: %ul.small - %li User manual + %li User manual %li Post queries to discussion forum/via contact form %li Report bugs/suggestions via bugherd %li Regular release notes – what's new - %td.text-center + %td.text-center %td.text-center %i.ofn-i_003-check.text-big %tfoot @@ -69,18 +71,18 @@ %td.text-center{valign: "top"} %h2 Free %td.text-center{valign: "top"} - %h2 + %h2 .text-small - first + first %br month - Free - %p.text-small + Free + %p.text-small Then, 2% of total transactions %br - %em - Capped at - %strong $50 + %em + Capped at + %strong $50 per month %br %em (Special offer for 2015) @@ -96,7 +98,7 @@ %img.case-study-img{src: "/assets/case-studies/bfc_logo_square.png", width: "100", height: "100", title: "Bondi Food Collective"} %h4 Case study title goes here %p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. - %a{href: "http://www.google.com", target: "_blank"} + %a{href: "http://www.google.com", target: "_blank"} %strong Read more %i.ofn-i_054-point-right .small-12.medium-6.columns @@ -104,16 +106,16 @@ %img.case-study-img{src: "/assets/case-studies/bfc_logo_square.png", width: "100", height: "100", title: "Bondi Food Collective"} %h4 Case study %p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. - %a{href: "http://www.google.com", target: "_blank"} + %a{href: "http://www.google.com", target: "_blank"} %strong Read more %i.ofn-i_054-point-right - .row + .row .small-12.medium-6.columns .case-study %img.case-study-img{src: "/assets/case-studies/bfc_logo_square.png", width: "100", height: "100", title: "Bondi Food Collective"} %h4 Another case study - %p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. - %a{href: "http://www.google.com", target: "_blank"} + %p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. + %a{href: "http://www.google.com", target: "_blank"} %strong Read more %i.ofn-i_054-point-right .small-12.medium-6.columns @@ -121,7 +123,7 @@ %img.case-study-img{src: "/assets/case-studies/bfc_logo_square.png", width: "100", height: "100", title: "Bondi Food Collective"} %h4 A long name for case study %p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. - %a{href: "http://www.google.com", target: "_blank"} + %a{href: "http://www.google.com", target: "_blank"} %strong Read more %i.ofn-i_054-point-right @@ -147,22 +149,22 @@ .row .small-12.medium-6.columns %h4 A sub-heading goes here - %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in odio vel ex efficitur auctor. Nam rhoncus, tortor vel varius varius, magna lorem dignissim libero, at dignissim erat leo id tortor. Donec gravida quis augue sed pellentesque. Morbi laoreet efficitur mi, id tempus diam lacinia eu. + %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in odio vel ex efficitur auctor. Nam rhoncus, tortor vel varius varius, magna lorem dignissim libero, at dignissim erat leo id tortor. Donec gravida quis augue sed pellentesque. Morbi laoreet efficitur mi, id tempus diam lacinia eu. %h5 Smaller sub-heading goes here - %p.text-small Vestibulum eu quam neque. Aenean porta velit sit amet metus mattis, ut pulvinar dui semper. Nunc ornare scelerisque varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a magna nec augue suscipit fermentum at ac urna. + %p.text-small Vestibulum eu quam neque. Aenean porta velit sit amet metus mattis, ut pulvinar dui semper. Nunc ornare scelerisque varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a magna nec augue suscipit fermentum at ac urna. %ul.text-small %li A bullet point - %li Another point + %li Another point %li A third point goes here %p.text-small Quisque urna lacus, tristique sed rutrum a, volutpat eu diam. Nam placerat mi nec enim tincidunt, nec dapibus risus molestie. Praesent mattis eu dolor nec sollicitudin. Cras ut magna sem. Etiam vitae commodo augue, sit amet feugiat diam. .small-12.medium-6.columns %h4 A sub-heading goes here - %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in odio vel ex efficitur auctor. Nam rhoncus, tortor vel varius varius, magna lorem dignissim libero, at dignissim erat leo id tortor. Donec gravida quis augue sed pellentesque. Morbi laoreet efficitur mi, id tempus diam lacinia eu. + %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in odio vel ex efficitur auctor. Nam rhoncus, tortor vel varius varius, magna lorem dignissim libero, at dignissim erat leo id tortor. Donec gravida quis augue sed pellentesque. Morbi laoreet efficitur mi, id tempus diam lacinia eu. %h5 Smaller sub-heading goes here - %p.text-small Vestibulum eu quam neque. Aenean porta velit sit amet metus mattis, ut pulvinar dui semper. Nunc ornare scelerisque varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a magna nec augue suscipit fermentum at ac urna. + %p.text-small Vestibulum eu quam neque. Aenean porta velit sit amet metus mattis, ut pulvinar dui semper. Nunc ornare scelerisque varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a magna nec augue suscipit fermentum at ac urna. %ul.text-small %li A bullet point - %li Another point + %li Another point %li A third point goes here %p.text-small Quisque urna lacus, tristique sed rutrum a, volutpat eu diam. Nam placerat mi nec enim tincidunt, nec dapibus risus molestie. Praesent mattis eu dolor nec sollicitudin. Cras ut magna sem. Etiam vitae commodo augue, sit amet feugiat diam. diff --git a/app/views/shops/index.html.haml b/app/views/shops/index.html.haml index 5317cb7da2..e0fe3c83bb 100644 --- a/app/views/shops/index.html.haml +++ b/app/views/shops/index.html.haml @@ -3,7 +3,6 @@ .row .small-12.medium-6.medium-offset-3.columns.text-center %h2 Shopping, transformed. - %br %p.text-big Food grows in cycles, farmers harvest in cycles, and we order food in cycles. If you find an order cycle closed, check back soon. = render partial: "home/hubs" diff --git a/app/views/shops/signup.html.haml b/app/views/shops/signup.html.haml index 072f9da730..b9a3ac96a8 100644 --- a/app/views/shops/signup.html.haml +++ b/app/views/shops/signup.html.haml @@ -3,8 +3,11 @@ .row .small-12.medium-6.medium-offset-3.columns.text-center %h2 Food hubs, unlimited. - %p.text-big Whatever your model, we support you. However you change, we're with you. We're non-profit, independent, and open-sourced. We're the software partners you've dreamed of. - .cta.cta-hubs.pane + %p.text-big Whatever your model, we support you. However you change, we're with you. We're non-profit, independent, and open-sourced. We're the software partners you've dreamed of. + %br + %a.button.transparent{href: "/register"} + Join now + .cta.cta-hubs.pane{style: "display: none"} .row .small-12.medium-6.medium-offset-3.columns.text-center %h4 Ready to join OFN Australia? @@ -15,16 +18,16 @@ .pane .row .small-12.medium-10.medium-offset-1.columns.text-center - %h2 Pricing - %p.text-big + %h2 Membership types and fees. + %p.text-big / If there is a time-sensitive offer you can write it here, e.g. Sign up before 30th June for an extra month free! %br %table.signup-table.hubs-table{cellpadding: "0", cellspacing: "0"} %thead %tr - %td - %h5 + %td + %h5 %td.text-center{width: "20%"} %h5 Profile %td.text-center{width: "24%"} @@ -32,20 +35,20 @@ %tr %td %p - %strong Profile + %strong Profile %br %span.text-small Get a profile on the Open Food Network - including a listing on the Shops page and a pin on the OFN Map. These help people to find and connect with you. - %td.text-center + %td.text-center %i.ofn-i_003-check.text-big %td.text-center %i.ofn-i_003-check.text-big %tr %td %p - %strong Distribute + %strong Distribute %br - %span.text-small Act as a distributor or food middle-man on OFN, enabling you to work with logistics of bringing existing products and producers to other OFN shopfronts. - %td.text-center + %span.text-small Act as a distributor or food middle-man on OFN, enabling you to work with logistics of bringing existing products and producers to other OFN shopfronts. + %td.text-center %i.ofn-i_003-check.text-big %td.text-center %i.ofn-i_003-check.text-big @@ -56,32 +59,32 @@ %p.text-small Get a shopfront on OFN to sell food from multiple suppliers & producers. %p.text-small Basic support included: %ul.small - %li User manual + %li User manual %li Post queries to discussion forum/via contact form %li Report bugs/suggestions via bugherd %li Regular release notes – what's new - %td.text-center + %td.text-center %td.text-center %i.ofn-i_003-check.text-big %tfoot %tr %td %td.text-center{valign: "top"} - %h2 + %h2 Free %td.text-center{valign: "top"} - %h2 - .text-small - First + %h2 + .text-small + First %br month Free - %p.text-small + %p.text-small Then, 2% of transactions %br - %em - Capped at - %strong $50 + %em + Capped at + %strong $50 per month %br %em (Special offer for 2015) @@ -89,82 +92,73 @@ #shops-case-studies .row .small-12.medium-10.medium-offset-1.columns - %h2.text-center Case studies + %h2.text-center Stories from our hubs. %br .row .small-12.medium-6.columns .case-study %img.case-study-img{src: "/assets/case-studies/bfc_logo_square.png", width: "100", height: "100", title: "Bondi Food Collective"} %h4 Bondi Food Collective - %p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. - %a{href: "http://www.google.com", target: "_blank"} - %strong Read more - %i.ofn-i_054-point-right + %p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. + %a{href: "http://www.google.com", target: "_blank"} + %strong More .small-12.medium-6.columns .case-study %img.case-study-img{src: "/assets/case-studies/bonnie-beef-growers.png", width: "100", height: "100", title: "Bonnie Beef Growers"} %h4 Bonnie Beef Growers %p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. - %a{href: "http://www.google.com", target: "_blank"} - %strong Read more - %i.ofn-i_054-point-right - .row + %a{href: "http://www.google.com", target: "_blank"} + %strong More + .row .small-12.medium-6.columns .case-study %img.case-study-img{src: "/assets/case-studies/South_East_Food_Hub.png", width: "100", height: "100", title: "South East Food Hub"} %h4 South East Food Hub %p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. - %a{href: "http://www.google.com", target: "_blank"} - %strong Read more - %i.ofn-i_054-point-right + %a{href: "http://www.google.com", target: "_blank"} + %strong More .small-12.medium-6.columns - + .case-study %img.case-study-img{src: "/assets/case-studies/baw-baw.png", width: "100", height: "100", title: "Baw Baw Organics"} %h4 Baw Baw Organics %p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. %a{href: "http://www.google.com", target: "_blank"} - %strong Read more - %i.ofn-i_054-point-right + %strong More - .pane + .pane#cta .row .small-12.medium-6.medium-offset-3.columns.text-center - %h2 Join now! - %p.text-big Start with a free profile, and expand when you're ready! Lorem ipsum sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin. + %h2 We're ready to help. + %p.text-big You need a better return. You need new buyers and logistics partners. You need your story told across wholesale, retail, and the kitchen table. %br - %hr - %br - %h4 Create your profile on OFN Australia: - %br - %a.neutral-btn.dark{href: "/register"} + %a.button.transparent{href: "/register"} Join now - %i.ofn-i_054-point-right #hub-details.pane.footer-pad .row .small-12.medium-10.medium-offset-1.columns - %h2.text-center Hubs - the nitty gritty + %h2.text-center Here's the detail. .row .small-12.medium-6.columns %h4 A sub-heading goes here - %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in odio vel ex efficitur auctor. Nam rhoncus, tortor vel varius varius, magna lorem dignissim libero, at dignissim erat leo id tortor. Donec gravida quis augue sed pellentesque. Morbi laoreet efficitur mi, id tempus diam lacinia eu. + %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in odio vel ex efficitur auctor. Nam rhoncus, tortor vel varius varius, magna lorem dignissim libero, at dignissim erat leo id tortor. Donec gravida quis augue sed pellentesque. Morbi laoreet efficitur mi, id tempus diam lacinia eu. %h5 Smaller sub-heading goes here - %p.text-small Vestibulum eu quam neque. Aenean porta velit sit amet metus mattis, ut pulvinar dui semper. Nunc ornare scelerisque varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a magna nec augue suscipit fermentum at ac urna. + %p.text-small Vestibulum eu quam neque. Aenean porta velit sit amet metus mattis, ut pulvinar dui semper. Nunc ornare scelerisque varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a magna nec augue suscipit fermentum at ac urna. %ul.text-small %li A bullet point - %li Another point + %li Another point %li A third point goes here %p.text-small Quisque urna lacus, tristique sed rutrum a, volutpat eu diam. Nam placerat mi nec enim tincidunt, nec dapibus risus molestie. Praesent mattis eu dolor nec sollicitudin. Cras ut magna sem. Etiam vitae commodo augue, sit amet feugiat diam. .small-12.medium-6.columns %h4 A sub-heading goes here - %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in odio vel ex efficitur auctor. Nam rhoncus, tortor vel varius varius, magna lorem dignissim libero, at dignissim erat leo id tortor. Donec gravida quis augue sed pellentesque. Morbi laoreet efficitur mi, id tempus diam lacinia eu. + %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in odio vel ex efficitur auctor. Nam rhoncus, tortor vel varius varius, magna lorem dignissim libero, at dignissim erat leo id tortor. Donec gravida quis augue sed pellentesque. Morbi laoreet efficitur mi, id tempus diam lacinia eu. %h5 Smaller sub-heading goes here - %p.text-small Vestibulum eu quam neque. Aenean porta velit sit amet metus mattis, ut pulvinar dui semper. Nunc ornare scelerisque varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a magna nec augue suscipit fermentum at ac urna. + %p.text-small Vestibulum eu quam neque. Aenean porta velit sit amet metus mattis, ut pulvinar dui semper. Nunc ornare scelerisque varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a magna nec augue suscipit fermentum at ac urna. %ul.text-small %li A bullet point - %li Another point + %li Another point %li A third point goes here %p.text-small Quisque urna lacus, tristique sed rutrum a, volutpat eu diam. Nam placerat mi nec enim tincidunt, nec dapibus risus molestie. Praesent mattis eu dolor nec sollicitudin. Cras ut magna sem. Etiam vitae commodo augue, sit amet feugiat diam.