Fixed position of sponsor logos inside the anchors and added nice hover effect.

Went back to all includes in _config.yml.

Author: Tomasz-Kluczkowski

_config.yml

@@ -14,8 +14,8 @@ sass:
   sass_dir: _sass
 kramdown:
   input: GFM
-#include: ["_test.html", "_static", "pandas/guide/_static", "_pages"]
-include: ["_pages"]
+include: ["_test.html", "_static", "pandas/guide/_static", "_pages"]
+#include: ["_pages"]
 exclude:
   - Gemfile
   - Gemfile.lock

_config_dev.yml

@@ -14,8 +14,8 @@ sass:
   sass_dir: _sass
 kramdown:
   input: GFM
-#include: ["_test.html", "_static", "pandas/guide/_static", "_pages"]
-include: ["_pages"]
+include: ["_test.html", "_static", "pandas/guide/_static", "_pages"]
+#include: ["_pages"]
 exclude:
   - Gemfile
   - Gemfile.lock

_includes/footer.html

@@ -10,15 +10,15 @@
             <p class="section-content footer__text">Our Sponsors</p>
             <hr class="footer__divider">
             <div class="row">
-                <div class="col-lg-6">
+                <div class="footer__sponsor-col col-lg-6">
                     <a class="footer__sponsor-link" href="https://www.python.org/psf/">
                         <img class="footer__img" src="{{ site.baseurl }}/static/images/sponsors/python_software_foundation.png">
                     </a>
                     <a class="footer__sponsor-link" href="https://www.linkedin.com/in/hamishpitkeathly/">
                         <img class="footer__img" src="{{ site.baseurl }}/static/images/sponsors/harvey_nash.png">
                     </a>
                 </div>
-                <div class="col-lg-6">
+                <div class="footer__sponsor-col col-lg-6">
                     <a class="footer__sponsor-link" href="https://www.touchsurgery.com/jobs.html">
                         <img class="footer__img" src="{{ site.baseurl }}/static/images/sponsors/touch_surgery.png">
                     </a>

_sass/style.scss

@@ -455,6 +455,11 @@
     text-align: center;
 }
 
+.footer__sponsor-col {
+  text-align: center;
+}
+
+
 .footer__icon {
     font-size: 2em;
     margin: 1em;
@@ -473,21 +478,28 @@
 }
 
 .footer__sponsor-link {
+    position: relative;
     background: #041729;
     border-radius: 5px;
     border: #7fa0c2 1px solid;
     text-align: center;
-    display: block;
+    display: inline-block;
+    line-height: 102px;
+    vertical-align: middle;
     margin-top: 10%;
     width: 278px;
     height: 102px;
 }
 
 .footer__img {
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-
+  filter: gray;
+  -webkit-filter: grayscale(1);
+  transition: filter, .8s ease-in-out;
+  &:hover {
+    filter: none;
+    -webkit-filter: grayscale(0);
+    -webkit-transform: scale(1.05);
+  }
 }
 
 .footer__link {