website: Addjusted logos sizing and responsiveness.

Signed-off-by: Bartek Plotka <[email protected]>

Author: bwplotka

website/layouts/index.html

@@ -52,33 +52,29 @@ <h4 class="font-weight-bold">Downsampling & Compaction</h4>
         </div>
     </div>
 </div>
-<div class="container py-5">
+<div class="container">
+       <h2 class="heading-big text-center">Founded By</h2>
     <div class="row">
-        <div class="col-12"><h3 class="text-center">Founded by</h3></div>
-    </div>
-    <div class="row">
-        <div class="col-4 col-xl-2 offset-4 offset-xl-5 py-3">
+        <div class="col-sm-6 offset-sm-3 col-md-4 offset-md-4">
             <div class="img-sponsor">
                 <a href="https://improbable.io" rel="nofollow" target="_blank"><img src="{{ "/logos/improbable.png" | relURL }}" class="img-fluid" alt="Improbable"></a>
             </div>
         </div>
     </div>
-    <div class="row">
-        <div class="col-12"><h3 class="text-center">Used by</h3></div>
-    </div>
+        <h2 class="heading-big text-center">Used By</h2>
     <div class="row">
         {{ range $sponsor := $.Site.Data.sponsors.sponsors }}
         {{ if $sponsor.logo }}
-        <div class="col-4 col-xl-2 py-3">
+        <div class="col-sm-6 col-md-3">
             <div class="img-sponsor">
                 <a href="{{ $sponsor.url }}" rel="nofollow" target="_blank"><img src="{{ (printf "/logos/%s" $sponsor.logo) | relURL }}" alt="{{ $sponsor.name }}"></a>
             </div>
         </div>
         {{ end }}
         {{ end }}
-        <div class="col-4 col-xl-2 py-3">
+        <div class="col-sm-6 col-md-3">
             <div class="img-sponsor">
-                <a class="text-muted" href="{{ "contributing/how-to-contribute-to-docs.md#logos" | relURL }}">Your Company</a>
+                <a class="text-center text-muted" href="{{ "contributing/how-to-contribute-to-docs.md#logos" | relURL }}">Your Company</a>
             </div>
         </div>
     </div>

website/static/main.css

@@ -52,14 +52,16 @@ pre {
 }
 
 .img-sponsor {
-    padding: 1rem;
+    padding: 25px;
     background-color: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,.1);
     border: 1px solid #dee2e6;
+    margin: 15px 0 15px;
     border-radius: .25rem;
-    height: 75px;
     display: flex;
     align-items: center;
     justify-content: center;
+    height: 100px;
 }
 
 .img-sponsor img {