docs: add lambdatest to sponsors

README.md

@@ -72,35 +72,30 @@ Feel free to create a PR or contact me to add your use case into this list!
 If you personally love LiquidJS or it's benefiting your business, please consider financially support us via [GitHub Sponsors](https://github.com/sponsors/harttle). Special thanks to our sponsors!
 
 <!-- FINANCIAL-CONTRIBUTORS-BEGIN -->
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://www.opensense.com/"><img src="https://images.opencollective.com/opensense-inc/bf840ae/logo/256.png?height=100" width="100px;" alt="Opensense Inc."/><br /><sub><b>Opensense</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://www.11ty.dev/"><img src="https://avatars.githubusercontent.com/u/35147177?v=4&s=100" width="100px;" alt="Eleventy"/><br /><sub><b>Eleventy</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://about.me/peterdehaan"><img src="https://avatars2.githubusercontent.com/u/557895?v=4&s=100" width="100px;" alt="Peter deHaan"/><br /><sub><b>Peter deHaan</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://opencollective.com/touchless"><img src="https://images.opencollective.com/touchless/273bc74/logo/256.png?height=100" width="100px;" alt="Touchless"/><br /><sub><b>Touchless</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://www.dropkiq.com/"><img src="https://images.opencollective.com/1bertlol/43a8ea8/logo/256.png?height=100" width="100px;" alt="Adam Darrah"/><br /><sub><b>Dropkiq</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://dailycontributors.com/"><img src="https://images.opencollective.com/dailycontributors/3c2e057/logo/256.png?height=100&width=100" width="100px;" alt="Dailycontributors"/><br /><sub><b>Dailycontributors</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/coni2k"><img src="https://avatars0.githubusercontent.com/u/1284601?v=4&s=100" width="100px;" alt="coni2k"/><br /><sub><b>Serkan Holat</b></sub></a></td>
-    </tr>
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/amit777"><img src="https://avatars0.githubusercontent.com/u/2703309?v=4&s=100" width="100px;" alt="amit777"/><br /><sub><b>amit777</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://opencollective.com/khaled-salem"><img src="https://images.opencollective.com/khaled-salem/avatar/256.png?height=256" width="100px;" alt="Khaled Salem"/><br /><sub><b>Khaled Salem</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://sentry.io/"><img src="https://avatars.githubusercontent.com/u/1396951?v=4&s=100" width="100px;" alt="Sentry"/><br /><sub><b>Sentry</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://www.checkoutblocks.com/"><img src="https://avatars.githubusercontent.com/u/114603307?v=4&s=100" width="100px;" alt="Checkout Blocks"/><br /><sub><b>Checkout Blocks</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://customer.io/"><img src="https://avatars.githubusercontent.com/u/1152079?v=4&s=100" width="100px;" alt="Customer IO"/><br /><sub><b>Customer IO</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/15fathoms"><img src="https://avatars.githubusercontent.com/u/79156039?v=4&s=100" width="100px;" alt="Emmanuel Cartelli"/><br /><sub><b>Emmanuel Cartelli</b></sub></a><br /></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/microsoft"><img src="https://avatars.githubusercontent.com/u/6154722?v=4&s=100" width="100px;" alt="Microsoft"/><br /><sub><b>Microsoft</b></sub></a><br /></td>
-    </tr>
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://www.pakstyle.pk/"><img src="https://images.opencollective.com/pakstyle/2b81605/logo/256.png?height=100" width="100px;" alt="PakStyle.pk"/><br /><sub><b>PakStyle.pk</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://syntax.fm/"><img src="https://avatars.githubusercontent.com/u/130389858?v=4&s=100" width="100px;" alt="Syntax Podcast"/><br /><sub><b>Syntax Podcast</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://opencollective.com/cartelli-emmanuel"><img src="https://images.opencollective.com/cartelli-emmanuel/avatar/256.png?height=100" width="100px;" alt="Cartelli Emmanuel"/><br /><sub><b>Cartelli Emmanuel</b></sub></a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://www.escorta.com/"><img src="https://images.opencollective.com/escortacom/avatar/256.png?height=100" width="100px;" alt="EscortA.com"/><br /><sub><b>EscortA.com</b></sub></a></td>
-      <td align="center" valign="middle" width="14.28%"><a href="https://chudovo.com/"><img src="https://images.opencollective.com/Chudovo/avatar/256.png?height=100" style="max-width:100px;max-height:100px;" alt="Chudovo"/><br /><sub><b>Chudovo</b></sub></a></td>
-    </tr>
-  </tbody>
-</table>
+<p align="center" style="line-height: 2.5;">
+  <a href="https://www.11ty.dev/" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://avatars.githubusercontent.com/u/35147177?v=4&s=100" height="80" style="vertical-align: middle;" alt="Eleventy" title="Eleventy"/></a>
+  <a href="https://www.opensense.com/" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://images.opencollective.com/opensense-inc/bf840ae/logo/256.png?height=100" height="80" style="vertical-align: middle;" alt="Opensense Inc." title="Opensense"/></a>
+  <a href="https://github.com/microsoft" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://avatars.githubusercontent.com/u/6154722?v=4&s=100" height="80" style="vertical-align: middle;" alt="Microsoft" title="Microsoft"/></a>
+  <a href="https://sentry.io/" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://avatars.githubusercontent.com/u/1396951?v=4&s=100" height="80" style="vertical-align: middle;" alt="Sentry" title="Sentry"/></a>
+  <a href="https://www.checkoutblocks.com/" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://avatars.githubusercontent.com/u/114603307?v=4&s=100" height="80" style="vertical-align: middle;" alt="Checkout Blocks" title="Checkout Blocks"/></a>
+  <a href="https://customer.io/" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://avatars.githubusercontent.com/u/1152079?v=4&s=100" height="80" style="vertical-align: middle;" alt="Customer IO" title="Customer IO"/></a>
+  <a href="https://syntax.fm/" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://avatars.githubusercontent.com/u/130389858?v=4&s=100" height="80" style="vertical-align: middle;" alt="Syntax Podcast" title="Syntax Podcast"/></a>
+  <br/>
+  <a href="https://www.lambdatest.com/?utm_source=liquidjs&utm_medium=sponsor" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://www.lambdatest.com/blue-logo.png" width="240" style="vertical-align: middle;" alt="LambdaTest" title="LambdaTest"/></a>
+  <a href="https://chudovo.com/" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://images.opencollective.com/Chudovo/avatar/256.png?height=100" width="160" style="vertical-align: middle;background: white;padding: 8px 16px;" alt="Chudovo" title="Chudovo"/></a>
+  <a href="https://dailycontributors.com/" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://images.opencollective.com/dailycontributors/3c2e057/logo/256.png?height=50&width=100" width="120" style="vertical-align: middle;" alt="Dailycontributors" title="Dailycontributors"/></a>
+  <a href="https://www.pakstyle.pk/" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://images.opencollective.com/pakstyle/2b81605/logo/256.png?height=100" height="80" style="vertical-align: middle;" alt="PakStyle.pk" title="PakStyle.pk"/></a>
+  <a href="https://www.escorta.com/" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://images.opencollective.com/escortacom/avatar/256.png?height=100" height="45" style="vertical-align: middle;" alt="EscortA.com" title="EscortA.com"/></a>
+  <br/>
+  <a href="https://opencollective.com/touchless" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://images.opencollective.com/touchless/273bc74/logo/256.png?height=100" height="80" style="vertical-align: middle;" alt="Touchless" title="Touchless"/></a>
+  <a href="https://www.dropkiq.com/" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://images.opencollective.com/1bertlol/43a8ea8/logo/256.png?height=100" height="80" style="vertical-align: middle;" alt="Dropkiq" title="Dropkiq"/></a>
+  <a href="https://about.me/peterdehaan" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://avatars2.githubusercontent.com/u/557895?v=4&s=100" height="80" style="vertical-align: middle;" alt="Peter deHaan" title="Peter deHaan"/></a>
+  <a href="https://github.com/coni2k" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://avatars0.githubusercontent.com/u/1284601?v=4&s=100" height="80" style="vertical-align: middle;" alt="Serkan Holat" title="Serkan Holat"/></a>
+  <a href="https://github.com/amit777" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://avatars0.githubusercontent.com/u/2703309?v=4&s=100" height="80" style="vertical-align: middle;" alt="amit777" title="amit777"/></a>
+  <a href="https://opencollective.com/khaled-salem" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://images.opencollective.com/khaled-salem/avatar/256.png?height=256" height="80" style="vertical-align: middle;" alt="Khaled Salem" title="Khaled Salem"/></a>
+  <a href="https://github.com/15fathoms" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://avatars.githubusercontent.com/u/79156039?v=4&s=100" height="80" style="vertical-align: middle;" alt="Emmanuel Cartelli" title="Emmanuel Cartelli"/></a>
+  <a href="https://opencollective.com/cartelli-emmanuel" style="display: inline-block; vertical-align: middle; margin: 8px;"><img src="https://images.opencollective.com/cartelli-emmanuel/avatar/256.png?height=100" height="80" style="vertical-align: middle;" alt="Cartelli Emmanuel" title="Cartelli Emmanuel"/></a>
+</p>
 <!-- FINANCIAL-CONTRIBUTORS-END -->
 
 ## Contributors ✨

