Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Thomas Heartman 2024-02-01 18:35:43 +09:00 committed by GitHub
parent de0bebd7ad
commit dbc577bfa4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 136 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
website/src/components/unleash-academy/Banner.jsx
View File

@ -2,18 +2,23 @@ import React from 'react';
const Component = () => {
return (
<div className='banner-container'>
<div className='banner'>
<h3>
<div className='unleash-academy-banner academy-general-banner'>
<div className='academy-general-banner-content'>
<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>

6
website/src/components/unleash-academy/CourseBanner.jsx
View File

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

7
website/src/components/unleash-academy/Links.jsx
View File

@ -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}>

244
website/src/css/custom.css
View File

@ -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