Skip to content

Commit 6d2e4df

Browse files
jasonrandrewsjasonrandrews
authored
Merge pull request #3425 from jasonrandrews/review2
CLS improvements
2 parents 9530a45 + 2152233 commit 6d2e4df

6 files changed

Lines changed: 89 additions & 51 deletions

File tree

‎assets/css/content.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ img.content-uploaded-image.centered {
153153
/* have to style the span like a paragraph, required for nesting caption in default markdown configruation */
154154
display: block; /* or block, depending on the desired layout */
155155
font-style: italic;
156-
font-weight: 500;
156+
font-weight: 400;
157157
margin-top: 0px;
158158
font-size: 1rem;
159159
}

‎assets/css/cross-page.css‎

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -12,60 +12,35 @@
1212

1313
/* UNIVERSAL FONTS */
1414
/****************************************************/
15-
/* Ignored for now, adding in head.html via google fonts. Can use this locally to optimize if needed */
16-
17-
18-
/* Lato font get from local fonts folder, not fonts.google.com as it loads facebook/youtube tracking data */
19-
/* Normal, Italic, Bold
20-
300, 400, 500 */
21-
22-
/*
15+
/* Lato font self-hosted from /fonts/ to avoid external requests and reduce CLS */
2316
@font-face {
2417
font-family: 'Lato';
2518
font-style: normal;
2619
font-weight: 300;
27-
src: url('../fonts/LatoLatin-Light.woff2') format('woff2'),
28-
url('../fonts/LatoLatin-Light.ttf') format('ttf');
29-
}
30-
31-
@font-face {
20+
font-display: swap;
21+
src: url('/fonts/LatoLatin-Light.woff2') format('woff2');
22+
}
23+
@font-face {
3224
font-family: 'Lato';
3325
font-style: normal;
3426
font-weight: 400;
35-
src: url('../fonts/LatoLatin-Regular.woff2') format('woff2'),
36-
url('../fonts/LatoLatin-Regular.ttf') format('ttf');
37-
}
38-
39-
@font-face {
40-
font-family: 'Lato';
41-
font-style: normal;
42-
font-weight: 500;
43-
src: url('../fonts/LatoLatin-Medium.woff2') format('woff2'),
44-
url('../fonts/LatoLatin-Medium.ttf') format('ttf');
45-
}
46-
27+
font-display: swap;
28+
src: url('/fonts/LatoLatin-Regular.woff2') format('woff2');
29+
}
4730
@font-face {
4831
font-family: 'Lato';
4932
font-style: italic;
5033
font-weight: 300;
51-
src: url('../fonts/LatoLatin-LightItalic.woff2') format('woff2'),
52-
url('../fonts/LatoLatin-LightItalic.ttf') format('ttf');
53-
}
54-
@font-face {
34+
font-display: swap;
35+
src: url('/fonts/LatoLatin-LightItalic.woff2') format('woff2');
36+
}
37+
@font-face {
5538
font-family: 'Lato';
5639
font-style: italic;
5740
font-weight: 400;
58-
src: url('../fonts/LatoLatin-Italic.woff2') format('woff2'),
59-
url('../fonts/LatoLatin-Italic.ttf') format('ttf');
60-
}
61-
@font-face {
62-
font-family: 'Lato';
63-
font-style: italic;
64-
font-weight: 500;
65-
src: url('../fonts/LatoLatin-MediumItalic.woff2') format('woff2'),
66-
url('../fonts/LatoLatin-MediumItalic.ttf') format('ttf');
67-
}
68-
*/
41+
font-display: swap;
42+
src: url('/fonts/LatoLatin-Italic.woff2') format('woff2');
43+
}
6944

7045

