mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-10-10 05:48:02 +00:00
b0db5b3a5c
* Perf pass + migrate home/payments page sections to shared
Performance work across every page plus a refactor moving home/payments
page sections into reusable shared components.
JavaScript
- Defer xrpl.js, jQuery, and Bootstrap in the global <head> (redocly.yaml)
and on the 11 interactive tool pages' inline <script> tags — removes
~1MB of render-blocking JS from first paint on every page.
- Drop moment/moment-timezone from the client: remove the dead APEX-2025
countdown in the navbar AlertBanner; format/parse dates with native
Date/Intl in the blog and events pages.
Fonts & icons
- Remove render-blocking font-awesome.min.css + webfont. CSS glyphs
(callouts, breadcrumbs, status labels, tutorials) now render as
self-contained data-URI SVG masks (styles/_fa-icons.scss); markup icons
use a shared inline-SVG <Icon> component (shared/components/Icon).
- Preconnect to Google Fonts / osano / GTM origins; preload the primary
Booton UI font so text no longer waits on the 775KB stylesheet to parse.
Images & rendering
- Re-encode/resize oversized assets: new-york.jpeg 3.86MB→60KB,
resources-icon.svg 4.2MB→150KB, event date/location SVGs ~1MB→0.5MB.
- Add loading=lazy/decoding=async to shared card components and the
Video embed iframe.
- Add content-visibility to the events page's ~126-card grid to skip
off-screen rendering.
- Earlier QA fixes: light-mode link color (#141414), events card grid
layout, close nav menu on client-side navigation.
Home / payments refactor
- Move home page sections from page-local pages/home/sections/* to reusable
shared/sections/* components (HomeHero relocated to shared/sections/HomeHero;
home page now composes CalloutMediaBanner, CardStatsList, LinkTextDirectory,
LogoSquareGrid, StandardCardGroupSection, FeatureSingleTopic, CarouselFeatured).
- Remove the now-unused pages/payments/sections/* in the same migration.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* Revert FontAwesome removal (keep it for open-source flexibility)
Restore the FontAwesome webfont + font-awesome.min.css and all FA icon
usages (markup fa-* classes and CSS ::before glyphs), reverting the
consolidation in d4cf4e8581. Other performance changes from that commit
(deferred head scripts, moment removal, image optimization, lazy-loading,
content-visibility, preconnect/preload) are retained.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* cleaning up breadcrumb styling
* sticky side nav
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
58 lines
1.4 KiB
SCSS
58 lines
1.4 KiB
SCSS
// Spacing tokens - responsive
|
|
// Note: Uses centralized spacing tokens from _spacing.scss where applicable.
|
|
// Mobile (<768px)
|
|
$bds-cmb-gap-mobile: $bds-space-4xl; // 48px - spacing('5xl')
|
|
$bds-cmb-padding-mobile: $bds-space-lg; // 16px - spacing('lg')
|
|
|
|
// Tablet (768px-1023px)
|
|
$bds-cmb-gap-tablet: $bds-space-6xl; // 64px - spacing('6xl')
|
|
$bds-cmb-padding-tablet: $bds-space-2xl; // 24px - spacing('2xl')
|
|
|
|
// Desktop (≥1024px)
|
|
$bds-cmb-gap-desktop: $bds-space-8xl; // 80px - spacing('8xl')
|
|
$bds-cmb-padding-desktop: $bds-space-4xl $bds-space-3xl; // 40px 32px
|
|
|
|
.bds-home-hero {
|
|
&__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $bds-cmb-gap-mobile;
|
|
// Mobile-first padding and gap (default)
|
|
padding: $bds-cmb-padding-mobile;
|
|
|
|
// Tablet breakpoint
|
|
@include media-breakpoint-up(md) {
|
|
padding: $bds-cmb-padding-tablet;
|
|
}
|
|
|
|
// Desktop breakpoint
|
|
@include media-breakpoint-up(lg) {
|
|
padding: $bds-cmb-padding-desktop;
|
|
}
|
|
}
|
|
|
|
&__header {
|
|
@include type(display-sm);
|
|
font-family: $font-family-sans-serif;
|
|
margin: 0;
|
|
color: inherit !important;
|
|
text-align: center;
|
|
|
|
.bds-home-hero__subtitle {
|
|
font-family: $font-family-monospace !important;
|
|
}
|
|
}
|
|
|
|
&__description {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
&__media {
|
|
width: auto;
|
|
height: auto;
|
|
display: block;
|
|
object-fit: contain;
|
|
}
|
|
} |