fix: badge colors, certificate-image font timeout, stamp overflow

- Badge URL updated to flat-square grey/red style with 🪦 emoji
- Certificate-image font fetch wrapped in AbortSignal.timeout(3000)
- Stamp moved to outer div to prevent overflow:hidden clipping
- README badge example updated to match new style

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: dotsystemsdevs

README.md

@@ -16,19 +16,13 @@ Paste a public GitHub URL. Get a shareable **Certificate of Death** — algorith
 
 Got a dead repo? Add the badge to your README:
 
-[![commitmentissues](https://img.shields.io/badge/%E2%9A%B0%20commitmentissues-declared%20dead-cc0000?style=for-the-badge&labelColor=1a0f06)](https://commitmentissues.dev)
+[![🪦 declared dead](https://img.shields.io/badge/%F0%9F%AA%A6%20declared%20dead-commitmentissues.dev-cc0000?style=flat-square)](https://commitmentissues.dev)
 
 ```markdown
-[![commitmentissues](https://img.shields.io/badge/%E2%9A%B0%20commitmentissues-declared%20dead-cc0000?style=for-the-badge&labelColor=1a0f06)](https://commitmentissues.dev/?repo=YOUR_OWNER/YOUR_REPO)
+[![🪦 declared dead](https://img.shields.io/badge/%F0%9F%AA%A6%20declared%20dead-commitmentissues.dev-cc0000?style=flat-square)](https://commitmentissues.dev/?repo=YOUR_OWNER/YOUR_REPO)
 ```
 
-Or embed the full certificate image:
-
-```markdown
-[![Certificate of Death](https://commitmentissues.dev/api/certificate-image/YOUR_OWNER/YOUR_REPO)](https://commitmentissues.dev/?repo=YOUR_OWNER/YOUR_REPO)
-```
-
-Both are generated automatically on the certificate page — just hit **Copy** after analyzing your repo.
+The badge and full certificate embed markdown are generated automatically on the certificate page — just hit **Copy** after analyzing your repo.
 
 ## Screenshots
 

src/app/api/certificate-image/[owner]/[repo]/route.tsx

@@ -23,11 +23,11 @@ async function loadFont(family: string, weight: number): Promise<ArrayBuffer | n
   try {
     const css = await fetch(
       `https://fonts.googleapis.com/css2?family=${family.replace(/\s+/g, '+')}:wght@${weight}&display=swap`,
-      { headers: { 'User-Agent': 'Mozilla/5.0 Chrome/120' } }
+      { headers: { 'User-Agent': 'Mozilla/5.0 Chrome/120' }, signal: AbortSignal.timeout(3000) }
     ).then(r => r.text())
     const m = css.match(/url\((https:\/\/fonts\.gstatic\.com[^)]+)\)\s+format\(['"]woff2['"]\)/)
     if (!m) return null
-    return fetch(m[1]).then(r => r.arrayBuffer())
+    return fetch(m[1], { signal: AbortSignal.timeout(3000) }).then(r => r.arrayBuffer())
   } catch {
     return null
   }

src/components/CertificateCard.tsx

@@ -581,12 +581,12 @@ export default function CertificateCard({ cert, onReset }: Props) {
         {(() => {
           const fullName = cert.repoData.fullName
           const repoUrl = `https://commitmentissues.dev/?repo=${encodeURIComponent(fullName)}`
-          const shieldsUrl = `https://img.shields.io/badge/${encodeURIComponent('⚰ commitmentissues')}-${encodeURIComponent('declared dead')}-cc0000?style=for-the-badge&labelColor=1a0f06`
+          const shieldsUrl = `https://img.shields.io/badge/%F0%9F%AA%A6%20declared%20dead-commitmentissues.dev-cc0000?style=flat-square`
           const badgeMd = `[![commitmentissues](${shieldsUrl})](${repoUrl})`
           const certImageUrl = `https://commitmentissues.dev/api/certificate-image/${fullName}`
           const certMd = `[![${cert.repoData.name} — Certificate of Death](${certImageUrl})](${repoUrl})`
 
-          const shieldsPreviewUrl = `https://img.shields.io/badge/${encodeURIComponent('⚰ commitmentissues')}-${encodeURIComponent('declared dead')}-cc0000?style=for-the-badge&labelColor=1a0f06`
+          const shieldsPreviewUrl = `https://img.shields.io/badge/%F0%9F%AA%A6%20declared%20dead-commitmentissues.dev-cc0000?style=flat-square`
 
           const CopyIcon = ({ done }: { done: boolean }) => done
             ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>

src/components/CertificateFixed.tsx

@@ -87,6 +87,27 @@ const CertificateFixed = forwardRef<HTMLDivElement, Props>(
       >
         {PAPER_TEXTURE_SVG}
 
+        {showStamp && (
+          <div
+            ref={stampRef}
+            className="stamp-animate"
+            style={{
+              position: 'absolute',
+              bottom: '28px',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              pointerEvents: 'none',
+              userSelect: 'none',
+              zIndex: 10,
+            }}
+          >
+            <div style={{ border: '5px solid rgba(139,26,26,0.72)', borderRadius: '4px', padding: '10px 28px', background: 'rgba(139,26,26,0.04)' }}>
+              <span style={{ fontFamily: MONO, fontSize: '13px', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(139,26,26,0.75)', display: 'block', textAlign: 'center', whiteSpace: 'nowrap' }}>
+                Issued by commitmentissues.dev
+              </span>
+            </div>
+          </div>
+        )}
 
         <div
           style={{
@@ -179,26 +200,6 @@ const CertificateFixed = forwardRef<HTMLDivElement, Props>(
             </p>
           </div>
 
-          {showStamp && (
-            <div
-              ref={stampRef}
-              className="stamp-animate"
-              style={{
-                marginTop: 'auto',
-                display: 'flex',
-                justifyContent: 'center',
-                paddingBottom: '8px',
-                pointerEvents: 'none',
-                userSelect: 'none',
-              }}
-            >
-              <div style={{ border: '5px solid rgba(139,26,26,0.72)', borderRadius: '4px', padding: '10px 28px', background: 'rgba(139,26,26,0.04)' }}>
-                <span style={{ fontFamily: MONO, fontSize: '13px', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(139,26,26,0.75)', display: 'block', textAlign: 'center', whiteSpace: 'nowrap' }}>
-                  Issued by commitmentissues.dev
-                </span>
-              </div>
-            </div>
-          )}
 
         </div>
       </div>