Aditya-ds-1806/alar.ink
1
0
Fork 0
forked from dict/alar.ink
Code Pull Requests Activity

chore: fix alignment and styling

Browse Source
This commit is contained in:
Aditya
2025-12-03 01:05:05 +05:30
parent 83221c3132
commit 98b36572aa
1 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
static/share.js
View File

@@ -29,42 +29,42 @@ async function screenshotDOM(el, opts = {}) {
const phonetic = el.querySelector(".pronun").textContent.trim(); const phonetic = el.querySelector(".pronun").textContent.trim();
const [types, ...defs] = [...el.querySelectorAll("ol.defs li")].map(node => node.textContent.trim()); const [types, ...defs] = [...el.querySelectorAll("ol.defs li")].map(node => node.textContent.trim());
const vOffset = 48; const vOffset = 25;
const svg = ` 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> <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 { .headword {
font-family: "Noto Sans Kannada", "Noto Sans", sans-serif; font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-size: 28px; font-size: ${Math.round(width * 0.03)}px;
font-weight: 700; font-weight: 700;
fill: #111827; fill: #111827;
} }
.pron { .pron {
font-family: "Noto Sans", sans-serif; font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-size: 15px; font-size: ${Math.round(width * 0.025)}px;
fill: #6b7280; fill: #6b7280;
} }
.pos { .pos {
font-family: "Noto Sans", sans-serif; font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-size: 15px; font-size: ${Math.round(width * 0.017)}px;
font-weight: 600; font-weight: bold;
fill: #374151; fill: #666;
} }
.def { .def {
font-family: "Noto Sans", sans-serif; font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-size: 16px; font-size: ${Math.round(width * 0.025)}px;
fill: #111827; fill: #111827;
} }
.num { .num {
font-family: "Noto Sans", sans-serif; font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-size: 16px; font-size: ${Math.round(width * 0.025)}px;
fill: #6b7280; fill: #6b7280;
} }
</style> </style>
<!-- Card background --> <!-- 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 --> <!-- Content -->
<g transform="translate(32,36)"> <g transform="translate(32,36)">
@@ -72,15 +72,15 @@ async function screenshotDOM(el, opts = {}) {
<text class="headword" x="0" y="0">${word}</text> <text class="headword" x="0" y="0">${word}</text>
<!-- Pronunciation --> <!-- Pronunciation -->
<text class="pron" x="0" y="30">${phonetic}</text> <text class="pron" x="0" y="20">${phonetic}</text>
<!-- POS --> <!-- POS -->
<text class="pos" x="0" y="72">${types}</text> <text class="pos" x="13" y="45">${types}</text>
<!-- Definition 1 --> <!-- Definition 1 -->
${defs.map((def, idx) => ` ${defs.map((def, idx) => `
<text class="num" x="0" y="${112 + idx * vOffset}">${idx + 1}.</text> <text class="num" x="0" y="${75 + idx * vOffset}">${idx + 1}.</text>
<text class="def" x="24" y="${112 + idx * vOffset}">${def}</text> <text class="def" x="24" y="${75 + idx * vOffset}">${def}</text>
`)} `)}
</g> </g>
</svg> </svg>