docs: list sponsors & backers separately on liquidjs.com

docs/themes/navy/languages/en.yml

@@ -11,9 +11,12 @@ index:
   contributors:
     title: Contributors
     description: 'LiquidJS follows the <a href="https://github.com/all-contributors/all-contributors">all-contributors</a> specification, see <a href="tutorials/contribution-guidelines.html">guildelines here</a>! Thanks goes to these wonderful people:'
-  sponsors:
+  backers:
     title: Backers
     description: 'Love LiquidJS and want to contribute? <a href="https://opencollective.com/liquidjs">Become a backer</a>. Find out more <a href="tutorials/contribution-guidelines.html#Financial-Support">how to contribute</a>!'
+  sponsors:
+    title: Sponsors
+    description: 'If LiquidJS is benefiting your business/company, please <a href="https://opencollective.com/liquidjs">sponsor us</a> to make it better!'
 
 playground:
   title: Playground

docs/themes/navy/layout/index.swig

@@ -43,14 +43,21 @@
     </div>
   </div>
 </div>
+<div id="backers-wrap">
+  <div class="wrapper">
+    <div class="inner">
+      <h3>{{__('index.backers.title')}}</h3>
+      <p class="description">{{__('index.backers.description')}}</p>
+      <img src="https://opencollective.com/liquidjs/individuals.svg">
+    </div>
+  </div>
+</div>
 <div id="sponsors-wrap">
   <div class="wrapper">
     <div class="inner">
       <h3>{{__('index.sponsors.title')}}</h3>
       <p class="description">{{__('index.sponsors.description')}}</p>
-      <div class="open-collective">
+      <img class="open-collective" src="https://opencollective.com/liquidjs/organizations.svg">
-        <object type="image/svg+xml" data="https://opencollective.com/liquidjs/tiers/backer.svg?avatarHeight=72"></object>
-      </div>
     </div>
   </div>
 </div>

docs/themes/navy/source/css/_partial/index.styl

@@ -171,7 +171,7 @@
     background: var(--color-link-hover)
     color: #fff
 
-#sponsors-wrap, #contributors-wrap
+#backers-wrap, #sponsors-wrap, #contributors-wrap
   background: var(--color-navy-lighter)
   border-top: 1px solid #161d24
   border-bottom: 1px solid #161d24
@@ -211,10 +211,8 @@
       background: #fff
       color: var(--color-navy-lighter)
 
-#sponsors-wrap
+#sponsors-wrap, #backers-wrap
-  background: var(--color-content-bg)
   border: none
-  text-align: right
   overflow: hidden;
   .inner
     h3
@@ -222,7 +220,7 @@
     p
       color: var(--color-gray)
     .open-collective
-      margin: 0 auto
+      max-width: 100%
     .description a
       color: #333
       &:hover
@@ -236,3 +234,7 @@
         &:hover
           background: #fff
           color: var(--color-navy-lighter)
+
+#backers-wrap
+  text-align: right
+  background: var(--color-content-bg)