falkan/dickloads
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

highlight: inline equation layout with responsive stacked fallback

Browse Source 
- From and result now on one line: '1.00 Units = 0.09 OtherUnits'
- Same font size and color for both sides (pico-color, 600 weight)
- Container query switches to over-under at <420px with '= ' prefix on result line
- Separator '=' shown inline; muted color/normal weight to visually anchor the equation
- Removed old two-tier font sizing (small grey from, large blue result)
This commit is contained in:
Falkan
2026-03-17 10:47:27 -04:00
parent ee162fc0f7
commit 7ca0fc4032
2 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/routes/+page.svelte
View File

@@ -112,8 +112,11 @@
<div class="highlighted-result" class:has-highlight={highlightedResult !== null} aria-live="polite">
{#if highlightedResult !== null}
<button class="highlight-dismiss" onclick={() => (highlightedUnitId = null)} aria-label="Remove highlight">×</button>
<span class="highlighted-equation-from">{formatBig(new Big(inputValue))} {fromUnit.labelPlural}</span>
<span class="highlighted-equation-equals">= {formatBig(highlightedResult.convertedValue)} {highlightedResult.unit.labelPlural}</span>
<div class="highlighted-equation">
<span class="highlighted-eq-from">{formatBig(new Big(inputValue))} {fromUnit.labelPlural}</span>
<span class="highlighted-eq-sep">=</span>
<span class="highlighted-eq-to">{formatBig(highlightedResult.convertedValue)} {highlightedResult.unit.labelPlural}</span>
</div>
<span class="highlighted-symbol">{highlightedResult.unit.symbol}</span>
{:else}
<span class="highlighted-placeholder">Click a result to highlight it</span>