feat: use blog3 cover for orange blog cards

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
vargha1
2026-10-03 15:12:33 +03:30
parent 6b2c5ec62d
commit 73f3252446
2 changed files with 4 additions and 5 deletions

BIN
public/blog3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

View File

@@ -25,11 +25,10 @@ function boundary({ y, m, d }: DateParts, end: boolean) {
const dateFormat = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" }); const dateFormat = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" });
// The orange cover is the blue telescope image hue-shifted.
const covers = { const covers = {
dart: { src: "/blog1.png", className: "" }, dart: "/blog1.png",
telescope: { src: "/blog2.png", className: "" }, telescope: "/blog2.png",
"telescope-orange": { src: "/blog2.png", className: "hue-rotate-[188deg] saturate-125" }, "telescope-orange": "/blog3.png",
}; };
function CalendarIcon() { function CalendarIcon() {
@@ -46,7 +45,7 @@ function PostCard({ post }: { post: Post }) {
return ( return (
<article className="flex flex-col gap-3"> <article className="flex flex-col gap-3">
<div className="relative aspect-[361/208] overflow-hidden rounded-2xl"> <div className="relative aspect-[361/208] overflow-hidden rounded-2xl">
<Image src={cover.src} alt="" fill sizes="(min-width: 640px) 25rem, 100vw" className={`object-cover ${cover.className}`} /> <Image src={cover} alt="" fill sizes="(min-width: 640px) 25rem, 100vw" className="object-cover" />
</div> </div>
<div className="flex flex-col gap-1 px-2"> <div className="flex flex-col gap-1 px-2">
<h3 className="text-sm font-bold text-[#11192d]">{post.title}</h3> <h3 className="text-sm font-bold text-[#11192d]">{post.title}</h3>