mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-10-04 02:47:57 +00:00
67523334de
* updating docs landing page, took far but not complete. Pushing for Gabe take over * Refactor home page sections and introduce new components - Replaced existing content in index.page.tsx with new section components for improved structure and maintainability. - Added new sections: HomeBeginJourneySection, HomeBlockchainStatsSection, HomeComplianceDirectorySection, HomeDevelopersFeatureSection, HomeFutureFinanceCallout, HomeHeroCallout, HomeInstitutionsFeatureSection, HomePartnerLogosSection, HomeStayConnectedSection, and HomeCarousel. - Updated styles for CarouselFeatured and CardStat components to enhance visual consistency and responsiveness. - Introduced SCSS for HomeHero section to manage layout and spacing effectively. * Add Payments Page and Sections - Created a new Payments page with multiple sections including Hero, Why Choose, Advanced Features, Stablecoins, Embedded Payments, Partner Logos, Flexible Integration, Developer Spotlight, and Stay Connected. - Each section is designed to highlight various aspects of the XRP Ledger Payments Infrastructure, featuring components like FeaturedVideoHero and CardsIconGrid. - Added corresponding styles and images to enhance the visual presentation of the new sections. * adding icons, updating docs landing page * updating the claude command, wrapping text with translate wrapper * use case tokenization page built * Enhance CarouselFeatured styles for improved responsiveness - Added flex-direction adjustments for CarouselFeatured component to support column-reverse layout on smaller screens and row layout on medium and larger screens. - Removed redundant vendor prefixes from box-sizing and text-decoration properties in devportal2024-v1.css for cleaner code and improved maintainability. * moving payments page to correct folder, moving payments under pages * adding developers home page * code clean up --------- Co-authored-by: gabriel-ortiz <gabriel.ortiz.github@gmail.com> Co-authored-by: gabriel-ortiz <gortiz@ripple.com>
70 lines
2.4 KiB
SCSS
70 lines
2.4 KiB
SCSS
// BDS SmallTilesSection Pattern Styles
|
|
// Note: Uses centralized spacing tokens from _spacing.scss.
|
|
// $bds-grid-gutter is defined in _spacing.scss (8px).
|
|
|
|
.bds-small-tiles-section {
|
|
padding-top: $bds-space-4xl; // 40px - spacing('4xl')
|
|
padding-bottom: $bds-space-4xl; // 40px - spacing('4xl')
|
|
|
|
&__headline {
|
|
margin-bottom: $bds-space-sm; // 8px - spacing('sm')
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
margin-bottom: $bds-space-lg; // 16px - spacing('lg')
|
|
}
|
|
}
|
|
|
|
&__cards-grid-wrapper {
|
|
margin-top: $bds-space-2xl; // 24px - spacing('2xl')
|
|
|
|
@include media-breakpoint-up(md) {
|
|
margin-top: $bds-space-3xl; // 32px - spacing('3xl')
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
margin-top: $bds-space-4xl; // 40px - spacing('4xl')
|
|
}
|
|
}
|
|
|
|
&__cards-grid {
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: $bds-grid-gutter;
|
|
grid-auto-flow: row;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
// When card count is <= 8 (needs spacer), use 2-column centered layout
|
|
// with right-to-left flow to align cards from right to left visually
|
|
// while maintaining left-to-right text direction within each card
|
|
&.__needs-spacer {
|
|
@include media-breakpoint-up(lg) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
// Use RTL direction to reverse grid item order (visual design requirement)
|
|
// This only affects the grid layout flow, not text content (see &__card below)
|
|
// Note: If the site adds RTL language support (Arabic/Hebrew), this may need
|
|
// to be made language-aware using CSS :lang() selector or JS
|
|
direction: rtl;
|
|
}
|
|
}
|
|
|
|
&__card {
|
|
// Reset direction to LTR for card content to ensure proper text rendering
|
|
// This prevents the RTL direction from affecting icons, labels, or any content
|
|
// inside individual cards, even if user's browser/system has RTL preferences
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
}
|
|
|
|
} |