Styling and bw logo

style.css

@@ -0,0 +1,95 @@
+body {
+  font-family: "IBM Plex Sans", sans-serif;
+  width: 21cm;
+  padding: 1cm;
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.5em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+td, th {
+  border: 1px solid gray;
+  border-collapse: collapse;
+  padding: 2mm 3mm;
+  vertical-align: top;
+}
+
+header {
+  font-size: 30px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 25px;
+  margin-bottom: 40px;
+}
+
+td > *:first-child {
+  margin-top: 0;
+}
+
+td > *:last-child {
+  margin-bottom: 0;
+}
+
+.small {
+  font-size: 0.8em;
+}
+
+.recipe-grid {
+  display: grid;
+  grid-template-columns: 4fr 6fr;
+  border: 1px solid gray;
+  border-style: none none solid solid;
+}
+
+.recipe-grid > * {
+  border: 1px solid gray;
+  border-style: solid solid none none;
+  padding: 0 1em;
+  font-size: 0.9em;
+}
+
+.faktenbox {
+  border: 1px solid gray;
+  padding: 0 1em;
+  margin: 1em 0;
+  border-radius: 5px;
+}
+
+.faktenbox > h3 {
+  text-align: center;
+}
+
+h1, h2, h3, h4, h5 {
+  break-after: avoid;
+}
+
+p, td, th, .faktenbox, ul, .recipe-grid {
+  break-inside: avoid;
+}
+
+thead {
+  break-inside: avoid;
+  break-after: avoid;
+}
+
+.label-after {
+  break-inside: avoid;
+  break-after: avoid;
+}
+
+.label-before {
+  break-inside: avoid;
+  break-before: avoid;
+}
+
+@media print {
+  body {
+    padding: 0;
+    margin: 0;
+  }
+}