webapp: scrapped plan to implement settings (for now)

webapp/src/App.svelte

@@ -13,10 +13,6 @@
 		{ name: "settings", label: "Settings" },
 	];
 
-	let settings = {
-		tempUnit: "celsius",
-	};
-
 	let buffer: Array<{ [key: string]: any }> = [];
 	let data: typeof buffer = [];
 
@@ -65,7 +61,7 @@
 		{/if}
 
 		{#if currentTab === "settings"}
-			<Settings bind:settings />
+			<Settings />
 		{/if}
 	</section>
 
@@ -129,7 +125,7 @@
 		background-color: var(--ctp-mocha-mantle);
 	}
 
-	@media (width <= 1000px) {
+	@media (width <= 900px) {
 		main {
 			--spacing: 1rem;
 			display: block;

webapp/src/lib/Card.svelte

@@ -7,8 +7,6 @@
 <style>
 	div {
 		padding: 1rem;
-		display: flex;
-		gap: 1rem;
 		border-radius: 0.5rem;
 		background-color: var(--ctp-mocha-surface0);
 	}

webapp/src/lib/Settings.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import Card from "./Card.svelte";
-
-	export let settings: Record<string, any>;
 </script>
 
 <Card>
-	<p>Temperature unit</p>
-	<select name="temp" id="temp" bind:value={settings.tempUnit}>
-		<option value="celsius">&deg;C</option>
-		<option value="fahrenheit">&deg;F</option>
-		<option value="kelvin">K</option>
-	</select>
+	<p>Settings are currently not implemented.</p>
 </Card>
+
+<style>
+	p {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+</style>

webapp/src/lib/Tabs.svelte

@@ -16,8 +16,8 @@
 
 <style>
 	nav {
-		display: flex;
 		gap: 0.5rem;
+		display: flex;
 		justify-content: center;
 		text-align: center;
 	}
@@ -26,7 +26,7 @@
 		width: clamp(6.5rem, 10vw, 10rem);
 		padding: 0.5rem 1rem;
 		background-color: var(--ctp-mocha-surface0);
-		border-radius: 1rem;
+		border-radius: 2rem;
 
 		/* Undo browser default */
 		border: none;
@@ -39,4 +39,10 @@
 		color: var(--ctp-mocha-base);
 		background-color: var(--ctp-mocha-red);
 	}
+
+	@media (width <= 900px) {
+		nav {
+			margin-block: 1rem;
+		}
+	}
 </style>