- {level}
+ {level}
{header}
{description}
@@ -46,7 +47,7 @@ const links = [ const Component = () => { return ( -
+
-
{links.map(({ level, header, description, link }) => (
- diff --git a/website/src/css/custom.css b/website/src/css/custom.css index b858c036ba..ac60531c52 100644 --- a/website/src/css/custom.css +++ b/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 { - --color-purple: var(--unleash-color-purple); +.unleash-academy-level-badge { + border: 2px solid; + border-radius: 60px; + padding-inline: .5em; + text-transform: capitalize; } -html[data-theme='dark'] .links-container { - --color-purple: rgb(76, 73, 146); +html[data-theme='light'] .unleash-academy-level-badge { + border-color: var(--unleash-logo-purple); + color: var(--unleash-logo-purple); } -.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); +html[data-theme='dark'] .unleash-academy-level-badge { + border-color: var(--ifm-link-color); + color: var(--ifm-link-color); } -.unleash-academy-links { - 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 { +.unleash-academy-level-container.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 { - border: 2px solid var(--ifm-link-color); - 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-banner { + --banner-padding: calc(var(--ifm-spacing-vertical) * 3); --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 { - 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); +html[data-theme='dark'] .course-banner-container { + background-color: inherit; + color: inherit; +} + +.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 { - grid-area: button; +@media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) { + .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 { - font-weight: normal; - font-size: 1.4em; +.unleash-action-button:hover { + background: var(--button-hover-color); + 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 { - flex-flow: row; - } - - .banner-container .unleash-action-button { + .academy-general-banner-content .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-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-specific styling */ .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