mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-24 20:36:49 +00:00
Adding in logos for case studies
More styling on signup pages
This commit is contained in:
BIN
app/assets/images/case-studies/South_East_Food_Hub.png
Normal file
BIN
app/assets/images/case-studies/South_East_Food_Hub.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
app/assets/images/case-studies/baw-baw.png
Normal file
BIN
app/assets/images/case-studies/baw-baw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
app/assets/images/case-studies/bfc_logo_square.png
Normal file
BIN
app/assets/images/case-studies/bfc_logo_square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
app/assets/images/case-studies/bonnie-beef-growers.png
Normal file
BIN
app/assets/images/case-studies/bonnie-beef-growers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -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
101
app/assets/stylesheets/darkswarm/signup.css.sass
Normal 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
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user