raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-13 23:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP styling and content for homepage

Browse Source 
> footer
> alert @ top
> call to action buttons
This commit is contained in:
summerscope
2015-05-01 18:19:51 +10:00
parent d9fd0b284d
commit 53e2bc823d
12 changed files with 242 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/logo-global-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

82
app/assets/stylesheets/darkswarm/footer.sass
View File

@@ -1,15 +1,81 @@
@import branding
@import mixins
@import animations
footer
background: $dark-grey
border-top: 1px dotted white
@include panepadding
.row
&, & *
p a
font-size: 0.875rem
a, a *
@include csstrans
color: white
a, a *
color: $clr-brick-light-bright
&:hover, &:active, &:focus
color: $clr-brick-bright
@include textsoftpress
color: rgba(white, 1)
text-decoration: underline
.ofn-global
background-color: $ofn-grey
border-top: 2px solid white
padding-top: 60px
padding-bottom: 40px
.logo
width: 200px
height: 100px
background: $ofn-grey
-moz-border-radius: 120px / 60px
-webkit-border-radius: 120px / 60px
border-radius: 120px / 60px
margin: -105px auto 0 auto
img
margin-top: 25px
.alert-box
background-color: transparent
border: none
padding: 0
a.big-alert
@include csstrans
width: 100%
border: 1px solid rgba($dark-grey, 0.35)
background-image: url("/assets/tile-wide.png")
background-position: center center
padding: 12px 0 8px 0
display: block
&, & *
@include csstrans
color: #333
&:hover, &:active, &:focus
text-decoration: none
border-color: white
&, & *
color: rgba(white, 1)
.row
&, p, h1, h2, h3, h4, h5, h6
color: $disabled-bright
.ofn-local
background: lighten($dark-grey, 3%)
@include panepadding
.row
&, p, h1, h2, h3, h4, h5, h6
color: $disabled-med
p.secure-icon i
font-size: 10rem
color: rgba(white, 0.1)
p.secure-text
color: rgba($disabled-med, 0.35)
.social-icons
margin-bottom: 0.25rem
margin-top: 0.75rem
a
i
font-size: 1.5rem
color: white
&:hover, &:active, &:focus
text-decoration: none
i
color: lighten($dark-grey, 60%)
text-shadow: 2px 2px 0 black

20
app/assets/stylesheets/darkswarm/home.css.sass
View File

@@ -0,0 +1,20 @@
@import branding
@import mixins
@import animations
.home-alert
.alert-box
border: 1px solid rgba($dark-grey, 0.35)
background-color: $ofn-grey
background-image: url("/assets/tile-wide.png")
background-position: center center
padding: 12px 0 8px 0
margin: 0
a.alert-cta
&, & *
@include csstrans
color: #333
&:hover, &:active, &:focus
&, & *
text-decoration: none
color: white

2
app/assets/stylesheets/darkswarm/home_panes.css.sass
View File

@@ -11,7 +11,7 @@
@include sidepaddingBg
#brand-story.pane, #system.pane, #stats.pane
background-color: lighten($ofn-grey, 45%)
background-color: lighten($ofn-grey, 44%)
#cta.pane
background-image: url("/assets/tile-wide.png")

3
app/assets/stylesheets/darkswarm/typography.css.sass
View File

