CLS improvements

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

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

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

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 {
@@ -313,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;

themes/arm-design-system-hugo-theme/layouts/index.html

@@ -65,7 +65,7 @@ <h1 id="homepage-header" class="orchard-breeze-text">Arm Learning Paths</h1>
                 <a href="{{.Permalink}}">
                 <div class="main-topic-card c-row" style="flex-wrap: nowrap !important;">
                     <div class="c-col-3">
-                        <img alt="Icon for {{.Title}}" aria-hidden="true" src="img/main-topic-icons/{{.Title | urlize}}.svg" />
+                        <img alt="Icon for {{.Title}}" aria-hidden="true" src="img/main-topic-icons/{{.Title | urlize}}.svg" width="60" height="45" />
                     </div>
                     <div class="maintopic-content c-col-9 u-margin-left-1">                       
                         <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">{{ replace .Title "and" "&" }}</h3>   
@@ -79,7 +79,7 @@ <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">{{ replace .Ti
             <a href="/tag/ml/">
             <div class="main-topic-card c-row" style="flex-wrap: nowrap !important;">
                 <div class="c-col-3">
-                    <img alt="Icon for AI" aria-hidden="true" src="img/main-topic-icons/ai.svg" style="width: 100%;" />
+                    <img alt="Icon for AI" aria-hidden="true" src="img/main-topic-icons/ai.svg" width="60" height="45" style="width: 100%;" />
                 </div>
                 <div class="maintopic-content c-col-9 u-margin-left-1">
                     <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">AI</h3> 

themes/arm-design-system-hugo-theme/layouts/partials/head/head.html

@@ -39,11 +39,7 @@
 
 {{ partial "head/jsonld.html" . }}
 
-<!-- Include the Arm standard Lato font for machines that don't have by default (Mac) -->
-<!-- Can be done automatically now in cross-page.css locally to speed up process -->
-<link rel="preconnect" href="https://fonts.gstatic.com" />
-<link rel="preload" href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" as="style" crossorigin="anonymous" />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" crossorigin="anonymous" />
+<!-- Lato font now self-hosted via @font-face in cross-page.css for faster loading and reduced CLS -->
 
 
     <!-- ADS Imports -->