Merge pull request preactjs#761 from preactjs/add-substack-sponsor

Add Substack as a platinum sponsor

src/components/sponsors/index.js

@@ -2,6 +2,7 @@ import styles from './style.less';
 import AMPSvg from './amp.svg';
 import TrivagoSvg from './trivago.svg';
 import WebflowSvg from './webflow.svg';
+import SubstackSvg from './substack.svg';
 
 /**
  * Sponsors on the main page is a unique selling point of our
@@ -23,40 +24,56 @@ export default function Sponsors() {
 						src={AMPSvg}
 						alt="AMP"
 						width="150"
-						height="150"
-						style="height: 4rem; width: auto;"
+						height="100"
+						style="height: 3rem; width: auto;"
 					/>
 				</a>
 			</li>
 			<li class={styles.sponsorItem}>
 				<a
 					href="https://tech.trivago.com/opensource/"
-					title="trivago"
+					title="Trivago"
 					target="_blank"
 					rel="noopener noreferrer"
 				>
 					<img
 						src={TrivagoSvg}
-						alt="trivago"
-						width="150"
-						height="150"
-						style="height: 3.5rem; width: auto;"
+						alt="Trivago"
+						width="102"
+						height="32"
+						style="height: 3rem; width: auto;"
+					/>
+				</a>
+			</li>
+			<li class={styles.sponsorItem}>
+				<a
+					href="https://substack.com/"
+					title="Substack"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<img
+						src={SubstackSvg}
+						alt="Substack"
+						width="192"
+						height="33"
+						style="height: 3rem; width: auto;"
 					/>
 				</a>
 			</li>
 			<li class={styles.sponsorItem}>
 				<a
 					href="https://webflow.com/"
-					title="webflow"
+					title="Webflow"
 					target="_blank"
 					rel="noopener noreferrer"
 				>
 					<img
 						src={WebflowSvg}
-						alt="webflow"
-						width="300"
-						height="75"
-						style="height:3rem; width: auto;"
+						alt="Webflow"
+						width="100"
+						height="25"
+						style="height: 3rem; width: auto;"
 					/>
 				</a>
 			</li>

src/components/sponsors/style.less

@@ -1,6 +1,9 @@
 :global(.sponsors) {
 	text-align: center;
 	margin-bottom: -2rem;
+	max-width: 60rem !important;
+	padding-left: 0 !important;
+	padding-right: 0 !important;
 
 	p {
 		margin-bottom: 0;
@@ -9,24 +12,33 @@
 
 .sponsorList {
 	display: flex;
+	flex-wrap: wrap;
 	justify-content: center;
 	align-items: center;
 	padding: 0 !important;
-	margin: 1rem 0 0 0;
+	margin: .5rem 0 0;
 }
 
 .sponsorItem {
+	flex: 1 1 auto;
 	list-style: none;
 	opacity: 0.5;
 	transition: all 0.3s;
-	filter: grayscale(1);
+	filter: grayscale(1) contrast(5);
+	text-align: center;
+	padding: .5rem 1.5rem 0;
+	margin: 0;
 
 	@media (prefers-color-scheme: dark) {
 		filter: brightness(0) invert(1);
+		&:hover {
+			filter: grayscale(0) contrast(1);
+		}
 	}
 
 	&:hover {
 		opacity: 1;
+		filter: none;
 	}
 
 	a {
@@ -37,7 +49,7 @@
 		background: none !important;
 	}
 
-	& + .sponsorItem {
-		margin-left: 3rem;
-	}
+	// & + .sponsorItem {
+	// 	margin-left: 3rem;
+	// }
 }