Skip to content

Commit

Permalink
fix: layout fixes/improvements for mobile devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinperaza
kevinperaza committed Dec 22, 2022
1 parent 21538ca commit 19aaaa6
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 58 deletions.
81 changes: 63 additions & 18 deletions src/pages/index.module.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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%;
Expand All @@ -33,6 +42,7 @@

.card-body p {
margin: 0;
color: var(--bt-card-text-color);
}

.quickstarts {
Expand All @@ -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 {
Expand Down Expand Up @@ -69,7 +79,7 @@

.quickstart {
border-radius: 8px;
padding: 10px 20px 10px 15px;
padding: 6px 12px 6px 12px;
}

.quickstart * {
Expand All @@ -95,7 +105,7 @@

.explore-cards {
display: flex;
gap: 24px;
gap: 16px;
flex-flow: row wrap;
}

Expand All @@ -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;
}
}

Expand Down
88 changes: 48 additions & 40 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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(
Expand All @@ -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>
Expand All @@ -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.
Expand Down Expand Up @@ -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/"
Expand All @@ -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>
Expand Down

0 comments on commit 19aaaa6

Please sign in to comment.