diff options
Diffstat (limited to 'docs/src/components/Card.astro')
| -rw-r--r-- | docs/src/components/Card.astro | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/docs/src/components/Card.astro b/docs/src/components/Card.astro new file mode 100644 index 000000000..c024981ff --- /dev/null +++ b/docs/src/components/Card.astro @@ -0,0 +1,52 @@ +--- +const {data, index} = Astro.props; +const hasScreenshot = !!data.demo; +const backgroundStyle = hasScreenshot ? `url('https://v1.screenshot.11ty.dev/${encodeURIComponent(data.demo)}/medium/9:16/')` : `linear-gradient(60deg, var(--theme-bg-accent), var(--theme-accent))` +--- +<style> + .card { + position: relative; + display: flex; + flex-direction: column; + grid-column: span 1; + flex-grow: 1; + height: 200px; + justify-content: center; + align-items: center; + padding: 1rem; + text-align: center; + } + .card-header { + flex-grow: 1; + font-weight: bold; + font-size: 1.8rem; + } + .background-dimmer { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: linear-gradient(45deg, #0004, #000B); + z-index: 2; + } + .card-body, .card-header { + color: var(--text-color); + } + .card-body { + z-index: 3; + } + .card.has-screenshot .card-header, + .card.has-screenshot .card-body { + color: white; + } +</style> +<article class={`card ${hasScreenshot ? 'has-screenshot' : ''}`} style={`background: ${backgroundStyle}; background-size: cover;`}> + {hasScreenshot && <div class="background-dimmer"></div>} + <div class="card-body"> + <a href={data.github} class="card-header" target="_blank"> + {data.name} + <span>{` →`}</span> + </a> + </div> +</article>
\ No newline at end of file |