Fonttikoon A-/A+ säädin: ±20% viidessä askeleessa

Oikeassa yläkulmassa A- ja A+ napit. Skaalaa 80-120%, tallennetaan localStorageen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaakko Vanhala
2026-04-11 08:31:33 +03:00
parent c1133bb075
commit 8bd86e6325
2 changed files with 16 additions and 1 deletions

View File

@@ -29,6 +29,10 @@ import Settings from "../components/Settings.astro";
<h1 style="margin-bottom:0"><span style="color:#ff6b00">Kipinä</span> Agentic Playground</h1>
<p style="color:#8b949e;margin:0">AI-ohjelmistokehitystiimi · <span id="hub-version">-</span></p>
</div>
<div style="display:flex;gap:4px;align-items:center">
<button onclick="changeFontSize(-1)" class="btn btn-muted" style="font-size:14px;padding:2px 8px" title="Pienennä fonttia">A-</button>
<button onclick="changeFontSize(1)" class="btn btn-muted" style="font-size:14px;padding:2px 8px" title="Suurenna fonttia">A+</button>
</div>
</div>
<!-- Välilehdet -->
@@ -53,6 +57,17 @@ import Settings from "../components/Settings.astro";
<script is:inline>
// === Helpers ===
// Fonttikoon säätö (±20%, 5 askelta)
let fontScale = parseFloat(localStorage.getItem('kpn-font-scale') || '1');
document.documentElement.style.fontSize = (fontScale * 16) + 'px';
window.changeFontSize = function(dir) {
fontScale = Math.max(0.8, Math.min(1.2, fontScale + dir * 0.05));
fontScale = Math.round(fontScale * 100) / 100;
document.documentElement.style.fontSize = (fontScale * 16) + 'px';
localStorage.setItem('kpn-font-scale', String(fontScale));
};
function esc(str) {
if (!str) return '';
return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');

View File

@@ -14,7 +14,7 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
font-size: 1rem;
background: var(--bg);
color: var(--text);
min-height: 100vh;