refactor: styling cleanup

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;
+}

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 />
+        <main>
             <slot />
         </main>
+    </div>
 {/if}

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

@@ -28,12 +28,9 @@
 </svelte:head>
 
 <img
-    class={css`
+    class={"logo " +
-        width: 14rem;
+        css`
-        height: 14rem;
-        border-radius: 50%;
             box-shadow: 0 0 40px 20px ${darkTheme.color.text.gray};
-        margin: 5rem auto;
         `}
     src="/favicon.svg"
     alt="logo"
@@ -43,13 +40,7 @@
 
 <h2>Who am I?</h2>
 
-<span
+<span>
-    class={css`
-        text-align: center;
-        width: 95%;
-        max-width: 64rem;
-    `}
->
     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
+<i class="note">
-    class={css`
-        margin: 0 2rem;
-        color: #ffffffcc;
-    `}
->
     *Note that I may not be able to read your messages if you reach out to me using methods not
     listed above.
 </i>
 
-<div
+<div class="socials-and-profiles">
-    class={css`
-        margin-top: 3rem;
-        display: flex;
-        flex-wrap: wrap;
-        max-width: calc(100% - 2rem);
-        gap: 1.5rem;
-    `}
->
     <a class={SocialProfile} target="_blank" href="https://github.com/developomp">
         <GitHub />
     </a>