From 97c302822a439f487a6f0ffd300e01d7f55552c2 Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Tue, 25 Nov 2025 17:29:58 -0800 Subject: [PATCH 1/6] adding folder structure, cleaning up font, add readme for page grid --- .../js/7-send-xrp/view/template.html | 2 +- .../8-domain-verification/view/template.html | 2 +- about/index.page.tsx | 2 +- about/xrp.page.tsx | 16 +- .../build-a-desktop-wallet-in-javascript.md | 2 +- docs/use-cases/payments/index.page.tsx | 2 +- docs/use-cases/tokenization/index.page.tsx | 4 +- index.page.tsx | 2 +- shared/components/Buttons/buttons.md | 0 shared/components/Buttons/buttons.tsx | 0 shared/components/PageGrid/page-grid.md | 277 ++++++++++++++++++ .../components/{ => PageGrid}/page-grid.tsx | 0 styles/_font.scss | 48 --- 13 files changed, 293 insertions(+), 64 deletions(-) create mode 100644 shared/components/Buttons/buttons.md create mode 100644 shared/components/Buttons/buttons.tsx create mode 100644 shared/components/PageGrid/page-grid.md rename shared/components/{ => PageGrid}/page-grid.tsx (100%) diff --git a/_code-samples/build-a-desktop-wallet/js/7-send-xrp/view/template.html b/_code-samples/build-a-desktop-wallet/js/7-send-xrp/view/template.html index b4af6637aa..5bbe7b1ce5 100644 --- a/_code-samples/build-a-desktop-wallet/js/7-send-xrp/view/template.html +++ b/_code-samples/build-a-desktop-wallet/js/7-send-xrp/view/template.html @@ -92,7 +92,7 @@
-

Send XRP

+

Send XRP

diff --git a/_code-samples/build-a-desktop-wallet/js/8-domain-verification/view/template.html b/_code-samples/build-a-desktop-wallet/js/8-domain-verification/view/template.html index 0e33077ae7..908a7393ca 100644 --- a/_code-samples/build-a-desktop-wallet/js/8-domain-verification/view/template.html +++ b/_code-samples/build-a-desktop-wallet/js/8-domain-verification/view/template.html @@ -92,7 +92,7 @@
-

Send XRP

+

Send XRP

