diff --git a/@theme/styles.css b/@theme/styles.css index e35bc6b5..81700def 100644 --- a/@theme/styles.css +++ b/@theme/styles.css @@ -559,18 +559,22 @@ html:not(.light) .feature-event { color: #FFF; } -/* Fix Card Buttons Alignment */ -.redocly-card-filled { - min-height: 155px; - display: flex; - flex-direction: column; +/* Align card buttons to the bottom of each card */ +.card-variant-filled > div:last-child > div:last-child { + flex-grow: 1; } -.redocly-card-filled > p { +.card-variant-filled > div:last-child > div:last-child > div:last-child { + display: flex; + flex-direction: column; flex-grow: 1; } -.redocly-card-filled button { +.card-variant-filled > div:last-child > div:last-child > div:last-child > button:last-child, +.card-variant-filled > div:last-child > div:last-child > div:last-child > .card-actions:last-child { margin-top: auto; - display: inline-flex; +} + +.card-variant-filled > div:last-child > div:last-child > div:last-child > button:last-child { + align-self: flex-start; } diff --git a/components/landing.tsx b/components/landing.tsx index 73c34b71..0e8b6670 100644 --- a/components/landing.tsx +++ b/components/landing.tsx @@ -1,6 +1,7 @@ import styled from "styled-components"; import * as React from "react"; import { H1, H2, Button } from "@redocly/theme"; +import { GithubIcon } from "@redocly/theme/icons/GithubIcon/GithubIcon"; const Header1 = styled(H1)` color: white !important; @@ -76,6 +77,56 @@ function ButtonToXRPL({ children }) { } +const GitHubStyledButton = styled(Button)` + margin-left: auto; + flex-shrink: 0; + color: var(--card-text-color); + + svg path { + fill: currentColor; + } + + &:hover { + color: var(--color-primary-base); + } +`; + +// A button, not an anchor: the enclosing Card is already a link. +function ButtonToGitHub({ to, label = "GitHub" }) { + return ( + } + title="View the source on GitHub" + onClick={(e) => { + e.preventDefault(); + e.stopPropagation(); + window.open(to, "_blank", "noopener,noreferrer"); + }} + > + {label} + + ); +} + +const CardActionsRow = styled.div` + display: flex; + align-items: center; + gap: var(--spacing-sm); + width: 100%; +`; + +// Card CTA row, with an optional right-aligned GitHub link. +function CardActions({ github, children }) { + return ( + + {children} + {github && } + + ); +} + // Key Dates component for feature pages function KeyDatesCard(props: { title:string, @@ -141,6 +192,8 @@ export { LandingLayout, Jumbotron, ButtonToXRPL, + ButtonToGitHub, + CardActions, KeyDatesCard, KeyDate, FeatureHeader, diff --git a/docs/xls-65-single-asset-vault/index.page.tsx b/docs/xls-65-single-asset-vault/index.page.tsx index ed2475cb..e4ceb7e5 100644 --- a/docs/xls-65-single-asset-vault/index.page.tsx +++ b/docs/xls-65-single-asset-vault/index.page.tsx @@ -4,7 +4,8 @@ import { LandingLayout, FeatureHeader, FeatureContent, - ButtonToXRPL + ButtonToXRPL, + CardActions } from "../../components/landing"; import { AmendmentTracker } from "../../components/AmendmentTracker"; import { Button } from "@redocly/theme"; @@ -106,9 +107,11 @@ export default function Page() {

Explore a full lending platform built on the Lending Protocol and Single Asset Vaults, featuring dedicated dashboards for brokers, depositors, and borrowers.

- + + + Explore a full lending platform built on the Lending Protocol and Single Asset Vaults, featuring dedicated dashboards for brokers, depositors, and borrowers.

- + + +