Set aspect-ratio to 4.75 and refactor out a weird selector

Author: hasparus

src/components/blog-page/blog-card.tsx

@@ -23,7 +23,6 @@ export function BlogCard({
   className,
   ...rest
 }: BlogCardProps) {
-
   return (
     <NextLink
       href={route}
@@ -35,12 +34,8 @@ export function BlogCard({
       )}
       {...rest}
     >
-      <BlogCardPicture
-        frontMatter={frontMatter}
-        // this weird selector sets background to tags so they look better on top of the picture
-        className="aspect-[2.23] [&>*>*>*]:bg-neu-0"
-      >
-        <BlogTags tags={frontMatter.tags} />
+      <BlogCardPicture frontMatter={frontMatter} className="aspect-[4.75]">
+        <BlogTags tags={frontMatter.tags} opaque />
       </BlogCardPicture>
       <div className="flex grow flex-col border border-neu-200 dark:border-neu-50">
         <div className="typography-body-lg grow text-pretty p-4">

src/components/blog-page/blog-tags.tsx

@@ -2,16 +2,22 @@ import { Tag } from "@/app/conf/_design-system/tag"
 
 import { blogTagColors } from "./blog-tag-colors"
 
-export function BlogTags({ tags }: { tags: string[] }) {
+export function BlogTags({
+  tags,
+  opaque,
+}: {
+  tags: string[]
+  opaque?: boolean
+}) {
   return (
     <div className="flex gap-2">
       {tags.map(tag => {
         const color = blogTagColors[tag]
-        if (!color) {
+        if (!color && process.env.NODE_ENV !== "production") {
           throw new Error(`No color found for tag: ${tag}`)
         }
         return (
-          <Tag color={color} key={tag}>
+          <Tag className={opaque ? "bg-neu-0" : ""} color={color} key={tag}>
             {tag.replaceAll("-", " ")}
           </Tag>
         )