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