app
Component Widgets
Public Made by Adomby adom
Reusable component widgets for pinouts, thermal vias, molecule relationships, reviewed chip outlines and lightweight four-level LOD cache listings.
← Commit history
pinout: container-query stacking so the table never clips in a narrow (cross-link) column
2 files changed
+8−4
files/pinout-widget.js+4−2@@ -260,7 +260,7 @@ :host([theme="light"]){--bg:#f6f8fc;--panel:#fff;--line:#dbe2ee;--line2:#c3cede;--text:#1a2230;--dim:#5a6678;--dim2:#8592a6;--accent:#0d8f88;--hot:rgba(13,143,136,.10)} *{box-sizing:border-box} .card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px;color:var(--text);- font:14px/1.5 -apple-system,'Segoe UI',Roboto,Arial,sans-serif}+ font:14px/1.5 -apple-system,'Segoe UI',Roboto,Arial,sans-serif;container-type:inline-size} .hd{display:flex;align-items:baseline;gap:10px;margin-bottom:12px} .hd .mpn{font:700 17px ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:-.2px} .hd .pkg{font:600 11px ui-monospace,monospace;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:2px 8px;border-radius:6px}@@ -271,7 +271,9 @@ .tbtn:hover{color:var(--text);border-color:var(--line2)} .tbtn.ok{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)} .body{display:grid;grid-template-columns:minmax(300px,1fr) minmax(220px,1fr);gap:20px;align-items:start}- @media(max-width:620px){.body{grid-template-columns:1fr}}+ /* stack diagram over table when the WIDGET (not the viewport) is narrow —+ e.g. side-by-side in a cross-link row — so the table never clips */+ @container (max-width:580px){.body{grid-template-columns:1fr}} .readout{height:24px;display:flex;align-items:center;gap:9px;font:600 13px ui-monospace,monospace;color:var(--dim);padding:0 4px} .readout b{color:var(--accent)} .readout .rt{margin-left:auto;font-size:11px;text-transform:uppercase;letter-spacing:.08em} .diagram{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}
readme.html+4−2@@ -509,7 +509,7 @@ h2 .anchor:hover{opacity:1;color:var(--teal)} :host([theme="light"]){--bg:#f6f8fc;--panel:#fff;--line:#dbe2ee;--line2:#c3cede;--text:#1a2230;--dim:#5a6678;--dim2:#8592a6;--accent:#0d8f88;--hot:rgba(13,143,136,.10)} *{box-sizing:border-box} .card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px;color:var(--text);- font:14px/1.5 -apple-system,'Segoe UI',Roboto,Arial,sans-serif}+ font:14px/1.5 -apple-system,'Segoe UI',Roboto,Arial,sans-serif;container-type:inline-size} .hd{display:flex;align-items:baseline;gap:10px;margin-bottom:12px} .hd .mpn{font:700 17px ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:-.2px} .hd .pkg{font:600 11px ui-monospace,monospace;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:2px 8px;border-radius:6px}@@ -520,7 +520,9 @@ h2 .anchor:hover{opacity:1;color:var(--teal)} .tbtn:hover{color:var(--text);border-color:var(--line2)} .tbtn.ok{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)} .body{display:grid;grid-template-columns:minmax(300px,1fr) minmax(220px,1fr);gap:20px;align-items:start}- @media(max-width:620px){.body{grid-template-columns:1fr}}+ /* stack diagram over table when the WIDGET (not the viewport) is narrow —+ e.g. side-by-side in a cross-link row — so the table never clips */+ @container (max-width:580px){.body{grid-template-columns:1fr}} .readout{height:24px;display:flex;align-items:center;gap:9px;font:600 13px ui-monospace,monospace;color:var(--dim);padding:0 4px} .readout b{color:var(--accent)} .readout .rt{margin-left:auto;font-size:11px;text-transform:uppercase;letter-spacing:.08em} .diagram{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}