raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding in logos for case studies

Browse Source 
More styling on signup pages
This commit is contained in:
summerscope
2015-05-04 13:15:18 +10:00
parent 36838ed457
commit 3091b365ec
8 changed files with 201 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/case-studies/South_East_Food_Hub.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
app/assets/images/case-studies/baw-baw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
app/assets/images/case-studies/bfc_logo_square.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
app/assets/images/case-studies/bonnie-beef-growers.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

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

@@ -119,15 +119,23 @@
#producer-case-studies, #shops-case-studies
padding-top: 100px
padding-bottom: 100px
background-color: lighten($clr-turquoise, 64%)
background-color: lighten($clr-turquoise, 65%)
.case-study
background-color: lighten($clr-turquoise, 54%)
background-color: white
border: 1px solid rgba($clr-turquoise-bright, 0.5)
padding: 1rem
margin-top: 2rem
@media all and (min-width: 768px)
margin-top: 1rem
text-align: center
.case-study-img
background-color: white
margin-bottom: 1rem
@media all and (min-width: 768px)
float: right
margin-left: 2rem
@media all and (min-width: 640px)
text-align: left
a
color: $clr-turquoise
color: $clr-turquoise-bright
&, & *
@include csstrans
opacity: 1
@@ -135,10 +143,9 @@
&, & *
opacity: 0.75
#shops-case-studies
background-color: lighten($clr-brick, 54%)
background-color: lighten($clr-brick, 56%)
.case-study
background-color: lighten($clr-brick, 46%)
border: 1px solid rgba($clr-brick-bright, 0.5)
a
color: $clr-brick

101
app/assets/stylesheets/darkswarm/signup.css.sass Normal file
View File

@@ -0,0 +1,101 @@
@import branding
@import mixins
@import typography
@import animations
table.signup-table
width: 100%
border: 0
table.signup-table.hubs-table, table.signup-table.producers-table
tr:nth-child(odd)
td
background-color: lighten($ofn-grey, 46.5%)
tr:nth-child(even)
td
background-color: white
thead
background-color: transparent
td:nth-child(1)
background-color: transparent
td:nth-child(2)
background: lighten($ofn-grey, 44%)
border-left: 1px solid lighten($ofn-grey, 44%)
border-right: 1px solid lighten($ofn-grey, 44%)
border-top: 1px solid lighten($ofn-grey, 44%)
td:nth-child(3)
background: lighten($ofn-grey, 38%)
td:nth-child(4)
&, & *
color: white
background: $clr-brick
border-left: 1px solid $clr-brick
border-right: 1px solid $clr-brick
border-top: 1px solid $clr-brick
tr
td:nth-child(2)
border-left: 1px solid lighten($ofn-grey, 44%)
border-right: 1px solid lighten($ofn-grey, 44%)
td:nth-child(3)
border-left: 1px solid lighten($ofn-grey, 38%)
border-right: 1px solid lighten($ofn-grey, 38%)
td:nth-child(4)
&, & i
color: $clr-brick
border-left: 1px solid $clr-brick
border-right: 1px solid $clr-brick
tfoot
background-color: transparent
h2
.text-small
text-transform: uppercase
display: inline-block
font-weight: 400
line-height: 1.5
@include headingFont
td:nth-child(1)
background-color: transparent
td:nth-child(2)
background: lighten($ofn-grey, 44%)
border-left: 1px solid lighten($ofn-grey, 44%)
border-right: 1px solid lighten($ofn-grey, 44%)
border-bottom: 1px solid lighten($ofn-grey, 44%)
td:nth-child(3)
background: lighten($ofn-grey, 38%)
td:nth-child(4)
&, & *
color: white
background: $clr-brick
border-left: 1px solid $clr-brick
border-right: 1px solid $clr-brick
border-bottom: 1px solid $clr-brick
table.signup-table.producers-table
thead
td:nth-child(4)
background: $clr-turquoise-bright
border-left: 1px solid $clr-turquoise-bright
border-right: 1px solid $clr-turquoise-bright
border-top: 1px solid $clr-turquoise-bright
tr
td:nth-child(4)
&, & i
color: $clr-turquoise-bright
border-left: 1px solid $clr-turquoise-bright
border-right: 1px solid $clr-turquoise-bright
tfoot
td:nth-child(4)
background: $clr-turquoise-bright
border-left: 1px solid $clr-turquoise-bright
border-right: 1px solid $clr-turquoise-bright
border-bottom: 1px solid $clr-turquoise-bright

