feat: use blog3 cover for orange blog cards
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
BIN
public/blog3.png
Normal file
BIN
public/blog3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user