bin/build-contributors.sh

@@ -20,7 +20,6 @@ awk '/ALL-CONTRIBUTORS-LIST:START/{flag=1;next}/ALL-CONTRIBUTORS-LIST:END/{flag=
 # create docs/themes/navy/layout/partial/financial-contributors.swig
 awk '/FINANCIAL-CONTRIBUTORS-BEGIN/{flag=1;next}/FINANCIAL-CONTRIBUTORS-END/{flag=0}flag' README.md | \
   sed 's/<br \/>.*<\/td>/<\/a><\/td>/g' | \
-  sed 's/width="[^"]*"//g' | \
   tr -d '\n' | \
   sed 's/<\/tr>\s*<tr>//g' \
   > docs/themes/navy/layout/partial/financial-contributors.swig

docs/themes/navy/layout/index.swig

@@ -1,5 +1,5 @@
 <header id="banner" class="wrapper">
-  <div class="inner">
+  <div class="inner inner-content">
     <h2 id="banner-title">{{ page.subtitle }}</h2>
     <div id="banner-start">
       <code id="banner-start-command">npm install liquidjs</code><a id="banner-start-link" href="./tutorials/setup.html"><i class="icon-arrow-right"></i></a>
@@ -9,7 +9,7 @@
 </header>
 <div id="intro-news-list">
   <div class="wrapper">
