From 28907e3b3dcd435b8b33e14861cbd7d29a6e0a96 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Thu, 6 Jul 2023 14:21:13 +0900
Subject: [PATCH] chore(main): improve style organization

---
 apps/main/src/app.css                  | 15 ---------------
 apps/main/src/components/Navbar.svelte | 14 ++++----------
 apps/main/src/routes/+page.svelte      | 10 ++++++++--
 3 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/apps/main/src/app.css b/apps/main/src/app.css
index 50d8d07..3a86d42 100644
--- a/apps/main/src/app.css
+++ b/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;
diff --git a/apps/main/src/components/Navbar.svelte b/apps/main/src/components/Navbar.svelte
index 59e1bdb..ff290aa 100644
--- a/apps/main/src/components/Navbar.svelte
+++ b/apps/main/src/components/Navbar.svelte
@@ -2,8 +2,10 @@
     import { page } from "$app/stores"
 </script>
 
-<nav>
-    <ul>
+<nav
+    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;
     }
diff --git a/apps/main/src/routes/+page.svelte b/apps/main/src/routes/+page.svelte
index 984aad5..f5c6929 100644
--- a/apps/main/src/routes/+page.svelte
+++ b/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