Improve mobile styles in HowItWorks

Author: hasparus

next.config.js

@@ -3,9 +3,10 @@
 import nextra from "nextra"
 import path from "node:path"
 import withLess from "next-with-less"
-import { remarkGraphiQLComment } from "./src/remark-graphiql-comment.js"
 import fs from "fs"
 
+import { remarkGraphiQLComment } from "./src/remark-graphiql-comment.js"
+
 const vercelJSON = JSON.parse(fs.readFileSync("./vercel.json", "utf-8"))
 
 const withNextra = nextra({

pnpm-lock.yaml

@@ -13,7 +13,7 @@ export function HowItWorks() {
         How it works
       </span>
       <h2 className="typography-h2 mb-6 lg:mb-16">A GraphQL Query</h2>
-      <ol className="list-none">
+      <ol className="gql-radial-gradient list-none gap-px max-md:bg-gradient-to-r max-md:from-transparent max-md:via-neu-400 max-md:to-transparent lg:grid lg:grid-cols-3">
         <ListItem text="Describe your data" code={<CodeA />} />
         <ListItem text="Ask for what you want" code={<CodeB />} />
         <ListItem text="Get predictable results" code={<CodeC />} />
@@ -34,9 +34,13 @@ function ListItem({
   code: React.ReactNode
 }) {
   return (
-    <li className="typography-body-md pt-4 [counter-increment:list-item] before:typography-body-sm before:mr-2 before:inline-flex before:size-5 before:translate-y-[-0.5px] before:items-center before:justify-center before:bg-neu-200 before:p-1 before:text-neu-800 before:content-[counter(list-item)] lg:pt-6">
-      {text}
-      <div className="mt-4 lg:mt-6">{code}</div>
+    <li className="[counter-increment:list-item]">
+      <div className="typography-body-md bg-neu-0 py-4 before:typography-body-sm before:mr-2 before:inline-flex before:size-5 before:translate-y-[-0.5px] before:items-center before:justify-center before:bg-neu-200 before:p-1 before:text-neu-800 before:content-[counter(list-item)] md:py-6 md:before:ml-6">
+        {text}
+      </div>
+      <div className="mt-px bg-neu-0 md:pl-2 md:pt-2 max-md:[&_code>span]:!pl-0 [&_pre]:ring-0">
+        {code}
+      </div>
     </li>
   )
 }

src/components/index-page/how-it-works.tsx

@@ -115,7 +115,7 @@ export function TrustedBy() {
       </div>
       <div
         className={clsx(
-          "my-6 grid grid-cols-2 justify-center gap-px md:my-12 md:grid-cols-5 xl:my-16",
+          "gql-radial-gradient my-6 grid grid-cols-2 justify-center gap-px md:my-12 md:grid-cols-5 xl:my-16",
           styles.logos,
         )}
       >

src/components/index-page/trusted-by/index.tsx

@@ -1,13 +1,4 @@
 .logos {
-  background-image: radial-gradient(
-    ellipse at 50% 50%,
-    hsl(var(--color-neu-600)) 0%,
-    transparent 75%
-  );
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-
   & .shopify > svg {
     transition: opacity 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
   }

src/components/index-page/trusted-by/style.module.css

@@ -520,6 +520,17 @@ div[id^="headlessui-menu-items"] {
   --navbar-h: var(--nextra-navbar-height);
 }
 
+.gql-radial-gradient {
+  background-image: radial-gradient(
+    ellipse at 50% 50%,
+    hsl(var(--color-neu-600)) 0%,
+    transparent 75%
+  );
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
 :root {
   --navbar-h: 70px;
 }