fix: gjør modellark.html lesbar på skjerm via @media screen

Print-kilden var dimensjonert i pt for A4 liggende og rant i 3
kolonner over hele viewportbredden, uten viewport-meta. HTML-en var
derfor knapt lesbar i nettleser, mens PDF-en (bygget fra samme fil)
var det. Legger til viewport-meta og et @media screen-lag som
overstyrer skriftvariablene og de fire harkodede pt-stedene, gjør
body til en sentrert lesecontainer, og setter én tekstkolonne i
stedet for tre. Print-laget (@page, @media print-fravær) er urørt.

Verifisert: sidetall (8), tekstlagsdiff og renderte JPEG-sider mot
eksisterende modellark.pdf er identiske - PDF-en er derfor ikke
bygget på nytt.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VaQepeMGiBeTJMBCrmS1nN
This commit is contained in:
Kjell Tore Guttormsen 2026-08-18 22:10:19 +02:00
commit 044e0e4609

View file

@ -2,6 +2,7 @@
<html lang="no">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tre nivå av organisatorisk produktivitet med KI, modellark v1.0</title>
<style>
:root {
@ -139,6 +140,38 @@ figcaption {
padding-top: 0.8mm;
}
@page { size: A4 landscape; margin: 8.5mm; }
/* Skjermvisning: samme kilde, eget medielag. Print-laget over er urørt -
Chrome sin print-pipeline emulerer "print" og leser aldri denne blocken. */
@media screen {
:root {
--prose: 16px;
--tbl: 15px;
--mini: 13px;
--ncols: 1;
}
body {
max-width: 1100px;
margin: 0 auto;
padding: 32px 24px 64px;
line-height: 1.55;
}
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 8px; }
p.meta { margin: 0 0 16px; }
h2 { font-size: 1.35rem; margin: 40px 0 16px; padding-bottom: 8px; }
h2:first-of-type { margin-top: 24px; }
p { margin: 0.9em 0; }
ul { margin: 0.9em 0 0.9em 24px; }
li { margin: 0.4em 0; }
ol { margin: 0.9em 0 0.9em 26px; }
blockquote { margin: 16px 0; padding: 12px 18px; border-left-width: 3px; }
table { line-height: 1.5; margin: 12px 0 8px; }
th, td { padding: 10px 12px; }
td.lvl em { font-size: 0.85em; margin-top: 4px; }
.cols { column-gap: 40px; }
figure { margin: 20px 0; }
figcaption { font-size: 0.85rem; margin-top: 8px; padding-top: 6px; }
}
</style>
</head>
<body>