Finish initial styling to match crystal websites

Author: jemgillam

website/src/components/Sponsor/index.js

@@ -25,6 +25,16 @@ export default function Sponsor({
     );
   }
 
+  function LinkTo({ href }) {
+    return href ? (
+      <Link className={styles.name} to={href}>
+        {name}
+      </Link>
+    ) : (
+      <div className={styles.name}>{name}</div>
+    );
+  }
+
   return (
     <div
       className={clsx(
@@ -40,12 +50,7 @@ export default function Sponsor({
         <Avatar src={avatar ? "https://www.graphile.org" + avatar : null} />
       ) : null}
 
-      <Link
-        className={styles.name}
-        to={href ?? "https://www.graphile.org/sponsor"}
-      >
-        {name}
-      </Link>
+      <LinkTo href={href} />
     </div>
   );
 }

website/src/components/Sponsor/styles.module.css

@@ -7,7 +7,11 @@
   margin: 0.5rem;
   padding: 1rem;
   flex: 0 0 18rem;
-  font-size: 1.5rem;
+  font-size: 1.2rem;
+}
+
+.leaders {
+  flex: 0 0 12rem;
 }
 
 .featured,
@@ -23,8 +27,8 @@
 }
 
 .leaders .name {
-  font-size: 1.24rem;
-  padding-top: 1rem;
+  font-size: 1.2rem;
+  padding-top: 0.8rem;
 }
 .name {
   color: var(--ifm-color-primary-darker);
@@ -70,3 +74,23 @@
   border-radius: inherit;
   border: inherit;
 }
+
+.backers:last-child {
+  display: none;
+}
+
+.backers:first-child {
+  display: flex;
+}
+
+@media screen and (max-width: 995px) {
+  .leaders {
+    display: none;
+  }
+  .backers:first-child {
+    display: none;
+  }
+  .backers:last-child {
+    display: flex;
+  }
+}

website/src/pages/sponsors.mdx

@@ -31,12 +31,12 @@ to fund ongoing development on Graphile Worker through sponsorship. THANK YOU!
 </Sponsors>
 <Sponsors level="leaders">
   <Sponsor name="Robert Claypool" />
+  <Sponsor name="nigelrmtaylor" />
   <Sponsor
     name="Principia Mentis"
     avatar="/images/sponsors/principiamentis.png"
     business
   />
-  <Sponsor name="nigelrmtaylor" />
   <Sponsor
     name="Trigger.dev"
     avatar="/images/sponsors/triggerdev.png"
@@ -50,15 +50,15 @@ to fund ongoing development on Graphile Worker through sponsorship. THANK YOU!
     href="https://www.bairesdev.com/sponsoring-open-source-projects/"
     business
   />
-  <Sponsor name="Cintra" avatar="/images/sponsors/cintra.svg" business />
   <Sponsor
     name="Two Bit Solutions"
     avatar="/images/sponsors/two-bits.svg"
     business
   />
+  <Sponsor name="Apollo" avatar="/images/sponsors/apollo.png" business />
   <Sponsor name="Dimply" avatar="/images/sponsors/dimply.svg" business />
   <Sponsor name="Ndustrial" avatar="/images/sponsors/ndustrial.png" business />
-  <Sponsor name="Apollo" avatar="/images/sponsors/apollo.png" business />
+  <Sponsor name="Cintra" avatar="/images/sponsors/cintra.svg" business />
   <Sponsor name="Beacon" avatar="/images/sponsors/beaconbio.jpg" business />
   <Sponsor
     name="deliver.media"
@@ -71,6 +71,7 @@ to fund ongoing development on Graphile Worker through sponsorship. THANK YOU!
 </Sponsors>
 <Sponsors level="backers">
   <Sponsor name="plus 67 more backers..." plain />
+  <Sponsor name="plus 84 more backers..." plain />
 </Sponsors>
 
 <!-- SPONSORS_END -->