@@ -62,7 +62,8 @@ small, .small
.brick
color: $clr-brick
.hr-light
border-color: rgba(#ddd, 0.25)
h1, h2, h3, h4, h5, h6
@include headingFont

5
app/views/home/_brandstory.html.haml
View File

@@ -3,7 +3,7 @@
.small-12.columns.text-center
%p Sometimes the best way to fix the system is to start a new one…
.hide-show
.hide-show{"ng-show" => "brandstory_expanded"}
%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.
@@ -12,7 +12,8 @@
%strong We call it Open Food Network.
%p We all love food. Now we can love our food system too.
%a.button.small.neutral-btn.dark{href: "/"}
%a.button.small.neutral-btn.dark{"ng-click" => "toggle_brandstory()"}
// TODO: needs to toogle to show/hide brandstory
Read more
%i.ofn-i_052-point-down

4
app/views/home/_cta1.html.haml
View File

@@ -4,5 +4,5 @@
%h3 Ready to change the world?
%br
%a.button.primary{href: "/shops"}
%i.ofn-i_029-shopping-basket
Shop now
Shop now
%i.ofn-i_054-point-right

4
app/views/home/_cta2.html.haml
View File

@@ -4,5 +4,5 @@
%h3 It's fun and super easy
%br
%a.button.primary{href: "/shops"}
%i.ofn-i_029-shopping-basket
Shop now
Shop now
%i.ofn-i_054-point-right

2
app/views/home/_stats.html.haml
View File

@@ -14,7 +14,7 @@
%hr
%h5
%strong 345
farmers & producers
producers
%hr
%h5
%strong 6,305

1
app/views/layouts/darkswarm.html.haml
View File

@@ -34,6 +34,7 @@
.off-canvas-wrap{offcanvas: true}
.inner-wrap
= render partial: "shared/menu/alert"
= render partial: "shared/menu/menu"
%section{ role: "main" }

184
app/views/shared/_footer.html.haml
View File

@@ -1,62 +1,134 @@
%footer
.row
.ofn-global
.row
.small-12.columns.text-center
.logo
%img{src: "/assets/logo-global-white.png", width: "120px"}
.row
.small-12.medium-8.medium-offset-2.columns.text-center
.alert-box
%a.big-alert{href: "http://www.openfoodnetwork.org", target: "_blank"}
%h6
Interested in joining the Open Food Network?  
%strong Start here
%i.ofn-i_054-point-right
.row
.small-12.medium-4.medium-offset-2.columns.text-center
%h6 OFN Global
%p
%a{href: "http://www.openfoodnetwork.org", target: "_blank"} Home
%span |
%a{href: "http://www.openfoodnetwork.org/news/", target: "_blank"} News
%span |
%a{href: "http://www.openfoodnetwork.org/about/", target: "_blank"} About
%span |
%a{href: "http://www.openfoodnetwork.org/contact/", target: "_blank"} Contact
.row.landing-page-row
.small-12.medium-4.columns.text-left
%h4 Email us
%p
%a{href: "hello@openfoodnetwork.org".reverse, target: '_blank', mailto: true}
%span.email
= "hello@openfoodnetwork.org".reverse
%h4 Follow us
%p
%a{title:'Follow us on Facebook', href: 'https://www.facebook.com/OpenFoodNet', target: '_blank'}
%i.ofn-i_044-facebook
Facebook   
%a{title:'Follow us on Twitter', href: 'https://twitter.com/OpenFoodNet', target: '_blank'}
%i.ofn-i_041-twitter
Twitter   
%a{title:'Join our group on LinkedIn', href: 'http://www.linkedin.com/groups/Open-Food-Foundation-4743336', target: '_blank'}
%i.ofn-i_042-linkedin
LinkedIn
.small-12.medium-3.columns.text-left
%h4 Getting around
%ul.bullet-list
%li
%a{href: "/shop"} Shop
%li
.small-12.medium-4.columns.text-center
%h6 OFN Sites
%p
%a{href: "http://dev.openfoodnetwork.org", target: "_blank"} Developer
%span |
%a{href: "http://community.openfoodnetwork.org", target: "_blank"} Community
%span |
%a{href: "http://www.openfoodnetwork.org/platform/user-guide/", target: "_blank"} User Guide
.medium-2.columns.text-center
/ Placeholder
.ofn-local
.row
.small-12.medium-8.medium-offset-2.columns.text-center
%p.secure-icon
%i.ofn-i_017-locked
%p.text-big.secure-text Secure and trusted.
%p.secure-text Open Food Network uses ... (description of SSL and security measures goes here). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet, sem nec pulvinar sodales, dolor elit condimentum est.
%hr.hr-light
%br
.row
.small-6.medium-3.medium-offset-2.columns.text-left
%h4 Keep in touch
%p.social-icons
%a{href: "/"}
%i.ofn-i_044-facebook
%a{href: "/"}
%i.ofn-i_041-twitter
%a{href: "/"}
%i.ofn-i_043-instagram
%a{href: "/"}
%i.ofn-i_042-linkedin
%a{href: "/"}
%i.ofn-i_046-g
%a{href: "/"}
%i.ofn-i_045-pintrest
%p
%a{href: "hello@openfoodnetwork.org".reverse, target: '_blank', mailto: true} Email us
%p
%a{href: "/"} Newsletter sign-up
%p
%a{href: "/"} Blog
%p
%a{href: "/"} Calendar
.small-6.medium-3.columns.text-left
%h4 Navigate
%p
%a{href: "/shops"} Shops
%p
%a{href: "/map"} Map
%li
%p
%a{href: "/producers"} Producers
%li
%p
%a{href: "/groups"} Groups
.small-12.medium-2.columns.text-left
%h4 Producers
%p
= t :producers_join
%p
%a{href: "/register"} Register now
.small-12.medium-3.columns.text-left
%h4 About us
%p OFN is a network of independent online food stores that connect farmers and food hubs with individuals and local businesses. It gives farmers and food hubs an easier and fairer way to distribute their food.
.row.landing-page-row
.small-12.columns.text-center.pad-top
%hr
%h5.pad-top
%a{title: 'Open Food Network', href:'http://www.openfoodnetwork.org', target: '_blank' } openfoodnetwork.org
%br
© Copyright
= Date.today.year
Open Food Foundation
%p
%small
%a{href:"https://creativecommons.org/licenses/by-sa/3.0/", target: "_blank" } Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
%p
%small
%a{href:"/Terms-of-service.pdf", target: "_blank" } Site terms & conditions
|
%a{href:"https://github.com/openfoodfoundation/openfoodnetwork", target: "_blank" } Open Source & developer info on GitHub
%p
%a{href: "/about"} About
.small-12.medium-2.columns.text-left
%h4 Join us
%p
%a{href: "/producers/signup"} Producers sign-up
%p
%a{href: "/shops/signup"} Hubs sign-up
.medium-2.columns.text-center
/ Placeholder
.row
.small-12.medium-8.medium-offset-2.columns.text-center
%hr.hr-light
%br
.row
.small-12.medium-3.medium-offset-2.columns.text-left
%a{href: root_path}
%img{src: "/assets/logo-color.png", srcset: "/assets/logo-color.svg", width: "220px"}
.small-12.medium-5.columns.text-left
%p.text-small
Read our
%a{href: "/Terms-of-service.pdf"} Terms & conditions
|
Find us on
%a{href:"https://github.com/openfoodfoundation/openfoodnetwork", target: "_blank"} Github
%p.text-small
Open Food Network is a free and opensource software platform. Read about how the licence works at
%a{href:"https://creativecommons.org/licenses/by-sa/3.0/", target: "_blank" } Creative Commons
/ Creative Commons Attribution-ShareAlike 3
.medium-2.columns.text-center
/ Placeholder
/ .row
/ .small-12.columns.text-center.pad-top
/ © Copyright
/ = Date.today.year
/ Open Food Foundation
// To be added when Guy's pretty landing page is up:
//|
//%a{href:'' } Developers

8
app/views/shared/menu/_alert.html.haml Normal file
View File

@@ -0,0 +1,8 @@
.text-center.home-alert
.alert-box
%a.alert-cta{href: "http://www.openfoodnetwork.org", target: "_blank"}
%h6
Interested in joining the Open Food Network?  
%strong Start here
%i.ofn-i_054-point-right
%a.close{href: "#{}"} ×