Last active
April 7, 2026 11:17
-
-
Save svale/f4ff5028cc9316dff7de68c56a50474a to your computer and use it in GitHub Desktop.
Designmaskinen — Designgrid-system — Endelig design
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="no"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Designgrid-system — Endelig design</title> | |
| <style> | |
| :root { | |
| --bg: #0f0f1a; | |
| --surface: #1a1a2e; | |
| --surface-2: #222240; | |
| --border: #2a2a4a; | |
| --text: #e0e0f0; | |
| --text-muted: #8888aa; | |
| --accent: #4a9977; | |
| --blue: #4a7c8a; | |
| --purple: #6a4c8a; | |
| --red: #c44; | |
| --yellow: #cc0; | |
| --orange: #8a6a4c; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.6; | |
| } | |
| .slide { | |
| min-height: 100vh; | |
| padding: 60px 80px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| border-bottom: 1px solid var(--border); | |
| position: relative; | |
| } | |
| .slide::after { | |
| content: attr(data-slide); | |
| position: absolute; | |
| bottom: 20px; | |
| right: 40px; | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| opacity: 0.4; | |
| } | |
| .slide-title { | |
| align-items: center; | |
| text-align: center; | |
| } | |
| h1 { font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; } | |
| h2 { font-size: 2rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 20px; color: var(--accent); } | |
| h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; } | |
| h4 { font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; } | |
| .subtitle { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 8px; } | |
| .tag { | |
| display: inline-block; background: var(--accent); color: var(--bg); | |
| font-size: 0.75rem; font-weight: 700; text-transform: uppercase; | |
| letter-spacing: 0.08em; padding: 4px 12px; border-radius: 4px; margin-bottom: 16px; | |
| } | |
| .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } | |
| .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } | |
| .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; } | |
| .card { | |
| background: var(--surface); border: 1px solid var(--border); | |
| border-radius: 12px; padding: 24px; display: flex; flex-direction: column; | |
| } | |
| .card-visual { | |
| background: var(--surface-2); border-radius: 8px; padding: 16px; margin-bottom: 16px; | |
| } | |
| .card p, .info p { color: var(--text-muted); font-size: 0.9rem; } | |
| .info { | |
| background: var(--surface); border: 1px solid var(--border); | |
| border-radius: 10px; padding: 20px 24px; | |
| } | |
| .code-block { | |
| background: var(--surface); padding: 20px; border-radius: 8px; | |
| font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; | |
| color: var(--text); line-height: 1.7; overflow-x: auto; | |
| } | |
| .code-block .cm { color: #556; } | |
| .label { | |
| font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; | |
| color: var(--accent); font-weight: 700; margin-bottom: 6px; | |
| } | |
| .highlight-box { | |
| border-left: 3px solid var(--accent); | |
| background: rgba(74,153,119,0.06); | |
| padding: 16px 20px; border-radius: 0 8px 8px 0; margin-top: 20px; | |
| } | |
| .scale-bar { | |
| display: flex; align-items: flex-end; gap: 6px; height: 140px; margin: 20px 0; | |
| } | |
| .scale-step { | |
| flex: 1; background: var(--blue); border-radius: 4px 4px 0 0; | |
| display: flex; flex-direction: column; align-items: center; | |
| justify-content: flex-end; padding: 8px 4px; position: relative; | |
| } | |
| .scale-step .name { font-size: 0.7rem; font-weight: 700; color: var(--accent); } | |
| .scale-step .pct { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; } | |
| .phase-timeline { | |
| display: flex; gap: 0; margin-top: 24px; | |
| } | |
| .phase { | |
| flex: 1; padding: 24px; border: 1px solid var(--border); position: relative; | |
| } | |
| .phase:first-child { border-radius: 12px 0 0 12px; background: rgba(74,153,119,0.06); border-color: var(--accent); } | |
| .phase:last-child { border-radius: 0 12px 12px 0; } | |
| .phase h3 { font-size: 1rem; } | |
| .phase ul { padding-left: 18px; color: var(--text-muted); font-size: 0.85rem; } | |
| .phase ul li { margin-bottom: 4px; } | |
| .phase-badge { | |
| position: absolute; top: -10px; left: 16px; | |
| background: var(--accent); color: var(--bg); font-size: 0.65rem; font-weight: 700; | |
| text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 3px; | |
| } | |
| .phase:last-child .phase-badge { background: var(--surface-2); color: var(--text-muted); } | |
| .formula { | |
| font-family: 'SF Mono', 'Fira Code', monospace; font-size: 1.1rem; | |
| color: var(--accent); padding: 16px 24px; background: var(--surface); | |
| border-radius: 8px; text-align: center; margin: 16px 0; | |
| } | |
| .footer { | |
| text-align: center; color: var(--text-muted); font-size: 0.8rem; | |
| padding: 40px; opacity: 0.4; | |
| } | |
| @media print { .slide { min-height: auto; page-break-after: always; padding: 40px; } } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- SLIDE 1: Tittel --> | |
| <div class="slide slide-title" data-slide="1"> | |
| <div class="tag">Designmaskinen — Designbeslutninger</div> | |
| <h1>Designgrid-system</h1> | |
| <p class="subtitle">Et CSS Grid-inspirert posisjoneringssystem som erstatter 36×36-cellegriddet</p> | |
| <p style="color: var(--text-muted); margin-top: 32px; font-size: 0.95rem;">Marger · 12×12 Grid · Ankerposisjonering · Responsive breakpoints · Utfall · Tekstskala</p> | |
| <p style="color: var(--text-muted); margin-top: 8px; font-size: 0.85rem;">Mars 2026</p> | |
| </div> | |
| <!-- SLIDE 2: Oversikt --> | |
| <div class="slide" data-slide="2"> | |
| <h2>Gridsystemet v 2.0</h2> | |
| <div style="text-align: center; margin-bottom: 24px;"> | |
| <svg viewBox="0 0 700 400" width="100%" style="max-width: 800px; background: var(--surface); border-radius: 12px;"> | |
| <!-- Lerret --> | |
| <rect x="50" y="30" width="600" height="340" fill="#111125" stroke="#333" stroke-width="1" rx="4"/> | |
| <text x="350" y="22" fill="#556" font-size="10" text-anchor="middle" font-family="system-ui">LERRET</text> | |
| <!-- Marger --> | |
| <rect x="50" y="30" width="48" height="340" fill="#c44" opacity="0.08"/> | |
| <rect x="602" y="30" width="48" height="340" fill="#c44" opacity="0.08"/> | |
| <rect x="50" y="30" width="600" height="36" fill="#c44" opacity="0.08"/> | |
| <rect x="50" y="334" width="600" height="36" fill="#c44" opacity="0.08"/> | |
| <!-- Margetiketter --> | |
| <text x="74" y="205" fill="#c66" font-size="9" text-anchor="middle" transform="rotate(-90,74,205)" font-family="system-ui">marg h%</text> | |
| <text x="626" y="205" fill="#c66" font-size="9" text-anchor="middle" transform="rotate(90,626,205)" font-family="system-ui">marg h%</text> | |
| <text x="350" y="52" fill="#c66" font-size="9" text-anchor="middle" font-family="system-ui">marg v%</text> | |
| <!-- Innholdsområde --> | |
| <rect x="98" y="66" width="504" height="268" fill="none" stroke="#4a9" stroke-width="0.5" stroke-dasharray="4,4" opacity="0.3" rx="2"/> | |
| <text x="350" y="82" fill="#4a9" font-size="8" text-anchor="middle" font-family="system-ui" opacity="0.5">INNHOLDSOMRÅDE — 12×12 GRID</text> | |
| <!-- Kolonnefyll (12 kolonner) --> | |
| <g opacity="0.06"> | |
| <rect x="98" y="86" width="36" height="248" fill="#4a9"/> | |
| <rect x="138" y="86" width="36" height="248" fill="#4a9"/> | |
| <rect x="178" y="86" width="36" height="248" fill="#4a9"/> | |
| <rect x="218" y="86" width="36" height="248" fill="#4a9"/> | |
| <rect x="258" y="86" width="36" height="248" fill="#4a9"/> | |
| <rect x="298" y="86" width="36" height="248" fill="#4a9"/> | |
| <rect x="338" y="86" width="36" height="248" fill="#4a9"/> | |
| <rect x="378" y="86" width="36" height="248" fill="#4a9"/> | |
| <rect x="418" y="86" width="36" height="248" fill="#4a9"/> | |
| <rect x="458" y="86" width="36" height="248" fill="#4a9"/> | |
| <rect x="498" y="86" width="36" height="248" fill="#4a9"/> | |
| <rect x="538" y="86" width="36" height="248" fill="#4a9"/> | |
| </g> | |
| <!-- Radlinjer --> | |
| <g opacity="0.08"> | |
| <line x1="98" y1="107" x2="602" y2="107" stroke="#4a9" stroke-width="0.3"/> | |
| <line x1="98" y1="128" x2="602" y2="128" stroke="#4a9" stroke-width="0.3"/> | |
| <line x1="98" y1="149" x2="602" y2="149" stroke="#4a9" stroke-width="0.3"/> | |
| <line x1="98" y1="170" x2="602" y2="170" stroke="#4a9" stroke-width="0.3"/> | |
| <line x1="98" y1="191" x2="602" y2="191" stroke="#4a9" stroke-width="0.3"/> | |
| <line x1="98" y1="212" x2="602" y2="212" stroke="#4a9" stroke-width="0.3"/> | |
| <line x1="98" y1="233" x2="602" y2="233" stroke="#4a9" stroke-width="0.3"/> | |
| <line x1="98" y1="254" x2="602" y2="254" stroke="#4a9" stroke-width="0.3"/> | |
| <line x1="98" y1="275" x2="602" y2="275" stroke="#4a9" stroke-width="0.3"/> | |
| <line x1="98" y1="296" x2="602" y2="296" stroke="#4a9" stroke-width="0.3"/> | |
| <line x1="98" y1="317" x2="602" y2="317" stroke="#4a9" stroke-width="0.3"/> | |
| </g> | |
| <!-- Eksempelblokker --> | |
| <rect x="98" y="86" width="296" height="21" fill="#4a7c8a" opacity="0.65" rx="2"/> | |
| <text x="246" y="100" fill="white" font-size="9" text-anchor="middle" font-family="system-ui">Overskrift — tl 1,1 span 8×1</text> | |
| <rect x="50" y="107" width="524" height="105" fill="#6a4c8a" opacity="0.45" rx="0"/> | |
| <rect x="98" y="107" width="476" height="105" fill="none" stroke="#ff6b6b" stroke-width="0.8" stroke-dasharray="3,3" opacity="0.3"/> | |
| <text x="310" y="160" fill="white" font-size="9" text-anchor="middle" font-family="system-ui">Bilde — tl 1,2 span 12×5 — utfall: venstre</text> | |
| <rect x="98" y="254" width="236" height="80" fill="#4a7c8a" opacity="0.55" rx="2"/> | |
| <text x="216" y="298" fill="white" font-size="9" text-anchor="middle" font-family="system-ui">Tekst — bl 1,12 span 6×4</text> | |
| <rect x="498" y="317" width="76" height="17" fill="#8a6a4c" opacity="0.6" rx="2"/> | |
| <text x="536" y="329" fill="white" font-size="7" text-anchor="middle" font-family="system-ui">Logo — br 12,12</text> | |
| <!-- Ankerpunkter --> | |
| <circle cx="98" cy="86" r="4" fill="#ff6b6b"/> | |
| <circle cx="50" cy="107" r="4" fill="#ff6b6b"/> | |
| <circle cx="98" cy="334" r="4" fill="#ff6b6b"/> | |
| <circle cx="574" cy="334" r="4" fill="#ff6b6b"/> | |
| </svg> | |
| </div> | |
| <div class="grid-4"> | |
| <div class="info"> | |
| <p class="label">Marger</p> | |
| <p>% av lerret. Innholdsområdet ligger innenfor.</p> | |
| </div> | |
| <div class="info"> | |
| <p class="label">12×12 Grid</p> | |
| <p>Fast. Likt for alle maler.</p> | |
| </div> | |
| <div class="info"> | |
| <p class="label">Ankerposisjonering</p> | |
| <p>Fest hjørne + span-retning.</p> | |
| </div> | |
| <div class="info"> | |
| <p class="label">Utfall (bleed)</p> | |
| <p>Utvid til lerretskant per side.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 3: Gridmodell --> | |
| <div class="slide" data-slide="3"> | |
| <h2>1. Gridmodellen</h2> | |
| <p class="subtitle">Fast 12×12-grid innenfor prosentbaserte marger</p> | |
| <div class="grid-2" style="margin-top: 16px;"> | |
| <div> | |
| <div class="card" style="height: 100%;"> | |
| <h3>Konfigurasjon (malnivå)</h3> | |
| <div class="code-block" style="margin-top: 12px; flex: 1;"> | |
| <pre style="margin:0;">template { | |
| margins: { | |
| horizontal: 8 <span class="cm">// % av lerretsbredde</span> | |
| vertical: 5 <span class="cm">// % av lerretshøyde</span> | |
| } | |
| gutter: 1.5 <span class="cm">// % av innholdsbredde</span> | |
| sizeCorrectionAlpha: 0.15 | |
| }</pre> | |
| </div> | |
| <div class="highlight-box" style="margin-top: 16px;"> | |
| <p style="color: var(--text); font-size: 0.9rem;"><strong>Gridkonfigurasjon ligger på malen.</strong> Alle varianter og formater deler samme marger og mellomrom. Responsive layoutforskjeller håndteres per blokk via stående/liggende breakpoints.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="card" style="height: 100%;"> | |
| <h3>Grid-geometri</h3> | |
| <div class="code-block" style="margin-top: 12px;"> | |
| <pre style="margin:0;"><span class="cm">// DPI-multiplikator:</span> | |
| <span class="cm">// Digital = 1 (piksler er piksler)</span> | |
| <span class="cm">// Trykk = 11.81 (300 DPI, mm → px)</span> | |
| <span class="cm">// Eks: A3 (297×420mm) → 3508×4961px</span> | |
| canvasW, canvasH = format × multiplikator | |
| <span class="cm">// Marger → innholdsområde</span> | |
| marginHorizontal = canvasWidth × (margins.horizontal / 100) | |
| marginVertical = canvasHeight × (margins.vertical / 100) | |
| contentWidth = canvasWidth − 2 × marginHorizontal | |
| contentHeight = canvasHeight − 2 × marginVertical | |
| <span class="cm">// Mellomrom → cellestørrelser</span> | |
| gutterPx = contentWidth × (gutter / 100) | |
| cellWidth = (contentWidth − 11 × gutterPx) / 12 | |
| cellHeight = (contentHeight − 11 × gutterPx) / 12</pre> | |
| </div> | |
| <p style="margin-top: 12px; font-size: 0.85rem;"><strong>Mellomrom:</strong> samme absolutte pikselstørrelse på begge akser (som CSS <code>gap</code>). På ikke-kvadratiske formater er cellene rektangulære, men mellomrommene er jevne.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 4: Ankerposisjonering --> | |
| <div class="slide" data-slide="4"> | |
| <h2>2. Ankerbasert posisjonering</h2> | |
| <p class="subtitle">Fest et hjørne, span vokser bort fra det</p> | |
| <div class="grid-4" style="margin-top: 16px;"> | |
| <div class="card"> | |
| <div class="card-visual" style="text-align: center;"> | |
| <svg viewBox="0 0 120 120" width="100%"> | |
| <rect x="5" y="5" width="110" height="110" fill="none" stroke="#333" stroke-width="0.5" rx="2"/> | |
| <rect x="5" y="5" width="65" height="45" fill="var(--blue)" opacity="0.5" rx="2"/> | |
| <circle cx="5" cy="5" r="5" fill="#ff6b6b"/> | |
| <text x="37" y="32" fill="white" font-size="10" text-anchor="middle">→ ↓</text> | |
| </svg> | |
| </div> | |
| <h3 style="text-align:center;">Øverst-venstre (tl)</h3> | |
| <p style="text-align:center;">Span går høyre og ned</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-visual" style="text-align: center;"> | |
| <svg viewBox="0 0 120 120" width="100%"> | |
| <rect x="5" y="5" width="110" height="110" fill="none" stroke="#333" stroke-width="0.5" rx="2"/> | |
| <rect x="50" y="5" width="65" height="45" fill="var(--purple)" opacity="0.5" rx="2"/> | |
| <circle cx="115" cy="5" r="5" fill="#ff6b6b"/> | |
| <text x="83" y="32" fill="white" font-size="10" text-anchor="middle">← ↓</text> | |
| </svg> | |
| </div> | |
| <h3 style="text-align:center;">Øverst-høyre (tr)</h3> | |
| <p style="text-align:center;">Span går venstre og ned</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-visual" style="text-align: center;"> | |
| <svg viewBox="0 0 120 120" width="100%"> | |
| <rect x="5" y="5" width="110" height="110" fill="none" stroke="#333" stroke-width="0.5" rx="2"/> | |
| <rect x="5" y="70" width="65" height="45" fill="var(--blue)" opacity="0.5" rx="2"/> | |
| <circle cx="5" cy="115" r="5" fill="#ff6b6b"/> | |
| <text x="37" y="97" fill="white" font-size="10" text-anchor="middle">→ ↑</text> | |
| </svg> | |
| </div> | |
| <h3 style="text-align:center;">Nederst-venstre (bl)</h3> | |
| <p style="text-align:center;">Span går høyre og opp</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-visual" style="text-align: center;"> | |
| <svg viewBox="0 0 120 120" width="100%"> | |
| <rect x="5" y="5" width="110" height="110" fill="none" stroke="#333" stroke-width="0.5" rx="2"/> | |
| <rect x="50" y="70" width="65" height="45" fill="var(--orange)" opacity="0.5" rx="2"/> | |
| <circle cx="115" cy="115" r="5" fill="#ff6b6b"/> | |
| <text x="83" y="97" fill="white" font-size="10" text-anchor="middle">← ↑</text> | |
| </svg> | |
| </div> | |
| <h3 style="text-align:center;">Nederst-høyre (br)</h3> | |
| <p style="text-align:center;">Span går venstre og opp</p> | |
| </div> | |
| </div> | |
| <div class="code-block" style="margin-top: 24px;"> | |
| <pre style="margin:0;"><span class="cm">// Eksempel: logo festet i nederste høyre hjørne</span> | |
| LogoBlock { | |
| anchor: "br" | |
| col: 12, row: 12 <span class="cm">// ankerpunkt sitter på kol 12, rad 12</span> | |
| colSpan: 3, rowSpan: 1 <span class="cm">// spenner 3 kol venstre, 1 rad opp → kol 10-12, rad 12</span> | |
| }</pre> | |
| </div> | |
| </div> | |
| <!-- SLIDE 5: Responsive breakpoints --> | |
| <div class="slide" data-slide="5"> | |
| <h2>3. Responsive breakpoints</h2> | |
| <p class="subtitle">Hver blokk har stående + liggende posisjonering. Sideforholdet bestemmer hvilken.</p> | |
| <div class="grid-2" style="margin-top: 16px;"> | |
| <div class="card"> | |
| <div class="card-visual"> | |
| <svg viewBox="0 0 200 300" width="100%" style="border-radius: 4px;"> | |
| <rect width="200" height="300" fill="#111125"/> | |
| <rect x="0" y="0" width="16" height="300" fill="#c44" opacity="0.06"/> | |
| <rect x="184" y="0" width="16" height="300" fill="#c44" opacity="0.06"/> | |
| <rect x="0" y="0" width="200" height="14" fill="#c44" opacity="0.06"/> | |
| <rect x="0" y="286" width="200" height="14" fill="#c44" opacity="0.06"/> | |
| <rect x="16" y="14" width="168" height="90" fill="#6a4c8a" opacity="0.45" rx="2"/> | |
| <text x="100" y="60" fill="white" font-size="9" text-anchor="middle" font-family="system-ui">Bilde: 12×4</text> | |
| <rect x="16" y="112" width="168" height="44" fill="#4a7c8a" opacity="0.6" rx="2"/> | |
| <text x="100" y="138" fill="white" font-size="9" text-anchor="middle" font-family="system-ui">Overskrift: 12×2</text> | |
| <rect x="16" y="164" width="168" height="88" fill="#4a7c8a" opacity="0.4" rx="2"/> | |
| <text x="100" y="212" fill="white" font-size="9" text-anchor="middle" font-family="system-ui">Tekst: 12×4</text> | |
| <rect x="128" y="264" width="56" height="22" fill="#8a6a4c" opacity="0.6" rx="2"/> | |
| <text x="156" y="278" fill="white" font-size="7" text-anchor="middle" font-family="system-ui">Logo</text> | |
| </svg> | |
| </div> | |
| <h3>Stående <span style="color: var(--text-muted); font-weight: 400; font-size: 0.85rem;">(høyde ≥ bredde - kvadratisk er som stående)</span></h3> | |
| <p>Innhold stables vertikalt. Blokker i full bredde.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-visual"> | |
| <svg viewBox="0 0 300 200" width="100%" style="border-radius: 4px;"> | |
| <rect width="300" height="200" fill="#111125"/> | |
| <rect x="0" y="0" width="16" height="200" fill="#c44" opacity="0.06"/> | |
| <rect x="284" y="0" width="16" height="200" fill="#c44" opacity="0.06"/> | |
| <rect x="0" y="0" width="300" height="12" fill="#c44" opacity="0.06"/> | |
| <rect x="0" y="188" width="300" height="12" fill="#c44" opacity="0.06"/> | |
| <rect x="16" y="12" width="131" height="176" fill="#6a4c8a" opacity="0.45" rx="2"/> | |
| <text x="81" y="100" fill="white" font-size="9" text-anchor="middle" font-family="system-ui">Bilde: 6×12</text> | |
| <rect x="153" y="12" width="131" height="44" fill="#4a7c8a" opacity="0.6" rx="2"/> | |
| <text x="218" y="38" fill="white" font-size="9" text-anchor="middle" font-family="system-ui">Overskrift: 6×3</text> | |
| <rect x="153" y="62" width="131" height="88" fill="#4a7c8a" opacity="0.4" rx="2"/> | |
| <text x="218" y="110" fill="white" font-size="9" text-anchor="middle" font-family="system-ui">Tekst: 6×6</text> | |
| <rect x="228" y="160" width="56" height="28" fill="#8a6a4c" opacity="0.6" rx="2"/> | |
| <text x="256" y="178" fill="white" font-size="7" text-anchor="middle" font-family="system-ui">Logo</text> | |
| </svg> | |
| </div> | |
| <h3>Liggende <span style="color: var(--text-muted); font-weight: 400; font-size: 0.85rem;">(bredde > høyde)</span></h3> | |
| <p>Innhold flyter side ved side. Delte layouts.</p> | |
| </div> | |
| </div> | |
| <div class="code-block" style="margin-top: 20px;"> | |
| <pre style="margin:0;">ImageBlock { | |
| portrait: { anchor: "tl", col: 1, row: 1, colSpan: 12, rowSpan: 4 } | |
| landscape: { anchor: "tl", col: 1, row: 1, colSpan: 6, rowSpan: 12 } | |
| } | |
| HeadingBlock { | |
| portrait: { anchor: "tl", col: 1, row: 5, colSpan: 12, rowSpan: 2 } | |
| landscape: { anchor: "tl", col: 7, row: 1, colSpan: 6, rowSpan: 3 } | |
| }</pre> | |
| </div> | |
| </div> | |
| <!-- SLIDE 6: Utfall (bleed) --> | |
| <div class="slide" data-slide="6"> | |
| <h2>4. Utfall (bleed)</h2> | |
| <p class="subtitle">Per-side bryter som utvider en blokk forbi margene til lerretskanten</p> | |
| <div class="grid-4" style="margin-top: 16px;"> | |
| <div class="card"> | |
| <div class="card-visual" style="text-align: center;"> | |
| <svg viewBox="0 0 140 140" width="100%"> | |
| <rect width="140" height="140" fill="#111125" stroke="#333" stroke-width="0.5"/> | |
| <line x1="14" y1="0" x2="14" y2="140" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.3"/> | |
| <line x1="126" y1="0" x2="126" y2="140" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.3"/> | |
| <line x1="0" y1="12" x2="140" y2="12" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.3"/> | |
| <line x1="0" y1="128" x2="140" y2="128" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.3"/> | |
| <rect x="14" y="12" width="112" height="50" fill="var(--purple)" opacity="0.5" rx="2"/> | |
| <text x="70" y="42" fill="white" font-size="9" text-anchor="middle">Uten utfall</text> | |
| </svg> | |
| </div> | |
| <h3 style="text-align:center; font-size: 0.9rem;">Normal</h3> | |
| </div> | |
| <div class="card"> | |
| <div class="card-visual" style="text-align: center;"> | |
| <svg viewBox="0 0 140 140" width="100%"> | |
| <rect width="140" height="140" fill="#111125" stroke="#333" stroke-width="0.5"/> | |
| <line x1="14" y1="0" x2="14" y2="140" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <line x1="126" y1="0" x2="126" y2="140" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <line x1="0" y1="12" x2="140" y2="12" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <line x1="0" y1="128" x2="140" y2="128" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <rect x="0" y="0" width="140" height="62" fill="var(--purple)" opacity="0.5"/> | |
| <rect x="14" y="12" width="112" height="50" fill="none" stroke="#ff6b6b" stroke-width="0.8" stroke-dasharray="2,2" opacity="0.3"/> | |
| <text x="70" y="36" fill="white" font-size="9" text-anchor="middle">Fullt utfall</text> | |
| </svg> | |
| </div> | |
| <h3 style="text-align:center; font-size: 0.9rem;">Alle sider</h3> | |
| </div> | |
| <div class="card"> | |
| <div class="card-visual" style="text-align: center;"> | |
| <svg viewBox="0 0 140 140" width="100%"> | |
| <rect width="140" height="140" fill="#111125" stroke="#333" stroke-width="0.5"/> | |
| <line x1="14" y1="0" x2="14" y2="140" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <line x1="126" y1="0" x2="126" y2="140" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <line x1="0" y1="12" x2="140" y2="12" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <line x1="0" y1="128" x2="140" y2="128" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <rect x="0" y="50" width="126" height="40" fill="var(--blue)" opacity="0.5"/> | |
| <rect x="14" y="50" width="112" height="40" fill="none" stroke="#ff6b6b" stroke-width="0.8" stroke-dasharray="2,2" opacity="0.3"/> | |
| <text x="63" y="74" fill="white" font-size="9" text-anchor="middle">utfall: venstre</text> | |
| </svg> | |
| </div> | |
| <h3 style="text-align:center; font-size: 0.9rem;">Én side</h3> | |
| </div> | |
| <div class="card"> | |
| <div class="card-visual" style="text-align: center;"> | |
| <svg viewBox="0 0 140 140" width="100%"> | |
| <rect width="140" height="140" fill="#111125" stroke="#333" stroke-width="0.5"/> | |
| <line x1="14" y1="0" x2="14" y2="140" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <line x1="126" y1="0" x2="126" y2="140" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <line x1="0" y1="12" x2="140" y2="12" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <line x1="0" y1="128" x2="140" y2="128" stroke="#c44" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.2"/> | |
| <rect x="0" y="55" width="140" height="30" fill="var(--orange)" opacity="0.5"/> | |
| <rect x="14" y="55" width="112" height="30" fill="none" stroke="#ff6b6b" stroke-width="0.8" stroke-dasharray="2,2" opacity="0.3"/> | |
| <text x="70" y="74" fill="white" font-size="9" text-anchor="middle">utfall: V+H</text> | |
| </svg> | |
| </div> | |
| <h3 style="text-align:center; font-size: 0.9rem;">Horisontalt</h3> | |
| </div> | |
| </div> | |
| <div class="grid-2" style="margin-top: 20px;"> | |
| <div class="info"> | |
| <h4>Slik fungerer det</h4> | |
| <p>Blokken forblir på griddet — utfall utvider den til lerretskanten på aktiverte sider. Slå av → snapper tilbake til gridposisjon.</p> | |
| </div> | |
| <div class="info"> | |
| <h4>Per breakpoint</h4> | |
| <p>Utfallsinnstillinger kan variere mellom stående og liggende. Et herobilde kan ha utfall i stående men ikke i liggende.</p> | |
| </div> | |
| </div> | |
| <div class="code-block" style="margin-top: 16px;"> | |
| <pre style="margin:0;">ImageBlock { | |
| portrait: { | |
| anchor: "tl", col: 1, row: 1, colSpan: 12, rowSpan: 4, | |
| bleed: { top: true, right: false, bottom: false, left: true } | |
| } | |
| }</pre> | |
| </div> | |
| </div> | |
| <!-- SLIDE 7: Tekststørrelse --> | |
| <div class="slide" data-slide="7"> | |
| <h2>5. Tekststørrelse</h2> | |
| <p class="subtitle">Navngitt skala basert på lerretshøyde, med alfakorreksjon på tvers av formater</p> | |
| <div class="formula"> | |
| fontSize = textScale[ størrelse ] × canvasHeighteight × ( bredde / høyde )<sup style="font-size: 0.7em;">α</sup> | |
| </div> | |
| <div style="display: flex; align-items: flex-end; gap: 8px; height: 160px; margin: 24px 0;"> | |
| <div class="scale-step" style="height: 18%;"><span class="name">XXS</span><span class="pct">1,5%</span></div> | |
| <div class="scale-step" style="height: 24%;"><span class="name">XS</span><span class="pct">2%</span></div> | |
| <div class="scale-step" style="height: 34%;"><span class="name">S</span><span class="pct">3%</span></div> | |
| <div class="scale-step" style="height: 48%;"><span class="name">M</span><span class="pct">4,5%</span></div> | |
| <div class="scale-step" style="height: 65%;"><span class="name">L</span><span class="pct">6,5%</span></div> | |
| <div class="scale-step" style="height: 82%;"><span class="name">XL</span><span class="pct">9%</span></div> | |
| <div class="scale-step" style="height: 100%;"><span class="name">XXL</span><span class="pct">13%</span></div> | |
| </div> | |
| <div class="grid-3"> | |
| <div class="info"> | |
| <p class="label">Navngitte størrelser</p> | |
| <p>Designeren velger XXS–XXL per tekstblokk. Ingen piksler, ingen matte. Systemet håndterer skalering.</p> | |
| </div> | |
| <div class="info"> | |
| <p class="label">~1,4× forhold</p> | |
| <p>Hvert trinn er ~1,4× det forrige — en standard typografisk skala. Fast systemomfattende, ikke per mal.</p> | |
| </div> | |
| <div class="info"> | |
| <p class="label">Alfakorreksjon</p> | |
| <p>sizeCorrectionAlpha justerer tekst mellom sideforhold slik at brede bannere ikke får bitte liten tekst.</p> | |
| </div> | |
| </div> | |
| <div class="grid-3" style="margin-top: 16px;"> | |
| <div class="card" style="text-align: center;"> | |
| <p class="label">Instagram 1080×1080</p> | |
| <p style="font-size: 1.8rem; font-weight: 700; color: var(--text); margin: 8px 0;">49px</p> | |
| <p>M = 4,5% × 1080</p> | |
| </div> | |
| <div class="card" style="text-align: center;"> | |
| <p class="label">A3-plakat @300dpi</p> | |
| <p style="font-size: 1.8rem; font-weight: 700; color: var(--text); margin: 8px 0;">223px</p> | |
| <p>M = 4,5% × 4961</p> | |
| </div> | |
| <div class="card" style="text-align: center;"> | |
| <p class="label">Bredt banner 1920×600</p> | |
| <p style="font-size: 1.8rem; font-weight: 700; color: var(--text); margin: 8px 0;">27px → ~42px</p> | |
| <p>M + alfakorreksjon</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 8: Levering --> | |
| <div class="slide" data-slide="8"> | |
| <h2>6. Implementeringsfaser</h2> | |
| <div class="phase-timeline"> | |
| <div class="phase"> | |
| <div class="phase-badge">Fase 1 — Konsept</div> | |
| <h3 style="margin-top: 8px;">Konsept og plan</h3> | |
| <ul> | |
| <li>Konseptutvikling og teori</li> | |
| <li>Arkitektur og datamodelldesign</li> | |
| <li>Edge cases og formattilpasning</li> | |
| <li>Designspesifikasjon og dokumentasjon</li> | |
| <li>Implementeringsplan</li> | |
| </ul> | |
| </div> | |
| <div class="phase"> | |
| <div class="phase-badge">Fase 2 — Bygg</div> | |
| <h3 style="margin-top: 8px;">Datamodell + rendering</h3> | |
| <ul> | |
| <li>Sanity-skjemaer: gridkonfigurasjon, ankerposisjonering, utfall, stående/liggende</li> | |
| <li>Fast tekstskala-konstant (systemomfattende) (denne er klar)</li> | |
| <li>Oppdatert parseFormat for ny gridgeometri</li> | |
| <li>SVG-rendering med ankerposisjonering + utfall</li> | |
| <li>Lerretshøyde-basert tekststørrelse med alfakorreksjon</li> | |
| </ul> | |
| </div> | |
| <div class="phase"> | |
| <div class="phase-badge">Fase 3 — Rediger</div> | |
| <h3 style="margin-top: 8px;">Redigering og visualisering</h3> | |
| <ul> | |
| <li>Visuell redigering av blokkposisjonering</li> | |
| <li>Kolonne-/radguider på editorlerretet</li> | |
| <li>Visualisering av marggrenser</li> | |
| <li>Utfallsindikatorer</li> | |
| <li>Slå gridoverlegg av/på</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="highlight-box" style="margin-top: 32px;"> | |
| <h4 style="color: var(--accent);">Oppsummering av designbeslutninger</h4> | |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 12px; font-size: 0.9rem;"> | |
| <p><strong>Grid:</strong> Fast 12×12, ikke konfigurerbart</p> | |
| <p><strong>Marger:</strong> % av lerret (h% + v%)</p> | |
| <p><strong>Mellomrom:</strong> % av innholdsbredde, jevnt på begge akser</p> | |
| <p><strong>Konfigurasjon:</strong> Malnivå</p> | |
| <p><strong>Posisjonering:</strong> Ankerhjørne + kol/rad + span</p> | |
| <p><strong>Breakpoints:</strong> Stående + liggende per blokk</p> | |
| <p><strong>Utfall:</strong> Per-side bryter, per breakpoint</p> | |
| <p><strong>Tekststørrelse:</strong> Navngitt skala × lerretshøyde × alfa</p> | |
| <p><strong>Målbruker:</strong> Kun maldesigner</p> | |
| <p><strong>Bakoverkompatibilitet:</strong> Ikke nødvendig (rent brudd)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| Designmaskinen — Designgrid-system — Endelig design — Mars 2026 | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment