Start implementing new styles

src/lib/components/Reader/MangaPage.svelte

@@ -2,6 +2,8 @@
 	import type { Page } from '$lib/types';
 
 	export let page: Page;
+	export let left: () => void;
+	export let right: () => void;
 
 	let bold = false;
 
@@ -38,14 +40,10 @@
 		return textBox;
 	});
 
-	export let src;
+	export let src: Blob;
 </script>
 
-<div style:--bold={fontWeight}>
-	<div class="bold">
-		<label>Bold</label>
-		<input bind:checked={bold} type="checkbox" placeholder="????" />
-	</div>
+<div>
 	<img draggable="false" src={URL.createObjectURL(src)} alt="img" />
 	{#each textBoxes as { left, top, width, height, lines, fontSize, writingMode }}
 		<div
@@ -63,6 +61,16 @@
 		</div>
 		<div />
 	{/each}
+	<button
+		on:click={left}
+		class={`left-0 top-0 absolute h-full w-[200%]`}
+		style:margin-left={page.img_width * -2 + 'px'}
+	/>
+	<button
+		on:click={right}
+		class={`right-0 top-0 absolute h-full w-[200%]`}
+		style:margin-right={page.img_width * -2 + 'px'}
+	/>
 </div>
 
 <style>
@@ -71,14 +79,6 @@
 		margin: 0 auto;
 	}
 
-	.bold {
-		position: absolute;
-		color: #000;
-		right: 10px;
-		bottom: 10px;
-		z-index: 99;
-	}
-
 	.text-box {
 		color: black;
 		padding: 0;

src/lib/components/Reader/Reader.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { currentManga, currentVolume } from '$lib/catalog';
-	import Button from '$lib/components/Button.svelte';
-	import { Panzoom, zoomOriginal } from '$lib/panzoom';
+	import { currentVolume } from '$lib/catalog';
+	import { Panzoom } from '$lib/panzoom';
 	import MangaPage from './MangaPage.svelte';
 
 	const volume = $currentVolume;
@@ -19,22 +18,8 @@
 	}
 </script>
 
-{#if volume}
-	<div>
-		<Button on:click={zoomOriginal}>Reset Zoom</Button>
-		<Button on:click={left}>{'<'}</Button>
-		<Button on:click={right}>{'>'}</Button>
-	</div>
+{#if volume && pages}
 	<Panzoom>
-		<MangaPage page={pages[page - 1]} src={Object.values(volume?.files)[page - 1]} />
+		<MangaPage page={pages[page - 1]} src={Object.values(volume?.files)[page - 1]} {left} {right} />
 	</Panzoom>
 {/if}
-
-<style>
-	div {
-		position: absolute;
-		bottom: 10px;
-		left: 10px;
-		z-index: 1;
-	}
-</style>