diff --git a/app/templates/v2/screens/scorecard_portrait.html b/app/templates/v2/screens/scorecard_portrait.html index f3bfc56..93e5b67 100644 --- a/app/templates/v2/screens/scorecard_portrait.html +++ b/app/templates/v2/screens/scorecard_portrait.html @@ -29,9 +29,12 @@ } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;} + /* Print/PDF-Defaults — WeasyPrint nutzt media=print und sieht NUR + diese Werte. Body == Card-Groesse, ohne Wrapper. */ body{ width:{{ width }}px;height:{{ height }}px;overflow:hidden; } + .card-viewport { width: 100%; height: 100%; } .card{ width:1080px;height:1350px; @@ -40,6 +43,39 @@ display:grid;grid-template-rows: 88px 1fr 96px; } + /* Browser-Preview — skaliert die Card auf Viewport-Breite, scrollbar + wenn die Hoehe nicht reicht. WeasyPrint ignoriert @media screen. */ + @media screen { + html, body { + background: #2a2724 !important; + width: auto !important; + height: auto !important; + min-height: 100vh; + overflow: auto !important; + margin: 0; + padding: 20px; + } + body { + display: flex; + justify-content: center; + align-items: flex-start; + } + .card-viewport { + width: min(1080px, calc(100vw - 40px)); + aspect-ratio: 1080 / 1350; + overflow: hidden; + position: relative; + box-shadow: 0 30px 80px rgba(0,0,0,0.5); + background: var(--paper); + } + .card { + transform: scale(calc(min(1080px, 100vw - 40px) / 1080)); + transform-origin: top left; + position: absolute; + top: 0; left: 0; + } + } + /* Kopfleiste */ .head{ border-bottom:2px solid var(--rule); @@ -147,6 +183,7 @@ +
@@ -225,6 +262,7 @@
+
{# .card-viewport #}