diff options
Diffstat (limited to 'examples/portfolio/src/components/PortfolioPreview.astro')
| -rw-r--r-- | examples/portfolio/src/components/PortfolioPreview.astro | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/examples/portfolio/src/components/PortfolioPreview.astro b/examples/portfolio/src/components/PortfolioPreview.astro new file mode 100644 index 000000000..f26bae0e2 --- /dev/null +++ b/examples/portfolio/src/components/PortfolioPreview.astro @@ -0,0 +1,64 @@ +--- +import type { CollectionEntry } from 'astro:content'; + +interface Props { + project: CollectionEntry<'work'>; +} + +const { data, id } = Astro.props.project; +--- + +<a class="card" href={`/work/${id}`}> + <span class="title">{data.title}</span> + <img src={data.img} alt={data.img_alt || ''} loading="lazy" decoding="async" /> +</a> + +<style> + .card { + display: grid; + grid-template: auto 1fr / auto 1fr; + height: 11rem; + background: var(--gradient-subtle); + border: 1px solid var(--gray-800); + border-radius: 0.75rem; + overflow: hidden; + box-shadow: var(--shadow-sm); + text-decoration: none; + font-family: var(--font-brand); + font-size: var(--text-lg); + font-weight: 500; + transition: box-shadow var(--theme-transition); + } + + .card:hover { + box-shadow: var(--shadow-md); + } + + .title { + grid-area: 1 / 1 / 2 / 2; + z-index: 1; + margin: 0.5rem; + padding: 0.5rem 1rem; + background: var(--gray-999); + color: var(--gray-200); + border-radius: 0.375rem; + } + + img { + grid-area: 1 / 1 / 3 / 3; + width: 100%; + height: 100%; + object-fit: cover; + } + + @media (min-width: 50em) { + .card { + height: 22rem; + border-radius: 1.5rem; + } + + .title { + border-radius: 0.9375rem; + } + } +</style> |