From 7fa94f75c373baa7b622a2a76362387439d07c08 Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Fri, 20 Jan 2023 10:55:34 +0800
Subject: [PATCH] adjust the height of sponsor images

---
 themes/vue/layout/index.ejs                  |  4 ++--
 themes/vue/layout/partials/sponsors.ejs      |  8 ++++----
 themes/vue/source/css/_sponsors-index.styl   | 13 ++++++++-----
 themes/vue/source/css/_sponsors-sidebar.styl | 13 ++++++++-----
 themes/vue/source/css/index.styl             |  5 +++++
 5 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
index 2302ac7e66..efb5587336 100644
--- a/themes/vue/layout/index.ejs
+++ b/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>
diff --git a/themes/vue/layout/partials/sponsors.ejs b/themes/vue/layout/partials/sponsors.ejs
index 50770ef006..7ef4e9cf7e 100644
--- a/themes/vue/layout/partials/sponsors.ejs
+++ b/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>
diff --git a/themes/vue/source/css/_sponsors-index.styl b/themes/vue/source/css/_sponsors-index.styl
index 3290e2bcda..cff8226199 100644
--- a/themes/vue/source/css/_sponsors-index.styl
+++ b/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
diff --git a/themes/vue/source/css/_sponsors-sidebar.styl b/themes/vue/source/css/_sponsors-sidebar.styl
index 5489a77d30..ef823be91f 100644
--- a/themes/vue/source/css/_sponsors-sidebar.styl
+++ b/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
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index bec2ecd6f2..2f74a7a6ad 100644
--- a/themes/vue/source/css/index.styl
+++ b/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