Mess with styles

Author: benjie

src/components/Layout/index.scss

@@ -1124,11 +1124,90 @@ svg.MarketingDivide {
 // Sponsor Page
 
 .tier-row {
+  background-color: white;
+  padding: 2rem 1rem;
+  border-radius: 12px;
+  border: 4px solid #1b1b3d;
+  color: #1b3955;
+}
+
+.tier-item-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: stretch;
+}
+
+.tier-break {
+  width: 1px;
+  background-color: #777;
+  align-self: stretch;
 }
 
+.tier {
+  display: flex;
+  flex-direction: column;
+  justify-items: space-between;
+  align-content: flex-start;
+  flex: 1 0 0;
+}
+.tier h3, .tier .price-line {
+  text-align: center;
+}
+.tier .tc .button--solid {
+  width: 100%;
+}
+.tier h3:first-child {
+  padding-top: 0;
+  margin-top: 0;
+}
+.tier ul:last-child {
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
 .tier {
 }
 
 .tier a {
   color: #4a68b4;
 }
+
+.tier.highlight {
+  h3 {
+    color: red;
+  }
+  a {
+    color: red;
+    &:hover {
+      color: red;
+    }
+    &:visited {
+      color: red;
+    }
+  }
+  .tc .button--solid {
+    background-color: red;
+    border-color: red;
+  }
+}
+
+@media screen and (max-width: 64rem) {
+  .tier-row {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+  }
+  .tier-item-container {
+    display: block;
+    gap: 0;
+  }
+  .tier {
+    background-color: white;
+    padding: 1rem 1rem;
+    border-radius: 12px;
+    border: 4px solid #1b1b3d;
+    color: #1b3955;
+    margin: 1rem 0;
+  }
+
+}

src/components/MarketingTier.js

@@ -2,46 +2,27 @@ import React from "react";
 
 export default function MarketingTiers({ children }) {
   return (
-    <div
-      className="tier-row"
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        gap: "1rem",
-        alignItems: "stretch",
-      }}
-    >
-      {children}
+    <div className="tier-row">
+      <div className="tier-item-container">
+        {children.flatMap((c, i) =>
+          i === 0 ? [c] : [<div className="tier-break" />, c]
+        )}
+      </div>
     </div>
   );
 }
 
 export class Tier extends React.Component {
   render() {
-    const { name, price, tagline, href, description } = this.props;
+    const { name, price, tagline, href, description, highlight } = this.props;
 
     return (
-      <div
-        className="tier"
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyItems: "space-between",
-          alignContent: "flex-start",
-          backgroundColor: "white",
-          margin: "0.5em",
-          padding: "1rem",
-          borderRadius: "12px",
-          border: "4px solid #1b1b3d",
-          color: "#1b3955",
-          flex: "0 0 33%",
-        }}
-      >
+      <div className={`tier ${highlight ? "highlight" : ""}`}>
         <h3>{name}</h3>
-        <span>
+        <div className="price-line">
           <span style={{ fontSize: "1.5rem" }}>{price}</span>{" "}
           <span style={{ fontSize: "0.8rem" }}>/month</span>
-        </span>
+        </div>
         <div className="tc">
           <a className="button--solid" href={href}>
             Join on GitHub Sponsors{" "}

src/pages/sponsor.mdx

@@ -250,6 +250,7 @@ with more benefits.
   />
   <Tier 
     name="Production Sponsor" 
+    highlight
     price="$100" 
     tagline="Support sustainability"
     href="https://github.com/sponsors/benjie/sponsorships?tier_id=368"