mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-18 11:14:57 +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>
79 lines
1.5 KiB
CSS
79 lines
1.5 KiB
CSS
.container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.container > a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--ifm-background-color);
|
|
height: 250px;
|
|
border-radius: 12px;
|
|
border: 1px solid #e1e1e3;
|
|
border-bottom: 12px solid #6c65e5;
|
|
padding: 30px;
|
|
padding-top: 50px;
|
|
position: relative;
|
|
transition: background-color 0.2s ease-in-out;
|
|
}
|
|
|
|
html[data-theme="dark"] .card {
|
|
border: 1px solid var(--ifm-color-emphasis-300);
|
|
border-bottom: 12px solid #6c65e5;
|
|
}
|
|
|
|
.card::before {
|
|
content: "";
|
|
background-image: url("/img/card-hover-bg.png");
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: 0;
|
|
right: 0;
|
|
width: 60%;
|
|
height: 85%;
|
|
background-size: cover;
|
|
border-top-right-radius: 12px;
|
|
}
|
|
|
|
html[data-theme="dark"] .card::before {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.card:hover {
|
|
background-color: var(--unleash-color-welcome-card-hover);
|
|
}
|
|
|
|
.cardbody {
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
|
|
.cardbody > p {
|
|
font-size: 14px;
|
|
color: var(--ifm-font-color-base);
|
|
}
|
|
|
|
.cardbody > .title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 16px;
|
|
color: var(--unleash-color-welcome-strong);
|
|
}
|
|
|
|
.cardbody > .title > svg {
|
|
width: 30px;
|
|
height: 30px;
|
|
fill: var(--unleash-color-welcome-strong);
|
|
}
|
|
|
|
.cardbody > .title > h3 {
|
|
margin-bottom: 0;
|
|
font-size: 18px;
|
|
line-height: 18px;
|
|
}
|