upload

output/theme-catalog/theme-gallery.html

@@ -0,0 +1 @@
+<!doctype html><html lang="de"><head><meta charset="utf-8"><title>Theme-Katalog</title><style>@page{size:A4 landscape;margin:10mm 11mm 12mm}*{box-sizing:border-box}body{margin:0;font-family:Arial;color:#202a30}header{display:flex;justify-content:space-between;align-items:end;border-bottom:2px solid #172a42;padding-bottom:3mm;margin-bottom:4mm}h1{margin:0;font-size:23pt}header p{margin:0;color:#687781}.grid{display:grid;grid-template-columns:1fr 1fr;gap:4mm}article{height:59mm;border:1px solid #d8dfe3;padding:3mm;display:grid;grid-template-columns:46mm 1fr;gap:4mm;break-inside:avoid}.mock{position:relative;background:white;border:1px solid #ccd5da;overflow:hidden;height:51mm;padding:4mm}.mock>*{position:relative;display:block}.mock .top{height:9mm;margin:-4mm -4mm 4mm}.mock span{display:inline-block;width:46%;height:12mm;margin:1mm}.mock em{width:14mm;height:14mm;border-radius:50%;position:absolute;right:4mm;top:13mm}.mock u{height:1.5mm;background:#dfe5e8;margin:2.5mm 0;text-decoration:none}.mock .side{position:absolute;left:0;top:0;bottom:0;width:11mm}.mock .side~*{margin-left:10mm}.mock .rule{height:.8mm;margin:2mm 0 5mm}.mock h6{font-size:17pt;margin:2mm 0 5mm}.mock .block{width:23mm;height:25mm}.mock .block+h6{position:absolute;right:4mm;top:3mm;font-size:25pt}.mock .row{height:.5mm;margin:4mm 0;background:#cdd5da}.mock .half{position:absolute;left:0;top:0;bottom:0;width:50%}.mock .half+h6{margin-left:23mm;font-size:25pt}.mock .big{font-size:35pt;margin:0}.mock .bar{height:4mm;width:70%;margin-bottom:5mm}.mock .tiny{width:8mm;height:2mm}.mock .curve{height:14mm;margin:-4mm -4mm 4mm;border-radius:0 0 12mm 0}section small{font-size:6.5pt;text-transform:uppercase;letter-spacing:.7px;color:#718087;font-weight:bold}h2{font-size:12pt;margin:1.5mm 0 1mm}code{font-size:7pt;background:#f1f4f5;padding:1mm}section p{font-size:7.5pt;line-height:1.35;color:#56656d;margin:3mm 0}.sw{display:flex;gap:1mm}.sw i{width:5mm;height:5mm;border:1px solid #0001}footer{margin-top:4mm;font-size:7pt;color:#718087;display:flex;justify-content:space-between}</style></head><body><header><div><h1>Monthly Report Kit</h1><p>28 Designs in 10 Layoutfamilien</p></div><p>Auswahl über <code>design.theme</code></p></header><main class="grid"><article><div class="mock"><b class="curve" style="background:#1F5D66"></b><span style="background:#F2F6F5"></span><span style="background:#F2F6F5"></span><em style="background:#DBA25D"></em><u></u></div><section><small>Flexibel · modern</small><h2>Modern Custom</h2><code>modern</code><p>Abgerundete Karten, Verlaufskopf und frei definierbare Kundenfarben.</p><div class="sw"><i style="background:#1F5D66"></i><i style="background:#2C7C82"></i><i style="background:#DBA25D"></i><i style="background:#F2F6F5"></i></div></section></article><article><div class="mock"><h6 style="color:#243B53;font-family:Georgia">Report</h6><i class="rule" style="background:#C3913C"></i><u></u><u></u><u></u></div><section><small>Flexibel · classic</small><h2>Classic Custom</h2><code>classic</code><p>Serifentypografie, feine Linien und frei definierbare Kundenfarben.</p><div class="sw"><i style="background:#243B53"></i><i style="background:#486581"></i><i style="background:#C3913C"></i><i style="background:#F4F1EA"></i></div></section></article><article><div class="mock"><b class="tiny" style="background:#E7B45A"></b><h6 style="color:#294C60">Report</h6><u></u><u></u><span style="background:#F1F5F5"></span></div><section><small>Minimal · minimal</small><h2>Nordic Light</h2><code>nordic-light</code><p>Helles, luftiges Layout mit kuehlen Blautoenen und viel Weissraum.</p><div class="sw"><i style="background:#294C60"></i><i style="background:#6D98A6"></i><i style="background:#E7B45A"></i><i style="background:#F1F5F5"></i></div></section></article><article><div class="mock"><b class="tiny" style="background:#8FD3E6"></b><h6 style="color:#182B36">Report</h6><u></u><u></u><span style="background:#EDF3F4"></span></div><section><small>Minimal · minimal</small><h2>Nordic Night</h2><code>nordic-night</code><p>Dunkle skandinavische Farbwelt mit eisblauem Akzent.</p><div class="sw"><i style="background:#182B36"></i><i style="background:#2F5668"></i><i style="background:#8FD3E6"></i><i style="background:#EDF3F4"></i></div></section></article><article><div class="mock"><b class="tiny" style="background:#C99C64"></b><h6 style="color:#49665B">Report</h6><u></u><u></u><span style="background:#F2F3ED"></span></div><section><small>Minimal · minimal</small><h2>Alpine Sage</h2><code>alpine-sage</code><p>Ruhige Salbei- und Steinfarben fuer naturnahe Marken.</p><div class="sw"><i style="background:#49665B"></i><i style="background:#718C7D"></i><i style="background:#C99C64"></i><i style="background:#F2F3ED"></i></div></section></article><article><div class="mock"><b class="top" style="background:#173B67"></b><span style="background:#EEF3F7"></span><span style="background:#EEF3F7"></span><span style="background:#37A6B8"></span><u></u><u></u></div><Line truncated