minimal serving size reduction by using hashed css classes

Remove separate .button_wrapper_shadow element and apply box-shadow
directly to .button_wrapper in mobile view. Reduces DOM by 1 node.

src/lib/components/Header.svelte

@@ -212,17 +212,8 @@ footer{
 }
 
 @media screen and (max-width: 800px) {
-	.button_wrapper_shadow{
-		box-shadow: 0 1em 1rem 0rem rgba(0,0,0,0.4);
-		position: fixed;
-		width: 100%;
-		height: 4rem;
-		top: 0;
-		left: 0;
-		z-index: 9;
-		pointer-events: none;
-	}
 	.button_wrapper{
+		box-shadow: 0 1em 1rem 0rem rgba(0,0,0,0.4);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -322,7 +313,6 @@ footer{
 </style>
 <div class=wrapper lang=de>
 <div>
-<span class=button_wrapper_shadow></span>
 <div class=button_wrapper>
 <a href="/" aria-label="Home"><Symbol></Symbol></a>
 <div class="right-buttons">

src/lib/components/IngredientsPage.svelte

@@ -400,24 +400,16 @@ font-family: sans-serif;
 {/if}
 
 <h3>{labels.adjustAmount}</h3>
-<div class=multipliers>
+<form method="get" class="multipliers">
+	{#each Array.from(currentParams.entries()) as [key, value]}
+		{#if key !== 'multiplier'}
+			<input type="hidden" name={key} {value} />
+		{/if}
+	{/each}
 	{#each multiplierOptions as opt}
-		<form method="get" style="display: inline;">
+		<button type="submit" name="multiplier" value={opt.value} class="g-pill g-btn-light g-interactive" class:selected={multiplier === opt.value} onclick={(e) => handleMultiplierClick(e, opt.value)}>{@html opt.label}</button>
-			<input type="hidden" name="multiplier" value={opt.value} />
-			{#each Array.from(currentParams.entries()) as [key, value]}
-				{#if key !== 'multiplier'}
-					<input type="hidden" name={key} {value} />
-				{/if}
-			{/each}
-			<button type="submit" class="g-pill g-btn-light g-interactive" class:selected={multiplier === opt.value} onclick={(e) => handleMultiplierClick(e, opt.value)}>{@html opt.label}</button>
-		</form>
-	{/each}
-	<form method="get" style="display: inline;" class="custom-multiplier g-pill g-btn-light g-interactive" onsubmit={handleCustomSubmit}>
-		{#each Array.from(currentParams.entries()) as [key, value]}
-			{#if key !== 'multiplier'}
-				<input type="hidden" name={key} {value} />
-			{/if}
 	{/each}
+	<span class="custom-multiplier g-pill g-btn-light g-interactive">
 		<input
 			type="text"
 			name="multiplier"
@@ -429,8 +421,8 @@ font-family: sans-serif;
 			oninput={handleCustomInput}
 		/>
 		<button type="submit" class="custom-button">x</button>
-	</form>
+	</span>
-</div>
+</form>
 
 <h2>{labels.ingredients}</h2>
 {#each flattenedIngredients as list, listIndex}

src/lib/components/InstructionsPage.svelte

@@ -162,17 +162,15 @@ h3{
 {/if}
 
 
-{#if data.fermentation}
+{#if data.fermentation?.bulk}
-	{#if data.fermentation.bulk}
 	<div><h3>{labels.bulkFermentation}</h3>{data.fermentation.bulk}</div>
-	{/if}
-
-	{#if data.fermentation.final}
-		<div><h3>{labels.finalProof}</h3> {data.fermentation.final}</div>
-	{/if}
 {/if}
 
-{#if data.baking.temperature}
+{#if data.fermentation?.final}
+	<div><h3>{labels.finalProof}</h3> {data.fermentation.final}</div>
+{/if}
+
+{#if data.baking?.temperature}
 <div><h3>{labels.baking}</h3> {data.baking.length} {labels.at} {data.baking.temperature} °C {data.baking.mode}</div>
 {/if}
 

src/lib/components/Search.svelte

@@ -387,7 +387,7 @@ scale: 0.8 0.8;
   </button>
 </form>
 
-<div style="visibility: {showFilters ? 'visible' : 'hidden'}; pointer-events: {showFilters ? 'auto' : 'none'};">
+{#if showFilters}
   <FilterPanel
     availableCategories={categories}
     {availableTags}
@@ -408,4 +408,4 @@ scale: 0.8 0.8;
     onFavoritesToggle={handleFavoritesToggle}
     onLogicModeToggle={handleLogicModeToggle}
   />
-</div>
+{/if}

src/lib/components/TitleImgParallax.svelte

@@ -193,10 +193,8 @@ dialog button{
 </section>
 
 <dialog id=img_carousel>
-	<div>
 	<img class:unblur={isloaded} {src} {alt}>
 	<button class=action_button onkeydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} onclick={close_dialog_img}>
 		<Cross fill=white width=2rem height=2rem></Cross>
 	</button>
-	</div>
 </dialog>

src/routes/[recipeLang=recipeLang]/[name]/+page.svelte

@@ -146,32 +146,45 @@ h2.section-label{
 }
 
 .wrapper_wrapper{
-	background-color: #fbf9f3;
+	--bg-color: #fbf9f3;
+	display: grid;
+	grid-template-columns: 1fr 2fr;
+	max-width: 1000px;
+	margin-inline: auto;
 	padding-top: 10rem;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 	margin-bottom: 3rem;
 	transform: translateY(-7rem);
 	z-index: -2;
+	position: relative;
+}
+.wrapper_wrapper::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 100vw;
+	background-color: var(--bg-color);
+	z-index: -1;
+}
+.addendum, .date {
+	grid-column: 1 / -1;
+	justify-self: center;
 }
 @media (prefers-color-scheme: dark) {
 	.wrapper_wrapper{
-		background-color: var(--background-dark);
+		--bg-color: var(--background-dark);
 	}
 }
-
-.wrapper{
-	display: flex;
-	flex-direction: row;
-	max-width: 1000px;
-	justify-content: center;
-	margin-inline: auto;
-}
-
 @media screen and (max-width: 700px){
-	.wrapper{
+	.wrapper_wrapper{
-		flex-direction:column;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.wrapper_wrapper > :global(.ingredients),
+	.wrapper_wrapper > :global(.instructions) {
+		width: 100%;
 	}
 }
 .title{
@@ -213,7 +226,7 @@ h2{
 }
 .addendum{
 	max-width: 800px;
-	margin-inline: auto;
+	justify-self: center;
 	padding-inline: 2rem;
 }
 @media screen and (max-width: 800px){
@@ -327,10 +340,8 @@ h2{
 </div>
 
 <div class=wrapper_wrapper>
-<div class=wrapper>
 <IngredientsPage {data}></IngredientsPage>
 <InstructionsPage {data}></InstructionsPage>
-</div>
 <div class=addendum>
 {#if data.addendum}
 	{@html data.addendum}

svelte.config.js

@@ -6,6 +6,11 @@ const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	preprocess: [vitePreprocess()],
+	compilerOptions: {
+        	// Shorter CSS hash: "svelte-1abc123" (14 chars) → "abc12" (4 chars)
+        	cssHash: ({ hash, css }) => `${hash(css).slice(0, 4)}`
+      	},
+
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.