From 98b36572aaeed6606517e214fe89b89e997fb486 Mon Sep 17 00:00:00 2001
From: Aditya <adithya18062000@gmail.com>
Date: Wed, 3 Dec 2025 01:05:05 +0530
Subject: [PATCH] chore: fix alignment and styling

---
 static/share.js | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/static/share.js b/static/share.js
index 359aa7d..c066b26 100644
--- a/static/share.js
+++ b/static/share.js
@@ -29,42 +29,42 @@ async function screenshotDOM(el, opts = {}) {
     const phonetic = el.querySelector(".pronun").textContent.trim();
     const [types, ...defs] = [...el.querySelectorAll("ol.defs li")].map(node => node.textContent.trim());
 
-    const vOffset = 48;
+    const vOffset = 25;
     const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="720" height="240" viewBox="0 0 720 240">
+    <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
         <style>
-            .card { fill: #ffffff; stroke: #e5e7eb; stroke-width: 1.2; rx: 10; ry: 10; }
+            .card { fill: #ffffff; stroke: #e5e7eb; stroke-width: 1.2; rx: 5; ry: 5; }
             .headword {
-                font-family: "Noto Sans Kannada", "Noto Sans", sans-serif;
-                font-size: 28px;
+                font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
+                font-size: ${Math.round(width * 0.03)}px;
                 font-weight: 700;
                 fill: #111827;
             }
             .pron {
-                font-family: "Noto Sans", sans-serif;
-                font-size: 15px;
+                font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
+                font-size: ${Math.round(width * 0.025)}px;
                 fill: #6b7280;
             }
             .pos {
-                font-family: "Noto Sans", sans-serif;
-                font-size: 15px;
-                font-weight: 600;
-                fill: #374151;
+                font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
+                font-size: ${Math.round(width * 0.017)}px;
+                font-weight: bold;
+                fill: #666;
             }
             .def {
-                font-family: "Noto Sans", sans-serif;
-                font-size: 16px;
+                font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
+                font-size: ${Math.round(width * 0.025)}px;
                 fill: #111827;
             }
             .num {
-                font-family: "Noto Sans", sans-serif;
-                font-size: 16px;
+                font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
+                font-size: ${Math.round(width * 0.025)}px;
                 fill: #6b7280;
             }
         </style>
 
         <!-- Card background -->
-        <rect x="8" y="8" width="704" height="224" rx="10" ry="10" class="card"/>
+        <rect x="8" y="8" width="${width - 16}" height="${height - 16}" rx="5" ry="5" class="card"/>
 
         <!-- Content -->
         <g transform="translate(32,36)">
@@ -72,15 +72,15 @@ async function screenshotDOM(el, opts = {}) {
             <text class="headword" x="0" y="0">${word}</text>
 
             <!-- Pronunciation -->
-            <text class="pron" x="0" y="30">${phonetic}</text>
+            <text class="pron" x="0" y="20">${phonetic}</text>
 
             <!-- POS -->
-            <text class="pos" x="0" y="72">${types}</text>
+            <text class="pos" x="13" y="45">${types}</text>
 
             <!-- Definition 1 -->
             ${defs.map((def, idx) => `
-                <text class="num" x="0" y="${112 + idx * vOffset}">${idx + 1}.</text>
-                <text class="def" x="24" y="${112 + idx * vOffset}">${def}</text>
+                <text class="num" x="0" y="${75 + idx * vOffset}">${idx + 1}.</text>
+                <text class="def" x="24" y="${75 + idx * vOffset}">${def}</text>
             `)}
         </g>
     </svg>