-    <div class="inner">
+    <div class="inner inner-content">
       <div id="intro-news-flex">
         {% for news in site.data.news %}
         <a href="{{news.url}}" class="intro-news-wrap">
@@ -23,7 +23,7 @@
 </div>
 <div id="content-wrap">
   <div class="wrapper">
-    <div class="inner">
+    <div class="inner inner-content">
       {{ page.content }}
       <div id="intro-cmd-wrap" class="highlight typescript"><pre><span class="line"><span class="keyword">import</span> { Liquid } <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid()</span><br><span class="line"><span class="keyword">const</span> tpl = engine.parse(<span class="string">'Welcome to {% raw %}{{v}}{% endraw %}!'</span>)</span><br><span class="line">engine.render(tpl, {<span class="attr">v</span>: <span class="string">"Liquid"</span>}).then(<span class="built_in">console</span>.log)</span><br><span class="line"><span class="comment">// Outputs "Welcome to Liquid!"</span></span><br></pre></div>
       <div id="intro-get-started-wrap">
@@ -32,20 +32,9 @@
     </div>
   </div>
 </div>
-<div id="contributors-wrap">
-  <div class="wrapper">
-    <div class="inner">
-      <h3>{{__('index.contributors.title')}}</h3>
-      <p class="description">{{__('index.contributors.description')}}</p>
-      <div class="contributors">
-        {{ partial('partial/all-contributors') }}
-      </div>
-    </div>
-  </div>
-</div>
 <div id="sponsors-wrap">
   <div class="wrapper">
-    <div class="inner">
+    <div class="inner inner-content">
       <h3>{{__('index.sponsors.title')}}</h3>
       <p class="description">{{__('index.sponsors.description')}}</p>
       <div class="contributors">
@@ -54,3 +43,14 @@
     </div>
   </div>
 </div>
+<div id="contributors-wrap">
+  <div class="wrapper">
+    <div class="inner inner-content">
+      <h3>{{__('index.contributors.title')}}</h3>
+      <p class="description">{{__('index.contributors.description')}}</p>
+      <div class="contributors">
+        {{ partial('partial/all-contributors') }}
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -54,7 +54,11 @@ a
 
 .inner
   @media screen
-    padding: 0 gutter-width
+    margin: 0 gutter-width
+.inner.inner-content
+  margin: 0 32px
+  @media mq-tablet
+    margin: 0 48px
 
 #content-wrap
   background: var(--color-content-bg)

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

@@ -66,6 +66,10 @@
 .intro-news-wrap
   padding: 24px 30px
   text-decoration: none
+  &:first-child
+    padding-left: 0
+  &:last-child
+    padding-right: 0
   &:hover
     background-color: var(--color-link-hover)
   @media mq-normal
@@ -105,7 +109,7 @@
   text-align: center
   @media mq-normal
     text-align: left
-    padding-left: 70px
+    padding-left: 48px
 
 .intro-feature-icon
   color: var(--color-link)
@@ -116,7 +120,7 @@
     margin-bottom: 26px
     position: absolute
     top: 0
-    left: 20px
+    left: 0
     font-size: 24px
     width: @font-size
 
@@ -177,9 +181,11 @@
   border-bottom: 1px solid #161d24
   margin: -1px 0
   .inner
-    margin: 48px 16px
+    margin-top: 48px
+    margin-bottom: 48px
     @media mq-tablet
-      margin: 64px 32px
+      margin-top: 64px
+      margin-bottom: 64px
     h3
       color: #fff
       font-size: 32px
@@ -192,20 +198,7 @@
       text-decoration: none
 
 #contributors-wrap
-  .description a
-    color: #fff
-    &:hover
-      background: #fff
-      color: var(--color-navy-lighter)
-
-#sponsors-wrap
-  border: none
-  text-align: right
   background: var(--color-content-bg)
-  overflow: hidden;
-  .contributors
-    display: flex;
-    justify-content: right;
   .inner
     h3
       color: var(--color-default)
@@ -227,10 +220,20 @@
           background: #fff
           color: var(--color-navy-lighter)
 
+#sponsors-wrap
+  border: none
+  overflow: hidden;
+  .description a
+    color: #fff
+    &:hover
+      background: #fff
+      color: var(--color-navy-lighter)
+
 .contributors
   tr
     display: flex
     flex-wrap: wrap
+    justify-content: center;
   td
     margin: 10px 2px 0
     a img