72
app/views/producers/signup.html.haml
View File

@@ -20,16 +20,16 @@
If there is a time-sensitive offer you can write it here
e.g. Sign up before 30th June for an extra month free!
%br
%table{style: "width:100%;"}
%table.signup-table.producers-table{cellpadding: "0", cellspacing: "0"}
%thead
%tr
%td
%h5
%td.text-center{width: "22%"}
%td.text-center{width: "16%"}
%h5 Profile
%td.text-center{width: "22%"}
%td.text-center{width: "16%"}
%h5 Producer
%td.text-center{width: "22%"}
%td.text-center{width: "24%"}
%h5 Producer Shop
%tr
%td
@@ -59,9 +59,9 @@
%td
%p
%strong Producer shop
%p.text-small You get a shopfront on OFN to sell your produce direct to consumers!
%p.text-small Includes basic support:
%ul.text-small
%p.text-small Get a shopfront on OFN to sell your produce direct!
%p.text-small Basic support included:
%ul.small
%li User manual
%li Post queries to discussion forum/via contact form
%li Report bugs/suggestions via bugherd
@@ -79,14 +79,20 @@
%h2 Free
%td.text-center{valign: "top"}
%h2
Free
%br
%span.text-small
%strong 1st month
.text-small
first
%br
month
Free
%p.text-small
Then, 2% of your transactions
Then, 2% of total transactions
%br
%em capped at $50 per month
%em
Capped at
%strong $50
per month
%br
%em (Special offer for 2015)
#producer-case-studies
.row
@@ -96,29 +102,37 @@
.row
.small-12.medium-6.columns
.case-study
%a{href: "http://www.google.com", target: "_blank"}
%h4 Case study title goes here
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. Nulla in ante non massa lacinia sed eget ipsum.
%a.text-right{href: "http://www.google.com", target: "_blank"} Read more
%img.case-study-img{src: "/assets/case-studies/bfc_logo_square.png", width: "100", height: "100", title: "Bondi Food Collective"}
%h4 Case study title goes here
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est.
%a{href: "http://www.google.com", target: "_blank"}
%strong Read more
%i.ofn-i_054-point-right
.small-12.medium-6.columns
.case-study
%a{href: "http://www.google.com", target: "_blank"}
%h4 Case study
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. Nulla in ante non massa lacinia sed eget ipsum.
%a.text-right{href: "http://www.google.com", target: "_blank"} Read more
%img.case-study-img{src: "/assets/case-studies/bfc_logo_square.png", width: "100", height: "100", title: "Bondi Food Collective"}
%h4 Case study
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est.
%a{href: "http://www.google.com", target: "_blank"}
%strong Read more
%i.ofn-i_054-point-right
.row
.small-12.medium-6.columns
.case-study
%a{href: "http://www.google.com", target: "_blank"}
%h4 Another case study
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. Nulla in ante non massa lacinia sed eget ipsum.
%a.text-right{href: "http://www.google.com", target: "_blank"} Read more
%img.case-study-img{src: "/assets/case-studies/bfc_logo_square.png", width: "100", height: "100", title: "Bondi Food Collective"}
%h4 Another case study
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est.
%a{href: "http://www.google.com", target: "_blank"}
%strong Read more
%i.ofn-i_054-point-right
.small-12.medium-6.columns
.case-study
%a{href: "http://www.google.com", target: "_blank"}
%h4 A really long name for a case study
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. Nulla in ante non massa lacinia sed eget ipsum.
%a.text-right{href: "http://www.google.com", target: "_blank"} Read more
%img.case-study-img{src: "/assets/case-studies/bfc_logo_square.png", width: "100", height: "100", title: "Bondi Food Collective"}
%h4 A long name for case study
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est.
%a{href: "http://www.google.com", target: "_blank"}
%strong Read more
%i.ofn-i_054-point-right
.pane

