adjust the height of sponsor images (#2980)

Author: Jinjiang

themes/vue/layout/index.ejs

@@ -35,8 +35,8 @@
   <div id="special">
     <h3>Special Sponsor</h3>
     <% var specialSponsor = theme.special[0]; %>
-    <a href="<%- specialSponsor.url %>" target="_blank" rel="noopener sponsored">
-      <img src="<%- logo(specialSponsor.img) %>" style="width:160px" alt="Special sponsor <%- specialSponsor.name %>">
+    <a href="<%- specialSponsor.url %>" target="_blank" rel="noopener sponsored" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
+      <img src="<%- logo(specialSponsor.img) %>" alt="Special sponsor <%- specialSponsor.name %>">
       <br>
       <!-- <span><%- specialSponsor.description %></span> -->
     </a>

themes/vue/layout/partials/sponsors.ejs

@@ -3,15 +3,15 @@
 <h3>Patreon Sponsors</h3>
 
 <%_ for (const sponsor of theme.platinum) {_%>
-<a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" style="width: 160px;">
-  <img src="<%- logo(sponsor.img) %>" style="width: 160px;" alt="<%-sponsor.name-%>">
+<a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
+  <img src="<%- logo(sponsor.img) %>" alt="<%-sponsor.name-%>">
 </a>
 <%_ } _%>
 <br>
 <br>
 <%_ for (const sponsor of theme.gold) {_%>
-<a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" style="width: 120px;">
-  <img src="<%- logo(sponsor.img) %>" style="width:auto;max-width:120px;max-height:60px;" alt="<%-sponsor.name-%>">
+<a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
+  <img src="<%- logo(sponsor.img) %>" alt="<%-sponsor.name-%>">
 </a>
 <%_ } _%>
 <br>

themes/vue/source/css/_sponsors-index.styl

@@ -11,11 +11,15 @@
   a
     margin: 20px 15px 0
     position: relative
-  a, img
-    width: 100px
     display: inline-block
-    vertical-align: middle
+    &.sponsor
+      width: 100px
+      height: 60px
+      line-height: 60px
   img
+    max-width: 100%
+    max-height: 100%
+    vertical-align: middle
     transition: all .3s ease
     filter: grayscale(100%)
     opacity: 0.66
@@ -26,8 +30,7 @@
     display: block
     margin: 30px auto 15px
     width: 200px
-    img
-      width: 200px
+    height: auto
   .become-sponsor
     margin-top: 40px
     font-size: .9em

themes/vue/source/css/_sponsors-sidebar.styl

@@ -3,16 +3,19 @@
   font-size: .85em
   .logo
     color: $light
-    margin-top: 10px
-    text-align: center
+    width: 125px
+    height: 50px
     font-weight: bold
-    display block
+    display flex
+    align-items center
+    justify-content center
     &:first-child
       margin-top: 18px
     &:last-child
       margin-bottom: 20px
-  img, a
-    width: 125px
+    img
+      max-width: 125px
+      max-height: 50px
 
 .become-backer
   border: 1px solid $green

themes/vue/source/css/index.styl

@@ -120,11 +120,16 @@ body
     margin 0
   a
     color $light
+    width: 160px
+    height: 80px
+    line-height: 80px
   a, span, img
     display: inline-block
     vertical-align: middle
   img
     margin: 15px 0 0
+    max-width: 100%
+    max-height: 100%
 
 #highlights
   background-color: #fff