initial styling updates, incorporate v5

Author: chrismoroney

assets/css/cross-page.css

@@ -71,6 +71,18 @@
 /* UNIVERSAL */
 /****************************************************/
 
+/* Local ADS v5 accent experiment */
+:root {
+    --lp-accent-primary: #6023DE;   /* ADS UI Violet 65 */
+    --lp-accent-secondary: #D1BAFC; /* ADS UI Violet 04 */
+
+    /* 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 */
@@ -262,8 +274,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;
@@ -307,7 +319,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; 
 }
@@ -334,7 +346,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; 
 }
@@ -392,7 +404,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;
@@ -402,7 +414,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;
@@ -413,7 +425,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;
@@ -452,4 +464,3 @@ html[theme='light'] body {
 @media (min-width: 1200px) {
         ads-masthead { --ads-masthead-horizontal-padding: 5px; }
 }
-

assets/css/home.css

@@ -14,6 +14,9 @@
 
 .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;
@@ -34,6 +37,7 @@
 
 .maintopic-content {
     text-align: left;
+    min-width: 0;
 }
 
 .maintopic-image {
@@ -42,12 +46,44 @@
     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 {
@@ -168,4 +204,4 @@ table.contributor-table tbody {
     .homepage-dynamic-bottom-spacing {
         margin-bottom: 32px;
     }
-}
+}

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

@@ -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" />
                 </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> 
@@ -106,4 +106,3 @@ <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">AI</h3>
 
 
 {{ end }}
-

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

@@ -47,9 +47,18 @@
 
 
     <!-- ADS Imports -->
-<link rel="stylesheet" href="https://cdn.designsystem.arm.com/rel/4.9.0/arm-design-system.css" integrity="sha384-TIxVkbw6g/OlN2t0XSUGTik6Kc0pkpNEcm1bOAGO02jsHholeZipXigdXRDYqCGr" crossorigin="anonymous">
-<script type="module" src="https://cdn.designsystem.arm.com/rel/4.9.0/arm-design-system/arm-design-system.esm.js" integrity="sha384-K+IGYCWaqyh5adrYnimAXzUamdfAwRYJGwwrybHfAhmsehOIcexAPoEoEyLRJwkC" crossorigin="anonymous"></script>
-
+<link
+  rel="stylesheet"
+  href="https://cdn.designsystem.arm.com/rel/5.1.0/arm-design-system.css"
+  integrity="sha384-JqNmR8APfSKWRZYKgA79z0tZg9IfXy3N699hUmI5UhAjW9HWOkoAPWpvCOaL8yuC"
+  crossorigin="anonymous"
+/>
+<script
+  type="module"
+  src="https://cdn.designsystem.arm.com/rel/5.1.0/arm-design-system/arm-design-system.esm.js"
+  integrity="sha384-caAG7P/HrHxcdQa2gTEfvZYGPLQk7yRwVdvtRn6sa3TRKzcAyY1LMvObXKGhwFNb"
+  crossorigin="anonymous">
+</script>
     <!-- Arm Header & Footer loading -->
 <script  type="text/javascript"  src="https://www.arm.com/arm-global-web-components/devhub/app.js" ></script>