diff --git a/app/assets/images/home/background-blurred-oranges.jpg b/app/assets/images/home/background-blurred-oranges.jpg new file mode 100644 index 0000000000..61019198e3 Binary files /dev/null and b/app/assets/images/home/background-blurred-oranges.jpg differ diff --git a/app/assets/stylesheets/darkswarm/home_panes.css.sass b/app/assets/stylesheets/darkswarm/home_panes.css.sass index 463946a0e4..468284be33 100644 --- a/app/assets/stylesheets/darkswarm/home_panes.css.sass +++ b/app/assets/stylesheets/darkswarm/home_panes.css.sass @@ -14,16 +14,22 @@ padding-bottom: 75px // Background styles -#system.pane, #stats.pane +#system.pane background-color: white #brand-story.pane, #cta.pane, #shops.pane, #producer-signup.pane, #shops-signup.pane background-image: url("/assets/tile-wide.png") background-color: $australia-orange background-position: center center - .row - h1, h2, h3, h4, h5, h6, p, a - color: white + @include paneWhite + +#stats.pane + // TODO: Fix white line at bottom + background-image: url("/assets/home/background-blurred-oranges.jpg") + background-position: center center + background-color: $ofn-grey + @include fullbg + @include paneWhite // Content styles #brand-story.pane @@ -94,19 +100,26 @@ padding: 1rem 0 margin: 1.5rem 0 -#cta.pane +#cta.pane, #stats.pane h2 font-weight: 300 font-size: 45px #stats.pane + .row.header + padding-bottom: 0 + .row.content + padding-top: 0 + h4 font-weight: 300 text-transform: uppercase margin: 1.5rem 0 display: inline-block strong - color: $clr-brick + display: block + font-weight: normal + font-size: 75px #shops.pane background-color: lighten($clr-brick, 26%) diff --git a/app/assets/stylesheets/darkswarm/mixins.sass b/app/assets/stylesheets/darkswarm/mixins.sass index 103ce65384..c7246442f5 100644 --- a/app/assets/stylesheets/darkswarm/mixins.sass +++ b/app/assets/stylesheets/darkswarm/mixins.sass @@ -9,6 +9,11 @@ padding-top: 100px padding-bottom: 100px +@mixin paneWhite + .row + h1, h2, h3, h4, h5, h6, p, a + color: white + @mixin sidepaddingSm padding-left: 10px padding-right: 10px diff --git a/app/views/home/_stats.html.haml b/app/views/home/_stats.html.haml index ce49fcabfd..5264f83ee5 100644 --- a/app/views/home/_stats.html.haml +++ b/app/views/home/_stats.html.haml @@ -1,27 +1,22 @@ #stats.pane - .row + .row.header .small-12.medium-8.medium-offset-2.columns.text-center - %h3 What's happening on OFN Australia? - %p.text-big= ContentConfig.home_whats_happening - %br - %br - -# .stat1 - -# %h4 - -# %strong 44444 - -# states represented - .stat2 - %h4 - %strong= number_with_delimiter @num_hubs - food shops - .stat3 - %h4 - %strong= number_with_delimiter @num_producers - food producers - .stat4 - %h4 - %strong= number_with_delimiter @num_users - happy food shoppers - .stat5 - %h4 - %strong= number_with_delimiter @num_orders - orders made + %h2 We're creating a new food system. + + .row.content + .small-12.medium-3.columns.text-center + %h4 + %strong= number_with_delimiter @num_producers + food producers + .small-12.medium-3.columns.text-center + %h4 + %strong= number_with_delimiter @num_hubs + food shops + .small-12.medium-3.columns.text-center + %h4 + %strong= number_with_delimiter @num_users + food shoppers + .small-12.medium-3.columns.text-center + %h4 + %strong= number_with_delimiter @num_orders + food orders