wip css besser

Asz.html

@@ -9,7 +9,7 @@
       <div class="main">
         <div class="main-grid">
           <div class="main-left">
-            <b>Frau   ,</b><br />geboren am xrr in Halle/Westf.,<br />war vom 01.08.xx bis zur Aushändigung des Zeugnisses Studierende des Bildungsgangs<br /><b>Fachschule des Sozialwesens in der Fachrichtung Sozialpädagogik</b>
+            <b>Frau   ,</b><br />geboren am xzr in Halle/Westf.,<br />war vom 01.08.xx bis zur Aushändigung des Zeugnisses Studierende des Bildungsgangs<br /><b>Fachschule des Sozialwesens in der Fachrichtung Sozialpädagogik</b>
             <div class="voffset-halb"></div>
             Der allgemeine Prüfungsausschuss stellte in seiner Abschlusskonferenz am 27.6.x fest:
             <div class="voffset-halb"></div>

daten/main.css

@@ -31,79 +31,104 @@
   .page {
     page-break-after: always;
     page-break-inside: avoid;
-    margin: 0px;
+    outline: red solid 1px;
+    margin: 0;
   }
-
-  .page[size="A4"][orientation="portrait"] {
-    size: A4 portrait;
-  }
-
-  .page[size="A4"][orientation="landscape"] {
-    size: A4 landscape;
-  }
-
-  .page[size="A3"][orientation="portrait"] {
-    size: A3 portrait;
-  }
-
-  .page[size="A3"][orientation="landscape"] {
-    size: A3 landscape;
-  }
-}
-
-@media screen {
-  .page {
-  border: 1px solid black;
-  box-shadow: 5px 5px 4px 0px silver;
-  }
-}
-
-svelte {
-  font-size: 62.5%;
 }
 
-.page {
-  font-size: 1.2em;
-  line-height: 1.5;
-  font-weight: normal;
-  font-family: "Tex Gyre Heros";
-  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
+*/
 
-@media screen {
 .page[size="A4"][orientation="portrait"] {
+  page: a4portrait;
   width: 210mm;
-  height: 297mm;
+  height: 296.8mm;
+}
+@page a4portrait {
+  margin: 0;
+  size: A4 portrait;
 }
 
 .page[size="A4"][orientation="landscape"] {
-  width: 297mm;
+  page: a4landscape;
+  width: 296.8mm;
   height: 210mm;
 }
+@page a4landscape {
+  margin: 0;
+  size: A4 landscape;
+}
 
 .page[size="A3"][orientation="portrait"] {
-  width: 297mm;
+  page: a3portrait;
+  width: 296.8mm;
   height: 420mm;
 }
+@page a3portrait {
+  margin: 0;
+  size: A3 portrait;
+}
 
 .page[size="A3"][orientation="landscape"] {
+  page: a3landscape;
   width: 420mm;
-  height: 297mm;
+  height: 296.8mm;
+}
+@page a3landscape {
+  margin: 0;
+  size: A3 landscape;
 }
 
 .page[size="A5"][orientation="portrait"] {
+  page: a5portrait;
   width: 148mm;
   height: 210mm;
 }
+@page a5portrait {
+  margin: 0;
+  size: A5 portrait;
+}
 
 .page[size="A5"][orientation="landscape"] {
+  page: a5landscape;
   width: 210mm;
   height: 148mm;
 }
+@page a5landscape {
+  margin: 0;
+  size: A5 landscape;
+}
+
+@media screen {
+  .page {
+    border: 1px solid black;
+    box-shadow: 5px 5px 4px 0 silver;
+  }
+}
+
+svelte {
+  font-size: 62.5%;
 }
+
+.page {
+  font-size: 1.2em;
+  line-height: 1.5;
+  font-weight: normal;
+  font-family: "Tex Gyre Heros";
+  color: #333;
+  position: relative;
+  padding: 10mm 25mm 10mm 25mm;
+  display: block;
+}
+
 /* Typography */
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
@@ -153,8 +178,9 @@ p {
 
 .grid {
   display: grid;
-  grid-gap: 0px;
-  align-content: start;
+  grid-gap: 0;
+  gap: 0;
+  /* align-content: start; */
   grid-template-columns: auto;
   grid-template-rows: auto 1fr auto;
   grid-template-areas: "header" "main" "footer";
@@ -316,11 +342,11 @@ hr {
   height: 1px;
   margin: 3px 0;
 }
-hr.hr-rot {
+.hr-rot {
   border-color: #ff2700;
   margin: 8px 0;
 }
-hr.hr-grau {
+.hr-grau {
   border-color: #646464 !important;
 }
 
@@ -432,7 +458,6 @@ ul.dashes li:before {
 
 * {
   box-sizing: border-box;
-  -moz-box-sizing: border-box;
 }
 
 table.fixed {

jz.html

@@ -1,6 +1,6 @@
 {#each schueler as s}
   {#each s.abschnitte.filter(aktHalbjahr) as hj}
-    <div class="page grid" orientation="landscape" size="A3">
+    <div class="page grid" orientation="portrait" size="A4">
       <div class="seitenlogo">
         <img src="daten/traeger_logo.svg" height="160px" alt="traeger_logo" />
       </div>