update sponsors block (Codeception#512)

Arhell · web-flow · commit 6c57416b1375 · 2021-05-08T03:16:16.000+03:00
diff --git a/_includes/sponsors.html b/_includes/sponsors.html
@@ -1,31 +1,40 @@
-<div class="sponsors-wrapper">
+<div class="support-wrapper">
   <div class="container">
     <div class="row">
-      <div class="col-sm-12 col-md-offset-3 col-md-6 text-center">
+      <div class="col-sm-12 col-md-12 text-center">
         <a href="https://opencollective.com/codeception/contribute/premium-partner-11916/checkout">
           <h3>Premium Sponsors</h3>
         </a>
 
+        <div class="support">
+          <a href="https://somewherewarm.com/" rel="nofollow" class="support-item support-item--premium">
+            <img src="https://images.opencollective.com/somewherewarmgr/f8b567b/logo/256.png" alt="SomewhereWarm" title="SomewhereWarm - Living and breathing all things WooCommerce.">
+          </a>
+        </div>
 
-        <a href="https://somewherewarm.com/" rel="nofollow" class="sponsors-item">
-          <img src="https://images.opencollective.com/somewherewarmgr/f8b567b/logo/256.png" alt="SomewhereWarm" title="SomewhereWarm - Living and breathing all things WooCommerce. " class="sponsors sponsors--somewherewarm">
-        </a>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-sm-12 col-md-12 text-center">
 
         <a href="https://opencollective.com/codeception/contribute/sponsor-11887/checkout">
           <h4>Sponsors</h4>
         </a>
 
-        <a href="https://themeisle.com/" rel="nofollow" class="sponsors-item">
-          <img src="/images/support/themeisle.png" class="sponsors sponsors--themeisle" title="themeisle" alt="Themeisle - Premium WordPress themes, Templates &amp; Plugins">
-        </a>
+        <div class="support">
+          <a href="https://themeisle.com/" rel="nofollow" class="support-item">
+            <img src="/images/support/themeisle.png" title="themeisle" alt="Themeisle - Premium WordPress themes, Templates &amp; Plugins">
+          </a>
 
-        <a href=" https://en.vpnwelt.com/ " rel="nofollow" class="sponsors-item">
-          <img src="/images/support/vpnwelt.png" class="sponsors sponsors--vpnwelt" title="VPNwelt" alt="VPNwelt - Privacy Protection on the Internet 2021">
-        </a>
+          <a href=" https://en.vpnwelt.com/ " rel="nofollow" class="support-item">
+            <img src="/images/support/vpnwelt.png" title="VPNwelt" alt="VPNwelt - Privacy Protection on the Internet 2021">
+          </a>
 
-        <a href="https://translationreport.com/" rel="nofollow" class="sponsors-item">
-          <img src="/images/support/translationreport.png" class="sponsors sponsors--translationreport" title="translation report" alt="Best Translation Site Reviews by TranslationReport">
-        </a>
+          <a href="https://translationreport.com/" rel="nofollow" class="support-item">
+            <img src="/images/support/translationreport.png" title="translation report" alt="Best Translation Site Reviews by TranslationReport">
+          </a>
+        </div>
 
       </div>
     </div>
diff --git a/_scss/_all.scss b/_scss/_all.scss
@@ -1,4 +1,5 @@
 @import "main";
 @import "algolia";
 @import "contributors";
+@import "support";
 @import "highlight";
diff --git a/_scss/_main.scss b/_scss/_main.scss
@@ -401,7 +401,7 @@ body {
   width: 60px;
 }
 
-.sponsors--rebilly, .sponsors--themeisle, .sponsors--vpnwelt {
+.sponsors--rebilly, {
   width: 100px;
   background: #fff;
   border-radius: 20px;
@@ -416,28 +416,13 @@ body {
   &:hover {
     opacity: 1;
   }
-
-  &.sponsors--themeisle {
-    width: 150px;
-    height: auto;
-  }
 }
 
 .sponsors-item:hover {
   text-decoration: none;
 }
 
 #footer {
-  .sponsors-item .sponsors.sponsors--somewherewarm {
-    height: 150px;
-    opacity: 0.9;
-    width: auto;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
   a {
     color: #fff;
   }
@@ -1481,7 +1466,7 @@ body #footer .links {
     width: 100px;
   }
 
-  .sponsors--rebilly, .sponsors--themeisle, .sponsors--vpnwelt, .sponsors--translationreport {
+  .sponsors--rebilly {
     width: 150px;
   }
 
@@ -1704,64 +1689,6 @@ body #footer .links {
   }
 }
 
-.sponsors-wrapper {
-  .sponsors-item .sponsors {
-    height: 80px;
-    border-radius: 20px;
-    opacity: 0.8;
-    transition: opacity .2s ease;
-
-    &.sponsors--vpnwelt, &.sponsors--translationreport {
-      height: auto;
-      border-radius: inherit;
-    }
-
-    &:hover {
-      opacity: 1;
-    }
-
-    &.sponsors--themeisle {
-      width: 150px;
-      height: auto;
-    }
-
-    &.sponsors--somewherewarm {
-      height: 150px;
-      opacity: 0.9;
-      width: auto;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  .sponsors {
-    zoom: 0.8;
-    filter: grayscale(0.3);
-    opacity: 0.5;
-    transition: opacity .2s ease;
-
-    &:hover {
-      opacity: 1;
-      text-decoration: none;
-    }
-  }
-
-  .container {
-    padding-bottom: 50px;
-  }
-
-  h4 {
-    margin-top: 40px;
-    margin-bottom: 15px;
-  }
-
-  h3 {
-    margin-bottom: 15px;
-  }
-}
-
 .partners-block {
   font-size: 18px;
   margin-bottom: 30px;
diff --git a/_scss/_support.scss b/_scss/_support.scss
@@ -0,0 +1,53 @@
+.support-wrapper {
+
+  .support {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .support-item {
+    margin: 10px;
+    width: 180px;
+    padding: 10px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      max-width: 160px;
+      transition: all .15s ease;
+      opacity: .5;
+      filter: grayscale(1);
+    }
+
+    &:hover {
+      img {
+        opacity: 1;
+        filter: grayscale(0);
+      }
+    }
+  }
+
+  .support-item--premium {
+    width: 240px;
+    img {
+      max-width: 220px;
+    }
+  }
+
+  .container {
+    padding-bottom: 50px;
+  }
+
+  h4 {
+    margin-top: 40px;
+    margin-bottom: 15px;
+  }
+
+  h3 {
+    margin-bottom: 15px;
+  }
+}
