print fixes

src/app.html

@@ -10,7 +10,8 @@
 	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Caudex">
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:wght@100">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Red+Hat+Display">
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Red+Hat+Display">
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	%sveltekit.head%

src/lib/MenuFoodRow.svelte

@@ -37,11 +37,11 @@
     <div style="background: {color}" class="dot"></div>
   </div>
   <div class="flex-1 min-w-72">
-    <span style="color: {accentColor}" class="text-xl print:text-xs"
+    <span style="color: {accentColor}" class="text-xl print:text-sm"
       >{name}</span
     >
     <br />
-    <span class="text-sm print:text-xs">{desc}</span>
+    <span class="text-sm print:text-sm">{desc}</span>
   </div>
   <div>
     {n}

src/lib/MenuRow.svelte

@@ -1,22 +1,16 @@
 <script>
   import MenuFoodRow from "./MenuFoodRow.svelte";
+  import MenuRowTitle from "./MenuRowTitle.svelte";
   import MenuWineRow from "./MenuWineRow.svelte";
 
   export let post;
   export let data;
-  const altColor = data.secondaryColor ?? "#333";
-  const [_color = "", name, _notes, _desc, price, show = 0] = post ?? [];
+  const [_color = "", _name, _notes, _desc, price, show = 0] = post ?? [];
 </script>
 
 {#if show && show > 0}
-  <!-- TITLE -->
   {#if !price}
-    <div
-      style="color: {altColor}"
-      class="p-5 print:p-0 print:pb-3 text-xl font-extrabold text-center"
-    >
-      {name}
-    </div>
+    <MenuRowTitle {data} {post} />
   {:else}
     {#if data.type === "food"}
       <MenuFoodRow {data} {post} />

src/lib/MenuRowTitle.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let data;
+  export let post;
+
+  const altColor = data.secondaryColor ?? "#333";
+  const [_color, name] = post ?? [];
+</script>
+
+{#if name === "---"}
+  <div class="page-break"></div>
+{:else}
+  <div
+    style="color: {altColor}"
+    class="p-5 print:mb-3 text-2xl font-extrabold text-center"
+  >
+    {name}
+  </div>
+{/if}

src/lib/MenuWineRow.svelte

@@ -14,13 +14,18 @@
     <div style="background: {color}" class="dot"></div>
   </div>
   <div class="flex-1 lg:min-w-72">
-    <span style="color: {accentColor}" class="text-xl print:text-xs"
-      >{name}</span
-    ><br />
-    <span class="mr-6 print:text-xs">{notes}</span>
+    <div class="flex justify-center">
+      <div style="color: {accentColor}" class="text-xl print:text-md">
+        {name}
+      </div>
+      {#if desc}
+        <div class="text-xl print:text-md ml-1">- {desc}</div>
+      {/if}
+    </div>
+
+    <span class="mr-6 print:text-md">{notes}</span>
   </div>
-  <div class="mr-6 print:text-xs">{desc}</div>
-  <div class="text-lg print:text-sm font-bold" style="color: {altColor}">
+  <div class="text-lg print:text-md font-bold" style="color: {altColor}">
     {price}
   </div>
 </div>

src/menus.js

@@ -42,7 +42,7 @@ const base = {
 		primaryColor: '#898989',
 		secondaryColor: '#3b5577',
 		accentColor: '#3b5577',
-		fontFamily: 'Red Hat Display,sans-serif'
+		fontFamily: 'Quicksand'
 	},
 	ddf: {
 		address: "Piazza della Libertà 42, 16033 Lavagna GE",

src/print.css

@@ -16,7 +16,7 @@
   }
 
   * {
-    font-size: 10px;
+    font-size: 13px;
   }
 
   li {

src/routes/view/[menuId]/+page.svelte

@@ -27,7 +27,7 @@
   style="background-color: {data.bgColor ??
     '#efefef'}; font-family: {data.fontFamily}; color: {data.primaryColor ??
     '#333'}"
-  class="print:text-xs"
+  class="print:text-md"
 >
   <div class="no-print">
     <h1 style="color: {data.accentColor ?? '#333'}">
@@ -41,7 +41,7 @@
       <img src={data.pic} alt="logo" />
     {/if}
   </div>
-  <div class="table">
+  <div>
     {#if loading}
       <p class="text-center">Caricamento...</p>
     {/if}