Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-27 13:49:10 +02:00
Code Issues Projects Releases Wiki Activity

docs: start styling banner

Browse Source
This commit is contained in:
Thomas Heartman 2024-01-30 18:44:35 +09:00
parent 3934a8a597
commit 72999c2c78
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
3 changed files with 59 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,55 +1,19 @@
import React from 'react';
const LinkBox = ({ level, header, description, link }) => {
return (
<article className={level.toLowerCase()}>
<div className='header'>
<span className='level'>{level}</span>
<h3>{header}</h3>
</div>
<p>{description}</p>
<a href={link}>Start learning</a>
</article>
);
};
const links = [
{
level: 'Beginners',
header: 'Foundational',
description:
'For all roles working with Unleash - Developers, Product owners, Leaders',
link: 'https://docs.google.com/forms/d/1iPUk2I0k5xMzicn9aLMcPF3b9ub3ZwdVjRxCxWxV7js/viewform',
},
{
level: 'Advanced',
header: 'Advanced for Developers',
description:
'For Developers only, after Foundational content has been reviewed',
link: 'https://docs.google.com/forms/d/1NUL9hyO8Ys916TB6fPV3-jkvD97OmPXZ8_TO84Wjqgc/viewform',
},
{
level: 'Advanced',
header: 'Managing Unleash for DevOps/Admins',
description:
'For DevOps, Platform leads and Admins only after Foundational content has been reviewed',
link: 'https://docs.google.com/forms/d/1JlIqmXI3P7dj0n-OiUs2IYsYXgmqw23BChaemlSgHJA/viewform',
},
];
const Component = () => {
return (
<div className='banner-container'>
<div className="banner">
<p className="text">
Gain new skills, earn certifications, train your team, and advance your career.
<div className='banner'>
<p>
Gain new skills, earn certifications, train your team, and
advance your career.
</p>
<ul className="bullets">
<ul>
<li>100% Free & online</li>
<li>Valuable certification</li>
</ul>
<div className="icon"></div>
<a href="">Get certified</a>
<div className='icon'></div>
<span className='unleash-action-button'>Get certified</span>
</div>
</div>
);

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

@ -8,7 +8,9 @@ const LinkBox = ({ level, header, description, link }) => {
<h3>{header}</h3>
</div>
<p>{description}</p>
<a href={link}>Start learning</a>
<a className='unleash-action-button' href={link}>
Start learning
</a>
</article>
);
};

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

