diff options
Diffstat (limited to 'docs/src/components/Examples/Card.astro')
| -rw-r--r-- | docs/src/components/Examples/Card.astro | 64 |
1 files changed, 0 insertions, 64 deletions
diff --git a/docs/src/components/Examples/Card.astro b/docs/src/components/Examples/Card.astro deleted file mode 100644 index 81d3b97f4..000000000 --- a/docs/src/components/Examples/Card.astro +++ /dev/null @@ -1,64 +0,0 @@ ---- -import CodeBar from './Codebar.tsx' -import CardButtons from './CardButtons.astro' - -const {data, index} = Astro.props; - -// NOTE: Needed until we get hosted demos of official templates. -const PLACEHOLDER_THUMBNAILS = [ - // `#ba5370, #F4E2D8`, - // `#22c1c3, #fdbb2d`, - // `#7a5e99, #9f5dcf, #e864ca, #fdeff9`, - // `#e1eec3, #f05053`, - // `#7f00ff, #e100ff`, - `var(--theme-bg-accent), var(--theme-accent)`, -] - -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 |