Skip to content

Adsv5 feedback notes #3499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pareenaverma merged 5 commits into from
Jul 16, 2026
Merged

Adsv5 feedback notes #3499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
12bb106
changes according to Yesol's feedback
chrismoroney Jul 15, 2026
368af5b
Zach's feedback + images + alert
chrismoroney Jul 16, 2026
1487df1
masthead adjusting
chrismoroney Jul 16, 2026
7a1515a
adjustments to alert and card title size
chrismoroney Jul 16, 2026
753bbe6
copilot fixes
chrismoroney Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 3 additions & 17 deletions assets/css/content-pages.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,20 +88,6 @@ html[theme='dark'] .tab-right-card > h6 {
line-height: 1.2;
}

/* Force a 2-line clamp for masthead title */
ads-masthead #ads-masthead-title {
line-height: 1.2;
padding-bottom: 6px;
box-sizing: border-box;
max-height: calc(1.2em * 2 + 8px); /* dyncamically calculate height depending on length of title */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
}


/* hover effects */
a:hover {
text-decoration: none; }
Expand Down Expand Up @@ -155,7 +141,7 @@ div.github-div {

html[theme='dark'] div.github-div {
border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
background-color: rgb(23,25,27);; /* CLOSE to this, but not due to close to gradient background. var(--arm-color-base) at 75% transparency */
background-color: var(--ads-ui-ink-100);

}

Expand Down Expand Up @@ -185,12 +171,12 @@ ads-card.multi-install-card {
--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); */
}
html[theme='dark'] ads-card.multi-install-card {
--ads-card-background-color: var(--arm-color-base);
--ads-card-background-color: var(--ads-ui-ink-80);
--ads-card-border-color: #000000;
/*--ads-card-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);*/

/* hover state */
--ads-card-background-color-hover: var(--arm-color-base);
--ads-card-background-color-hover: var(--ads-ui-ink-80);
--ads-card-border-color-hover: transparent;
/*--ads-card-box-shadow-hover: 0 3px 12px rgba(0, 0, 0, 0.5);*/

Expand Down
6 changes: 5 additions & 1 deletion assets/css/content.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@


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

div.content-box {
padding-left: 16px;
padding-right: 16px;
Expand All @@ -28,7 +32,7 @@ div.content-box {
border-radius: 5px;

border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
background-color: rgba(31,32,35,0.75); /* var(--arm-color-base) at 75% transparency */
background-color: var(--ads-ui-ink-100);
}
html[theme="light"] div.content-box {
background-color: white;
Expand Down
134 changes: 34 additions & 100 deletions assets/css/cross-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ ads-search#search-box.install-guide{
padding-right: 14px;
}
ads-search {
--ads-search-button-background-color: var(--arm-color-base);
--ads-search-button-background-color: #7233F7;
}

/* Colors of buttons & links to match DevHub styling */
Expand Down Expand Up @@ -166,9 +166,7 @@ table tbody td {
/* Fix Nav Masthead Breadcrumb container */
/*************************************/
#nav-masthead-breadcrumbs {
background-image: url("/img/masthead-background.webp"); /* The image used */
background-color: var(--arm-color-footing); /* Used if the image is unavailable */
background-size: cover;
background-color: var(--ads-ui-ink-100);
}


Expand Down Expand Up @@ -212,7 +210,6 @@ arm-top-navigation:not(:defined) {

/* Fix Masthead Height */
#expanded-masthead {
background-color: transparent;
min-height: 100px; /* Keep baseline height for short titles */
height: auto; /* Allow 2-line titles to expand */
background-position: center;
Expand All @@ -229,31 +226,33 @@ arm-top-navigation:not(:defined) {
ads-masthead {
--ads-masthead-border-bottom-color: transparent;
}



ads-breadcrumbs {
--ads-breadcrumb-color: var(--lp-accent-secondary);
--ads-breadcrumb-current-color: white;
--ads-breadcrumb-hover-color: var(--lp-hover-text);
--ads-breadcrumbs-link-color: var(--lp-accent-secondary);
--ads-breadcrumbs-link-color-hover: var(--lp-hover-text);
--ads-breadcrumbs-link-color-visited: var(--lp-accent-secondary);
--ads-breadcrumbs-current-color: white;
/* Align the alert icon with the masthead title while its surface spans the page. */
#color-refresh-alert-container {
background-color: #F0F0F0;
overflow: hidden;
}

#breadcrumb-element ads-breadcrumb[current] {
--ads-breadcrumb-color: white;
--ads-breadcrumb-current-color: white;
--ads-breadcrumbs-current-color: white;
color: white;
/* Bypass ADS's fixed 70% heading wrapper while retaining its typography. */
ads-masthead #ads-masthead-title {
box-sizing: border-box;
color: var(--ads-masthead-color, #E6E6E9);
font-size: 32px;
line-height: 35px;
max-height: none;
overflow: visible;
overflow-wrap: anywhere;
white-space: normal;
width: calc(100% - 32px);
}

#breadcrumb-element ads-breadcrumb:not([current]):hover {
--ads-breadcrumb-color: var(--lp-hover-text);
--ads-breadcrumbs-link-color: var(--lp-hover-text);
color: var(--lp-hover-text);
@media (min-width: 768px) {
ads-masthead #ads-masthead-title {
font-size: 48px;
line-height: 53px;
}
}



/* Hide breadcrumb when small screen. */
Expand All @@ -267,7 +266,7 @@ ads-breadcrumbs {
/* Replicate style of breadcrumb in masthead when alone. */
#only-breadcrumb-masthead {
width: 100%;
background-color: var(--arm-color-footing);
background-color: var(--ads-ui-ink-100);
padding-top: 8px;
padding-left: 15px; /* u-padding-left-2-1/2 */
padding-bottom: 8px;
Expand All @@ -292,9 +291,7 @@ ads-breadcrumbs {
width: fit-content;
height: fit-content;

background: -webkit-linear-gradient(left,var(--arm-green), var(--arm-light-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--lp-accent-secondary);
}
.beta-homepage {
vertical-align: top;
Expand Down Expand Up @@ -328,7 +325,7 @@ ads-breadcrumbs {
margin: -1px;
z-index: -1;
border-radius: inherit;
background: linear-gradient(90deg, var(--lp-accent-primary), var(--lp-accent-secondary));
background: #848192;
opacity: 0;
transition: opacity 0.3s ease;
}
Expand All @@ -338,48 +335,12 @@ ads-breadcrumbs {



.gradient-box-tool {
/*display: inline-block;*/
position: relative;
border-radius: 0px;
z-index:1;
}

.gradient-box-tool::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 1px;
left: 2px;
margin: -2px;
z-index: -1;
border-radius: inherit;
background: linear-gradient(90deg, var(--lp-accent-primary), var(--lp-accent-secondary));
opacity: 0;
transition: opacity 0.3s ease;
}
.gradient-box-tool:hover::before {
opacity: 1;
}




html[theme="dark"] .orchard-breeze-text {
background: -webkit-linear-gradient(left,var(--arm-green), var(--arm-light-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
html[theme="dark"] .fullbourn-sunrise-text {
background: -webkit-linear-gradient(left,var(--arm-yellow), var(--arm-orange));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
html[theme="dark"] .orchard-breeze-text,
html[theme="dark"] .fullbourn-sunrise-text,
html[theme="dark"] .minhang-mist-text {
background: -webkit-linear-gradient(left,var(--arm-light-blue), var(--arm-light-grey));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: none;
color: #E6E6E9;
-webkit-text-fill-color: currentColor;
}


Expand Down Expand Up @@ -410,36 +371,9 @@ html[theme='light'] body {

/* Dark Theme */
/****************************************************/
/* Mobile background */
@media (max-width: 768px) {
html[theme='dark'] body {
background-image: url("/img/bg-img-736x800-purple.webp");
background-color: var(--arm-color-footing);
background-position: 0% 100%;
background-attachment: fixed;
background-size: 100% 100%; /* Forces smaller width; best solution for mobile sizes */
}
}
/* Laptop background */
@media (min-width: 768px) {
html[theme='dark'] body {
background-image: url("/img/bg-img-1920x1600-purple.webp");
background-color: var(--arm-color-footing);
background-position: 0% 100%;
background-attachment: fixed;
background-size: cover; /* Stretches image to fit; best solution for desktop sizes */
}
}

/* Large Monitor background */
@media (min-width: 1400px) {
html[theme='dark'] body {
background-image: url("/img/bg-img-2500x1700-purple.webp");
background-color: var(--arm-color-footing);
background-position: 0% 100%;
background-attachment: fixed;
background-size: cover; /* Stretches image to fit; best solution for desktop sizes */
}
html[theme='dark'] body {
background-color: var(--ads-ui-ink-100);
background-image: none;
}


Expand Down
30 changes: 17 additions & 13 deletions assets/css/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ ads-breadcrumbs:not(:defined) {
min-height: 32px;
}

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

/* CLS fix: lock the breadcrumb masthead height so hydration doesn't shift content below */
#only-breadcrumb-masthead {
height: 40px;
Expand Down Expand Up @@ -43,16 +49,16 @@ ads-breadcrumbs:not(:defined) {
min-height: 152px;
height: 152px;
align-items: center;
background-color: var(--arm-color-base);
background-color: var(--ads-ui-ink-80);
border: 1px solid transparent;
border-color: #000000;
transition:
transform 0.3s ease-in-out,
border-color 0.3s ease-in-out;
}
.main-topic-card:hover {
background-color: var(--arm-color-base);
border-color: var(--arm-green);
background-color: var(--ads-ui-ink-80);
border-color: #848192;
cursor: pointer;
transform: translateY(-3px); /* move up 3px */

Expand Down Expand Up @@ -86,23 +92,21 @@ ads-breadcrumbs:not(:defined) {
height: 50px;
object-fit: contain;
display: block;
/* Figma specifies neutral white icons instead of the legacy purple gradients. */
filter: brightness(0) invert(1);
}

.main-topic-card img[src$="mobile-graphics-and-gaming.svg"],
.main-topic-card img[src$="ai.svg"] {
transform: scale(1.16);
transform-origin: center;
}

.main-topic-card img[src$="embedded-and-microcontrollers.svg"] {
transform: scale(1.34);
/* The two legacy SVGs fill their view boxes more fully than the new 64px icon set. */
.main-topic-card img[src$="automotive.svg"],
.main-topic-card img[src$="laptops-and-desktops.svg"] {
transform: scale(0.82);
transform-origin: center;
}

/* Title styling */
/**************************************/
.main-topic-title {
color: var(--arm-light-blue);
color: #E6E6E9;
font-weight: 700;
font-size: 20px;
line-height: 1.2;
Expand Down Expand Up @@ -209,7 +213,7 @@ table.contributor-table th {
color: black;
}
table.contributor-table tbody {
background-color: var(--arm-color-base);
background-color: var(--ads-ui-ink-90);
}


Expand Down
Loading
Loading