website: Sorted logo list, improved look on mobile devices. (#1112)

Signed-off-by: Bartek Plotka <bwplotka@gmail.com>

website/layouts/index.html

@@ -55,24 +55,24 @@ <h4 class="font-weight-bold">Downsampling & Compaction</h4>
 <div class="container">
        <h2 class="heading-big text-center">Founded By</h2>
     <div class="row">
-        <div class="col-sm-6 offset-sm-3 col-md-4 offset-md-4">
+        <div class="col-6 offset-3 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>
         <h2 class="heading-big text-center">Used By</h2>
     <div class="row">
-        {{ range $sponsor := $.Site.Data.sponsors.sponsors }}
+        {{ range $sponsor := sort $.Site.Data.sponsors.sponsors "name" }}
         {{ if $sponsor.logo }}
-        <div class="col-sm-6 col-md-3">
+        <div class="col-6 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-sm-6 col-md-3">
+        <div class="col-6 col-sm-6 col-md-3">
             <div class="img-sponsor">
                 <a class="text-center text-muted" href="{{ "contributing/how-to-contribute-to-docs.md#logos" | relURL }}">Your Company</a>
             </div>

website/static/main.css

@@ -65,7 +65,8 @@ pre {
 }
 
 .img-sponsor img {
-    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
 }
 
 .header-anchor { font-size: 100%; visibility: hidden;}