7146
/* UNIVERSAL */
@@ -183,17 +158,31 @@ table tbody td {
183158

184159

185160

161+
/* CLS fix: reserve space for nav before hydration */
162+
arm-top-navigation:not(:defined) {
163+
display: block;
164+
min-height: 80px;
165+
}
166+
@media (max-width: 1024px) {
167+
arm-top-navigation:not(:defined) {
168+
min-height: 60px;
169+
}
170+
}
171+
186172
/* Fix global nav height */
173+
/* The arm-global-web-components script renders a position:fixed nav (0 flow space)
174+
and may inject a 50px sub-navigation bar in flow */
187175
/*************************************/
188176
#global-nav-height-fixer {
189177
max-width: 100vw;
190-
min-height: 80px;
178+
height: 80px;
179+
overflow: hidden;
191180
position: relative;
192181
top: 0;
193182
}
194183
@media (max-width: 1024px) { /* smaller screens than LG */
195184
#global-nav-height-fixer {
196-
min-height: 60px;
185+
height: 60px;
197186
}
198187
}
199188
.nav-transparent {
@@ -453,3 +442,11 @@ html[theme='light'] body {
453442
ads-masthead { --ads-masthead-horizontal-padding: 5px; }
454443
}
455444

445+
/* CLS fix: reserve space for arm-footer before hydration */
446+
arm-footer-navigation:not(:defined) {
447+
display: block;
448+
min-height: 300px;
449+
}
450+
#arm-footer {
451+
contain: layout;
452+
}

‎assets/css/home.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,32 @@
11

22

33

4+
/* CLS fix: reserve space for web components before hydration */
5+
ads-search:not(:defined) {
6+
display: block;
7+
min-height: 45px;
8+
}
9+
ads-cta-button:not(:defined) {
10+
display: inline-block;
11+
min-height: 40px;
12+
min-width: 200px;
13+
}
14+
ads-breadcrumbs:not(:defined) {
15+
display: block;
16+
min-height: 32px;
17+
}
18+
19+
/* CLS fix: lock the breadcrumb masthead height so hydration doesn't shift content below */
20+
#only-breadcrumb-masthead {
21+
height: 40px;
22+
overflow: hidden;
23+
}
24+
25+
/* CLS fix: lock the description+button area height to prevent shift when ads-cta-button hydrates */
26+
.homepage-top-desc {
27+
min-height: 110px;
28+
}
29+
430
/*********************************************************************
531
632
Main Topic Cards

‎assets/css/list-pages.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,25 @@ Covers the following pages:
77

88

99

10+
/* CLS fix: reserve space for web components before hydration
11+
*******************************************************************/
12+
ads-card:not(:defined) {
13+
display: block;
14+
min-height: 180px;
15+
}
16+
ads-search:not(:defined) {
17+
display: block;
18+
min-height: 45px;
19+
}
20+
ads-expansion-panel:not(:defined) {
21+
display: block;
22+
min-height: 48px;
23+
}
24+
ads-masthead:not(:defined) {
25+
display: block;
26+
min-height: 100px;
27+
}
28+
1029
/* Search / Status bar for active filters, # displayed, and sorting
1130
*******************************************************************/
1231
#result-sort-div {
@@ -313,7 +332,7 @@ html[theme="light"] .learning-path-title, html[theme="light"] .basics-title {
313332
/*font-weight: bold;
314333
font-size:1.25rem;
315334
*/
316-
font-weight: 500;
335+
font-weight: 400;
317336

318337
margin-top: 0px;
319338
margin-bottom: 4px;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ <h1 id="homepage-header" class="orchard-breeze-text">Arm Learning Paths</h1>
6565
<a href="{{.Permalink}}">
6666
<div class="main-topic-card c-row" style="flex-wrap: nowrap !important;">
6767
<div class="c-col-3">
68-
<img alt="Icon for {{.Title}}" aria-hidden="true" src="img/main-topic-icons/{{.Title | urlize}}.svg" />
68+
<img alt="Icon for {{.Title}}" aria-hidden="true" src="img/main-topic-icons/{{.Title | urlize}}.svg" width="60" height="45" />
6969
</div>
7070
<div class="maintopic-content c-col-9 u-margin-left-1">
7171
<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
7979
<a href="/tag/ml/">
8080
<div class="main-topic-card c-row" style="flex-wrap: nowrap !important;">
8181
<div class="c-col-3">
82-
<img alt="Icon for AI" aria-hidden="true" src="img/main-topic-icons/ai.svg" style="width: 100%;" />
82+
<img alt="Icon for AI" aria-hidden="true" src="img/main-topic-icons/ai.svg" width="60" height="45" style="width: 100%;" />
8383
</div>
8484
<div class="maintopic-content c-col-9 u-margin-left-1">
8585
<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‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,7 @@
3939

4040
{{ partial "head/jsonld.html" . }}
4141

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

4844

4945
<!-- ADS Imports -->

0 commit comments

Comments
 (0)