docs(refactor): clean up academy css (#6097)

This PR cleans up the the CSS for the recent academy banners, sharing
styles where it seemed suitable.

Main points:
- share styling of the level badge between the links and the course
banner
- share styling of general banner shape, borders, spacing, between the
main unleash academy banner and the course-specific banner

Also does the following updates:
- change the button colors
- update the link in the main academy banner

website/src/components/unleash-academy/Banner.jsx

@@ -2,18 +2,23 @@ import React from 'react';
 
 const Component = () => {
     return (
-        <div className='banner-container'>
+        <div className='unleash-academy-banner academy-general-banner'>
-            <div className='banner'>
+            <div className='academy-general-banner-content'>
-                <h3>
+                <h3 className='academy-banner-main-text'>
                     Gain new skills, earn certifications, train your team, and
                     advance your career.
                 </h3>
-                <ul className="unleash-academy-banner-list">
+                <ul className='unleash-academy-banner-list'>
                     <li>100% Free & online</li>
                     <li>Valuable certification</li>
                 </ul>
                 <div className='small-logo'></div>
-                <span className='unleash-action-button'>Get certified</span>
+                <a
+                    href='https://docs.google.com/forms/d/1iPUk2I0k5xMzicn9aLMcPF3b9ub3ZwdVjRxCxWxV7js/viewform'
+                    className='unleash-action-button'
+                >
+                    Get certified
+                </a>
             </div>
             <div className='big-logo'></div>
         </div>

website/src/components/unleash-academy/CourseBanner.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 const Component = ({ level, description }) => {
     return (
-        <div className={ `course-banner-container ${level.toLowerCase()}`}>
+        <div className={ `unleash-academy-banner course-banner-container unleash-academy-level-container ${level.toLowerCase()}`}>
-            <span className='level'>{level}</span>
+            <span className='unleash-academy-level-badge'>{level}</span>
-            <p>{description}</p>
+            <p className="academy-banner-main-text">{description}</p>
             <ul className="unleash-academy-banner-list">
                 <li>100% Free & online</li>
                 <li>Valuable certification</li>

website/src/components/unleash-academy/Links.jsx

@@ -1,11 +1,12 @@
+
 import React from 'react';
 import Link from '@docusaurus/Link';
 
 const LinkBox = ({ level, header, description, link }) => {
     return (
-        <article className={level.toLowerCase()}>
+        <article className={`${level.toLowerCase()} unleash-academy-level-container`}>
             <div className='header'>
-                <span className='level'>{level}</span>
+                <span className='unleash-academy-level-badge'>{level}</span>
                 <h3>{header}</h3>
             </div>
             <p>{description}</p>
@@ -46,7 +47,7 @@ const links = [
 
 const Component = () => {
     return (
-        <div className='links-container'>
+        <div className='unleash-academy-links-container'>
             <ul className='unleash-academy-links'>
                 {links.map(({ level, header, description, link }) => (
                     <li key={header}>

website/src/css/custom.css

@@ -227,100 +227,40 @@ li.theme-doc-sidebar-item-category-level-1 > div::before {
    show narrow: <=710
 */
 
-/* begin certification links */
+/* shared academy styles */
 
-html[data-theme='light'] .links-container {
+.unleash-academy-level-badge {
-    --color-purple: var(--unleash-color-purple);
+    border: 2px solid;
+    border-radius: 60px;
+    padding-inline: .5em;
+    text-transform: capitalize;
 }
 
-html[data-theme='dark'] .links-container {
+html[data-theme='light'] .unleash-academy-level-badge {
-    --color-purple: rgb(76, 73, 146);
+    border-color: var(--unleash-logo-purple);
+    color: var(--unleash-logo-purple);
 }
 
-.links-container {
+html[data-theme='dark'] .unleash-academy-level-badge {
-    margin-block-start: var(--ifm-spacing-vertical);
+    border-color: var(--ifm-link-color);
-    margin-block-end: var(--ifm-spacing-vertical);
+    color: var(--ifm-link-color);
-    --button-background-color: var(--color-purple);
-    --border-color: var(--ifm-color);
 }
 
-.unleash-academy-links {
+.unleash-academy-level-container.advanced {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-flow: column;
-    width: 100%;
-    gap: var(--ifm-spacing-vertical);
-}
-
-.links-container li:has(article) {
-    margin: 0;
-    padding: 0;
-}
-
-.links-container article.advanced {
     background-image: url('/img/unleash-academy/advanced-pixels.svg');
 }
 
-.links-container article.beginners {
+.unleash-academy-level-container.beginners {
     background-image: url('/img/unleash-academy/beginner-pixels.svg');
 }
 
-.links-container article {
-    border-radius: var(--ifm-global-radius);
-    border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
-    padding: calc(var(--ifm-spacing-vertical) * 2);
-    display: grid;
-    grid-template-rows: min-content auto min-content;
-    background-position: top right;
-    background-repeat: no-repeat;
-    height: 100%;
-}
 
-.links-container article .level {
+.unleash-academy-banner {
-    border: 2px solid var(--ifm-link-color);
+    --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
-    border-radius: 60px;
-    color: var(--ifm-link-color);
-    padding-inline: .5em;
-}
-
-.links-container article .header > * + * {
-    margin-block-start: calc(var(--ifm-spacing-vertical) * .5);
-}
-
-.links-container article p {
-    font-size: var(--unleash-font-size-smaller);
-}
-
-.links-container article a {
-    border-radius: inherit;
-    width: 100%;
-    background: var(--color-purple);
-    color: white;
-    text-align: center;
-    padding: calc(var(--ifm-spacing-horizontal) * .5);
-}
-
-@media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
-    .unleash-academy-links {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-    }
-
-    .links-container article {
-        height: 100%;
-    }
-}
-
-/* End of certification links styles */
-
-/* Styles for .banner-container */
-.banner-container {
-    --button-color: var(--unleash-logo-purple);
     --unleash-academy-logo-width: 85px;
     --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
     --banner-font-color: #000;
+    --button-color: var(--unleash-logo-purple);
 
     margin-block-start: var(--ifm-spacing-vertical);
     margin-block-end: var(--ifm-spacing-vertical);
@@ -336,11 +276,14 @@ html[data-theme='dark'] .links-container {
     color: var(--banner-font-color);
 }
 
-.banner-container .banner {
+html[data-theme='dark'] .course-banner-container {
-    display: grid;
+    background-color: inherit;
-    grid-template-areas: "header logo" "bullets bullets" "button button";
+    color: inherit;
-    grid-template-columns: auto var(--unleash-academy-logo-width);
+}
-    gap: var(--ifm-spacing-horizontal);
+
+.academy-banner-main-text {
+    font-weight: normal;
+    font-size: 1.4em;
 }
 
 .unleash-academy-banner-list {
@@ -369,8 +312,15 @@ html[data-theme='dark'] .links-container {
     margin-block-start: 0;
 }
 
-.banner-container .unleash-action-button {
+@media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
-    grid-area: button;
+    .unleash-academy-banner-list {
+        flex-flow: row;
+    }
+}
+
+.unleash-action-button {
+    --button-color: #6C65E5;
+    --button-hover-color: #615BC2;
     display: block;
     border-radius: var(--ifm-global-radius);
     width: 100%;
@@ -380,13 +330,84 @@ html[data-theme='dark'] .links-container {
     padding: calc(var(--ifm-spacing-horizontal) * .5);
 }
 
-.banner-container h3 {
+.unleash-action-button:hover {
-    font-weight: normal;
+    background: var(--button-hover-color);
-    font-size: 1.4em;
+    color: white;
+    text-decoration: none;
+}
+
+/* begin certification links */
+.unleash-academy-links-container {
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: var(--ifm-spacing-vertical);
+    --button-background-color: var(--color-purple);
+    --border-color: var(--ifm-color);
+}
+
+.unleash-academy-links {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+    gap: var(--ifm-spacing-vertical);
+}
+
+.unleash-academy-links-container li:has(article) {
+    margin: 0;
+    padding: 0;
+}
+
+.unleash-academy-links-container article {
+    border-radius: var(--ifm-global-radius);
+    border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
+    padding: calc(var(--ifm-spacing-vertical) * 2);
+    display: grid;
+    grid-template-rows: min-content auto min-content;
+    background-position: top right;
+    background-repeat: no-repeat;
+    height: 100%;
+}
+
+.unleash-academy-links-container article .header > * + * {
+    margin-block-start: calc(var(--ifm-spacing-vertical) * .5);
+}
+
+.unleash-academy-links-container article p {
+    font-size: var(--unleash-font-size-smaller);
+}
+
+@media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
+    .unleash-academy-links {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .unleash-academy-links-container article {
+        height: 100%;
+    }
+}
+
+/* End of certification links styles */
+
+/* Specific styles for the main Unleash academy banner */
+.academy-general-banner-content {
+    display: grid;
+    grid-template-areas: "header logo" "bullets bullets" "button button";
+    grid-template-columns: auto var(--unleash-academy-logo-width);
+    gap: var(--ifm-spacing-horizontal);
+}
+
+.academy-general-banner-content .unleash-action-button {
+    grid-area: button;
+}
+
+.academy-general-banner .academy-banner-main-text {
     grid-area: header;
 }
 
-.banner-container .small-logo {
+.academy-general-banner .small-logo {
     grid-area: logo;
     background-image: url('/img/unleash-academy/academy-logo.svg');
     background-repeat: no-repeat;
@@ -397,24 +418,20 @@ html[data-theme='dark'] .links-container {
 }
 
 @media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
-    .banner-container .banner {
+    .academy-general-banner-content {
         grid-template-areas: "header logo" "bullets logo" "button logo";
         grid-template-columns: 480px auto;
     }
 
-    .unleash-academy-banner-list {
+    .academy-general-banner-content .unleash-action-button {
-        flex-flow: row;
-    }
-
-    .banner-container .unleash-action-button {
         width: 240px;
     }
 
-    .banner-container .small-logo {
+    .academy-general-banner .small-logo {
         display: none;
     }
 
-    .banner-container .big-logo {
+    .academy-general-banner .big-logo {
         position: absolute;
         background-image: url('/img/unleash-academy/academy-logo.svg');
         bottom: 0;
@@ -428,60 +445,37 @@ html[data-theme='dark'] .links-container {
 }
 /* end banner */
 
-/* Styles for .course-banner-container */
+/* course banner-specific styling */
-.course-banner-container {
-    --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
-    --banner-font-color: #000;
-
-    margin-block-start: var(--ifm-spacing-vertical);
-    margin-block-end: var(--ifm-spacing-vertical);
-    border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
-    padding: var(--banner-padding);
-    border-radius: var(--ifm-global-radius);
-    background-position: top right;
-    background-repeat: no-repeat;
-    overflow: hidden;
-}
-
-html[data-theme='light'] .course-banner-container {
-    background-color: #F1F0FC;
-    color: var(--banner-font-color);
-}
-
 .course-banner-container.beginners {
-    background-image: url('/img/unleash-academy/beginner-pixels.svg');
     background-size: 108px;
 }
 
 .course-banner-container.advanced {
-    background-image: url('/img/unleash-academy/advanced-pixels.svg');
     background-size: 108px;
 }
 
 .course-banner-container > * + * {
-    margin-top: var(--ifm-spacing-vertical);
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: 0;
 }
 
-.course-banner-container .level {
+.unleash-academy-level-badge {
     border: 2px solid;
     border-radius: 60px;
     padding-inline: .5em;
     text-transform: capitalize;
 }
 
-html[data-theme='light'] .course-banner-container .level {
+html[data-theme='light'] .unleash-academy-level-badge {
     border-color: var(--unleash-logo-purple);
     color: var(--unleash-logo-purple);
 }
 
-html[data-theme='dark'] .course-banner-container .level {
+html[data-theme='dark'] .unleash-academy-level-badge {
     border-color: var(--ifm-link-color);
     color: var(--ifm-link-color);
 }
 
-.course-banner-container p {
-    font-size: 1.4em;
-}
 /* docusaurus-plugin-openapi-docs styling
 
 Taken from