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.

2 files changed, 7 insertions, 2 deletions

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;
 }