diff --git a/assets/css/content-pages.css b/assets/css/content-pages.css index 88b8789908..82668c8410 100644 --- a/assets/css/content-pages.css +++ b/assets/css/content-pages.css @@ -5,10 +5,31 @@ top:5px; } +.left-nav-pane a.a-tab { + display: block; + line-height: 0; + margin: 0 !important; + padding: 0 !important; +} + +.left-nav-pane a.a-tab + a.a-tab { + margin-top: -1px !important; +} + /* Tab color on left */ - .tab-row { +.left-nav-pane .tab-row { background-color: var(--arm-dark-grey); + display: flex; + gap: 0 !important; + line-height: normal; + margin: 0 !important; + padding: 0 !important; + row-gap: 0 !important; +} + +.left-nav-pane a.a-tab + a.a-tab .tab-row { + margin-top: -1px !important; } html[theme='dark'] .tab-row { background-color: var(--arm-black); /* rgba(163, 168, 174,1); #2A2B2D; */ @@ -26,8 +47,11 @@ html[theme='dark'] .tab-row.active { .tab-right-card { border-style: solid; border-width: 1px; + box-sizing: border-box; width: 100%; margin-left: 10px; + margin-top: 0; + margin-bottom: 0; border-color: var(--arm-dark-grey); background-color: var(--arm-black); @@ -61,6 +85,7 @@ html[theme='dark'] .tab-right-card > h6 { .tab-right-card-header { margin: 10px; font-size:1em; + line-height: 1.2; } /* Force a 2-line clamp for masthead title */ @@ -87,7 +112,7 @@ a:hover { border-color: var(--arm-green); } .tab-row.inactive:hover h6 { - color: var(--arm-green); } + color: var(--lp-hover-text); } @@ -103,6 +128,7 @@ p.github-link { margin-bottom: 0px; color: var(--arm-web-safe-blue); + line-height: 1.25; text-decoration: none; } @@ -110,7 +136,7 @@ html[theme='dark'] p.github-link { color: var(--arm-light-blue); } html[theme='dark'] p.github-link:hover { - color: var(--arm-green); + color: var(--lp-hover-text); } div.github-div { @@ -133,6 +159,16 @@ html[theme='dark'] div.github-div { } +div.github-div > a { + display: block; + margin: 0; + padding: 0; +} + +div.github-div > a + a { + margin-top: 8px; +} + /* Multi-tool page styling (like for docker) @@ -170,11 +206,11 @@ html[theme='dark'] .multi-tool-selection-title { } ads-card.multi-install-card:hover .multi-tool-selection-title{ transition: color 0.3s ease-in-out; - color: var(--arm-green); + color: var(--lp-hover-text); } html[theme='dark'] ads-card.multi-install-card:hover .multi-tool-selection-title { transition: color 0.3s ease-in-out; - color: var(--arm-green); + color: var(--lp-hover-text); } @@ -258,7 +294,7 @@ html[theme='dark'] .incorrect-explain {color: #e86868} /* 27% lighter than arm's text-decoration: none; } .social-icons a:hover { - color: var(--arm-green); + color: var(--lp-hover-text); } @@ -342,11 +378,11 @@ html[theme='dark'] ads-expansion-panel.generated-summary-faq__panel { text-decoration: none; } .share-icon:hover { - fill: var(--arm-green); + fill: var(--lp-hover-text); cursor: pointer; } #link-copied-success { - color: var(--arm-green); + color: var(--lp-hover-text); background-color: var(--arm-black); border-radius: 10px; padding-left:8px; diff --git a/assets/css/content.css b/assets/css/content.css index d7083b6e09..bf833b968a 100644 --- a/assets/css/content.css +++ b/assets/css/content.css @@ -196,7 +196,7 @@ div.answer label { --ads-horizontal-tabs-tab-color-active: var(--arm-orange); --ads-horizontal-tabs-underline-color: var(--arm-orange); - --ads-horizontal-tabs-tab-color-hover: var(--arm-green); + --ads-horizontal-tabs-tab-color-hover: var(--lp-hover-text); --ads-horizontal-tabs-tab-content-background-color: var(--arm-color-footing); } diff --git a/assets/css/cross-page.css b/assets/css/cross-page.css index 24ad075ad5..cfbe307b95 100644 --- a/assets/css/cross-page.css +++ b/assets/css/cross-page.css @@ -46,6 +46,19 @@ /* UNIVERSAL */ /****************************************************/ +/* Local ADS v5 accent experiment */ +:root { + --lp-accent-primary: #6023DE; /* ADS UI Violet 65 */ + --lp-accent-secondary: #D1BAFC; /* ADS UI Violet 04 */ + --lp-hover-text: #D9D9D9; /* ADS UI Gray 35 */ + + /* Keep existing site styles working while testing the v5 palette. */ + --arm-green: var(--lp-accent-primary); + --arm-light-blue: var(--lp-accent-secondary); + --arm-web-safe-blue: var(--lp-accent-secondary); + --arm-blue: var(--lp-accent-secondary); +} + /* ADS FIXES */ /***************************************************/ /* Font size hardcoding to fix ADS */ @@ -87,47 +100,50 @@ ads-button { /* primary */ --ads-button-background-color-primary-hover: var(--arm-green); --ads-button-border-color-primary-hover: var(--arm-green); + --ads-button-color-primary-hover: var(--lp-hover-text); /* secondary */ --ads-button-border-color-secondary-hover: var(--arm-green); - --ads-button-color-secondary-hover: var(--arm-green); + --ads-button-color-secondary-hover: var(--lp-hover-text); /* tertiary */ --ads-button-border-color-tertiary-hover: var(--arm-green); - --ads-button-color-tertiary-hover: var(--arm-green); + --ads-button-color-tertiary-hover: var(--lp-hover-text); } ads-cta-button { /* primary */ --ads-cta-button-background-color-primary-hover: var(--arm-green); --ads-cta-button-border-color-primary-hover: var(--arm-green); + --ads-cta-button-color-primary-hover: var(--lp-hover-text); /* secondary */ --ads-cta-button-border-color-secondary-hover: var(--arm-green); - --ads-cta-button-color-secondary-hover: var(--arm-green); + --ads-cta-button-color-secondary-hover: var(--lp-hover-text); /* tertiary */ --ads-cta-button-border-color-tertiary-hover: var(--arm-green); - --ads-cta-button-color-tertiary-hover: var(--arm-green); + --ads-cta-button-color-tertiary-hover: var(--lp-hover-text); } /* button, form submit syntax */ input[type="submit"]:hover { background-color: var(--arm-green); border-color: var(--arm-green); + color: var(--lp-hover-text); box-shadow: none; } ads-tag { --ads-tag-border-color-hover: var(--arm-green); - --ads-tag-color-hover: var(--arm-green); + --ads-tag-color-hover: var(--lp-hover-text); } /* Remove text decorations on all a links when highlighted */ a:hover { text-decoration: none; - color: var(--arm-green); + color: var(--lp-hover-text); } ads-cta-link { - --ads-cta-link-color-hover: var(--arm-green); + --ads-cta-link-color-hover: var(--lp-hover-text); } ads-search { --ads-search-border-color-hover: var(--arm-green); @@ -194,7 +210,6 @@ arm-top-navigation:not(:defined) { background-color: #010101; } - /* Fix Masthead Height */ #expanded-masthead { background-color: transparent; @@ -218,9 +233,26 @@ ads-masthead { ads-breadcrumbs { - --ads-breadcrumb-color: var(--arm-green); - --ads-breadcrumbs-link-color: var(--arm-green); - --ads-breadcrumbs-link-color-visited: var(--arm-green); + --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; +} + +#breadcrumb-element ads-breadcrumb[current] { + --ads-breadcrumb-color: white; + --ads-breadcrumb-current-color: white; + --ads-breadcrumbs-current-color: white; + color: white; +} + +#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); } @@ -251,8 +283,8 @@ ads-breadcrumbs { border-style: solid; border-width: 1px; border-radius: 0px; - border-color: rgba(149, 214, 0, 0.25); /* var(--arm-green) with 25% transparency */ - border-color: rgba(0, 193, 222, 0.25); /* var(--arm-light-blue) with 25% transparency */ + border-color: rgba(96, 35, 222, 0.25); /* var(--lp-accent-primary) with 25% transparency */ + border-color: rgba(209, 186, 252, 0.25); /* var(--lp-accent-secondary) with 25% transparency */ padding-left: 4px; padding-right: 4px; @@ -296,7 +328,7 @@ ads-breadcrumbs { margin: -1px; z-index: -1; border-radius: inherit; - background: linear-gradient(90deg, #95D629, #20C1DE); + background: linear-gradient(90deg, var(--lp-accent-primary), var(--lp-accent-secondary)); opacity: 0; transition: opacity 0.3s ease; } @@ -323,7 +355,7 @@ ads-breadcrumbs { margin: -2px; z-index: -1; border-radius: inherit; - background: linear-gradient(90deg, #95D629, #20C1DE ); + background: linear-gradient(90deg, var(--lp-accent-primary), var(--lp-accent-secondary)); opacity: 0; transition: opacity 0.3s ease; } @@ -381,7 +413,7 @@ html[theme='light'] body { /* Mobile background */ @media (max-width: 768px) { html[theme='dark'] body { - background-image: url("/img/bg-img-736x800.webp"); + background-image: url("/img/bg-img-736x800-purple.webp"); background-color: var(--arm-color-footing); background-position: 0% 100%; background-attachment: fixed; @@ -391,7 +423,7 @@ html[theme='light'] body { /* Laptop background */ @media (min-width: 768px) { html[theme='dark'] body { - background-image: url("/img/bg-img-1920x1600.webp"); + background-image: url("/img/bg-img-1920x1600-purple.webp"); background-color: var(--arm-color-footing); background-position: 0% 100%; background-attachment: fixed; @@ -402,7 +434,7 @@ html[theme='light'] body { /* Large Monitor background */ @media (min-width: 1400px) { html[theme='dark'] body { - background-image: url("/img/bg-img-2500x1700.webp"); + background-image: url("/img/bg-img-2500x1700-purple.webp"); background-color: var(--arm-color-footing); background-position: 0% 100%; background-attachment: fixed; diff --git a/assets/css/demo.css b/assets/css/demo.css index 27853c9886..9937eeb699 100644 --- a/assets/css/demo.css +++ b/assets/css/demo.css @@ -173,7 +173,7 @@ font-size: 14px!important; } #reset-demo-txt:hover { - color: var(--arm-green); + color: var(--lp-hover-text); } #ping-info, #traffic-info, #terms-of-use { float: left; diff --git a/assets/css/feedback.css b/assets/css/feedback.css index 9e5f0b2cad..d34540b98b 100644 --- a/assets/css/feedback.css +++ b/assets/css/feedback.css @@ -16,40 +16,17 @@ } .rating label { color: white; + cursor: pointer; position: relative; } -/* -.rating label:hover, -.rating label:hover ~ label, -.rating input:checked + label, -.rating input:checked + label ~ label { - color: pink!important; -} -*/ -.rating label:hover:before, -.rating label:hover ~ label:before, -.rating input:checked + label:before, -.rating input:checked + label ~ label:before { - content: "\f005"; /* fa-star */ - font-family: "Font Awesome 6 Pro"; - font-weight: 900; - font-size: 2rem; /* fa-2x */ - color: white!important; - position: absolute; - left: 0; - top: 0; - margin-top:-8px; -} - -/* -.rating i.fa-star::before { - content: "\f005"; - - padding-right:5px; - color: white; +.rating label:hover i, +.rating label:hover ~ label i, +.rating input:checked + label i, +.rating input:checked + label ~ label i { + font-family: "Font Awesome 6 Pro"; + font-weight: 900; } -*/ /****************************************************/ @@ -85,4 +62,4 @@ html[theme='dark'] #error-text {color: hsl(0, 73.9%, 60%);} /* 10% lighter than } #feedback-3-thanks.smooth-open { opacity:1 -} \ No newline at end of file +} diff --git a/assets/css/home.css b/assets/css/home.css index 842872d96f..47ee25374a 100644 --- a/assets/css/home.css +++ b/assets/css/home.css @@ -40,6 +40,9 @@ ads-breadcrumbs:not(:defined) { .main-topic-card { padding: 16px; + min-height: 152px; + height: 152px; + align-items: center; background-color: var(--arm-color-base); border: 1px solid transparent; border-color: #000000; @@ -60,6 +63,7 @@ ads-breadcrumbs:not(:defined) { .maintopic-content { text-align: left; + min-width: 0; } .maintopic-image { @@ -68,17 +72,49 @@ ads-breadcrumbs:not(:defined) { height: 50px; } +.main-topic-card > .c-col-3 { + flex: 0 0 72px; + max-width: 72px; + min-width: 72px; + display: flex; + align-items: center; + justify-content: center; +} + +.main-topic-card img[src*="main-topic-icons"] { + width: 64px; + height: 50px; + object-fit: contain; + display: block; +} + +.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); + transform-origin: center; +} + /* Title styling */ /**************************************/ .main-topic-title { color: var(--arm-light-blue); font-weight: 700; font-size: 20px; + line-height: 1.2; +} + +.main-topic-card p { + line-height: 1.45; } .main-topic-card:hover .main-topic-title { transition: color 0.3s ease-in-out; - color: var(--arm-green); + color: var(--lp-hover-text); } @@ -194,4 +230,4 @@ table.contributor-table tbody { .homepage-dynamic-bottom-spacing { margin-bottom: 32px; } -} \ No newline at end of file +} diff --git a/assets/css/list-pages.css b/assets/css/list-pages.css index b0c4e337da..208f882eaa 100644 --- a/assets/css/list-pages.css +++ b/assets/css/list-pages.css @@ -82,10 +82,10 @@ html[theme="dark"] #tag-clear-btn { } #tag-clear-btn:hover { - color: var(--arm-web-safe-orange); + color: var(--lp-hover-text); } html[theme="dark"] #tag-clear-btn:hover { - color: var(--arm-web-safe-orange); + color: var(--lp-hover-text); } .sorting-criteria.active { @@ -264,19 +264,19 @@ ads-card.path-card.featured-path-card:hover ads-card-content::before { .basics-title:hover { transition: color 0.3s ease-in-out; - color: var(--arm-green); + color: var(--lp-hover-text); cursor: pointer; } ads-card.path-card:hover .learning-path-title { transition: color 0.3s ease-in-out; - color: var(--arm-green); + color: var(--lp-hover-text); } ads-card.path-card:hover .pinned-inline-icon, ads-card.path-card:hover .pinned-featured-label { transition: color 0.3s ease-in-out; - color: var(--arm-green); + color: var(--lp-hover-text); } /* adjust height depending on screen size */ @@ -312,11 +312,19 @@ ads-card.path-card .learning-path-title-div { /* xs and sm */ color: var(--arm-web-safe-blue); font-size: 0.95rem; line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.35em; + height: 1.35em; + overflow: visible; } .pinned-inline-icon i { display: inline-block; transform: rotate(-45deg); + transform-origin: center; + line-height: 1; } html[theme="dark"] .pinned-inline-icon, @@ -418,11 +426,11 @@ ads-card-content.tool-card-content::before { } ads-card.tool-card:hover p { - color:var(--arm-green); + color: var(--lp-hover-text); margin-left: 12px; } html[theme="dark"] ads-card.tool-card:hover p { - color:var(--arm-green); + color: var(--lp-hover-text); } @@ -462,7 +470,7 @@ html[theme='dark'] ads-card.module-card { color: var(--arm-blue); } .module-card-a:hover { - color: var(--arm-web-safe-orange);; + color: var(--lp-hover-text); } .module-card-subtitle { diff --git a/themes/arm-design-system-hugo-theme/layouts/index.html b/themes/arm-design-system-hugo-theme/layouts/index.html index f81c1fc29b..239fad2fe9 100644 --- a/themes/arm-design-system-hugo-theme/layouts/index.html +++ b/themes/arm-design-system-hugo-theme/layouts/index.html @@ -106,4 +106,3 @@

AI

{{ end }} - diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/mobile-search-and-filter.html b/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/mobile-search-and-filter.html index 29db5b17bc..55ecc2788d 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/mobile-search-and-filter.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/mobile-search-and-filter.html @@ -19,7 +19,7 @@
- + @@ -38,4 +38,4 @@
- \ No newline at end of file + diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/pagefind-on-homepage.html b/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/pagefind-on-homepage.html index 128a5df1bc..4ef0d412a8 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/pagefind-on-homepage.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/pagefind-on-homepage.html @@ -28,7 +28,7 @@ .pagefind-ui__button:focus { font-weight: 400!important; font-size: 20px!important; - color: var(--arm-green)!important; + color: var(--lp-hover-text)!important; } @@ -40,12 +40,12 @@ .pagefind-ui__button:focus { border-color: var(--arm-green)!important; - color: var(--arm-green)!important; + color: var(--lp-hover-text)!important; } .pagefind-ui__search-input:hover::placeholder, .pagefind-ui__search-input:focus::placeholder { - color: rgba(149,214,0,0.7)!important; + color: rgba(217,217,217,0.7)!important; } @@ -65,7 +65,7 @@ } .pagefind-ui__result-link:hover { - color: var(--arm-green)!important; + color: var(--lp-hover-text)!important; } .pagefind-ui__search-clear { 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 e6b24dd365..8ad73fbd6a 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 @@ -43,9 +43,18 @@ - - - + + diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html b/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html index 82a5656d9c..cbdda54571 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html @@ -20,7 +20,7 @@