diff --git a/about/index.page.tsx b/about/index.page.tsx index aeefaee8ea..f031e61fdb 100644 --- a/about/index.page.tsx +++ b/about/index.page.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { useThemeHooks } from '@redocly/theme/core/hooks'; import { Link } from '@redocly/theme/components/Link/Link'; -import { PageGrid, PageGridCol, PageGridRow } from "shared/components/page-grid"; +import { PageGrid, PageGridCol, PageGridRow } from "shared/components/PageGrid/page-grid"; export const frontmatter = { seo: { diff --git a/about/xrp.page.tsx b/about/xrp.page.tsx index 7782b3bf1f..8ed4b6427d 100644 --- a/about/xrp.page.tsx +++ b/about/xrp.page.tsx @@ -229,7 +229,7 @@ export default function XrpOverview() { className="mw-100 mb-2 invertible-img" src={briefcaseIcon} /> -
+
{translate("Financial Institutions")}

@@ -244,7 +244,7 @@ export default function XrpOverview() { className="mw-100 mb-2 invertible-img" src={userIcon} /> -

+
{translate("Individual Consumers")}

@@ -361,7 +361,7 @@ export default function XrpOverview() {

  • -
    {translate("Software Wallets")}
    +
    {translate("Software Wallets")}
    • {softwallets.map((wallet) => (
  • @@ -381,7 +381,7 @@ export default function XrpOverview() {
    • ))}
  • -
    {translate("Hardware Wallets")}
    +
    {translate("Hardware Wallets")}
    • {hardwallets.map((wallet) => (
  • @@ -423,7 +423,7 @@ export default function XrpOverview() {

    -
    {translate("Spot Exchanges")}
    +
    {translate("Spot Exchanges")}

    {translate( "Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates." @@ -431,7 +431,7 @@ export default function XrpOverview() {

    -
    +
    {translate("Futures, Options and Swap Exchanges")}

    @@ -441,7 +441,7 @@ export default function XrpOverview() {

    -
    +
    {translate("Custodial Exchanges")}

    @@ -451,7 +451,7 @@ export default function XrpOverview() {

    -
    +
    {translate("Non-Custodial Exchanges")}

    diff --git a/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md b/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md index 8be7d40200..e691547992 100644 --- a/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md +++ b/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md @@ -1106,7 +1106,7 @@ const { sendXrp } = require('./library/7_helpers')

    -

    Send XRP

    +

    Send XRP

    diff --git a/docs/use-cases/payments/index.page.tsx b/docs/use-cases/payments/index.page.tsx index 34fce078b5..5b7fcdc704 100644 --- a/docs/use-cases/payments/index.page.tsx +++ b/docs/use-cases/payments/index.page.tsx @@ -221,7 +221,7 @@ const PaymentsPage: React.FC = () => {
    -
    +
    {translate("Payments")}

    diff --git a/docs/use-cases/tokenization/index.page.tsx b/docs/use-cases/tokenization/index.page.tsx index 915f8b375b..fa91fe47aa 100644 --- a/docs/use-cases/tokenization/index.page.tsx +++ b/docs/use-cases/tokenization/index.page.tsx @@ -199,7 +199,7 @@ export default function Tokenization() { "Work with a variety of tokens supported by the XRP Ledger." )}

    -
    +
    {translate("Tokenization")}
    @@ -273,7 +273,7 @@ export default function Tokenization() { target="_blank" href={article.url} > -
    +
    {translate(article.time)}
    {translate(article.title)}
    diff --git a/index.page.tsx b/index.page.tsx index 5bbb5116fe..eb243ab08c 100644 --- a/index.page.tsx +++ b/index.page.tsx @@ -1,7 +1,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks'; import { Link } from '@redocly/theme/components/Link/Link'; import { BenefitsSection } from 'shared/components/benefits-section'; -import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/page-grid'; +import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/PageGrid/page-grid'; export const frontmatter = { seo: { diff --git a/shared/components/Buttons/buttons.md b/shared/components/Buttons/buttons.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/shared/components/Buttons/buttons.tsx b/shared/components/Buttons/buttons.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/shared/components/PageGrid/page-grid.md b/shared/components/PageGrid/page-grid.md new file mode 100644 index 0000000000..0f45fbf23d --- /dev/null +++ b/shared/components/PageGrid/page-grid.md @@ -0,0 +1,277 @@ +# PageGrid Component + +A responsive grid system component for creating flexible layouts with support for multiple breakpoints. + +## Overview + +The PageGrid component provides a flexible grid layout system with three main components: +- `PageGrid` - The container component +- `PageGrid.Row` - Row component for grouping columns +- `PageGrid.Col` - Column component with responsive sizing and offset support + +## Breakpoints + +The grid system supports the following breakpoints: +- `base` - Default/mobile (applies to all sizes) +- `sm` - Small screens +- `md` - Medium screens +- `lg` - Large screens +- `xl` - Extra large screens + +## Basic Usage + +```tsx +import { PageGrid } from '@/shared/components/PageGrid/page-grid'; + +function MyComponent() { + return ( + + + + Column 1 + + + Column 2 + + + + ); +} +``` + +## PageGrid Props + +The root `PageGrid` component accepts all standard HTML div attributes: + +| Prop | Type | Description | +|------|------|-------------| +| `className` | `string` | Additional CSS classes to apply | +| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes | + +## PageGrid.Row Props + +The `PageGrid.Row` component accepts all standard HTML div attributes: + +| Prop | Type | Description | +|------|------|-------------| +| `className` | `string` | Additional CSS classes to apply | +| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes | + +## PageGrid.Col Props + +| Prop | Type | Description | +|------|------|-------------| +| `span` | `number \| "auto" \| "fill" \| ResponsiveValue` | Column span width | +| `offset` | `number \| ResponsiveValue` | Column offset (left margin) | +| `className` | `string` | Additional CSS classes to apply | +| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes | + +### Span Values + +- **Number** (e.g., `1-12`): Fixed column width +- **"auto"**: Column takes up only the space it needs +- **"fill"**: Column fills remaining available space +- **Responsive Object**: Different spans for different breakpoints + +### Offset Values + +- **Number** (e.g., `1-12`): Number of columns to offset +- **Responsive Object**: Different offsets for different breakpoints + +## Examples + +### Fixed Column Widths + +```tsx + + + Sidebar + Main Content + + +``` + +### Auto and Fill + +```tsx + + + Minimal Width + Takes Remaining Space + Another Auto + + +``` + +### Responsive Layout + +Create layouts that adapt to different screen sizes: + +```tsx + + + + Responsive Column + + + +``` + +### Using Offsets + +Center content or create spacing with offsets: + +```tsx + + + {/* Center an 8-column element */} + + Centered Content + + + +``` + +### Responsive Offsets + +```tsx + + + + Content + + + +``` + +### Complex Responsive Layout + +```tsx + + + {/* Hero section */} + +

    Page Title

    +     +     + + + {/* Sidebar - full width on mobile, 1/3 on desktop */} + + + + + {/* Main content - full width on mobile, 2/3 on desktop */} + +
    Main Content
    +     +     +     +``` + +### Multiple Columns with Equal Width + +```tsx + + + Column 1 + Column 2 + Column 3 + Column 4 + + +``` + +### Nested Grids + +```tsx + + + + + + Nested Column 1 + Nested Column 2 + + + + + +``` + +## CSS Classes Generated + +The component generates the following CSS classes: + +### Container +- `xrpl-grid__container` + +### Row +- `xrpl-grid__row` + +### Column Spans +- `xrpl-grid__col-{number}` (e.g., `xrpl-grid__col-6`) +- `xrpl-grid__col-auto` +- `xrpl-grid__col` (for fill) +- `xrpl-grid__col-{breakpoint}-{number}` (e.g., `xrpl-grid__col-md-6`) +- `xrpl-grid__col-{breakpoint}-auto` +- `xrpl-grid__col-{breakpoint}` (for fill) + +### Column Offsets +- `xrpl-grid__offset-{number}` (e.g., `xrpl-grid__offset-2`) +- `xrpl-grid__offset-{breakpoint}-{number}` (e.g., `xrpl-grid__offset-md-2`) + +## TypeScript Types + +```typescript +type PageGridBreakpoint = "base" | "sm" | "md" | "lg" | "xl"; +type ResponsiveValue = T | Partial>; +type PageGridSpanValue = number | "auto" | "fill"; +type PageGridOffsetValue = number; + +interface PageGridColProps { + span?: ResponsiveValue; + offset?: ResponsiveValue; + className?: string; + // ... plus all HTMLDivElement attributes +} +``` + +## Best Practices + +1. **Use semantic HTML**: Wrap content in appropriate semantic elements within columns +2. **Mobile-first**: Start with base/mobile layout and progressively enhance for larger screens +3. **Keep it simple**: Avoid overly complex nested grid structures when possible +4. **Test responsiveness**: Verify layouts work well at all breakpoint transitions +5. **Accessibility**: Ensure grid layouts maintain logical reading order for screen readers + +## Notes + +- The total columns in the grid system is typically 12 (though this depends on your CSS implementation) +- Responsive values cascade - if you don't specify a value for a breakpoint, it inherits from the previous breakpoint +- All components forward refs, allowing you to attach refs to the underlying DOM elements + diff --git a/shared/components/page-grid.tsx b/shared/components/PageGrid/page-grid.tsx similarity index 100% rename from shared/components/page-grid.tsx rename to shared/components/PageGrid/page-grid.tsx diff --git a/styles/_font.scss b/styles/_font.scss index f07ba5b4ef..35a2337d75 100644 --- a/styles/_font.scss +++ b/styles/_font.scss @@ -13,11 +13,6 @@ pre, code { font-variant-ligatures: none; } -// h1, h2, h3, h4, h5, h6, -// .h1, .h2, .h3, .h4, .h5, .h6 { -// font-weight: bold; -// } - .h1, .h2, .h3, .h4, .h5, .h6 { font-family: $font-family-monospace; font-weight: 400; @@ -108,49 +103,6 @@ p { line-height: 24px; } -.fs-base { - font-size: $base-size; -} -.fs-3 { - font-size: 0.75rem; - line-height: 1rem; -} -.fs-4-5 { - font-size: 1.125rem; -} -.fs-5 { - font-size: 1.25rem; -} -.fs-5-5 { - font-size: 1.375rem; -} -.fs-6 { - font-size: 1.5rem; -} -.normal { - font-weight: normal; -} -.bold { - font-weight: bold; -} - -.text-largest { - font-size: 1.5rem; - font-weight: normal; -} -.text-large { - font-size: 1.125rem; -} -.text-small { - font-size: 0.875rem; -} -.text-smaller { - font-size: 0.75rem; -} -.text-smallest { - font-size: 0.625rem; -} - /* STYLIZED LINKS */ .arrow-link { text-decoration: none; From f3ae760c40d9b210f9c5cc7f54f542284bf32e33 Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Tue, 25 Nov 2025 21:30:25 -0800 Subject: [PATCH 2/6] move page grid css to page grid folder, removing more text class styling --- package.json | 2 +- .../components/PageGrid/_page-grid.scss | 0 shared/components/benefits-section.tsx | 2 +- static/css/devportal2024-v1.css | 244 +++++------------- styles/_landings.scss | 7 - styles/xrpl.scss | 7 +- 6 files changed, 64 insertions(+), 198 deletions(-) rename styles/_xrpl-grid.scss => shared/components/PageGrid/_page-grid.scss (100%) diff --git a/package.json b/package.json index 5e98f80b9a..1834276faa 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "analyze-css": "node scripts/analyze-css.js", "build-css": "sass --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.tmp.css && NODE_ENV=production postcss ./static/css/devportal2024-v1.tmp.css -o ./static/css/devportal2024-v1.css && rm -f ./static/css/devportal2024-v1.tmp.css", "build-css:dev": "sass --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.tmp.css --source-map && postcss ./static/css/devportal2024-v1.tmp.css -o ./static/css/devportal2024-v1.css && rm -f ./static/css/devportal2024-v1.tmp.css", - "build-css:watch": "sass --watch --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.css --source-map", + "build-css:watch": "sass --watch --load-path styles/scss --silence-deprecation=import --silence-deprecation=global-builtin --silence-deprecation=color-functions styles/xrpl.scss ./static/css/devportal2024-v1.css --source-map", "start": "realm develop" }, "keywords": [], diff --git a/styles/_xrpl-grid.scss b/shared/components/PageGrid/_page-grid.scss similarity index 100% rename from styles/_xrpl-grid.scss rename to shared/components/PageGrid/_page-grid.scss diff --git a/shared/components/benefits-section.tsx b/shared/components/benefits-section.tsx index f94089fe20..003faf6ec0 100644 --- a/shared/components/benefits-section.tsx +++ b/shared/components/benefits-section.tsx @@ -42,7 +42,7 @@ export const BenefitsSection: React.FC = ({ {cards.map(card => (
  • {showImages && {card.title} -

    {translate(card.title)}

    +

    {translate(card.title)}

    {typeof card.description === 'string' ? translate(card.description) : card.description}

    diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index 7c6e8b483f..aa09e7ef49 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -862,7 +862,7 @@ progress { max-width: 540px; } } -@media (min-width: 576px) { +@media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; } @@ -884,7 +884,7 @@ progress { :root { --bs-breakpoint-xs: 0; --bs-breakpoint-sm: 576px; - --bs-breakpoint-md: 576px; + --bs-breakpoint-md: 768px; --bs-breakpoint-lg: 992px; --bs-breakpoint-xl: 1280px; } @@ -1284,7 +1284,7 @@ progress { --bs-gutter-y: 1.5rem; } } -@media (min-width: 576px) { +@media (min-width: 768px) { .col-md { flex: 1 0 0; } @@ -1994,7 +1994,7 @@ progress { -webkit-overflow-scrolling: touch; } } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .table-responsive-md { overflow-x: auto; -webkit-overflow-scrolling: touch; @@ -3328,7 +3328,7 @@ textarea.form-control-lg { left: auto; } } -@media (min-width: 576px) { +@media (min-width: 768px) { .dropdown-menu-md-start { --bs-position: start; } @@ -3836,7 +3836,7 @@ textarea.form-control-lg { overflow-y: visible; } } -@media (min-width: 576px) { +@media (min-width: 768px) { .navbar-expand-md { flex-wrap: nowrap; justify-content: flex-start; @@ -4481,7 +4481,7 @@ textarea.form-control-lg { overflow-y: auto; } } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .modal-fullscreen-md-down { width: 100vw; max-width: none; @@ -4808,7 +4808,7 @@ textarea.form-control-lg { z-index: 1020; } } -@media (min-width: 576px) { +@media (min-width: 768px) { .sticky-md-top { position: sticky; top: 0; @@ -7425,7 +7425,7 @@ textarea.form-control-lg { text-align: center !important; } } -@media (min-width: 576px) { +@media (min-width: 768px) { .float-md-start { float: left !important; } @@ -9250,60 +9250,6 @@ p { line-height: 24px; } -.fs-base { - font-size: 1rem; -} - -.fs-3 { - font-size: 0.75rem; - line-height: 1rem; -} - -.fs-4-5 { - font-size: 1.125rem; -} - -.fs-5 { - font-size: 1.25rem; -} - -.fs-5-5 { - font-size: 1.375rem; -} - -.fs-6 { - font-size: 1.5rem; -} - -.normal { - font-weight: normal; -} - -.bold { - font-weight: bold; -} - -.text-largest { - font-size: 1.5rem; - font-weight: normal; -} - -.text-large { - font-size: 1.125rem; -} - -.text-small { - font-size: 0.875rem; -} - -.text-smaller { - font-size: 0.75rem; -} - -.text-smallest { - font-size: 0.625rem; -} - /* STYLIZED LINKS */ .arrow-link { text-decoration: none; @@ -9788,7 +9734,7 @@ html .DocSearch-Modal { margin-right: 112px; } } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { html .algolia-autocomplete .ds-dropdown-menu { min-width: unset; } @@ -10076,7 +10022,7 @@ section { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .card-grid.card-grid-2xN { /* Switch to 1-column layout on smaller widths */ grid-template-columns: 1fr; @@ -10088,7 +10034,7 @@ section { grid-auto-rows: auto; /* No "hero" blocks expected here. */ } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .card-grid.card-grid-1x2 { /* Switch to 1-column layout on smaller widths */ display: flex; @@ -10099,7 +10045,7 @@ section { border: 0; min-height: 264px; } -@media (min-width: 576px) { +@media (min-width: 768px) { .card-grid .card { min-height: 347px; } @@ -10129,7 +10075,7 @@ section { max-width: 100%; z-index: 1; } -@media (min-width: 576px) { +@media (min-width: 768px) { .container-new { max-width: 608px; } @@ -10146,7 +10092,7 @@ section { } /* Responsive design for different viewscreens ------------------------------ */ -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { article { overflow-wrap: break-word; word-wrap: break-word; @@ -10189,7 +10135,7 @@ section { width: 4px; background: linear-gradient(180deg, rgb(254, 255, 1) 0%, rgb(255, 45, 154) 33%, rgb(163, 8, 143) 66%, rgba(44, 4, 128, 0.85) 100%); } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .timeline:before { left: 8px; } @@ -10244,7 +10190,7 @@ section { margin-top: -4px; } -@media (min-width: 576px) { +@media (min-width: 768px) { .timeline:before { left: 50%; -webkit-transform: translateX(-50%); @@ -10528,7 +10474,7 @@ aside .active-parent > a { .ml-5 { margin-left: 1.25rem; } -@media (min-width: 576px) { +@media (min-width: 768px) { .ml-5-until-md { margin-left: 1.25rem; } @@ -10537,7 +10483,7 @@ aside .active-parent > a { .mr-5 { margin-right: 1.25rem; } -@media (min-width: 576px) { +@media (min-width: 768px) { .mr-5-until-md { margin-right: 1.25rem; } @@ -10633,7 +10579,7 @@ aside .active-parent > a { margin-right: 2.5rem; } } -@media (min-width: 576px) { +@media (min-width: 768px) { .mx-10-until-md { margin-left: 2.5rem; margin-right: 2.5rem; @@ -10941,7 +10887,7 @@ aside .active-parent > a { overflow-y: hidden; } -@media (min-width: 576px) { +@media (min-width: 768px) { .position-sm-absolute { position: absolute; } @@ -11258,75 +11204,7 @@ article table td:nth-child(1) { #overview-table tbody td { padding: 2rem 0.75rem; } -@media (max-width: 575.98px) { - #overview-table { - font-size: 0.875rem; - } - #overview-table thead .h4 { - font-size: 1.125rem; - } -} - -/* TABLE STYLING */ -article table { - clear: right; - margin-bottom: 48px; -} -article table code { - word-break: normal; - white-space: nowrap; - overflow-wrap: normal; -} -article table th { - border-bottom: 2px solid #E0E0E1; -} -article table tr { - border-bottom: 1px solid #E0E0E1; -} -article table th, article table td { - padding: 0.2em; - vertical-align: text-top; -} -article table td:nth-child(1) { - font-weight: bold; -} - -.landing-table th, .landing-table tr { - border-bottom: 2px solid #454549; -} -.landing-table td { - width: 33.33%; - padding: 16px 40px 16px 0; -} -.landing-table td:nth-child(1) { - font-weight: normal; -} -@media (max-width: 575.98px) { - .landing-table td { - font-size: 0.875rem; - } -} -.landing-table tr:last-child { - border-bottom: none; -} -.landing-table tbody td { - color: #E0E0E1; -} - -.dblue { - color: #454549; -} - -#overview-table td:nth-child(1) { - width: 40%; -} -#overview-table td:nth-child(2) { - width: 30%; -} -#overview-table tbody td { - padding: 2rem 0.75rem; -} -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { #overview-table { font-size: 0.875rem; } @@ -11985,7 +11863,7 @@ html.light .bitgo { #use-case-card-grid { grid-template-columns: repeat(2, 1fr); } -@media (min-width: 576px) { +@media (min-width: 768px) { #use-case-card-grid { grid-template-columns: repeat(3, 1fr); } @@ -12011,7 +11889,7 @@ html.light .bitgo { margin-bottom: 30px; cursor: pointer; } -@media (min-width: 576px) { +@media (min-width: 768px) { .use-case-circle { aspect-ratio: 1/1; min-width: 200px !important; @@ -12222,7 +12100,7 @@ html.light .colorful-join-text { .page-tokenization .show-md { display: none; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .page-tokenization .show-md { display: block; } @@ -12230,7 +12108,7 @@ html.light .colorful-join-text { .page-tokenization .hide-md { display: block; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .page-tokenization .hide-md { display: none; } @@ -12258,7 +12136,7 @@ html.light .colorful-join-text { display: grid; grid-template-columns: repeat(4, 1fr); } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .page-tokenization .tokenization-stats { display: block; height: 100%; @@ -12271,7 +12149,7 @@ html.light .colorful-join-text { text-align: center; border-right: 2px solid black; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .page-tokenization .stat-container { border-right: none; padding-bottom: 3rem; @@ -12485,7 +12363,7 @@ body, padding: 80px 0px; } } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .use-case-payments__hero { flex-direction: column; gap: 32px; @@ -12517,7 +12395,7 @@ body, max-height: 450px; } } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .use-case-payments .video-content iframe { min-height: 300px; max-height: 400px; @@ -12529,7 +12407,7 @@ body, max-height: 350px; } } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .use-case-payments .video-content { width: 100%; } @@ -12570,7 +12448,7 @@ body, font-size: 18px; } } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .use-case-payments .text-content { width: 100%; } @@ -12884,7 +12762,7 @@ body, max-width: 942px; } } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .use-case-payments .payments-integration-section .developer-tools { max-width: 608px; } @@ -13018,7 +12896,7 @@ body, .top-nav .navbar-brand:hover { opacity: 0.75; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .top-nav .navbar-brand { padding-left: 2rem; } @@ -13115,7 +12993,7 @@ body, flex-grow: 1; flex-wrap: nowrap; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .top-nav #topnav-search .form-inline { padding: 1rem 2rem; } @@ -13263,7 +13141,7 @@ body, margin-right: 1rem; } } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .top-nav .navbar-toggler { border: 0; padding: 30px 2rem; @@ -13524,7 +13402,7 @@ article h1:first-of-type:before, article .h1:first-of-type:before { min-height: var(--language-picker-min-height); } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .navbar-collapse, .dropdown-menu { box-shadow: 0px 25px 40px -20px #000000; @@ -13958,7 +13836,7 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov margin-left: 87.5%; } } -@media (min-width: 576px) { +@media (min-width: 768px) { .xrpl-grid__col-md { flex: 1 0 0; } @@ -14791,7 +14669,7 @@ html.light svg[fill=none] linearGradient stop[stop-color="#C1C1C2"] { [data-component-name="Footer/Footer"] { padding: 7.5rem 2rem; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { [data-component-name="Footer/Footer"] .col-lg:not(:first-child) { margin-top: 4rem; } @@ -14809,7 +14687,7 @@ html.light svg[fill=none] linearGradient stop[stop-color="#C1C1C2"] { font-size: 10px; line-height: 1rem; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { [data-component-name="Footer/Footer"] .absolute-bottom-footer .copyright-license { margin-top: 3rem; } @@ -14962,7 +14840,7 @@ blockquote, top: -7px; left: -6px; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .contribute::before { left: 0; height: 100%; @@ -15115,7 +14993,7 @@ a.card:hover h3, a.card:hover .h3 { flex-basis: 100%; min-height: 264px; } -@media (min-width: 576px) { +@media (min-width: 768px) { .card-deck.row-cols-1 .card { min-height: 347px; } @@ -15161,7 +15039,7 @@ a.card:hover h3, a.card:hover .h3 { background-size: cover; border-top: 0; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .card-deck { margin-top: 2rem; } @@ -15381,12 +15259,6 @@ main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(9) .card-fo .landing article .curated-links li a:hover { text-decoration: underline; } -.landing section:first-of-type h1:first-child, .landing section:first-of-type .h1:first-child { - font-family: "Tobias", "Noto Serif", monospace; - font-weight: 400; - margin-top: 0; - line-height: 1.2; -} .landing .level-1, .landing .level-2 { margin-top: 0; @@ -16177,7 +16049,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .landing-bg { opacity: 0.6; } -@media (min-width: 576px) { +@media (min-width: 768px) { .landing-bg { opacity: 1; } @@ -16193,7 +16065,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments background-position-y: top; opacity: 0.6; } -@media (min-width: 576px) { +@media (min-width: 768px) { .landing-builtin-bg::before { opacity: 1; } @@ -17193,7 +17065,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments text-decoration: underline; color: #FFFFFF; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .page-faq .q-wrapper h4, .page-faq .q-wrapper .h4, .mini-faq .q-wrapper h4, .mini-faq .q-wrapper .h4 { @@ -17343,7 +17215,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #run-a-network-node { padding-bottom: 5rem; } -@media (min-width: 576px) { +@media (min-width: 768px) { .page-docs-index #run-a-network-node, .page-community #run-a-network-node { padding-top: 104px; @@ -17388,7 +17260,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #xrpl-grants { padding-bottom: 5rem; } -@media (min-width: 576px) { +@media (min-width: 768px) { .page-docs-index #xrpl-grants, .page-community #xrpl-grants { padding-top: 104px; @@ -17399,7 +17271,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #xrpl-blog { padding-bottom: 5rem; } -@media (min-width: 576px) { +@media (min-width: 768px) { .page-docs-index #xrpl-blog, .page-community #xrpl-blog { padding-top: 104px; @@ -17410,7 +17282,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #xrpl-events { padding-bottom: 5rem; } -@media (min-width: 576px) { +@media (min-width: 768px) { .page-docs-index #xrpl-events, .page-community #xrpl-events { padding-top: 104px; @@ -17421,7 +17293,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #xrpl-careers { padding-bottom: 5rem; } -@media (min-width: 576px) { +@media (min-width: 768px) { .page-docs-index #xrpl-careers, .page-community #xrpl-careers { padding-top: 104px; @@ -17432,7 +17304,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #xrpl-design-assets { padding-bottom: 5rem; } -@media (min-width: 576px) { +@media (min-width: 768px) { .page-docs-index #xrpl-design-assets, .page-community #xrpl-design-assets { padding-top: 104px; @@ -17609,7 +17481,7 @@ html.light .page-dev-tools #trasaction-sender .card-footer { max-width: 720px; z-index: 1; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .page-rwa-tokenization .token-title, .use-case-payments .token-title { line-height: 48px; @@ -19139,7 +19011,7 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .video-title { line-height: 1.2; } -@media (min-width: 576px) { +@media (min-width: 768px) { .video-title { font-size: 1rem; } @@ -20387,7 +20259,7 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .flat-card-grid .nav-link::after { content: none !important; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { .flat-card-grid .flat-card-padding { margin-bottom: 0; } @@ -20683,7 +20555,7 @@ html.light .top-nav .dropdown-menu .col-for-get_started { html.light .top-nav #topnav-button { background-color: #E0E0E1; } -@media (max-width: 575.98px) { +@media (max-width: 767.98px) { html.light .top-nav .navbar-toggler .navbar-toggler-icon::after, html.light .top-nav .navbar-toggler .navbar-toggler-icon::before, html.light .top-nav .navbar-toggler .navbar-toggler-icon div { background-color: #111112; @@ -21123,7 +20995,7 @@ html.light .page-uses #gatehub .biz-logo { html.light .landing-bg { opacity: 0.4; } -@media (min-width: 576px) { +@media (min-width: 768px) { html.light .landing-bg { opacity: 1; } @@ -21131,7 +21003,7 @@ html.light .landing-bg { html.light .landing-builtin-bg::before { opacity: 0.4; } -@media (min-width: 576px) { +@media (min-width: 768px) { html.light .landing-builtin-bg::before { opacity: 1; } diff --git a/styles/_landings.scss b/styles/_landings.scss index e129d5d696..137efcf8dc 100644 --- a/styles/_landings.scss +++ b/styles/_landings.scss @@ -23,13 +23,6 @@ } } - section:first-of-type h1:first-child { - font-family: $font-family-monospace; - font-weight: 400; - margin-top: 0; - line-height: 1.2; - } - .level-1, .level-2{ margin-top: 0; diff --git a/styles/xrpl.scss b/styles/xrpl.scss index fccfd89490..f0d3b5726f 100644 --- a/styles/xrpl.scss +++ b/styles/xrpl.scss @@ -43,12 +43,13 @@ $line-height-base: 1.5; $grid-breakpoints: ( xs: 0, sm: 576px, - md: 576px, + md: 768px, lg: 992px, xl: 1280px ); // Bootstrap v5 - Import only what we need +// Note: Bootstrap still uses @import internally, so we use @import for Bootstrap @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/variables-dark"; @@ -86,13 +87,12 @@ $grid-breakpoints: ( @import "_helpers.scss"; @import "_buttons.scss"; @import "_tables.scss"; -@import "_tables.scss"; @import "_use-cases.scss"; @import "_github-edit.scss"; @import "_top-nav.scss"; @import "_top-banner.scss"; @import "_content.scss"; -@import "_xrpl-grid.scss"; +@import "../shared/components/PageGrid/page-grid"; @import "_code-tabs.scss"; @import "_code-walkthrough.scss"; @import "_diagrams.scss"; @@ -114,6 +114,7 @@ $grid-breakpoints: ( @import "_contribute.scss"; @import "_docs-landing.scss"; @import "_osano.scss"; + // Light/Dark theme settings --------------------------------------------------- // Option to only change theme on user system settings. No toggle. From 37e96a9dae2eb5293a9b8607d1c706ae8c3ae83e Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Tue, 25 Nov 2025 21:36:38 -0800 Subject: [PATCH 3/6] more documentation around page grid --- shared/components/PageGrid/page-grid.tsx | 63 +++++++++++++++++++++--- 1 file changed, 55 insertions(+), 8 deletions(-) diff --git a/shared/components/PageGrid/page-grid.tsx b/shared/components/PageGrid/page-grid.tsx index 4fd85a98c3..97565b11a8 100644 --- a/shared/components/PageGrid/page-grid.tsx +++ b/shared/components/PageGrid/page-grid.tsx @@ -2,7 +2,11 @@ import React from "react"; import clsx from "clsx"; type PageGridElementProps = React.HTMLAttributes; + +// Define the standard PageGrid breakpoints type PageGridBreakpoint = "base" | "sm" | "md" | "lg" | "xl"; + +// Define the ResponsiveValue type using Partial for breakpoints type ResponsiveValue = T | Partial>; export interface PageGridProps extends PageGridElementProps {} @@ -17,24 +21,50 @@ export interface PageGridColProps extends PageGridElementProps { offset?: ResponsiveValue; } +// Keys used for iteration and generating responsive class prefixes const breakpointKeys: Array> = ["sm", "md", "lg", "xl"]; -const classForSpan = (prefix: string | null, value: PageGridSpanValue) => { +/** + * Helper function to construct the column span CSS class string. + * This function relies on the corresponding classes being pre-generated in SCSS. + * @param prefix The breakpoint prefix (e.g., 'md' or null for base). + * @param value The span value (number, "auto", or "fill"). + * @returns The full CSS class string. + */ +const classForSpan = (prefix: string | null, value: PageGridSpanValue): string => { + const prefixStr = prefix ? `-${prefix}` : ""; + if (value === "auto") { - return prefix ? `xrpl-grid__col-${prefix}-auto` : "xrpl-grid__col-auto"; + // Generates xrpl-grid__col-auto or xrpl-grid__col-md-auto + return `xrpl-grid__col${prefixStr}-auto`; } if (value === "fill") { - return prefix ? `xrpl-grid__col-${prefix}` : "xrpl-grid__col"; + // Generates xrpl-grid__col or xrpl-grid__col-md (based on documentation) + // Note: The documentation states 'xrpl-grid__col' for fill, and 'xrpl-grid__col-{breakpoint}' for fill + // The implementation below aligns with the documentation's example logic: + return prefix ? `xrpl-grid__col${prefixStr}` : "xrpl-grid__col"; } - return prefix ? `xrpl-grid__col-${prefix}-${value}` : `xrpl-grid__col-${value}`; + // Generates xrpl-grid__col-6 or xrpl-grid__col-md-6 + return `xrpl-grid__col${prefixStr}-${value}`; }; -const classForOffset = (prefix: string | null, value: PageGridOffsetValue) => { - return prefix ? `xrpl-grid__offset-${prefix}-${value}` : `xrpl-grid__offset-${value}`; +/** + * Helper function to construct the column offset CSS class string. + * This function relies on the corresponding classes being pre-generated in SCSS. + * @param prefix The breakpoint prefix (e.g., 'md' or null for base). + * @param value The offset value (number). + * @returns The full CSS class string. + */ +const classForOffset = (prefix: string | null, value: PageGridOffsetValue): string => { + const prefixStr = prefix ? `-${prefix}` : ""; + // Generates xrpl-grid__offset-2 or xrpl-grid__offset-md-2 + return `xrpl-grid__offset${prefixStr}-${value}`; }; + +// --- PageGrid Root Component --- const PageGridRoot = React.forwardRef( ({ className, ...rest }, ref) => (
    @@ -43,59 +73,74 @@ const PageGridRoot = React.forwardRef( PageGridRoot.displayName = "PageGrid"; + +// --- PageGrid.Row Component --- const PageGridRow = React.forwardRef( ({ className, ...rest }, ref) => (
    ) ); -PageGridRoot.displayName = "PageGrid"; +PageGridRow.displayName = "PageGridRow"; // Renamed display name for clarity +// --- PageGrid.Col Component --- const PageGridCol = React.forwardRef((props, ref) => { const { className, span, offset, ...rest } = props; const spanClasses: string[] = []; const offsetClasses: string[] = []; + // --- Span Logic --- if (typeof span === "number" || typeof span === "string") { + // Handles fixed/base span={6} or span="auto" spanClasses.push(classForSpan(null, span as PageGridSpanValue)); } else if (span && typeof span === "object") { + // Handles base breakpoint (no prefix) const baseSpan = "base" in span ? span.base : undefined; if (baseSpan) { spanClasses.push(classForSpan(null, baseSpan)); } + // Handles sm, md, lg, xl breakpoints (with prefix) breakpointKeys.forEach((key) => { const value = span[key]; if (value) { + // Generates classes like xrpl-grid__col-md-6 spanClasses.push(classForSpan(key, value)); } }); } + // --- Offset Logic --- if (typeof offset === "number") { + // Handles fixed offset={2} offsetClasses.push(classForOffset(null, offset)); } else if (offset && typeof offset === "object") { + // Handles base offset (no prefix) const baseOffset = "base" in offset ? offset.base : undefined; if (baseOffset !== undefined) { offsetClasses.push(classForOffset(null, baseOffset)); } + // Handles sm, md, lg, xl offsets (with prefix) breakpointKeys.forEach((key) => { const value = offset[key]; if (value !== undefined) { + // Generates classes like xrpl-grid__offset-md-3 offsetClasses.push(classForOffset(key, value)); } }); } + // Ensure the base class is always applied for styling return (
    ); @@ -103,6 +148,8 @@ const PageGridCol = React.forwardRef((props, r PageGridCol.displayName = "PageGridCol"; + +// --- Component Composition --- type PageGridComponent = typeof PageGridRoot & { Row: typeof PageGridRow; Col: typeof PageGridCol; From 42ec50df27961564dd6fa79dd619f9559280de22 Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Wed, 26 Nov 2025 16:00:14 -0800 Subject: [PATCH 4/6] removing fake button folder --- shared/components/Buttons/buttons.md | 0 shared/components/Buttons/buttons.tsx | 0 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 shared/components/Buttons/buttons.md delete mode 100644 shared/components/Buttons/buttons.tsx diff --git a/shared/components/Buttons/buttons.md b/shared/components/Buttons/buttons.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/shared/components/Buttons/buttons.tsx b/shared/components/Buttons/buttons.tsx deleted file mode 100644 index e69de29bb2..0000000000 From 2429574182768fb841778b3c74eb5d5aa84c0a0b Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Wed, 26 Nov 2025 16:03:51 -0800 Subject: [PATCH 5/6] removing px reversion for medium --- styles/xrpl.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/xrpl.scss b/styles/xrpl.scss index f0d3b5726f..5fcb375574 100644 --- a/styles/xrpl.scss +++ b/styles/xrpl.scss @@ -43,7 +43,7 @@ $line-height-base: 1.5; $grid-breakpoints: ( xs: 0, sm: 576px, - md: 768px, + md: 576px, lg: 992px, xl: 1280px ); From c4188c47d6b6807617da58dd14813d3264f21d53 Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Wed, 26 Nov 2025 16:06:00 -0800 Subject: [PATCH 6/6] updating css for medium --- static/css/devportal2024-v1.css | 116 ++++++++++++++++---------------- 1 file changed, 58 insertions(+), 58 deletions(-) diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index aa09e7ef49..a8c5235107 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -862,7 +862,7 @@ progress { max-width: 540px; } } -@media (min-width: 768px) { +@media (min-width: 576px) { .container-md, .container-sm, .container { max-width: 720px; } @@ -884,7 +884,7 @@ progress { :root { --bs-breakpoint-xs: 0; --bs-breakpoint-sm: 576px; - --bs-breakpoint-md: 768px; + --bs-breakpoint-md: 576px; --bs-breakpoint-lg: 992px; --bs-breakpoint-xl: 1280px; } @@ -1284,7 +1284,7 @@ progress { --bs-gutter-y: 1.5rem; } } -@media (min-width: 768px) { +@media (min-width: 576px) { .col-md { flex: 1 0 0; } @@ -1994,7 +1994,7 @@ progress { -webkit-overflow-scrolling: touch; } } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .table-responsive-md { overflow-x: auto; -webkit-overflow-scrolling: touch; @@ -3328,7 +3328,7 @@ textarea.form-control-lg { left: auto; } } -@media (min-width: 768px) { +@media (min-width: 576px) { .dropdown-menu-md-start { --bs-position: start; } @@ -3836,7 +3836,7 @@ textarea.form-control-lg { overflow-y: visible; } } -@media (min-width: 768px) { +@media (min-width: 576px) { .navbar-expand-md { flex-wrap: nowrap; justify-content: flex-start; @@ -4481,7 +4481,7 @@ textarea.form-control-lg { overflow-y: auto; } } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .modal-fullscreen-md-down { width: 100vw; max-width: none; @@ -4808,7 +4808,7 @@ textarea.form-control-lg { z-index: 1020; } } -@media (min-width: 768px) { +@media (min-width: 576px) { .sticky-md-top { position: sticky; top: 0; @@ -7425,7 +7425,7 @@ textarea.form-control-lg { text-align: center !important; } } -@media (min-width: 768px) { +@media (min-width: 576px) { .float-md-start { float: left !important; } @@ -9734,7 +9734,7 @@ html .DocSearch-Modal { margin-right: 112px; } } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { html .algolia-autocomplete .ds-dropdown-menu { min-width: unset; } @@ -10022,7 +10022,7 @@ section { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .card-grid.card-grid-2xN { /* Switch to 1-column layout on smaller widths */ grid-template-columns: 1fr; @@ -10034,7 +10034,7 @@ section { grid-auto-rows: auto; /* No "hero" blocks expected here. */ } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .card-grid.card-grid-1x2 { /* Switch to 1-column layout on smaller widths */ display: flex; @@ -10045,7 +10045,7 @@ section { border: 0; min-height: 264px; } -@media (min-width: 768px) { +@media (min-width: 576px) { .card-grid .card { min-height: 347px; } @@ -10075,7 +10075,7 @@ section { max-width: 100%; z-index: 1; } -@media (min-width: 768px) { +@media (min-width: 576px) { .container-new { max-width: 608px; } @@ -10092,7 +10092,7 @@ section { } /* Responsive design for different viewscreens ------------------------------ */ -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { article { overflow-wrap: break-word; word-wrap: break-word; @@ -10135,7 +10135,7 @@ section { width: 4px; background: linear-gradient(180deg, rgb(254, 255, 1) 0%, rgb(255, 45, 154) 33%, rgb(163, 8, 143) 66%, rgba(44, 4, 128, 0.85) 100%); } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .timeline:before { left: 8px; } @@ -10190,7 +10190,7 @@ section { margin-top: -4px; } -@media (min-width: 768px) { +@media (min-width: 576px) { .timeline:before { left: 50%; -webkit-transform: translateX(-50%); @@ -10474,7 +10474,7 @@ aside .active-parent > a { .ml-5 { margin-left: 1.25rem; } -@media (min-width: 768px) { +@media (min-width: 576px) { .ml-5-until-md { margin-left: 1.25rem; } @@ -10483,7 +10483,7 @@ aside .active-parent > a { .mr-5 { margin-right: 1.25rem; } -@media (min-width: 768px) { +@media (min-width: 576px) { .mr-5-until-md { margin-right: 1.25rem; } @@ -10579,7 +10579,7 @@ aside .active-parent > a { margin-right: 2.5rem; } } -@media (min-width: 768px) { +@media (min-width: 576px) { .mx-10-until-md { margin-left: 2.5rem; margin-right: 2.5rem; @@ -10887,7 +10887,7 @@ aside .active-parent > a { overflow-y: hidden; } -@media (min-width: 768px) { +@media (min-width: 576px) { .position-sm-absolute { position: absolute; } @@ -11204,7 +11204,7 @@ article table td:nth-child(1) { #overview-table tbody td { padding: 2rem 0.75rem; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { #overview-table { font-size: 0.875rem; } @@ -11863,7 +11863,7 @@ html.light .bitgo { #use-case-card-grid { grid-template-columns: repeat(2, 1fr); } -@media (min-width: 768px) { +@media (min-width: 576px) { #use-case-card-grid { grid-template-columns: repeat(3, 1fr); } @@ -11889,7 +11889,7 @@ html.light .bitgo { margin-bottom: 30px; cursor: pointer; } -@media (min-width: 768px) { +@media (min-width: 576px) { .use-case-circle { aspect-ratio: 1/1; min-width: 200px !important; @@ -12100,7 +12100,7 @@ html.light .colorful-join-text { .page-tokenization .show-md { display: none; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .page-tokenization .show-md { display: block; } @@ -12108,7 +12108,7 @@ html.light .colorful-join-text { .page-tokenization .hide-md { display: block; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .page-tokenization .hide-md { display: none; } @@ -12136,7 +12136,7 @@ html.light .colorful-join-text { display: grid; grid-template-columns: repeat(4, 1fr); } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .page-tokenization .tokenization-stats { display: block; height: 100%; @@ -12149,7 +12149,7 @@ html.light .colorful-join-text { text-align: center; border-right: 2px solid black; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .page-tokenization .stat-container { border-right: none; padding-bottom: 3rem; @@ -12363,7 +12363,7 @@ body, padding: 80px 0px; } } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .use-case-payments__hero { flex-direction: column; gap: 32px; @@ -12395,7 +12395,7 @@ body, max-height: 450px; } } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .use-case-payments .video-content iframe { min-height: 300px; max-height: 400px; @@ -12407,7 +12407,7 @@ body, max-height: 350px; } } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .use-case-payments .video-content { width: 100%; } @@ -12448,7 +12448,7 @@ body, font-size: 18px; } } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .use-case-payments .text-content { width: 100%; } @@ -12762,7 +12762,7 @@ body, max-width: 942px; } } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .use-case-payments .payments-integration-section .developer-tools { max-width: 608px; } @@ -12896,7 +12896,7 @@ body, .top-nav .navbar-brand:hover { opacity: 0.75; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .top-nav .navbar-brand { padding-left: 2rem; } @@ -12993,7 +12993,7 @@ body, flex-grow: 1; flex-wrap: nowrap; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .top-nav #topnav-search .form-inline { padding: 1rem 2rem; } @@ -13141,7 +13141,7 @@ body, margin-right: 1rem; } } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .top-nav .navbar-toggler { border: 0; padding: 30px 2rem; @@ -13402,7 +13402,7 @@ article h1:first-of-type:before, article .h1:first-of-type:before { min-height: var(--language-picker-min-height); } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .navbar-collapse, .dropdown-menu { box-shadow: 0px 25px 40px -20px #000000; @@ -13836,7 +13836,7 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov margin-left: 87.5%; } } -@media (min-width: 768px) { +@media (min-width: 576px) { .xrpl-grid__col-md { flex: 1 0 0; } @@ -14669,7 +14669,7 @@ html.light svg[fill=none] linearGradient stop[stop-color="#C1C1C2"] { [data-component-name="Footer/Footer"] { padding: 7.5rem 2rem; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { [data-component-name="Footer/Footer"] .col-lg:not(:first-child) { margin-top: 4rem; } @@ -14687,7 +14687,7 @@ html.light svg[fill=none] linearGradient stop[stop-color="#C1C1C2"] { font-size: 10px; line-height: 1rem; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { [data-component-name="Footer/Footer"] .absolute-bottom-footer .copyright-license { margin-top: 3rem; } @@ -14840,7 +14840,7 @@ blockquote, top: -7px; left: -6px; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .contribute::before { left: 0; height: 100%; @@ -14993,7 +14993,7 @@ a.card:hover h3, a.card:hover .h3 { flex-basis: 100%; min-height: 264px; } -@media (min-width: 768px) { +@media (min-width: 576px) { .card-deck.row-cols-1 .card { min-height: 347px; } @@ -15039,7 +15039,7 @@ a.card:hover h3, a.card:hover .h3 { background-size: cover; border-top: 0; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .card-deck { margin-top: 2rem; } @@ -16049,7 +16049,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .landing-bg { opacity: 0.6; } -@media (min-width: 768px) { +@media (min-width: 576px) { .landing-bg { opacity: 1; } @@ -16065,7 +16065,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments background-position-y: top; opacity: 0.6; } -@media (min-width: 768px) { +@media (min-width: 576px) { .landing-builtin-bg::before { opacity: 1; } @@ -17065,7 +17065,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments text-decoration: underline; color: #FFFFFF; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .page-faq .q-wrapper h4, .page-faq .q-wrapper .h4, .mini-faq .q-wrapper h4, .mini-faq .q-wrapper .h4 { @@ -17215,7 +17215,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #run-a-network-node { padding-bottom: 5rem; } -@media (min-width: 768px) { +@media (min-width: 576px) { .page-docs-index #run-a-network-node, .page-community #run-a-network-node { padding-top: 104px; @@ -17260,7 +17260,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #xrpl-grants { padding-bottom: 5rem; } -@media (min-width: 768px) { +@media (min-width: 576px) { .page-docs-index #xrpl-grants, .page-community #xrpl-grants { padding-top: 104px; @@ -17271,7 +17271,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #xrpl-blog { padding-bottom: 5rem; } -@media (min-width: 768px) { +@media (min-width: 576px) { .page-docs-index #xrpl-blog, .page-community #xrpl-blog { padding-top: 104px; @@ -17282,7 +17282,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #xrpl-events { padding-bottom: 5rem; } -@media (min-width: 768px) { +@media (min-width: 576px) { .page-docs-index #xrpl-events, .page-community #xrpl-events { padding-top: 104px; @@ -17293,7 +17293,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #xrpl-careers { padding-bottom: 5rem; } -@media (min-width: 768px) { +@media (min-width: 576px) { .page-docs-index #xrpl-careers, .page-community #xrpl-careers { padding-top: 104px; @@ -17304,7 +17304,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #xrpl-design-assets { padding-bottom: 5rem; } -@media (min-width: 768px) { +@media (min-width: 576px) { .page-docs-index #xrpl-design-assets, .page-community #xrpl-design-assets { padding-top: 104px; @@ -17481,7 +17481,7 @@ html.light .page-dev-tools #trasaction-sender .card-footer { max-width: 720px; z-index: 1; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .page-rwa-tokenization .token-title, .use-case-payments .token-title { line-height: 48px; @@ -19011,7 +19011,7 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .video-title { line-height: 1.2; } -@media (min-width: 768px) { +@media (min-width: 576px) { .video-title { font-size: 1rem; } @@ -20259,7 +20259,7 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .flat-card-grid .nav-link::after { content: none !important; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { .flat-card-grid .flat-card-padding { margin-bottom: 0; } @@ -20555,7 +20555,7 @@ html.light .top-nav .dropdown-menu .col-for-get_started { html.light .top-nav #topnav-button { background-color: #E0E0E1; } -@media (max-width: 767.98px) { +@media (max-width: 575.98px) { html.light .top-nav .navbar-toggler .navbar-toggler-icon::after, html.light .top-nav .navbar-toggler .navbar-toggler-icon::before, html.light .top-nav .navbar-toggler .navbar-toggler-icon div { background-color: #111112; @@ -20995,7 +20995,7 @@ html.light .page-uses #gatehub .biz-logo { html.light .landing-bg { opacity: 0.4; } -@media (min-width: 768px) { +@media (min-width: 576px) { html.light .landing-bg { opacity: 1; } @@ -21003,7 +21003,7 @@ html.light .landing-bg { html.light .landing-builtin-bg::before { opacity: 0.4; } -@media (min-width: 768px) { +@media (min-width: 576px) { html.light .landing-builtin-bg::before { opacity: 1; }