chore: fix anti aliasing issues in card

openscript · openscript · commit 1537c2ea723e · 2025-07-06T19:52:17.000Z
diff --git a/.changeset/good-wasps-fail.md b/.changeset/good-wasps-fail.md
@@ -0,0 +1,5 @@
+---
+"r.obin.ch": patch
+---
+
+Fix antialiasing issues in card
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -49,12 +49,12 @@ const HeadingTag = `h${headingLevel}` as keyof HTMLElementTagNameMap;
     color: var(--color-text);
     padding: var(--gap);
     padding-top: var(--gap-big);
-    clip-path: polygon(0 0, 100% 1rem, 100% 100%, 0 100%);
+    clip-path: polygon(0 0, calc(100% + 1px) 1rem, calc(100% + 1px) calc(100% + 1px), 0 calc(100% + 1px));
     font-size: 0.8rem;
   }
 
   .overlay.divider-flip {
-    clip-path: polygon(0 1rem, 100% 0, 100% 100%, 0 100%);
+    clip-path: polygon(0 1rem, calc(100% + 1px) 0, calc(100% + 1px) calc(100% + 1px), 0 calc(100% + 1px));
   }
 
   a:hover .overlay,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"r.obin.ch": patch
 +---
++
 +Fix antialiasing issues in card
Original file line number	Diff line number	Diff line change
@@ -49,12 +49,12 @@ const HeadingTag = `h${headingLevel}` as keyof HTMLElementTagNameMap;
`49`	`49`	`color: var(--color-text);`
`50`	`50`	`padding: var(--gap);`
`51`	`51`	`padding-top: var(--gap-big);`
`52`		`- clip-path: polygon(0 0, 100% 1rem, 100% 100%, 0 100%);`
	`52`	`+ clip-path: polygon(0 0, calc(100% + 1px) 1rem, calc(100% + 1px) calc(100% + 1px), 0 calc(100% + 1px));`
`53`	`53`	`font-size: 0.8rem;`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`.overlay.divider-flip {`
`57`		`- clip-path: polygon(0 1rem, 100% 0, 100% 100%, 0 100%);`
	`57`	`+ clip-path: polygon(0 1rem, calc(100% + 1px) 0, calc(100% + 1px) calc(100% + 1px), 0 calc(100% + 1px));`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`a:hover .overlay,`