Mobile Admin and contrast

src/app.css

@@ -20,7 +20,7 @@
 [data-theme='dark'] {
     --text-color: #f4f4f4;
     --bg-color: #0c0c0c;
-    --hover-bg-color: #1c1e1e;
+    --hover-bg-color: #2c2e2e;
     --separator-line-color: #2e343d;
     --low-emphasis-text-color: #999999;
     --primary-color: #1F96F3;

src/routes/admin/+layout.svelte

@@ -2,11 +2,15 @@
 	import { page } from '$app/state';
 	import { userState } from '$lib/shared.svelte';
 	import { PERMISSIONS } from '$lib/consts';
+	import { MediaQuery } from 'svelte/reactivity';
+
+	const largeScreen = new MediaQuery('min-width: 1024px');
 
 	let { children } = $props();
 </script>
 
-<div class="bottom-border h-10 pt-2 text-center">
+{#if largeScreen.current}
+	<div class="bottom-border h-10 pt-2 text-center">
 		{#if (userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0}
 			<a
 				href="/admin/postings"
@@ -44,8 +48,13 @@
 				><span class="material-symbols-outlined align-bottom">store</span> Companies</a
 			>
 		{/if}
-</div>
+	</div>
+{/if}
 
 <div class="base-container">
+	{#if largeScreen.current}
 		{@render children()}
+	{:else}
+		<h2 class="m-3 text-center">Please use a computer to view the admin page!</h2>
+	{/if}
 </div>