69
app/views/shops/signup.html.haml
View File

@@ -20,16 +20,16 @@
If there is a time-sensitive offer you can write it here
e.g. Sign up before 30th June for an extra month free!
%br
%table{style: "width:100%;"}
%table.signup-table.hubs-table{cellpadding: "0", cellspacing: "0"}
%thead
%tr
%td
%h5
%td.text-center{width: "22%"}
%td.text-center{width: "16%"}
%h5 Profile
%td.text-center{width: "22%"}
%td.text-center{width: "16%"}
%h5 Distributor
%td.text-center{width: "22%"}
%td.text-center{width: "24%"}
%h5 Shop
%tr
%td
@@ -59,9 +59,9 @@
%td
%p
%strong Shop
%p.text-small Sell product from multiple suppliers (producers) through an OFN shopfront.
%p.text-small Includes basic support:
%ul.text-small
%p.text-small Get a shopfront on OFN to sell food from multiple suppliers (producers).
%p.text-small Basic support included:
%ul.small
%li User manual
%li Post queries to discussion forum/via contact form
%li Report bugs/suggestions via bugherd
@@ -79,14 +79,20 @@
%h2 Free
%td.text-center{valign: "top"}
%h2
.text-small
First
%br
month
Free
%br
%span.text-small
%strong 1st month
%p.text-small
Then, 2% of your transactions
Then, 2% of transactions
%br
%em capped at $50 per month
%em
Capped at
%strong $50
per month
%br
%em (Special offer for 2015)
#shops-case-studies
.row
@@ -96,29 +102,38 @@
.row
.small-12.medium-6.columns
.case-study
%a{href: "http://www.google.com", target: "_blank"}
%h4 Case study title goes here
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. Nulla in ante non massa lacinia sed eget ipsum.
%a.text-right{href: "http://www.google.com", target: "_blank"} Read more
%img.case-study-img{src: "/assets/case-studies/bfc_logo_square.png", width: "100", height: "100", title: "Bondi Food Collective"}
%h4 Bondi Food Collective
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est.
%a{href: "http://www.google.com", target: "_blank"}
%strong Read more
%i.ofn-i_054-point-right
.small-12.medium-6.columns
.case-study
%a{href: "http://www.google.com", target: "_blank"}
%h4 Case study
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. Nulla in ante non massa lacinia sed eget ipsum.
%a.text-right{href: "http://www.google.com", target: "_blank"} Read more
%img.case-study-img{src: "/assets/case-studies/bonnie-beef-growers.png", width: "100", height: "100", title: "Bonnie Beef Growers"}
%h4 Bonnie Beef Growers
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est.
%a{href: "http://www.google.com", target: "_blank"}
%strong Read more
%i.ofn-i_054-point-right
.row
.small-12.medium-6.columns
.case-study
%a{href: "http://www.google.com", target: "_blank"}
%h4 Another case study
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. Nulla in ante non massa lacinia sed eget ipsum.
%a.text-right{href: "http://www.google.com", target: "_blank"} Read more
%img.case-study-img{src: "/assets/case-studies/South_East_Food_Hub.png", width: "100", height: "100", title: "South East Food Hub"}
%h4 South East Food Hub
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est.
%a{href: "http://www.google.com", target: "_blank"}
%strong Read more
%i.ofn-i_054-point-right
.small-12.medium-6.columns
.case-study
%img.case-study-img{src: "/assets/case-studies/baw-baw.png", width: "100", height: "100", title: "Baw Baw Organics"}
%h4 Baw Baw Organics
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est.
%a{href: "http://www.google.com", target: "_blank"}
%h4 A really long name for a case study
%p.text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, nunc sed sollicitudin egestas, elit metus maximus nunc, non efficitur nunc massa vitae est. Nulla in ante non massa lacinia sed eget ipsum.
%a.text-right{href: "http://www.google.com", target: "_blank"} Read more
%strong Read more
%i.ofn-i_054-point-right
.pane