Skip to content

Commit 368af5b

Browse files
chrismoroneychrismoroney
committed
Zach's feedback + images + alert
1 parent 12bb106 commit 368af5b

14 files changed

Lines changed: 129 additions & 60 deletions

File tree

‎assets/css/content-pages.css‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -88,20 +88,6 @@ html[theme='dark'] .tab-right-card > h6 {
8888
line-height: 1.2;
8989
}
9090

91-
/* Force a 2-line clamp for masthead title */
92-
ads-masthead #ads-masthead-title {
93-
line-height: 1.2;
94-
padding-bottom: 6px;
95-
box-sizing: border-box;
96-
max-height: calc(1.2em * 2 + 8px); /* dyncamically calculate height depending on length of title */
97-
overflow: hidden;
98-
display: -webkit-box;
99-
-webkit-line-clamp: 2;
100-
-webkit-box-orient: vertical;
101-
white-space: normal;
102-
}
103-
104-
10591
/* hover effects */
10692
a:hover {
10793
text-decoration: none; }
@@ -155,7 +141,7 @@ div.github-div {
155141

156142
html[theme='dark'] div.github-div {
157143
border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
158-
background-color: var(--color-background-primary);
144+
background-color: var(--ads-ui-ink-100);
159145

160146
}
161147

@@ -185,12 +171,12 @@ ads-card.multi-install-card {
185171
--ads-card-box-shadow-hover: 0 3px 6px 1px rgba(0,0,0,0.16); /* 0 1px 3px 3px rgba(0,0,0,0.25); */
186172
}
187173
html[theme='dark'] ads-card.multi-install-card {
188-
--ads-card-background-color: var(--color-background-tertiary);
174+
--ads-card-background-color: var(--ads-ui-ink-80);
189175
--ads-card-border-color: #000000;
190176
/*--ads-card-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);*/
191177

192178
/* hover state */
193-
--ads-card-background-color-hover: var(--color-background-tertiary);
179+
--ads-card-background-color-hover: var(--ads-ui-ink-80);
194180
--ads-card-border-color-hover: transparent;
195181
/*--ads-card-box-shadow-hover: 0 3px 12px rgba(0, 0, 0, 0.5);*/
196182

‎assets/css/content.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
/* Box around content (learning paths and tools) */
1919
html[theme="dark"] #main {
20-
background-color: var(--color-background-secondary);
20+
background-color: var(--ads-ui-ink-90);
2121
}
2222

2323
div.content-box {
@@ -32,7 +32,7 @@ div.content-box {
3232
border-radius: 5px;
3333

3434
border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
35-
background-color: var(--color-background-primary);
35+
background-color: var(--ads-ui-ink-100);
3636
}
3737
html[theme="light"] div.content-box {
3838
background-color: white;

‎assets/css/cross-page.css‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,6 @@
5252
--lp-accent-secondary: #D1BAFC; /* ADS UI Violet 04 */
5353
--lp-hover-text: #D9D9D9; /* ADS UI Gray 35 */
5454

55-
/* ADS v5 Arm Ink background tokens. */
56-
--color-background-primary: #080225;
57-
--color-background-secondary: #16122A;
58-
--color-background-tertiary: #211B3B;
59-
6055
/* Keep existing site styles working while testing the v5 palette. */
6156
--arm-green: var(--lp-accent-primary);
6257
--arm-light-blue: var(--lp-accent-secondary);
@@ -171,9 +166,7 @@ table tbody td {
171166
/* Fix Nav Masthead Breadcrumb container */
172167
/*************************************/
173168
#nav-masthead-breadcrumbs {
174-
background-image: url("/img/masthead-background.webp"); /* The image used */
175-
background-color: var(--arm-color-footing); /* Used if the image is unavailable */
176-
background-size: cover;
169+
background-color: var(--ads-ui-ink-80);
177170
}
178171

179172

@@ -234,6 +227,26 @@ arm-top-navigation:not(:defined) {
234227
ads-masthead {
235228
--ads-masthead-border-bottom-color: transparent;
236229
}
230+
231+
/* Bypass ADS's fixed 70% heading wrapper while retaining its typography. */
232+
ads-masthead #ads-masthead-title {
233+
box-sizing: border-box;
234+
color: var(--ads-masthead-color, #E6E6E9);
235+
font-size: 32px;
236+
line-height: 35px;
237+
max-height: none;
238+
overflow: visible;
239+
overflow-wrap: anywhere;
240+
white-space: normal;
241+
width: calc(100% - 32px);
242+
}
243+
244+
@media (min-width: 768px) {
245+
ads-masthead #ads-masthead-title {
246+
font-size: 48px;
247+
line-height: 53px;
248+
}
249+
}
237250

238251

239252

@@ -248,7 +261,7 @@ ads-masthead {
248261
/* Replicate style of breadcrumb in masthead when alone. */
249262
#only-breadcrumb-masthead {
250263
width: 100%;
251-
background-color: var(--color-background-primary);
264+
background-color: var(--ads-ui-ink-100);
252265
padding-top: 8px;
253266
padding-left: 15px; /* u-padding-left-2-1/2 */
254267
padding-bottom: 8px;
@@ -354,7 +367,7 @@ html[theme='light'] body {
354367
/* Dark Theme */
355368
/****************************************************/
356369
html[theme='dark'] body {
357-
background-color: var(--color-background-primary);
370+
background-color: var(--ads-ui-ink-100);
358371
background-image: none;
359372
}
360373

‎assets/css/home.css‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ ads-breadcrumbs:not(:defined) {
1818

1919
/* The homepage uses the ADS v5 Arm Ink background hierarchy. */
2020
html[theme='dark'] body {
21-
background-color: var(--color-background-primary);
21+
background-color: var(--ads-ui-ink-100);
2222
background-image: none;
2323
}
2424

@@ -49,15 +49,15 @@ html[theme='dark'] body {
4949
min-height: 152px;
5050
height: 152px;
5151
align-items: center;
52-
background-color: var(--color-background-tertiary);
52+
background-color: var(--ads-ui-ink-80);
5353
border: 1px solid transparent;
5454
border-color: #000000;
5555
transition:
5656
transform 0.3s ease-in-out,
5757
border-color 0.3s ease-in-out;
5858
}
5959
.main-topic-card:hover {
60-
background-color: var(--color-background-tertiary);
60+
background-color: var(--ads-ui-ink-80);
6161
border-color: #848192;
6262
cursor: pointer;
6363
transform: translateY(-3px); /* move up 3px */
@@ -96,14 +96,10 @@ html[theme='dark'] body {
9696
filter: brightness(0) invert(1);
9797
}
9898

99-
.main-topic-card img[src$="mobile-graphics-and-gaming.svg"],
100-
.main-topic-card img[src$="ai.svg"] {
101-
transform: scale(1.16);
102-
transform-origin: center;
103-
}
104-
105-
.main-topic-card img[src$="embedded-and-microcontrollers.svg"] {
106-
transform: scale(1.34);
99+
/* The two legacy SVGs fill their view boxes more fully than the new 64px icon set. */
100+
.main-topic-card img[src$="automotive.svg"],
101+
.main-topic-card img[src$="laptops-and-desktops.svg"] {
102+
transform: scale(0.82);
107103
transform-origin: center;
108104
}
109105

@@ -217,7 +213,7 @@ table.contributor-table th {
217213
color: black;
218214
}
219215
table.contributor-table tbody {
220-
background-color: var(--color-background-secondary);
216+
background-color: var(--ads-ui-ink-90);
221217
}
222218

223219

‎assets/css/list-pages.css‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -160,20 +160,20 @@ ads-expansion-panel.learning-path-filters {
160160
}
161161

162162
html[theme='dark'] ads-expansion-panel.learning-path-filters {
163-
--ads-expansion-panel-border-color: var(--color-background-secondary);
164-
--ads-expansion-panel-content-background-color: var(--color-background-primary);
165-
--ads-expansion-panel-toggle-background-color: var(--color-background-primary);
166-
--ads-expansion-panel-toggle-background-color-hover: var(--color-background-secondary);
163+
--ads-expansion-panel-border-color: var(--ads-ui-ink-90);
164+
--ads-expansion-panel-content-background-color: var(--ads-ui-ink-100);
165+
--ads-expansion-panel-toggle-background-color: var(--ads-ui-ink-100);
166+
--ads-expansion-panel-toggle-background-color-hover: var(--ads-ui-ink-90);
167167

168168
--ads-expansion-panel-toggle-icon-color-hover: var(--arm-green);
169169
}
170170

171171
/* mobile facets styling */
172172
div#facets-background > ads-expansion-panel.learning-path-filters {
173-
--ads-expansion-panel-border-color: var(--color-background-secondary);
174-
--ads-expansion-panel-content-background-color: var(--color-background-secondary);
175-
--ads-expansion-panel-toggle-background-color: var(--color-background-secondary);
176-
--ads-expansion-panel-toggle-background-color-hover: var(--color-background-tertiary);
173+
--ads-expansion-panel-border-color: var(--ads-ui-ink-90);
174+
--ads-expansion-panel-content-background-color: var(--ads-ui-ink-90);
175+
--ads-expansion-panel-toggle-background-color: var(--ads-ui-ink-90);
176+
--ads-expansion-panel-toggle-background-color-hover: var(--ads-ui-ink-80);
177177
}
178178

179179

@@ -212,12 +212,12 @@ ads-card.path-card.featured-path-card {
212212
}
213213

214214
html[theme='dark'] ads-card.path-card {
215-
--ads-card-background-color: var(--color-background-secondary);
216-
--ads-card-border-color: var(--color-background-tertiary);
215+
--ads-card-background-color: var(--ads-ui-ink-90);
216+
--ads-card-border-color: var(--ads-ui-ink-80);
217217
--ads-card-box-shadow: #000 @50%, X:0 Y: 3 B:12; /* probably not working */
218218

219219
/* hover state */
220-
--ads-card-background-color-hover: var(--color-background-secondary);
220+
--ads-card-background-color-hover: var(--ads-ui-ink-90);
221221
--ads-card-border-color-hover: #848192;
222222
--ads-card-box-shadow-hover: #000 @50%, X:0 Y: 3 B:12; /* probably not working */
223223
}
@@ -372,9 +372,9 @@ ads-card.tool-card {
372372

373373

374374
html[theme='dark'] ads-card.tool-card {
375-
--ads-card-background-color: var(--color-background-tertiary);
375+
--ads-card-background-color: var(--ads-ui-ink-80);
376376
--ads-card-border-color: transparent;
377-
--ads-card-background-color-hover: var(--color-background-tertiary);
377+
--ads-card-background-color-hover: var(--ads-ui-ink-80);
378378
--ads-card-border-color-hover: #848192;
379379
--ads-card-box-shadow-hover: none;
380380
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919

2020
{{partial "header/nav-masthead.html" .}}
2121

22+
{{ if not .IsHome }}
23+
{{ partial "header/color-refresh-alert.html" . }}
24+
{{ end }}
25+
2226
{{/* Where all content sits. Each layout file defines "main" which then sits here. */}}
2327
<div id="main" class="c-container is-responsive-width" style="min-height: 250px;">
2428
<div id="all-content-div-margined" class="u-margin-left-0 u-margin-right-0">

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,18 @@ <h1 id="homepage-header" class="orchard-breeze-text">Arm Learning Paths</h1>
6262
<div class="c-col">
6363
<div class="u-display-grid u-gap-2 sm:u-grid-columns-1 md:u-grid-columns-2 lg:u-grid-columns-2 xl:u-grid-columns-3 xxl:u-grid-columns-3 u-margin-top-1">
6464
{{ range (where .Site.Pages "Params.maintopic" true).ByWeight}}
65+
{{ $iconFilename := printf "%s.svg" (.Title | urlize) }}
66+
{{ if eq .Title "Servers and Cloud Computing" }}
67+
{{ $iconFilename = "Cloud.svg" }}
68+
{{ else if eq .Title "Mobile, Graphics, and Gaming" }}
69+
{{ $iconFilename = "Premium%20Phone.svg" }}
70+
{{ else if eq .Title "Embedded and Microcontrollers" }}
71+
{{ $iconFilename = "Microcontroller.svg" }}
72+
{{ end }}
6573
<a href="{{.Permalink}}">
6674
<div class="main-topic-card c-row" style="flex-wrap: nowrap !important;">
6775
<div class="c-col-3">
68-
<img alt="Icon for {{.Title}}" aria-hidden="true" src="img/main-topic-icons/{{.Title | urlize}}.svg" width="60" height="45" />
76+
<img alt="Icon for {{.Title}}" aria-hidden="true" src="img/main-topic-icons/{{ $iconFilename }}" width="60" height="45" />
6977
</div>
7078
<div class="maintopic-content c-col-9 u-margin-left-1">
7179
<h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">{{ replace .Title "and" "&" }}</h3>
@@ -79,7 +87,7 @@ <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">{{ replace .Ti
7987
<a href="/tag/ml/">
8088
<div class="main-topic-card c-row" style="flex-wrap: nowrap !important;">
8189
<div class="c-col-3">
82-
<img alt="Icon for AI" aria-hidden="true" src="img/main-topic-icons/ai.svg" width="60" height="45" style="width: 100%;" />
90+
<img alt="Icon for AI" aria-hidden="true" src="img/main-topic-icons/AI_2.svg" width="60" height="45" style="width: 100%;" />
8391
</div>
8492
<div class="maintopic-content c-col-9 u-margin-left-1">
8593
<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/header/color-refresh-alert.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{{/* Site-wide launch notice. The homepage is excluded by baseof.html. */}}
2+
<div id="color-refresh-alert-container" hidden>
3+
<ads-alert
4+
id="color-refresh-alert"
5+
theme="dark"
6+
level="default"
7+
has-close-button="true"
8+
text="We’ve refreshed our colors. The site’s content and functionality remain the same."
9+
></ads-alert>
10+
</div>
11+
12+
<script>
13+
(function () {
14+
var dismissalKey = 'arm-learning-paths-color-refresh-alert-dismissed-v1';
15+
var container = document.getElementById('color-refresh-alert-container');
16+
var alert = document.getElementById('color-refresh-alert');
17+
var dismissed = false;
18+
19+
try {
20+
dismissed = window.localStorage.getItem(dismissalKey) === 'true';
21+
} catch (error) {
22+
// Keep the notice available when storage is disabled.
23+
}
24+
25+
if (!dismissed) {
26+
container.hidden = false;
27+
}
28+
29+
alert.addEventListener('visibleChange', function (event) {
30+
if (event.detail && event.detail.visible === false) {
31+
try {
32+
window.localStorage.setItem(dismissalKey, 'true');
33+
} catch (error) {
34+
// The alert still closes for this page when storage is disabled.
35+
}
36+
}
37+
});
38+
})();
39+
</script>

‎themes/arm-design-system-hugo-theme/layouts/partials/header/masthead.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@
1515

1616
<!-- Change title slightly for Tag entries -->
1717
{{ if eq .Kind "term" }}
18-
<h1 id="ads-masthead-title" slot="heading"><span>Tag: {{.Title}}</span></h1>
18+
<h1 id="ads-masthead-title"><span>Tag: {{.Title}}</span></h1>
1919
{{else}}
20-
<h1 id="ads-masthead-title" slot="heading"><span>{{.Title}}</span></h1>
20+
<h1 id="ads-masthead-title"><span>{{.Title}}</span></h1>
2121
{{end}}
2222
</ads-masthead>
2323
</div>

‎themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@
3030

3131
<!-- Change title slightly for Tag entries -->
3232
{{ if eq .Kind "term" }}
33-
<h1 id="ads-masthead-title" slot="heading"><span>Tag: {{.Title}}</span></h1>
33+
<h1 id="ads-masthead-title"><span>Tag: {{.Title}}</span></h1>
3434
{{else}}
35-
<h1 id="ads-masthead-title" slot="heading"><span>{{.Title}}</span></h1>
35+
<h1 id="ads-masthead-title"><span>{{.Title}}</span></h1>
3636
{{end}}
3737
</ads-masthead>
3838
</div>

0 commit comments

Comments
 (0)