diff options
Diffstat (limited to 'docs/src/components/Card.astro')
| -rw-r--r-- | docs/src/components/Card.astro | 104 |
1 files changed, 57 insertions, 47 deletions
diff --git a/docs/src/components/Card.astro b/docs/src/components/Card.astro index c024981ff..21b5deb68 100644 --- a/docs/src/components/Card.astro +++ b/docs/src/components/Card.astro @@ -1,52 +1,62 @@ --- -const {data, index} = Astro.props; +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))` +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; - } + .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 |