changed from modal to client-side router

frontend/tailwind.config.js

@@ -1,24 +1,45 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{svelte,js,ts,jsx,tsx}",
-    "./node_modules/flowbite/**/*.{html,js,svelte,ts}",
-    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
-  ],
-  plugins: [
-    require('flowbite/plugin')
-  ],
+    content: [
+        "./index.html",
+        "./src/**/*.{svelte,js,ts,jsx,tsx}",
+        "./node_modules/flowbite/**/*.{html,js,svelte,ts}",
+        "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
+    ],
+    plugins: [
+        require('flowbite/plugin')
+    ],
 
-  darkMode: 'media',
+    darkMode: 'media',
 
-  theme: {
-    extend: {
-      colors: {
-        // flowbite-svelte
-        primary: { 50: '#FFF5F2', 100: '#FFF1EE', 200: '#FFE4DE', 300: '#FFD5CC', 400: '#FFBCAD', 500: '#FE795D', 600: '#EF562F', 700: '#EB4F27', 800: '#CC4522', 900: '#A5371B'},
-      }
+    theme: {
+        container: {
+            center: true,
+            padding: {
+                DEFAULT: '1rem',
+                sm: '2rem',
+                lg: '4rem',
+                xl: '5rem',
+                '2xl': '6rem',
+            },
+        },
+        extend: {
+            colors: {
+                // flowbite-svelte
+                primary: {
+                    50: '#FFF5F2',
+                    100: '#FFF1EE',
+                    200: '#FFE4DE',
+                    300: '#FFD5CC',
+                    400: '#FFBCAD',
+                    500: '#FE795D',
+                    600: '#EF562F',
+                    700: '#EB4F27',
+                    800: '#CC4522',
+                    900: '#A5371B'
+                },
+            }
+        }
     }
-  }
 }