chore(website): Improve design of sponsored section (#3577)

* fix(sponsors): Work around `tier` being `null` * format * fix(sponsors): Update octokit, fix null * chore(website): Improve design of sponsored section * format
cheeriojs · Jan 2, 2024 · 6618279 · 6618279
1 parent 3244bfa
commit 6618279
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 37 deletions.
diff --git a/website/src/components/HomepageSponsors.module.css b/website/src/components/HomepageSponsors.module.css
@@ -0,0 +1,21 @@
+.emphasis {
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.you {
+  border: 1px solid var(--ifm-color-emphasis-400);
+  border-radius: 10px;
+  color: var(--ifm-font-color-base);
+  transition:
+    border 0.2s ease-in-out,
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+}
+
+.you:hover {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  background-color: var(--ifm-color-info-lightest);
+  color: var(--ifm-font-color-base);
+  box-shadow: 0 0 0.5rem 0 rgba(150, 0, 0, 0.2);
+}
diff --git a/website/src/components/HomepageSponsors.tsx b/website/src/components/HomepageSponsors.tsx
@@ -1,48 +1,49 @@
 import React from 'react';
 import HeartSvg from '@site/static/img/1F496.svg';
+import styles from './HomepageSponsors.module.css';
 
 import Sponsors from '../../sponsors.json';
 
 export function HeadlineSponsors() {
   return (
-    <div className="container">
-      <h2 className="text--center">Supported and Backed by</h2>
-      <div className="container row" style={{ justifyContent: 'space-evenly' }}>
-        {Sponsors.headliner.map((sponsor) => (
-          <div className="col col--2 avatar row row--align-center margin-top--sm">
-            <a
-              className="avatar__photo-link avatar__photo avatar__photo--lg"
-              style={{ borderRadius: '10px' }}
-              href={sponsor.url}
-              key={sponsor.name}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <img src={sponsor.image} alt={`${sponsor.name} logo`} />
-            </a>
+    <div className={`padding-vert--lg margin-vert--lg ${styles.emphasis}`}>
+      <div className="container">
+        <h2 className="text--center">Supported and Backed by</h2>
+        <div
+          className="container row"
+          style={{ justifyContent: 'space-evenly' }}
+        >
+          {Sponsors.headliner.map((sponsor) => (
+            <div className="col col--2 avatar row row--align-center margin-top--sm">
+              <a
+                className="avatar__photo-link avatar__photo avatar__photo--lg"
+                style={{ borderRadius: '10px' }}
+                href={sponsor.url}
+                key={sponsor.name}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={sponsor.image} alt={`${sponsor.name} logo`} />
+              </a>
 
-            <div className="avatar__intro">
-              <div className="avatar__name">{sponsor.name}</div>
+              <div className="avatar__intro">
+                <div className="avatar__name">{sponsor.name}</div>
+              </div>
             </div>
-          </div>
-        ))}
-        <a
-          className="col col--2 avatar row padding--md margin-top--sm"
-          style={{
-            border: '1px solid #eaecef',
-            borderRadius: '10px',
-            color: 'var(--ifm-font-color-base)',
-          }}
-          href="https://github.com/sponsors/cheeriojs"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <HeartSvg className="avatar__photo-link avatar__photo avatar__photo--lg" />
+          ))}
+          <a
+            className={`col col--2 avatar row padding--md margin-top--sm ${styles.you}`}
+            href="https://github.com/sponsors/cheeriojs"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <HeartSvg className="avatar__photo-link avatar__photo avatar__photo--lg" />
 
-          <div className="avatar__intro">
-            <div className="avatar__name">…and you?</div>
-          </div>
-        </a>
+            <div className="avatar__intro">
+              <div className="avatar__name">…and you?</div>
+            </div>
+          </a>
+        </div>
       </div>
     </div>
   );

diff --git a/website/src/components/HomepageTweets.tsx b/website/src/components/HomepageTweets.tsx
@@ -163,7 +163,7 @@ function Tweet({ id, name, user, date, tweet }: TweetItem) {
 
 export function HomepageTweets() {
   return (
-    <div className="container padding-vert--xl">
+    <div className="container padding-bottom--xl">
       <h2 className="text--center">What Our Users Say</h2>
       <div className="row">
         {TweetList.map((props) => (

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -31,7 +31,6 @@ export default function Home(): JSX.Element {
     >
       <HomepageHeader />
       <HomepageFeatures />
-      <hr className="margin-vert--xl" />
       <HeadlineSponsors />
       <HomepageTweets />
     </Layout>