chore(main): improve style organization

apps/main/src/app.css

@@ -26,21 +26,6 @@ main {
     @apply text-center font-normal;
 }
 
-h1 {
-    @apply my-5 text-center text-4xl;
-}
-
-h2 {
-    /* color */
-    @apply dark:bg-dark-text-default dark:text-dark-ui-bg;
-
-    /* text */
-    @apply text-3xl font-bold;
-
-    /* spacing */
-    @apply mb-5 mt-20 px-4 py-1;
-}
-
 a {
     /* style */
     @apply no-underline hover:underline;

apps/main/src/components/Navbar.svelte

@@ -2,8 +2,10 @@
     import { page } from "$app/stores"
 </script>
 
-<nav>
+<nav
-    <ul>
+    class="mx-auto flex h-14 max-w-screen-mobile flex-col items-center justify-between px-4 xs:flex-row"
+>
+    <ul class="flex list-none gap-4 no-underline">
         <li aria-current={$page.url.pathname === "/" ? "page" : undefined}>
             <a target="_blank" href="https://blog.developomp.com">Blog</a>
         </li>
@@ -17,14 +19,6 @@
 </nav>
 
 <style lang="postcss">
-    nav {
-        @apply flex h-14 w-full items-center justify-end;
-    }
-
-    ul {
-        @apply mr-4 flex list-none gap-4 p-0 no-underline;
-    }
-
     li {
         @apply inline;
     }

apps/main/src/routes/+page.svelte

@@ -32,9 +32,15 @@
     height="200"
 />
 
-<h1><HandWave />Hello! I am <b>developomp</b></h1>
+<h1 class="my-5 text-center text-4xl">
+    <HandWave />Hello! I am <b>developomp</b>
+</h1>
 
-<h2>Who am I?</h2>
+<h2
+    class="mb-5 mt-20 px-4 py-1 text-3xl font-bold dark:bg-dark-text-default dark:text-dark-ui-bg"
+>
+    Who am I?
+</h2>
 
 <span>
     I am a <b>{age.toFixed(8)} years old</b> college student studying computer science