Style home panes (all except stats)

This commit is contained in:
Rohan Mitchell
2015-05-12 10:21:52 +10:00
parent 5a63353004
commit b2f687cd11
3 changed files with 44 additions and 30 deletions

View File

@@ -13,39 +13,31 @@
padding-top: 75px
padding-bottom: 75px
// Background styles
#system.pane, #stats.pane
background-color: lighten($ofn-grey, 44%)
#brand-story.pane
background-color: white
#cta.pane, #shops.pane, #producer-signup.pane, #shops-signup.pane
#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
// Content styles
#brand-story.pane
background-image: url("/assets/tile-wide.png")
background-color: $australia-orange
.row
h2
color: white
font-weight: 300
font-size: 88px
p
@include bodyFont
font-size: 1.5rem
font-weight: 300
color: white
a
color: white
#stats.pane
h4
font-weight: 300
text-transform: uppercase
margin: 1.5rem 0
display: inline-block
strong
color: $clr-brick
a.text-vbig i
font-size: 75px
#system.pane
.home-icon-box
@@ -60,6 +52,13 @@
margin-top: 0
i
font-size: 4rem
h2
font-size: 70px
font-weight: 300
color: $australia-orange
a
color: $australia-orange
.home-icon-box-bottom
margin-top: 1rem
@@ -72,11 +71,26 @@
@media all and (min-width: 642px)
padding-left: 1rem
padding-right: 1rem
h5
color: darken($ofn-grey, 10%)
border-bottom: 2px solid lighten($ofn-grey, 34%)
h4
color: $australia-orange
border-bottom: 2px solid lighten($australia-orange, 20%)
text-align: center
padding-bottom: 0.25rem
padding: 1rem 0
margin: 1.5rem 0
#cta.pane
h2
font-weight: 300
font-size: 45px
#stats.pane
h4
font-weight: 300
text-transform: uppercase
margin: 1.5rem 0
display: inline-block
strong
color: $clr-brick
#shops.pane
background-color: lighten($clr-brick, 26%)

View File

@@ -1,7 +1,7 @@
#cta.pane
.row
.small-12.columns.text-center
%h3 Shopping that makes the world a better place.
%h2 Shopping that makes the world a better place.
%br
%a.button.transparent{href: "/shops"}
I'm Ready

View File

@@ -1,26 +1,26 @@
#system.pane
.row
.small-12.medium-12.large-8.large-offset-2.columns.text-center
%h2 Here's how it works:
%h2 Here's how it works.
.row
.small-12.medium-4.columns.text-left
.home-icon-box
%a{href: "/shops"}
%i.ofn-i_020-search
.home-icon-box-bottom
%h5 1. Search
%p.text-small Search our diverse, independent shops for seasonal local food. Search by neighbourhood and filter by food category, or whether you prefer delivery or pickup.
%h4 1. Search
%p.text-normal Search our diverse, independent shops for seasonal local food. Search by neighbourhood and filter by food category, or whether you prefer delivery or pickup.
.small-12.medium-4.columns.text-left
.home-icon-box
%a{href: "/shops"}
%i.ofn-i_027-shopping-cart
.home-icon-box-bottom
%h5 2. Shop
%p.text-small Transform your transactions with affordable local food from diverse producers, sellers and hubs. Know the stories behind your food and the people who make it!
%h4 2. Shop
%p.text-normal Transform your transactions with affordable local food from diverse producers, sellers and hubs. Know the stories behind your food and the people who make it!
.small-12.medium-4.columns.text-left
.home-icon-box
%a{href: "/shops"}
%i.ofn-i_039-delivery
.home-icon-box-bottom
%h5 3. Pick-up / Delivery
%p.text-small Hang on for your delivery, or head to your producer or hub for a more personal connection with your food. It's food shopping as diverse as nature intended it.
%h4 3. Pick-up / Delivery
%p.text-normal Hang on for your delivery, or head to your producer or hub for a more personal connection with your food. It's food shopping as diverse as nature intended it.