Fix css

frontend/src/css/app.css

@@ -0,0 +1,41 @@
+
+:root {
+    --footer-height: calc(68px + 20px + 20px);
+    --accent-color: #213c8b;
+    --pianello-red: #de0e1b;
+    --pianello-yellow: #f6ae04;
+    --pianello-blue: #213c8b;
+    --card-background-color: #f9f4f1;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+    background-color: #fff;
+    font-family: 'Roboto-Regular';
+    display: grid;
+}
+
+header,
+main, 
+footer {
+    height: 100%;
+    width: 100%;
+    display: grid;
+    place-items: center;
+}
+
+@font-face {
+    font-family: 'Roboto-Regular';
+    src: url('/fonts/roboto/Roboto-Regular.ttf') format('TrueType');
+}

frontend/src/lib/components/BottomAppBar.svelte

@@ -1,3 +1,4 @@
+<div id="container-of-container">
 	<div id="container">
 		<a href="/">
 			<img src="/images/home-icon.png" alt="home" />
@@ -9,17 +10,24 @@
 			<img src="/images/settings-icon.png" alt="settings" />
 		</a>
 	</div>
+</div>
 
 <style>
+	#container-of-container {
+		width: 100%;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+	}
 	#container {
 		display: flex;
-		height: 68px;
+		height: 10vh;
+		justify-content: center;
 		width: 90%;
 		border-radius: 90px;
 		box-shadow: 0 0 50px #ccc;
 		background-color: var(--card-background-color);
-		position: absolute;
-		bottom: 0;
+		margin: 0 auto;
 		margin-bottom: 10px;
 	}
 

frontend/src/lib/components/Header.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
 	export let title: string = 'Naturalistici';
-	export let transparent = false;
 
 	const goBack = () => {
 		history.back();
 	};
 </script>
 
-{#if transparent}
-	<div style='background-color: transparent; color: black; justify-content: space-between; margin: 0 auto; width: 80%;'>
+	<div style=''>
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<!-- svelte-ignore a11y-missing-attribute -->
@@ -18,28 +16,20 @@
 		
 		<img src="/images/app-bar-logo.png" alt="" />
 	</div>
-{:else}
-	<div>
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-missing-attribute -->
-		<a on:click={goBack}>
-			<img class="back" src="/images/white-back-arrow.png" alt="" />
-		</a>
-		<p>Percorsi <b>{title}</b></p>
-		<img src="/images/app-bar-logo.png" alt="" />
-	</div>
-{/if}
 
 <style>
 	div {
-		color: white;
-		padding: 5px;
+		position: fixed;
+		padding: 15px;
+		background-color: transparent;
+		color: black;
+		margin: 0 auto;
+		padding-left: 15px;
+		padding-right: 15px;
 		width: 100%;
 		display: flex;
-		justify-content: space-evenly;
+		justify-content: space-between;
 		align-items: center;
-		background-color: #de0e1b;
 	}
 	div a {
 		cursor: pointer;

frontend/src/lib/components/HomeHeader.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	export let title: string = 'Naturalistici';
+
+	const goBack = () => {
+		history.back();
+	};
+</script>
+
+<div>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-missing-attribute -->
+	<a on:click={goBack}>
+		<img class="back" src="/images/white-back-arrow.png" alt="" />
+	</a>
+	<p>Percorsi <b>{title}</b></p>
+	<img src="/images/app-bar-logo.png" alt="" />
+</div>
+
+<style>
+	div {
+		color: white;
+		padding: 5px;
+		width: 100%;
+		display: flex;
+		justify-content: space-evenly;
+		align-items: center;
+		background-color: #de0e1b;
+	}
+	div a {
+		cursor: pointer;
+	}
+	div a img {
+		height: 40px;
+	}
+
+	img {
+		height: 40px;
+	}
+	.back {
+		height: 20px;
+	}
+</style>

frontend/src/lib/components/Tabs.svelte

@@ -59,6 +59,7 @@
 		padding: 15px;
 		border-bottom: 1px solid #eee;
 		cursor: pointer;
+		
 	}
 
 	.tab {

frontend/src/routes/routes/[slug]/+page.svelte

@@ -5,7 +5,7 @@
 </script>
 
 
-<Header transparent></Header>
+<Header></Header>
 <img src='/splash.jpeg' alt='splash'>
 
 <div id='divider'>
@@ -21,10 +21,12 @@
 	#divider {
 		background: white;
 		margin-top: 0px;
+		margin-top: 20vh;
 	}
 
 	img {
 		width: 100%;
+		height: 100%;
 		position: absolute;
 		z-index: -1;
 	}