From af8fadb940467f6bb80a3cd44d961c58303ed239 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Thu, 23 Oct 2025 13:23:09 -0400 Subject: [PATCH 1/4] RWD layout hero --- .../LayoutHero/LayoutHero.module.css | 30 ++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/src/components/LayoutHero/LayoutHero.module.css b/src/components/LayoutHero/LayoutHero.module.css index 56f1b8ce711..c915276fe1b 100644 --- a/src/components/LayoutHero/LayoutHero.module.css +++ b/src/components/LayoutHero/LayoutHero.module.css @@ -46,7 +46,7 @@ .heroButtons { display: flex; - flex-wrap: wrap; + gap: var(--space-4x); margin-top: var(--space-8x); } @@ -62,3 +62,31 @@ max-width: 100%; height: auto; } + +/* lesser values cause overlapping of elements */ +@media screen and (max-width: 1400px) { + .layoutHero { + border: none; + background-color: transparent; + } + .heroImage, + .heroBackgroundImg { + display: none; + } + + .heroContent { + padding-left: 0; + } + + .heroButtons { + margin-top: var(--space-6x); + } + + .heroButtons a { + width: fit-content; + } + + .heroTitle { + font-size: 40px; + } +} From cb4a637f51ed1ff01268bbceb1bf262084a59c59 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Thu, 23 Oct 2025 14:07:14 -0400 Subject: [PATCH 2/4] RWD cards and tutorials --- src/components/Cards/cards.module.css | 1 + .../LayoutHero/LayoutHero.module.css | 7 +++ src/components/TabGrid/TabGrid.module.css | 19 +++++++ src/layouts/DocsV3Layout/DocsV3Layout.astro | 6 +++ src/pages/index.astro | 51 ------------------- 5 files changed, 33 insertions(+), 51 deletions(-) diff --git a/src/components/Cards/cards.module.css b/src/components/Cards/cards.module.css index ea602f47b0b..8c37b12f8e7 100644 --- a/src/components/Cards/cards.module.css +++ b/src/components/Cards/cards.module.css @@ -62,5 +62,6 @@ @media screen and (max-width: 425px) { .cardsWrapper { grid-template-columns: repeat(1, 1fr) !important; + margin-top: 0; } } diff --git a/src/components/LayoutHero/LayoutHero.module.css b/src/components/LayoutHero/LayoutHero.module.css index c915276fe1b..08edb61ed40 100644 --- a/src/components/LayoutHero/LayoutHero.module.css +++ b/src/components/LayoutHero/LayoutHero.module.css @@ -63,6 +63,13 @@ height: auto; } +@media screen and (max-width: 425px) { + .layoutHero { + height: auto; + padding: var(--space-8x) 0; + } +} + /* lesser values cause overlapping of elements */ @media screen and (max-width: 1400px) { .layoutHero { diff --git a/src/components/TabGrid/TabGrid.module.css b/src/components/TabGrid/TabGrid.module.css index 8b0df827fee..eef7e3750a9 100644 --- a/src/components/TabGrid/TabGrid.module.css +++ b/src/components/TabGrid/TabGrid.module.css @@ -4,6 +4,7 @@ .grid { display: grid; border-left: 1px solid var(--border); + margin: 36px 0; } .gridHeader { @@ -60,4 +61,22 @@ .grid { grid-template-columns: 1fr !important; } + + .gridHeader > h2 { + font-size: 28px; + } +} + +@media screen and (max-width: 425px) { + .gridSection { + margin-top: 0; + } +} + +@media screen and (max-width: 390px) { + .gridHeader { + flex-direction: column; + align-items: start; + gap: var(--space-2x); + } } diff --git a/src/layouts/DocsV3Layout/DocsV3Layout.astro b/src/layouts/DocsV3Layout/DocsV3Layout.astro index 3e752a738af..05aa3478a5e 100644 --- a/src/layouts/DocsV3Layout/DocsV3Layout.astro +++ b/src/layouts/DocsV3Layout/DocsV3Layout.astro @@ -76,6 +76,12 @@ const includeLinkToWalletScript = !!Astro.props.frontmatter.metadata?.linkToWall min-width: 0; } + @media screen and (max-width: 768px) { + #grid-main { + padding: 0 var(--space-12x) var(--doc-padding) var(--space-12x); + } + } + @media (min-width: 50em) { main { display: grid; diff --git a/src/pages/index.astro b/src/pages/index.astro index 0c9d1812721..3cdc6ebef20 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,59 +3,8 @@ import ProductTabs from "../features/landing/sections/ProductTabs.astro" import BaseLayout from "~/layouts/BaseLayout.astro" import * as CONFIG from "../config" -import CardsWrapper from "~/components/Cards/CardsWrapper.astro" -import type { ICard } from "~/components/Cards/types" const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}` - -const sample: ICard[] = [ - { - title: "Deploy/enable a token across multiple chains", - description: - "Create a new Cross-Chain-Token or enable an established one that can be launched on 50+ chains, providing unparalleled interoperability and reach.", - links: [ - { - icon: "token", - href: "https://example.com", - label: "View Token Manager", - }, - { - icon: "remix", - href: "https://example.com", - label: "Open in Remix", - }, - ], - }, - { - title: "Bridge a token", - description: - "Securely transfer tokens - including ETH, USDC, LINK - and messages between different blockchain networks.", - links: [ - { - icon: "token", - href: "https://example.com", - label: "View Token Manager", - }, - { - icon: "remix", - href: "https://example.com", - label: "Open in Remix", - }, - ], - }, - { - title: "Send a token with data", - description: - "Build token transfers that do more than move value, letting you embed business logic directly into your cross-chain workflows.", - links: [ - { - icon: "remix", - href: "https://example.com", - label: "Open in Remix", - }, - ], - }, -] --- From ceae80e823cdb6e61e544716e09729460ae760f0 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Mon, 27 Oct 2025 13:09:01 -0400 Subject: [PATCH 3/4] improve mobile spacing --- src/components/Cards/cards.module.css | 1 - src/components/OverviewWrapper.astro | 20 ++++++++++++++++ .../QuickLinkCard/QuickLinkCard.module.css | 3 --- .../Resource/ResourceSection.module.css | 7 +++++- src/components/TabGrid/TabGrid.module.css | 9 +++---- .../toolsUtilities.module.css | 9 ++++--- src/content/ccip/index.mdx | 24 ++++++++++--------- 7 files changed, 50 insertions(+), 23 deletions(-) create mode 100644 src/components/OverviewWrapper.astro diff --git a/src/components/Cards/cards.module.css b/src/components/Cards/cards.module.css index 8c37b12f8e7..8653a19564e 100644 --- a/src/components/Cards/cards.module.css +++ b/src/components/Cards/cards.module.css @@ -3,7 +3,6 @@ grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--border); border-top: 1px solid var(--border); - margin: 56px 0; } .cardsWrapper h6 { diff --git a/src/components/OverviewWrapper.astro b/src/components/OverviewWrapper.astro new file mode 100644 index 00000000000..e3eaef0fa90 --- /dev/null +++ b/src/components/OverviewWrapper.astro @@ -0,0 +1,20 @@ +
+ +
+ + diff --git a/src/components/QuickLinkCard/QuickLinkCard.module.css b/src/components/QuickLinkCard/QuickLinkCard.module.css index cfb8562b389..f514f3a06a0 100644 --- a/src/components/QuickLinkCard/QuickLinkCard.module.css +++ b/src/components/QuickLinkCard/QuickLinkCard.module.css @@ -1,6 +1,3 @@ -.container { - margin: var(--space-6x) 0; -} .srOnly { position: absolute; width: 1px; diff --git a/src/components/Resource/ResourceSection.module.css b/src/components/Resource/ResourceSection.module.css index 13896ba6e6c..434df633c45 100644 --- a/src/components/Resource/ResourceSection.module.css +++ b/src/components/Resource/ResourceSection.module.css @@ -2,5 +2,10 @@ display: flex; flex-direction: column; gap: var(--space-8x); - margin: 56px 0; +} + +@media screen and (max-width: 425px) { + .section { + gap: var(--space-6x); + } } diff --git a/src/components/TabGrid/TabGrid.module.css b/src/components/TabGrid/TabGrid.module.css index eef7e3750a9..74b4e30a4aa 100644 --- a/src/components/TabGrid/TabGrid.module.css +++ b/src/components/TabGrid/TabGrid.module.css @@ -1,10 +1,7 @@ -.tabGridWrapper { - margin: 56px 0; -} .grid { display: grid; border-left: 1px solid var(--border); - margin: 36px 0; + margin-top: 36px 0; } .gridHeader { @@ -71,6 +68,10 @@ .gridSection { margin-top: 0; } + + .gridHeader { + margin-bottom: var(--space-6x); + } } @media screen and (max-width: 390px) { diff --git a/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css b/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css index 88bdd481d95..c1e36191486 100644 --- a/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css +++ b/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css @@ -1,6 +1,3 @@ -.wrapper { - margin: 56px 0; -} .container { display: grid; grid-template-columns: repeat(3, 1fr); @@ -55,3 +52,9 @@ grid-template-columns: repeat(1, 1fr); } } + +@media screen and (max-width: 425px) { + .container { + margin-top: var(--space-6x); + } +} diff --git a/src/content/ccip/index.mdx b/src/content/ccip/index.mdx index da23f249706..8982eb282a1 100644 --- a/src/content/ccip/index.mdx +++ b/src/content/ccip/index.mdx @@ -19,6 +19,7 @@ import QuickLinkCard from "@components/QuickLinkCard/QuickLinkCard.astro" import ToolsUtilitiesGrid from "@components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro" import MediaSection from "@components/MediaSection/MediaSection.astro" import CardsWrapper from "@components/Cards/CardsWrapper.astro" +import OverviewWrapper from "@components/OverviewWrapper.astro" import { SvgEyeOptic, SvgTransactionRepeatRecurring, @@ -293,14 +294,15 @@ export const cardLinks = [ image="/images/ccip/ccip-hero.png" /> - - - - - - - + + + + + + + + From 925d50518a34cb810b7a0d57d7a6ce5df2be2484 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Tue, 28 Oct 2025 12:13:46 -0400 Subject: [PATCH 4/4] fix tab trigger jump --- src/components/Cards/cards.module.css | 2 +- src/components/TabGrid/TabGrid.module.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Cards/cards.module.css b/src/components/Cards/cards.module.css index 8653a19564e..db4e076ab55 100644 --- a/src/components/Cards/cards.module.css +++ b/src/components/Cards/cards.module.css @@ -58,7 +58,7 @@ } } -@media screen and (max-width: 425px) { +@media screen and (max-width: 600px) { .cardsWrapper { grid-template-columns: repeat(1, 1fr) !important; margin-top: 0; diff --git a/src/components/TabGrid/TabGrid.module.css b/src/components/TabGrid/TabGrid.module.css index 74b4e30a4aa..86fcc0aaa87 100644 --- a/src/components/TabGrid/TabGrid.module.css +++ b/src/components/TabGrid/TabGrid.module.css @@ -28,6 +28,7 @@ .tabsTrigger[data-state="active"] { background-color: var(--pill-active); border-color: var(--pill-active); + border-bottom: 1px solid var(--pill-active); & h3 { color: var(--pill-active-foreground);