mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-31 01:16:01 +02:00
0ebe791a75
New landing page design for the docs with custom card components. [Design file](https://www.figma.com/design/7BXV5qZrmrI4H1Yk8FVW9T/Marketing?node-id=5330-8333&t=eKa3NYwKpzane9ey-0) [Docs Preview](https://unleash-docs-git-alvin-new-docs-homepage-unleash-team.vercel.app/) --------- Co-authored-by: Alvin Bryan <hello@alvin.codes> Co-authored-by: Nuno Góis <github@nunogois.com>
257 lines
6.4 KiB
CSS
257 lines
6.4 KiB
CSS
/* Unleash academy content */
|
|
|
|
/* breakpoints:
|
|
show wide: >=1247
|
|
show narrow: 997-1246
|
|
show wide: 711-996
|
|
show narrow: <=710
|
|
*/
|
|
|
|
/* shared academy styles */
|
|
|
|
.unleash-academy-level-badge {
|
|
border: 2px solid;
|
|
border-radius: 60px;
|
|
padding-inline: 0.5em;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
html[data-theme="light"] .unleash-academy-level-badge {
|
|
border-color: var(--unleash-logo-purple);
|
|
color: var(--unleash-logo-purple);
|
|
}
|
|
|
|
html[data-theme="dark"] .unleash-academy-level-badge {
|
|
border-color: var(--ifm-link-color);
|
|
color: var(--ifm-link-color);
|
|
}
|
|
|
|
.unleash-academy-level-container.advanced {
|
|
background-image: url("/img/unleash-academy/advanced-pixels.svg");
|
|
}
|
|
|
|
.unleash-academy-level-container.beginners {
|
|
background-image: url("/img/unleash-academy/beginner-pixels.svg");
|
|
}
|
|
|
|
.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);
|
|
position: relative;
|
|
border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
|
|
padding: var(--banner-padding);
|
|
border-radius: var(--ifm-global-radius);
|
|
background-color: #f1f0fc;
|
|
background-image: url("/img/unleash-academy/banner-bg-pixels.svg");
|
|
background-position: top right;
|
|
background-repeat: no-repeat;
|
|
overflow: hidden;
|
|
color: var(--banner-font-color);
|
|
}
|
|
|
|
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 {
|
|
grid-area: bullets;
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: calc(var(--ifm-spacing-horizontal) * 2);
|
|
padding-inline-start: 0;
|
|
}
|
|
|
|
.unleash-academy-banner-list > li {
|
|
font-weight: bold;
|
|
list-style-type: none;
|
|
background-image: url("/img/unleash-academy/bullet-check.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: left center;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.unleash-academy-banner-list > li::marker {
|
|
height: 100%;
|
|
}
|
|
|
|
.unleash-academy-banner-list > li + li {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
@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%;
|
|
background: var(--button-color);
|
|
color: white;
|
|
text-align: center;
|
|
padding: calc(var(--ifm-spacing-horizontal) * 0.5);
|
|
}
|
|
|
|
.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) * 0.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;
|
|
}
|
|
|
|
.academy-general-banner .small-logo {
|
|
grid-area: logo;
|
|
background-image: url("/img/unleash-academy/academy-logo.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
background-size: contain;
|
|
}
|
|
|
|
@media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
|
|
.academy-general-banner-content {
|
|
grid-template-areas: "header logo" "bullets logo" "button logo";
|
|
grid-template-columns: 480px auto;
|
|
}
|
|
|
|
.academy-general-banner-content .unleash-action-button {
|
|
width: 240px;
|
|
}
|
|
|
|
.academy-general-banner .small-logo {
|
|
display: none;
|
|
}
|
|
|
|
.academy-general-banner .big-logo {
|
|
position: absolute;
|
|
background-image: url("/img/unleash-academy/academy-logo.svg");
|
|
bottom: 0;
|
|
right: 40px;
|
|
width: 200px;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position-x: left;
|
|
background-position-y: 190%;
|
|
}
|
|
}
|
|
|
|
/* end banner */
|
|
|
|
/* course banner-specific styling */
|
|
.course-banner-container.beginners {
|
|
background-size: 108px;
|
|
}
|
|
|
|
.course-banner-container.advanced {
|
|
background-size: 108px;
|
|
}
|
|
|
|
.course-banner-container > * + * {
|
|
margin-block-start: var(--ifm-spacing-vertical);
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
.unleash-academy-level-badge {
|
|
border: 2px solid;
|
|
border-radius: 60px;
|
|
padding-inline: 0.5em;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
html[data-theme="light"] .unleash-academy-level-badge {
|
|
border-color: var(--unleash-logo-purple);
|
|
color: var(--unleash-logo-purple);
|
|
}
|
|
|
|
html[data-theme="dark"] .unleash-academy-level-badge {
|
|
border-color: var(--ifm-link-color);
|
|
color: var(--ifm-link-color);
|
|
}
|