From 2d26db1ff2183aa07d08c4acc867b32868c98e69 Mon Sep 17 00:00:00 2001
From: Christopher Neugebauer <chrisjrn@gmail.com>
Date: Wed, 30 Aug 2017 19:50:28 -0400
Subject: [PATCH] Makes the sponsor logos nicer. #79

---
 pinaxcon/templates/static_pages/homepage.html |  2 ++
 static/scss/custom.scss                       | 22 +++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/pinaxcon/templates/static_pages/homepage.html b/pinaxcon/templates/static_pages/homepage.html
index 6e90bf5..537abd6 100644
--- a/pinaxcon/templates/static_pages/homepage.html
+++ b/pinaxcon/templates/static_pages/homepage.html
@@ -116,6 +116,7 @@
           {% if level.sponsors %}
               {% for sponsor in level.sponsors %}
                   <div class="sponsor">
+                    <div class="logo-alignment">
                       {% if sponsor.website_logo %}
                           <a href="{{ sponsor.external_url }}">
                               <img src="{% thumbnail sponsor.website_logo '600x360' %}" alt="{{ sponsor.name }}">
@@ -123,6 +124,7 @@
                       {% else %}
                           <a href="{{ sponsor.external_url }}">{{ sponsor.name }}</a>
                       {% endif %}
+                    </div>
                   </div>
               {% endfor %}
           {% endif %}
diff --git a/static/scss/custom.scss b/static/scss/custom.scss
index 379a59f..debb6c6 100644
--- a/static/scss/custom.scss
+++ b/static/scss/custom.scss
@@ -127,10 +127,30 @@ $homepage-block-min-height: 480px;
   z-index: 3;
 
   .sponsor {
+    $sponsor-height: 150px;
     @include make-xs-column(6);
     @include make-sm-column(4);
     @include make-md-column(3);
     max-width: 600px;
+    height: $sponsor-height;
+
+
+    .logo-alignment {
+      max-width: 300px;
+      width: 100%;
+      height: 100%;
+
+      // Center the icon horizontally and vertically
+      text-align: center;
+      line-height: ($sponsor-height - 5px);
+      vertical-align: middle;
+
+      a img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
   }
 }
 
@@ -281,8 +301,6 @@ $homepage-block-min-height: 480px;
 }
 
 .sponsor-list a img {
-  width: 100%;
-  max-width: 300px;
 }
 
 .sponsor-list {