feat(main): simplify layout

apps/main/src/routes/(app)/+layout.svelte

@@ -5,6 +5,8 @@
 </script>
 
 <Navbar />
-<main>
+<main
+    class="mx-auto my-0 flex w-full max-w-5xl flex-col items-center px-8 py-0 text-center font-normal"
+>
     <slot />
 </main>

apps/main/src/routes/(app)/+page.svelte

@@ -24,29 +24,23 @@
 </script>
 
 <img
-    class="mx-auto my-20 aspect-square rounded-full shadow-[0_0_40px_20px] shadow-dark-text-gray"
+    class="mx-auto mb-14 mt-20 aspect-square rounded-full shadow-[0_0_40px_20px] shadow-dark-text-gray"
     src="/favicon.svg"
     alt="logo"
     width="200"
     height="200"
 />
 
-<h1 class="my-5 text-center text-4xl">
+<h1 class="mb-16 px-4 py-2 text-center text-4xl">
     <HandWave />Hello! I am <b>developomp</b>
 </h1>
 
-<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
     in Seoul, South Korea.
 </span>
 
-<div class="mt-12 flex flex-wrap justify-center">
+<div class="mt-10 flex flex-wrap justify-center">
     <a
         class="social-profile"
         target="_blank"

apps/main/src/routes/(app)/app.css

@@ -5,27 +5,30 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+#root {
+    @apply overflow-x-hidden;
+}
+
+html,
+body {
+    @apply h-screen;
+}
+
 body {
     /* SvelteKit has 8px margin by default for some reason */
     @apply m-0;
 }
 
 #root {
+    /* spacing */
+    @apply h-full;
+
     /* color */
     @apply font-noto-sans dark:bg-dark-ui-bg dark:text-dark-text-default;
 }
 
-main {
-    /* style */
-    @apply flex flex-col items-center;
-
-    /* spacing */
-    @apply mx-auto my-0 min-h-screen w-full max-w-5xl px-8 py-0 pb-20;
-
-    /* text */
-    @apply text-center font-normal;
-}
-
 a {
     /* style */
     @apply no-underline hover:underline;
@@ -43,19 +46,17 @@ b {
 }
 
 .social-profile {
-    @apply p-5;
+    @apply hover:rounded-2xl hover:bg-dark-ui-hover;
 
     * {
         @apply text-[#888888] duration-150 ease-out;
     }
 
     svg {
-        @apply w-10;
+        @apply m-5 w-10;
     }
 
     &:hover {
-        @apply rounded-2xl bg-dark-ui-hover;
-
         * {
             @apply text-white;
         }