@ -298,6 +298,55 @@ html[data-theme='dark'] .links-container {
}
/* end certification links */
.banner-container {
border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
padding: calc(var(--ifm-spacing-vertical) * 3);
border-radius: var(--ifm-global-radius);
min-height: 282px;
background-color: #F1F0FC;
background-image: url('data:image/svg+xml,<svg width="554" height="282" viewBox="0 0 554 282" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.1"><path d="M502.377 16.1992H471.798V41.1588H502.377V16.1992Z" fill="%23817AFE"/><path d="M563.54 1.79883H532.96V26.7585H563.54V1.79883Z" fill="%23817AFE"/><path d="M288.323 41.1602H257.743V66.1198H288.323V41.1602Z" fill="%23817AFE"/><path d="M318.899 16.1992H288.32V41.1588H318.899V16.1992Z" fill="%23817AFE"/><path d="M349.485 16.1992H318.906V41.1588H349.485V16.1992Z" fill="%23817AFE"/><path d="M380.062 41.1602H349.482V66.1198H380.062V41.1602Z" fill="%23817AFE"/><path d="M471.796 41.1602H441.217V66.1198H471.796V41.1602Z" fill="%23817AFE"/><path d="M563.54 26.7598H532.96V51.7194H563.54V26.7598Z" fill="%23817AFE"/><path d="M318.899 66.1172H288.32V91.0768H318.899V66.1172Z" fill="%23817AFE"/><path d="M349.485 66.1172H318.906V91.0768H349.485V66.1172Z" fill="%23817AFE"/><path d="M471.796 66.1172H441.217V91.0768H471.796V66.1172Z" fill="%23817AFE"/><path d="M502.377 66.1172H471.798V91.0768H502.377V66.1172Z" fill="%23817AFE"/><path d="M532.959 66.1172H502.379V91.0768H532.959V66.1172Z" fill="%23817AFE"/><path d="M318.899 91.0762H288.32V116.036H318.899V91.0762Z" fill="%23817AFE"/><path d="M349.485 91.0762H318.906V116.036H349.485V91.0762Z" fill="%23817AFE"/><path d="M441.219 91.0762H410.64V116.036H441.219V91.0762Z" fill="%23817AFE"/><path d="M288.323 116.037H257.743V140.997H288.323V116.037Z" fill="%23817AFE"/><path d="M380.062 116.037H349.482V140.997H380.062V116.037Z" fill="%23817AFE"/><path d="M532.959 116.037H502.379V140.997H532.959V116.037Z" fill="%23817AFE"/><path d="M563.539 116.037H532.96V140.997H563.539V116.037Z" fill="%23817AFE"/><path d="M288.323 140.996H257.743V165.956H288.323V140.996Z" fill="%23817AFE"/><path d="M349.485 140.996H318.906V165.956H349.485V140.996Z" fill="%23817AFE"/><path d="M380.062 140.996H349.482V165.956H380.062V140.996Z" fill="%23817AFE"/><path d="M502.377 140.996H471.798V165.956H502.377V140.996Z" fill="%23817AFE"/><path d="M563.562 140.998H532.688V170.998H563.562V140.998Z" fill="%23817AFE"/><path d="M318.899 165.957H288.32V190.917H318.899V165.957Z" fill="%23817AFE"/><path d="M441.219 165.957H410.64V190.917H441.219V165.957Z" fill="%23817AFE"/><path d="M471.796 165.957H441.217V190.917H471.796V165.957Z" fill="%23817AFE"/><path d="M441.219 190.918H410.64V215.878H441.219V190.918Z" fill="%23817AFE"/><path d="M532.959 190.918H502.379V215.878H532.959V190.918Z" fill="%23817AFE"/><path d="M410.643 215.875H380.063V240.835H410.643V215.875Z" fill="%23817AFE"/><path d="M532.959 215.875H502.379V240.835H532.959V215.875Z" fill="%23817AFE"/><path d="M288.323 240.836H257.743V265.796H288.323V240.836Z" fill="%23817AFE"/><path d="M380.062 240.836H349.482V265.796H380.062V240.836Z" fill="%23817AFE"/><path d="M410.643 240.836H380.063V265.796H410.643V240.836Z" fill="%23817AFE"/><path d="M441.219 240.836H410.64V265.796H441.219V240.836Z" fill="%23817AFE"/><path d="M441.219 66.1172H410.64V91.0768H441.219V66.1172Z" fill="%23817AFE"/></g><g opacity="0.1"><path d="M134.973 41.9219H159.526V62.8018H134.973V41.9219Z" fill="%23817AFE"/><path d="M1.92756 68.6934H26.4806V89.5733H1.92756V68.6934Z" fill="%23817AFE"/><path d="M206.327 60.5996H231.32V80.9996H206.327V60.5996Z" fill="%23817AFE"/><path d="M181.333 60.5996H206.326V80.9996H181.333V60.5996Z" fill="%23817AFE"/><path d="M156.339 81H181.332V101.4H156.339V81Z" fill="%23817AFE"/><path d="M64.6746 92.6055H89.2277V113.485H64.6746V92.6055Z" fill="%23817AFE"/><path d="M64.6746 15.8066H89.2277V36.6866H64.6746V15.8066Z" fill="%23817AFE"/><path d="M233.19 95.6387H257.743V116.519H233.19V95.6387Z" fill="%23817AFE"/><path d="M233.19 179.16H257.743V200.04H233.19V179.16Z" fill="%23817AFE"/><path d="M61.3184 191.117H85.8715V211.997H61.3184V191.117Z" fill="%23817AFE"/><path d="M12.2073 164.348H36.7604V185.228H12.2073V164.348Z" fill="%23817AFE"/><path d="M0.446604 245.945H24.9996V266.825H0.446604V245.945Z" fill="%23817AFE"/><path d="M141.906 137.398H166.459V158.278H141.906V137.398Z" fill="%23817AFE"/><path d="M184.286 221.398H209.279V241.798H184.286V221.398Z" fill="%23817AFE"/><path d="M184.417 201H209.41V221.4H184.417V201Z" fill="%23817AFE"/><path d="M208.637 116.52H233.19V137.4H208.637V116.52Z" fill="%23817AFE"/><path d="M89.2323 113.484H113.785V134.364H89.2323V113.484Z" fill="%23817AFE"/><path d="M233.19 21H257.743V41.88H233.19V21Z" fill="%23817AFE"/><path d="M166.459 137.398H191.012V158.278H166.459V137.398Z" fill="%23817AFE"/><path d="M134.973 179.16H159.526V200.04H134.973V179.16Z" fill="%23817AFE"/></g></svg>');
background-position: top right;
background-repeat: no-repeat;
ul {
display: flex;
flex-flow: row;
gap: calc( var(--ifm-spacing-horizontal) * 2);
padding-inline-start: 0;
}
li {
font-weight: bold;
list-style-type: none;
background-image: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_21750_244356" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_21750_244356)"><path d="M10.6 13.8L8.45 11.65C8.26667 11.4667 8.03333 11.375 7.75 11.375C7.46667 11.375 7.23333 11.4667 7.05 11.65C6.86667 11.8333 6.775 12.0667 6.775 12.35C6.775 12.6333 6.86667 12.8667 7.05 13.05L9.9 15.9C10.1 16.1 10.3333 16.2 10.6 16.2C10.8667 16.2 11.1 16.1 11.3 15.9L16.95 10.25C17.1333 10.0667 17.225 9.83333 17.225 9.55C17.225 9.26667 17.1333 9.03333 16.95 8.85C16.7667 8.66667 16.5333 8.575 16.25 8.575C15.9667 8.575 15.7333 8.66667 15.55 8.85L10.6 13.8ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="%23817AFE"/></g></svg>');
background-repeat: no-repeat;
background-position: left center; /* Adjust as needed */
padding-left: 30px; /* Adjust as
/* list-style-image: url('data:image/svg+xml,<svg transform="scale(1.1) translate(0, 12)" transform-origin="center" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_21750_244356" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_21750_244356)"><path d="M10.6 13.8L8.45 11.65C8.26667 11.4667 8.03333 11.375 7.75 11.375C7.46667 11.375 7.23333 11.4667 7.05 11.65C6.86667 11.8333 6.775 12.0667 6.775 12.35C6.775 12.6333 6.86667 12.8667 7.05 13.05L9.9 15.9C10.1 16.1 10.3333 16.2 10.6 16.2C10.8667 16.2 11.1 16.1 11.3 15.9L16.95 10.25C17.1333 10.0667 17.225 9.83333 17.225 9.55C17.225 9.26667 17.1333 9.03333 16.95 8.85C16.7667 8.66667 16.5333 8.575 16.25 8.575C15.9667 8.575 15.7333 8.66667 15.55 8.85L10.6 13.8ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="%23817AFE"/></g></svg>');/\* Use translate(X, Y) to position the SVG up, down, left, and right *\/ */
}
li::marker {
height: 100%;
}
li + li {
margin-block-start: 0;
}
.unleash-action-button {
display: block;
border-radius: var(--ifm-global-radius);
width: 240px;
background: var(--unleash-color-purple);
color: white;
text-align: center;
padding: calc(var(--ifm-spacing-horizontal) * .5);
}
}
/* docusaurus-plugin-openapi-docs styling