From 8e63c15c82c0846ba7a54e7fdd140739ed74dedc Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Mon, 26 Jun 2023 10:24:36 +0900
Subject: [PATCH] refactor: styling cleanup

---
 apps/main/src/app.css               | 58 ++++++++++++++++++++++++++-
 apps/main/src/routes/+layout.svelte | 10 ++---
 apps/main/src/routes/+page.svelte   | 62 ++++-------------------------
 3 files changed, 69 insertions(+), 61 deletions(-)

diff --git a/apps/main/src/app.css b/apps/main/src/app.css
index a97e1d4..2537440 100644
--- a/apps/main/src/app.css
+++ b/apps/main/src/app.css
@@ -8,9 +8,12 @@ body {
 
 main {
     display: flex;
+    width: calc(100% - 2rem);
+    max-width: 64rem;
     flex-direction: column;
+    padding-bottom: 5rem;
     align-items: center;
-
+    text-align: center;
     min-height: 100vh;
 
     /* center main horizontally */
@@ -40,3 +43,56 @@ p {
 b {
     font-weight: 700;
 }
+
+/* main logo image */
+
+.logo {
+    width: 14rem;
+    height: 14rem;
+    border-radius: 50%;
+    margin: 5rem auto;
+}
+
+/* table */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 1rem 0;
+
+    margin-bottom: 1rem;
+}
+
+th {
+    background-color: #ffffff22;
+    font-weight: 700;
+}
+
+th,
+td {
+    padding: 8px;
+    text-align: center;
+    width: 10rem;
+}
+
+th:nth-child(1),
+td:nth-child(1) {
+    text-align: right;
+}
+
+th:nth-child(3),
+td:nth-child(3) {
+    text-align: left;
+}
+
+/* Socials & Profiles */
+
+.socials-and-profiles {
+    margin-top: 3rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+}
+
+.note {
+    color: #ffffffcc;
+}
diff --git a/apps/main/src/routes/+layout.svelte b/apps/main/src/routes/+layout.svelte
index 609f924..f3ae515 100644
--- a/apps/main/src/routes/+layout.svelte
+++ b/apps/main/src/routes/+layout.svelte
@@ -17,10 +17,8 @@
 
 <!-- prevent flickering while theme is loading -->
 {#if browser}
-    <main
+    <div
         class={css`
-            padding-bottom: 5rem;
-
             font-family: ${darkTheme.font.sansSerif};
 
             color: ${darkTheme.color.text.default};
@@ -44,6 +42,8 @@
         `}
     >
         <Navbar />
-        <slot />
-    </main>
+        <main>
+            <slot />
+        </main>
+    </div>
 {/if}
diff --git a/apps/main/src/routes/+page.svelte b/apps/main/src/routes/+page.svelte
index a251a76..43c9adf 100644
--- a/apps/main/src/routes/+page.svelte
+++ b/apps/main/src/routes/+page.svelte
@@ -28,13 +28,10 @@
 </svelte:head>
 
 <img
-    class={css`
-        width: 14rem;
-        height: 14rem;
-        border-radius: 50%;
-        box-shadow: 0 0 40px 20px ${darkTheme.color.text.gray};
-        margin: 5rem auto;
-    `}
+    class={"logo " +
+        css`
+            box-shadow: 0 0 40px 20px ${darkTheme.color.text.gray};
+        `}
     src="/favicon.svg"
     alt="logo"
 />
@@ -43,13 +40,7 @@
 
 <h2>Who am I?</h2>
 
-<span
-    class={css`
-        text-align: center;
-        width: 95%;
-        max-width: 64rem;
-    `}
->
+<span>
     I am a <b>{new Date().getFullYear() - 2002} years old</b> college student studying computer science
     in Seoul, South Korea.
 </span>
@@ -58,36 +49,10 @@
 
 <table
     class={css`
-        border-collapse: collapse;
-        border-spacing: 1rem 0;
-
-        margin-bottom: 1rem;
-
-        width: calc(100% - 2rem);
-        max-width: 64rem;
-
-        th {
-            background-color: #ffffff22;
-            font-weight: 700;
-        }
-
         th,
         td {
-            padding: 8px;
-            text-align: center;
-            width: 10rem;
             border: 1px solid ${darkTheme.component.table.color.border};
         }
-
-        th:nth-child(1),
-        td:nth-child(1) {
-            text-align: right;
-        }
-
-        th:nth-child(3),
-        td:nth-child(3) {
-            text-align: left;
-        }
     `}
 >
     <tr>
@@ -112,25 +77,12 @@
     </tr>
 </table>
 
-<i
-    class={css`
-        margin: 0 2rem;
-        color: #ffffffcc;
-    `}
->
+<i class="note">
     *Note that I may not be able to read your messages if you reach out to me using methods not
     listed above.
 </i>
 
-<div
-    class={css`
-        margin-top: 3rem;
-        display: flex;
-        flex-wrap: wrap;
-        max-width: calc(100% - 2rem);
-        gap: 1.5rem;
-    `}
->
+<div class="socials-and-profiles">
     <a class={SocialProfile} target="_blank" href="https://github.com/developomp">
         <GitHub />
     </a>