From 0086066ea5a1018af2dc66ac26beb6d1ac87972c Mon Sep 17 00:00:00 2001
From: summerscope <summerscope@gmail.com>
Date: Sat, 2 May 2015 13:58:57 +1000
Subject: [PATCH] WIP on How does it work pane on homepage

---
 .../stylesheets/darkswarm/home_panes.css.sass | 36 +++++++++++++------
 app/views/home/_system.html.haml              |  6 ++--
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/darkswarm/home_panes.css.sass b/app/assets/stylesheets/darkswarm/home_panes.css.sass
index 13967a1f05..f771a6dcf1 100644
--- a/app/assets/stylesheets/darkswarm/home_panes.css.sass
+++ b/app/assets/stylesheets/darkswarm/home_panes.css.sass
@@ -15,6 +15,7 @@
 
 #cta.pane
   background-image: url("/assets/tile-wide.png")
+  background-position: center center
 
 #brand-story.pane
   .row
@@ -29,22 +30,35 @@
 
 #system.pane
   .home-icon-box
-    border: 2px solid lighten($ofn-grey, 24%)
-    background-color: white
-    width: 100%
-    padding: 2rem 0
+    background-image: url("/assets/ofn-o.png")
+    background-position: center center
+    background-repeat: no-repeat
+    background-size: auto 100%
+    padding: 3rem 0
     text-align: center
     margin-top: 2rem
     @media all and (min-width: 642px)
       margin-top: 0
-
     i
-      font-size: 5rem
+      font-size: 4rem
+      color: $clr-brick
       
-      @media all and (min-width: 1024px)
-        font-size: 7rem
-
   .home-icon-box-bottom
-    background-color: lighten($ofn-grey, 38%)
+    margin-top: 1rem
     width: 100%
-    padding: 1rem
+    padding-left: 1rem
+    padding-right: 1rem
+    @media all and (min-width: 480px)
+      padding-left: 3rem
+      padding-right: 3rem
+    @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%)
+      text-align: center
+      padding-bottom: 0.25rem 
+
+
+
diff --git a/app/views/home/_system.html.haml b/app/views/home/_system.html.haml
index 9f2c51f109..ff9d5a9864 100644
--- a/app/views/home/_system.html.haml
+++ b/app/views/home/_system.html.haml
@@ -8,16 +8,16 @@
             %i.ofn-i_020-search
           .home-icon-box-bottom
             %h5 1. Search
-            %p Blurb on how to find your shop. Vestibulum odio elit, scelerisque nec vehicula sit amet, ullamcorper nec eros. Phasellus auctor gravida ligula laoreet cursus. 
+            %p Blurb on how to find your shop. You can only shop at 1 place at a time (like on high street!) Vestibulum odio elit, scelerisque nec vehicula sit amet, eros. 
         .small-12.medium-4.columns.text-left
           .home-icon-box
             %i.ofn-i_027-shopping-cart
           .home-icon-box-bottom
             %h5 2. Shop
-            %p Blurb on shopping. Vestibulum odio elit, nec vehicula sit amet, vehicula nec eros. Phasellus auctor gravida ligula laoreet odio cursus. 
+            %p Blurb on shopping. Vestibulum odio elit, nec vehicula sit amet, vehicula nec eros. Phasellus auctor vehicula odio gravida ligula laoreet odio cursus. 
         .small-12.medium-4.columns.text-left
           .home-icon-box
             %i.ofn-i_039-delivery
           .home-icon-box-bottom
             %h5 3. Pick-up / Delivery
-            %p Blurb on getting your food. Vestibulum odio elit, scelerisque nec vehicula sit amet, ullamcorper vehicula nec eros. Phasellus auctor gravida ligula odio cursus.
\ No newline at end of file
+            %p Blurb on getting your food. Some places deliver, while others only have pick up options available. Vestibulum odio elit, scelerisque nec vehicula sit. 
\ No newline at end of file