From e65a7257f5963d49116ab1cca9ed35cab3102c45 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Tue, 19 May 2026 02:28:49 +0000 Subject: perf(load): font-display swap and content-visibility on badge wall Two unrelated modernisations: - Adds &display=swap to the Roboto and Overpass Google Fonts URLs imported by Wrapped's stylesheet. Avoids the invisible-text flash during font load on the Wrapped page; DM Sans already had this. - Adds content-visibility: auto to each child of .badges (the grid on the badge wall page). Browser skips layout and paint for off -screen badges until they scroll into view. contain-intrinsic-size auto 8rem reserves placeholder space so the scrollbar stays stable. --- src/lib/Tools/Wrapped/wrapped.css | 4 ++-- src/lib/User/BadgeWall/badges.css | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/lib/Tools/Wrapped/wrapped.css b/src/lib/Tools/Wrapped/wrapped.css index e965f873..36435b66 100644 --- a/src/lib/Tools/Wrapped/wrapped.css +++ b/src/lib/Tools/Wrapped/wrapped.css @@ -1,5 +1,5 @@ -@import url("https://proxy.due.moe/?q=https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"); -@import url("https://proxy.due.moe/?q=https://fonts.googleapis.com/css?family=Overpass:400,600,700,800"); +@import url("https://proxy.due.moe/?q=https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"); +@import url("https://proxy.due.moe/?q=https://fonts.googleapis.com/css?family=Overpass:400,600,700,800&display=swap"); .categories-grid { display: flex; diff --git a/src/lib/User/BadgeWall/badges.css b/src/lib/User/BadgeWall/badges.css index 19f8996f..221f3829 100644 --- a/src/lib/User/BadgeWall/badges.css +++ b/src/lib/User/BadgeWall/badges.css @@ -11,6 +11,11 @@ gap: 0.25rem; } +.badges > * { + content-visibility: auto; + contain-intrinsic-size: auto 8rem; +} + .edit-row-2 { margin-top: -1.25rem; } -- cgit v1.2.3