From 19aaaa653349ff7efa677f6c9908c036058bba2c Mon Sep 17 00:00:00 2001
From: kevin <kevin@basistheory.com>
Date: Thu, 22 Dec 2022 11:56:58 -0600
Subject: [PATCH] fix: layout fixes/improvements for mobile devices

---
 src/pages/index.module.css | 81 +++++++++++++++++++++++++++--------
 src/pages/index.tsx        | 88 +++++++++++++++++++++-----------------
 2 files changed, 111 insertions(+), 58 deletions(-)

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index a5425424..2d978bec 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,3 +1,11 @@
+:root {
+  --bt-card-text-color: var(--ifm-font-color-base);
+}
+
+[data-theme="dark"] {
+  --bt-card-text-color: var(--ifm-heading-color);
+}
+
 .container {
   width: var(--ifm-container-width);
   margin: 48px auto;
@@ -23,7 +31,8 @@
   align-items: center;
 }
 
-.card-body > div {
+.card-body > a {
+  text-decoration: none;
   font-weight: 600;
   font-size: 16px;
   line-height: 150%;
@@ -33,6 +42,7 @@
 
 .card-body p {
   margin: 0;
+  color: var(--bt-card-text-color);
 }
 
 .quickstarts {
@@ -41,7 +51,7 @@
   font-weight: 600;
   font-size: 16px;
   line-height: 150%;
-  color: var(--ifm-heading-color);
+  color: var(--bt-card-text-color);
 }
 
 .quickstarts-container {
@@ -69,7 +79,7 @@
 
 .quickstart {
   border-radius: 8px;
-  padding: 10px 20px 10px 15px;
+  padding: 6px 12px 6px 12px;
 }
 
 .quickstart * {
@@ -95,7 +105,7 @@
 
 .explore-cards {
   display: flex;
-  gap: 24px;
+  gap: 16px;
   flex-flow: row wrap;
 }
 
@@ -104,35 +114,70 @@
 }
 
 @media only screen and (max-width: 600px) {
-  .quickstarts-container {
+  .quickstart {
+    width: 100% !important;
+  }
+}
+
+@media only screen and (max-width: 770px) {
+  .card {
+    align-items: flex-start;
+    padding: inherit;
+  }
+
+  .card-body {
+    padding: 24px;
     flex-direction: column;
+    align-items: flex-start;
   }
-  .quickstarts-container > div {
-    width: 100%;
+
+  .card-body img {
+    margin-right: 16px;
+    width: 56px;
   }
 
-  .quickstart {
-    flex: auto !important;
-    width: 100%;
-    padding: 10px 20px 10px 20px;
+  .card-body div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
   }
 
-  .quickstart div:not(:has(svg)) {
+  .card-body a:not(:first-child) {
+    margin-top: 24px;
+  }
+
+  .arrow {
     display: none;
   }
-  .quickstart div:has(svg),
-  .quickstart div:has(img) {
-    display: contents;
+}
+
+@media only screen and (max-width: 800px) {
+  .quickstarts-container {
+    flex-direction: column;
   }
 
-  .quickstart div:has(svg) {
+  .quickstart-column {
+    gap: 16px;
+  }
+
+  .quickstart-column > div {
+    flex: 0 0;
+    flex-flow: row nowrap;
+  }
+  .quickstart div:has(svg),
+  .quickstart div:has(img) {
     margin: 0px;
+    margin-right: 8px;
   }
 
   .quickstart svg,
   .quickstart img {
-    height: 100px;
-    width: 100px;
+    height: 42px;
+    width: 42px;
+  }
+
+  .explore-cards > div {
+    flex: 1 1 auto;
   }
 }
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 121cb0e0..87672169 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -15,7 +15,7 @@ import Info from "@site/static/img/homepage/info.svg";
 import Package from "@site/static/img/homepage/package.svg";
 import Question from "@site/static/img/homepage/question.svg";
 import Star from "@site/static/img/homepage/star.svg";
-import Arrow from "@site/static/img/homepage/arrow.svg";
+import Arrow from "@site/static/img/homepage/Arrow.svg";
 
 import Android from "@site/static/img/sdk/logos/android.svg";
 import DotNet from "@site/static/img/sdk/logos/dotnet.svg";
@@ -39,8 +39,8 @@ export default function Home(): JSX.Element {
           </p>
           <Card className={styles.card}>
             <div className={styles["card-body"]}>
-              <div>
-                <Link to="/docs/">
+              <Link to="/docs/">
+                <div>
                   <ThemedImage
                     sources={{
                       light: useBaseUrl(
@@ -51,58 +51,57 @@ export default function Home(): JSX.Element {
                       ),
                     }}
                   />
-                </Link>
-                <p>Get Started</p>
-              </div>
-              <Arrow />
-              <div>
-                <Link to="/docs/guides/collect/">
+                  <p>Get Started</p>
+                </div>
+              </Link>
+              <Arrow className={styles.arrow} />
+              <Link to="/docs/guides/collect/">
+                <div>
                   <ThemedImage
                     sources={{
                       light: useBaseUrl("/img/homepage/light/collect-data.svg"),
                       dark: useBaseUrl("/img/homepage/dark/collect-data.svg"),
                     }}
                   />
-                </Link>
-                <p>Collect Data</p>
-              </div>
-
-              <Arrow />
-              <div>
-                <Link to="/docs/guides/share/">
+                  <p>Collect Data</p>
+                </div>
+              </Link>
+              <Arrow className={styles.arrow} />
+              <Link to="/docs/guides/share/">
+                <div>
                   <ThemedImage
                     sources={{
                       light: useBaseUrl("/img/homepage/light/share-data.svg"),
                       dark: useBaseUrl("/img/homepage/dark/share-data.svg"),
                     }}
                   />
-                </Link>
-                <p>Share Data</p>
-              </div>
-              <Arrow />
-              <div>
-                <Link to="/docs/guides/process/">
+                  <p>Share Data</p>
+                </div>
+              </Link>
+              <Arrow className={styles.arrow} />
+              <Link to="/docs/guides/process/">
+                <div>
                   <ThemedImage
                     sources={{
                       light: useBaseUrl("/img/homepage/light/process-data.svg"),
                       dark: useBaseUrl("/img/homepage/dark/process-data.svg"),
                     }}
                   />
-                </Link>
-                <p>Process Data</p>
-              </div>
-              <Arrow />
-              <div>
-                <Link to="/docs/guides/govern/">
+                  <p>Process Data</p>
+                </div>
+              </Link>
+              <Arrow className={styles.arrow} />
+              <Link to="/docs/guides/govern/">
+                <div>
                   <ThemedImage
                     sources={{
                       light: useBaseUrl("/img/homepage/light/govern-data.svg"),
                       dark: useBaseUrl("/img/homepage/dark/govern-data.svg"),
                     }}
                   />
-                </Link>
-                <p>Govern Data</p>
-              </div>
+                  <p>Govern Data</p>
+                </div>
+              </Link>
             </div>
           </Card>
         </header>
@@ -118,10 +117,10 @@ export default function Home(): JSX.Element {
               >
                 Securely collect data in your web browser.
               </Card>
-              <Card 
-                href="/docs/guides/collect/collect-data-from-web" 
-                img={<Collect />} 
-                heading="Collect Inbound Data to API" 
+              <Card
+                href="/docs/guides/collect/collect-data-from-web"
+                img={<Collect />}
+                heading="Collect Inbound Data to API"
                 column
               >
                 Tokenize sensitive data before it touches your API.
@@ -231,10 +230,12 @@ export default function Home(): JSX.Element {
                 heading="API Reference"
                 column
               >
-                API endpoints to manage the full lifecycle of your data and Basis Theory instance.
+                API endpoints to manage the full lifecycle of your data and
+                Basis Theory instance.
               </Card>
               <Card href="/docs/sdks/" img={<Package />} heading="SDKs" column>
-                Libraries and tools for interacting with your Basis Theory integration.
+                Libraries and tools for interacting with your Basis Theory
+                integration.
               </Card>
               <Card
                 href="/docs/concepts/"
@@ -250,10 +251,17 @@ export default function Home(): JSX.Element {
                 heading="Blueprints"
                 column
               >
-                Explore end-to-end guides for your regulatory and compliance use cases.
+                Explore end-to-end guides for your regulatory and compliance use
+                cases.
               </Card>
-              <Card href="https://support.basistheory.com/" img={<Question />} heading="Support" column>
-                Have a question or problem with your integration? Reach out to get support from one of our engineers.
+              <Card
+                href="https://support.basistheory.com/"
+                img={<Question />}
+                heading="Support"
+                column
+              >
+                Have a question or problem with your integration? Reach out to
+                get support from one of our engineers.
               </Card>
             </div>
           </div>