From 392eb3b43740d28e2f06655a9cb6277ba2a5138a Mon Sep 17 00:00:00 2001 From: Jason Andrews Date: Mon, 1 Jun 2026 16:48:14 -0500 Subject: [PATCH 1/2] CLS improvements --- assets/css/cross-page.css | 81 +++++++++---------- assets/css/home.css | 26 ++++++ assets/css/list-pages.css | 19 +++++ .../layouts/index.html | 4 +- .../layouts/partials/head/head.html | 6 +- 5 files changed, 87 insertions(+), 49 deletions(-) diff --git a/assets/css/cross-page.css b/assets/css/cross-page.css index bdce13fe69..24ad075ad5 100644 --- a/assets/css/cross-page.css +++ b/assets/css/cross-page.css @@ -12,60 +12,35 @@ /* UNIVERSAL FONTS */ /****************************************************/ -/* Ignored for now, adding in head.html via google fonts. Can use this locally to optimize if needed */ - - -/* Lato font get from local fonts folder, not fonts.google.com as it loads facebook/youtube tracking data */ - /* Normal, Italic, Bold - 300, 400, 500 */ - -/* +/* Lato font self-hosted from /fonts/ to avoid external requests and reduce CLS */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; - src: url('../fonts/LatoLatin-Light.woff2') format('woff2'), - url('../fonts/LatoLatin-Light.ttf') format('ttf'); - } - - @font-face { + font-display: swap; + src: url('/fonts/LatoLatin-Light.woff2') format('woff2'); +} +@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; - src: url('../fonts/LatoLatin-Regular.woff2') format('woff2'), - url('../fonts/LatoLatin-Regular.ttf') format('ttf'); - } - - @font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 500; - src: url('../fonts/LatoLatin-Medium.woff2') format('woff2'), - url('../fonts/LatoLatin-Medium.ttf') format('ttf'); - } - + font-display: swap; + src: url('/fonts/LatoLatin-Regular.woff2') format('woff2'); +} @font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; - src: url('../fonts/LatoLatin-LightItalic.woff2') format('woff2'), - url('../fonts/LatoLatin-LightItalic.ttf') format('ttf'); - } - @font-face { + font-display: swap; + src: url('/fonts/LatoLatin-LightItalic.woff2') format('woff2'); +} +@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; - src: url('../fonts/LatoLatin-Italic.woff2') format('woff2'), - url('../fonts/LatoLatin-Italic.ttf') format('ttf'); - } - @font-face { - font-family: 'Lato'; - font-style: italic; - font-weight: 500; - src: url('../fonts/LatoLatin-MediumItalic.woff2') format('woff2'), - url('../fonts/LatoLatin-MediumItalic.ttf') format('ttf'); - } -*/ + font-display: swap; + src: url('/fonts/LatoLatin-Italic.woff2') format('woff2'); +} /* UNIVERSAL */ @@ -183,17 +158,31 @@ table tbody td { +/* CLS fix: reserve space for nav before hydration */ +arm-top-navigation:not(:defined) { + display: block; + min-height: 80px; +} +@media (max-width: 1024px) { + arm-top-navigation:not(:defined) { + min-height: 60px; + } +} + /* Fix global nav height */ +/* The arm-global-web-components script renders a position:fixed nav (0 flow space) + and may inject a 50px sub-navigation bar in flow */ /*************************************/ #global-nav-height-fixer { max-width: 100vw; - min-height: 80px; + height: 80px; + overflow: hidden; position: relative; top: 0; } @media (max-width: 1024px) { /* smaller screens than LG */ #global-nav-height-fixer { - min-height: 60px; + height: 60px; } } .nav-transparent { @@ -453,3 +442,11 @@ html[theme='light'] body { ads-masthead { --ads-masthead-horizontal-padding: 5px; } } +/* CLS fix: reserve space for arm-footer before hydration */ +arm-footer-navigation:not(:defined) { + display: block; + min-height: 300px; +} +#arm-footer { + contain: layout; +} diff --git a/assets/css/home.css b/assets/css/home.css index cfc9670351..842872d96f 100644 --- a/assets/css/home.css +++ b/assets/css/home.css @@ -1,6 +1,32 @@ +/* CLS fix: reserve space for web components before hydration */ +ads-search:not(:defined) { + display: block; + min-height: 45px; +} +ads-cta-button:not(:defined) { + display: inline-block; + min-height: 40px; + min-width: 200px; +} +ads-breadcrumbs:not(:defined) { + display: block; + min-height: 32px; +} + +/* CLS fix: lock the breadcrumb masthead height so hydration doesn't shift content below */ +#only-breadcrumb-masthead { + height: 40px; + overflow: hidden; +} + +/* CLS fix: lock the description+button area height to prevent shift when ads-cta-button hydrates */ +.homepage-top-desc { + min-height: 110px; +} + /********************************************************************* Main Topic Cards diff --git a/assets/css/list-pages.css b/assets/css/list-pages.css index b98dbe7cdb..62bb8f6ccd 100644 --- a/assets/css/list-pages.css +++ b/assets/css/list-pages.css @@ -7,6 +7,25 @@ Covers the following pages: +/* CLS fix: reserve space for web components before hydration +*******************************************************************/ +ads-card:not(:defined) { + display: block; + min-height: 180px; +} +ads-search:not(:defined) { + display: block; + min-height: 45px; +} +ads-expansion-panel:not(:defined) { + display: block; + min-height: 48px; +} +ads-masthead:not(:defined) { + display: block; + min-height: 100px; +} + /* Search / Status bar for active filters, # displayed, and sorting *******************************************************************/ #result-sort-div { diff --git a/themes/arm-design-system-hugo-theme/layouts/index.html b/themes/arm-design-system-hugo-theme/layouts/index.html index 7dd4fdd9f4..f81c1fc29b 100644 --- a/themes/arm-design-system-hugo-theme/layouts/index.html +++ b/themes/arm-design-system-hugo-theme/layouts/index.html @@ -65,7 +65,7 @@

Arm Learning Paths

- +

{{ replace .Title "and" "&" }}

@@ -79,7 +79,7 @@

{{ replace .Ti
- +

AI

diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html b/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html index 6969f026b3..e6b24dd365 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html @@ -39,11 +39,7 @@ {{ partial "head/jsonld.html" . }} - - - - - + From 2152233bdf7d83f5829091b2022896e7fdb92d5e Mon Sep 17 00:00:00 2001 From: Jason Andrews Date: Fri, 26 Jun 2026 11:46:11 -0500 Subject: [PATCH 2/2] CLS improvements --- assets/css/content.css | 2 +- assets/css/list-pages.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/css/content.css b/assets/css/content.css index 78d1e34861..d7083b6e09 100644 --- a/assets/css/content.css +++ b/assets/css/content.css @@ -153,7 +153,7 @@ img.content-uploaded-image.centered { /* have to style the span like a paragraph, required for nesting caption in default markdown configruation */ display: block; /* or block, depending on the desired layout */ font-style: italic; - font-weight: 500; + font-weight: 400; margin-top: 0px; font-size: 1rem; } diff --git a/assets/css/list-pages.css b/assets/css/list-pages.css index 62bb8f6ccd..b0c4e337da 100644 --- a/assets/css/list-pages.css +++ b/assets/css/list-pages.css @@ -332,7 +332,7 @@ html[theme="light"] .learning-path-title, html[theme="light"] .basics-title { /*font-weight: bold; font-size:1.25rem; */ - font-weight: 500; + font-weight: 400; margin-top: 0px; margin-bottom: 4px;