frontend/src/css/app.css

@@ -1,41 +0,0 @@
-
-: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,5 +1,4 @@
-<div id="container-of-container">
+<div id="container">
-	<div id="container">
 	<a href="/">
 		<img src="/images/home-icon.png" alt="home" />
 	</a>
@@ -9,25 +8,18 @@
 	<a href="/settings">
 		<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: 10vh;
+		height: 68px;
-		justify-content: center;
 		width: 90%;
 		border-radius: 90px;
 		box-shadow: 0 0 50px #ccc;
 		background-color: var(--card-background-color);
-		margin: 0 auto;
+		position: absolute;
+		bottom: 0;
 		margin-bottom: 10px;
 	}
 

frontend/src/lib/components/Header.svelte

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

frontend/src/lib/components/HomeHeader.svelte

@@ -1,43 +0,0 @@
-<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,7 +59,6 @@
 		padding: 15px;
 		border-bottom: 1px solid #eee;
 		cursor: pointer;
-		
 	}
 
 	.tab {

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

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