diff options
Diffstat (limited to 'docs/src/components/Card.astro')
| -rw-r--r-- | docs/src/components/Card.astro | 62 |
1 files changed, 0 insertions, 62 deletions
diff --git a/docs/src/components/Card.astro b/docs/src/components/Card.astro deleted file mode 100644 index 21b5deb68..000000000 --- a/docs/src/components/Card.astro +++ /dev/null @@ -1,62 +0,0 @@ ---- -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))`; ---- - -<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> - -<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> |