Something went wrong. Try again.
Files for my website bwc9876.dev
Something went wrong. Try again.
2.3 kB · 118 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119---import { getImage } from "astro:assets";import { Image } from "astro:assets";import type { CollectionEntry } from "astro:content";
export interface Props { project: CollectionEntry<"projects">;}
const { project } = Astro.props;
const bgImage = await getImage({ format: "webp", src: project.data.image, width: 1, height: 1, quality: 0});---
<a href={`/projects/${project.id}/`}> <article> <div style={{ "background-image": `url("${bgImage.src}")` }}> <Image class="thumbnail" transition:name={`project-img-${project.id}`} src={project.data.image} densities={[1, 1.5, 2]} width={400} role="presentation" alt="" /> </div> <div> <h3 transition:name={`project-name-${project.id}`} class="project-name"> {project.data.name} </h3> <small transition:name={`project-tags-${project.id}`}>{project.data.tags.join(", ")}</small> <p transition:name={`project-summary-${project.id}`}>{project.data.summary}</p> </div> </article></a>
<style> :not(h3) { text-decoration: none !important; }
small { margin: 0 var(--1); display: block; text-wrap: balance; }
h3 { margin: var(--1) var(--1) 0 var(--1); }
a:hover { h3 { text-decoration: underline; }
article { background-color: color(from var(--secondary) srgb r calc(g + 0.05) b); } }
p { margin: var(--1); }
article { display: flex; flex-direction: column; height: 100%; color: var(--text); background-color: var(--secondary); border-radius: 5px; }
span { flex-grow: 1; text-align: center; display: flex; align-items: center; justify-content: center; }
div:first-child { display: flex; flex-direction: column; align-items: center; background-repeat: no-repeat; background-size: 125%; background-position: center; }
div { overflow: hidden; position: relative; }
img, div:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; }
img { position: relative; object-fit: contain; width: 100%; height: auto; transition: transform ease-in-out 0.4s; height: var(--14); }</style>