mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-24 20:36:49 +00:00
WIP on redesign / layout job
> adding in new design assets > copy and layout for homepage partials > more global styling updates
This commit is contained in:
summerscope
BIN
app/assets/images/infographic-placeholder.jpg
Normal file
BIN
app/assets/images/infographic-placeholder.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 784 KiB |
BIN
app/assets/images/tile-wide.png
Normal file
BIN
app/assets/images/tile-wide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
@@ -4,7 +4,7 @@ $ofn-brand: #f27052
|
||||
$ofn-grey: #808184
|
||||
|
||||
|
||||
//
|
||||
// old colors:
|
||||
|
||||
$clr-brick: #c1122b
|
||||
$clr-brick-light: #f5e6e7
|
||||
|
||||
@@ -1,57 +1,29 @@
|
||||
@import branding
|
||||
@import mixins
|
||||
@import typography
|
||||
|
||||
// Styling for big panes on homepage
|
||||
|
||||
#beta.pane
|
||||
#panes
|
||||
.pane
|
||||
.row
|
||||
@include panepadding
|
||||
@include sidepaddingBg
|
||||
|
||||
#brand-story.pane, #system.pane, #stats.pane
|
||||
background-color: lighten($ofn-grey, 45%)
|
||||
background-image: url("/assets/tile-wide.png")
|
||||
|
||||
#brand-story.pane
|
||||
.row
|
||||
@include panepadding
|
||||
background-image: url("/assets/home/macbook.png")
|
||||
background-repeat: no-repeat
|
||||
background-position: center bottom
|
||||
padding-bottom: 280px
|
||||
&, & *
|
||||
max-width: 610px
|
||||
p
|
||||
@include bodyFont
|
||||
font-size: 1.5rem
|
||||
font-weight: 300
|
||||
|
||||
|
||||
#map.pane
|
||||
@include darkbg
|
||||
.row
|
||||
@include panepadding
|
||||
background-image: url("/assets/home/maps-bg.svg")
|
||||
background-repeat: no-repeat
|
||||
background-position: left center
|
||||
|
||||
#groups.pane
|
||||
@include darkbg
|
||||
.row
|
||||
@include panepadding
|
||||
background-image: url("/assets/home/groups-bg.svg")
|
||||
background-repeat: no-repeat
|
||||
background-position: left center
|
||||
|
||||
#producers.pane
|
||||
@include turqbg
|
||||
@include panepadding
|
||||
background-image: url("/assets/home/producers-bg.svg")
|
||||
background-repeat: no-repeat
|
||||
background-position: center center
|
||||
background-size: 80% 80%
|
||||
|
||||
@media all and (max-width: 768px)
|
||||
background-position: center top
|
||||
background-size: 100% 100%
|
||||
.row
|
||||
.pricing-table
|
||||
.title
|
||||
color: $clr-turquoise-light
|
||||
.price
|
||||
background-color: rgba(240, 240, 240, 0.6)
|
||||
.description, .bullet-item, .cta-button
|
||||
background-color: rgba(255, 255, 255, 0.8)
|
||||
|
||||
// Responsive
|
||||
@media all and (max-width: 768px)
|
||||
#map.pane, #groups.pane, #producers.pane
|
||||
.row
|
||||
background-position: center center
|
||||
@@ -4,3 +4,4 @@
|
||||
#hubs
|
||||
background-color: lighten($ofn-grey, 43%)
|
||||
@include panepadding
|
||||
@include sidepaddingSm
|
||||
|
||||
@@ -8,6 +8,32 @@
|
||||
@mixin panepadding
|
||||
padding-top: 100px
|
||||
padding-bottom: 100px
|
||||
|
||||
@mixin sidepaddingSm
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
@media all and (min-width: 768px)
|
||||
padding-left: 20px
|
||||
padding-right: 20px
|
||||
@media all and (min-width: 1024px)
|
||||
padding-left: 50px
|
||||
padding-right: 50px
|
||||
@media all and (min-width: 1200px)
|
||||
padding-left: 100px
|
||||
padding-right: 100px
|
||||
|
||||
@mixin sidepaddingBg
|
||||
padding-left: 20px
|
||||
padding-right: 20px
|
||||
@media all and (min-width: 768px)
|
||||
padding-left: 40px
|
||||
padding-right: 40px
|
||||
@media all and (min-width: 1024px)
|
||||
padding-left: 100px
|
||||
padding-right: 100px
|
||||
@media all and (min-width: 1200px)
|
||||
padding-left: 200px
|
||||
padding-right: 200px
|
||||
|
||||
@mixin disabled
|
||||
color: $disabled-bright
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
#brand-story.pane
|
||||
|
||||
.row
|
||||
.small-12.columns.text-center
|
||||
%p Sometimes in order to change a system...
|
||||
%hr
|
||||
%p Sometimes the best way to fix the system is to start a new one…
|
||||
%a.button.small.neutral-btn.dark{href: "/"}
|
||||
Read more
|
||||
%i.ofn-i_052-point-down
|
||||
|
||||
.hide-show
|
||||
%p We begin from the ground up. With farmers and growers ready to tell their stories proudly and truly. With distributors ready to connect people with products fairly and honestly. With buyers who believe that better weekly shopping decisions can seriously change the world.
|
||||
%p Then we need a way to make it real. A way to empower everyone who grows, sells and buys food. A way to tell all the stories, to handle all the logistics. A way to turn transaction into transformation every day.
|
||||
%p So we build an online marketplace that levels the playing field. It’s transparent, so it creates real relationships. It’s open source, so it‘s owned by everyone. It scales to regions and nations, so people start versions across the world.
|
||||
%p It works everywhere. It changes everything.
|
||||
%p
|
||||
%strong We call it Open Food Network.
|
||||
%p We all love food. Now we can love our food system too.
|
||||
@@ -1,8 +1,8 @@
|
||||
#cta.pane
|
||||
.row
|
||||
.small-12.columns.text-center
|
||||
%h2 Ready to change the world?
|
||||
%a.neutral-btn.turquoise{href: "/producers"}
|
||||
%i.ofn-i_036-producers
|
||||
Shop now
|
||||
%hr
|
||||
%h3 Ready to change the world?
|
||||
%br
|
||||
%a.button.primary{href: "/shops"}
|
||||
%i.ofn-i_029-shopping-basket
|
||||
Shop now
|
||||
@@ -1,8 +1,8 @@
|
||||
#cta.pane
|
||||
.row
|
||||
.small-12.columns.text-center
|
||||
%h2 It's fun and super easy
|
||||
%a.neutral-btn.turquoise{href: "/producers"}
|
||||
%i.ofn-i_036-producers
|
||||
Shop now
|
||||
%hr
|
||||
%h3 It's fun and super easy
|
||||
%br
|
||||
%a.button.primary{href: "/shops"}
|
||||
%i.ofn-i_029-shopping-basket
|
||||
Shop now
|
||||
30
app/views/home/_stats.html.haml
Normal file
30
app/views/home/_stats.html.haml
Normal file
@@ -0,0 +1,30 @@
|
||||
#stats.pane
|
||||
.row
|
||||
.small-12.columns.text-center
|
||||
%h3 Who's using it now?
|
||||
%p A bit more blurb about what's happening with Open Food Network Australia. Maybe also a bit of text about what you (end user) can do here, and how.
|
||||
%br
|
||||
%h5
|
||||
%strong 4
|
||||
Australian states represented
|
||||
%hr
|
||||
%h5
|
||||
%strong 126
|
||||
shops on OFN Australia
|
||||
%hr
|
||||
%h5
|
||||
%strong 345
|
||||
farmers & producers
|
||||
%hr
|
||||
%h5
|
||||
%strong 6,305
|
||||
food order cycles
|
||||
%hr
|
||||
%h5
|
||||
%strong 2,201
|
||||
happy OFN consumers
|
||||
%hr
|
||||
%h5
|
||||
who have placed a total of
|
||||
%strong 3,902
|
||||
orders to-date
|
||||
@@ -1,7 +1,5 @@
|
||||
#brand-story.pane
|
||||
|
||||
#system.pane
|
||||
.row
|
||||
.small-12.columns.text-center
|
||||
%h2 How does it work?
|
||||
%p sexy graphics go here
|
||||
%hr
|
||||
%img{src: "/assets/infographic-placeholder.jpg"}
|
||||
@@ -11,12 +11,11 @@
|
||||
|
||||
.ng-cloak
|
||||
|
||||
= render partial: "home/brandstory"
|
||||
|
||||
= render partial: "home/cta1"
|
||||
|
||||
= render partial: "home/system"
|
||||
|
||||
= render partial: "home/cta2"
|
||||
#panes
|
||||
= render partial: "home/brandstory"
|
||||
= render partial: "home/cta1"
|
||||
= render partial: "home/system"
|
||||
= render partial: "home/cta2"
|
||||
= render partial: "home/stats"
|
||||
|
||||
= render partial: "shared/footer"
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
= favicon_link_tag
|
||||
- else
|
||||
= favicon_link_tag "/favicon-staging.ico"
|
||||
%link{href: "http://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald", rel: "stylesheet", type: "text/css"}
|
||||
%link{href: "http://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700", rel: "stylesheet", type: "text/css"}
|
||||
|
||||
= yield :scripts
|
||||
%script{src: "//maps.googleapis.com/maps/api/js?libraries=places&sensor=false"}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
= favicon_link_tag
|
||||
- else
|
||||
= favicon_link_tag "/favicon-staging.ico"
|
||||
%link{href: "http://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald", rel: "stylesheet", type: "text/css"}
|
||||
%link{href: "http://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700", rel: "stylesheet", type: "text/css"}
|
||||
|
||||
= yield :scripts
|
||||
%script{src: "//maps.googleapis.com/maps/api/js?libraries=places&sensor=false"}
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
= render partial: "home/hubs"
|
||||
= render partial: "home/hubs"
|
||||
= render partial: "shared/footer"
|
||||
|
||||
Reference in New Issue
Block a user