html { font-size: 13px; } body { font-family: 'Inter', sans-serif; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2?v=3.9") format("woff2"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Inter-Italic.woff2?v=3.9") format("woff2"); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Inter-Bold.woff2?v=3.9") format("woff2"); } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url("fonts/MaterialIcons-Regular.woff2") format('woff2') } /* https://google.github.io/material-design-icons/ */ .mdi { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mdi-36px { font-size: 36px; /* Preferred icon size */ } .pointer { cursor: pointer; } @media screen { .page { box-sizing: border-box; background: rgba(255,255,255,0.9); margin: 20px; box-shadow: 0px 0px 30px 0px #888; } } @media print { * { -webkit-print-color-adjust: exact; } .page { page-break-after: always; page-break-inside: avoid; margin: 0; } .no-print, .no-print * { display: none !important; } } @page { margin: 0; } .page { line-height: 1.5; font-weight: normal; font-family: "Inter"; color: #333; position: relative; padding: 10mm 25mm 10mm 25mm; display: block; } /* Da *named pages*, also z.B. @page a3landscape noch nicht von Chrome unterstützt werden, gilt vorerst die Standard-Einstellung von A4 Portrait. Um andere Formate zu erzeugen, muss die Größe in den svelte-Koponenten als setup-Einstellung hinterlegt werden. Oder man verwendet ein besonderes CSS mit der anderen Einstellung. Dazu bitte ein @import 'nicht_a4_portrait.css' verwenden. Svelte ignoriert sonst die in den <style> tags hinterlegten @... Anweisungen. Link: https://www.w3.org/TR/css3-page/#using-named-pages */ .page[size="A4"][orientation="portrait"] { /* page: a4portrait; */ width: 210mm; height: 296.8mm; } /* @page a4portrait { margin: 0; size: A4 portrait; } */ .page[size="A4"][orientation="landscape"] { /* page: a4landscape; */ width: 296.8mm; height: 209mm; } /* @page a4landscape { margin: 0; size: A4 landscape; } */ .grid { display: grid; grid-gap: 0; gap: 0; grid-template-columns: auto; grid-template-rows: auto 1fr auto; grid-template-areas: "header" "main" "footer"; } .header { grid-area: header; } .main { grid-area: main; } .footer { grid-area: footer; align-self: end; }